/* examath AFTER — style.css
 * 설계 목업의 디자인 언어를 실제 앱으로. 라이트/다크, 모바일 우선.
 * 색 언어: 파랑=십모형 / 호박=낱개 / 초록=정답 / 분홍=부드러운 교정
 */

:root{
  --paper:#eef2e9; --paper-2:#e4ebdd; --card:#ffffff;
  --ink:#243330; --ink-soft:#5c6b64; --line:#d7e0d0;
  --leaf:#3f9d59; --leaf-deep:#2c7a43; --leaf-bg:#e3f3e7;
  --sky:#5580c9;  --sky-d:#3f63a0; --sky-bg:#e6edf9;
  --amber:#e2963a; --amber-d:#b6741f;
  --rose:#d9748f; --rose-deep:#b8506d; --rose-bg:#fbe6ec;
  --gold:#eeb63f;
  --shadow:0 16px 34px -20px rgba(30,50,40,.45);
  --radius:20px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#111815; --paper-2:#0b110e; --card:#1b2521;
    --ink:#e9efe9; --ink-soft:#9db0a7; --line:#2b3833;
    --leaf:#5cbc74; --leaf-deep:#3f9d59; --leaf-bg:#1d3325;
    --sky:#7099df; --sky-d:#5a80c4; --sky-bg:#1c2942;
    --amber:#e8a752; --amber-d:#c98a34;
    --rose:#e492a7; --rose-deep:#d9748f; --rose-bg:#39222a;
    --gold:#f0c25a;
    --shadow:0 18px 40px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="light"]{
  --paper:#eef2e9; --paper-2:#e4ebdd; --card:#ffffff;
  --ink:#243330; --ink-soft:#5c6b64; --line:#d7e0d0;
  --leaf:#3f9d59; --leaf-deep:#2c7a43; --leaf-bg:#e3f3e7;
  --sky:#5580c9; --sky-d:#3f63a0; --sky-bg:#e6edf9;
  --amber:#e2963a; --amber-d:#b6741f;
  --rose:#d9748f; --rose-deep:#b8506d; --rose-bg:#fbe6ec;
  --gold:#eeb63f; --shadow:0 16px 34px -20px rgba(30,50,40,.45);
}
:root[data-theme="dark"]{
  --paper:#111815; --paper-2:#0b110e; --card:#1b2521;
  --ink:#e9efe9; --ink-soft:#9db0a7; --line:#2b3833;
  --leaf:#5cbc74; --leaf-deep:#3f9d59; --leaf-bg:#1d3325;
  --sky:#7099df; --sky-d:#5a80c4; --sky-bg:#1c2942;
  --amber:#e8a752; --amber-d:#c98a34;
  --rose:#e492a7; --rose-deep:#d9748f; --rose-bg:#39222a;
  --gold:#f0c25a; --shadow:0 18px 40px -20px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(130% 90% at 50% -10%, var(--paper) 0%, var(--paper-2) 75%) fixed;
  color:var(--ink);
  font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
.num{font-variant-numeric:tabular-nums}
button{font-family:inherit}

.app{
  max-width:460px; margin:0 auto; min-height:100dvh;
  position:relative; display:flex; flex-direction:column;
}

/* ---------- screens ---------- */
.screen{
  display:none; flex:1; flex-direction:column;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  min-height:100dvh;
}
.screen.active{display:flex; animation:fade .28s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- shared ---------- */
.cta{
  border:none; border-radius:15px; padding:15px; font-size:1.02rem; font-weight:800;
  color:#fff; background:var(--leaf); box-shadow:0 4px 0 var(--leaf-deep);
  cursor:pointer; letter-spacing:.01em; transition:transform .08s, box-shadow .08s;
}
.cta:active{transform:translateY(3px); box-shadow:0 1px 0 var(--leaf-deep)}
.cta.big{width:100%; padding:16px; font-size:1.06rem}
.stat-pill{
  display:inline-flex; align-items:center; gap:4px; font-size:.82rem; font-weight:800;
  color:var(--ink-soft); background:var(--card); border:1px solid var(--line);
  padding:5px 11px; border-radius:999px;
}
.stat-pill b{color:var(--ink)}
.closebtn{
  align-self:flex-start; border:none; background:transparent; color:var(--ink-soft);
  font-size:1.3rem; cursor:pointer; padding:4px 8px; border-radius:10px; line-height:1;
}
.closebtn.small{font-size:1.05rem; padding:6px}
.linkbtn{
  margin:14px auto 0; border:none; background:transparent; color:var(--ink-soft);
  font-size:.8rem; text-decoration:underline; cursor:pointer;
}

/* ---------- HOME ---------- */
.home-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.brand{font-size:1.5rem; font-weight:900; letter-spacing:-.02em}
.brand span{color:var(--leaf)}
.home-stats{display:flex; gap:8px}
.home-lead{color:var(--ink-soft); font-weight:600; margin:2px 0 18px}
.home-path{display:flex; flex-direction:column; gap:14px}
.node-row{display:flex; align-items:center; gap:14px}
.node{
  width:58px; height:58px; flex:none; border-radius:50%; font-size:24px; font-weight:800;
  display:grid; place-items:center; cursor:pointer;
  background:var(--paper-2); color:var(--ink-soft); border:2px solid var(--line);
  transition:transform .12s;
}
.node:not(:disabled):active{transform:scale(.94)}
.node.done{background:var(--leaf); color:#fff; border-color:var(--leaf-deep)}
.node.now{
  background:var(--gold); color:#5a3d00; border-color:var(--amber);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--gold) 32%, transparent);
  animation:pulse 2s ease-in-out infinite;
}
.node.locked{cursor:not-allowed; opacity:.75}
.node-label{display:flex; flex-direction:column; line-height:1.35}
.node-label b{font-size:.98rem}
.node-label span{font-size:.78rem; color:var(--ink-soft)}
.node-label.hot b{color:var(--leaf-deep)}

/* ---------- START popup ---------- */
#screen-start{justify-content:flex-start}
.pop{
  margin:auto; width:100%; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 22px; text-align:center; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.pop-emoji{font-size:46px}
.pop-world{font-size:.82rem; font-weight:800; letter-spacing:.06em; color:var(--sky)}
.pop h2{margin:0; font-size:1.35rem; font-weight:900}
.pop-meta{margin:0; font-size:.85rem; color:var(--ink-soft); font-weight:600}
.pop .cta{margin-top:8px; width:100%}

/* ---------- PLAY ---------- */
.play-top{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.prog{flex:1; height:11px; border-radius:99px; background:var(--paper-2); overflow:hidden}
.prog > i{display:block; height:100%; width:4%; border-radius:99px; background:var(--leaf);
  transition:width .35s ease}
.qcard{
  flex:1; display:flex; flex-direction:column; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px; box-shadow:var(--shadow); min-height:0;
}
.amigo-row{display:flex; gap:10px; align-items:flex-start}
.amigo{
  width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:22px; background:radial-gradient(circle at 35% 30%, var(--leaf), var(--leaf-deep));
}
.bubble{
  position:relative; background:var(--paper-2); border-radius:14px; padding:10px 13px;
  font-size:.92rem; font-weight:600; min-height:20px;
}
.bubble::after{content:""; position:absolute; left:16px; bottom:-6px; width:13px; height:13px;
  background:var(--paper-2); transform:rotate(45deg)}
.eq{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-variant-numeric:tabular-nums; font-weight:800;
}
.eq .big{font-size:2.5rem; line-height:1}
.eq .op{font-size:1.7rem; color:var(--ink-soft)}
.eq .q{color:var(--ink-soft)}
.eq .num.q{min-width:1.4ch; text-align:center}

/* ----- blocks (heart) ----- */
.blocks{flex:1; display:flex; flex-direction:column; min-height:0}
.bfield{
  flex:1; display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:150px; flex-wrap:wrap;
}
.brods{display:flex; gap:6px; align-items:flex-end}
.rod{
  width:20px; height:118px; border-radius:6px;
  /* 눈금 줄무늬(위 레이어) + 파란 베이스 그라디언트(아래 레이어) */
  background:
    repeating-linear-gradient(to bottom, transparent 0 10.6px, rgba(255,255,255,.4) 10.6px 11.6px),
    linear-gradient(var(--sky), var(--sky-d));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  transition:transform .12s, opacity .2s;
}
.rod.split{opacity:.28; background:var(--paper-2);
  border:2px dashed var(--sky); box-shadow:none}
.rod.removed{position:relative; opacity:.4; filter:grayscale(.7)}
.rod.removed::after{content:"×"; position:absolute; inset:0; display:grid; place-items:center;
  color:var(--rose-deep); font-weight:900; font-size:1.3rem}
.barrow{font-size:1.5rem; color:var(--amber); font-weight:900; opacity:.25; transition:opacity .2s}
.barrow.on{opacity:1; animation:nudge 1.4s ease-in-out infinite}
.bunits{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; max-width:112px}
.u{
  width:22px; height:22px; border-radius:6px;
  background:linear-gradient(var(--amber), var(--amber-d));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
  transition:transform .12s, opacity .18s;
}
.u.fresh{outline:2px dashed var(--amber); outline-offset:1px; animation:pop .3s ease}
.u.removed{background:var(--paper-2); box-shadow:none; position:relative; outline:none}
.u.removed::after{content:"×"; position:absolute; inset:0; display:grid; place-items:center;
  color:var(--rose-deep); font-weight:900; font-size:.85rem}

/* tappable affordance */
.tappable{cursor:pointer; position:relative}
.rod.tappable{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 0 0 3px color-mix(in srgb, var(--sky) 40%, transparent);
  animation:bob 1.3s ease-in-out infinite}
.u.tappable{box-shadow:inset 0 0 0 1px rgba(255,255,255,.32), 0 0 0 3px color-mix(in srgb, var(--amber) 45%, transparent);
  animation:bob 1.3s ease-in-out infinite}
.rod.tappable:active,.u.tappable:active{transform:scale(.9)}

.binstruct{text-align:center; font-size:.92rem; color:var(--ink-soft); font-weight:600; padding:2px 0 2px}
.binstruct b{color:var(--ink)}
.binstruct .cnt{color:var(--leaf-deep); font-weight:800}

/* ----- answer choices ----- */
.answerbar{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px;
  opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s;
  pointer-events:none;
}
.answerbar.show{opacity:1; transform:none; pointer-events:auto}
.choice{
  border:2px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:14px; padding:16px 4px; font-size:1.5rem; font-weight:800; cursor:pointer;
  box-shadow:0 3px 0 var(--line); transition:transform .08s;
}
.choice:active{transform:translateY(2px)}
.choice:disabled{cursor:default}
.choice.ok{border-color:var(--leaf); background:var(--leaf-bg); color:var(--leaf-deep); box-shadow:0 3px 0 var(--leaf)}
.choice.no{border-color:var(--rose); background:var(--rose-bg); color:var(--rose-deep); box-shadow:0 3px 0 var(--rose)}
.choice.reveal{border-color:var(--leaf); color:var(--leaf-deep)}

/* ----- feedback panel ----- */
.feedback{
  margin:14px -20px 0; padding:0 20px; max-height:0; overflow:hidden;
  border-radius:18px 18px 0 0; transition:max-height .3s ease, padding .3s ease;
}
.feedback.show{max-height:240px; padding:16px 20px calc(18px + env(safe-area-inset-bottom))}
.feedback.ok{background:var(--leaf-bg)}
.feedback.no{background:var(--rose-bg)}
.feedback .ttl{font-weight:900; font-size:1.1rem; margin-bottom:5px}
.feedback.ok .ttl{color:var(--leaf-deep)}
.feedback.no .ttl{color:var(--rose-deep)}
.feedback .sub{font-size:.88rem; color:var(--ink-soft); font-weight:600; margin-bottom:12px}
.feedback .cta{width:100%}
.feedback.no .cta{background:var(--rose); box-shadow:0 4px 0 var(--rose-deep)}
.feedback.no .cta:active{box-shadow:0 1px 0 var(--rose-deep)}

/* ---------- DONE ---------- */
#screen-done{justify-content:center; text-align:center; gap:8px}
.done-hero{display:flex; flex-direction:column; align-items:center; gap:6px}
.big-amigo{
  width:84px; height:84px; border-radius:50%; display:grid; place-items:center; font-size:44px;
  background:radial-gradient(circle at 35% 30%, var(--leaf), var(--leaf-deep));
  animation:pop .4s ease;
}
.done-hero h2{margin:8px 0 0; font-size:1.5rem; font-weight:900}
.done-hero p{margin:0; color:var(--ink-soft); font-weight:600}
.done-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:26px 0}
.dstat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 6px; box-shadow:var(--shadow)}
.dstat .v{font-weight:900; font-size:1.5rem; font-variant-numeric:tabular-nums}
.dstat .k{font-size:.72rem; font-weight:700; color:var(--ink-soft); letter-spacing:.03em; margin-top:2px}
.dstat.xp .v{color:var(--gold)}
.dstat.acc .v{color:var(--leaf)}
.dstat.time .v{color:var(--sky)}

/* ---------- keyframes ---------- */
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px color-mix(in srgb, var(--gold) 32%, transparent)}
  50%{box-shadow:0 0 0 11px color-mix(in srgb, var(--gold) 8%, transparent)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes pop{from{transform:scale(.6); opacity:0}to{transform:scale(1); opacity:1}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ============ 관문(gate) pip — 홈 ============ */
.node-row{align-items:flex-start}
.node-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; padding-top:4px}
.gates{display:flex; gap:6px}
.gate{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  border-radius:11px; padding:6px 2px; cursor:pointer; font:inherit;
}
.gate .gi{font-size:15px; line-height:1}
.gate i{font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.02em}
.gate.g-done{background:var(--leaf-bg); border-color:var(--leaf); color:var(--leaf-deep)}
.gate.g-now{border-color:var(--gold); color:var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 26%, transparent)}
.gate.g-open{color:var(--ink)}
.gate.g-lock{opacity:.45; cursor:not-allowed}
.gate:not(:disabled):active{transform:scale(.95)}

/* ============ Pictorial 관문 — 십틀(ten-frame) + 점 ============ */
.bfield.skin-p{gap:14px}
.bfield.skin-p .brods{flex-wrap:wrap; max-width:200px; justify-content:center; align-items:center; gap:5px}
.tenframe{
  display:grid; grid-template-columns:repeat(2,7px); gap:2px; padding:3px;
  border:1.5px solid var(--sky); border-radius:5px; background:var(--sky-bg);
  transition:opacity .2s, box-shadow .12s;
}
.tenframe .pd{width:7px; height:7px; border-radius:50%; background:var(--sky)}
.tenframe.split{opacity:.35; border-style:dashed}
.tenframe.split .pd{opacity:.15}
.tenframe.removed{opacity:.45}
.tenframe.removed .pd{background:var(--rose)}
.tenframe.tappable{cursor:pointer; box-shadow:0 0 0 3px color-mix(in srgb, var(--sky) 40%, transparent);
  animation:bob 1.3s ease-in-out infinite}
.tenframe.tappable:active{transform:scale(.92)}
.loose{
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--amber), var(--amber-d));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); transition:transform .12s, opacity .18s;
}
.loose.fresh{outline:2px dashed var(--amber); outline-offset:1px; animation:pop .3s ease}
.loose.removed{background:var(--paper-2); box-shadow:none; position:relative; outline:none}
.loose.removed::after{content:"×"; position:absolute; inset:0; display:grid; place-items:center;
  color:var(--rose-deep); font-weight:900; font-size:.8rem}
