/* =====================================================================
 * Mirai Voca — 메인 페이지(/) 전용 스타일 · 디자인 「06 Sumi Reel · 먹의 상영관」(2026-10-20 채택)
 * 토큰·바탕·머리글·바닥글은 /style.css(사이트 정본)에 있고 여기서 다시 정의하지 않는다.
 * 원본 시안: 10080_Design/Concept/153_MiraiVoca_2026-10-18/06_sumi-reel/ (§4~§10·§12~§14)
 * ===================================================================== */

/* ── 4. 히어로 ───────────────────────────────────────────────────────── */
.hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    padding-top: clamp(28px, 5.4vh, 64px);
    /* 01 에서 50음도 띠가 서던 자리에 스크린 머리가 선다 */
    padding-bottom: clamp(26px, 5vh, 56px);
}

.hero__head { grid-column: 1 / 9; }

.eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    font-family: var(--f-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--usu);
}
.eyebrow > .mono { color: var(--ink); }
.eyebrow__range { display: inline-flex; flex-wrap: wrap; gap: 0 8px; text-transform: none; }
.eyebrow__sep { color: var(--line); }

.hero h1 {
    margin-top: clamp(14px, 2.2vh, 22px);
    max-width: 12em;
    font-size: clamp(42px, 7.1vw, 104px);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.042em;
    text-wrap: balance;
    hyphens: auto;
}
html:lang(ko) .hero h1 { font-size: clamp(38px, 6.3vw, 92px); line-height: 1.12; letter-spacing: -0.04em; }
html:lang(ja) .hero h1, html:lang(zh) .hero h1 { font-size: clamp(36px, 5.6vw, 82px); line-height: 1.18; letter-spacing: -0.02em; }
html:lang(ru) .hero h1 { letter-spacing: -0.035em; }
html:lang(ar) .hero h1 { line-height: 1.3; }

.hero__act {
    grid-column: 9 / 13;
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 4px;
}
.hero__sub {
    max-width: 30em;
    text-wrap: pretty;
    font-size: clamp(15px, 1.12vw, 17px);
    line-height: 1.65;
    color: var(--usu);
}
.hero__guide { font-size: 13px; line-height: 1.5; }

/* 학습 시작 — 먹 바탕에 흰 글자(유일한 채움 단추) */
.cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 58px;
    padding: 14px 22px;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.006em;
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.cta:hover { background: var(--paper); color: var(--ink); }
.cta:focus-visible { outline-offset: 4px; }
.cta .arrow { font-size: 18px; }

/* ── 5. 스크린 — 먹의 상영관 ─────────────────────────────────────────
   05 Jimaku 의 플레이어 구조(위 띠 · 화면 · 아래 띠)를 그대로, 색은 흑백 둘과 헤어라인뿐.
   진행·현재 상태는 흰 채움·테두리·반전으로 — 초록(05 Exit Green)은 쓰지 않는다. */
.reel .sec__head { padding-bottom: 14px; }

/* 폭 — 첫 화면(히어로 아래 남는 높이) 안에 자막 세 줄이 온전히 들어오는 가장 큰 2.39:1.
   화면 위끝 ≈ 머리글·히어로·섹션 머리(170.6px + 12.6vh) + h1 두 줄(2.04 × min(7.1vw, 104px)),
   자막 아래끝이 화면 높이의 87.5% 자리라 남는 높이 ÷ .875 × 2.39 = × 2.731.
   1200px 이상은 격자 2열에서 시작해 최대 11열까지 — 1440×900·1920×1080 에서 정확히 2~11열(좌우 대칭).
   (05 Jimaku 도 화면 높이로 폭을 쟀다 — 스크린 전체도 화면 높이를 넘지 않는다) */
.screen {
    --fold: calc(87.4vh - 174.6px - min(14.484vw, 212.16px));
    width: min(100%, max(560px, calc(var(--fold) * 2.731)));
    margin: 20px auto 0;
    background: var(--scr);
    color: var(--scr-ink);
    border: 1px solid var(--scr-edge);
}
@media (min-width: 1200px) {
    /* 격자 2열(섹션 소제목과 같은 선)에서 시작, 최대 10열 + 9틈. 높이가 모자라면 오른쪽 끝만 줄어든다 */
    .screen {
        max-width: calc(83.3333% - var(--gap) / 6);
        margin-inline-start: calc(8.3333% + var(--gap) / 12);
    }
}
.screen ::selection { background: var(--scr-ink); color: var(--scr); }
.screen :focus-visible { outline-color: var(--scr-ink); }

