/* ============================================================
   DRUMZONE · Components
   버튼 / 칩 / 배지 / 카드 / 입력폼 / 미터 / 테이블 / 토스트 /
   바텀시트 / 아코디언 / 플랜카드 / 빈상태 / 스켈레톤
   ------------------------------------------------------------
   컨셉 요약 (tokens.css 참고)
     · 컨트롤(버튼·칩·검색)은 알약, 면(카드·패널)은 크게 둥글게.
     · 악보가 보이는 자리에는 종이(--dz-paper)를 깝니다.
     · LIME = 누를 수 있는 것, EMBER = 읽어야 할 것.
   ============================================================ */

/* ------------------------------------------------------------
   Button — 알약형
   .dz-btn                      기본(보조) — 어두운 채움
   .dz-btn--primary             주 CTA — Electric Lime
   .dz-btn--light               종이 채움 (Hero 보조 CTA)
   .dz-btn--ghost               테두리만
   .dz-btn--text                텍스트 링크형
   size: --sm / 기본 / --lg
   상태: :disabled, [aria-pressed="true"]
   ------------------------------------------------------------ */
.dz-btn {
  height: var(--dz-ctrl);
  padding: 0 var(--dz-sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dz-sp-2);
  background: var(--dz-btn-bg);
  color: var(--dz-text);
  border: 0;
  border-radius: var(--dz-r-full);
  font-size: var(--dz-fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background   var(--dz-dur-fast) var(--dz-ease),
    box-shadow   var(--dz-dur)      var(--dz-ease),
    transform    var(--dz-dur-fast) var(--dz-ease);
}
.dz-btn:hover { background: var(--dz-btn-bg-hover); color: var(--dz-text); }
.dz-btn:active { transform: translateY(1px); }

.dz-btn--primary { background: var(--dz-accent); color: var(--dz-accent-ink); }
.dz-btn--primary:hover {
  background: var(--dz-accent);
  color: var(--dz-accent-ink);
  box-shadow: var(--dz-accent-glow);   /* 눌리는 것에만 빛이 돕니다 */
}

/* --light 는 '바닥의 반대' 채움입니다. 밝은 테마에서는 검정, 어두운 테마에서는 종이. */
.dz-btn--light { background: var(--dz-invert); color: var(--dz-invert-ink); }
.dz-btn--light:hover { background: var(--dz-invert-hover); color: var(--dz-invert-ink); }

.dz-btn--ghost {
  background: transparent;
  border: 1px solid var(--dz-line-control);
  color: var(--dz-text-2);
  font-weight: 500;
}
.dz-btn--ghost:hover { background: var(--dz-surface-hover); border-color: var(--dz-text-4); color: var(--dz-text); }

.dz-btn--text {
  height: auto; padding: 0; background: transparent;
  color: var(--dz-text-3); font-weight: 500;
}
.dz-btn--text:hover { background: transparent; color: var(--dz-accent-fg); }

.dz-btn--sm { height: var(--dz-ctrl-sm); padding: 0 var(--dz-sp-4); font-size: var(--dz-fs-xs); }
.dz-btn--lg { height: var(--dz-ctrl-lg); padding: 0 var(--dz-sp-8); font-size: 16px; }
.dz-btn--block { width: 100%; }

.dz-btn:disabled,
.dz-btn[aria-disabled="true"] {
  background: var(--dz-surface);
  color: var(--dz-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* 아이콘 전용 버튼 — 반드시 aria-label 부여 */
.dz-btn-icon {
  width: var(--dz-ctrl); height: var(--dz-ctrl);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--dz-line-control);
  border-radius: var(--dz-r-full);
  color: var(--dz-text-3);
  cursor: pointer;
  transition: background var(--dz-dur-fast) var(--dz-ease), color var(--dz-dur-fast) var(--dz-ease);
}
.dz-btn-icon:hover { background: var(--dz-surface-hover); color: var(--dz-text); }

/* ------------------------------------------------------------
   Theme Toggle — 헤더의 테마 전환 버튼
   지금 테마가 아니라 '누르면 갈 테마'의 아이콘을 보여 줍니다.
   ------------------------------------------------------------ */
.dz-theme-toggle__sun { display: none; }
.dz-theme-toggle__moon { display: block; }
:root[data-theme="stage"] .dz-theme-toggle__sun,
:root[data-theme="dark"]  .dz-theme-toggle__sun { display: block; }
:root[data-theme="stage"] .dz-theme-toggle__moon,
:root[data-theme="dark"]  .dz-theme-toggle__moon { display: none; }

/* ------------------------------------------------------------
   Chip — 필터 / 정렬 / 빠른탐색
   선택 상태는 aria-pressed="true" 로 표현합니다.
   ------------------------------------------------------------ */
.dz-chip {
  height: var(--dz-ctrl-sm);
  padding: 0 var(--dz-sp-4);
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--dz-text-3);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-full);
  font-size: var(--dz-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color var(--dz-dur-fast) var(--dz-ease),
    background   var(--dz-dur-fast) var(--dz-ease),
    color        var(--dz-dur-fast) var(--dz-ease);
}
.dz-chip:hover { border-color: var(--dz-line-strong); color: var(--dz-text); background: var(--dz-surface); }
.dz-chip[aria-pressed="true"] {
  background: var(--dz-accent);
  border-color: var(--dz-accent);
  color: var(--dz-accent-ink);
  font-weight: 600;
}
.dz-chip--sm { height: 30px; padding: 0 var(--dz-sp-3); font-size: var(--dz-fs-xs); }

/* 가로 스크롤 칩 줄 (모바일) */
.dz-chiprow {
  display: flex;
  align-items: center;
  gap: var(--dz-sp-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.dz-chiprow::-webkit-scrollbar { display: none; }
.dz-chiprow > * { flex-shrink: 0; }

/* ------------------------------------------------------------
   Badge / Tag
   ------------------------------------------------------------ */
.dz-tag {
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  background: var(--dz-chip);
  border-radius: var(--dz-r-full);
  font-size: var(--dz-fs-2xs);
  color: var(--dz-text-3);
  white-space: nowrap;
}
.dz-tag--outline { background: transparent; border: 1px solid var(--dz-line); color: var(--dz-text-3); }

/* 종이(썸네일) 위에 올라가는 시대 태그 — 어두운 알약 */
.dz-tag--era {
  height: 24px;
  font-family: var(--dz-font-mono); font-weight: var(--dz-fw-mono); font-size: 11px; letter-spacing: 0.04em;
  background: rgba(22, 21, 15, 0.86);
  color: var(--dz-paper);
}
/* 신규 = 읽어야 할 신호 → EMBER */
.dz-tag--new {
  height: 24px;
  background: var(--dz-ember); color: var(--dz-ember-ink);
  font-family: var(--dz-font-mono); font-weight: var(--dz-fw-mono); font-size: 11px; letter-spacing: 0.06em;
}
/* 할인율처럼 '읽어야 할' 숫자 라벨 — NEW 와 같은 EMBER 알약 */
.dz-tag--signal {
  height: 24px;
  background: var(--dz-ember); color: var(--dz-ember-ink);
  font-family: var(--dz-font-mono); font-weight: var(--dz-fw-mono); font-size: 11px; letter-spacing: 0.04em;
}
/* 보유 중 = 내 상태 → LIME */
.dz-tag--owned {
  height: 24px;
  background: var(--dz-accent); color: var(--dz-accent-ink);
  font-weight: 700; font-size: 11px;
}

/* 난이도 배지 — LIME→EMBER 5단계 램프.
   색만으로 구분하지 않도록 앞에 점을 찍고 이름을 항상 함께 씁니다. */
.dz-level {
  height: 24px;
  padding: 0 10px 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--dz-r-full);
  font-size: var(--dz-fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid;
}
.dz-level::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--dz-r-full);
  background: currentColor;
}
.dz-level--1 { color: var(--dz-lv-1); border-color: color-mix(in srgb, var(--dz-lv-1) 32%, transparent); background: color-mix(in srgb, var(--dz-lv-1) 10%, transparent); }
.dz-level--2 { color: var(--dz-lv-2); border-color: color-mix(in srgb, var(--dz-lv-2) 32%, transparent); background: color-mix(in srgb, var(--dz-lv-2) 10%, transparent); }
.dz-level--3 { color: var(--dz-lv-3); border-color: color-mix(in srgb, var(--dz-lv-3) 32%, transparent); background: color-mix(in srgb, var(--dz-lv-3) 10%, transparent); }
.dz-level--4 { color: var(--dz-lv-4); border-color: color-mix(in srgb, var(--dz-lv-4) 32%, transparent); background: color-mix(in srgb, var(--dz-lv-4) 10%, transparent); }
.dz-level--5 { color: var(--dz-lv-5); border-color: color-mix(in srgb, var(--dz-lv-5) 32%, transparent); background: color-mix(in srgb, var(--dz-lv-5) 10%, transparent); }

/* color-mix 미지원 브라우저 폴백 */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .dz-level { border-color: currentColor; background: transparent; }
}

