/* K웹툰 하네스 공용 스타일 — 캐릭터 무대·포즈 애니메이션·월드 노드·말풍선.
   하부 페이지가 각자 새로 그리지 않고 이 클래스들을 그대로 얹어 쓴다.
   색 토큰은 kwebtoon-shell.css(전 하부 페이지 공용)와 값을 맞춰, K웹툰 톤 전체가 같은
   브랜드를 쓴다. 2026-09-07 — "모험의 문" 품질을 v5 프로토타입 수준으로 올리며,
   두꺼운 잉크 테두리 + 하드 오프셋 그림자(코믹 패널 톤)를 도입했다.
   2026-09-07 2차 — 무대가 페이지 중간의 작은 카드였던 게 "캐릭터·글씨가 겹치고 게임처럼
   안 보인다"는 사용자 피드백의 원인이라, 무대 자체를 풀뷰포트 게임 화면(.kw-hero)으로
   바꾸고 헤더/히어로 문구/말풍선/HUD를 전부 그 위의 오버레이 레이어로 분리했다 — 배경은
   화면을 가득 채우고, 글씨는 위/아래 스크림 띠 안에서만, 캐릭터가 서는 가운데 영역은
   비워 둔다(talkingclass 컷신형 대화창의 fixed 배경 + 오버레이 문법을 이 페이지의
   인터랙티브 무대에 맞게 가져왔다). */
:root{
  --kw-ink:#17322f;--kw-green:#285d50;--kw-mint:#d9efe5;--kw-paper:#f7f3e9;
  --kw-gold:#f0c869;--kw-coral:#ec7c68;--kw-sky:#e8f7ff;--kw-muted:#5c7a71;
  --kw-line:3px solid var(--kw-ink);--kw-shadow:6px 6px 0 var(--kw-ink);--kw-shadow-sm:3px 3px 0 var(--kw-ink);
}

/* ── 뷰포트(풀스크린 게임 화면) ── */
.kw-hero{
  position:relative;width:100%;height:100svh;min-height:560px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#cfe8dc,#a9d6e8 58%,#8dbbd6);
  isolation:isolate;touch-action:pan-y;cursor:grab;--px:0px;--py:0px;
}
.kw-hero.dragging{cursor:grabbing}

/* ── 월드(고정 16:9 좌표 레이어) — 배경·길·노드·미나·이펙트가 전부 이 안의 자식이라
   좌표가 화면 비율과 무관하게 배경 이미지 픽셀에 1:1 로 붙는다. 이 레이어 하나만
   카메라 트랜스폼(scale + translate)으로 움직인다(상용 게임 "카메라 리그"). ── */
.kw-map{
  position:absolute;top:0;left:0;width:1600px;height:900px;z-index:1;
  transform-origin:0 0;
  transform:translate(var(--cam-x,0px),var(--cam-y,0px)) scale(var(--cam-s,1));
  will-change:transform;
}
.kw-map__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}
.kw-map__grade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#0c1f1b1f 0%,#0c1f1b00 20%,#0c1f1b00 72%,#0c1f1b38 100%);
}

/* 화면 상·하 스크림 띠 — 밝은 배경 위에서 히어로 문구·HUD 글씨 대비를 확보한다.
   월드 레이어(z1) 위, HUD(z22+)·히어로 문구(z20) 아래. 리팩터 때 사라진 .kw-hero__shade
   의 역할을 화면 고정 의사요소로 되살린 것 — 가운데(캐릭터가 서는 영역)는 비운다. */