.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-inline: 16px;
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--scr-dim);
}
.bar--top { height: var(--bar-top); border-bottom: 1px solid var(--scr-line); }

/* 타임코드 — 재생 중에는 흰 네모, 멈추면 두 줄 */
.tc {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    letter-spacing: .14em;
}
.tc__rec { width: 6px; height: 6px; background: var(--scr-ink); }
.tc__pause { display: none; gap: 2px; }
.tc__pause i { width: 2px; height: 8px; background: var(--scr-dim); }
.screen.is-paused .tc__rec { display: none; }
.screen.is-paused .tc__pause { display: inline-flex; }
.tc__now { color: var(--scr-ink); font-variant-numeric: tabular-nums; }

.meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
}
.meta span + span::before { content: "·"; margin-inline: 10px; color: var(--scr-dim); }
.meta__scene { color: var(--scr-ink); }

/* 화면 — 데스크톱 2.39:1, 768px 아래는 16:9 */
.picture {
    position: relative;
    aspect-ratio: 2.39 / 1;
    overflow: hidden;
    container-type: size;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.picture:focus-visible { outline: 2px solid var(--scr-ink); outline-offset: -8px; }

/* 장면 — 단어 표기를 거대하게, 톤온톤으로 잘라 놓은 필름 스틸 */
.shots, .shot { position: absolute; inset: 0; }
.shot { opacity: 0; transition: opacity .6s ease; }
.shot.is-on { opacity: 1; }
.ghost {
    position: absolute;
    left: var(--gx, 50%);
    top: var(--gy, 50%);
    font-family: var(--f-ja);
    font-weight: 500;
    font-size: calc(var(--gs, 110) * 1cqh);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--scr-ghost);
    white-space: nowrap;
    transform: translate(-50%, -50%);
    will-change: transform;
}
.ghost.v { writing-mode: vertical-rl; letter-spacing: 0; }
.ghost.anim { animation: reel-push 5.6s linear forwards; }
@keyframes reel-push {
    from { transform: translate(-50%, -50%) scale(1); }
    to { transform: translate(-50%, -50%) scale(1.05); }
}
.screen.is-paused .ghost { animation-play-state: paused; }

/* 자막 — 화면 아래 1/3, 가운데. 읽기 → 표기 → 뜻 세 줄 */
.subs { position: absolute; inset-inline: 6%; bottom: 12.5%; }
.cue {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}
/* 자막은 겹치지 않게 — 이전 줄은 빨리 지우고, 새 줄은 조금 늦게 600ms 로 떠오른다(배경 장면만 교차) */
.cue.is-on { opacity: 1; transition: opacity .6s ease .2s; }
.cue p { opacity: 0; transition: opacity .6s ease; }
.cue.r1 .sub-main, .cue.r2 .sub-read, .cue.r3 .sub-mean { opacity: 1; }
.cue.no-anim, .cue.no-anim p { transition: none !important; }
.sub-read {
    min-height: 1.4em;
    font-family: var(--f-ja);
    font-weight: 300;
    font-size: clamp(13px, 1.3vw, 19px);
    line-height: 1.4;
    letter-spacing: .2em;
    color: var(--scr-ink);
}
.cue.no-read .sub-read { visibility: hidden; }
.sub-main {
    margin-top: .08em;
    font-family: var(--f-ja);
    font-weight: 500;
    font-size: clamp(40px, 7vw, 88px);
    line-height: 1.14;
    letter-spacing: .04em;
    color: var(--scr-ink);
    white-space: nowrap;
}
.cue.is-long .sub-main { font-size: clamp(32px, 5.6vw, 72px); letter-spacing: .02em; }
.sub-mean {
    min-height: 1.4em;
    max-width: 34ch;
    margin-top: .5em;
    font-family: var(--f-sans);
    font-weight: 300;
    font-size: clamp(16px, 1.75vw, 26px);
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--scr-ink);
    text-wrap: balance;
}
.sub-mean:lang(ko) { font-family: var(--f-ko); }