/* 난이도 점 5개 — '같은 곡의 다른 난이도' 패널.
   채운 점 수가 단계이고, 색은 배지와 같은 LIME→EMBER 램프입니다.
   옆의 글자(추천 대상)가 단계 이름을 대신하므로 색만으로 구분하지 않습니다. */
.dz-lvfit  { display: flex; align-items: center; gap: 8px; font-size: var(--dz-fs-xs); color: var(--dz-text-2); }
.dz-lvdots { display: inline-flex; gap: 3px; flex-shrink: 0; }
.dz-lvdots i { width: 6px; height: 6px; border-radius: var(--dz-r-full); background: var(--dz-line-strong); }
.dz-lvdots--1 { color: var(--dz-lv-1); }
.dz-lvdots--2 { color: var(--dz-lv-2); }
.dz-lvdots--3 { color: var(--dz-lv-3); }
.dz-lvdots--4 { color: var(--dz-lv-4); }
.dz-lvdots--5 { color: var(--dz-lv-5); }
.dz-lvdots--1 i:nth-child(-n+1),
.dz-lvdots--2 i:nth-child(-n+2),
.dz-lvdots--3 i:nth-child(-n+3),
.dz-lvdots--4 i:nth-child(-n+4),
.dz-lvdots--5 i:nth-child(-n+5) { background: currentColor; }

