html, body { scroll-behavior: smooth; }
/* ═══ Component Library — 쇼케이스 전용 레이아웃 ═══ */
html { height: 100%; overflow: hidden; }
body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); margin: 0; padding: 0; overflow-y: auto; }

/* 헤더 */
/* .cl-header — glass로 이동 */




/* 네비게이션 */
/* .cl-nav — glass로 이동 */



/* 레이아웃 */
.cl-main { max-width: 1200px; margin: 0 auto; padding: var(--s-2) var(--s-3) var(--s-6); }
.cl-section { margin-bottom: var(--s-8); }
.cl-section-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); margin: 0 0 var(--s-1) 0; }
.cl-section-desc { font-size: var(--text-sm); color: var(--text-sub); margin: 0 0 var(--s-4) 0; }
.cl-grid { display: grid; gap: var(--s-3); }
.cl-grid-2 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cl-grid-3 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.cl-grid-4 { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.cl-card { background: var(--bg-raised); border-radius: var(--radius); padding: var(--s-4); }
.cl-label { font-size: var(--text-sm); color: var(--text-faint); font-family: var(--font-mono); margin-top: var(--s-2); }
.cl-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.cl-code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-sub); background: var(--surface); padding: var(--s-1) var(--s-1); border-radius: var(--radius-s); }

/* 색상 스와치 */


/* 버튼 프리뷰 */
.cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--radius-s); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: opacity var(--duration-fast); border: none; font-family: var(--font); }
.cl-btn:hover { opacity: 0.85; }
.cl-btn--accent { background: var(--accent); color: var(--accent-on); }
.cl-btn--ghost { background: var(--surface-hover); color: var(--text); }
.cl-btn--danger { background: var(--red); color: var(--text); }
.cl-btn--outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-bold); }
.cl-btn--sm { padding: var(--s-1) var(--s-2); font-size: var(--text-sm); }

/* 배지/상태 */
.cl-badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.cl-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); flex-shrink: 0; }

/* 입력 */
.cl-input { width: 100%; padding: var(--s-2) var(--s-3); background: var(--surface); border: none; border-radius: var(--radius-s); color: var(--text); font-size: var(--text-sm); font-family: var(--font); outline: none; box-sizing: border-box; }
.cl-input:focus { box-shadow: 0 0 0 2px var(--accent-glow); }
.cl-input::placeholder { color: var(--text-faint); }
.cl-textarea { resize: vertical; min-height: var(--s-12); }
.cl-select { appearance: none; padding-right: var(--s-6); background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b8b92' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-2) center; }

/* 토스트 프리뷰 */
.cl-toast { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--radius-s); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.cl-toast--success { background: var(--green-bg); color: var(--green); }
.cl-toast--error { background: var(--red-bg); color: var(--red); }
.cl-toast--warning { background: var(--amber-bg); color: var(--amber); }
.cl-toast--info { background: var(--teal-bg); color: var(--teal); }

/* 프로그레스 */
.cl-progress { height: 4px; background: var(--surface); border-radius: var(--radius-s); overflow: hidden; }
.cl-progress-bar { height: 100%; border-radius: var(--radius-s); transition: width var(--duration-moderate) var(--easing-smooth); }

/* 빈 상태 */
.cl-empty { text-align: center; padding: var(--s-6) var(--s-4); }
.cl-empty-icon { font-size: var(--text-5xl); margin-bottom: var(--s-3); opacity: 0.3; }
.cl-empty-text { font-size: var(--text-sm); color: var(--text-sub); }

/* 애니메이션 */
@keyframes cl-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes cl-shimmer {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 0.3; }
}

/* 반응형 */
@media (max-width: 640px) {
  .cl-main { padding: var(--s-3) var(--s-3) var(--s-6); }
  .cl-grid-2 { grid-template-columns: 1fr 1fr; }
  .cl-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.cl-nav.cl-nav--solo { padding-top: var(--s-4); }

/* 색상 스와치 */
.cl-swatch { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; min-width: 160px; }
.cl-swatch-color { width: var(--s-8); height: var(--s-8); border-radius: 50%; border: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.cl-swatch code { font-size: var(--text-sm, 11px); color: var(--text); }
.cl-swatch .cl-swatch-val { font-size: var(--text-sm, 10px); color: var(--text-faint); }

/* Radius 박스 */
.cl-radius-box { width: 80px; height: 80px; background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); }
.cl-radius-box code { font-size: var(--text-sm, 10px); color: var(--text); }
.cl-radius-box span { font-size: var(--text-sm, 10px); color: var(--text-faint); }

/* Shadow 박스 */
.cl-shadow-box { width: 160px; height: 80px; background: var(--surface); border-radius: var(--radius, 12px); display: flex; align-items: center; justify-content: center; }
.cl-shadow-box strong { font-size: var(--text-sm, 12px); font-weight: var(--weight-medium, 500); }

/* 예제 블록 */
.cl-example { margin-bottom: var(--s-5, 24px); }
.cl-example-label { font-size: var(--text-sm, 12px); color: var(--text-sub); margin-bottom: var(--s-2, 8px); font-weight: var(--weight-medium, 500); }
.cl-example-content { display: flex; flex-wrap: wrap; gap: var(--s-2, 8px); align-items: flex-start; }

/* === 4단계 계층 구분 === */
.cl-section.cl-tier-section {
  border-top: 2px solid var(--accent);
  padding-top: var(--s-6, 32px);
  margin-top: var(--s-8, 48px);
}
.cl-section.cl-tier-section .cl-section-title {
  font-size: var(--text-xl, 20px);
  color: var(--accent);
  letter-spacing: -0.02em;
}
.cl-nav a[href^='#tier-'] {
  color: var(--accent);
  font-weight: var(--weight-semibold, 600);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line, rgba(255,255,255,0.1));
}