/* 데이터를 못 읽음 — 고정 자막 + 다시 읽기 */
.screen[data-state="fallback"] .sub-main { font-size: clamp(20px, 3.4vw, 46px); letter-spacing: .04em; white-space: normal; max-width: 92%; }
.screen[data-state="fallback"] .ticks,
.screen[data-state="fallback"] .cb--prev,
.screen[data-state="fallback"] .cb--next,
.screen[data-state="fallback"] .cb--play { display: none; }
.screen[data-state="fallback"] .picture { cursor: default; }

/* 처음 — 필름 리더 3·2·1(헤어라인 원 + 가는 숫자) */
.leader {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--scr);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
}
.screen[data-state="leader"] .leader,
.screen[data-state="loading"].slow .leader {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease;
}
.leader__svg { position: absolute; height: 84%; width: auto; aspect-ratio: 1; fill: none; stroke: var(--scr-line); stroke-width: 1; overflow: visible; }
.leader__svg * { vector-effect: non-scaling-stroke; }
.leader__sweep { stroke: var(--scr-ink); transform-origin: 100px 100px; animation: reel-sweep .62s linear infinite; }
@keyframes reel-sweep { to { transform: rotate(360deg); } }
.screen[data-state="loading"]:not(.slow) .leader__sweep { animation: none; }
.leader__no {
    position: relative;
    font-family: var(--f-sans);
    font-weight: 300;
    font-size: 44cqh;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--scr-ink);
}
.leader__load {
    position: absolute;
    bottom: 7%;
    font-family: var(--f-mono);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--scr-dim);
    opacity: 0;
}
.screen.slow .leader__load { opacity: 1; }

/* 완료 — 終 */
.endcard {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: max(2.4cqh, 10px);
    background: var(--scr);
    cursor: default;
    animation: reel-fade .9s ease both;
}
@keyframes reel-fade { from { opacity: 0; } to { opacity: 1; } }
.end__mark { font-family: var(--f-ja); font-weight: 300; font-size: 34cqh; line-height: 1; color: var(--scr-ink); }
.end__reel { font-size: 11px; line-height: 1; letter-spacing: .2em; color: var(--scr-dim); }
.end__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: max(1.6cqh, 4px); }
.end__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid var(--scr-line);
    border-radius: 0;
    background: transparent;
    color: var(--scr-ink);
    font-family: var(--f-sans);
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s;
}
.end__btn:hover { border-color: var(--scr-ink); }
.end__btn:active { background: var(--scr-ink); color: var(--scr); }
.end__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.end__btn .arrow { margin-inline-start: 0; }

/* 누름 — 가운데 잠깐 떠오르는 멈춤·재생 표시 */
.flash {
    position: absolute;
    left: 50%;
    top: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 70px;
    height: 70px;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}
.flash i { display: none; width: 5px; height: 30px; background: var(--scr-ink); }
.flash b { display: none; width: 0; height: 0; border-style: solid; border-width: 16px 0 16px 27px; border-color: transparent transparent transparent var(--scr-ink); margin-left: 6px; }
.flash.is-pause i { display: block; }
.flash.is-play b { display: block; }
.flash.go { animation: reel-flash .75s ease forwards; }
@keyframes reel-flash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
    25% { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}

/* 화면 네 귀퉁이 재단선(01 의 글자 자리와 같은 표시) */
.frame { position: absolute; inset: 5.5cqh; pointer-events: none; }
.frame i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--scr-line); }
.frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.screen[data-state="end"] .frame, .screen[data-state="leader"] .frame { opacity: 0; }

/* 릴이 바뀌기 직전의 큐 마크(장식 — 필름의 담배 자국) */
.cuemark {
    position: absolute;
    top: 8%;
    right: 4.6%;
    width: 3.4cqh;
    height: 3.4cqh;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    background: var(--scr-ink);
    opacity: 0;
    pointer-events: none;
}
.cuemark.blink { animation: reel-cue 1.3s steps(1, end) forwards; }
@keyframes reel-cue {
    0% { opacity: 0; } 8% { opacity: .85; } 22% { opacity: 0; } 46% { opacity: .85; } 60%, 100% { opacity: 0; }
}

