/* 시안은 Satoshi 를 HTML 안에 base64 로 물고 한글은 구글 폰트에서 받았다.
   오프라인 앱이라 둘 다 자체 호스팅한다 — build_fonts.py 참조.
   Satoshi 는 시안과 같은 바이트, Noto 는 실사용 749자 서브셋(10.4MB → 91KB). */
@font-face{font-family:"Satoshi";font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/Satoshi-300.woff2) format("woff2")}
@font-face{font-family:"Satoshi";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/Satoshi-400.woff2) format("woff2")}
@font-face{font-family:"Satoshi";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/Satoshi-500.woff2) format("woff2")}
@font-face{font-family:"Satoshi";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/Satoshi-700.woff2) format("woff2")}
@font-face{font-family:"Noto Sans KR";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/NotoSansKR-subset.woff2) format("woff2-variations")}

/* ══ 시안 디자인 토큰 — 그대로 ══ */
/* AUTO-GENERATED from design-tokens.json — DO NOT EDIT. Run build_tokens.py. */

/* ---- 2x grid (Carbon-accurate: col = (vw - 2*margin)/cols; 32px gutter = 2x16px col padding) ---- */
:root {
  --grid-columns: 4;
  --grid-margin: 0;
  --grid-gutter: 32px;
  --grid-mini-unit: 8px;
  --grid-padding: 16px;
}
@media (min-width: 672px) { :root { --grid-columns: 8; --grid-margin: 16px; } }
@media (min-width: 1056px) { :root { --grid-columns: 16; --grid-margin: 16px; } }
@media (min-width: 1312px) { :root { --grid-columns: 16; --grid-margin: 16px; } }
@media (min-width: 1584px) { :root { --grid-columns: 16; --grid-margin: 24px; } }

.cds-grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); padding-inline: var(--grid-margin); column-gap: 0; }
.cds-grid > * { padding-inline: var(--grid-padding); box-sizing: border-box; }
.cds-grid--gutterless > * { padding-inline: 0; }
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }
.col-span-13 { grid-column: span 13; }
.col-span-14 { grid-column: span 14; }
.col-span-15 { grid-column: span 15; }
.col-span-16 { grid-column: span 16; }

/* ---- layout layer: container cap / per-script measure / section rhythm / density ---- */
:root {
  --container-md: 1056px;
  --container-lg: 1312px;
  --container-xlg: 1584px;
  --measure-latin-body: 56ch;
  --measure-latin-lead: 44ch;
  --measure-latin-max: 66ch;
  --measure-korean-body: 40ch;
  --measure-korean-lead: 32ch;
  --measure-korean-max: 40ch;
  --rhythm-xs: 56px;
  --rhythm-sm: 80px;
  --rhythm-md: 112px;
  --rhythm-lg: 160px;
  --rhythm-xl: 200px;
  --leading-latin: 1.45;
  --leading-korean: 1.7;
  --density-rhythm: 1;
  --density-measure: 1;
}
[data-density="reading"] { --density-rhythm: 1.25; --density-measure: 1.0; }
[data-density="browse"] { --density-rhythm: 1.0; --density-measure: 1.0; }
[data-density="work"] { --density-rhythm: 0.75; --density-measure: 1.0; }
[data-density="promo"] { --density-rhythm: 1.5; --density-measure: 1.0; }