/* ------------------------------------------------------------
   Sheet Card — 악보 카드
   썸네일은 '무대 위에 놓인 종이 한 장'. 어두운 그리드에서 악보만
   밝게 떠오르게 해 카탈로그가 한눈에 읽힙니다.
   ------------------------------------------------------------ */
.dz-card {
  display: flex;
  flex-direction: column;
  background: var(--dz-surface);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-xl);
  overflow: hidden;
  text-align: left;
  padding: 0;
  cursor: pointer;
  transition:
    transform    var(--dz-dur)      var(--dz-ease-out),
    border-color var(--dz-dur-fast) var(--dz-ease),
    box-shadow   var(--dz-dur)      var(--dz-ease);
}
.dz-card:hover {
  transform: translateY(-4px);
  border-color: var(--dz-line-strong);
  box-shadow: var(--dz-shadow-card);
  color: var(--dz-text);
}

.dz-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dz-paper);            /* ← 종이 */
  border-bottom: 1px solid var(--dz-line);
}
.dz-card__thumb svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: transform var(--dz-dur-slow) var(--dz-ease-out);
}
.dz-card:hover .dz-card__thumb svg { transform: scale(1.04); }

.dz-card__thumb .dz-tag--era,
.dz-card__thumb .dz-tag--new { position: absolute; left: 12px; top: 12px; }
.dz-card__thumb .dz-tag--owned { position: absolute; right: 12px; top: 12px; }

/* 랭킹 숫자 — 종이 위에 크게 찍힌 윤곽선 숫자 (차트 감성) */
.dz-card__rank {
  position: absolute; right: 10px; bottom: -6px;
  font-family: var(--dz-font-mono);
  font-size: 58px; font-weight: var(--dz-fw-mono); line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--dz-paper-bar);
  pointer-events: none;
}
/* 1~3위만 엠버 — '읽어야 할 신호' */
.dz-card[data-rank="1"] .dz-card__rank,
.dz-card[data-rank="2"] .dz-card__rank,
.dz-card[data-rank="3"] .dz-card__rank { -webkit-text-stroke-color: var(--dz-ember); }

/* text-stroke 미지원 브라우저는 채운 숫자로 */
@supports not (-webkit-text-stroke: 1px red) {
  .dz-card__rank { color: var(--dz-paper-bar); }
}

