/* 톡킹클래스 — K웹툰 캐스팅(Mina/Navi/Tori/Rabi) 컷신형 대화 게임 UI. kwebtoon.css 토큰
   (--kw-ink 등)을 그대로 쓴다 — 이 파일 앞에 assets/kwebtoon.css 가 먼저 로드돼 있어야 한다.
   2026-09-11, 실사형 6인 인라인 스타일을 대체 — 대화 루프(session/turn/end API, 마이크 동의,
   scoreFluency 별점, XP 연동)는 안 건드리고 시각 레이어만 이 파일로 새로 짰다. 셀렉터는 옛
   인라인 스타일과 1:1 대응(구조 그대로, 외형만 K웹툰 코믹 패널 톤 — 두꺼운 잉크 테두리 +
   하드 오프셋 그림자). 난독증 배려로 대사 글자 크기·줄 간격은 옛 값을 유지한다. */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  color:var(--kw-ink);background:var(--kw-paper);word-break:keep-all;-webkit-font-smoothing:antialiased;
  min-height:100svh;padding:20px 16px 40px;
}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation;font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--kw-gold);outline-offset:3px}
img{display:block;max-width:100%}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

main{width:min(560px,100%);margin:0 auto;position:relative;z-index:1}

/* ── K웹툰 세계 배경(고정) — 밝은 종이 위에 옅게 깔고, 대화 시작 시 그 캐릭터가 오른쪽에
   선다(setScene). 이미지는 assets/kwebtoon(사이트 공용 무대 자산). ── */