.rhythm-xs { margin-block-start: calc(var(--rhythm-xs) * var(--density-rhythm)); }
.pad-rhythm-xs { padding-block: calc(var(--rhythm-xs) * var(--density-rhythm)); }
.rhythm-sm { margin-block-start: calc(var(--rhythm-sm) * var(--density-rhythm)); }
.pad-rhythm-sm { padding-block: calc(var(--rhythm-sm) * var(--density-rhythm)); }
.rhythm-md { margin-block-start: calc(var(--rhythm-md) * var(--density-rhythm)); }
.pad-rhythm-md { padding-block: calc(var(--rhythm-md) * var(--density-rhythm)); }
.rhythm-lg { margin-block-start: calc(var(--rhythm-lg) * var(--density-rhythm)); }
.pad-rhythm-lg { padding-block: calc(var(--rhythm-lg) * var(--density-rhythm)); }
.rhythm-xl { margin-block-start: calc(var(--rhythm-xl) * var(--density-rhythm)); }
.pad-rhythm-xl { padding-block: calc(var(--rhythm-xl) * var(--density-rhythm)); }
.container { max-inline-size: var(--container-lg); margin-inline: auto; }
.container-md { max-inline-size: var(--container-md); margin-inline: auto; }
.container-lg { max-inline-size: var(--container-lg); margin-inline: auto; }
.container-xlg { max-inline-size: var(--container-xlg); margin-inline: auto; }
.measure-latin-body { max-inline-size: calc(var(--measure-latin-body) * var(--density-measure)); line-height: var(--leading-latin); }
.measure-latin-lead { max-inline-size: calc(var(--measure-latin-lead) * var(--density-measure)); }
.measure-latin-max { max-inline-size: calc(var(--measure-latin-max) * var(--density-measure)); }
.measure-korean-body { max-inline-size: calc(var(--measure-korean-body) * var(--density-measure)); line-height: var(--leading-korean); }
.measure-korean-lead { max-inline-size: calc(var(--measure-korean-lead) * var(--density-measure)); }
.measure-korean-max { max-inline-size: calc(var(--measure-korean-max) * var(--density-measure)); }

/* ---- theme: navy-gold (Editorial Navy/Gold) ---- */
/* ---- theme: carbon-magenta (carbon-magenta (seed #0f62fe)) ---- */
[data-theme="carbon-magenta"]{
  --color-accent: #004ad1;
  --color-accent-hover: #045af3;
  --color-accent-pressed: #003192;
  --color-structure: #13161b;
  --color-text-primary: #13161b;
  --color-text-secondary: #393d44;
  --color-text-muted: #676c74;
  --color-surface-default: #f8faff;
  --color-surface-raised: #eaeff6;
  --color-surface-strong: #dadee6;
  --color-border-default: #c0c4cc;
  --color-border-strong: #13161b;
  --color-on-accent: #ffffff;
  /* 태극기 모티브 — 2026-09-01 계정 기능 UX 설계에서 마젠타 대체 확정.
     #981621 = taeguk 양(陽) 적, hue 355°(태극기 적과 동일) 유지, contrast
     8.5:1 white-on-fill / 8.1:1 on light surface. hover/pressed는 원래
     마젠타 3색의 HSL lightness·saturation 델타를 그대로 적용해 도출. */
  --color-accent-secondary: #981621;
  --color-accent-secondary-hover: #ad2e39;
  --color-accent-secondary-pressed: #6b1018;
  --color-on-accent-secondary: #ffffff;
  /* Purchase Trust Card 전용 옅은 배경 — ux-design-directions.html 방향 04
     (2026-09-01 승인)에서 그대로 가져온 값. 대비는 카드 바탕이 아니라 그 위의
     burgundy 텍스트/테두리로 확보한다(8.1:1 on light surface, 이미 위에서 측정됨). */
  --color-accent-secondary-tint: #fbeef1;
  --status-success: #008143;
  --status-warning: #b98402;
  --status-error: #cb0216;
  --status-info: #c11365;
  --font-sans: "Satoshi", "Noto Sans CJK KR", sans-serif;
  --type-display-xl-size: 64px;
  --type-display-xl-weight: 700;
  --type-display-xl-line: 1.05;
  --type-display-xl-tracking: 0;
  --type-display-size: 45px;
  --type-display-weight: 700;
  --type-display-line: 1.25;
  --type-display-tracking: 0;
  --type-display-lg-size: 34px;
  --type-display-lg-weight: 700;
  --type-display-lg-line: 1.36;
  --type-display-lg-tracking: 0;
  --type-headline-size: 29px;
  --type-headline-weight: 700;
  --type-headline-line: 1.41;
  --type-headline-tracking: 0;
  --type-subhead-size: 24px;
  --type-subhead-weight: 700;
  --type-subhead-line: 1.47;
  --type-subhead-tracking: 0.01em;
  --type-title-size: 21px;
  --type-title-weight: 700;
  --type-title-line: 1.5;
  --type-title-tracking: 0.01em;
  --type-card-title-size: 21px;
  --type-card-title-weight: 700;
  --type-card-title-line: 1.5;
  --type-card-title-tracking: 0.01em;
  --type-body-lg-size: 18px;
  --type-body-lg-weight: 300;
  --type-body-lg-line: 1.53;
  --type-body-lg-tracking: 0.01em;
  --type-body-size: 16px;
  --type-body-weight: 300;
  --type-body-line: 1.55;
  --type-body-tracking: 0.01em;
  --type-body-emphasis-size: 16px;
  --type-body-emphasis-weight: 700;
  --type-body-emphasis-line: 1.55;
  --type-body-emphasis-tracking: 0.01em;
  --type-body-sm-size: 14px;
  --type-body-sm-weight: 300;
  --type-body-sm-line: 1.5;
  --type-body-sm-tracking: 0.01em;
  --type-eyebrow-size: 14px;
  --type-eyebrow-weight: 700;
  --type-eyebrow-line: 1.3;
  --type-eyebrow-tracking: 0.02em;
  --type-caption-size: 12px;
  --type-caption-weight: 300;
  --type-caption-line: 1.35;
  --type-caption-tracking: 0.02em;
  --type-button-size: 14px;
  --type-button-weight: 700;
  --type-button-line: 1.2;
  --type-button-tracking: 0.01em;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --border-hairline: 1px;
  --border-focus: 2px;
}