.dz-card__body {
  flex-grow: 1;
  padding: var(--dz-sp-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dz-card__title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dz-card__artist { font-size: var(--dz-fs-xs); color: var(--dz-text-3); }
.dz-card__meta { margin-top: var(--dz-sp-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ------------------------------------------------------------
   Notation — 악보 기보
   scripts/gen-notation.mjs 가 그린 SVG 가 이 규칙으로 칠해집니다.
   카드 썸네일과 상세 미리보기가 같은 클래스를 씁니다.
   색은 종이 토큰만 씁니다 — 악보는 테마와 무관하게 종이 위에 있습니다.
   ------------------------------------------------------------ */
.dz-notation .dz-n-staff  { stroke: var(--dz-paper-line); stroke-width: 1; }
.dz-notation .dz-n-bar    { stroke: var(--dz-paper-ink);  stroke-width: 1.5; }
.dz-notation .dz-n-ledger { stroke: var(--dz-paper-ink);  stroke-width: 1.2; }
.dz-notation .dz-n-head   { fill: var(--dz-paper-ink); }
/* 고스트 노트 — 작고 흐리게. 실제 기보의 괄호 표기를 대신합니다. */
.dz-notation .dz-n-head.is-ghost { opacity: 0.42; }
.dz-notation .dz-n-x      { stroke: var(--dz-paper-ink); stroke-width: 1.7; stroke-linecap: round; fill: none; }
.dz-notation .dz-n-open   { fill: none; stroke: var(--dz-paper-ink); stroke-width: 1.3; }
.dz-notation .dz-n-stem   { stroke: var(--dz-paper-ink); stroke-width: 1.3; }
.dz-notation .dz-n-beam   { fill: var(--dz-paper-ink); }
.dz-notation .dz-n-clef   { fill: var(--dz-paper-ink); }
.dz-notation .dz-n-time   {
  fill: var(--dz-paper-ink);
  font-family: var(--dz-font-mono);
  font-weight: var(--dz-fw-mono);
  text-anchor: middle;
}
/* 페이지 머리말·연습 기호·마디 번호·페이지 번호 (상세 미리보기) */
.dz-notation .dz-n-title  { fill: var(--dz-paper-ink); font-family: var(--dz-font-display); font-weight: var(--dz-fw-display); letter-spacing: -0.02em; text-anchor: middle; }
.dz-notation .dz-n-sub    { fill: var(--dz-paper-muted); font-family: var(--dz-font-body); text-anchor: middle; }
.dz-notation .dz-n-tempo  { fill: var(--dz-paper-ink); font-family: var(--dz-font-mono); font-weight: var(--dz-fw-mono); letter-spacing: 0.04em; }
.dz-notation .dz-n-label  { fill: var(--dz-paper-muted); font-family: var(--dz-font-mono); letter-spacing: 0.16em; text-anchor: end; }
.dz-notation .dz-n-mark-box { fill: none; stroke: var(--dz-paper-ink); stroke-width: 1; }
.dz-notation .dz-n-mark   { fill: var(--dz-paper-ink); font-family: var(--dz-font-mono); font-weight: var(--dz-fw-mono); text-anchor: middle; }
.dz-notation .dz-n-barnum { fill: var(--dz-paper-muted); font-family: var(--dz-font-mono); }
.dz-notation .dz-n-page   { fill: var(--dz-paper-muted); font-family: var(--dz-font-mono); text-anchor: middle; }

/* 리스트형 카드 (신규 악보 · MY) */
.dz-row {
  width: 100%;
  padding: var(--dz-sp-3) var(--dz-sp-4);
  display: flex;
  align-items: center;
  gap: var(--dz-sp-4);
  background: var(--dz-surface-2);
  border: 1px solid var(--dz-line-soft);
  border-radius: var(--dz-r-lg);
  text-align: left;
  cursor: pointer;
  transition: background var(--dz-dur-fast) var(--dz-ease), border-color var(--dz-dur-fast) var(--dz-ease);
}
.dz-row:hover { background: var(--dz-surface); border-color: var(--dz-line); color: var(--dz-text); }
.dz-row__thumb {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--dz-paper);
  color: var(--dz-paper-bar);
  border-radius: var(--dz-r-md);
}
.dz-row__body { flex-grow: 1; min-width: 0; }
/* 정적 행 — 행 자체는 누르지 않고 안의 버튼으로 동작합니다 (MY 다운로드 목록) */
.dz-row--static,
.dz-row--static:hover { cursor: default; background: var(--dz-surface-2); border-color: var(--dz-line-soft); }
.dz-row--static .dz-row__thumb { font-family: var(--dz-font-mono); font-size: 22px; }
.dz-row__title { display: block; font-size: var(--dz-fs-md); font-weight: 700; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-row__sub   { display: block; margin-top: 3px; font-size: var(--dz-fs-xs); color: var(--dz-text-3); }
.dz-row__tags  { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dz-row__side  { display: flex; align-items: center; gap: var(--dz-sp-2); flex-shrink: 0; }
@media (max-width: 768px) {
  .dz-row--static { flex-wrap: wrap; }
  .dz-row__side { width: 100%; justify-content: flex-end; }
}

/* ------------------------------------------------------------
   Level Tile — 난이도별 탐색 (HOME 주탐색 블록)
   ------------------------------------------------------------ */
.dz-lvtile {
  position: relative;
  min-height: 134px;
  padding: var(--dz-sp-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  background: var(--dz-surface);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-lg);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: background var(--dz-dur-fast) var(--dz-ease), border-color var(--dz-dur-fast) var(--dz-ease);
}
.dz-lvtile:hover { background: var(--dz-surface-hover); border-color: var(--dz-line-strong); color: var(--dz-text); }
/* 위쪽 4px 컬러 스트립 — 5개를 나란히 두면 램프가 그대로 보입니다 */
.dz-lvtile__bar {
  position: absolute; left: 0; right: 0; top: 0;
  width: auto; height: 4px;
  border-radius: 0;
}
.dz-lvtile__bar--1 { background: var(--dz-lv-1); }
.dz-lvtile__bar--2 { background: var(--dz-lv-2); }
.dz-lvtile__bar--3 { background: var(--dz-lv-3); }
.dz-lvtile__bar--4 { background: var(--dz-lv-4); }
.dz-lvtile__bar--5 { background: var(--dz-lv-5); }
.dz-lvtile__name { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.dz-lvtile__desc { font-size: var(--dz-fs-2xs); line-height: 1.5; color: var(--dz-text-3); }
.dz-lvtile__count { margin-top: auto; font-family: var(--dz-font-mono); font-size: var(--dz-fs-2xs); font-weight: var(--dz-fw-mono); color: var(--dz-text-4); }

/* ------------------------------------------------------------
   Form
   ------------------------------------------------------------ */
.dz-field { display: flex; flex-direction: column; gap: var(--dz-sp-2); }
.dz-label { font-size: var(--dz-fs-xs); color: var(--dz-text-3); }

.dz-input {
  width: 100%;
  height: 52px;
  padding: 0 var(--dz-sp-5);
  background: var(--dz-surface);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-md);
  color: var(--dz-text);
  font-family: var(--dz-font-body);
  font-size: var(--dz-fs-md);
  transition: border-color var(--dz-dur-fast) var(--dz-ease), background var(--dz-dur-fast) var(--dz-ease);
}
.dz-input::placeholder { color: var(--dz-text-disabled); }
.dz-input:hover { border-color: var(--dz-line-strong); }
.dz-input:focus { border-color: var(--dz-text-4); background: var(--dz-surface-hover); }
.dz-input[aria-invalid="true"] { border-color: var(--dz-danger); }
.dz-error { font-size: var(--dz-fs-xs); color: var(--dz-danger); }

/* 검색 바 — 알약. 히어로에서는 이 컴포넌트가 주인공입니다. */
.dz-search {
  display: flex;
  align-items: center;
  gap: var(--dz-sp-3);
  height: 64px;
  padding: 0 8px 0 var(--dz-sp-6);
  background: var(--dz-surface);
  border: 1px solid var(--dz-line-control);
  border-radius: var(--dz-r-full);
  transition: border-color var(--dz-dur-fast) var(--dz-ease), box-shadow var(--dz-dur) var(--dz-ease);
}
.dz-search:focus-within { border-color: var(--dz-accent-fg); box-shadow: var(--dz-accent-glow); }
.dz-search__input {
  flex-grow: 1; min-width: 0; height: 44px;
  background: transparent; border: 0; outline: none;
  color: var(--dz-text);
  font-family: var(--dz-font-body); font-size: var(--dz-fs-lg);
}
.dz-search__input::placeholder { color: var(--dz-text-disabled); }
.dz-search--sm { height: 40px; padding: 0 var(--dz-sp-4); border: 1px solid var(--dz-line-control); }
.dz-search--sm:focus-within { box-shadow: none; }
.dz-search--sm .dz-search__input { height: 30px; font-size: var(--dz-fs-sm); }

/* 라디오형 선택 행 (결제수단) */
.dz-option {
  width: 100%;
  height: 60px;
  padding: 0 var(--dz-sp-5);
  display: flex;
  align-items: center;
  gap: var(--dz-sp-4);
  background: var(--dz-bg-raised);
  border: 1.5px solid var(--dz-line);
  border-radius: var(--dz-r-lg);
  color: var(--dz-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dz-dur-fast) var(--dz-ease), background var(--dz-dur-fast) var(--dz-ease);
}
.dz-option:hover { border-color: var(--dz-line-strong); }
.dz-option__dot {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid var(--dz-line-control);
  border-radius: var(--dz-r-full);
}
.dz-option[aria-checked="true"] { background: var(--dz-accent-panel); border-color: var(--dz-accent-fg); }
.dz-option[aria-checked="true"] .dz-option__dot {
  background: var(--dz-accent-fg);
  border-color: var(--dz-accent-fg);
  box-shadow: inset 0 0 0 4px var(--dz-accent-panel);
}
.dz-option__hint { margin-left: auto; font-size: var(--dz-fs-xs); color: var(--dz-text-4); }

/* ------------------------------------------------------------
   Usage Meter — 이번 달 다운로드 3/5
   ------------------------------------------------------------ */
.dz-meter { height: 6px; background: var(--dz-line); border-radius: var(--dz-r-full); overflow: hidden; }
.dz-meter__fill { height: 100%; background: var(--dz-accent-fg); border-radius: var(--dz-r-full); transition: width var(--dz-dur-slow) var(--dz-ease-out); }
/* 한도에 다다르면 EMBER — 읽어야 할 신호 */
.dz-meter--full .dz-meter__fill { background: var(--dz-ember); }


/* ------------------------------------------------------------
   Panel / Box
   ------------------------------------------------------------ */
.dz-panel {
  padding: var(--dz-sp-6);
  background: var(--dz-surface-2);
  border: 1px solid var(--dz-line-soft);
  border-radius: var(--dz-r-xl);
}
.dz-panel--accent { background: var(--dz-accent-panel); border-color: var(--dz-accent-border); }
.dz-panel__title { margin-bottom: var(--dz-sp-5); font-size: var(--dz-fs-lg); font-weight: 700; letter-spacing: -0.02em; }

/* 가격 배너 (₩3,300 · 매월 5곡) — 바닥의 반대색 블록.
   히어로에서 가격만 떠오르게 합니다. */
.dz-policy {
  display: inline-flex;
  align-items: baseline;                 /* 가격과 설명의 글자 밑선을 맞춥니다 */
  gap: var(--dz-sp-3);
  /* 높이를 고정하지 않고 위아래 여백으로 56px 을 만듭니다.
     height 고정 + baseline 정렬은 글줄이 알약 위쪽에 붙어 세로 중앙이 맞지 않았습니다. */
  min-height: var(--dz-ctrl-lg);
  padding: var(--dz-sp-3) var(--dz-sp-6);
  background: var(--dz-invert);
  border-radius: var(--dz-r-full);
  line-height: 1.6;
}
.dz-policy__price { font-family: var(--dz-font-mono); font-weight: var(--dz-fw-mono); font-size: 20px; letter-spacing: -0.02em; color: var(--dz-invert-ink); }
.dz-policy__desc  { font-size: var(--dz-fs-sm); color: var(--dz-invert-muted); }

/* ------------------------------------------------------------
   Plan Card — 구독 상품
   추천 플랜은 바닥의 반대색으로 반전시켜 한눈에 고르게 합니다.
   ------------------------------------------------------------ */
.dz-plan {
  padding: var(--dz-sp-6);
  display: flex;
  flex-direction: column;
  background: var(--dz-surface);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-xl);
}
.dz-plan--featured {
  background: var(--dz-invert);
  border-color: var(--dz-invert);
  color: var(--dz-invert-ink);
  box-shadow: var(--dz-shadow-paper);
}
.dz-plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--dz-sp-3); min-height: 26px; }
.dz-plan__name { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.dz-plan__badge {
  height: 24px; padding: 0 10px;
  display: inline-flex; align-items: center;
  background: var(--dz-accent); color: var(--dz-accent-ink);
  border-radius: var(--dz-r-full);
  font-size: var(--dz-fs-2xs); font-weight: 700;
}
.dz-plan--featured .dz-plan__badge { background: var(--dz-invert-ink); color: var(--dz-invert); }
.dz-plan__price { margin-top: var(--dz-sp-5); display: flex; align-items: baseline; gap: 6px; }
.dz-plan__amount { font-family: var(--dz-font-mono); font-weight: var(--dz-fw-mono); font-size: 34px; letter-spacing: -0.03em; }
.dz-plan--featured .dz-plan__amount { color: var(--dz-invert-ink); }
.dz-plan__amount--todo { font-family: var(--dz-font-body); font-size: 21px; font-weight: 700; }
.dz-plan__unit { font-size: var(--dz-fs-sm); color: var(--dz-text-3); }
.dz-plan__note { margin-top: 10px; font-size: var(--dz-fs-xs); line-height: 1.5; color: var(--dz-text-3); }
.dz-plan__feats { margin-top: var(--dz-sp-5); display: flex; flex-direction: column; gap: 11px; }
.dz-plan__feats li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--dz-fs-xs); line-height: 1.45; color: var(--dz-text-2); }
.dz-plan__feats svg { flex-shrink: 0; margin-top: 3px; }
.dz-plan .dz-btn { margin-top: auto; }
.dz-plan__feats + .dz-btn { margin-top: var(--dz-sp-6); }

/* 카드 여러 장의 행(머리 · 가격 · 설명 · 기능 · 버튼)을 서로 맞춥니다.
   설명 글자 수가 달라 줄 수가 다르면 가격·기능 목록·버튼이 카드마다 다른
   높이에 놓이므로, 부모 그리드의 행을 나눠 쓰는 subgrid 로 다섯 행을 공유합니다.
   행 간격은 0 으로 두고 기존 margin-top 이 사이 여백을 만듭니다. */
@supports (grid-template-rows: subgrid) {
  .dz-grid > .dz-plan {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    row-gap: 0;
    align-items: start;
  }
  .dz-grid > .dz-plan .dz-btn { align-self: end; }
}
/* subgrid 미지원 브라우저 — 설명 칸을 3줄 높이로 고정해 어긋남을 줄입니다 */
@supports not (grid-template-rows: subgrid) {
  .dz-plan__note { min-height: calc(1.5em * 3); }
}

/* 반전된 카드 안에서는 보조 텍스트와 체크 아이콘도 반전합니다.
   CTA 도 한 번 더 반전 — 라임 채움은 반전된 카드 위에서 버튼 모양이
   배경과 구분되지 않습니다(대비 1.1:1). 이 한 곳만 예외입니다. */
.dz-plan--featured .dz-plan__unit,
.dz-plan--featured .dz-plan__note,
.dz-plan--featured .dz-plan__feats li { color: var(--dz-invert-muted); }
.dz-plan--featured .dz-plan__feats svg { stroke: var(--dz-invert-ink); }
.dz-plan--featured .dz-btn--primary { background: var(--dz-invert-ink); color: var(--dz-invert); }
.dz-plan--featured .dz-btn--primary:hover { background: var(--dz-invert-ink); color: var(--dz-invert); box-shadow: none; opacity: 0.88; }

/* ------------------------------------------------------------
   Preview Viewer — 악보 미리보기
   실제 악보는 종이 위에 있어야 읽힙니다. 이 컴포넌트가 컨셉의 핵심.
   ------------------------------------------------------------ */
.dz-preview {
  position: relative;
  background: var(--dz-paper);
  border: 1px solid var(--dz-paper-2);
  border-radius: var(--dz-r-xl);
  overflow: hidden;
  aspect-ratio: 210 / 297;                /* A4 세로 — 생성기(gen-notation.mjs)의 viewBox 와 같은 비율 */
  box-shadow: var(--dz-shadow-paper);
}
.dz-preview > svg { position: absolute; inset: 0; width: 100%; height: 100%; }   /* 기보 SVG 만 — 안내 알약 안의 아이콘은 제외 */
.dz-preview__watermark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dz-font-mono);
  font-size: clamp(40px, 8vw, 78px);
  font-weight: var(--dz-fw-mono);
  letter-spacing: 0.18em;
  color: rgba(22, 21, 15, 0.10);
  transform: rotate(-16deg);
  pointer-events: none;
}
.dz-preview__pages {
  position: absolute; right: var(--dz-sp-4); bottom: var(--dz-sp-4);
  height: 28px; padding: 0 var(--dz-sp-3);
  display: inline-flex; align-items: center;
  background: rgba(22, 21, 15, 0.86);
  border-radius: var(--dz-r-full);
  font-family: var(--dz-font-mono);
  font-size: var(--dz-fs-2xs); color: var(--dz-paper);
  white-space: nowrap;
}
/* 어두운 알약 안의 미확정 표기 — 본문용 .dz-todo 색은 여기서 보이지 않습니다 */
.dz-preview__pages .dz-todo { color: inherit; border-bottom-color: currentColor; opacity: 0.8; }