/* 아래 띠 — 1px 선 직각 단추 · 헤어라인 눈금 · 덱 링크 */
.bar--bot {
    min-height: var(--bar-bot);
    gap: 20px;
    padding: 0 16px 0 10px;
    border-top: 1px solid var(--scr-line);
}
.ctrls { display: flex; align-items: center; gap: 6px; flex: none; }
.cb {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--scr-line);
    border-radius: 0;
    background: transparent;
    color: var(--scr-ink);
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s;
}
.cb:hover { border-color: var(--scr-ink); }
.cb:active { background: var(--scr-ink); color: var(--scr); }
.cb:focus-visible { outline-offset: 2px; }
.cb[disabled] { opacity: .35; cursor: default; border-color: var(--scr-line); background: transparent; color: var(--scr-ink); }
.cb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.cb--play .i-play { fill: currentColor; stroke: none; }
.cb--play .i-play { display: none; }
.cb--play[aria-pressed="false"] .i-play { display: block; }
.cb--play[aria-pressed="false"] .i-pause { display: none; }
.cb--say { margin-inline-start: 10px; }
[dir="rtl"] .cb--prev svg, [dir="rtl"] .cb--next svg { transform: scaleX(-1); }

/* 눈금 — 장면 수만큼 헤어라인 칸(50음도 격자와 같은 언어). 지난 칸은 흰 채움, 지금 칸은 흰 테두리 + 차오름 */
.ticks { flex: 1 1 auto; min-width: 72px; display: flex; align-items: center; gap: 4px; height: 16px; }
.ticks li { position: relative; flex: 1; height: 8px; border: 1px solid var(--scr-line); overflow: hidden; }
.ticks li i { position: absolute; inset: 0; background: var(--scr-ink); transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .ticks li i { transform-origin: right center; }
.ticks li.done { background: var(--scr-ink); border-color: var(--scr-ink); }
.ticks li.now { border-color: var(--scr-ink); }
.ticks li.now i { animation: reel-tick 4.5s linear forwards; }
@keyframes reel-tick { to { transform: scaleX(1); } }
.screen.is-paused .ticks li.now i { animation-play-state: paused; }

.reel-retry {
    flex: 1 1 auto;
    justify-self: start;
    padding: 10px 0;
    background: none;
    border: 0;
    text-align: start;
    cursor: pointer;
    font-family: var(--f-mono);
    font-size: 11.5px;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--scr-ink);
}
.reel-retry span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--scr-dim); }
.reel-retry:hover span { text-decoration-color: var(--scr-ink); }
.reel-retry[disabled] { opacity: .35; cursor: default; }

.decks { display: flex; align-items: center; gap: 22px; flex: none; }
.dl {
    display: inline-flex;
    align-items: center;
    padding: 10px 0;
    font-family: var(--f-mono);
    font-size: 11.5px;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--scr-ink);
    white-space: nowrap;
}
.dl:hover > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.dl .arrow { font-size: 13px; letter-spacing: 0; }

/* ── 6. 50음도(01 Sumi 그대로 — 번호를 붙여 독립 섹션으로) ─────────────── */
.spec__bar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--ink);
}
.spec__bar .sec__no { grid-column: 1 / 2; }
.spec__title {
    grid-column: 2 / 5;
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.spec__mark { font-size: 15px; font-weight: 500; letter-spacing: 0; }

.tabs { grid-column: 5 / 10; display: flex; gap: 24px; padding-inline-start: calc(var(--lab-w) + 1px); }
.tab {
    padding: 6px 0 7px;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
    color: var(--usu);
    transition: color .2s, border-color .2s;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.seen {
    grid-column: 10 / 13;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-mono);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--usu);
}
.seen__v { color: var(--ink); white-space: nowrap; transition: background-color .2s, color .2s; }
.seen__bar { position: relative; width: 56px; height: 1px; background: var(--line); }
.seen__fill {
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s var(--ease);
}
[dir="rtl"] .seen__fill { transform-origin: right center; }
.seen.is-done .seen__v { padding: 4px 7px; background: var(--ink); color: var(--paper); }

.spec__body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    margin-top: 16px;
}