/* ══ 시안 앱 CSS — 그대로 ══ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* 한글은 IBM Plex Sans KR — 라틴 IBM Plex Sans 의 자매 패밀리(SIL OFL 1.1).
   폰트 레지스트리에는 한글 자리가 Noto Sans CJK KR 로 등재돼 있어 이 패밀리는 미등재다.
   Plex 라틴 + Noto 한글은 설계된 짝이 아니라 섞이면 획 굵기와 무게중심이 어긋난다.
   채택하려면 레지스트리 등재가 선행돼야 한다 — 시안 단계의 의도적 이탈로 표시해 둔다. */
body{background:var(--color-surface-default);color:var(--color-text-primary);
  font-family:var(--font-sans);font-size:var(--type-body-size);
  line-height:var(--type-body-line);letter-spacing:var(--type-body-tracking);
  font-feature-settings:"kern" 1;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.ko{font-weight:var(--type-body-emphasis-weight)}

/* ══ masthead ══ */
.mast{background:var(--color-structure);color:var(--color-on-accent)}
.mast-in{padding:var(--space-xl) var(--space-md) var(--space-lg)}
.mast-eye{font-size:var(--type-caption-size);color:var(--color-surface-strong);
  margin-bottom:var(--space-md)}
.mast-h{font-size:var(--type-display-md-size);font-weight:var(--type-display-md-weight);
  line-height:var(--type-display-md-line);letter-spacing:var(--type-display-md-tracking)}
.mast-p{font-size:var(--type-body-size);color:var(--color-surface-strong);
  margin-top:var(--space-md);max-width:var(--measure-latin-body)}
.mast-cta{display:inline-block;margin-top:var(--space-lg);min-height:48px;
  padding:var(--space-sm) var(--space-lg);background:var(--color-accent);
  color:var(--color-on-accent);font-size:var(--type-button-size);
  font-weight:var(--type-button-weight);letter-spacing:var(--type-button-tracking)}
.mast-stat{display:flex;gap:var(--space-xl);margin-top:var(--space-xl);
  border-top:1px solid var(--color-text-muted);padding-top:var(--space-md)}
.mast-stat div{display:flex;flex-direction:column}
.mast-stat b{font-size:var(--type-headline-size);font-weight:var(--type-display-md-weight);
  line-height:1.1}
.mast-stat span{font-size:var(--type-caption-size);color:var(--color-surface-strong)}

/* ══ shell ══ */
.shell{display:block}
.side{display:none}
.main{display:block}
.sect{padding:var(--space-lg) var(--space-md);border-top:1px solid var(--color-border-default)}
.sect-h{font-size:var(--type-caption-size);color:var(--color-text-muted);
  margin-bottom:var(--space-md)}

/* ══ unit index ══ */
.units{display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--color-border-default)}
.unit{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-md);
  align-items:center;padding:var(--space-sm) var(--space-md);min-height:48px;
  border-bottom:1px solid var(--color-border-default)}
.unit-n{font-size:var(--type-card-title-size);font-weight:var(--type-display-md-weight);
  color:var(--color-text-muted);line-height:1}