/* 미리보기 가림 — 첫 8마디(두 단)만 선명하고 나머지는 흐립니다.
   흐림은 생성기가 SVG 필터(feGaussianBlur)로 넣고, 여기서는 농도만 낮춥니다.
   별도 잠금 안내는 두지 않습니다 — 흐림 자체가 "여기까지"를 말하고,
   설명은 미리보기 아래 캡션이 맡습니다.
   [개발 연동 지점] 블러는 보호 수단이 아닙니다. 운영에서는 서버가 공개 구간만
   렌더한 이미지를 내려야 합니다 — 숨긴 마디가 응답에 포함되면 안 됩니다. */
.dz-notation .dz-n-veil { opacity: 0.55; }

/* 메타데이터 행 */
.dz-meta {
  height: 62px;
  padding: 0 var(--dz-sp-5);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--dz-surface);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-lg);
}
.dz-meta__key {
  font-family: var(--dz-font-mono); font-size: var(--dz-fs-eyebrow); font-weight: var(--dz-fw-mono);
  letter-spacing: var(--dz-ls-eyebrow); text-transform: uppercase;
  color: var(--dz-text-4);
}
.dz-meta__val { font-size: var(--dz-fs-md); font-weight: 600; }

/* ------------------------------------------------------------
   Accordion — FAQ
   ------------------------------------------------------------ */