.loose.tappable{cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 3px color-mix(in srgb, var(--amber) 45%, transparent);
  animation:bob 1.3s ease-in-out infinite}
.loose.tappable:active{transform:scale(.9)}

/* ============ Abstract 관문 — 세로셈 ============ */
.vsum{
  display:inline-flex; flex-direction:column; align-items:flex-end; gap:3px;
  margin:22px auto 0; position:relative;
  font-variant-numeric:tabular-nums; font-weight:800; font-size:2.3rem; line-height:1.1;
}
.vrow{display:flex; align-items:center; gap:5px}
.vop{width:20px; text-align:center; color:var(--ink-soft)}
.vd{width:28px; text-align:center}
.vline{width:100%; height:3px; background:var(--ink); border-radius:2px; margin:3px 0}
.vans .vq{color:var(--ink-soft)}
.vans .vd.filled{color:var(--leaf-deep)}
/* 받아내림 힌트: 자리열에 정렬된 별도 행(px 고정폭) */
.vhintrow{font-size:.95rem; font-weight:800; color:var(--rose-deep);
  min-height:1.1em; opacity:0; transition:opacity .2s}
.vsum.show-borrow .vhintrow{opacity:1}
.vsum.show-borrow .vtop .vd:nth-child(2){text-decoration:line-through; opacity:.5}
.ahelp{margin:14px auto 0; text-align:center}
.helpbtn{
  border:1.5px solid var(--sky); color:var(--sky-d); background:var(--sky-bg);
  border-radius:999px; padding:7px 15px; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer;
}
.helpbtn:active{transform:translateY(1px)}
.nohelp{font-size:.8rem; color:var(--ink-soft); font-weight:600}