#sceneBg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--kw-paper)}
#sceneBg #sceneWorld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;opacity:.22}
#sceneBg #sceneActor{position:absolute;right:max(2vw,calc(50% - 280px));bottom:0;height:min(62vh,540px);width:auto;max-width:46vw;
  object-fit:contain;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease;
  filter:drop-shadow(0 12px 18px #17322f33)}
#sceneBg #sceneActor.active{opacity:.9;transform:none}
#sceneBg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#f7f3e900 0%,#f7f3e9cc 78%,#f7f3e9 100%)}

/* ── 상단 내비 ── */
.top{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.back{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  border:2px solid var(--kw-ink);border-radius:999px;padding:9px 14px;font-size:.82rem;font-weight:800;
  color:var(--kw-ink);background:#fff;
}
.back:hover{background:var(--kw-mint)}
h1{margin:0;font-size:clamp(19px,4.4vw,24px);font-weight:900;letter-spacing:-.02em}

/* ── 캐릭터 고르기 ── */
.picker{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.char{
  background:#fff;border:var(--kw-line);border-radius:20px;box-shadow:var(--kw-shadow-sm);
  padding:0 0 14px;text-align:center;overflow:hidden;color:var(--kw-ink);
  transition:transform .14s,box-shadow .14s;
}
.char:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--kw-ink)}
.char .portrait{display:block;width:100%;height:150px;object-fit:contain;padding:12px 12px 6px;
  margin-bottom:8px;background:linear-gradient(160deg,var(--kw-sky),var(--kw-mint))}
.char b{display:block;font-size:1.04rem;font-weight:900;margin-bottom:4px}
.char small{color:var(--kw-muted);font-size:.8rem;font-weight:700;padding:0 10px;display:block;line-height:1.6}

/* ── 마이크 동의 게이트 ── */
.gate{
  background:#fff;border:var(--kw-line);border-radius:22px;box-shadow:var(--kw-shadow);
  padding:24px 20px;line-height:1.7;
}
.gate h2{font-size:1.15rem;font-weight:900;letter-spacing:-.02em;line-height:1.5;margin:0 0 12px}
.gate p{color:var(--kw-muted);font-size:.9rem;font-weight:700;line-height:1.85;margin:0 0 12px}
.gate ul{margin:12px 0;padding-left:20px;color:var(--kw-muted);font-size:.86rem;font-weight:700;line-height:1.85}
.gate li{margin-bottom:6px}
.gate b{color:var(--kw-ink)}
.gate .row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.gate button{
  min-height:52px;border-radius:12px;font-size:.96rem;font-weight:900;padding:12px 18px;flex:1 1 140px;
  border:2px solid var(--kw-ink);
}
.gate .primary{background:var(--kw-gold);color:var(--kw-ink)}
.gate .primary:hover{box-shadow:3px 3px 0 var(--kw-ink);transform:translate(-1px,-1px)}
.gate .ghost{background:#fff;color:var(--kw-ink)}
.gate .ghost:hover{background:var(--kw-mint)}

/* ── 게임식 대화 화면(컷신형) ── */
.hud{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.hud .chip{padding:8px 12px;border-radius:12px;background:#fff;border:2px solid var(--kw-ink);
  font-weight:900;font-size:.8rem;white-space:nowrap;box-shadow:var(--kw-shadow-sm)}
.hud .chip strong{color:var(--kw-green)}
.hud .chip.streak strong{color:var(--kw-coral)}
.endBtn{min-height:40px;padding:0 12px;border-radius:999px;border:2px solid var(--kw-ink);
  background:#fff;color:var(--kw-ink);font-size:.78rem;font-weight:800;margin-left:auto}
.endBtn:hover{background:var(--kw-mint)}
.endBtn[disabled]{opacity:.5;cursor:default}

.vnDock{background:#fff;border:var(--kw-line);border-radius:22px;box-shadow:var(--kw-shadow);padding:18px}
.vnLine{display:flex;gap:10px;align-items:flex-start;padding:6px 0;transition:opacity .2s ease}
.vnLine[hidden]{display:none}
/* kwebtoon.css 의 바 셀렉터 .portrait(span 래퍼용)가 이 <img> 에도 닿으므로 display 를 되돌린다 */
.vnLine .portrait{display:block;width:52px;height:52px;border-radius:16px;object-fit:contain;padding:3px;
  background:linear-gradient(160deg,var(--kw-sky),var(--kw-mint));border:2px solid var(--kw-ink);flex-shrink:0}
.vnLine .who{font-size:.76rem;font-weight:900;margin-bottom:3px}
.vnLine.ai .who{color:var(--kw-green)}
.vnLine.me .who{color:var(--kw-coral)}
/* 난독증 아동 배려(2026-09-06 사용자 지시) — 대사 글자를 키우고 줄 간격을 넉넉히 둔다 */
.vnLine .en{font-size:1.15rem;line-height:1.7;letter-spacing:.01em;font-weight:800}
.vnLine .ko{display:block;margin-top:5px;color:var(--kw-muted);font-size:1rem;line-height:1.6;font-weight:700}
.vnLine.pending .en{opacity:.6}
.stars{display:inline-block;margin-top:6px;color:var(--kw-gold);letter-spacing:2px;font-size:1.1rem}
.divider{height:2px;background:repeating-linear-gradient(90deg,#dde1d9 0 8px,transparent 8px 16px);margin:12px 0}

.toast{position:fixed;left:50%;top:14px;transform:translateX(-50%) translateY(-14px);
  opacity:0;pointer-events:none;z-index:9;padding:11px 18px;border-radius:999px;
  background:#fff;border:var(--kw-line);box-shadow:var(--kw-shadow-sm);font-weight:900;transition:.2s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.report{background:#fff;border:var(--kw-line);border-radius:18px;box-shadow:var(--kw-shadow-sm);
  padding:18px;margin-top:14px;text-align:left;line-height:1.7}
.report h3{margin:0 0 8px;font-size:.98rem;font-weight:900;color:var(--kw-green)}
.report p{margin:0;color:var(--kw-ink);font-size:.94rem;font-weight:700;white-space:pre-wrap}

.inputRow{display:flex;gap:8px;margin-top:14px;align-items:center}
.inputRow input{
  flex:1;min-width:0;min-height:50px;padding:0 14px;border-radius:12px;font-family:inherit;font-size:1.1rem;
  border:2px solid var(--kw-ink);background:#fff;color:var(--kw-ink);
}
.mic{
  min-width:54px;min-height:50px;border-radius:12px;font-size:1.15rem;
  border:2px solid var(--kw-ink);background:var(--kw-mint);color:var(--kw-ink);
}
.mic.on{background:var(--kw-gold);animation:tc-breathe 1.4s ease-in-out infinite}
@keyframes tc-breathe{0%,100%{box-shadow:0 0 0 0 #f0c86900}50%{box-shadow:0 0 0 6px #f0c86955}}
.send{
  min-height:50px;padding:0 18px;border-radius:12px;border:2px solid var(--kw-ink);font-weight:900;
  background:var(--kw-gold);color:var(--kw-ink);
}
.send:hover{box-shadow:3px 3px 0 var(--kw-ink);transform:translate(-1px,-1px)}
.hint{color:var(--kw-muted);font-size:.8rem;font-weight:700;text-align:center;margin-top:10px}

.leadPortrait{width:56px;height:56px;border-radius:16px;object-fit:contain;padding:3px;
  background:linear-gradient(160deg,var(--kw-sky),var(--kw-mint));border:2px solid var(--kw-ink);
  vertical-align:middle;margin-right:8px}
.notice{color:var(--kw-muted);text-align:center;line-height:1.85;font-weight:700;padding:34px 0}
.notice a{color:var(--kw-green);font-weight:900;text-decoration:underline;text-underline-offset:3px}

/* 대화 마침 화면 — "오늘 만난 표현" 복습 담기 목록 */
.pickList{display:flex;flex-direction:column;gap:6px}
.pick{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:2px solid var(--kw-ink);
  border-radius:12px;background:var(--kw-sky);cursor:pointer;line-height:1.5}
.pick input{margin-top:3px;width:18px;height:18px;flex-shrink:0;accent-color:var(--kw-green)}
.pick span{font-size:.92rem}
.pick b{font-weight:800}
.pick em{display:block;margin-top:2px;color:var(--kw-muted);font-style:normal;font-size:.84rem;font-weight:700}
.pick em.vocabTag{margin-top:6px;color:var(--kw-green);font-weight:800;font-size:.8rem;
  background:var(--kw-mint);border:2px solid var(--kw-ink);border-radius:8px;padding:3px 7px;display:inline-block}
.pick:has(.vocabTag){border-color:var(--kw-green);background:#eafaf2}
.pick:has(input:not(:checked)){opacity:.5;background:#fff}

html.motion-off *,html.motion-off *:before,html.motion-off *:after{animation:none!important;transition:none!important}

@media (max-width:560px){
  .char .portrait{height:128px}
  .vnLine .en{font-size:1.1rem}
  #sceneBg #sceneActor{max-width:60vw;height:min(48vh,420px);right:0}
}