.unit-b{display:flex;flex-direction:column}
.unit-en{font-size:var(--type-body-size)}
.unit-ko{font-size:var(--type-body-sm-size);color:var(--color-text-secondary)}
.unit-r{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-xxs)}
.unit-c{font-size:var(--type-caption-size);color:var(--color-text-muted)}
.bar{display:block;width:48px;height:2px;background:var(--color-surface-strong)}
.bar-f{display:block;height:2px;background:var(--color-text-primary)}

/* ══ word list ══ */
.list{border-top:1px solid var(--color-border-default)}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-sm);
  align-items:baseline;padding:var(--space-sm) var(--space-md);min-height:48px;
  border-bottom:1px solid var(--color-border-default)}
.row.on{background:var(--color-surface-raised);
  border-left:4px solid var(--color-accent);padding-left:var(--space-sm)}
.row-hw{font-size:var(--type-subhead-size)}
.row-gl{font-size:var(--type-body-sm-size);color:var(--color-text-secondary)}
.row-rr{font-size:var(--type-caption-size);color:var(--color-text-muted)}

/* ══ detail ══ */
.det{padding:var(--space-lg) var(--space-md) var(--space-xl)}
.hw-row{display:flex;align-items:center;gap:var(--space-xs)}
.hw{font-size:var(--type-display-md-size);font-weight:var(--type-display-md-weight);
  line-height:var(--type-display-md-line);letter-spacing:var(--type-display-md-tracking);
  margin-top:var(--space-xs)}
.hw-meta{font-size:var(--type-body-sm-size);color:var(--color-text-secondary);
  margin-top:var(--space-xs)}
.hw-meta i{color:var(--color-text-muted);font-style:normal}
.hw-gl{font-size:var(--type-subhead-size);margin-top:var(--space-md)}
.hw-pos{font-size:var(--type-caption-size);color:var(--color-text-muted);
  margin-left:var(--space-xs)}
.chip{display:inline-flex;align-items:baseline;gap:var(--space-xxs);
  border:1px solid var(--color-border-default);padding:0 var(--space-xxs);
  font-size:var(--type-body-sm-size);margin-top:var(--space-sm)}
.chip i{font-size:var(--type-caption-size);color:var(--color-text-muted);font-style:normal}
.listen{display:inline-block;margin-top:var(--space-md);min-height:48px;
  padding:var(--space-sm) var(--space-lg);background:var(--color-structure);
  color:var(--color-on-accent);
  font-size:var(--type-button-size);font-weight:var(--type-button-weight)}
.def{font-size:var(--type-body-lg-size);color:var(--color-text-secondary);
  margin-top:var(--space-lg);max-width:var(--measure-latin-body)}
.exs{list-style:none;margin-top:var(--space-lg);
  border-top:1px solid var(--color-border-strong)}
.ex{position:relative;padding:var(--space-md) var(--space-xxl) var(--space-md) 0;
  border-bottom:1px solid var(--color-border-default)}
.ex-ko{font-size:var(--type-card-title-size);line-height:var(--type-card-title-line)}
.ex-ko b{font-weight:var(--type-body-emphasis-weight);
  color:var(--color-accent-secondary)}
.ex-en{font-size:var(--type-body-sm-size);color:var(--color-text-secondary);
  margin-top:var(--space-xxs)}
/* 예문 재생 버튼 — Kelly 요청으로 여기만 원형(round-0 규칙의 의도적 예외,
   2026-08-31). 다른 버튼(.listen, .cta 등)에는 이 예외를 넓히지 않는다 */
.play{position:absolute;top:var(--space-md);right:0;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:var(--color-structure);border:0;border-radius:50%;
  color:var(--color-on-accent);font-size:var(--type-caption-size)}
.cols{list-style:none;margin-top:var(--space-lg)}
.cols li{display:flex;justify-content:space-between;gap:var(--space-md);
  padding:var(--space-xs) 0;font-size:var(--type-body-sm-size);
  border-bottom:1px solid var(--color-border-default)}
.cols li b{color:var(--color-accent-secondary)}
.cols span{color:var(--color-text-secondary)}
.note{margin-top:var(--space-lg);padding:var(--space-md);
  background:var(--color-surface-raised)}
.note p{font-size:var(--type-body-sm-size);color:var(--color-text-secondary);
  margin-top:var(--space-xs);max-width:var(--measure-latin-body)}
