/* 스피킹 타워 — K웹툰 캐스팅(Mina/Navi/Tori/Rabi) 게임 UI. kwebtoon.css 토큰(--kw-ink 등)을
   그대로 쓴다 — 이 파일 앞에 assets/kwebtoon.css 가 먼저 로드돼 있어야 한다. 2026-09-11,
   실사형 speaking-cinematic.css 를 대체 — 채점·동의·API 로직은 안 건드리고(speaking.html
   JS 그대로) 시각 레이어만 이 파일로 새로 짰다. 셀렉터는 옛 파일과 1:1 대응(구조는 그대로,
   외형만 K웹툰 코믹 패널 톤 — 두꺼운 잉크 테두리 + 하드 오프셋 그림자). */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;scroll-behavior:smooth}
body{
  font-family:"Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
  color:var(--kw-ink);background:var(--kw-paper);word-break:keep-all;-webkit-font-smoothing:antialiased;
}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation;font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--kw-gold);outline-offset:3px}
[hidden]{display:none!important}
img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-100px;left:15px;z-index:50;background:#fff;padding:15px;border:var(--kw-line);border-radius:0 0 12px 0}
.skip:focus{top:0}

/* ── 상단 내비 ── */
.page-nav{max-width:1420px;margin:auto;min-height:78px;padding:18px 32px;display:flex;align-items:center;gap:16px}
.brand{font-size:22px;font-weight:900;letter-spacing:-.02em}
.brand span{color:var(--kw-gold)}
.nav-note{font-size:11px;letter-spacing:.12em;font-weight:800;color:var(--kw-muted)}
.page-nav .back{margin-left:auto}
.motion-toggle{border:2px solid var(--kw-ink);border-radius:999px;padding:9px 14px;background:#fff;color:var(--kw-ink);min-height:40px;font-size:12px;font-weight:800}

/* ── 레이아웃 ── */
.speaking-layout{max-width:1360px;margin:0 auto 42px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,590px);gap:18px;align-items:start;padding:0 20px}

