/* =========================================================
   한국지도 한 바퀴 · 클레이(점토) 디자인
   화면: .app[data-screen="home|play|result"] · 놀이: [data-mode] · 상태: [data-state="ask|ok|shown|snapping"]
   지도 지역 .rg (색: --fill) / .done 맞힌 조각 / .snap 박히는 순간 / .hint 반짝임 / .wrong 오답 / .answer 정답 공개
   ========================================================= */
@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-subset.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --primary:#2563EB; --primary-d:#003EA8; --primary-l:#DBE1FF; --primary-xl:#EEF1FF;
  --ink:#131B2E; --ink2:#434655; --muted:#737686; --line:#E2E7FF;
  --surface:#FAF8FF; --card:#FFFFFF; --soft:#EAEDFF; --soft2:#F2F3FF;
  --teal:#005B7C; --teal-l:#C4E7FF; --amber:#855300; --amber-l:#FFDDB8; --coral:#E5484D; --coral-d:#A8272C;
  --ok:#16A34A; --bad:#E5484D; --sun:#FEA619;
  --clay-shadow:0 6px 16px rgba(0,74,198,.08),0 2px 4px rgba(0,0,0,.04),inset 0 2px 0 rgba(255,255,255,.95);
  --clay-shadow-sm:0 2px 8px rgba(0,0,0,.05),inset 0 2px 0 rgba(255,255,255,.9);
  --font:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#EEF0F8;color:var(--ink);font-family:var(--font);letter-spacing:-.03em;word-break:keep-all;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0;touch-action:manipulation}
svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
svg .fillc{fill:currentColor;stroke:none}
:focus-visible{outline:3px solid #7BA7FF;outline-offset:2px;border-radius:12px}
[hidden]{display:none!important}
.app{position:relative;max-width:440px;min-height:100dvh;margin:0 auto;background:var(--surface);overflow-x:hidden}
@media (min-width:460px){ .app{box-shadow:0 18px 60px rgba(24,52,94,.14)} }
.screen{display:none;padding:0 16px calc(24px + env(safe-area-inset-bottom,0px))}
.app[data-screen="home"] .screen[data-screen="home"],.app[data-screen="play"] .screen[data-screen="play"],.app[data-screen="result"] .screen[data-screen="result"]{display:block}

/* ---------- 공통 클레이 부품 ---------- */
.round-btn{width:44px;height:44px;border-radius:50%;background:var(--card);display:grid;place-items:center;color:var(--ink);box-shadow:0 4px 8px rgba(0,0,0,.05),inset 0 2px 0 rgba(255,255,255,.95);transition:transform .1s}
.round-btn:active{transform:translateY(1px)}
.round-btn svg{width:22px;height:22px}
.round-btn[aria-pressed="true"]{color:var(--primary);background:var(--primary-l)}
#btnSound .ic-off{display:none}#btnSound[aria-pressed="false"]{color:var(--muted)}#btnSound[aria-pressed="false"] .ic-on{display:none}#btnSound[aria-pressed="false"] .ic-off{display:block}
#btnSound[aria-pressed="true"]{color:var(--ink);background:var(--card)}
.btn{width:100%;min-height:54px;border-radius:999px;font-size:17px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;transition:transform .1s,box-shadow .1s}
.btn--blue{background:var(--primary);color:#fff;box-shadow:0 5px 0 var(--primary-d),0 10px 20px rgba(37,99,235,.25),inset 0 2px 0 rgba(255,255,255,.35)}
.btn--blue:active{transform:translateY(3px);box-shadow:0 2px 0 var(--primary-d),0 4px 10px rgba(37,99,235,.2)}
.btn--coral{background:var(--coral);color:#fff;box-shadow:0 5px 0 var(--coral-d),0 10px 20px rgba(229,72,77,.22),inset 0 2px 0 rgba(255,255,255,.35)}
.btn--coral:active{transform:translateY(3px);box-shadow:0 2px 0 var(--coral-d)}
.btn--soft{background:var(--card);color:var(--ink2);box-shadow:0 4px 0 #D8DCEE,0 6px 14px rgba(0,0,0,.05),inset 0 2px 0 rgba(255,255,255,.95)}
.btn--soft:active{transform:translateY(2px);box-shadow:0 2px 0 #D8DCEE}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{background:var(--card);border-radius:28px;box-shadow:var(--clay-shadow)}
.bubble{position:relative;background:var(--card);border-radius:20px;padding:10px 14px;font-size:14.5px;font-weight:750;line-height:1.4;box-shadow:var(--clay-shadow-sm);max-width:250px;color:var(--ink)}
.bubble::after{content:"";position:absolute;left:-6px;bottom:14px;width:13px;height:13px;background:var(--card);transform:rotate(45deg);border-radius:2px}
.bubble b{color:var(--primary)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);background:var(--ink);color:#fff;font-size:14px;font-weight:750;padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.18s;z-index:60;max-width:90vw;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.mascot img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.mascot.is-hop{animation:hop .8s ease-in-out 2}.mascot.is-tilt{animation:tilt 1s ease-in-out 1;transform-origin:50% 85%}
@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-10px) rotate(-3deg)}}
@keyframes tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}70%{transform:rotate(6deg)}}