.lbl{font-size:var(--type-caption-size);color:var(--color-text-muted)}

/* ══ table ══ */
.tbl{width:100%;border-collapse:collapse;margin-top:var(--space-md)}
.tbl th{text-align:left;font-size:var(--type-caption-size);color:var(--color-text-muted);
  font-weight:var(--type-caption-weight);padding:var(--space-xs) 0;
  border-bottom:1px solid var(--color-border-strong)}
.tbl td{padding:var(--space-xs) 0;font-size:var(--type-body-sm-size);
  border-bottom:1px solid var(--color-border-default)}
.tk{font-size:var(--type-body-size);padding-right:var(--space-md)}
.tu{font-weight:var(--type-body-emphasis-weight);color:var(--color-accent-secondary)}
.td{color:var(--color-text-secondary)}

/* ══ quiz ══ */
.quiz{padding:var(--space-lg) var(--space-md)}
.qbar{display:block;height:2px;background:var(--color-surface-strong);
  margin-bottom:var(--space-md)}
.q-hw{font-size:var(--type-display-md-size);font-weight:var(--type-display-md-weight);
  line-height:var(--type-display-md-line);margin-top:var(--space-xs)}
.opts{display:flex;flex-direction:column;margin-top:var(--space-lg);
  border-top:1px solid var(--color-border-default)}
.opt{display:flex;gap:var(--space-sm);align-items:center;text-align:left;min-height:48px;
  padding:var(--space-sm) var(--space-md);font-size:var(--type-body-size);
  border-bottom:1px solid var(--color-border-default)}
.opt i{font-size:var(--type-caption-size);color:var(--color-text-muted);font-style:normal}
.opt.on{background:var(--color-surface-raised);
  border-left:4px solid var(--color-accent);padding-left:var(--space-sm)}
.cta{display:block;width:100%;min-height:48px;margin-top:var(--space-md);
  background:var(--color-accent);color:var(--color-on-accent);
  font-size:var(--type-button-size);font-weight:var(--type-button-weight);
  letter-spacing:var(--type-button-tracking)}

/* ══ specimen ══ */
.spec{border-top:1px solid var(--color-border-strong);
  padding:var(--space-xl) var(--space-md)}
.sp-row{display:flex;flex-wrap:wrap;gap:var(--space-lg);margin-top:var(--space-md)}
.sp-hw{font-size:var(--type-display-lg-size);font-weight:var(--type-display-lg-weight);
  line-height:1}
.sp-c{display:flex;flex-direction:column;gap:var(--space-xxs)}
.sp-c b{display:block;width:56px;height:40px;border:1px solid var(--color-border-default)}
.sp-c span{font-size:var(--type-caption-size);color:var(--color-text-muted)}

/* ══════════ 672 — tablet ══════════ */
@media (min-width:672px){
  .mast-in{padding:var(--space-xxl) var(--space-xl) var(--space-xl);
    max-width:var(--container-md);margin:0 auto}
  .mast-h{font-size:var(--type-display-lg-size);font-weight:var(--type-display-lg-weight);
    line-height:var(--type-display-lg-line);letter-spacing:var(--type-display-lg-tracking)}
  .units{grid-template-columns:1fr 1fr}
  .unit:nth-child(odd){border-right:1px solid var(--color-border-default)}
  .sect,.det,.quiz,.spec,.front-tabs,.plate-gallery{padding-left:var(--space-xl);padding-right:var(--space-xl)}
  .row,.unit{padding-left:var(--space-xl);padding-right:var(--space-xl)}
  .row.on,.opt.on{padding-left:var(--space-lg)}
  .hw{font-size:var(--type-display-lg-size);font-weight:var(--type-display-lg-weight);
    line-height:var(--type-display-lg-line);letter-spacing:var(--type-display-lg-tracking)}
  .ex-ko{font-size:var(--type-headline-size);line-height:var(--type-headline-line)}
}