/* 글자가 서는 자리 — 격자 다섯 줄과 같은 높이의 정사각형 */
.stage { grid-column: 1 / 5; display: flex; flex-direction: column; }
.stage__box {
    --box: calc(var(--ch) * 5 + 4px);
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, var(--box));
    aspect-ratio: 1 / 1;
    margin-top: calc(var(--lab-h) + 1px);
    padding-bottom: 8%;   /* 아래 로마자 줄 몫 — 글자를 조금 올린다 */
}
.stage__glyph {
    font-family: var(--f-ja);
    font-size: calc(var(--box) * .76);
    font-weight: 300;
    line-height: 1;
    color: var(--ink);
    user-select: none;
    -webkit-user-select: none;
}
.crop {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 0 solid var(--ink);
}
.crop--a { top: 0; inset-inline-start: 0; border-top-width: 1px; border-inline-start-width: 1px; }
.crop--b { top: 0; inset-inline-end: 0; border-top-width: 1px; border-inline-end-width: 1px; }
.crop--c { bottom: 0; inset-inline-start: 0; border-bottom-width: 1px; border-inline-start-width: 1px; }
.crop--d { bottom: 0; inset-inline-end: 0; border-bottom-width: 1px; border-inline-end-width: 1px; }

.stage__meta { margin-top: 14px; max-width: calc(var(--ch) * 5 + 4px); }
.stage__read {
    position: absolute;
    inset-inline: 22px;
    bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.stage__romaji { font-size: 22px; line-height: 1; letter-spacing: .02em; }
.stage__kr { font-size: 20px; font-weight: 300; line-height: 1; color: var(--usu); }
.stage__code {
    margin-inline-start: auto;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .06em;
    color: var(--usu);
}
.stage__acts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 22px;
    font-size: 14px;
    line-height: 1.5;
}
.go { white-space: nowrap; }
/* 46자를 다 보면 단어 카드가 먹으로 선다 */
.stage.is-done #go-flash {
    padding: 5px 9px;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
}

.say {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink);
}
.say__txt {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .34em;
    text-decoration-color: var(--usu);
}
.say:hover .say__txt { text-decoration-color: var(--ink); }
.say__bars { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.say__bars i { display: block; width: 2px; height: 12px; background: currentColor; }
.say__bars i:nth-child(1) { transform: scaleY(.45); }
.say__bars i:nth-child(2) { transform: scaleY(1); }
.say__bars i:nth-child(3) { transform: scaleY(.7); }
.say.is-speaking .say__bars i { animation: sumi-bar .42s ease-in-out infinite alternate; }
.say.is-speaking .say__bars i:nth-child(2) { animation-delay: .14s; }
.say.is-speaking .say__bars i:nth-child(3) { animation-delay: .28s; }
@keyframes sumi-bar { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

/* 격자 — 칸 사이 1px 틈으로 선을 그린다(뒤판 = 선 색) */
.chart-wrap { grid-column: 5 / 13; min-width: 0; }
.chart {
    position: relative;
    display: grid;
    grid-template-columns: var(--lab-w) repeat(11, minmax(0, 1fr));
    grid-template-rows: var(--lab-h) repeat(5, var(--ch));
    gap: 1px;
}
.chart__frame {
    grid-row: 2 / 7;
    grid-column: 2 / 13;
    background: var(--line);
    outline: 1px solid var(--line);
}
.lab {
    display: flex;
    font-family: var(--f-mono);
    font-size: 10px;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--usu);
    user-select: none;
    -webkit-user-select: none;
}
.lab--g { grid-row: 1; grid-column: var(--b); justify-content: center; align-items: flex-start; }
.lab--d { grid-column: 1; grid-row: var(--a); justify-content: flex-start; align-items: center; }

.cell {
    grid-row: var(--a);
    grid-column: var(--b);
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--f-ja);
    font-size: calc(var(--ch) * .42);
    font-weight: 300;
    line-height: 1;
    transition: background-color .12s linear, color .12s linear;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.cell--blank, .cell:disabled { cursor: default; }
.cell:not(:disabled):not(.cell--blank):hover { z-index: 1; outline: 1px solid var(--ink); outline-offset: 0; }
.cell[aria-pressed="true"] { z-index: 1; background: var(--ink); color: var(--paper); }
.cell:focus-visible { z-index: 2; outline: 2px solid var(--ink); outline-offset: 0; }
.cell[aria-pressed="true"]:focus-visible::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid var(--paper);
    pointer-events: none;
}
/* 이미 본 글자 — 오른쪽 위 작은 먹점 */
.cell.is-seen::after {
    content: "";
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    width: 3px;
    height: 3px;
    background: currentColor;
}