.dz-acc { background: var(--dz-surface-2); border: 1px solid var(--dz-line-soft); border-radius: var(--dz-r-lg); overflow: hidden; }
.dz-acc__btn {
  width: 100%; min-height: 62px;
  padding: var(--dz-sp-4) var(--dz-sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--dz-sp-4);
  background: transparent; border: 0; text-align: left; cursor: pointer;
  font-size: var(--dz-fs-md); font-weight: 500;
}
.dz-acc__btn:hover { background: var(--dz-surface); }
.dz-acc__icon {
  flex-shrink: 0;
  font-family: var(--dz-font-mono); font-size: 20px; color: var(--dz-text-4);
  transition: transform var(--dz-dur) var(--dz-ease);
}
.dz-acc__btn[aria-expanded="true"] .dz-acc__icon { transform: rotate(45deg); color: var(--dz-accent-fg); }
.dz-acc__panel { padding: 0 var(--dz-sp-6) var(--dz-sp-5); font-size: var(--dz-fs-sm); line-height: 1.75; color: var(--dz-text-3); }
.dz-acc__panel[hidden] { display: none; }

/* ------------------------------------------------------------
   Table
   ------------------------------------------------------------ */
.dz-table-wrap { background: var(--dz-surface-2); border: 1px solid var(--dz-line-soft); border-radius: var(--dz-r-lg); overflow: hidden; }
.dz-table { width: 100%; border-collapse: collapse; font-size: var(--dz-fs-sm); }
.dz-table th {
  padding: 12px var(--dz-sp-5);
  background: var(--dz-bg-raised);
  border-bottom: 1px solid var(--dz-line-soft);
  font-family: var(--dz-font-mono);
  font-size: var(--dz-fs-eyebrow); font-weight: var(--dz-fw-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dz-text-4);
  text-align: left; white-space: nowrap;
}
.dz-table td { padding: 15px var(--dz-sp-5); border-bottom: 1px solid var(--dz-line-soft); vertical-align: middle; }
.dz-table tbody tr:last-child td { border-bottom: 0; }
.dz-table tbody tr:hover { background: var(--dz-surface); }
.dz-table .is-dim { color: var(--dz-text-3); }
.dz-table .is-num { font-family: var(--dz-font-mono); font-weight: var(--dz-fw-mono); }