/* ══════════ 1056 — desktop, two pane ══════════ */
@media (min-width:1056px){
  .mast-in{max-width:var(--container-lg);
    padding:var(--space-section) var(--space-xl) var(--space-xxl)}
  .mast-h{font-size:var(--type-display-xl-size);font-weight:var(--type-display-xl-weight);
    line-height:var(--type-display-xl-line);letter-spacing:var(--type-display-xl-tracking)}
  .mast-p{font-size:var(--type-body-lg-size);max-width:var(--measure-latin-lead)}
  .shell{display:grid;grid-template-columns:1fr 2fr;
    max-width:var(--container-lg);margin:0 auto;
    border-left:1px solid var(--color-border-default);
    border-right:1px solid var(--color-border-default)}
  .side{display:block;border-right:1px solid var(--color-border-default);
    position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto}
  .side .row,.side .unit{padding-left:var(--space-lg);padding-right:var(--space-lg)}
  .side .row.on{padding-left:var(--space-md)}
  .main{min-width:0}
  .det{padding:var(--space-xxl) var(--space-xxl) var(--space-section)}
  .hw{font-size:var(--type-display-xl-size);font-weight:var(--type-display-xl-weight);
    line-height:var(--type-display-xl-line);letter-spacing:var(--type-display-xl-tracking)}
  .det-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xxl);
    align-items:start}
  .quiz,.spec{padding-left:var(--space-xxl);padding-right:var(--space-xxl)}
  .sect,.front-tabs,.plate-gallery{padding-left:var(--space-xxl);padding-right:var(--space-xxl)}
}

/* ══════════ 1312 ══════════ */
@media (min-width:1312px){
  .mast-in,.shell{max-width:var(--container-xlg)}
}

/* ══════════════════════════════════════════════════════════════════════════
   앱 크롬 — 시안에 없는 요소. 시안의 토큰만 쓴다. 라운드 0, 블루는 면 아님.
   ══════════════════════════════════════════════════════════════════════════ */

/* 화면 전환 — 라우터가 [hidden] 을 건다 */
[hidden]{display:none !important}

/* 상단 바 · 뒤로가기 */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:var(--space-sm);
  min-height:48px;padding:0 var(--space-md);
  background:var(--color-surface-default);
  border-bottom:1px solid var(--color-border-default)}
.top-b{display:inline-flex;align-items:center;gap:var(--space-xxs);min-height:44px;
  padding:0 var(--space-xs) 0 0;font-size:var(--type-body-sm-size);color:var(--color-accent)}
.home-icon{width:22px;height:22px;display:block}
.top-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--type-body-sm-size);color:var(--color-text-secondary)}
.top-a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-xs);
  font-size:var(--type-body-sm-size);color:var(--color-accent)}
@media (min-width:1056px){.top{padding:0 var(--space-xxl)}}

/* 낱말 상세 헤더 — 검정 바탕(.mast 와 같은 처리) + 유닛 이름을 크게.
   .top-t 기본값은 다른 화면에서 여전히 무채색 캡션으로 쓰이므로 여기 전용
   수정자로만 얹는다. */
.top.dark{background:var(--color-structure);color:var(--color-on-accent)}
.top.dark .top-b{color:var(--color-on-accent)}
.top-t.emph{font-size:var(--type-card-title-size);font-weight:var(--type-card-title-weight);
  color:var(--color-on-accent)} /* .top-t 기본 색을 상속이 아니라 직접 덮는다 */

/* 낱말 상세 — 이전/다음. 예전엔 .top 안에서 뒤로가기(top-b)와 같은 화살표·같은
   자리를 써서 구분이 안 갔다. 엄지 닿는 화면 하단으로 옮기되, .main 의 마지막
   자식으로 두고 sticky 를 쓴다 — 뷰포트 전체가 아니라 콘텐츠 칼럼 폭 그대로
   따라간다(데스크톱 2단에서 fixed+left:0 이면 사이드바까지 덮어써 버렸다) */
.word-nav{position:sticky;bottom:0;z-index:20;display:flex;
  border-top:1px solid var(--color-border-default);background:var(--color-surface-default)}
.word-nav-b{flex:1;display:flex;align-items:center;justify-content:center;
  min-height:56px;font-size:var(--type-button-size);font-weight:var(--type-button-weight);
  color:var(--color-text-primary)}
.word-nav-b:first-child{border-right:1px solid var(--color-border-default)}
.word-nav-b.disabled{color:var(--color-text-muted)}