.chart__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 24px;
    margin-top: 14px;
    padding-inline-start: calc(var(--lab-w) + 1px);
    font-size: 13px;
    line-height: 1.5;
    color: var(--usu);
}
.chart__state { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; color: var(--ink); }
.chart__state:empty { display: none; }
.chart__state button {
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .34em;
}
.chart__more { color: var(--usu); transition: color .2s; }
.chart__more .mono { color: var(--ink); }
.chart__more:hover { color: var(--ink); }
.chart__sep { margin-inline: 8px; color: var(--line); }
.chart[data-state="error"] .chart__frame { opacity: .55; }

/* ── 7. 섹션 머리 — 작은 모노 번호 + 대문자 소제목 + 먹 선 ───────────── */
.sec { padding-top: clamp(80px, 12vh, 136px); }
.sec__head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: baseline;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ink);
}
.sec__no { grid-column: 1 / 2; font-size: 11px; letter-spacing: .06em; color: var(--usu); }
.sec__title {
    grid-column: 2 / 7;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sec__sub {
    grid-column: 7 / 13;
    justify-self: end;
    max-width: 36em;
    font-size: 13px;
    line-height: 1.5;
    text-align: end;
    color: var(--usu);
}

/* ── 8. 과정 4개 — 헤어라인 표 ───────────────────────────────────────── */
.course {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
    min-height: 132px;
    padding-block: 30px;
    border-bottom: 1px solid var(--line);
    transition: border-color .25s var(--ease);
}
.course:hover { border-bottom-color: var(--ink); }
.course__no {
    grid-column: 1 / 2;
    align-self: start;
    padding-top: 12px;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--usu);
}
.course__main { grid-column: 2 / 6; min-width: 0; }
.course__name {
    hyphens: auto;
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.032em;
}
html:lang(ko) .course__name, html:lang(ja) .course__name, html:lang(zh) .course__name { letter-spacing: -0.02em; }
/* 행 전체가 과정 링크 — 칩은 그 위에서 따로 눌린다(링크 중첩 없음) */
.course__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.course:hover .course__link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .14em;
}
.course__link:focus-visible { outline: none; }
.course__link:focus-visible::after { outline: 2px solid var(--ink); outline-offset: -2px; }
.course__desc { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--usu); }

.course__count { grid-column: 6 / 9; }
.count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.count__n { font-size: clamp(22px, 2vw, 28px); line-height: 1; letter-spacing: -0.03em; }
.count__u { font-size: 13px; color: var(--usu); }
.kcount { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.kcount > div { display: flex; flex-direction: column; gap: 8px; }
.kcount dd { order: -1; }
.kcount dd { font-size: clamp(22px, 2vw, 28px); line-height: 1; letter-spacing: -0.03em; }
.kcount dt { max-width: 9em; font-size: 12px; line-height: 1.3; color: var(--usu); }

.levels {
    grid-column: 9 / 12;
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    pointer-events: none;
}
.levels__lab { font-size: 12px; color: var(--usu); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 32px;
    padding-inline: 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--ink);
    pointer-events: auto;
    transition: border-color .15s, background-color .15s, color .15s;
}
.chip:hover { border-color: var(--ink); }
.chip:active { background: var(--ink); color: var(--paper); }
.chip--word { font-family: var(--f-sans); font-size: 13px; letter-spacing: 0; }

.course__go {
    grid-column: 12 / 13;
    justify-self: end;
    font-size: 24px;
    line-height: 1;
}

/* ── 9. 매일 쓰는 도구 3개 ───────────────────────────────────────────── */
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 32px 38px 0;
    border-bottom: 1px solid var(--line);
    transition: border-color .25s var(--ease);
}
.tool + .tool { padding-inline-start: 32px; border-inline-start: 1px solid var(--line); }
.tool:hover { border-bottom-color: var(--ink); }
.tool__fig {
    display: block;
    min-height: 44px;
    margin-bottom: 46px;
    font-family: var(--f-mono);
    line-height: 1;
}
.tool__n { font-size: clamp(30px, 2.8vw, 42px); letter-spacing: -0.04em; }
/* 기록이 없을 때의 「—」 — 실패처럼 보이지 않게 가는 선으로 */
.tool__n--none { font-family: var(--f-sans); font-weight: 300; color: var(--usu); }
.tool__u { font-family: var(--f-sans); font-size: 13px; letter-spacing: 0; color: var(--usu); }
.tool__name { font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; }
.tool__link::after { content: ""; position: absolute; inset: 0; }
.tool:hover .tool__link > span:first-child {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}
.tool__link:focus-visible { outline: none; }
.tool__link:focus-visible::after { outline: 2px solid var(--ink); outline-offset: -2px; }
.tool__desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--usu); }