/* === 구성도 트리 (Composition Tree) === */
.cl-composition {
  margin: var(--s-3, 16px) 0;
  padding: var(--s-3, 16px);
  background: var(--surface);
  border-radius: var(--radius, 12px);
}
.cl-composition h4 {
  font-size: var(--text-sm, 12px);
  color: var(--text-sub);
  margin: 0;
  font-weight: var(--weight-medium, 500);
}
.cl-tree-root {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  padding: var(--s-1, 4px) 0;
  margin-bottom: var(--s-1, 4px);
}
.cl-tree-children {
  position: relative;
  padding-left: var(--s-4, 20px);
  border-left: 1px solid var(--line, rgba(255,255,255,.1));
  margin-left: var(--s-2, 8px);
}
.cl-tree-node {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  padding: var(--s-1, 4px) 0;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  font-size: var(--text-sm, 13px);
  transition: color var(--duration-fast), background var(--duration-fast);
  border-radius: var(--radius, 6px);
  padding-left: var(--s-2, 8px);
  margin-left: calc(-1 * var(--s-2, 8px));
}
.cl-tree-node::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--s-2, 8px));
  top: 50%;
  width: var(--s-3, 12px);
  height: 1px;
  background: var(--line, rgba(255,255,255,.1));
}
.cl-tree-node:hover {
  color: var(--accent);
  background: var(--surface-hover);
}
.cl-tree-node:last-child::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--s-4, 20px) - 1px);
  top: 50%;
  bottom: -1px;
  width: 1px;
  background: var(--surface);
}

/* 구성도 뱃지 */
.cl-tree-badge.atom { background: var(--accent-dim); color: var(--accent); }
.cl-tree-badge.molecule { background: rgba(139,92,246,.12); color: #8b5cf6; }
.cl-tree-badge.compound { background: rgba(59,130,246,.12); color: #3b82f6; }

/* === 사용처 (Used By) === */
.cl-used-by {
  margin: var(--s-3, 16px) 0;
  padding: var(--s-3, 16px);
  background: var(--surface);
  border-radius: var(--radius, 12px);
}
.cl-used-by h4 {
  font-size: var(--text-sm, 12px);
  color: var(--text-sub);
  margin: 0;
  font-weight: var(--weight-medium, 500);
}
.cl-used-by-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1, 4px);
}
.cl-used-by-link {
  cursor: pointer;
  transition: opacity var(--duration-fast);
}
.cl-used-by-link:hover {
  opacity: .8;
}

/* 하위 트리 접기/펼치기 */
.cl-tree-sub {
  padding-left: var(--s-4, 20px);
  margin-left: var(--s-2, 8px);
}
.cl-tree-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-1, 4px);
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: var(--s-1, 2px) var(--s-1, 4px);
  border-radius: var(--radius-xs, 6px);
  font-family: var(--font);
  font-size: var(--text-sm, 11px);
  transition: color var(--duration-fast), background var(--duration-fast);
}
.cl-tree-toggle:hover {
  color: var(--accent);
  background: var(--surface-hover);
}
.cl-tree-toggle svg {
  transition: transform var(--duration-fast) var(--easing-smooth);
  flex-shrink: 0;
}

/* 구성도 기본 닫힘 */
.cl-composition--collapsed .cl-tree-root,
.cl-composition--collapsed .cl-tree-children,
.cl-composition--collapsed .cl-tree-sub { display: none; }
.cl-composition-header:hover { color: var(--accent); }
.cl-composition--collapsed { padding-bottom: var(--s-3); }
.cl-composition--collapsed .cl-composition-header { margin-bottom: 0; }

/* 네비 계층 라벨 */
/* 2행 네비 */
/* .cl-nav-tiers — glass로 이동 */
/* .cl-tier-btn — glass로 이동 */


/* .cl-nav-items — glass로 이동 */
.cl-nav-items::-webkit-scrollbar { display: none; }
.cl-swatch-info { display: flex; flex-direction: column; gap: var(--s-0); }