/* 유닛 오디오 받기 — .listen 과 같은 몸, 색만 중립 */
.dl{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:44px;
  padding:0 var(--space-md);border:1px solid var(--color-border-strong);
  font-size:var(--type-body-sm-size);background:none;color:var(--color-text-primary)}
.dl[disabled]{border-color:var(--color-border-default);color:var(--color-text-muted);
  cursor:default}
.dl-bar{display:block;width:64px;height:2px;background:var(--color-surface-strong)}
.dl-bar>span{display:block;height:2px;background:var(--color-text-primary)}
.dl-n{font-size:var(--type-caption-size);color:var(--color-text-muted)}

/* 재생 중 표시 — 새 색을 만들지 않고 기존 강조를 뒤집는다 */
.play[aria-pressed="true"],.listen[aria-pressed="true"]{
  background:var(--color-accent-secondary);color:var(--color-on-accent-secondary)}
.play[disabled],.listen[disabled]{background:var(--color-surface-strong);
  color:var(--color-text-muted);cursor:default}

/* 앞부분 — 그룹 탭. 블루는 선택 표시(밑줄)로만, 면으로 채우지 않는다 */
.front-tabs{display:flex;gap:var(--space-xs);overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:var(--space-sm) var(--space-md) 0;border-bottom:1px solid var(--color-border-default)}
.front-tab{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
  padding:0 var(--space-sm);border:0;border-bottom:3px solid transparent;background:none;
  color:var(--color-text-secondary);font-family:inherit;font-size:var(--type-body-sm-size)}
.front-tab.active{color:var(--color-accent);border-bottom-color:var(--color-accent)}

/* 앞부분 — 표 접기. summary 가 곧 기존 .sect-h 다 */
summary.sect-h{cursor:pointer}

/* 앞부분 — 도해 갤러리. 비율은 각 SVG 의 viewBox 가 정한다 — 고정값을 두지 않는다 */
.plate-gallery{display:flex;flex-wrap:wrap;gap:var(--space-md);
  padding:var(--space-md) var(--space-md) 0}
.plate{flex:1 1 200px;max-width:320px;margin:0;
  border:1px solid var(--color-border-default);padding:var(--space-sm)}
.plate svg{display:block;width:100%;height:auto}
.plate-pending,.plate-err{display:flex;align-items:center;justify-content:center;
  min-height:120px;color:var(--color-text-muted);font-size:var(--type-body-sm-size)}
.plate-err{color:var(--status-error)}

/* 재생 속도 — 표제어가 1초, 예문이 평균 1.6초라 초급자에게는 빠르다.
   블루는 면으로 쓰지 않는다(시안 스펙 패널). 고른 칸은 바탕을 한 단 올리고
   아래에 얇은 파란 선으로만 표시한다. */
/* display:flex(블록) — inline-flex 였을 때 .listen 버튼과 같은 줄에 붙어버리고
   inline-block(.listen) vs inline-flex(.spd)라 베이스라인도 어긋났다.
   항상 .listen 아래 새 줄에 오도록 고정한다 */
.spd{display:flex;align-items:center;gap:var(--space-sm);
  margin-top:var(--space-md)}
.spd-l{font-size:var(--type-caption-size);color:var(--color-text-muted)}
.spd-g{display:inline-flex;border:1px solid var(--color-border-default)}
.spd-b{min-height:44px;padding:0 var(--space-md);
  font-size:var(--type-body-sm-size);color:var(--color-text-secondary);
  border-right:1px solid var(--color-border-default);
  border-bottom:2px solid transparent}
.spd-b:last-child{border-right:0}
.spd-b[aria-pressed="true"]{background:var(--color-surface-raised);
  color:var(--color-text-primary);border-bottom-color:var(--color-accent)}

/* 즐겨찾기 — 이모지 대신 인라인 SVG(fav-icon), 헤드워드 옆. 텍스트 라벨 없이
   아이콘만 두고 접근성 이름은 aria-label 로 준다 */
.fav{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0;color:var(--color-text-muted)}
.fav[aria-pressed="true"]{color:var(--color-accent-secondary)}
.fav-icon{width:22px;height:22px;display:block}
.row-d{font-size:var(--type-caption-size);color:var(--color-text-muted)}
.row.done .row-hw{color:var(--color-text-secondary)}