/* ── 10. 소개·사용법 — 좁은 칼럼, 긴 행간 ────────────────────────────── */
.prose {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    padding-top: 44px;
}
.prose > p { grid-column: 2 / 10; }
.prose__lead {
    max-width: 30em;
    font-size: clamp(20px, 1.9vw, 28px);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -0.012em;
}
.prose__body {
    max-width: 38em;
    margin-top: 28px;
    font-size: 16px;
    line-height: 1.9;
    color: var(--usu);
}

.step {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: baseline;
    padding-block: 24px;
    border-bottom: 1px solid var(--line);
}
.step__no { grid-column: 1 / 2; font-size: 11px; letter-spacing: .06em; color: var(--usu); }
.step__text { grid-column: 2 / 9; max-width: 38em; font-size: 17px; line-height: 1.75; }
.step__go { grid-column: 9 / 13; justify-self: end; font-size: 14px; white-space: nowrap; }


/* ── 12. 스크롤 등장 — opacity + 8px 만 ──────────────────────────────── */
html.can-reveal .reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html.can-reveal .reveal.is-in { opacity: 1; transform: none; }

/* ── 13. 반응형 ──────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .hero__head { grid-column: 1 / 8; }
    .hero__act { grid-column: 8 / 13; }
    .levels { grid-column: 8 / 12; }
    .course__count { grid-column: 6 / 8; }
    .course__main { grid-column: 2 / 6; }
    .stage__acts { gap: 8px 16px; font-size: 13px; }
    .decks { gap: 18px; }
}

@media (max-width: 959px) {
    :root {
        --chart-w: var(--W);
        --ch: min(58px, calc((var(--chart-w) - var(--lab-w) - 11px) / 11));
    }

    .hero { padding-top: 32px; padding-bottom: 44px; }
    .hero__head, .hero__act { grid-column: 1 / -1; }
    .hero h1 { font-size: clamp(40px, 9.4vw, 76px); max-width: 11em; }
    .hero__act { margin-top: 26px; max-width: 36em; gap: 18px; padding-bottom: 0; }

    /* 태블릿·가로로 눕힌 휴대폰 — 폭 가득, 다만 스크린 전체가 화면 높이를 넘지 않게 */
    .screen {
        width: min(100%, calc((100vh - var(--mast-h) - var(--bar-top) - var(--bar-bot) - 16px) * 2.39));
        width: min(100%, calc((100svh - var(--mast-h) - var(--bar-top) - var(--bar-bot) - 16px) * 2.39));
        margin-top: 18px;
    }
    .bar--bot { gap: 16px; }

    /* 번호 칸·틈은 섹션 머리(2.25rem + --gap)와 같게, 「본 글자」 는 자리가 모자라면 다음 줄로 */
    .spec__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--gap); }
    .spec__bar .sec__no { order: 0; flex: none; width: 2.25rem; }
    .spec__title { order: 1; min-width: 0; }
    .seen { order: 2; margin-inline-start: auto; }
    .tabs { order: 3; flex: 0 0 100%; padding-inline-start: 0; }
    .spec__body { display: block; margin-top: 18px; }

    .stage { margin-bottom: 26px; }
    .stage__box { --box: clamp(208px, 30vh, 300px); width: 100%; height: var(--box); aspect-ratio: auto; margin-top: 0; }
    .stage__meta { max-width: none; }

    .sec { padding-top: 76px; }
    .sec__head { grid-template-columns: 2.25rem minmax(0, 1fr); row-gap: 8px; }
    .sec__no { grid-column: 1; }
    .sec__title { grid-column: 2; }
    .sec__sub { grid-column: 2; justify-self: start; text-align: start; }

    .course {
        grid-template-columns: 2.25rem minmax(0, 1fr) auto;
        align-items: start;
        row-gap: 18px;
        min-height: 0;
        padding-block: 26px;
    }
    .course__no { grid-column: 1; grid-row: 1; padding-top: 10px; }
    .course__main { grid-column: 2; grid-row: 1; }
    .course__go { grid-column: 3; grid-row: 1; align-self: center; }
    .course__count { grid-column: 2 / 4; grid-row: 2; }
    .levels { grid-column: 2 / 4; grid-row: 3; }

    .tools { grid-template-columns: minmax(0, 1fr); }
    .tool {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 20px;
        align-items: start;
        padding: 26px 0 28px;
    }
    .tool + .tool { padding-inline-start: 0; border-inline-start: 0; }
    .tool__fig { grid-column: 2; grid-row: 1 / span 2; min-height: 0; margin: 2px 0 0; text-align: end; }
    .tool__name { grid-column: 1; grid-row: 1; }
    .tool__desc { grid-column: 1; grid-row: 2; }
    .tool__n { font-size: 26px; }

    .prose { grid-template-columns: 2.25rem minmax(0, 1fr); padding-top: 32px; }
    .prose > p { grid-column: 2; }

    .step { grid-template-columns: 2.25rem minmax(0, 1fr); row-gap: 10px; padding-block: 22px; }
    .step__no { grid-column: 1; }
    .step__text { grid-column: 2; font-size: 16px; }
    .step__go { grid-column: 2; justify-self: start; }

}