/* ── 스토리 패널(K웹툰 무대) ── */
.story-panel{
  position:sticky;top:16px;min-height:740px;overflow:hidden;isolation:isolate;color:#fff;
  display:flex;flex-direction:column;border:var(--kw-line);border-radius:26px;box-shadow:var(--kw-shadow);
  background:linear-gradient(160deg,#17322f,#0e211f);
}
.story-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 30%;z-index:-3}
.story-panel:after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,#0a1a1794 0%,#0a1a1710 30%,#0a1a1799 66%,#0a1a17f2 100%)}
.scene-light{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 16% 20%,#f0c86933,transparent 55%)}
.story-heading{padding:32px 30px 0}
.eyebrow{margin:0 0 10px;font-size:10px;letter-spacing:.16em;color:var(--kw-gold);font-weight:900}
.story-heading h1{font-size:clamp(28px,3vw,42px);letter-spacing:-.03em;line-height:1.28;font-weight:900;margin:0 0 12px}
.story-heading>p:last-child{font-size:13px;line-height:1.8;color:#eaf3ec;margin:0;font-weight:700}

/* ── 타워 HUD — 무대 오른쪽에 세운 층 스트립. 클라이머가 현재 층에 올라선다 ── */
.kw-tower{position:absolute;right:16px;top:74px;z-index:3;width:104px;--fh:32px;--fg:6px}
.kw-tower__track{display:flex;flex-direction:column;gap:var(--fg)}
.kw-tower__floor{
  display:flex;align-items:center;gap:6px;height:var(--fh);padding:0 9px;
  border:2px solid #ffffff5c;border-radius:9px;background:#ffffff1f;color:#ffffffcc;
  backdrop-filter:blur(3px);transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.kw-tower__floor b{font-size:12px;font-weight:900}
.kw-tower__floor span{font-size:8px;letter-spacing:.08em;font-weight:800;opacity:.85}
.kw-tower__floor.done{background:var(--kw-gold);border-color:var(--kw-ink);color:var(--kw-ink)}
.kw-tower__floor.done::after{content:"✓";margin-left:auto;font-size:11px;font-weight:900}
.kw-tower__floor.current{background:var(--kw-coral);border-color:#fff;color:#fff;transform:scale(1.06);box-shadow:0 0 0 3px #ffffff40,var(--kw-shadow-sm)}
.kw-tower__floor.todo{opacity:.5}
.kw-tower__climber{
  position:absolute;right:calc(100% + 4px);width:44px;height:44px;
  bottom:calc(var(--at,0) * (var(--fh) + var(--fg)) - 5px);
  transition:bottom .55s cubic-bezier(.34,1.5,.64,1);
}
.kw-tower__climber img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px #04121070)}
.kw-tower__climber img:not([src]){visibility:hidden}
.kw-tower.is-top .kw-tower__climber{animation:climber-bob .7s ease-in-out infinite alternate}
@keyframes climber-bob{to{transform:translateY(-6px)}}

/* ── 층 전환 — stage 내용이 바뀔 때마다 자식이 살짝 떠오른다(순수 CSS, JS 무관).
   fill-mode 를 안 쓴다 — 애니메이션이 어떤 이유로 안 돌아도 내용은 늘 보인다. ── */
.card>*{animation:floor-in .34s ease}
@keyframes floor-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── 완료 별점·콤보 ── */
.stars{display:flex;justify-content:center;gap:10px;margin:2px 0 10px;font-size:34px;line-height:1}
.stars span{color:#d8ddd5}
.stars span.on{color:var(--kw-gold);animation:star-pop .42s ease both}
.stars span.on:nth-child(2){animation-delay:.1s}
.stars span.on:nth-child(3){animation-delay:.2s}
@keyframes star-pop{0%{transform:scale(0) rotate(-35deg)}70%{transform:scale(1.28)}100%{transform:scale(1)}}
.perfect{font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--kw-green);margin:0 0 8px}
.combo{font-size:12px;font-weight:800;color:var(--kw-coral);margin:0 0 8px}

/* ── 완료 색종이 ── */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:240;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;animation:confetti-fall linear forwards}
@keyframes confetti-fall{to{transform:translateY(106vh) rotate(700deg);opacity:.85}}

/* ── 인라인 미세 피드백 ── */
.choice[data-state=ok]{animation:answer-pop .32s ease}
.choice[data-state=ok]::after{content:"✓";float:right;font-weight:900;color:var(--kw-green)}
.slot.on{animation:answer-pop .3s ease}
.heard.ok{animation:answer-pop .3s ease}
@keyframes answer-pop{40%{transform:scale(1.03)}}

.scene-person{margin:auto 30px 0;padding-top:36px;display:flex;align-items:center;gap:16px}
.portrait{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;width:68px;height:68px;border-radius:18px;background:#f7f3e9;border:2px solid #fff;vertical-align:middle}
.portrait img{position:static;width:100%;height:100%;max-width:none;object-fit:contain;padding:4px}
.scene-person>.portrait{width:118px;height:118px;border-radius:26px;border:3px solid var(--kw-gold);box-shadow:0 12px 32px #04121080}
.scene-person .eyebrow{margin-bottom:6px}
.scene-person strong{font-size:19px;font-weight:900;letter-spacing:-.02em}
.scene-person p:last-child{font-size:12px;color:#dcebe4;line-height:1.7;max-width:230px;font-weight:700}
.scene-caption{margin:20px 30px 0;padding:16px 0;border-top:2px dashed #ffffff33}
.scene-caption h2{font-size:17px;margin:0 0 8px;font-weight:900;letter-spacing:-.02em}
.scene-caption p{font-size:13px;line-height:1.8;color:#e2eee7;margin:0;font-weight:700}
.cast-roster{display:flex;justify-content:space-between;gap:6px;margin:6px 30px 26px}
.cast-roster figure{margin:0;text-align:center;flex:1;min-width:0}
.cast-roster .portrait{width:46px;height:46px;border-radius:50%;border-color:#ffffff70;background:#f7f3e9}
.cast-roster figcaption{font-size:9px;font-weight:800;color:#dcebe4;margin-top:6px;white-space:nowrap}
.cast-roster figure.current .portrait{outline:3px solid var(--kw-gold);outline-offset:3px}
.cast-roster figure.current figcaption{color:var(--kw-gold)}

/* ── 레슨 패널 ── */
.lesson-panel{background:#fff;min-height:740px;padding:30px;border:var(--kw-line);border-radius:26px;box-shadow:var(--kw-shadow)}
.top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.top .back{font-size:11px;padding:8px 12px;min-height:40px}
.top h2{font-size:15px;font-weight:900;letter-spacing:-.02em;margin:0 auto 0 0}
.back{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border:2px solid var(--kw-ink);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:800;color:var(--kw-ink);background:#fff}
.back:hover{background:var(--kw-mint)}
.lesson-label{font-size:10px;letter-spacing:.14em;font-weight:900;color:var(--kw-muted);margin:0 0 12px}
.bar{position:relative;height:12px;border-radius:999px;background:#eef2ea;overflow:hidden;margin:0 0 10px;border:2px solid var(--kw-ink)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--kw-gold),var(--kw-coral));transition:width .45s cubic-bezier(.4,0,.2,1)}
.bar::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1.5px),var(--kw-ink) calc(20% - 1.5px) 20%)}
.count{font-size:11px;color:var(--kw-muted);line-height:1.8;margin:0 0 16px;font-weight:700}
.count b{color:var(--kw-green)}
/* ── 재방문 훅: 상단 학습 기록 배지 ── */
.stats{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
.stats .stat{font-size:11px;font-weight:800;color:var(--kw-muted);background:var(--kw-paper);border:2px solid var(--kw-ink);border-radius:999px;padding:5px 10px;line-height:1}
.stats .stat b{color:var(--kw-green);font-size:13px}
.stats .stat.on{background:var(--kw-mint);color:var(--kw-ink)}

.levels{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px}
.lv{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border:2px solid var(--kw-ink);border-radius:999px;font-size:12px;font-weight:800;background:#fff;color:var(--kw-ink)}
.lv.on{background:var(--kw-gold)}
.lv:hover{background:var(--kw-mint)}
.lv.cleared{border-color:var(--kw-green)}
.lv.next:not(.on){box-shadow:2px 2px 0 var(--kw-green)}
.lv i{font-style:normal;margin-left:5px;font-size:10px;color:var(--kw-coral);letter-spacing:-.05em}
.lv i.rec{color:var(--kw-green);font-weight:900;letter-spacing:0}

/* ── 재방문 훅: 완료 화면의 다음 단계·스트릭 ── */
.streak-nudge{font-size:12px;font-weight:800;color:var(--kw-coral);margin:14px 0 0}
.streak-nudge b{color:var(--kw-green)}
.next-card{width:100%;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px;border:var(--kw-line);border-radius:14px;background:var(--kw-sky);color:var(--kw-ink);font-size:14px;font-weight:900;margin-top:12px}
.next-card small{font-size:11px;color:var(--kw-muted);font-weight:700}
.next-card:hover{box-shadow:var(--kw-shadow-sm);transform:translate(-1px,-1px)}

/* ── 모의고사 모드 ── */
.mock-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.mock-count{font-size:12px;font-weight:800;color:var(--kw-muted)}
.mock-clock{font-size:16px;font-weight:900;color:var(--kw-ink);font-variant-numeric:tabular-nums;background:var(--kw-paper);border:2px solid var(--kw-ink);border-radius:999px;padding:4px 14px}
.mock-clock.low{background:#fbe4de;color:var(--kw-coral)}
.list .mock-ans{color:var(--kw-green);font-weight:800}
.list .mock-kr{color:var(--kw-muted);font-size:12px;font-weight:700}
.card{border-top:2px dashed #dde1d9;padding:20px 0 0;min-width:0}
.speaker{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.who{font-size:13px;color:var(--kw-muted);line-height:1.8;margin:0;font-weight:700}
.who b{display:block;font-size:15px;font-weight:900;color:var(--kw-green);margin-bottom:2px}
.ask{font-size:17px;line-height:1.7;margin:0 0 12px;font-weight:800}
.ask .kr{display:block;font-size:13px;color:var(--kw-muted);margin-top:5px;font-weight:700}
.target{background:var(--kw-sky);border:var(--kw-line);border-radius:16px;text-align:center;padding:26px 18px;margin-bottom:12px}
.target b{display:block;font-size:clamp(22px,2.4vw,30px);font-weight:900;line-height:1.4;overflow-wrap:anywhere}
.target small{display:block;font-size:12px;line-height:1.7;color:var(--kw-muted);margin-top:12px;font-weight:700}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.primary,.ghost{flex:1 1 130px;min-height:50px;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:900;border:2px solid var(--kw-ink)}
.primary{background:var(--kw-gold);color:var(--kw-ink)}
.primary:hover{box-shadow:3px 3px 0 var(--kw-ink);transform:translate(-1px,-1px)}
.ghost{background:#fff;color:var(--kw-ink)}
.ghost:hover{background:var(--kw-mint)}
.mic{width:100%;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;border:var(--kw-line);border-radius:16px;background:var(--kw-mint);color:var(--kw-ink);font-size:17px;font-weight:900;margin-top:14px}
.mic small{font-size:12px;color:var(--kw-muted);font-weight:700}
.mic.on{animation:mic-pulse 1.4s ease-in-out infinite;background:var(--kw-gold)}
.heard{padding:13px;border:2px solid var(--kw-ink);border-radius:12px;font-size:14px;line-height:1.8;margin-top:14px;background:#fff;font-weight:700}
.heard.ok{background:var(--kw-mint)}
.heard.no{background:#fbe4de}
.heard b{color:var(--kw-green)}
.choices{display:grid;gap:10px;margin-top:16px}
.choice{min-height:56px;border:2px solid var(--kw-ink);border-radius:12px;padding:14px 16px;text-align:left;background:#fff;color:var(--kw-ink);font-size:16px;font-weight:800;line-height:1.5;overflow-wrap:anywhere}
.choice:hover{background:var(--kw-mint)}
.choice[data-state=ok]{background:var(--kw-mint);box-shadow:3px 3px 0 var(--kw-ink)}
.choice[data-state=no]{background:#fbe4de}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.slot{min-height:46px;padding:10px 16px;background:#fff;border:2px solid var(--kw-ink);border-radius:999px;color:var(--kw-ink);font-size:15px;font-weight:800}
.slot.on{background:var(--kw-gold)}
.help{display:none;margin-top:16px;gap:12px;padding:14px;border:var(--kw-line);border-radius:16px;background:#fff8ea}
.help.show{display:flex;align-items:flex-start}
.help .portrait{width:52px;height:52px;border-radius:14px}
.help p{margin:0;font-size:13px;line-height:1.8;font-weight:700}
.help b{color:var(--kw-coral)}
.help.rest{background:var(--kw-mint)}
.help.rest b{color:var(--kw-green)}
.gate>.portrait{width:88px;height:88px;margin-bottom:14px}
.gate h2{font-size:20px;letter-spacing:-.02em;line-height:1.5;margin:0 0 12px;font-weight:900}
.gate p{color:var(--kw-muted);font-size:13px;line-height:1.85;margin:0 0 14px;font-weight:700}
.gate ul{padding-left:18px;color:var(--kw-muted);font-size:12px;line-height:1.85;font-weight:700}
.gate li+li{margin-top:6px}
.gate b{color:var(--kw-ink)}
.gate .warn{color:var(--kw-coral)}
.notice{font-size:11px;line-height:1.85;color:var(--kw-muted);margin:16px 0 0;font-weight:700}
.notice a{text-decoration:underline;text-underline-offset:3px;color:var(--kw-green);font-weight:900}
.done{text-align:center}
.done>.portrait{width:100px;height:100px;margin-bottom:16px;border-radius:24px}
.done h2{font-size:22px;line-height:1.4;margin:0 0 12px;letter-spacing:-.02em;font-weight:900}
.said{font-size:13px;line-height:1.8;color:var(--kw-muted);font-weight:700}
.list{list-style:none;text-align:left;margin:18px 0;padding:0}
.list li{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-top:2px dashed #dde1d9;font-size:14px;font-weight:700}
.list em{font-style:normal;overflow-wrap:anywhere}
.list span{font-size:10px;flex-shrink:0;margin-left:auto;color:var(--kw-muted);font-weight:800}
.home-review{padding:15px;background:var(--kw-mint);border:var(--kw-line);border-radius:14px;font-size:13px;line-height:1.8;color:var(--kw-ink);font-weight:700}
.pron-try{width:100%;min-height:50px;padding:12px;border:var(--kw-line);border-radius:12px;background:var(--kw-gold);color:var(--kw-ink);font-size:13px;font-weight:900;margin-top:14px}

/* ── AI 발음 평가 팝업 ── */
.popup-backdrop{position:fixed;inset:0;display:none;place-items:center;background:#0d1f1cb8;backdrop-filter:blur(6px);padding:18px;z-index:230}
.popup-backdrop.open{display:grid}
.popup-card{background:var(--kw-paper);width:min(440px,100%);max-height:90svh;overflow:auto;padding:26px;border:var(--kw-line);border-radius:22px;box-shadow:8px 8px 0 var(--kw-ink);text-align:center}
.popup-card .big{font-size:32px}
.popup-card h3{font-size:20px;line-height:1.5;margin:14px 0;font-weight:900}
.popup-card p{font-size:13px;line-height:1.85;color:var(--kw-muted);font-weight:700}
.popup-card button,.popup-card .back{flex:1 1 120px}
.quota-bar{height:8px;background:#eef2ea;border-radius:999px;overflow:hidden;border:2px solid var(--kw-ink)}
.quota-bar i{display:block;height:100%;background:var(--kw-coral)}
.score-card{background:var(--kw-sky);border:var(--kw-line);border-radius:14px;padding:14px;margin-top:14px}
.word{display:inline-block;padding:5px 9px;margin:3px;border-radius:999px;font-weight:800;font-size:12px;border:2px solid var(--kw-ink)}
.word.good{background:var(--kw-mint)}
.word.bad{background:#fbe4de}

.page-footer{padding:0 20px 26px;text-align:center;font-size:11px;line-height:1.8;color:var(--kw-muted);font-weight:700}
.page-footer span{color:var(--kw-coral);font-weight:900}

@keyframes mic-pulse{50%{box-shadow:0 0 0 6px #f0c86955}}
html.motion-off *,html.motion-off *:before,html.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

@media(max-width:1000px){
  .speaking-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);padding:0 16px}
  .lesson-panel{padding:24px}
  .story-heading{padding:24px 22px 0}
  .kw-tower{right:12px;width:96px}
  .scene-person{margin:auto 22px 0;gap:12px}
  .scene-person>.portrait{width:94px;height:94px}
  .scene-caption{margin:20px 22px 0}
  .cast-roster{margin:6px 22px 22px;gap:4px}
  .cast-roster .portrait{width:36px;height:36px}
  .cast-roster figcaption{font-size:8px}
  .page-nav{padding:16px 24px}
}
@media(max-width:760px){
  .page-nav{padding:14px 18px;min-height:66px;gap:10px}
  .brand{font-size:19px}
  .nav-note{display:none}
  .page-nav .back{font-size:10px;padding:8px 10px}
  .motion-toggle{font-size:10px;padding:8px 10px}
  .speaking-layout{display:block;padding:0 12px;margin-bottom:22px}
  .story-panel{position:relative;top:auto;min-height:380px;border-radius:22px 22px 0 0}
  .story-heading{padding:22px 20px 0}
  .story-heading h1{font-size:29px;margin-bottom:10px}
  .story-heading>p:last-child{font-size:12px;max-width:245px}
  .kw-tower{display:none} /* 좁은 화면에선 세로 타워 대신 레슨 패널의 5분할 진행바로 대체 */
  .scene-person{margin:22px 20px 0;padding:0;gap:12px}
  .scene-person>.portrait{width:70px;height:70px;border-radius:18px}
  .scene-person strong{font-size:16px}
  .scene-person p:last-child{font-size:11px;margin:6px 0}
  .scene-person .eyebrow{font-size:8px;margin:0 0 6px}
  .scene-caption{margin:14px 20px 0;padding:14px 0}
  .scene-caption h2{font-size:15px;margin-bottom:6px}
  .scene-caption p{font-size:11px;line-height:1.75}
  .cast-roster{margin:0 20px 20px}
  .cast-roster .portrait{width:32px;height:32px}
  .cast-roster figcaption{font-size:8px}
  .lesson-panel{min-height:0;border-radius:0 0 22px 22px;padding:22px 18px 26px}
  .top{margin-bottom:18px}
  .top h2{font-size:12px}
  .top .back{font-size:10px;padding:8px}
  .card{padding-top:18px}
  .target{padding:22px 14px}
  .target b{font-size:24px}
  .count{font-size:10px}
  .lv{padding:8px 10px;font-size:11px}
  .speaker .portrait{width:56px;height:56px}
  .who{font-size:12px}
  .who b{font-size:14px}
  .primary,.ghost{font-size:13px}
  .gate h2{font-size:19px}
  .gate ul{font-size:12px}
  .list li{font-size:12px}
  .page-footer{font-size:10px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}