.kw-hero::before{
  content:"";position:absolute;inset:0;z-index:8;pointer-events:none;
  background:linear-gradient(180deg,#0a1a17c4 0%,#0a1a1768 12%,#0a1a1700 30%,#0a1a1700 82%,#0a1a17aa 100%);
}

/* 화면 가장자리 비네트 + (지도 모드) 액자 프레임 — 스케일 밖 화면 공간 */
.kw-hero::after{
  content:"";position:absolute;inset:0;z-index:20;pointer-events:none;
  box-shadow:inset 0 0 min(22vw,260px) min(4vw,64px) #0a181559;
}
.kw-frame{position:absolute;inset:0;z-index:19;pointer-events:none;opacity:0;transition:opacity .45s}
.kw-hero[data-cam="map"] .kw-frame{opacity:1}
.kw-frame::before{
  content:"";position:absolute;inset:12px;border:3px solid #17322f4a;border-radius:20px;
  box-shadow:inset 0 0 0 6px #f7f3e922,inset 0 0 52px #0a181542;
}

.kw-cloud{
  position:absolute;z-index:6;width:300px;height:74px;border-radius:999px;background:#ffffff59;
  filter:blur(6px);left:-32%;animation:kw-cloud 34s linear infinite;
  transform:translate(calc(var(--px) * -1.6),calc(var(--py) * -1));
}
.kw-cloud--1{top:9%}
.kw-cloud--2{top:29%;animation-duration:46s;opacity:.62}
@keyframes kw-cloud{to{left:130%}}
.kw-spark{
  position:absolute;z-index:7;width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px 3px #ffffffcc;animation:kw-twinkle 2.6s ease-in-out infinite;
  transform:translate(calc(var(--px) * -3),calc(var(--py) * -2));
}
@keyframes kw-twinkle{50%{opacity:.15}}
html.motion-off .kw-cloud,html.motion-off .kw-spark{animation:none}
@media(prefers-reduced-motion:reduce){.kw-cloud,.kw-spark{animation:none!important}}

/* ── HUD 상단 바(브랜드·내비·아이콘) — 예전 <header> 를 무대 위 글래스 오버레이로 ── */
.kw-hud-top{
  position:absolute;left:0;right:0;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:max(14px,env(safe-area-inset-top)) 18px 10px;
}
.kw-brand{display:inline-flex;align-items:center;gap:9px;font-weight:900;color:#fff;text-shadow:0 2px 10px #00000055}
.kw-brand__icon{display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--kw-ink);border-radius:10px;background:var(--kw-gold);box-shadow:var(--kw-shadow-sm);font-size:15px}
.kw-brand small{display:block;font-weight:800;font-size:9.5px;color:#e8f7ffb3;letter-spacing:.08em}
.kw-nav{display:flex;gap:6px;flex-wrap:wrap}
.kw-nav a{font-size:11.5px;font-weight:800;color:#fff;padding:7px 11px;border-radius:999px;background:#0c1f1b59;border:1.5px solid #ffffff40;backdrop-filter:blur(6px)}
.kw-nav a:hover{background:#0c1f1b8c}
.kw-icon-actions{display:flex;gap:8px;align-items:center}
.kw-icon-btn{width:36px;height:36px;flex:none;display:grid;place-items:center;border:1.5px solid #ffffff40;border-radius:11px;background:#0c1f1b59;backdrop-filter:blur(6px);color:#fff;font-size:15px}
.kw-back{font-size:12px;font-weight:800;color:#fff;white-space:nowrap;border:1.5px solid #ffffff40;padding:7px 12px;border-radius:999px;background:#0c1f1b59;backdrop-filter:blur(6px)}
.kw-back:hover{background:#0c1f1b8c}

/* ── HUD 상단 좌측: 히어로 문구(오늘의 미션 안내) — 캐릭터가 서는 무대 가운데는 비운다 ── */
.kw-hero__copy{
  position:absolute;left:clamp(16px,3vw,32px);top:clamp(74px,12vh,104px);z-index:20;
  width:min(320px,44%);color:#fff;text-shadow:0 3px 14px #00000055;
}
.kw-eyebrow{display:inline-flex;padding:6px 12px;border:2px solid #fff;border-radius:999px;background:#17322f66;backdrop-filter:blur(6px);font-size:10.5px;font-weight:900;letter-spacing:.14em}
.kw-hero__copy h1{margin:12px 0 6px;font-size:clamp(20px,3vw,32px);line-height:1.14;letter-spacing:-.02em}
.kw-hero__copy p{margin:0;font-size:12.5px;font-weight:700;line-height:1.55;max-width:270px}
.kw-hero__cta{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.kw-hero__cta button{border:1.5px solid #ffffff55;border-radius:13px;padding:9px 12px;font-size:11px;font-weight:900;background:#0c1f1b73;backdrop-filter:blur(6px);box-shadow:var(--kw-shadow-sm);color:#fff}
.kw-hero__cta button.kw-primary{background:var(--kw-gold);color:var(--kw-ink);border-color:var(--kw-ink)}

/* ── 미나·친구들 — 월드 레이어 자식. 크기는 월드 높이의 % 라 화면 비율과 무관하고,
   카메라가 항상 미나를 화면 안(추적) 또는 지도 전체(지도 모드)에 두므로 잘릴 자리가 없다.
   translate(-50%,-100%) 로 (left,top) = 발끝. --kw-persp 는 세로 위치에 따른 원근 축소. ── */
.kw-actor{
  position:absolute;height:17%;width:auto;max-width:none;z-index:14;
  transform:translate(-50%,-100%) scaleX(var(--kw-dir,1)) scale(var(--kw-persp,1));
  transform-origin:50% 100%;
  filter:drop-shadow(0 5px 6px #17322f3d);
  transition:left .8s cubic-bezier(.37,.01,.4,1),top .8s cubic-bezier(.37,.01,.4,1);
}
.kw-actor--lead{z-index:16;height:18.5%}
.kw-actor-sh{
  position:absolute;z-index:13;width:7%;height:2.1%;border-radius:50%;
  background:radial-gradient(closest-side,#0d211c5c,#0d211c00);
  transform:translate(-50%,-50%) scale(var(--kw-persp,1));pointer-events:none;transition:opacity .3s;
}
.kw-actor--idle{animation:kw-bob 2.8s ease-in-out infinite}
.kw-actor--float{animation:kw-float 3.4s ease-in-out infinite}
.kw-actor--hop{animation:kw-hop 2.4s ease-in-out infinite}
.kw-actor--pulse{animation:kw-pulse .7s ease-in-out 2!important}
.kw-actor--walking{animation:kw-walk .4s ease-in-out infinite!important}
@keyframes kw-bob{50%{transform:translate(-50%,-100%) scaleX(var(--kw-dir,1)) scale(var(--kw-persp,1)) translateY(-2.4%)}}
@keyframes kw-float{50%{transform:translate(-50%,-100%) scaleX(var(--kw-dir,1)) scale(var(--kw-persp,1)) translateY(-9%) rotate(calc(3deg*var(--kw-dir,1)))}}
@keyframes kw-hop{45%{transform:translate(-50%,-100%) scaleX(var(--kw-dir,1)) scale(var(--kw-persp,1)) translateY(-15%)}70%{transform:translate(-50%,-100%) scaleX(var(--kw-dir,1)) scale(var(--kw-persp,1)) translateY(-4%)}}
@keyframes kw-pulse{50%{transform:translate(-50%,-100%) scaleX(var(--kw-dir,1)) scale(calc(var(--kw-persp,1)*1.09)) translateY(-5%)}}
@keyframes kw-walk{
  0%,100%{transform:translate(-50%,-100%) scaleX(var(--kw-dir,1)) scale(var(--kw-persp,1)) translateY(0)}
  25%{transform:translate(-50%,-100%) scaleX(var(--kw-dir,1)) scale(var(--kw-persp,1)) translateY(-5%) rotate(calc(2deg*var(--kw-dir,1)))}
  75%{transform:translate(-50%,-100%) scaleX(var(--kw-dir,1)) scale(var(--kw-persp,1)) translateY(-5%) rotate(calc(-2deg*var(--kw-dir,1)))}
}
html.motion-off .kw-actor,html.motion-off .kw-actor--idle,html.motion-off .kw-actor--float,html.motion-off .kw-actor--hop,html.motion-off .kw-actor--walking{animation:none;transition:none}
@media(prefers-reduced-motion:reduce){.kw-actor,.kw-actor-sh{animation:none!important;transition:none!important}}

/* ── 하단 도크(말풍선 + HUD) — 대사 길이·HUD 줄바꿈에 따라 높이가 바뀌어도 겹치지 않도록
   bottom px 매직넘버로 서로 자리를 나누지 않고, 세로 flex 한 덩어리로 쌓는다. */
.kw-hud-dock{
  position:absolute;left:0;right:0;bottom:0;z-index:22;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:0 18px max(14px,env(safe-area-inset-bottom));
}

/* ── 말풍선(대사 독) ── */
.kw-dialogue{
  width:min(480px,100%);
  padding:11px 16px;border-radius:18px;background:#0b1a17d9;backdrop-filter:blur(10px);
  border:1.5px solid #ffffff40;box-shadow:var(--kw-shadow-sm);font-weight:800;line-height:1.4;
}
.kw-dialogue b{display:block;color:var(--kw-gold);font-size:11.5px;margin-bottom:3px}
.kw-dialogue div{font-size:13px;color:#f5f7ff}

/* ── 월드 노드(맵 포탈) — translate(-50%,-100%) 로 아래 꼭짓점이 랜드마크에 꽂힌다 ── */
.kw-node{
  position:absolute;transform:translate(-50%,-100%);z-index:12;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  width:132px;padding:10px 12px 12px;border-radius:16px;
  background:#0b1a17cc;backdrop-filter:blur(6px);border:2px solid #ffffff4d;
  box-shadow:0 12px 24px #0a181559,var(--kw-shadow-sm);text-align:center;color:#fff;
  font-family:inherit;transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s,box-shadow .18s;
}
.kw-node::after{
  content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;
  transform:translateX(-50%) rotate(45deg);background:inherit;
  border-right:2px solid #ffffff4d;border-bottom:2px solid #ffffff4d;
}
.kw-node:hover,.kw-node:focus-visible{transform:translate(-50%,-100%) translateY(-6px) scale(1.03);background:#0b1a17e8}
.kw-node .kw-node__ico{font-size:22px;line-height:1;filter:drop-shadow(0 2px 4px #0009)}
.kw-node b{font-size:12px;font-weight:900}
.kw-node small{font-size:9.5px;font-weight:700;color:#e8f7ffc2}
.kw-node[data-state="current"]{background:var(--kw-gold);border-color:var(--kw-ink);color:var(--kw-ink);animation:kw-node-ring 1.9s ease-in-out infinite}
.kw-node[data-state="current"] small{color:#3d3220}
.kw-node[data-state="visited"]{opacity:.92}
@keyframes kw-node-ring{
  0%,100%{box-shadow:0 12px 24px #0a181559,0 0 0 0 #f0c8699e}
  55%{box-shadow:0 12px 24px #0a181559,0 0 0 13px #f0c86900}
}
.kw-node__marker{
  position:absolute;left:50%;top:-32px;transform:translateX(-50%);font-size:22px;opacity:0;
  filter:drop-shadow(0 3px 4px #0008);animation:kw-marker 1.1s ease-in-out infinite;pointer-events:none;
}
.kw-node[data-state="current"] .kw-node__marker{opacity:1}
@keyframes kw-marker{50%{transform:translateX(-50%) translateY(-7px)}}
.kw-node__check{
  position:absolute;right:-8px;top:-8px;width:22px;height:22px;display:none;place-items:center;
  border:2px solid var(--kw-ink);border-radius:50%;background:var(--kw-mint);
  font-size:12px;font-weight:900;color:var(--kw-ink);
}
.kw-node[data-state="visited"] .kw-node__check{display:grid}
html.motion-off .kw-node,html.motion-off .kw-node__marker{animation:none}
@media(prefers-reduced-motion:reduce){.kw-node,.kw-node__marker{animation:none!important}}

/* ── 경로 트레일(목표까지 점선) · 도착 이펙트 ── */
.kw-path{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none;overflow:visible}
.kw-path polyline{
  fill:none;stroke:#ffffffd9;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:2 24;filter:drop-shadow(0 2px 3px #0a181566);animation:kw-path-move 1s linear infinite;
}
@keyframes kw-path-move{to{stroke-dashoffset:-26}}
html.motion-off .kw-path polyline{animation:none}
.kw-fx-ring{
  position:absolute;z-index:13;width:24px;height:24px;border-radius:50%;border:3px solid #fff;
  transform:translate(-50%,-50%);pointer-events:none;animation:kw-fx-ring .72s ease-out forwards;
}
@keyframes kw-fx-ring{to{width:190px;height:190px;opacity:0;border-width:1px}}
.kw-fx-dust{
  position:absolute;z-index:13;width:10px;height:10px;border-radius:50%;background:#ffffffcc;
  transform:translate(-50%,-50%);pointer-events:none;animation:kw-fx-dust .6s ease-out forwards;
}
@keyframes kw-fx-dust{to{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,-24px))) scale(.3)}}

/* ── 맵 조작 버튼(화면 오버레이) ── */
.kw-map-ctl{
  position:absolute;right:14px;bottom:calc(env(safe-area-inset-bottom) + 132px);z-index:26;
  display:flex;flex-direction:column;gap:7px;
}
.kw-map-ctl button{
  width:40px;height:40px;display:grid;place-items:center;border:1.5px solid #ffffff40;
  border-radius:12px;background:#0c1f1b73;backdrop-filter:blur(6px);color:#fff;font-size:17px;font-weight:900;
}
.kw-map-ctl button:hover{background:#0c1f1bab}

/* ── HUD 하단 바(진행도 + CTA) ── */
.kw-hud-bottom{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
}
.kw-hud{
  width:min(360px,100%);display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:9px 13px;border-radius:18px;background:#0b1a17d9;backdrop-filter:blur(10px);
  border:1.5px solid #ffffff40;box-shadow:var(--kw-shadow-sm);
}
.kw-hud b{font-size:11px;white-space:nowrap;color:#fff}
.kw-hud__progress{height:11px;border:2px solid #ffffff55;border-radius:999px;background:#0b1a17;overflow:hidden}
.kw-hud__progress i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--kw-green),var(--kw-gold));transition:.4s width}
.kw-hud span{font-size:11px;font-weight:800;white-space:nowrap;color:#e8f7ffb3}

/* ── CTA ── */
.kw-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  border:var(--kw-line);border-radius:24px;padding:12px 22px;font-weight:900;font-size:13.5px;
  background:var(--kw-gold);color:var(--kw-ink);box-shadow:var(--kw-shadow-sm);
  transition:transform .15s,box-shadow .15s;
}
.kw-cta:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--kw-ink)}
.kw-cta[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ── 스크롤 유도(무대 아래 더 있음을 알림) ── */
.kw-scroll-cue{
  position:absolute;right:16px;bottom:16px;z-index:24;
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:#0b1a17bf;backdrop-filter:blur(6px);border:1.5px solid #ffffff40;color:#fff;
  font-size:16px;animation:kw-scroll-cue 1.8s ease-in-out infinite;
}
@keyframes kw-scroll-cue{50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.kw-scroll-cue{animation:none}}

/* ── 캐릭터 소개(파티) ── */
.kw-party{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.kw-party article{
  position:relative;height:168px;overflow:hidden;border:var(--kw-line);border-radius:20px;
  background:linear-gradient(150deg,var(--kw-sky),var(--kw-mint));box-shadow:var(--kw-shadow-sm);
}
.kw-party img{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);max-width:78%;max-height:78%;object-fit:contain;filter:drop-shadow(0 8px 8px #17322f30)}
.kw-party b,.kw-party small{position:absolute;left:10px;right:10px}
.kw-party b{top:9px;font-size:12px;color:var(--kw-ink)}
.kw-party small{top:26px;font-size:10px;font-weight:700;color:var(--kw-muted)}

/* ── 섹션 헤더 ── */
.kw-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:46px 2px 14px}
.kw-section-head h2{margin:6px 0 0;font-size:clamp(20px,2.6vw,26px);letter-spacing:-.02em}
.kw-section-head p{margin:4px 0 0;color:var(--kw-muted);font-size:12.5px;font-weight:700;line-height:1.5}
.kw-section-label{border:2px solid var(--kw-ink);border-radius:999px;background:#fff;padding:5px 10px;font-size:10px;font-weight:900;white-space:nowrap}

/* ── 패널(카드 컨테이너) ── */
.kw-panel{border:var(--kw-line);border-radius:22px;background:#fff;box-shadow:var(--kw-shadow);overflow:hidden}

/* ── 포즈 컨트롤러 랩 ── */
.kw-pose-layout{display:grid;grid-template-columns:280px 1fr;gap:16px}
.kw-pose-controls{padding:18px}
.kw-pose-controls h3{margin:0 0 8px;font-size:18px}
.kw-pose-controls p{margin:0 0 12px;color:var(--kw-muted);font-size:12px;font-weight:700;line-height:1.55}
.kw-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.kw-tab{border:2px solid var(--kw-ink);border-radius:999px;background:#fff;padding:6px 10px;font-size:11px;font-weight:900}
.kw-tab[aria-pressed="true"]{background:var(--kw-gold)}
.kw-pose-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kw-pose-buttons button{border:2px solid var(--kw-ink);border-radius:12px;background:#fff;padding:8px 4px;font-size:11px;font-weight:800}
.kw-pose-buttons button[aria-pressed="true"]{background:var(--kw-mint)}
.kw-demo-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.kw-demo-actions button{border:2px solid var(--kw-ink);border-radius:12px;background:#fff;padding:10px 6px;font-size:11px;font-weight:900}
.kw-preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px;background:linear-gradient(180deg,var(--kw-sky),#fff)}
.kw-preview-card{position:relative;height:190px;border:2px solid var(--kw-ink);border-radius:16px;background:#fff;box-shadow:var(--kw-shadow-sm);overflow:hidden}
.kw-preview-card img{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);max-width:80%;max-height:80%;object-fit:contain}
.kw-preview-card__cap{position:absolute;left:6px;right:6px;bottom:6px;padding:5px 7px;border:2px solid var(--kw-ink);border-radius:10px;background:#fffffff2;font-size:9.5px;font-weight:800}
.kw-preview-card__cap b{display:block;font-size:11px}

/* ── 미션 미리 체험 ── */
.kw-mission-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
.kw-mission-scene{position:relative;min-height:280px;overflow:hidden;background:linear-gradient(160deg,var(--kw-sky-1,var(--kw-sky)),var(--kw-mint))}
.kw-mission-scene img{position:absolute;bottom:0;object-fit:contain;filter:drop-shadow(0 10px 10px #17322f30)}
.kw-mission-scene__mina{left:2%;height:92%}
.kw-mission-scene__navi{right:6%;top:8%;height:46%;bottom:auto}
.kw-mission-scene__tori{right:1%;height:58%}
.kw-mission-bubble{position:absolute;right:5%;top:6%;width:min(200px,44%);padding:10px 12px;border:var(--kw-line);border-radius:16px;background:#fff;box-shadow:var(--kw-shadow-sm);font-size:12px;font-weight:800}
.kw-mission-copy{padding:20px}
.kw-mission-copy h3{margin:0 0 8px;font-size:20px}
.kw-mission-copy p{margin:0 0 16px;color:var(--kw-muted);font-size:12.5px;font-weight:700;line-height:1.6}
.kw-quest-list{padding:18px}
.kw-quest-list h3{margin:0 0 10px;font-size:16px}
.kw-quest{display:flex;gap:9px;padding:10px 0;border-bottom:2px dashed #dde1d9}
.kw-quest:last-child{border-bottom:0}
.kw-qnum{width:30px;height:30px;flex:none;display:grid;place-items:center;border:2px solid var(--kw-ink);border-radius:10px;font-weight:900;font-size:12px;background:#fff}
.kw-qnum.done{background:var(--kw-mint)}
.kw-quest b{display:block;font-size:12.5px}
.kw-quest small{display:block;margin-top:2px;color:var(--kw-muted);font-size:10.5px;font-weight:700}

/* ── 모달(미리 체험) ── */
.kw-modal{position:fixed;inset:0;z-index:230;display:none;align-items:center;justify-content:center;padding:16px;background:#0d1f1cb8;backdrop-filter:blur(6px)}
.kw-modal.open{display:flex}
.kw-lesson{width:min(560px,100%);border:var(--kw-line);border-radius:26px;background:var(--kw-paper);box-shadow:8px 8px 0 var(--kw-ink);overflow:hidden}
.kw-lesson__head{display:flex;justify-content:space-between;align-items:center;padding:14px 17px;background:var(--kw-gold);border-bottom:3px solid var(--kw-ink)}
.kw-lesson__head small{display:block;margin-top:2px;color:#3d3220;font-weight:700}
.kw-close-btn{width:34px;height:34px;border:2px solid var(--kw-ink);border-radius:10px;background:#fff;font-weight:900}
.kw-lesson__body{padding:20px}
.kw-lesson-coach{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:center;padding:10px;border:2px solid var(--kw-ink);border-radius:16px;background:#fff}
.kw-lesson-coach img{width:74px;height:74px;object-fit:contain}
.kw-lesson-coach b{font-size:13px}
.kw-lesson-coach p{margin:4px 0 0;color:var(--kw-muted);font-size:11.5px;font-weight:700;line-height:1.5}
.kw-sentence{text-align:center;font-size:clamp(20px,4vw,28px);font-weight:900;padding:18px 6px 6px}
.kw-meaning{text-align:center;color:var(--kw-muted);font-size:12.5px;font-weight:800}
.kw-lesson-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.kw-lesson-actions button{border:2px solid var(--kw-ink);border-radius:14px;background:#fff;padding:11px 14px;font-size:12.5px;font-weight:900}
.kw-lesson-actions button.kw-primary{background:var(--kw-gold)}
.kw-result{min-height:52px;padding:12px;text-align:center;border:2px solid var(--kw-ink);border-radius:14px;background:#fff;font-size:12.5px;font-weight:800}
.kw-reward{display:none;align-items:center;gap:10px;justify-content:center;margin-top:12px;padding:12px;border:2px solid var(--kw-ink);border-radius:14px;background:var(--kw-mint)}
.kw-reward.show{display:flex;animation:kw-reward .5s cubic-bezier(.2,.85,.25,1)}
.kw-reward .kw-star{font-size:30px}
.kw-reward small{color:var(--kw-muted);font-weight:700}
@keyframes kw-reward{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.kw-toast{position:fixed;right:16px;bottom:16px;z-index:250;max-width:280px;padding:11px 14px;border:var(--kw-line);border-radius:16px;background:#fff;box-shadow:var(--kw-shadow-sm);font-size:12.5px;font-weight:800;transform:translateY(150%);transition:.28s transform}
.kw-toast.show{transform:none}

/* ── 함께하는 성장 ── */
.kw-growth{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kw-growth-card{padding:22px;border:var(--kw-line);border-radius:22px;background:linear-gradient(150deg,var(--kw-gold),var(--kw-mint));box-shadow:var(--kw-shadow)}
.kw-growth-card h3{margin:0 0 8px;font-size:19px}
.kw-growth-card p{margin:0;color:#3d3220;font-size:12.5px;font-weight:700;line-height:1.65}
.kw-growth-list{padding:18px 20px;border:var(--kw-line);border-radius:22px;background:#fff;box-shadow:var(--kw-shadow)}
.kw-growth-item{padding:11px 0;border-bottom:2px dashed #dde1d9}
.kw-growth-item:last-child{border-bottom:0}
.kw-growth-item b{display:block;font-size:12.5px}
.kw-growth-item small{display:block;margin-top:3px;color:var(--kw-muted);font-size:11px;font-weight:700;line-height:1.5}

@media(max-width:720px){
  .kw-hero{min-height:560px}
  .kw-hero__copy{width:auto;right:16px;top:66px}
  .kw-hero__copy p{display:none}
  .kw-node{width:116px}
  .kw-node small{display:none}
  .kw-map-ctl{bottom:calc(env(safe-area-inset-bottom) + 150px)}
  .kw-hud{width:100%}
  .kw-party{grid-template-columns:repeat(2,1fr)}
  .kw-pose-layout,.kw-mission-layout,.kw-growth{grid-template-columns:1fr}
  .kw-preview-grid{grid-template-columns:repeat(2,1fr)}
  .kw-mission-scene{min-height:220px}
  .kw-lesson-coach{grid-template-columns:60px 1fr}
  .kw-lesson-coach img{width:56px;height:56px}
  .kw-nav{display:none}
}
@media(max-height:540px){
  .kw-hero__copy h1{font-size:18px}
  .kw-hero__copy p{display:none}
  .kw-map-ctl{bottom:calc(env(safe-area-inset-bottom) + 96px)}
}