/* 아그만 체험 앱 — 고급화 디자인 "아그만 자연사관 — 메뉴 = 방" (web/design/premium, 2026-11-09 홈피 시안 → 앱 적용)
   html[data-room] = entrance(로그인·체험) | camp(초등 오늘) | observatory(중고 오늘) | notebook(학습) | gallery(도감)
                     | yard(놀이) | study(부모) | lab(선생님) | paper(인쇄)  — 배경은 assets/js/scenes.js가 .room에 그림
   html[data-band] = e34·e56(초등) | m·h(중고) | adult(부모·선생님)   html[data-time] = dawn|day|dusk|night(캠프 하늘)
   규칙: 버튼·카드·글자는 모든 방에서 같다. 해(sun) 버튼은 화면에 하나, 황동(brass)은 얻은 것(레벨·경험치·통과)에만. */

/* ── 토큰: 초등 기본(숲 잉크와 종이) ── */
:root{
  --bg:#F6F8F4; --paper:#FFFFFF; --ink:#12352E; --ink-2:#4A635C; --ink-3:#5B6F68; --line:#D9E3DC;
  --leaf:#2E6B4E; --leaf-weak:#E1EFE6;
  --sun:#FFC24A; --sun-deep:#E59E1A; --sun-ink:#4A3200; --sun-weak:#FFF4CF;
  --plum:#6447B5; --plum-weak:#EEE9FB;
  --berry:#C8415E; --berry-weak:#FBE7EC;
  --brass:linear-gradient(135deg,#F3DE9C 0%,#D2A443 38%,#9C7322 62%,#E4C36C 100%); --brass-line:#B48A34;
  --walnut:linear-gradient(180deg,#6B4A2E,#3E2A1A);
  --sel:var(--ink); --sel-weak:var(--sun-weak);
  --press-c:var(--ink);
  --stage-bg:transparent;

  --display:"Bagel Fat One","Pretendard","Malgun Gothic",system-ui,sans-serif;
  --label:"Gowun Batang","Pretendard",serif;
  --ui:"Pretendard","Pretendard Variable","Malgun Gothic",system-ui,sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-chip:999px; --r-btn:14px; --r-card:20px; --r-stage:28px;
  --lift:0 1px 0 rgba(18,53,46,.05),0 2px 6px -2px rgba(18,53,46,.10),0 18px 40px -22px rgba(18,53,46,.35);
  --lift-hi:0 1px 0 rgba(18,53,46,.05),0 4px 10px -4px rgba(18,53,46,.14),0 28px 60px -26px rgba(18,53,46,.45);
  --press:none;
  --ease:cubic-bezier(.2,.8,.2,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .2 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  /* 예전 이름(화면 코드·그림 SVG가 쓰는 이름) → 새 토큰 */
  --pencil:var(--ink-2); --pen:var(--plum); --pen-weak:var(--plum-weak);
  --hl:var(--sun); --hl-weak:var(--sun-weak);
  --ok:var(--leaf); --ok-weak:var(--leaf-weak); --no:var(--berry); --no-weak:var(--berry-weak);
  --sleep:var(--plum); --fill:#F4A920; --stroke:var(--ink);
  --r-s:10px; --r-m:var(--r-btn); --r-l:var(--r-card);
  color-scheme:light;
}
/* ── 중고(관측소 톤): 남색 잉크·옥색 ── */
:root[data-band="m"],:root[data-band="h"]{
  --bg:#F4F6FA; --ink:#16213A; --ink-2:#55617A; --ink-3:#5E6981; --line:#DDE2EC;
  --leaf:#1F8A78; --leaf-weak:#DDF1EC;
  --sun:#1F8A78; --sun-deep:#166B5D; --sun-ink:#FFFFFF; --sun-weak:#DDF1EC;
  --plum:#4B5BB0; --plum-weak:#E7EAF8;
  --sel:var(--leaf); --sel-weak:var(--leaf-weak);
  --fill:#E8A84A;
  --display:"Pretendard","Malgun Gothic",system-ui,sans-serif;
  --label:"Hahmlet","Pretendard",serif;
  --r-btn:10px; --r-card:14px; --r-stage:18px;
  --lift:0 1px 0 rgba(22,33,58,.05),0 2px 6px -2px rgba(22,33,58,.10),0 18px 40px -22px rgba(22,33,58,.32);
}
/* ── 어른(부모 서재·선생님 연구실): 숲 잉크, 장식 글꼴 없이 Pretendard 800 ── */
:root[data-band="adult"]{
  --display:"Pretendard","Malgun Gothic",system-ui,sans-serif;
  --sel:var(--leaf); --sel-weak:var(--leaf-weak);
  --r-btn:12px; --r-card:16px; --r-stage:20px;
}
/* ── 어둡게: 설정(data-theme)·시스템 설정, 그리고 원래 어두운 방(진열관·놀이마당·관측소·밤 캠프) ── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F2321; --paper:#17302B; --ink:#E8F1EC; --ink-2:#A9C0B8; --ink-3:#9DB3AB; --line:#2A463F;
    --leaf:#62C996; --leaf-weak:#1C3D31; --sun-weak:#3B3416; --plum:#AA94F2; --plum-weak:#2A2448;
    --berry:#F08AA2; --berry-weak:#45202B; --press-c:#06110F; --fill:#E6A33D;
    --lift:0 1px 0 rgba(0,0,0,.2),0 18px 40px -22px rgba(0,0,0,.7); --lift-hi:0 28px 60px -26px rgba(0,0,0,.8);
    color-scheme:dark;
  }
  :root[data-band="m"]:not([data-theme="light"]),:root[data-band="h"]:not([data-theme="light"]){
    --bg:#0E1526; --paper:#1A2337; --ink:#E6EAF2; --ink-2:#A3AEC4; --ink-3:#97A3BA; --line:#2B3548;
    --leaf:#4CC3AE; --leaf-weak:#173A35; --sun:#4CC3AE; --sun-deep:#2E9A87; --sun-ink:#0D1F1C; --sun-weak:#173A35; --plum:#8E9BEA; --plum-weak:#262C4A;
  }
}
:root:is([data-theme="dark"],[data-room="gallery"],[data-room="yard"],[data-room="observatory"],[data-room="camp"][data-time="night"]){
  --bg:#0F2321; --paper:#17302B; --ink:#E8F1EC; --ink-2:#A9C0B8; --ink-3:#9DB3AB; --line:#2A463F;
  --leaf:#62C996; --leaf-weak:#1C3D31; --sun-weak:#3B3416; --plum:#AA94F2; --plum-weak:#2A2448;
  --berry:#F08AA2; --berry-weak:#45202B; --press-c:#06110F; --fill:#E6A33D;
  --lift:0 1px 0 rgba(0,0,0,.2),0 18px 40px -22px rgba(0,0,0,.7); --lift-hi:0 28px 60px -26px rgba(0,0,0,.8);
  color-scheme:dark;
}
:root[data-room="yard"][data-room]{--bg:#231C47; --paper:#2C2557; --line:#463C78; --ink-2:#C9C3E4; --ink-3:#B7B0D8; --leaf-weak:#1F3B3A}
:root[data-room="gallery"][data-room]{--bg:#0D241F}
:root:is([data-band="m"],[data-band="h"]):is([data-theme="dark"],[data-room="gallery"],[data-room="observatory"]){
  --bg:#0E1526; --paper:#1A2337; --ink:#E6EAF2; --ink-2:#A3AEC4; --ink-3:#97A3BA; --line:#2B3548;
  --leaf:#4CC3AE; --leaf-weak:#173A35; --sun:#4CC3AE; --sun-deep:#2E9A87; --sun-ink:#0D1F1C; --sun-weak:#173A35; --plum:#8E9BEA; --plum-weak:#262C4A;
}
:root[data-room="observatory"][data-room][data-room][data-room]{--bg:#0A1328}

/* ── 기본 ── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.6;
  letter-spacing:-.01em;word-break:keep-all;-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--ink);font-weight:700;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.22;margin:0;letter-spacing:-.005em}
:root:is([data-band="m"],[data-band="h"],[data-band="adult"]) :is(h1,h2,h3){font-weight:800;letter-spacing:-.03em}
h1{font-size:clamp(1.75rem,5vw,2.5rem)} h2{font-size:1.4rem} h3{font-size:1.1rem}
p{margin:0}
.muted{color:var(--ink-3)}
.small{font-size:.875rem}
.num{font-variant-numeric:tabular-nums}
.hl{background:linear-gradient(transparent 55%,var(--sun-weak) 55%);padding:0 .1em;color:inherit;font-weight:700}

/* ── 방 배경 (scenes.js가 body 맨 앞 .room에 SVG를 넣음) ── */
.room{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.room svg.scene{position:absolute;inset:0;width:100%;height:100%}
.room::after{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:multiply;opacity:.9}
:root:is([data-theme="dark"],[data-room="gallery"],[data-room="yard"],[data-room="observatory"]) .room::after{mix-blend-mode:screen;opacity:.35}
.room .layer{transform:translateY(24px);opacity:0;animation:rise .9s var(--ease) forwards}
.room .layer:nth-of-type(2){animation-delay:.08s}.room .layer:nth-of-type(3){animation-delay:.16s}
.room .layer:nth-of-type(4){animation-delay:.24s}.room .layer:nth-of-type(5){animation-delay:.32s}
@keyframes rise{to{transform:none;opacity:1}}
/* 밝은 방(입구·수첩·서재·연구실)을 어둡게 볼 때: 같은 그림을 밤빛으로 */
:root[data-theme="dark"]:is([data-room="entrance"],[data-room="notebook"],[data-room="study"],[data-room="lab"]) .room svg{filter:invert(1) hue-rotate(180deg) brightness(.62) saturate(.7)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):is([data-room="entrance"],[data-room="notebook"],[data-room="study"],[data-room="lab"]) .room svg{filter:invert(1) hue-rotate(180deg) brightness(.62) saturate(.7)}
  :root:not([data-theme="light"]) .room::after{mix-blend-mode:screen;opacity:.35}}

/* ── 틀: 유리 띠 상단 바 + 알약 메뉴(PC) / 떠 있는 하단 탭(폰) ── */
.app{min-height:100vh}
.top{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 16px;position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--paper) 72%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.brand{font-family:var(--display);font-size:1.35rem;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:8px;font-weight:400}
.brand svg{width:34px;height:34px}
:root:is([data-band="m"],[data-band="h"],[data-band="adult"]) .brand{font-family:var(--ui);font-weight:800;letter-spacing:-.03em}
.top .sp{flex:1}
.who{display:flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border-radius:var(--r-chip);background:var(--paper);box-shadow:var(--lift);font-weight:700;font-size:.9rem;white-space:nowrap;min-height:40px}
.who:not(:has(.av)){padding-left:14px}
.who[hidden]{display:none}
.who .av{width:32px;height:32px;border-radius:50%;background:var(--brass);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 3px rgba(80,50,0,.35)}
.who .av svg{width:26px;height:26px}
.who .lv{font-size:.78rem;color:var(--ink-2);font-weight:800}
.iconbtn{border:1px solid var(--line);background:var(--paper);box-shadow:none;border-radius:var(--r-chip);height:44px;min-width:44px;padding:0 10px;display:inline-grid;place-items:center;color:var(--ink)}
.main{padding:20px 16px 116px;max-width:1180px;width:100%;margin:0 auto}
.nav{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:20;display:flex;justify-content:space-around;padding:6px;border-radius:22px;
  background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:var(--lift-hi);border:1px solid var(--line)}
.nav a{flex:1;text-decoration:none;color:var(--ink-3);font-size:.75rem;font-weight:700;display:grid;justify-items:center;align-content:center;gap:2px;padding:6px 0;min-height:52px;border-radius:16px}
.nav a svg{width:24px;height:24px}
.nav a[aria-current="page"]{color:var(--ink);background:color-mix(in srgb,var(--leaf-weak) 85%,transparent)}
@media (min-width:900px){
  .top{padding:10px 24px}
  .nav{top:10px;bottom:auto;left:170px;right:auto;height:44px;z-index:21;flex-direction:row;align-items:center;gap:2px;padding:4px;border-radius:var(--r-chip);
    background:color-mix(in srgb,var(--bg) 80%,transparent);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav a{flex:none;display:flex;align-items:center;gap:6px;padding:0 16px;min-height:36px;border-radius:var(--r-chip);font-size:.95rem;font-weight:600;color:var(--ink-2)}
  .nav a svg{width:17px;height:17px}
  .nav a:hover{color:var(--ink)}
  .nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
  .main{padding:32px 32px 64px}
}

/* ── 화면 전환: 바뀐 내용만 살짝 ── */
.view{animation:viewIn .22s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── 공통 부품: 종이 한 장 ── */
.sheet{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--lift);padding:20px}
@media (min-width:600px){.sheet{padding:24px}}
.stack{display:grid;gap:16px;align-content:start;grid-template-columns:minmax(0,1fr)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.two>*,.today-grid>*,.stack>*{min-width:0}

/* 버튼: 기본 .btn = 해(sun) — 지금 할 일. 나머지는 quiet/ghost. 어른 화면의 기본 .btn은 숲 잉크(해는 쓰지 않음) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;
  border:0;border-radius:var(--r-btn);background:linear-gradient(180deg,#FFD271,var(--sun));color:var(--sun-ink);
  font-weight:800;font-size:1rem;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 var(--sun-deep),0 10px 22px -10px rgba(229,158,26,.9);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 var(--sun-deep)}
.btn.ghost,.btn.quiet{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:active:not(:disabled),.btn.quiet:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 0 0 1px var(--ink-3)}
.btn.wide{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}
:root:is([data-band="m"],[data-band="h"]) .btn:not(.ghost):not(.quiet){background:var(--sun);box-shadow:0 8px 20px -10px rgba(31,138,120,.9)}
:root:is([data-band="m"],[data-band="h"]) .btn:active{transform:none;opacity:.85}
:root[data-band="adult"] .btn:not(.ghost):not(.quiet){background:var(--leaf);color:#fff;box-shadow:0 8px 18px -10px rgba(18,53,46,.7)}
:root[data-band="adult"][data-theme="dark"] .btn:not(.ghost):not(.quiet){color:#0D1F17}
@media (prefers-color-scheme:dark){:root[data-band="adult"]:not([data-theme="light"]) .btn:not(.ghost):not(.quiet){color:#0D1F17}}
:root[data-band="adult"] .btn:active{transform:none;opacity:.85}

.chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:var(--r-chip);
  border:1px solid var(--line);background:var(--paper);font-weight:700;color:var(--ink-2)}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.chip:disabled{opacity:.45;cursor:not-allowed}
.tag{display:inline-flex;align-items:center;border-radius:var(--r-chip);padding:2px 10px;font-size:.78rem;font-weight:700;color:var(--ink-2);background:var(--bg)}
.notice{background:var(--sun-weak);padding:12px 16px;border-radius:14px;font-size:.92rem;font-weight:500}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:14px;z-index:70;
  animation:viewIn .2s var(--ease);font-size:.92rem;font-weight:700;box-shadow:var(--lift-hi);max-width:calc(100vw - 32px)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-chip);background:color-mix(in srgb,var(--paper) 80%,transparent);font-weight:700;font-size:.82rem;color:var(--ink-2);border:1px solid var(--line)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px}
.sec-h h2{font-size:1.5rem}

/* ── 계정 고르기(첫 화면) ── */
.hero{position:relative;overflow:hidden;border-radius:var(--r-stage);padding:28px 24px 0;background:var(--stage-bg);display:grid;gap:8px}
@media (min-width:760px){.hero{grid-template-columns:1.2fr 1fr;align-items:center;padding:40px 40px 32px}}
.hero h1{font-size:clamp(2rem,6vw,2.9rem);line-height:1.15}
.hero .lead{margin-top:14px;font-size:1.02rem;max-width:36em;color:var(--ink)}
.crew{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:2%;height:190px;padding-bottom:22px}
.crew svg{width:27%;max-width:120px;filter:drop-shadow(0 10px 8px rgba(20,61,58,.2));position:relative}
.crew svg:nth-of-type(2){width:36%;max-width:160px}
.crew .disc,.pet .disc{position:absolute;left:50%;bottom:6px;width:min(300px,86%);height:54px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%,#ffffff 0%,#CFE9DA 50%,#8CCBAA 100%);box-shadow:0 18px 30px -12px rgba(20,61,58,.45)}
:root[data-theme="dark"] :is(.crew,.pet) .disc{background:radial-gradient(ellipse at 50% 35%,#4F7564 0%,#2C5446 55%,#1B3A30 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.crew,.pet) .disc{background:radial-gradient(ellipse at 50% 35%,#4F7564 0%,#2C5446 55%,#1B3A30 100%)}}
.acc-grid{display:grid;gap:12px}
@media (min-width:700px){.acc-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.acc-grid{grid-template-columns:repeat(3,1fr)}}
.acc{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;text-align:left;border:2px solid transparent;background:var(--paper);border-radius:var(--r-card);
  padding:16px;min-height:96px;line-height:1.5;box-shadow:var(--lift);transition:border-color .15s}
.acc:hover{border-color:var(--line)}
.acc.on{border-color:var(--ink);box-shadow:0 6px 0 var(--press-c)}
.acc .av,.stu .av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:1.3rem;background:var(--sun-weak);color:var(--ink)}
.acc .av.stu-av{background:var(--plum-weak)}
.acc .av svg{width:44px;height:44px}
.pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pick-grid.subj{grid-template-columns:repeat(3,1fr)}
@media (min-width:600px){.pick-grid{grid-template-columns:repeat(10,1fr)}.pick-grid.subj{grid-template-columns:repeat(6,1fr)}}
.pick-grid .chip{border-radius:var(--r-btn);padding:8px 4px}
.grade-group{display:grid;gap:6px}
.flowline{font-size:.9rem;color:var(--ink-2)}
.login-row{display:grid;gap:8px}
@media (min-width:600px){.login-row{grid-template-columns:1fr 1fr 1fr}}

/* ── 오늘의 학습 ── */
.today-grid{display:grid;gap:24px}
@media (min-width:1080px){.today-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}
/* 초등 주인공: 생물이 말을 건다 */
.stage-e{position:relative;overflow:hidden;border-radius:var(--r-stage);padding:24px 24px 8px;background:var(--stage-bg);display:grid;gap:8px}
@media (min-width:700px){.stage-e{grid-template-columns:1.25fr 1fr;align-items:center;padding:32px}}
.stage-e .say{position:relative;z-index:2}
.stage-e h1{font-size:clamp(1.9rem,4.4vw,2.6rem);margin:20px 0 12px;line-height:1.2}
.stage-e .meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.bubble{display:inline-block;background:var(--paper);border:2.5px solid var(--press-c);border-radius:20px 20px 20px 6px;
  padding:12px 16px;font-weight:700;font-size:1.05rem;line-height:1.6;box-shadow:0 5px 0 var(--press-c);max-width:32ch}
.pet{position:relative;height:230px}
.pet svg.cr{position:absolute;left:50%;bottom:26px;width:190px;height:190px;transform:translateX(-50%);filter:drop-shadow(0 14px 10px rgba(20,61,58,.25))}
.pet svg.big{animation:float 3s ease-in-out infinite}
@keyframes float{50%{translate:0 -8px}}
.wake{position:absolute;right:4%;top:6%;background:var(--ink);color:var(--paper);padding:6px 12px;border-radius:14px;font-weight:800;font-size:.85rem}
.wake b{color:var(--sun)}
:root[data-theme="dark"] .wake{background:#06110F;color:#E7F2EC}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wake{background:#06110F;color:#E7F2EC}}
/* 중고 주인공: 개념 지도 */
.stage-s{border-radius:var(--r-stage);padding:24px;background:#18233A;color:#E6EAF2;display:grid;gap:12px;justify-items:start}
@media (min-width:700px){.stage-s{padding:32px}}
:root[data-theme="dark"] .stage-s{background:#0E1526}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stage-s{background:#0E1526}}
.stage-s .pill{background:rgba(255,255,255,.1);color:#E6EAF2}
.stage-s h1{font-size:clamp(1.8rem,3.6vw,2.4rem);color:#fff}
.stage-s>p{color:#AEB8CC;max-width:52ch}
.map.on-dark{width:100%;margin:8px 0 4px;padding:16px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);display:grid;gap:10px;
  --paper:#202B42; --ink:#E6EAF2; --ink-2:#9EA9BF; --line:#3A4660; --ok:#4CC3AE; --ok-weak:rgba(76,195,174,.16);
  --no:#F08AA2; --no-weak:rgba(240,138,162,.16); --hl:#1F8A78; --hl-weak:rgba(232,168,74,.18); --fill:#E8A84A; --sleep:#8E9BEA; color:#E6EAF2}
.map.on-dark h3{color:#E6EAF2;font-size:1rem}
.map.on-dark a{color:#4CC3AE}
.map.on-dark .st-start rect{stroke:#4CC3AE;filter:drop-shadow(0 0 6px rgba(76,195,174,.55))}
.stage-s .btn{margin-top:8px}
/* 오늘 할 일: 크기로 순서를 말한다 */
.plan{display:grid;gap:16px}
@media (min-width:700px){.plan{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.todo.now{grid-column:span 2}}
.todo{position:relative;border-radius:var(--r-card);padding:20px 22px;background:var(--paper);box-shadow:var(--lift);display:flex;flex-direction:column;gap:8px;min-height:170px}
.todo .kind{font-size:.82rem;font-weight:800;color:var(--ink-2)}
.todo h3{font-size:1.25rem}
.todo .foot{margin-top:auto;display:flex;justify-content:flex-end;align-items:center;padding-top:6px}
.todo .foot .btn{min-height:44px}
.todo.now{border:2.5px solid var(--press-c);box-shadow:0 8px 0 var(--press-c);background:linear-gradient(160deg,#FFFBEA,#FFFFFF 60%)}
.todo.now h3{font-size:1.7rem}
:root[data-theme="dark"] .todo.now{background:var(--paper)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .todo.now{background:var(--paper)}}
:root[data-band="m"] .todo.now,:root[data-band="h"] .todo.now{border:0;box-shadow:var(--lift),inset 4px 0 0 var(--leaf);background:var(--paper)}
.slices{display:flex;gap:6px;height:68px}
.slices i{flex:1;border:2.5px solid var(--press-c);border-radius:12px;background:var(--paper)}
.slices i.on{background:linear-gradient(#FFD866,#F4A920)}
/* 오른쪽 */
.side{gap:16px}
.time{display:flex;align-items:center;gap:16px}
.ring{width:112px;height:112px;flex:none}
.ring circle{fill:none;stroke-width:12}
.ring .bgc{stroke:var(--line)} .ring .fgc{stroke:var(--leaf);stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease)}
.ring text{font-family:var(--display);fill:var(--ink)}
.ring text.sub{font-family:var(--ui);fill:var(--ink-2)}
:root[data-band="m"] .ring text,:root[data-band="h"] .ring text{font-family:var(--ui);font-weight:800}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.slot{aspect-ratio:1;border-radius:18px;background:var(--bg);display:grid;place-items:center;position:relative;text-decoration:none}
.slot svg{width:78%;height:78%}
.slot.sleep::after{content:"졸려요";position:absolute;bottom:-6px;padding:1px 8px;border-radius:var(--r-chip);background:var(--plum);color:#fff;font-size:.72rem;font-weight:800}
.slot.egg{border:2px dashed var(--line);background:transparent}
.slot.egg i{width:34%;height:44%;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;background:var(--plum-weak);border:2px solid var(--plum)}
.mebar{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--plum-weak);display:grid;place-items:center;flex:none}
.avatar svg{width:46px;height:46px}
.mebar .btn{min-height:40px;padding:0 14px}
.xp{height:10px;border-radius:var(--r-chip);background:var(--line);overflow:hidden}
.xp span{display:block;height:100%;background:var(--plum);border-radius:var(--r-chip);transform-origin:left;animation:grow .9s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:110px}
.bars div{display:grid;gap:4px;justify-items:center;font-size:.75rem;color:var(--ink-2);height:100%;align-content:end}
.bars span{width:100%;max-width:28px;background:var(--leaf);border-radius:6px 6px 2px 2px;transform-origin:bottom;animation:growY .7s var(--ease) both}
.bars span.zero{background:var(--line);height:3px!important}
@keyframes growY{from{transform:scaleY(0)}}
.capline{stroke:var(--berry);stroke-dasharray:4 4}
.path{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 6px}
.path .u{display:grid;justify-items:center;gap:4px;font-size:.78rem;text-align:center;color:var(--ink-2)}
.path .dot{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line);background:var(--paper)}
.path .u.done .dot{background:var(--leaf);border-color:var(--leaf)}
.path .u.now .dot{background:var(--sun);border-color:var(--press-c);box-shadow:0 0 0 5px var(--sun-weak)}
.path .u.now{color:var(--ink);font-weight:800}
.path .bar{display:none}
/* 예전 이름(다른 화면에서 쓰는 할 일 줄) */
.task{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.task:first-child{border-top:0}
.task .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--plum-weak);color:var(--plum);font-weight:700}

/* ── 개념 지도 ── */
.map .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.map svg{height:auto;display:block;max-width:none}
.map .edge{stroke:var(--line);stroke-width:2.5;fill:none}
.map .node rect{stroke-width:2;rx:12}
.map .node text{font-family:var(--ui);font-size:13px;font-weight:600;fill:var(--ink)}
.map .node .g{font-size:11px;font-weight:500;fill:var(--ink-2)}
.st-pass rect{fill:var(--ok-weak);stroke:var(--ok)}
.st-guess rect{fill:var(--ok-weak);stroke:var(--ok);stroke-dasharray:5 4}
.st-fail rect{fill:var(--no-weak);stroke:var(--no)}
.st-review rect{fill:var(--paper);stroke:var(--sleep)}
.st-learning rect{fill:var(--hl-weak);stroke:var(--fill)}
.st-unknown rect{fill:var(--paper);stroke:var(--line)}
.st-start rect{fill:var(--hl);stroke:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--ink-2)}
.legend i{display:inline-block;width:14px;height:10px;border-radius:3px;border:2px solid;vertical-align:-1px;margin-right:4px}
.map .swipe{display:none;font-size:.78rem;color:var(--ink-2)}
@media (max-width:599px){.map .swipe{display:block}}

/* ── 문항 ── */
.q-stem{font-size:1.15rem;font-weight:600;line-height:1.7}
.choices{display:grid;gap:10px}
.choice{text-align:left;border:2px solid var(--line);background:var(--paper);border-radius:var(--r-btn);padding:12px 16px;min-height:56px;display:flex;gap:12px;align-items:center;font-weight:600;
  transition:border-color .15s,background-color .15s}
.choice:hover:not(:disabled){border-color:var(--ink-2)}
.choice .k{width:28px;height:28px;border-radius:50%;background:var(--bg);display:inline-grid;place-items:center;font-size:.8rem;font-weight:800;flex:none;color:var(--ink-2)}
.choice[aria-pressed="true"]{border-color:var(--sel);background:var(--sel-weak)}
.choice[aria-pressed="true"] .k{background:var(--ink);color:var(--paper)}
.choice.ok{border-color:var(--leaf);background:var(--leaf-weak);animation:pop .28s var(--ease)}
.choice.no{border-color:var(--berry);background:var(--berry-weak);animation:nudge .3s var(--ease)}
.choice:disabled{cursor:default}
.choices.ab{grid-template-columns:1fr 1fr}
@keyframes pop{50%{transform:scale(1.025)}}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.fb{border-radius:14px;padding:12px 16px;animation:viewIn .2s var(--ease)}
.fb.ok{background:var(--leaf-weak)} .fb.no{background:var(--berry-weak)}
.fb b{display:block;margin-bottom:2px}
.conf{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.conf .chip{padding:8px 4px;font-size:.92rem}
.timer{font-size:.85rem;color:var(--ink-2)}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 2px;font-weight:800}
.frac b{display:block;padding:0 3px}
.frac b:first-child{border-bottom:2px solid currentColor}
.figrow{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:end}
.fig{display:grid;justify-items:center;gap:2px;font-size:.9rem}
svg .p{stroke:var(--stroke);stroke-width:2.5;fill:var(--paper)}
svg .on{fill:var(--fill)}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots i{width:22px;height:8px;border-radius:var(--r-chip);background:var(--line);transition:background-color .3s}
.dots i.ok{background:var(--leaf)} .dots i.no{background:var(--berry)} .dots i.now{background:var(--ink)}

/* ── 개념 학습 ── */
.lesson-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.steps{display:flex;gap:4px}
.steps i{height:8px;border-radius:var(--r-chip);background:var(--line);flex:1;transition:background-color .3s}
.steps i.done{background:var(--leaf)}
.talk{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start}
.talk .snail{width:64px;height:64px;display:block}
.talk .snail svg{width:100%;height:100%}
.talk .bubble{max-width:none;font-weight:500;font-size:1.08rem;line-height:1.75}
:root[data-band="m"] .bubble,:root[data-band="h"] .bubble{background:transparent;border:0;box-shadow:none;padding:0;font-weight:500}
.scene{max-width:100%;border-radius:var(--r-card);display:block;margin:0 auto}
.screen-body{display:grid;gap:16px;min-height:300px;align-content:start}
.wrongbox{background:var(--berry-weak);border-radius:14px;padding:12px 16px;font-weight:600}
.keybox{background:var(--leaf-weak);border-radius:14px;padding:12px 16px}
.summary li{margin:6px 0}
.reveal{border:2px dashed var(--plum);border-radius:14px;padding:12px 16px;background:var(--plum-weak);width:100%;text-align:left;font-weight:700;color:var(--ink)}

/* ── 놀이(게임) ── */
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.theme{border:2.5px solid transparent;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--lift);padding:14px;text-align:left;display:grid;gap:8px;align-content:start}
.theme svg{width:100%;height:auto;max-height:110px;border-radius:12px}
.theme[aria-pressed="true"]{border-color:var(--press-c);box-shadow:0 6px 0 var(--press-c)}
.theme.soon{opacity:.55;cursor:not-allowed}
.stage{border-radius:var(--r-card);overflow:hidden;background:var(--paper);box-shadow:var(--lift)}
.stage svg{display:block;width:100%;height:auto}
.runner{transition:transform .6s var(--ease)}
.roomitem{transform-box:fill-box;transform-origin:center;animation:place .45s var(--ease) both}
@keyframes place{from{transform:scale(.2) translateY(-20px);opacity:0}}

/* ── 낱말 카드 ── */
.card-wrap{perspective:1200px;max-width:380px;margin:0 auto;width:100%}
.card{position:relative;height:320px;transform-style:preserve-3d;transition:transform .5s var(--ease);cursor:pointer}
.card.flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-stage);background:var(--paper);box-shadow:var(--lift);
  border:2.5px solid var(--press-c);display:grid;place-items:center;align-content:center;gap:10px;padding:20px;text-align:center}
.face.back{transform:rotateY(180deg);background:var(--sun-weak)}
.word{font-family:var(--display);font-size:3rem;line-height:1.05;letter-spacing:.01em}
.emo{font-size:3rem;line-height:1}
.speak{border:0;background:var(--plum-weak);color:var(--ink);border-radius:var(--r-chip);padding:8px 16px;font-weight:700;min-height:44px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{font-family:var(--display);font-size:1.8rem;border:2px solid var(--line);background:var(--paper);border-radius:var(--r-btn);height:64px;color:var(--ink)}
.tile[aria-pressed="true"]{border-color:var(--sel);background:var(--sel-weak)}
.tile.ok{border-color:var(--leaf);background:var(--leaf-weak);animation:pop .28s var(--ease)}
.tile.gone{visibility:hidden}
.tile.no{animation:nudge .3s var(--ease);border-color:var(--berry)}

/* ── 도감 ── */
.dex{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:600px){.dex{grid-template-columns:repeat(4,1fr)}}
.crit{border:0;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--lift);padding:16px 12px;display:grid;gap:6px;justify-items:center;align-content:start;text-align:center;color:inherit;text-decoration:none;line-height:1.45}
.crit svg{width:104px;height:104px}
.crit.locked{background:transparent;box-shadow:inset 0 0 0 2px var(--line)}
button.crit{box-shadow:var(--lift),inset 0 0 0 2px var(--plum)}
.crit .state{font-size:.75rem;font-weight:800;border-radius:var(--r-chip);padding:1px 10px}
.state.awake{background:var(--leaf-weak);color:var(--leaf)}
.state.sleepy{background:var(--plum-weak);color:var(--plum)}
.state.egg{background:var(--sun-weak);color:var(--ink)}
.state.locked{background:var(--bg);color:var(--ink-2)}
.cr.sleepy{filter:saturate(.6)}
.creature-bob{animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.zz{animation:zz 2.4s ease-in-out infinite}
@keyframes zz{0%{opacity:0;transform:translate(0,4px)}50%{opacity:1}100%{opacity:0;transform:translate(4px,-6px)}}
/* 알 부화 */
.overlay{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.hatch{background:var(--paper);border-radius:var(--r-stage);box-shadow:var(--lift),0 30px 60px -30px rgba(20,61,58,.5);padding:28px;max-width:360px;width:100%;display:grid;gap:12px;justify-items:center;text-align:center}
.hatch svg{width:160px;height:160px}
.hatch .egg{transform-origin:50% 90%;animation:wobble .5s ease-in-out 3}
@keyframes wobble{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.born{animation:born .5s var(--ease) both}
@keyframes born{from{transform:scale(.3);opacity:0}70%{transform:scale(1.08)}}

/* ── 부모·선생님(정리 노트 톤) ── */
.kid-tabs{display:flex;gap:8px}
.setting{display:grid;gap:8px;padding:16px 0;border-top:1px solid var(--line)}
.setting:first-child{border-top:0;padding-top:0}
.setting .head{display:flex;justify-content:space-between;align-items:center;gap:12px}
input[type=range]{width:100%;accent-color:var(--leaf)}
.switch{position:relative;width:52px;height:30px;border-radius:var(--r-chip);border:0;background:var(--line);flex:none;transition:background-color .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.switch[aria-checked="true"]{background:var(--leaf)}
.switch[aria-checked="true"]::after{transform:translateX(22px)}
.two{display:grid;gap:16px}
@media (min-width:900px){.two{grid-template-columns:1fr 1fr}}
.stu{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:14px;border:0;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--lift);text-align:left;width:100%;line-height:1.5}
.stu .av{width:48px;height:48px;font-size:1.15rem;background:var(--plum-weak)}
.stu[aria-pressed="true"]{box-shadow:var(--lift),inset 0 0 0 2px var(--leaf),inset 6px 0 0 var(--leaf)}
.alert{color:var(--berry);font-size:.82rem;font-weight:700}
.lib label{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.lib input{width:20px;height:20px;accent-color:var(--leaf)}
.field{display:grid;gap:4px}
.field input,.field select{border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r-btn);padding:8px 12px;min-height:44px}

/* ═══ 2026-11-09 app_vs_ebs 추가 (홈피 인계: 아래 클래스는 전부 여기서만 꾸밈) ═══ */
.row.spread{justify-content:space-between}
.row.end-row{justify-content:flex-end;margin-top:8px}
.center{text-align:center;justify-items:center}
.pill.soft{background:var(--leaf-weak);color:var(--ink)}
.lead-txt{font-size:1.08em}
.q-emoji{font-size:3rem;text-align:center;line-height:1.2}
.sec-title{font-size:1.2rem;margin-top:8px}

/* 계정 화면: 가입 없이 해 보기 */
.try-card{margin-top:20px;border:2.5px solid var(--press-c);box-shadow:0 6px 0 var(--press-c)}
.try-card p{margin-top:4px}
:root[data-band] .try-card{border:0;box-shadow:var(--lift),inset 0 0 0 2px var(--leaf)}
.try-grid{grid-template-columns:repeat(3,1fr)}
@media (min-width:600px){.try-grid{grid-template-columns:repeat(6,1fr)}}
.acc-h{margin:28px 0 0}
.acc-note{margin-top:6px}
.acc-grid{margin-top:14px}
.try-badge{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.try-badge a{margin-left:auto}
.join ul{margin:0;padding-left:1.2em;display:grid;gap:4px}

/* 문제 보기 도구(뷰어) */
.viewer{display:grid;gap:10px;--vf:1;--ink-pen:var(--plum)}
.viewer[data-size="1"]{--vf:1.18} .viewer[data-size="2"]{--vf:1.36}
.vbar,.penbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.penbar[hidden]{display:none}
.seg{display:inline-flex;background:var(--paper);border-radius:var(--r-chip);box-shadow:inset 0 0 0 1.5px var(--line);padding:2px}
.seg button{border:0;background:transparent;min-width:44px;height:40px;border-radius:var(--r-chip);display:inline-grid;place-items:center;font-weight:800;color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sw{display:block;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25)}
.sw-light{background:#FFFFFF} .sw-dark{background:#1B2430} .sw-cream{background:#F7EFD8}
.vtool{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-chip);border:1.5px solid var(--line);background:var(--paper);font-weight:700;color:var(--ink)}
.vtool[aria-pressed="true"]{background:var(--plum-weak);border-color:var(--plum)}
.vsheet{position:relative;font-size:calc(1rem * var(--vf));color:var(--ink);background:var(--paper)}
.vsheet .q-stem{font-size:1.15em}
.vsheet .talk .bubble{font-size:1.08em}
.vsheet .small{font-size:.875em}
.vsheet .choice{font-size:1em}
canvas.ink{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit}
.viewer.inking canvas.ink{pointer-events:auto;touch-action:none;cursor:crosshair}
.viewer.inking .vsheet{box-shadow:var(--lift),0 0 0 2px var(--plum)}
.viewer[data-paper="light"]{--paper:#FFFFFF;--bg:#EEF2F0;--ink:#15302C;--ink-2:#4E6662;--line:#D3DED8;--leaf:#2F8F62;--leaf-weak:#DDF0E5;--berry:#C83D60;--berry-weak:#FBE5EB;--sel-weak:#FFF4CF;--plum-weak:#ECE6FA;--stroke:#15302C;--fill:#F4A920;--ink-pen:#5B3FB0}
.viewer[data-paper="dark"]{--paper:#1B2430;--bg:#121922;--ink:#EEF2F6;--ink-2:#AAB6C4;--line:#33404F;--leaf:#5CC892;--leaf-weak:#1C3B33;--berry:#F08AA2;--berry-weak:#45202B;--sel-weak:#2C3448;--plum-weak:#2A2448;--stroke:#EEF2F6;--fill:#E6A33D;--ink-pen:#FFD866}
.viewer[data-paper="cream"]{--paper:#F7EFD8;--bg:#EFE5C8;--ink:#3A2E1A;--ink-2:#6B5B3E;--line:#DCCDA6;--leaf:#2F7F55;--leaf-weak:#E1EBCB;--berry:#B8405C;--berry-weak:#F3D9D6;--sel-weak:#F0DFAE;--plum-weak:#E7DDEF;--stroke:#3A2E1A;--fill:#E39A1C;--ink-pen:#4B3A9A}
.viewer[data-paper] .vsheet :is(.choice,.reveal,.tag){color:var(--ink)}

/* 답 고르기 → 확인 → 정답/오답 */
.choice .ct{flex:1;min-width:0}
.choice[aria-pressed="true"]{transform:scale(1.01)}
.choice .mark{margin-left:auto;display:inline-grid;place-items:center;flex:none}
.choice.ok .mark{color:var(--leaf)} .choice.no .mark{color:var(--berry)}
.mark .draw{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .35s var(--ease) .05s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.choice.answer{border-color:var(--leaf);border-style:dashed}
.ans-tag{margin-left:auto;font-size:.75em;font-weight:800;color:var(--leaf);background:var(--leaf-weak);border-radius:var(--r-chip);padding:2px 8px;flex:none}
.submit-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.submit-row[hidden]{display:none}

/* 수직선 */
.numline{width:100%;height:auto}
.numline .ax{stroke:var(--ink);stroke-width:2}
.numline .tk{stroke:var(--ink-2);stroke-width:1.5}
.numline .nl-t{font-size:13px;fill:var(--ink-2);font-family:var(--ui)}
.numline .nl-t.z{fill:var(--ink);font-weight:800}
.numline .mv{fill:none;stroke:var(--plum);stroke-width:2.5}
.numline .ah{fill:var(--plum)}
.numline .nl-m{font-size:14px;font-weight:800;fill:var(--plum);font-family:var(--ui)}
.numline .st{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.numline .en{fill:var(--leaf)}

/* 학부모 1분 리포트 */
.report{display:grid;gap:16px;border-top:4px solid var(--leaf)}
.report-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.report-grid{display:grid;gap:12px}
@media (min-width:900px){.report-grid{grid-template-columns:1fr 1fr 1.4fr}}
.rblock{position:relative;background:var(--bg);border-radius:var(--r-btn);padding:14px 16px 16px;display:grid;gap:8px;align-content:start;min-width:0}
.rnum{position:absolute;top:12px;right:14px;font-weight:800;color:var(--ink-2);font-size:.8rem}
.gaps{margin:0;padding-left:1.1em;display:grid;gap:4px}
.report .big{font-size:1.9rem;font-weight:800;line-height:1.1}
.scores{display:grid;gap:0;font-size:.88rem}
.srow{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:6px;padding:7px 0;border-top:1px solid var(--line);align-items:center}
.srow.sh{border-top:0;font-size:.78rem;color:var(--ink-2);font-weight:700}
.srow span[role=cell]{display:flex;flex-wrap:wrap;gap:0 4px;align-items:baseline;min-width:0;overflow-wrap:anywhere}
.report-next{background:var(--leaf-weak);border-radius:var(--r-btn);padding:12px 16px}
.report-next b{margin-right:6px}

/* 영어 중고 개념 노드 */
.q-stem{white-space:pre-line}
.node-title{margin-top:6px}
.ex-list{display:grid;gap:8px}
.node-check{gap:8px;border-top:1px dashed var(--line);padding-top:14px}
.passage{background:var(--bg);border-radius:14px;padding:12px 16px;display:grid;gap:8px}

/* 과외 선생님 화면 */
.t-head{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;justify-content:space-between}
.t-head p{margin-top:4px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px}
.tab{border:0;background:transparent;min-height:44px;padding:0 16px;border-radius:var(--r-chip);font-weight:700;color:var(--ink-2)}
.tab[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:var(--lift),inset 0 -3px 0 var(--leaf)}
.tab .cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:var(--r-chip);background:var(--leaf);color:#fff;font-size:.75rem;padding:0 6px}
.plan-badge{display:inline-flex;align-items:center;border-radius:var(--r-chip);padding:1px 8px;font-size:.72rem;font-weight:800;white-space:nowrap}
.plan-badge.paid{background:var(--leaf-weak);color:var(--leaf)}
.plan-badge.free{background:var(--sun-weak);color:var(--ink)}
.plan-badge.grace{background:var(--plum-weak);color:var(--plum)}
.billing{border-top:4px solid var(--plum)}
.code{font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em;background:var(--bg);border-radius:6px;padding:1px 6px}
.t-plan{display:grid;gap:12px}
@media (min-width:900px){.t-plan{grid-template-columns:1fr auto;align-items:center}}
.t-plan p{margin-top:4px}
.t-plan-act{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.linkf{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.linkf .field input{width:140px}
.locked-note{display:flex;gap:8px;align-items:flex-start;background:var(--bg);border:1.5px dashed var(--line);border-radius:12px;padding:10px 12px;font-size:.88rem}
.locked-note svg{flex:none;margin-top:3px;color:var(--ink-2)}
.stu-list{gap:8px}
.quick summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.quick[open]{display:grid;gap:12px}
.field.grow{flex:1;min-width:140px}
.field.grow input{width:100%;min-width:0}
@media (max-width:599px){.ws-head{grid-template-columns:auto 1fr}.ws-code{grid-column:1/-1}}
.hw-list{display:grid}
.hw-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.hw-row:first-child{border-top:0}
.hw-st{font-size:.85rem;color:var(--ink-2);white-space:nowrap;text-align:right}
.hw-st.done{color:var(--leaf);font-weight:700}
.unit-grid{display:grid;gap:16px}
@media (min-width:900px){.unit-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}.side-col{position:sticky;top:76px}}
.finder-row{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (min-width:600px){.finder-row{grid-template-columns:90px 90px 1fr 1.2fr}}
.finder .field select,.finder .field input{width:100%;min-width:0}
.units{display:grid;gap:8px}
.unit{background:var(--paper);border-radius:var(--r-btn);box-shadow:var(--lift);padding:4px 14px}
.unit summary{cursor:pointer;min-height:44px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.smalls{display:grid;gap:6px;padding:4px 0 12px}
.sunit{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:space-between;align-items:center;text-align:left;border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:8px 12px;min-height:44px;color:var(--ink);font-weight:600}
.sunit[aria-current="true"]{border-color:var(--leaf);background:var(--leaf-weak)}
.codes{display:inline-flex;flex-wrap:wrap;gap:4px}
.codes i{font-style:normal;font-size:.72rem;font-weight:700;color:var(--ink-2);background:var(--bg);border-radius:6px;padding:1px 6px}
.side-col>.sheet{scroll-margin-top:76px}
.std-list{margin:0;padding-left:1.1em;display:grid;gap:4px}
.cat-list{display:grid;max-height:420px;overflow:auto}
.cat-row{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.cat-row .btn.add{min-height:40px;padding:0 14px;flex:none}
.bk-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bk-list li{display:flex;justify-content:space-between;gap:8px;align-items:center;background:var(--bg);border-radius:10px;padding:6px 6px 6px 12px}
.iconbtn.sm{height:36px;min-width:36px;box-shadow:none}
.to-stu{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.to-stu legend{margin-bottom:4px;font-weight:700}
.chk{display:inline-flex;gap:6px;align-items:center;min-height:40px}
.chk input{width:20px;height:20px;accent-color:var(--leaf)}
.hw-table{display:grid;font-size:.9rem}
.hw-tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto auto auto;gap:8px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.hw-tr.sh{border-top:0;font-size:.78rem;color:var(--ink-2);font-weight:700}
@media (max-width:599px){.hw-tr{grid-template-columns:1fr 1fr}.hw-tr.sh{display:none}.hw-tr span[role=cell]:nth-child(2){grid-column:1/-1;order:-1}}

/* 인쇄용 학습지 · 1장 보고서 */
.ws{display:grid;gap:24px}
.ws-page{background:#fff;color:#1a1a1a;border-radius:6px;box-shadow:var(--lift);padding:28px 24px;display:grid;gap:16px;max-width:794px;width:100%;margin:0 auto;
  --ink:#1a1a1a;--ink-2:#555;--line:#d6d6d6;--paper:#fff;--bg:#f3f3f3;--stroke:#1a1a1a;--fill:#bbb;--leaf-weak:#eef5f0;--sun-weak:#fff5d6}
.ws-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px 16px;align-items:center;border-bottom:2px solid #1a1a1a;padding-bottom:12px}
.ws-logo{width:88px;height:56px;border:1.5px dashed #999;border-radius:8px;display:grid;place-items:center;font-size:.75rem;color:#777}
.ws-title h2{font-family:var(--ui);font-weight:800;font-size:1.35rem;margin-top:2px}
.ws-who{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.9rem;align-items:center}
.blank{display:inline-block;min-width:110px;border-bottom:1px solid #1a1a1a;font-style:normal;padding:0 4px}
.ws-box{background:#f6f6f6;border-radius:8px;padding:12px 16px;display:grid;gap:6px}
.ws-box h3,.ws-sec h3{font-family:var(--ui);font-weight:800;font-size:1rem}
.ws-sec{display:grid;gap:8px}
.ws-sec ol{margin:0;padding-left:1.4em;display:grid;gap:14px}
.ws-items li{break-inside:avoid}
.ws-stem{font-weight:600;white-space:pre-line}
.ws-ch{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:4px}
.ws-line{border-bottom:1px solid #999;height:26px}
.ws-ans{gap:6px!important;font-size:.9rem}
.ws-foot{font-size:.72rem;color:#777;border-top:1px solid #ddd;padding-top:8px}
.ws-page .figrow svg{max-width:220px;height:auto}
.rep-map{background:#f8f8f8;border-radius:8px;padding:8px}
.rep-map svg{max-height:280px;width:auto;max-width:100%}
.rep-map .scroll{overflow:visible}
.rep-cols{display:grid;gap:10px}
@media (min-width:700px){.rep-cols{grid-template-columns:repeat(3,minmax(0,1fr))}.rep-cols.two-c{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rblock.low{background:#fff5d6}
.plan2{margin:0;padding-left:1.2em;display:grid;gap:4px;font-size:.88rem}
.share-pre{white-space:pre-wrap;font-family:var(--ui);font-size:.9rem;margin:8px 0 0}
.ws-code{display:flex;gap:6px;align-items:center;font-size:.72rem;line-height:1.3;text-align:left}
.ws-code b{font-family:ui-monospace,Consolas,monospace;font-size:.95rem;letter-spacing:.08em}
.qr{display:block;flex:none}
/* 종이 채점 입력 */
.pg-block{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.pg-block:first-child{border-top:0}
.pg-mode button{min-width:0;padding:0 12px;font-size:.85rem}
.pg-wrong{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pg-wrong[hidden],.pg-choice[hidden]{display:none}
.pg-n{min-height:52px;border-radius:var(--r-btn);border:2px solid var(--line);background:var(--paper);font-weight:800;font-size:1.1rem;color:var(--ink)}
.pg-n[aria-pressed="true"]{border-color:var(--berry);background:var(--berry-weak);color:var(--berry)}
.pg-choice{display:grid;gap:6px}
.pg-row{display:flex;gap:6px;align-items:center}
.pg-q{width:28px;text-align:right;font-weight:800;color:var(--ink-2);flex:none}
.pg-c{flex:1;min-width:0;min-height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);font-size:1.05rem;color:var(--ink)}
.pg-c[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
button.hw-row{width:100%;background:transparent;border:0;border-top:1px solid var(--line);text-align:left;color:var(--ink);min-height:52px}
button.hw-row:first-child{border-top:0}
.scan-v{width:100%;max-width:320px;border-radius:12px;background:#000}
.paper-link{display:grid;gap:2px;text-decoration:none;color:var(--ink)}
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff!important}
  .top,.nav,.no-print,.toast{display:none!important}
  .main{padding:0!important;max-width:none}
  .view{animation:none}
  .ws{gap:0}
  .ws-page{box-shadow:none;border-radius:0;padding:0;max-width:none;break-after:page}
  .ws-page:last-child{break-after:auto}
  .ws-key{break-before:page}
  .rep1{gap:8px;font-size:12px}
  .rep1 .rep-map svg{max-height:70mm}
  .rep1 .rblock{padding:8px 10px}
  .rep1 .swipe{display:none!important}
  .rep1 .rep-cols{grid-template-columns:repeat(3,1fr)}
  .rep1 .rep-cols.two-c{grid-template-columns:1fr 1fr}
}

/* ═══ 2026-11-09 고급화 "자연사관 — 메뉴 = 방" (홈피) — 위 화면 규칙 위에 덧칠만. 클래스 이름·구조는 그대로 ═══ */

/* ── 공통: 눌리는 블록(두꺼운 테두리+그림자) → 종이와 유리 ── */
.bubble{border:1px solid var(--line);border-radius:18px 18px 18px 6px;box-shadow:var(--lift);background:var(--paper)}
.todo.now{border:1px solid var(--line);box-shadow:var(--lift-hi),inset 4px 0 0 var(--sun);background:var(--paper)}
:root:is([data-band="m"],[data-band="h"]) .todo.now{box-shadow:var(--lift),inset 4px 0 0 var(--leaf)}
.slices i{border:1.5px solid var(--line);border-radius:10px}
.slices i.on{background:linear-gradient(#FFD866,#F4A920);border-color:#E59E1A}
.face{border:1px solid var(--line);box-shadow:var(--lift-hi)}
.theme{border:0;box-shadow:var(--lift)}
.theme[aria-pressed="true"]{box-shadow:var(--lift-hi),0 0 0 2.5px var(--ink)}
.acc{border:0;box-shadow:var(--lift)}
.acc:hover{box-shadow:var(--lift-hi)}
.acc.on{box-shadow:var(--lift-hi),0 0 0 2.5px var(--ink)}
.try-card{border:0;box-shadow:var(--lift-hi),inset 0 0 0 2px var(--leaf)}
.choice{border-width:1.5px}
.choice[aria-pressed="true"]{border-color:var(--sel)}
.reveal{border-width:1.5px}
.wake{background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:var(--lift);border-radius:12px;font-family:var(--display);font-weight:400}
.wake b{color:var(--ink)}
:root[data-theme="dark"] .wake{background:var(--paper);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wake{background:var(--paper);color:var(--ink)}}
.who .lv{font-family:var(--ui)}
.iconbtn.sm{border:0}

/* 과목 고르기: 유리 알약 하나로 묶음 */
.row[role="group"]:has(> .chip[data-s]){width:fit-content;max-width:100%;gap:2px;padding:4px;border-radius:var(--r-chip);
  background:color-mix(in srgb,var(--paper) 62%,transparent);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (max-width:599px){.row[role="group"]:has(> .chip[data-s]){border-radius:22px}}
.row[role="group"] > .chip[data-s]{border:0;background:transparent;min-height:40px;padding:0 16px}
.row[role="group"] > .chip[data-s][aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:var(--lift)}

/* 황동 = 얻은 것: 레벨·경험치 막대 */
.xp{height:10px;background:color-mix(in srgb,var(--line) 70%,var(--paper));box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.xp span{background:var(--brass)}
.mebar b .muted{display:inline-block;padding:0 8px;border-radius:var(--r-chip);background:var(--brass);color:#3E2A00!important;font-weight:800;font-size:.75rem;line-height:1.6;vertical-align:1px}
.avatar{background:radial-gradient(120% 80% at 30% 20%,rgba(255,255,255,.7),var(--plum-weak) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 6px 0 -2px var(--brass-line),0 9px 0 -2px #4E3420}

/* 개념 생물 받침: 유리 돔 + 호두나무 받침(황동 테) */
.crew .disc,.pet .disc{width:min(240px,74%);height:24px;bottom:6px;border-radius:10px;background:var(--walnut);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 12px 22px -8px rgba(0,0,0,.6)}
.crew .disc::before,.pet .disc::before{content:"";position:absolute;left:0;right:0;top:-5px;height:7px;border-radius:6px;background:var(--brass)}
:root[data-theme="dark"] :is(.crew,.pet) .disc,:root:is([data-room="camp"][data-time="night"]) :is(.crew,.pet) .disc{background:var(--walnut)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.crew,.pet) .disc{background:var(--walnut)}}
.pet::after{content:"";position:absolute;left:50%;bottom:30px;width:min(230px,72%);height:224px;transform:translateX(-50%);pointer-events:none;
  border-radius:50% 50% 12px 12px/58% 58% 12px 12px;
  background:radial-gradient(120% 80% at 30% 18%,rgba(255,255,255,.55),rgba(255,255,255,.06) 45%,rgba(255,255,255,.14) 100%);
  border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 0 30px rgba(255,255,255,.2)}
.pet svg.cr{bottom:40px;width:168px;height:168px}
.pet .wake{z-index:2}
.slot{background:radial-gradient(120% 80% at 30% 20%,rgba(255,255,255,.55),color-mix(in srgb,var(--paper) 40%,var(--bg)) 70%);
  border-radius:50% 50% 10px 10px/56% 56% 10px 10px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent),0 5px 0 -1px var(--brass-line),0 9px 0 -1px #4E3420}
.slot.egg{box-shadow:none;border-radius:16px}

/* ═ 입구 홀(로그인·체험 고르기) ═ */
.hero{background:transparent;padding-left:0;padding-right:0}
@media (min-width:760px){.hero{padding:24px 0 16px}}
.hero h1{font-size:clamp(2.1rem,6vw,3.3rem);line-height:1.1}
.hero .lead{color:var(--ink-2)}
.crew{height:210px;padding-bottom:30px}
.crew::after{content:"";position:absolute;left:50%;bottom:34px;width:min(330px,92%);height:180px;transform:translateX(-50%);pointer-events:none;
  border-radius:50% 50% 12px 12px/62% 62% 12px 12px;background:radial-gradient(120% 80% at 30% 18%,rgba(255,255,255,.55),rgba(255,255,255,.06) 45%,rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.65)}
.crew .disc{width:min(360px,96%)}
.acc .av{background:var(--paper-2,var(--bg));box-shadow:inset 0 0 0 1px var(--line)}
.acc .av.stu-av{background:radial-gradient(120% 80% at 30% 20%,#fff,var(--plum-weak) 70%)}
.acc-h{font-size:1.3rem}

/* ═ 캠프(초등 오늘): 주인공 하나 — 생물 무대만 크게, 나머지는 조용히 ═ */
:root[data-room="camp"] .stage-e{background:transparent;padding:8px 0 0;overflow:visible}
@media (min-width:700px){:root[data-room="camp"] .stage-e{padding:24px 0 8px}}
:root[data-room="camp"] .stage-e h1{font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.12;margin:22px 0 14px}
:root[data-room="camp"] .stage-e .say{background:color-mix(in srgb,var(--paper) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:var(--r-card);padding:16px 18px 20px;margin-right:auto}
@media (min-width:700px){:root[data-room="camp"] .stage-e .say{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}}
:root[data-room="camp"] .sec-h h2{font-size:1.15rem}
:root[data-room="camp"] .sec-h{margin-bottom:10px}
:root[data-room="camp"] .plan{gap:10px}
@media (min-width:700px){:root[data-room="camp"] .plan{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}:root[data-room="camp"] .todo.now{grid-column:auto}}
:root:is([data-room="camp"],[data-room="observatory"]) .todo{min-height:0;padding:14px 18px;gap:4px;box-shadow:none;border:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
:root:is([data-room="camp"],[data-room="observatory"]) .todo h3,:root:is([data-room="camp"],[data-room="observatory"]) .todo.now h3{font-size:1.05rem;font-family:var(--ui);font-weight:800;letter-spacing:-.02em}
:root:is([data-room="camp"],[data-room="observatory"]) .todo.now{box-shadow:inset 3px 0 0 var(--sun)}
:root[data-room="observatory"] .todo.now{box-shadow:inset 3px 0 0 var(--leaf)}
:root[data-room="camp"] .todo .slices{height:10px;gap:4px}
:root[data-room="camp"] .todo .slices i{border-radius:99px;border-width:0;background:color-mix(in srgb,var(--line) 80%,var(--paper))}
:root[data-room="camp"] .todo .slices i.on{background:var(--sun)}
:root:is([data-room="camp"],[data-room="observatory"]) .plan .btn:not(.ghost):not(.quiet){background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);min-height:44px}
:root:is([data-room="camp"],[data-room="observatory"]) .side>.sheet,:root[data-room="camp"] .sheet.map{
  background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none;border:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
:root[data-room="camp"] .sheet.map h3{font-family:var(--ui);font-weight:800;font-size:1rem}
:root[data-room="camp"] .side h3{font-family:var(--ui);font-weight:800;font-size:1rem}
:root[data-room="camp"] .ring text{font-family:var(--ui);font-weight:800}

/* ═ 관측소(중고 오늘): 남색 밤하늘, 개념 지도 = 별자리 ═ */
.stage-s{background:color-mix(in srgb,#0E1830 82%,transparent);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
:root[data-theme="dark"] .stage-s{background:color-mix(in srgb,#0E1830 82%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stage-s{background:color-mix(in srgb,#0E1830 82%,transparent)}}
.stage-s .pill{background:rgba(255,255,255,.08);color:#C8D0E0;border-color:rgba(255,255,255,.14)}
.stage-s h1{font-family:var(--ui);font-weight:800;letter-spacing:-.03em}
.stage-s>p{color:#B4BED2}
.map.on-dark{background:rgba(4,10,24,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);--ok:#F3DE9C;--ok-weak:rgba(243,222,156,.10);--line:rgba(255,255,255,.28);--paper:rgba(255,255,255,.03)}
.map.on-dark .edge{stroke:rgba(214,224,245,.42);stroke-width:1.4}
.map.on-dark .node rect{stroke-width:1.2}
.map.on-dark .st-pass rect,.map.on-dark .st-guess rect{filter:drop-shadow(0 0 5px rgba(243,222,156,.45))}
.map.on-dark .st-start rect{fill:rgba(76,195,174,.22);stroke:#7FE3CF;stroke-width:2;filter:drop-shadow(0 0 8px rgba(127,227,207,.7))}
.map.on-dark .st-start text{fill:#E6FFF8}
.map.on-dark .st-unknown rect{stroke-dasharray:2 4}
.map.on-dark .legend{color:#A9B4CA}
:root[data-room="observatory"] .sec-h h2{font-family:var(--ui);font-weight:800;font-size:1.15rem}
:root:is([data-band="m"],[data-band="h"]) .who .av{display:none}
:root:is([data-band="m"],[data-band="h"]) .who{padding-left:14px}
:root:is([data-band="m"],[data-band="h"]) .mebar{grid-template-columns:1fr auto}
:root:is([data-band="m"],[data-band="h"]) .mebar .avatar{display:none}
:root:is([data-band="m"],[data-band="h"]) .talk{grid-template-columns:minmax(0,1fr)}
:root:is([data-band="m"],[data-band="h"]) .talk .snail{display:none}
:root:is([data-band="m"],[data-band="h"]) .ring text{font-family:var(--ui);font-weight:800}

/* ═ 탐험 수첩(학습·문제 보기·체험 학습·노드): 조용한 종이 ═ */
:root[data-room="notebook"] .sheet{box-shadow:0 1px 0 rgba(18,53,46,.04),0 12px 30px -20px rgba(18,53,46,.30)}
:root[data-room="notebook"] .vsheet{border:1px solid var(--line)}
:root[data-room="notebook"] .steps i.done{background:var(--leaf)}

/* ═ 진열관(도감): 벨벳 벽, 유리 돔 위 생물, 크림색 이름표 ═ */
:root[data-room="gallery"] .view>.stack>h1{font-size:clamp(2rem,5vw,3rem);color:#F4EEDD}
:root[data-room="gallery"] .view>.stack>p{color:#C9D7CF}
:root[data-room="gallery"] .mebar{background:#FBF7EC;--ink:#12352E;--ink-2:#4A635C;--ink-3:#5B6F68;--line:#E3D9C2;--paper:#FBF7EC;color:#12352E}
:root[data-room="gallery"] .mebar .btn.ghost{background:#fff}
.dex{gap:28px 16px}
:root[data-room="gallery"] .crit{background:linear-gradient(to bottom,transparent 0 158px,#F6EFDD 158px);box-shadow:0 18px 30px -22px rgba(0,0,0,.8);
  border-radius:10px;padding:10px 12px 16px;gap:4px;
  --ink:#2B2416;--ink-2:#5A4E37;--ink-3:#625640;--paper:#F6EFDD;--bg:#ECE2C8;--leaf:#2E6B4E;--leaf-weak:#E1EFE6;--plum:#6447B5;--plum-weak:#EEE9FB;--sun-weak:#FFF4CF;--pen:#5B3FB0;color:#2B2416}
:root[data-room="gallery"] .crit svg{width:104px;height:116px;padding:10px 10px 6px;margin-bottom:22px;
  border-radius:50% 50% 10px 10px/58% 58% 10px 10px;
  background:radial-gradient(120% 80% at 30% 18%,rgba(255,255,255,.42),rgba(255,255,255,.05) 45%,rgba(255,255,255,.12));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 6px 0 -1px #C9A24A,0 16px 0 -1px #4E3420,0 26px 20px -10px rgba(0,0,0,.7)}
/* 11-11 lb_vw 앱 점검: 생물 고유 그림(img.cr-img, 64px)이 유리 돔(svg 116px+받침 22px) 자리를 다 채우지 못해 이름이 어두운 배경 위로 올라가 안 보이던 것 → 그림도 돔과 같은 크기·받침으로 */
:root[data-room="gallery"] .crit img.cr-img{width:104px!important;max-width:104px!important;height:116px;padding:10px 10px 6px;margin-bottom:22px;box-sizing:border-box;object-fit:contain;
  border-radius:50% 50% 10px 10px/58% 58% 10px 10px!important;background:radial-gradient(120% 80% at 30% 18%,rgba(255,255,255,.9),rgba(255,255,255,.55) 45%,rgba(255,255,255,.7));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 6px 0 -1px #C9A24A,0 16px 0 -1px #4E3420,0 26px 20px -10px rgba(0,0,0,.7)}
:root[data-room="gallery"] .crit b{font-family:var(--label);font-size:1.08rem;margin-top:6px}
:root[data-room="gallery"] .crit.locked{background:linear-gradient(to bottom,transparent 0 158px,rgba(255,255,255,.05) 158px);box-shadow:inset 0 -1px 0 rgba(255,255,255,.12);
  --ink:#E8F1EC;--ink-2:#A9C0B8;--ink-3:#9DB3AB;--bg:rgba(255,255,255,.08);color:#E8F1EC}
:root[data-room="gallery"] .crit.locked svg{opacity:.75}
:root[data-room="gallery"] button.crit{box-shadow:0 18px 30px -22px rgba(0,0,0,.8),0 0 0 2px #B9A2FF}
:root[data-room="gallery"] .view>.stack>p.small{color:#C9D7CF}
:root[data-room="gallery"] .crit.locked .state.locked{color:#C9D7CF}

/* ═ 놀이마당(놀이·낱말·초등 문제 경주/방): 밤 등불 ═ */
:root[data-room="yard"] .view>.stack>h1{color:#FFF6E0}
:root[data-room="yard"] .view>.stack>:is(h1,p){text-shadow:0 0 12px #231C47,0 0 4px #231C47,0 1px 2px #231C47}
:root[data-room="yard"] .view>.stack>p{color:#E4DFF5}
:root[data-room="yard"] .theme{background:var(--paper);border:1px solid var(--line)}
:root[data-room="yard"] .stage{border:1px solid var(--line);box-shadow:var(--lift-hi)}
:root[data-room="yard"] .face{background:#FFFDF6;color:#12352E;--ink:#12352E;--ink-2:#4A635C;--plum-weak:#EEE9FB;--line:#E6DFC9}
:root[data-room="yard"] .face.back{background:#FFF4CF}
:root[data-room="yard"] .face .speak{color:#12352E}

/* ═ 서재(부모): 짙은 숲색 머리띠 + 황동 괘선, 리넨 바탕, 숫자는 명조 ═ */
:root[data-room="study"] .view>.stack>h1:first-child{font-size:clamp(1.9rem,4.5vw,2.6rem);color:#F4EEDD;background:#1F3A33;padding:4px 0 2px;
  box-shadow:0 0 0 100vmax #1F3A33;clip-path:inset(-100vmax -100vmax 0 -100vmax)}
:root[data-room="study"] .view>.stack>h1:first-child+p{color:#CFDCD4;background:#1F3A33;margin-top:-16px;padding:6px 0 26px;margin-bottom:12px;
  box-shadow:0 0 0 100vmax #1F3A33,0 3px 0 100vmax #B48A34;clip-path:inset(0 -100vmax -3px -100vmax)}
:root[data-room="study"] .sheet{box-shadow:0 1px 0 rgba(18,53,46,.04),0 14px 34px -24px rgba(18,53,46,.35)}
.report{border-top:0;box-shadow:var(--lift),inset 0 3px 0 var(--brass-line)}
.report .big{font-family:var(--label);font-weight:700;letter-spacing:-.01em}
.rblock{background:color-mix(in srgb,var(--bg) 70%,var(--paper))}
.billing{border-top:0;box-shadow:var(--lift),inset 0 3px 0 var(--ink)}
:root[data-room="study"] .bars span{background:color-mix(in srgb,var(--leaf) 55%,var(--paper))}
:root[data-room="study"] .bars div:last-child span{background:var(--leaf)}

/* ═ 연구실(선생님): 제도판 모눈, 납작한 도구 ═ */
:root[data-room="lab"]{--bg:#F1F6F8}
:root[data-room="lab"][data-theme="dark"]{--bg:#0F2321}
@media (prefers-color-scheme:dark){:root[data-room="lab"]:not([data-theme="light"]){--bg:#0F2321}}
:root[data-room="lab"] .sheet,:root[data-room="lab"] .unit,:root[data-room="lab"] .stu{box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 90%,transparent),0 10px 24px -20px rgba(18,53,46,.35)}
.tabs{border-bottom:0;padding:4px;gap:2px;width:fit-content;max-width:100%;border-radius:var(--r-chip);background:color-mix(in srgb,var(--paper) 70%,transparent);border:1px solid var(--line)}
.tab{min-height:40px;border-radius:var(--r-chip)}
@media (max-width:599px){.tabs{border-radius:22px}}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.tab[aria-selected="true"] .cnt{background:var(--paper);color:var(--ink)}
.cat-row .btn.add:not(.ghost):not(.quiet){background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.stu .av{font-family:var(--ui);font-weight:800;background:var(--leaf-weak);color:var(--leaf)}
.stu[aria-pressed="true"]{box-shadow:0 0 0 2px var(--leaf),inset 6px 0 0 var(--leaf)}
.seg{box-shadow:inset 0 0 0 1px var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ═ 인쇄 종이(학습지·보충 지도·종이 채점): 배경 없음, 로고 칸 없앰 ═ */
.ws-logo{display:none}
/* QR: 한 칸이 정확히 3px·2px이 되게(29칸) — 84px(2.9px/칸)일 때 소수점 위치에서 칸이 뭉개져 화면 해독이 가끔 실패 */
.ws-code .qr[width="84"]{width:87px;height:87px}
.ws-code .qr[width="64"]{width:58px;height:58px}
.ws-head{grid-template-columns:1fr auto}
@media (max-width:599px){.ws-head{grid-template-columns:minmax(0,1fr)}}
:root[data-room="paper"]{--bg:#EEF0EC}
:root[data-room="paper"][data-theme="dark"]{--bg:#0F2321}
@media (prefers-color-scheme:dark){:root[data-room="paper"]:not([data-theme="light"]){--bg:#0F2321}}
@media print{.room{display:none!important}}

/* ═ 어둡게 보는 방에서 남은 밝은 고정색 정리 ═ */
:root:is([data-theme="dark"],[data-room="gallery"],[data-room="yard"],[data-room="observatory"],[data-room="camp"][data-time="night"]) .pill{background:rgba(255,255,255,.06)}

/* 움직임 줄이기: 방 배경 솟아오름도 끔 */
@media (prefers-reduced-motion:reduce){.room .layer{animation:none!important;transform:none!important;opacity:1!important}}

@media (prefers-reduced-motion:reduce){
  .mark .draw{stroke-dashoffset:0!important;animation:none!important}
  .choice[aria-pressed="true"]{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .creature-bob,.zz,.pet svg.big{animation:none!important}
  .btn:active{transform:none!important}
}

/* ═══════════ demo_en (2026-11-09 영어 데모) — 기존 토큰만 씀 ═══════════ */
.en-only{margin:0}
.en-cr{display:block;filter:hue-rotate(var(--hue,0deg))}
.en-cr svg{width:100%;height:auto}
.scene-wait{display:grid;justify-items:center;gap:6px;text-align:center;padding:22px 16px;border:2px dashed var(--line);border-radius:var(--r-card);background:var(--bg);min-height:200px;align-content:center}
.scene-wait>span:first-child{width:84px;display:block;opacity:.85}
.talk .spk{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--sun-weak);font-family:var(--display);font-size:.78rem;text-align:center;line-height:1.1;overflow-wrap:anywhere;padding:4px}
.sm-speak{min-height:34px;padding:4px 10px}
.notice.detour{border-left:4px solid var(--sun-deep)}
.en-down{display:grid;gap:10px}
@media (min-width:700px){.en-down{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}
.todo.down-pick{text-align:left;cursor:pointer;font:inherit;color:inherit;display:grid;gap:4px;border:1.5px solid var(--line)}
.todo.down-pick:hover{border-color:var(--sel)}
.prepost{display:flex;align-items:center;justify-content:center;gap:18px;font-size:1.6rem}
.prepost>div{display:grid;justify-items:center;gap:2px}
.prepost b{font-size:2rem}
.en-plan{margin:0;padding-left:1.4em;display:grid;gap:6px}
.en-plan-line{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.en-plan-line .pill{color:#E6EAF2;text-decoration:none}
.lv-where{gap:8px;align-items:center}
.lv-table{width:100%;border-collapse:collapse}
.lv-table td{padding:6px 4px 6px 0;border-top:1px dashed var(--line);vertical-align:top}
.lv-table td.r{text-align:right;white-space:nowrap}
.lv-table tr.tot td{border-top:1.5px solid var(--line)}
.stars-head h1{font-size:clamp(1.5rem,3.4vw,2.1rem)}
.star-band summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.star-band summary::-webkit-details-marker{display:none}
.stars{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.star{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 12px 6px 8px;border-radius:var(--r-chip);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:.86rem;cursor:pointer;text-align:left}
.star span{overflow-wrap:anywhere}
.star i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--line)}
.star.st-pass i,.star.st-guess i{background:var(--ok);box-shadow:0 0 0 3px var(--ok-weak)}
.star.st-guess i{background:transparent;border:2px dashed var(--ok)}
.star.st-start{border-color:var(--sun-deep);background:var(--sun-weak)}
.star.st-start i{background:var(--sun-deep)}
.star.st-learning i{background:var(--fill)}
.star.st-review i{background:var(--sleep)}
.star.st-fail i{background:var(--no)}
.star[aria-current="true"]{outline:2.5px solid var(--sel);outline-offset:1px}
.star-det{border-left:4px solid var(--sel)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--pen);text-decoration:underline;cursor:pointer}
.conf-b{display:inline-block;font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:var(--r-chip);vertical-align:1px}
.conf-b.match{background:var(--ok-weak);color:var(--ok)}
.conf-b.cand{background:var(--sun-weak);color:var(--ink-2);border:1px dashed var(--line)}
.en-found .cat-list{max-height:none}
.en-path .u{text-decoration:none}
.pet .en-cr>svg.cr{filter:hue-rotate(var(--hue,0deg)) drop-shadow(0 14px 10px rgba(20,61,58,.25))}

/* ═ 영어 모의고사 (11-11 lb_vw) ═ */
.acc-role{margin:14px 0 6px;font-size:1rem}
.mk-cards{display:grid;gap:14px}
@media (min-width:900px){.mk-cards{grid-template-columns:1fr 1fr}}
.mk-card.rec{box-shadow:var(--lift),inset 0 0 0 2px var(--leaf)}
.mk-bar{position:sticky;top:72px;z-index:5;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;background:var(--paper);border-radius:var(--r-card);box-shadow:var(--lift);padding:10px 14px}
.mk-time{font-weight:800;font-size:1.05rem}
.btn.sm{padding:6px 12px;font-size:.9rem;min-height:0}
.mk-omr{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:4px}
.mk-o{display:grid;justify-items:center;border:1px solid var(--line);border-radius:8px;padding:2px 0;text-decoration:none;color:inherit;font-size:.8rem;background:var(--paper)}
.mk-o b{min-height:1.2em;font-size:1rem;color:var(--pen)}
.mk-set{font-weight:700}
.mk-q{display:grid;gap:8px;padding-top:6px;scroll-margin-top:170px}
.mk-q+.mk-q{border-top:1px dashed var(--line);padding-top:12px}
.mk-psg,.mk-given{white-space:pre-line;line-height:1.75}
.mk-given{border:1.5px solid var(--ink-3,#777);border-radius:8px;padding:10px 12px}
.mk-psg u,.mk-given u,.mk-c u{text-underline-offset:3px}
.mk-ch{display:grid;gap:6px}
.mk-ch.circ{grid-template-columns:repeat(5,minmax(44px,64px))}
.mk-c{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:inherit;padding:8px 12px;font:inherit;cursor:pointer;min-height:44px}
.mk-ch.circ .mk-c{justify-content:center;padding:8px 0}
.mk-c .k{font-weight:800;flex:none}
.mk-c.on{border-color:var(--pen);background:var(--plum-weak,#EEE9FB);box-shadow:inset 0 0 0 1px var(--pen)}
.mk-c.ok{border-color:var(--leaf);background:var(--leaf-weak)}
.mk-c.no{border-color:#C8415E;background:#FBE9ED}
.mk-c:disabled{cursor:default;opacity:1}
.mk-score{font-size:1.2rem}.mk-score b.num{font-size:3rem;line-height:1}
.mk-con{display:grid;gap:10px;padding-left:20px}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px}
.mk-cell{display:grid;justify-items:center;border:1px solid var(--line);border-radius:8px;padding:4px 2px;font-size:.85rem}
.mk-cell.ok{background:var(--leaf-weak)}.mk-cell.no{background:#FBE9ED}
.print-only{display:none}
@media print{
  .print-only{display:block}
  .mk-bar,.mk-omr{display:none!important}
  .mk-grp,.mk-key{break-inside:avoid-page;box-shadow:none!important;border:1px solid #ccc}
  html.print-note .mk-res>*:not(.mk-note){display:none!important}
  .mk-c{border:1px solid #999!important;background:#fff!important}
  .mk-c.ok{font-weight:800}.mk-c.no{text-decoration:line-through}
}

/* ═ 최종 점검(11-11): 생성형 AI 표시 · 문제 신고 ═ */
.ai-foot{margin:28px auto 96px;max-width:1100px;padding:0 16px;text-align:center;font-size:.78rem}
@media (min-width:900px){.ai-foot{margin-bottom:28px}}
.ai-line{margin-top:-4px}
.issue-row{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:4px}
.issue-btn{border:0;background:none;color:var(--ink-3,#777);font:inherit;font-size:.82rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 4px;min-height:32px}
.issue-btn:hover{color:var(--ink)}
.issue-modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px}
.issue-box{width:min(460px,100%);max-height:90vh;overflow:auto}
@media print{.issue-row,.issue-btn,.store-warn{display:none!important}.ai-foot{margin:8px 0}}
/* 11-12 선생님 화면: 학생 누르면 맨 위 '오늘 수업'(수업본 인쇄)·현황 */
.t-today{border:2px solid var(--leaf, #2f6f5e)}
.t-today h2{font-size:1.25rem;margin:0}
.t-today-name{font-size:1.15rem;line-height:1.45;margin:0}
.t-today-act{display:grid;gap:8px}
@media (min-width:600px){.t-today-act{grid-template-columns:1fr 1fr}.t-today-act #tdHw{grid-column:1/-1}}
.t-today-act .btn{min-height:52px;justify-content:center;text-align:center}
.td-alts summary,.more-stu summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:6px}
.td-alts .td-alt{justify-content:flex-start;text-align:left;width:100%}
.t-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){.t-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.t-stats>div{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--sun-weak)}
.t-stats b{font-size:1.25rem}
@media (max-width:899px){
  .t-stu .stu-list{display:flex;flex-direction:row;overflow-x:auto;gap:8px;padding:2px 2px 8px;scroll-snap-type:x proximity}
  .t-stu .stu-list .stu{flex:0 0 auto;width:auto;min-width:200px;max-width:240px;scroll-snap-align:start;grid-template-columns:40px 1fr;padding:10px 12px}
  .t-stu .stu-list .stu .av{width:40px;height:40px;font-size:1rem}
  .t-stu .stu-list .stu>span:last-child:not(:nth-child(2)){display:none}
  .t-stu .stu[aria-pressed="true"]{outline:3px solid var(--leaf, #2f6f5e);outline-offset:-3px}
}
.t-stu .stu[aria-pressed="true"]{outline:3px solid var(--leaf, #2f6f5e);outline-offset:-3px}
.t-stu .stu-list{scroll-margin-top:96px}
/* 11-12 advisor: 휴대폰 학생 줄 = 이름·학년만 작은 칸, 줄바꿈(한 줄 3명) */
.stu-dot{display:none}
@media (max-width:899px){
  .t-stu .stu-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding:0}
  .t-stu .stu-list .stu{min-width:0;max-width:none;width:100%;grid-template-columns:1fr;padding:8px 10px;gap:0;text-align:center;position:relative}
  .t-stu .stu-list .stu .av,.t-stu .stu-list .stu-more,.t-stu .stu-list .stu-hw,.t-stu .stu-list .plan-badge{display:none}
  .t-stu .stu-list .stu b{font-size:1rem}
  .t-stu .stu-dot{display:block;position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:#C2410C}
}
/* 11-12 달리기 경주 재설계: 무대 붙박이·허들 넘기·넘어짐·출발 */
.race-stage{position:sticky;top:64px;z-index:12;box-shadow:0 6px 16px -10px rgba(0,0,0,.45)}
.race-say{margin:0;padding:6px 12px 8px;font-weight:700;color:var(--ink);background:var(--paper)}
.race-stage .runner,.race-stage .pacer{transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.race-stage .hurdle{transition:opacity .3s}
.race-stage .hurdle.done{opacity:.35}
.race-stage .runner.jump .rbody{animation:rjump .6s ease-out}
@keyframes rjump{0%{transform:translateY(0)}45%{transform:translateY(-34px)}100%{transform:translateY(0)}}
.race-stage.go .dash{animation:rdash .6s linear 1}
@keyframes rdash{to{stroke-dashoffset:-64}}
.race-stage .runner.trip .rbody{animation:rtrip .5s ease-in-out;transform-box:fill-box;transform-origin:50% 100%}
@keyframes rtrip{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg) translateX(-4px)}60%{transform:rotate(8deg)}}
.race-stage .hurdle.knock rect{animation:rknock .5s ease-out forwards;transform-box:fill-box;transform-origin:0 100%}
@keyframes rknock{to{transform:rotate(-35deg)}}
.race-stage .ready{animation:rready 1s ease-out forwards;pointer-events:none}
@keyframes rready{0%,55%{opacity:1}100%{opacity:0}}
body.in-game .nav{display:none}
body.in-game #main{padding-bottom:24px}
body.in-game:not(.vbar-open) .vbar{display:none}
.vtoggle{display:none}
body.in-game .vtoggle{display:inline-flex;align-self:flex-start;border:1px solid var(--line);background:var(--paper);color:var(--ink-2,var(--ink));border-radius:10px;padding:8px 12px;font-size:.85rem;min-height:40px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.race-stage .runner,.race-stage .pacer{transition:none}.race-stage *{animation:none!important}.race-stage .ready{display:none}}
@media (max-width:599px){.race-stage{top:60px}}
.ul{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* 11-12 로그인 예시 칩·자동 평가·로드맵 */
.acc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.acc-tags i{font-style:normal;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--leaf-weak,#E1EFE6);color:var(--leaf,#2E6B4E)}
.ev-top{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:stretch}
.ev-big{display:grid;place-items:center;padding:10px 16px;border-radius:12px;background:var(--leaf-weak,#E1EFE6);min-width:110px}
.ev-big b{font-size:2rem;line-height:1}.ev-big span{font-size:.8rem}
.ev-pace{display:grid;align-content:center;gap:2px;padding:10px 14px;border-radius:12px;border:1px solid var(--line)}
.ev-pace b{font-size:1.1rem}.ev-pace span{font-size:.82rem;color:var(--ink-3,#5b6b66)}
.ev-ahead b{color:#1F7A4D}.ev-late b{color:#B45309}.ev-late2 b{color:#B91C1C}
.ev-bar{position:relative;height:12px;border-radius:6px;background:var(--line,#dfe6e2);overflow:visible}
.ev-bar i{display:block;height:100%;border-radius:6px;background:var(--leaf,#2E6B4E)}
.ev-bar em{position:absolute;top:-4px;width:3px;height:20px;background:#B45309;border-radius:2px;transform:translateX(-1px)}
.ev-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.ev-parts>div{display:grid;gap:1px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.road-g{display:flex;flex-wrap:wrap;gap:6px}
.road-g .chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 12px;min-height:36px;font-weight:700;cursor:pointer}
.road-g .chip[aria-pressed="true"]{background:var(--leaf,#2E6B4E);color:#fff;border-color:transparent}
.road{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.road>li{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start}
.road-m{position:sticky;top:72px;font-size:1rem}
.road-items{display:grid;gap:6px;border-left:3px solid var(--line);padding-left:12px}
.road-it{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.road-it .here{display:inline-block;margin-left:4px;font-size:.72rem;font-weight:800;padding:1px 7px;border-radius:999px;background:#FDE68A;color:#713F12}
.ev-wait b{color:var(--ink-3,#5b6b66)}
.stu-add{border:1px dashed var(--line)!important;box-shadow:none!important}
.stu-add .av{background:var(--leaf-weak,#E1EFE6)!important;color:var(--leaf,#2E6B4E)}
@media (max-width:899px){.t-stu .stu-list .stu-add .av{display:none}}
.add-form{grid-column:1/-1}
/* 11-12: 학생 추가 칸은 '학생 추가'를 눌렀을 때만(.stack 의 display 가 [hidden] 을 덮던 것) · 입력칸 넘침 */
.add-form[hidden]{display:none!important}
.add-form .field input,.add-form .field select{width:100%;max-width:100%;box-sizing:border-box}
.todo{position:relative}
.now-tag{position:absolute;top:10px;right:10px;font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--press-c,#2E6B4E);color:#fff}
/* 11-12 개념 지도(별자리) 새 화면 */
.cm-tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
.cm-tools .seg{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:10px;padding:2px;background:var(--paper)}
.cm-tools .seg button{border:0;background:transparent;padding:6px 12px;min-height:36px;border-radius:8px;font-weight:700;cursor:pointer;color:var(--ink)}
.cm-tools .seg button[aria-pressed="true"]{background:var(--leaf,#2E6B4E);color:#fff}
.cm-tools .seg span{padding:0 6px}
.cm-wrap{display:grid;gap:16px;align-items:start}
@media (min-width:900px){.cm-wrap{grid-template-columns:minmax(0,1fr) 340px}.cm-det{position:sticky;top:84px;max-height:calc(100vh - 110px);overflow:auto}}
.cm-map{font-size:calc(1rem * var(--z,1));display:grid;gap:18px}
.cm-band{display:grid;gap:12px}
.cm-band>h2{font-size:1.15em;margin:0;padding-bottom:6px;border-bottom:2px solid var(--line)}
.cm-topic{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.cm-topic h3{font-size:.95em;margin:0 0 8px}
.cn-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cn-arr{color:var(--ink-3,#7b8a85);font-size:.9em}
.cn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);font-size:.9em;line-height:1.3;cursor:pointer;text-align:left;color:var(--ink);max-width:100%}
.cn i{width:10px;height:10px;border-radius:50%;flex:none;background:var(--line)}
.cn.st-pass i{background:var(--ok)}.cn.st-guess i{background:transparent;border:2px dashed var(--ok)}
.cn.st-learning i{background:var(--fill,#f2b84b)}.cn.st-fail i{background:var(--no)}.cn.st-start i{background:var(--ink)}
.cn.st-pass{background:var(--ok-weak,#e6f4ea)}
.cn.rv-wrong{border-color:var(--no,#c0392b)}.cn.rv-due{border-color:#B45309}.cn.rv-slow{border-style:dashed;border-color:#B45309}
.cn[aria-pressed="true"]{outline:3px solid var(--leaf,#2E6B4E);outline-offset:1px}
.rv-grp{display:grid;gap:6px}.rv-grp h3{font-size:.95rem;margin:0}
.cm-det h3{margin:4px 0 0;font-size:1.1rem}
.cm-ex{padding:8px 10px;border-radius:8px;background:var(--sun-weak,#FFF4CF);white-space:pre-line}
.cm-empty{color:var(--ink-3,#5b6b66)}
@media (max-width:899px){
  .cm-det{position:fixed;left:8px;right:8px;bottom:8px;z-index:30;max-height:46vh;overflow:auto;box-shadow:0 -8px 24px -8px rgba(0,0,0,.35);display:none}
  .cm-det.open{display:grid}
  .cm-map{padding-bottom:46vh}
}
/* 11-12 개념 지도 2: 학년 구분·접기·바로가기 */
.cm-band{--bc:#2E6B4E;--bw:#E1EFE6;border:2px solid var(--bc);border-radius:14px;background:var(--paper);overflow:clip}
.bk-0{--bc:#C2410C;--bw:#FDE9DD}.bk-1{--bc:#B45309;--bw:#FDF0D5}.bk-2{--bc:#2E6B4E;--bw:#E1EFE6}.bk-3{--bc:#1D4ED8;--bw:#E0E9FB}.bk-4{--bc:#6D28D9;--bw:#EDE5FB}.bk-5{--bc:#BE185D;--bw:#FBE3EE}
.cm-bh{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:12px 16px;background:var(--bc);color:#fff;position:sticky;top:64px;z-index:5}
.cm-bh::-webkit-details-marker{display:none}
.cm-bt{display:grid;line-height:1.2}.cm-bt b{font-size:1.25rem}.cm-bsub{font-size:.75rem;opacity:.85}
.cm-bprog{height:8px;border-radius:4px;background:rgba(255,255,255,.3);overflow:hidden}.cm-bprog i{display:block;height:100%;background:#fff}
.cm-bnum{font-size:.82rem;white-space:nowrap}.cm-bnum em{font-style:normal;font-weight:800;background:#fff;color:var(--bc);padding:1px 7px;border-radius:999px;margin-left:2px}
.cm-chev{transition:transform .2s}.cm-band:not([open]) .cm-chev{transform:rotate(-90deg)}
.cm-topics{display:grid;gap:10px;padding:14px;background:var(--bw)}
@media (min-width:1100px){.cm-topics{grid-template-columns:1fr 1fr}}
.cm-band .cm-topic{background:var(--paper);border-color:color-mix(in srgb,var(--bc) 25%,var(--line))}
.cm-band .cm-topic h3{color:var(--bc)}
.cm-jump{display:flex;flex-wrap:wrap;gap:6px}
.cm-jump button{border:0;border-radius:999px;padding:6px 14px;min-height:36px;font-weight:800;color:#fff;background:var(--bc);cursor:pointer}
@media (max-width:599px){.cm-bh{grid-template-columns:auto 1fr auto;top:60px}.cm-bprog{display:none}.cm-bt b{font-size:1.1rem}}
:root[data-theme="dark"] .cm-topics{background:color-mix(in srgb,var(--bc) 18%,var(--paper))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cm-topics{background:color-mix(in srgb,var(--bc) 18%,var(--paper))}}
/* 11-12 오늘 화면 큰 카드: 옛 상자 지도 대신 '복습할 개념' 목록 */
.hero-rv{display:grid;gap:10px;margin:8px 0 4px;padding:14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.hero-rv h3{margin:0;font-size:1.05rem}
.hero-rv-list{display:grid;gap:8px}
@media (min-width:700px){.hero-rv-list{grid-template-columns:1fr 1fr}}
.hrv{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.08);color:inherit;text-decoration:none;border:1.5px solid rgba(255,255,255,.18);min-height:52px}
.hrv:hover{background:rgba(255,255,255,.14)}
.hrv-tag{font-size:.75rem;padding:2px 8px;border-radius:999px;color:#fff;white-space:nowrap}
.hrv.rv-wrong .hrv-tag{background:#C2410C}.hrv.rv-due .hrv-tag{background:#B45309}.hrv.rv-slow .hrv-tag{background:#6D28D9}
.hrv i{font-style:normal;font-size:1.3rem;opacity:.7}
/* 11-12 오늘 화면: 왼쪽 오늘 진도 / 오른쪽 복습 */
.hero-split{display:grid;gap:18px}
@media (min-width:900px){.hero-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
.hs-learn{display:grid;gap:10px;align-content:start}
.hs-learn h1{margin:4px 0 0}
.hs-sub{opacity:.8}
.hs-rev{display:grid;gap:10px;padding:14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.hs-rev h3{margin:0;font-size:1.05rem}
.hs-rev .hero-rv-list{grid-template-columns:1fr}
.mfig{display:block;max-width:100%;height:auto;margin:6px auto}
.figrow .mfig{max-width:360px}
.katex{font-size:1.05em}
.cm-subj{display:inline-flex;vertical-align:middle;margin-left:10px;gap:2px;border:1px solid var(--line);border-radius:10px;padding:2px;font-size:.9rem}
.cm-subj button{border:0;background:transparent;padding:6px 12px;border-radius:8px;font-weight:700;cursor:pointer;color:inherit}
.cm-subj button[aria-pressed="true"]{background:var(--leaf,#2E6B4E);color:#fff}