.dz-pagination { margin-top: var(--dz-sp-8); display: flex; align-items: center; justify-content: center; gap: var(--dz-sp-2); flex-wrap: wrap; }
.dz-pagination button {
  min-width: var(--dz-ctrl); height: var(--dz-ctrl);
  padding: 0 var(--dz-sp-3);
  background: transparent; border: 1px solid var(--dz-line); border-radius: var(--dz-r-full);
  color: var(--dz-text-3); font-family: var(--dz-font-mono); font-size: var(--dz-fs-sm); cursor: pointer;
  transition: border-color var(--dz-dur-fast) var(--dz-ease), color var(--dz-dur-fast) var(--dz-ease);
}
.dz-pagination button:hover { border-color: var(--dz-line-strong); color: var(--dz-text); }
.dz-pagination button[aria-current="page"] { background: var(--dz-accent); border-color: var(--dz-accent); color: var(--dz-accent-ink); font-weight: 600; }
/* 첫·끝 페이지에서의 이전·다음 */
.dz-pagination button:disabled,
.dz-pagination button:disabled:hover { border-color: var(--dz-line-soft); color: var(--dz-text-disabled); cursor: not-allowed; }
/* 페이지가 많을 때 건너뛴 구간 표시 (1 … 5 6 7 … 25) */
.dz-pagination__gap { min-width: 24px; text-align: center; font-family: var(--dz-font-mono); color: var(--dz-text-disabled); }