/* 스크린 — 좁은 화면은 16:9, 아래 띠는 두 줄(조작·눈금 / 덱 링크 두 칸) */
@media (max-width: 759px) {
    :root { --bar-top: 34px; }
    .screen { width: 100%; }
    .picture { aspect-ratio: 16 / 9; }
    .bar { padding-inline: 12px; font-size: 10.5px; letter-spacing: .08em; }
    .tc { letter-spacing: .1em; }
    .tc__total, .meta__reel { display: none; }
    .meta__reel + .meta__scene::before { content: none; }
    .subs { inset-inline: 5%; bottom: 8%; }

    .bar--bot {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0 14px;
        padding: 0;
    }
    .ctrls { padding-block: 7px; padding-inline-start: 7px; gap: 4px; }
    .cb { width: 42px; height: 42px; }
    .cb--say { margin-inline-start: 6px; }
    .ticks { padding-inline-end: 14px; gap: 3px; min-width: 0; }
    .ticks li { height: 8px; }
    .reel-retry { grid-column: 2; grid-row: 1; padding-inline-end: 14px; }
    .decks { grid-column: 1 / -1; gap: 0; border-top: 1px solid var(--scr-line); }
    .dl { flex: 1 1 0; justify-content: center; min-height: 48px; padding: 12px; }
    .dl + .dl { border-inline-start: 1px solid var(--scr-line); }
}

@media (max-width: 599px) {
    :root { --lab-w: 16px; --lab-h: 18px; --ch: 38px; }

    .hero h1 { font-size: clamp(38px, 10.6vw, 52px); }
    .cta { min-height: 56px; }

    /* 스크린은 화면 끝까지(필름처럼) */
    .screen { width: auto; min-width: 0; margin-inline: calc(-1 * var(--pad)); border-inline-width: 0; }

    .seen__bar { display: none; }   /* 번호 칸이 생긴 만큼 — 「본 글자 n / 46」 이 소제목과 한 줄에 서게 */
    .lab { font-size: 9px; letter-spacing: 0; }
    .cell { font-size: 17px; font-weight: 500; }
    .cell.is-seen::after { top: 3px; inset-inline-end: 3px; width: 3px; height: 3px; }
    .chart__foot { padding-inline-start: 0; flex-direction: column; gap: 8px; }

    .count__n, .kcount dd { font-size: 24px; }
    .course__name { font-size: 32px; }
}

/* ── 14. 움직임 줄이기 ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    html.can-reveal .reveal { opacity: 1; transform: none; }
    /* 스크린 — 카메라 다가감·리더 바늘·차오르는 눈금·가운데 표시·큐 마크를 끈다 */
    .ghost.anim, .leader__sweep { animation: none !important; }
    .ticks li.now i { animation: none !important; transform: scaleX(0); }
    .cue, .cue p, .cue.is-on, .shot { transition-delay: 0s !important; }
    .flash, .cuemark { display: none; }
}