/* 알림 — 저장 실패를 조용히 넘기지 않는다 */
.toast{position:fixed;left:0;right:0;bottom:0;z-index:100;
  padding:var(--space-sm) var(--space-md);
  background:var(--color-structure);color:var(--color-on-accent);
  font-size:var(--type-body-sm-size)}
.toast.err{background:var(--status-error)}
.toast-x{float:right;min-height:24px;padding:0 var(--space-xs);color:inherit}

/* 계정 아이콘 — 헤더 어디서나(Story 1.4, UX-DR1). 외곽선만, 블루(CTA색) 아님 —
   조용한 기본값, .top-b 의 액션 색을 물려받지 않도록 직접 지정한다. */
.acct-b{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;margin-left:auto;color:var(--color-text-muted)}
.acct-b:hover,.acct-b:focus-visible{color:var(--color-text-primary)}
.top.dark .acct-b{color:var(--color-surface-strong)}
.top.dark .acct-b:hover,.top.dark .acct-b:focus-visible{color:var(--color-on-accent)}
.acct-icon{width:20px;height:20px;display:block}

/* 계정 아이콘 — 홈 마스트헤드. 기존 .mast-in 내용은 그대로 두고 우상단에 얹는다 */
.mast{position:relative}
.mast>.acct-b{position:absolute;top:var(--space-md);right:var(--space-md);margin-left:0;
  color:var(--color-surface-strong)}
.mast>.acct-b:hover,.mast>.acct-b:focus-visible{color:var(--color-on-accent)}
@media (min-width:1056px){.mast>.acct-b{top:var(--space-xl);right:var(--space-xl)}}

/* Purchase Trust Card(UX-DR2) — 이진 렌더, 이 앱에서 가장 신뢰도가 높은 요소라
   버건디로 시각적 무게를 준다. 상태는 텍스트 라벨("Purchased")로도 전달된다 —
   색만으로 전달하지 않는다(WCAG 색 독립 규칙). */
.trust{border:1px solid var(--color-accent-secondary);
  background:var(--color-accent-secondary-tint);
  padding:var(--space-md);margin-top:0}
.trust-eye{font-size:var(--type-eyebrow-size);font-weight:var(--type-eyebrow-weight);
  letter-spacing:var(--type-eyebrow-tracking);text-transform:uppercase;
  color:var(--color-accent-secondary)}
.trust-v{font-size:var(--type-body-emphasis-size);font-weight:var(--type-body-emphasis-weight);
  margin-top:var(--space-xs)}
.trust-sub{font-weight:var(--type-body-weight);color:var(--color-text-secondary)}

/* 로그아웃 — 조용한 텍스트 링크. 채운 버튼(.cta)이 아니다 — 경고/파괴적 동작으로
   안 읽히게 의도적으로 가볍다(UX-DR4). */
.signout{display:inline-block;margin-top:var(--space-lg);min-height:44px;
  font-size:var(--type-body-sm-size);color:var(--color-text-muted);
  border-bottom:1px solid var(--color-text-muted)}
.signout:hover,.signout:focus-visible{color:var(--color-text-primary);
  border-bottom-color:var(--color-text-primary)}

/* 라이선스 잠금 */
.gate{padding:var(--space-xl) var(--space-md);max-width:var(--measure-latin-body)}
.gate .inp{display:block;width:100%;min-height:48px;margin-top:var(--space-md);
  padding:0 var(--space-sm);border:1px solid var(--color-border-strong);
  background:var(--color-surface-default);color:var(--color-text-primary);
  font-family:inherit;font-size:var(--type-body-size)}
.gate .msg{margin-top:var(--space-sm);font-size:var(--type-body-sm-size)}
.gate .msg.err{color:var(--status-error)}
.gate .msg.ok{color:var(--status-success)}
@media (min-width:1056px){.gate{padding:var(--space-xxl)}}

/* 빈 상태 */
.empty{padding:var(--space-xl) var(--space-md);color:var(--color-text-muted);
  font-size:var(--type-body-sm-size)}

/* 오프라인 배너 */
.off{padding:var(--space-xs) var(--space-md);background:var(--color-surface-raised);
  border-bottom:1px solid var(--color-border-default);
  font-size:var(--type-caption-size);color:var(--color-text-secondary)}

/* 키보드 포커스 — 시안에 없지만 없으면 접근성이 깨진다 */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}