/* ------------------------------------------------------------
   Empty · Skeleton
   ------------------------------------------------------------ */
.dz-empty {
  padding: var(--dz-sp-14) var(--dz-sp-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--dz-sp-3);
  background: var(--dz-surface-2);
  border: 1px dashed var(--dz-line);
  border-radius: var(--dz-r-xl);
  text-align: center;
}
.dz-empty__title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }

.dz-skeleton {
  background: linear-gradient(90deg, var(--dz-surface), var(--dz-surface-hover), var(--dz-surface));
  background-size: 200% 100%;
  border-radius: var(--dz-r-md);
  animation: dz-shimmer 1.4s infinite;
}
@keyframes dz-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .dz-skeleton { animation: none; } }

/* ------------------------------------------------------------
   Toast — 다운로드 완료 등
   ------------------------------------------------------------ */
.dz-toast {
  position: fixed;
  left: 50%; bottom: var(--dz-sp-8);
  transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: var(--dz-sp-3);
  min-height: 52px;
  padding: var(--dz-sp-3) var(--dz-sp-6);
  background: var(--dz-surface);
  border: 1px solid var(--dz-accent-border);
  border-radius: var(--dz-r-full);
  box-shadow: var(--dz-shadow-toast);
  font-size: var(--dz-fs-sm);
}
.dz-toast[hidden] { display: none; }
@media (max-width: 768px) {
  .dz-toast {
    left: var(--dz-gutter-m); right: var(--dz-gutter-m);
    bottom: calc(var(--dz-tabbar-h) + 16px);
    transform: none;
    border-radius: var(--dz-r-lg);
    font-size: var(--dz-fs-xs);
  }
}

/* ------------------------------------------------------------
   Bottom Sheet — 모바일 필터
   ------------------------------------------------------------ */
.dz-sheet[hidden] { display: none; }
.dz-sheet { position: fixed; inset: 0; z-index: 70; }
.dz-sheet__scrim { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--dz-scrim); border: 0; cursor: pointer; }
.dz-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 80vh; overflow-y: auto;
  padding: var(--dz-sp-3) var(--dz-gutter-m) var(--dz-sp-6);
  background: var(--dz-surface-2);
  border-top: 1px solid var(--dz-line);
  border-radius: var(--dz-r-2xl) var(--dz-r-2xl) 0 0;
  box-shadow: var(--dz-shadow-sheet);
}
.dz-sheet__handle { width: 40px; height: 4px; margin: 0 auto var(--dz-sp-5); background: var(--dz-line-strong); border-radius: var(--dz-r-full); }

/* ------------------------------------------------------------
   Breadcrumb
   ------------------------------------------------------------ */
.dz-breadcrumb { display: flex; align-items: center; gap: var(--dz-sp-2); font-size: var(--dz-fs-xs); color: var(--dz-text-4); flex-wrap: wrap; }
.dz-breadcrumb a { color: var(--dz-text-3); }
.dz-breadcrumb [aria-current="page"] { color: var(--dz-text-2); }