/* ---------- 1. 홈 ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top,0px)) 0 4px}
.brand-pill{padding:5px 14px;border-radius:999px;background:var(--primary-l);color:var(--primary);font-size:13px;font-weight:850;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.page-h1{margin:6px 0 2px;text-align:center;font-size:28px;font-weight:900;letter-spacing:-.05em;color:var(--ink)}
.page-sub{margin:0 0 12px;text-align:center;font-size:13.5px;font-weight:650;color:var(--ink2)}
.hero-card{padding:8px;border-radius:30px;background:linear-gradient(180deg,#fff,var(--soft2));box-shadow:0 8px 24px rgba(0,74,198,.10),0 2px 6px rgba(0,0,0,.04),inset 0 2px 0 #fff;border:1px solid rgba(226,231,255,.6)}
.hero-board{position:relative;aspect-ratio:4/3;border-radius:24px;background:radial-gradient(circle at 30% 20%,#FFFFFF 0%,#F4F6FF 60%,#E9EDFB 100%);box-shadow:inset 0 2px 6px rgba(70,89,122,.12);overflow:hidden}
.hero-map{position:absolute;left:4%;top:4%;width:60%;height:92%}
.hero-board .mascot--hero{position:absolute;right:3%;bottom:2%;width:42%;height:66%}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:20px 4px 10px}
.sec-head h2{margin:0;font-size:18px;font-weight:850}
.sec-head span{font-size:12px;font-weight:800;color:var(--primary)}
.modes{display:grid;gap:10px}
.mode{display:flex;align-items:center;gap:14px;text-align:left;padding:14px;border-radius:30px;background:var(--card);box-shadow:var(--clay-shadow-sm);transition:transform .1s,box-shadow .15s}
.mode:active{transform:translateY(2px)}
.mode[aria-pressed="true"]{box-shadow:0 4px 16px rgba(0,74,198,.10),inset 0 2px 0 rgba(255,255,255,.95),0 0 0 2px var(--primary-l)}
.mode-ic{width:50px;height:50px;border-radius:18px;display:grid;place-items:center;flex:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.8)}
.mode-ic svg{width:27px;height:27px}
.mode-ic--blue{background:var(--primary-l);color:var(--primary)}.mode-ic--teal{background:var(--soft);color:var(--teal)}.mode-ic--amber{background:rgba(255,221,184,.6);color:var(--amber)}
.mode-txt{flex:1}.mode-txt b{display:block;font-size:16px;font-weight:850}.mode-txt small{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-top:1px}
.mode[aria-pressed="true"] .mode-txt b{color:var(--primary)}
.mode-mark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:transparent;flex:none}
.mode-mark svg{width:17px;height:17px;stroke-width:3}
.mode[aria-pressed="true"] .mode-mark{background:var(--primary);color:#fff;box-shadow:0 2px 4px rgba(37,99,235,.3)}
.scopes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.scope{min-height:46px;padding:8px 10px;border-radius:999px;background:var(--soft);color:var(--ink2);font-size:14px;font-weight:800;box-shadow:0 2px 0 rgba(0,0,0,.06),inset 0 2px 0 rgba(255,255,255,.8);transition:transform .1s}
.scope small{font-size:11.5px;font-weight:700;opacity:.85;margin-left:2px}
.scope[aria-pressed="true"]{background:var(--primary);color:#fff;box-shadow:0 3px 0 var(--primary-d),inset 0 2px 0 rgba(255,255,255,.3)}
.scope[aria-pressed="true"] small{color:var(--primary-l)}
.scope:active{transform:translateY(2px)}
.sidos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.sido{height:42px;border-radius:16px;background:var(--card);font-size:13.5px;font-weight:800;color:var(--ink);box-shadow:0 2px 4px rgba(0,0,0,.05),inset 0 1px 0 #fff;transition:transform .1s}
.sido:active{transform:scale(.95)}
.sido[aria-pressed="true"]{background:var(--primary);color:#fff;box-shadow:0 3px 0 var(--primary-d),0 4px 8px rgba(0,74,198,.2)}
.cta{width:100%;min-height:60px;margin-top:18px;border-radius:999px;background:var(--primary);color:#fff;font-size:18px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 5px 0 var(--primary-d),0 12px 24px rgba(37,99,235,.28),inset 0 2px 0 rgba(255,255,255,.4);transition:transform .1s,box-shadow .1s}
.cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--primary-d),0 4px 12px rgba(37,99,235,.2)}
.cta svg{width:22px;height:22px;stroke-width:2.6}
.today{margin:14px 0 0;text-align:center;font-size:13px;font-weight:650;color:var(--ink2)}
.today b{color:var(--ink);font-weight:850}
.today::before{content:"";display:inline-block;width:16px;height:16px;margin-right:5px;vertical-align:-3px;background:var(--sun);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.3l-5.8 3 1.1-6.5L2.6 9.2l6.5-.9z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.3l-5.8 3 1.1-6.5L2.6 9.2l6.5-.9z'/%3E%3C/svg%3E") center/contain no-repeat}
.basis{margin:8px 0 0;text-align:center;font-size:11.5px;font-weight:600;color:#9A9DAE}

/* 홈의 작은 지도: 점토 조각 */
.hero-map .rg{fill:var(--fill);stroke:none}
.hero-map .ctx,.hero-map .labels{display:none}
.hero-map .inset-frame rect{fill:rgba(255,255,255,.7);stroke:#C3C6D7;stroke-dasharray:3 3}
.hero-map .inset-frame text{font-size:8px;font-weight:800;fill:#737686;font-family:var(--font)}
.hero-map .dokdo{font-size:8px}

/* ---------- 2. 놀이 ---------- */
.q-head{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 0 0}
.q-title{flex:1;font-size:16px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-count{min-width:54px;height:32px;padding:0 10px;border-radius:999px;background:var(--primary-l);color:var(--primary);font-size:14px;font-weight:900;display:grid;place-items:center}
.q-bar{height:12px;border-radius:999px;background:var(--soft);margin-top:10px;overflow:hidden;box-shadow:inset 0 2px 3px rgba(70,89,122,.15)}
.q-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(180deg,#5B8CFF,var(--primary));box-shadow:inset 0 2px 0 rgba(255,255,255,.35);transition:width .3s}
.coach{display:flex;align-items:flex-end;gap:6px;padding:6px 0 2px}
.mascot--coach{width:60px;height:60px;flex:none}
.coach .bubble{margin-bottom:10px}
.target{display:flex;flex-direction:column;align-items:center;gap:0;margin:2px auto 10px;padding:8px 22px;border-radius:24px;background:var(--card);box-shadow:var(--clay-shadow-sm);width:fit-content;max-width:100%}
.target small{font-size:12px;font-weight:750;color:var(--muted)}
.target b{font-size:23px;font-weight:900;letter-spacing:-.04em;line-height:1.25}
/* 지도 판: 점토 판 */
.mapbox{position:relative;height:min(58vh,540px);min-height:320px;border-radius:30px;background:radial-gradient(circle at 30% 15%,#FFFFFF 0%,#F5F7FF 55%,#E8ECFA 100%);overflow:hidden;box-shadow:inset 0 3px 10px rgba(70,89,122,.14),inset 0 -2px 0 rgba(255,255,255,.9),0 6px 18px rgba(0,74,198,.07);touch-action:none}
#map{width:100%;height:100%;display:block;stroke:none;fill:none}
#map .ctx path{fill:#E9EDF8;stroke:#FFFFFF;stroke-width:1px}
#map .rg{fill:var(--fill);stroke:none;cursor:pointer}
/* 빈 홈 */
#map.blank .rg{fill:#DCE2F2}
#map.blank .rg.done{fill:var(--fill)}
/* 쏙 박히는 순간 */
#map .rg.snap{transform-box:fill-box;transform-origin:center;animation:snap .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes snap{0%{transform:scale(1.08)}45%{transform:scale(.96)}75%{transform:scale(1.02)}100%{transform:scale(1)}}
#map .rg.wrong{fill:#FF8A8F!important}
#map .rg.answer{fill:#FFD34D!important}
#map .rg.hint{animation:hint 1.1s ease-in-out 3}
@keyframes hint{0%,100%{fill:var(--fill)}50%{fill:#FFD34D}}
#map.blank .rg.hint{animation:hintb 1.1s ease-in-out 3}
@keyframes hintb{0%,100%{fill:#DCE2F2}50%{fill:#FFE38A}}
#map .labels text{font-family:var(--font);font-weight:850;fill:var(--ink);text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:rgba(255,255,255,.95);stroke-width:3.2px;stroke-linejoin:round;pointer-events:none;opacity:0;transition:opacity .2s}
#map .labels text.on{opacity:1}
#map .inset-frame rect{fill:rgba(255,255,255,.85);stroke:#C3C6D7;stroke-width:1.2px;stroke-dasharray:4 3}
#map .inset-frame text{font-size:11px;font-weight:800;fill:var(--muted);font-family:var(--font)}
#map .dokdo{font-family:var(--font);font-size:11.5px;font-weight:900;fill:#0F4FB4;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:3px;pointer-events:none}
#map .dokdo-dot{fill:#0F4FB4;stroke:#fff;stroke-width:1.5px;pointer-events:none}
/* 퍼즐 조각: 그 지역 색의 점토 */
#map .piece{cursor:grab}
#map .piece.dragging{cursor:grabbing}
#map .piece .pc{fill:var(--fill);stroke:none}
#map .piece .grip{fill:transparent;stroke:none}
#map .piece .piece-name{font-family:var(--font);font-size:13px;font-weight:900;fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:3.4px}
.map-tools{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:8px}
.map-tools .round-btn{width:42px;height:42px}
.play-actions{display:flex;gap:10px;margin-top:12px}
.play-actions .btn{margin-top:0}
@media (max-height:740px){ .mapbox{height:50vh;min-height:270px}.mascot--coach{width:46px;height:46px}.target b{font-size:20px}.target{margin-bottom:8px} }

/* 별 터짐 */
.burst{position:fixed;inset:0;pointer-events:none;z-index:50}
.burst i{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;animation:burst 1s cubic-bezier(.15,.8,.3,1) forwards}
.burst i svg{width:100%;height:100%;stroke:#fff;stroke-width:1.4}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.3)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){ .burst{display:none} .mascot.is-hop,.mascot.is-tilt,#map .rg.snap{animation:none} }

/* ---------- 3. 결과 ---------- */
.screen[data-screen="result"]{padding-top:calc(18px + env(safe-area-inset-top,0px))}
.result-top{display:flex;align-items:center;gap:8px;padding:18px}
.result-score{flex:1}.result-score small{font-size:13px;font-weight:750;color:var(--muted)}
.score b{font-size:56px;font-weight:900;line-height:1.05;color:var(--ink)}.score span{font-size:24px;font-weight:850;color:#A3A6B8}
.result-msg{margin:6px 0 0;font-size:14px;font-weight:800;color:var(--ink2)}
.mascot--result{width:116px;height:116px;flex:none}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;padding:4px 0}
.result-stats div{padding:12px 6px;text-align:center}.result-stats div+div{border-left:1px solid var(--line)}
.result-stats b{display:block;font-size:24px;font-weight:900}.result-stats span{font-size:12px;font-weight:700;color:var(--muted)}
.c-ok{color:var(--ok)}.c-bad{color:var(--bad)}
.result-wrong{margin-top:12px;padding:16px 18px}
.result-wrong h3{margin:0 0 10px;font-size:16px;font-weight:850}
.wrong-list{display:flex;flex-wrap:wrap;gap:8px}
.wrong-list span{min-height:34px;padding:6px 14px;border-radius:999px;background:#FFE3E4;color:#B4232A;font-size:14px;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
/* 조각 사이 홈(경계선): 빈 판에서도 조각 자리가 보이게, 맞힌 조각은 서로 떨어진 점토처럼 */
#map .rg{stroke:#F6F8FF;stroke-width:1.3px;stroke-linejoin:round}
#map.blank .rg{stroke:#FFFFFF;stroke-width:1.8px}
#map g.inset .rg{stroke-width:.4px}
.hero-map .rg{stroke:#F6F8FF;stroke-width:.8px}
.hero-map{left:2%;width:70%}
.hero-map .inset-frame text{display:none}
.coach{min-height:74px}
@media (max-height:740px){ .coach{min-height:58px} }