/* 새 앱 — 우주 탐험. 배운 것(10/2 시안): 색 수를 줄이고 검정 여백을 넓게. 질문은 밝은 카드에서 읽는다. */
:root{
  --sky:#0c1022; --sky2:#141a33; --line:#252d4d; --ink:#eef1f8; --sub:#9aa3c0;
  --gold:#f2c45f; --blue:#8fb2ff; --paper:#fbfaf6; --pink:#ff9fb4; --ok:#5fcfa0; --warn:#ff9a7a;
  --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--sky);color:var(--ink);font:16px/1.55 Pretendard,"Malgun Gothic",system-ui,sans-serif;
  background-image:radial-gradient(1px 1px at 12% 22%,#ffffff55 50%,transparent 51%),radial-gradient(1px 1px at 78% 12%,#ffffff40 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 62% 68%,#ffffff35 50%,transparent 51%),radial-gradient(1px 1px at 32% 84%,#ffffff30 50%,transparent 51%),
  radial-gradient(1px 1px at 90% 54%,#ffffff35 50%,transparent 51%);background-attachment:fixed}
#app{max-width:760px;margin:0 auto;padding:0 16px calc(28px + env(safe-area-inset-bottom,0px))}
main{padding-top:6px}
main.center{min-height:80vh;display:flex;align-items:center;justify-content:center}
.loading{padding:40vh 0;text-align:center;color:var(--sub)}
.ver{position:fixed;right:8px;bottom:6px;font-size:11px;color:#5a6488}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:disabled{opacity:.35;cursor:default}
.primary{background:var(--gold);color:#241a00;font-weight:700;border-radius:14px;padding:12px 22px}
.primary.big{display:block;width:100%;padding:16px 20px;font-size:18px}
.secondary{border:1.5px solid var(--line);border-radius:14px;padding:12px 20px;color:var(--ink);background:var(--sky2)}
.ghost{color:var(--sub);padding:8px 10px;border-radius:10px}.ghost:hover{color:var(--ink)}
.small{font-size:14px}
.sub{color:var(--sub);font-size:14px}
.chip{display:inline-block;font-size:13px;color:var(--gold);border:1px solid #f2c45f55;border-radius:99px;padding:1px 10px}
.code{font-size:12.5px;letter-spacing:.06em;color:var(--blue);font-weight:600}

/* 위 줄 */
.bar{display:flex;align-items:center;gap:8px;min-height:56px;padding-top:env(safe-area-inset-top,0px)}
.bar .logo{font-weight:800;letter-spacing:.02em}
.bar .crumb{flex:1;min-width:0;text-align:center;color:var(--sub);font-size:13.5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .who{min-width:0}

/* 로그인 */
.login{width:100%;max-width:380px;display:grid;gap:14px}
.login .title{text-align:center;margin-bottom:10px}.login .mark{font-size:34px;color:var(--gold)}
.login h1{margin:4px 0 2px;font-size:30px}.login p{margin:0;color:var(--sub)}
.login label{display:grid;gap:6px;font-size:14px;color:var(--sub)}
.login input{font:inherit;color:var(--ink);background:var(--sky2);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px}
.login input:focus{outline:none;border-color:var(--gold)}
.msg{min-height:22px;text-align:center;color:var(--warn);font-size:14px}

/* 친구 */
.buddy{width:150px;aspect-ratio:1;display:flex;align-items:flex-end;justify-content:center}
.buddy img{max-width:100%;max-height:100%;animation:breath 3.6s ease-in-out infinite;transform-origin:50% 100%}
.buddy.mini{width:84px}
.buddy[data-state=praise] img{animation:hop .7s ease-out 1,breath 3.6s 1s ease-in-out infinite}
.buddy[data-state=listening] img{animation:nod 1.1s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.025) translateY(-1.5%)}}
@keyframes hop{0%{transform:translateY(0)}35%{transform:translateY(-16%)}70%{transform:translateY(0)}85%{transform:translateY(-4%)}100%{transform:translateY(0)}}
@keyframes nod{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg)}}
.pick{text-align:center}.pick h2{font-size:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:18px 0}
.fcard{background:var(--sky2);border:1.5px solid var(--line);border-radius:var(--r);padding:12px;display:grid;gap:6px;justify-items:center}
.fcard img{width:100%;aspect-ratio:1;object-fit:contain}.fcard:hover{border-color:var(--gold)}

/* 은하(홈) */
.hero{display:flex;align-items:flex-end;gap:12px;margin:8px 0 14px}
.bubble{position:relative;background:var(--sky2);border:1px solid var(--line);border-radius:16px;padding:12px 16px;margin-bottom:24px;max-width:420px}
.go{margin:0 0 26px;text-align:left}.go>span{display:block}.go .tm{display:inline}.go small{display:block;font-weight:500;font-size:14px;opacity:.8;margin-top:2px}
.done-all{color:var(--gold);text-align:center;padding:18px;border:1px dashed #f2c45f55;border-radius:var(--r);margin-bottom:26px}
.sect{font-size:13px;letter-spacing:.14em;color:var(--sub);font-weight:600;margin:0 0 10px}
.galaxy{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.starbtn{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto auto;column-gap:12px;text-align:left;background:var(--sky2);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.starbtn:hover{border-color:#3a4677}
.star{grid-row:1/4;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--h) calc(30% + var(--lit)*70%),transparent) 0 35%,transparent 70%)}
.star i{width:18px;height:18px;border-radius:50%;background:var(--h);box-shadow:0 0 calc(6px + var(--lit)*22px) var(--h);opacity:calc(.45 + var(--lit)*.55)}
.starbtn .nm{font-weight:700;line-height:1.3}.starbtn .chip{justify-self:start;margin-top:4px}

/* 별(대단원) */
.ttl{display:grid;gap:2px;font-size:22px;margin:6px 0 14px}
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.tab{border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:14px;color:var(--sub);background:var(--sky2)}
.tab.on{background:var(--gold);color:#241a00;border-color:var(--gold);font-weight:700}
.planets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.planet{display:grid;justify-items:center;text-align:center;gap:4px;padding:14px 8px;border-radius:var(--r);background:var(--sky2);border:1px solid var(--line)}
.planet .nm{font-weight:600;font-size:14.5px;line-height:1.3}.planet .cnt{font-size:12.5px;color:var(--sub)}
.orb{width:58px;height:58px;border-radius:50%;margin-bottom:4px;
  background:radial-gradient(circle at 34% 30%,#ffffff40 0 8%,transparent 30%),radial-gradient(circle at 60% 65%,color-mix(in srgb,var(--p) 55%,#000) 0,color-mix(in srgb,var(--p) 30%,#000) 70%);
  box-shadow:inset -10px -8px 16px #0008;filter:saturate(.35) brightness(.6);transition:.4s}
.planet.half .orb{filter:saturate(.8) brightness(.85)}
.planet.lit .orb{filter:none;background:radial-gradient(circle at 34% 30%,#ffffffa0 0 8%,transparent 30%),radial-gradient(circle at 60% 65%,var(--p),color-mix(in srgb,var(--p) 55%,#000) 80%);box-shadow:inset -10px -8px 16px #0006,0 0 22px color-mix(in srgb,var(--p) 60%,transparent)}
.orb.big{width:120px;height:120px;filter:none}

/* 행성 입구 · 끝 */
.entry,.center-msg{display:grid;justify-items:center;text-align:center;gap:10px;padding:26px 0}
.entry h2,.center-msg h2{margin:0;font-size:24px}
.entry .primary.big,.center-msg .primary.big{max-width:360px;margin-top:10px}
.entry .prep{margin:0;font-size:14.5px;color:var(--gold);background:#f2c45f14;border:1px solid #f2c45f40;border-radius:12px;padding:7px 14px}
.unlock{color:var(--gold);border:1px solid #f2c45f66;border-radius:12px;padding:10px 16px}

/* 질문 */
.qtop{display:flex;align-items:center;gap:12px;margin:2px 0 10px}
.dots{display:flex;gap:5px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.dots i.d{background:var(--gold)}.dots i.c{background:var(--blue)}
.timer{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}.timer b{display:block;height:100%;width:100%;background:var(--blue);transition:width .25s linear}
.timer.low b{background:var(--warn)}
.timer.off{visibility:hidden}
.qstage{display:flex;align-items:flex-start;gap:10px}
.qcard{flex:1;min-width:0;background:var(--paper);color:#1d2233;border-radius:var(--r);padding:18px 18px 14px;box-shadow:0 10px 40px #0007}
.qcard .q{font-size:19px;font-weight:600;line-height:1.6}
.qcard .pre{font-size:12.5px;color:#2f7a53;font-weight:600;margin-bottom:6px}
.figbox{margin:12px 0 2px;display:flex;justify-content:center;background:#fff;border-radius:12px;padding:8px;overflow-x:auto}
.figbox svg{max-width:100%;height:auto}
.say:empty{display:none}
.sbubble{margin-top:12px;border-radius:12px;padding:10px 12px;background:#eef2fb;color:#253055;font-size:15.5px}
.sbubble.hint{background:#fff4dc;color:#5a4100}.sbubble.ok{background:#e4f7ee;color:#165c3d}.sbubble.warn{background:#ffe9e2;color:#7a2b15}
.sbubble.expl{background:#f3f0ff;color:#2f2665}.expl{line-height:1.7}
.kw{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:4px;vertical-align:middle}.kw span{background:#fff;border:1px solid #e7c27a;border-radius:99px;padding:1px 10px;font-size:14.5px}
.answer{margin-top:16px}
.prompt{color:var(--sub);text-align:center;min-height:6px;font-size:14.5px}
.live{min-height:52px;text-align:center;font-size:18px;padding:8px 6px;color:var(--ink)}
.tr textarea{width:100%;font:inherit;font-size:17px;color:#1d2233;background:var(--paper);border:0;border-radius:12px;padding:12px}
.row{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:10px}
.mic{width:84px;height:84px;border-radius:50%;background:var(--gold);position:relative;box-shadow:0 0 0 0 #f2c45f66}
.mic span{position:absolute;inset:28px 33px;border-radius:12px;background:#241a00}
.mic.on{animation:pulse 1.3s ease-out infinite;background:#ff8a8a}
.mic.wait{animation:none;background:#9aa6bd}   /* CLOVA 마지막 말 조각을 기다리는 동안 */
.tcost{width:100%;border-collapse:collapse;font-size:14px}.tcost td{padding:7px 4px;border-top:1px solid var(--line)}.tcost td:last-child{text-align:right;white-space:nowrap}.tcost td:nth-child(2){color:var(--sub)}   /* 선생님 💰 AI 비용 */
@keyframes pulse{0%{box-shadow:0 0 0 0 #ff8a8a88}100%{box-shadow:0 0 0 22px #ff8a8a00}}
.thinking{text-align:center;color:var(--sub);padding:22px}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
.helps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.hbtn{display:grid;gap:2px;text-align:left;background:var(--sky2);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px}
.hbtn:hover{border-color:var(--gold)}.hbtn small{color:var(--sub)}.hbtn.plain{border-style:dashed}
.result{display:grid;gap:12px;background:var(--sky2);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.score{font-size:44px;font-weight:800;color:var(--gold);text-align:center;line-height:1}.score small{font-size:18px;margin-left:2px}.score.small{font-size:22px}
.keys{list-style:none;margin:0;padding:0;display:grid;gap:4px}.keys li{color:var(--sub)}.keys li.hit{color:var(--ok)}
.model{background:#0000001f;border-radius:12px;padding:10px 12px}.model b{display:block;font-size:13px;color:var(--gold);margin-bottom:2px}
.toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,20px);opacity:0;background:var(--sky2);border:1px solid var(--line);border-radius:12px;padding:10px 16px;transition:.35s}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:520px){.qstage .buddy.mini{display:none}.qcard .q{font-size:18px}.buddy{width:120px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── 첫 화면(로그인) — 우주 수배: 퉁구리 ── */
body.intro-on #app{max-width:none;padding:0}
body.intro-on .ver{z-index:5}
.lg{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(26px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(60% 42% at 50% 34%,#163a4f 0,#0f1d3a55 45%,transparent 75%),radial-gradient(40% 30% at 82% 70%,#3a1f5c66 0,transparent 70%),
    radial-gradient(35% 26% at 12% 80%,#0f3b4c55 0,transparent 70%),#070a18}
.lg-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lg>*:not(.lg-sky){position:relative;z-index:1}
/* 쫓고 쫓기는 무대(마스터 10/12): 왼쪽 뚜삐가 달려오고, 오른쪽 퉁구리가 놀리다 쌩 달아난다. 두 움직임은 같은 7초 주기 */
.lg-run{width:min(520px,100%);height:clamp(190px,50vw,260px);margin:10px auto 0}
.lg-tw{position:absolute;right:0;bottom:6%;width:50%;animation:lgFlee 7s ease-in-out infinite}
.lg-dw{position:absolute;left:0;bottom:4%;width:27%;animation:lgChase 7s ease-in-out infinite}
.lg-tung{display:block;width:100%;filter:drop-shadow(0 14px 20px #000a) drop-shadow(0 0 22px #5fe0c044);cursor:pointer;
  animation:lgFloat 2.6s ease-in-out infinite;transform-origin:50% 80%;-webkit-tap-highlight-color:transparent}
.lg-dd{display:block;width:100%;filter:drop-shadow(0 10px 12px #0009) drop-shadow(0 0 16px #ffd84a44);cursor:pointer;
  animation:lgRunhop .38s ease-in-out infinite alternate;transform-origin:50% 90%;-webkit-tap-highlight-color:transparent}
.lg-dw::before{content:"";position:absolute;left:-26%;top:38%;width:34%;height:30%;opacity:.7;
  background:linear-gradient(90deg,transparent,#fff8) 0 0/100% 2px no-repeat,linear-gradient(90deg,transparent,#fff6) 30% 50%/80% 2px no-repeat,linear-gradient(90deg,transparent,#fff5) 10% 100%/90% 2px no-repeat;
  animation:lgStreak .38s linear infinite}
@keyframes lgChase{0%{transform:translateX(0)}55%{transform:translateX(78%)}66%{transform:translateX(70%)}100%{transform:translateX(0)}}
@keyframes lgFlee{0%{transform:translateX(0)}50%{transform:translateX(-14%)}58%{transform:translateX(-14%) rotate(-3deg)}66%{transform:translateX(9%) scale(1.03)}100%{transform:translateX(0)}}
@keyframes lgFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes lgRunhop{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-9%) rotate(4deg)}}
@keyframes lgStreak{from{opacity:.25;transform:translateX(6px)}to{opacity:.75;transform:translateX(-6px)}}
.lg-tung.boing{animation:lgBoing .6s ease-out,lgFloat 2.6s .6s ease-in-out infinite}
@keyframes lgBoing{0%{transform:scale(1)}25%{transform:scale(1.08,.9)}50%{transform:scale(.94,1.08) rotate(-4deg)}75%{transform:scale(1.03,.97)}100%{transform:scale(1)}}
.lg-dd.jump{animation:lgDdjump .5s ease-out,lgRunhop .38s .5s ease-in-out infinite alternate}
@keyframes lgDdjump{0%{transform:translateY(0)}40%{transform:translateY(-28%) rotate(-8deg)}100%{transform:translateY(0)}}
.lg-taunt,.lg-cheer{position:absolute;top:0;max-width:58%;background:#fffdf6;color:#2b2035;font-weight:700;font-size:14.5px;border-radius:16px;padding:7px 13px;
  box-shadow:0 6px 20px #0008;opacity:0;transform:translateY(8px) scale(.9);transition:.25s;pointer-events:none;z-index:2}
.lg-taunt{right:2%;border-bottom-right-radius:4px}.lg-cheer{left:2%;border-bottom-left-radius:4px;background:#fff6c7}
.lg-taunt.on,.lg-cheer.on{opacity:1;transform:none}
.lg-title{margin:6px 0 2px;font-family:"Black Han Sans",Pretendard,sans-serif;font-weight:400;font-size:clamp(40px,10vw,64px);letter-spacing:.02em;line-height:1;
  background:linear-gradient(180deg,#fff7d6 0,#f4c55c 55%,#e08a2c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #6b3a0c) drop-shadow(0 0 18px #f2c45f55)}
.lg-title span{font-size:.62em;vertical-align:.18em}
.lg-story{margin:8px 0 6px;text-align:center;color:#c9d3ee;font-size:15.5px;line-height:1.6}.lg-story b{color:#7ff0d2}
.lg-form{width:min(400px,100%);display:grid;gap:10px;background:linear-gradient(180deg,#141c3acc,#0c1228e6);border:1px solid #2c3866;border-radius:20px;padding:16px 16px 12px;
  box-shadow:0 20px 50px #0009,inset 0 1px 0 #ffffff14;backdrop-filter:blur(6px)}
.lg-form label{display:grid;gap:4px}.lg-form label span{font-size:12.5px;color:#8fa2d8;padding-left:4px}
.lg-form input{font:inherit;font-size:17px;color:#fff;background:#060a1a;border:1.5px solid #2c3866;border-radius:12px;padding:12px 14px}
.lg-form input:focus{outline:none;border-color:#7ff0d2;box-shadow:0 0 0 3px #7ff0d22a}
.lg-go{margin-top:4px;font-family:"Black Han Sans",Pretendard,sans-serif;font-size:22px;letter-spacing:.06em;color:#2a1600;border-radius:14px;padding:13px;
  background:linear-gradient(180deg,#ffe08a,#f2b445);box-shadow:0 5px 0 #a8661c,0 0 24px #f2c45f66;transition:transform .08s}
.lg-go:active{transform:translateY(3px);box-shadow:0 2px 0 #a8661c,0 0 18px #f2c45f55}
.lg-msg{min-height:20px;text-align:center;color:#ffb3a1;font-size:14px}
@media (max-width:520px){.lg-story{font-size:14.5px}}
@media (min-height:1000px){.lg{justify-content:center}}

/* mission */
.mbtn{display:block;width:100%;max-width:360px;text-align:center}.mbtn small{display:block;font-weight:500;font-size:13.5px;opacity:.8}
.mres{color:var(--gold);font-weight:700}
.mload{width:min(260px,70%);animation:float 3s ease-in-out infinite;filter:drop-shadow(0 12px 20px #000a)}
.mtag{font-size:13px;color:var(--gold);letter-spacing:.04em}
.mq .chs{display:grid;gap:8px;margin-top:14px}
.ch{display:flex;gap:10px;align-items:center;text-align:left;background:#fff;border:1.5px solid #dde2ee;border-radius:12px;padding:12px 14px;color:#1d2233;font-size:17px}
.ch .cn{color:#8a93b0;font-weight:700}.ch .ct{min-width:0}.ch:hover:not(:disabled){border-color:#f2c45f}
.ch.right{border-color:#2fae77;background:#e7f8ef}.ch.wrong{border-color:#e0705a;background:#fdeee9}

/* 지도 */
.mapbox{margin:4px -6px 6px;overflow:hidden}
.starmap,.galmap{width:100%;height:auto;display:block}
.starmap .pl:hover circle{filter:brightness(1.2)}
.center{text-align:center}
/* 블랙홀 */
.bhin{position:relative}
.bhole{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,#000 0 34%,#120a2a 46%,#7c4dff66 60%,transparent 70%);box-shadow:0 0 60px #7c4dff55;animation:spinbh 9s linear infinite;margin-bottom:-120px}
@keyframes spinbh{to{transform:rotate(360deg)}}
.mload.peek{width:min(170px,50%);position:relative;animation:peek 3.2s ease-in-out infinite}
@keyframes peek{0%,100%{transform:translateY(16px) scale(.92);opacity:.85}50%{transform:translateY(-6px) scale(1);opacity:1}}
.chest{font-size:64px;color:var(--gold);text-shadow:0 0 30px #f2c45f}
.mload.flee{width:min(150px,40%);animation:flee 2.4s ease-in forwards}
@keyframes flee{0%{transform:none;opacity:1}100%{transform:translate(220px,-160px) scale(.2) rotate(30deg);opacity:0}}

/* 등급 · 나의 기록 */
.rankbtn{display:flex;align-items:center;gap:8px;margin:2px 0 0 auto;background:var(--sky2);border:1px solid var(--line);border-radius:99px;padding:6px 14px 6px 10px}
.rankbtn span{font-size:20px}.rankbtn b{color:var(--gold)}.rankbtn small{color:var(--sub)}
.book{display:grid;gap:14px}
.rankcard{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#1b2350,#141a33);border:1px solid #33407a;border-radius:var(--r);padding:16px}
.rankcard .ri{font-size:44px}.rankcard .rn{font-size:26px;font-weight:800;color:var(--gold)}.rankcard .rn small{font-size:15px;color:var(--sub);font-weight:500}
.how summary{cursor:pointer;color:var(--blue);font-size:14px}.how p{color:var(--sub);font-size:14.5px;margin:6px 0 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{display:grid;justify-items:center;background:var(--sky2);border:1px solid var(--line);border-radius:14px;padding:12px 4px}
.stat b{font-size:26px;color:var(--ink)}.stat span{font-size:14px}.stat small{font-size:11px;color:var(--sub)}.stat.on{border-color:var(--gold)}
.reclist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rec{display:grid;gap:2px;width:100%;text-align:left;background:var(--sky2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.rec b{color:var(--gold);font-size:13px}
@media (max-width:520px){.stats{grid-template-columns:repeat(2,1fr)}}

/* 처음 안내 · 우주 안내서 */
.story{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 20px;max-width:520px;margin:0 auto;text-align:center}
.st-top{align-self:stretch;display:flex;justify-content:flex-end;min-height:36px}
.st-pic{height:min(220px,34vh);display:flex;align-items:flex-end;justify-content:center}
.st-tung{max-height:min(220px,34vh);max-width:88%;animation:breath 3.6s ease-in-out infinite;filter:drop-shadow(0 0 28px rgba(140,110,255,.35))}
.buddy.st-me{width:min(200px,34vh)}
.story h2{font-size:24px;margin:6px 0 0;color:var(--gold)}
.story p{font-size:17px;line-height:1.7;color:var(--ink);margin:0;text-wrap:balance}.story p b{color:var(--gold)}
.st-dots{display:flex;gap:8px;margin:6px 0}.st-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.st-dots i.on{background:var(--gold);width:22px;border-radius:4px}
.st-nav{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:6px}
.homebar{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.homebar .rankbtn{margin:0}
.guide{max-width:620px;margin:0 auto}.guide h2{margin:4px 0 14px}
.guide details{background:var(--sky2);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:10px}
.guide summary{cursor:pointer;font-weight:700}.guide p{line-height:1.7;margin:10px 0 4px;color:var(--ink)}.guide p b{color:var(--gold)}
.g-tiers{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}
.g-tiers li{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:10px;background:rgba(255,255,255,.04)}
.g-tiers span{font-size:22px}.g-tiers b{color:var(--gold)}.g-tiers small{color:var(--sub)}

/* 선생님 화면 (teacher.html) — 설명 없이 깔끔하게 */
body.tpage #app{max-width:1000px}
.tmain{padding-bottom:30px}
.thead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:6px 0 12px}
.thead h2{margin:0;font-size:22px}.thead h2 small{font-size:14px;color:var(--sub);font-weight:500}
.tlist{display:grid;gap:6px}
.trow{display:grid;grid-template-columns:minmax(90px,1.2fr) 1.3fr .9fr 1.4fr .8fr .8fr;align-items:center;gap:10px;text-align:left;background:var(--sky2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14.5px}
.trow:hover{border-color:#3a4570}
.tname{font-weight:700;min-width:0}.tname small{display:block;font-weight:400;color:var(--sub);font-size:12px}
.trank b{color:var(--gold);margin-left:4px}.trank i{color:var(--sub);font-style:normal}
.tlit,.tnow,.tago{color:var(--sub);font-size:13px;min-width:0}
.talert.on{color:#241a00;background:var(--warn);border-radius:99px;padding:2px 10px;font-weight:700;font-size:12.5px;justify-self:start}
.tfoot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:18px}
.tfoot a{color:var(--sub);text-decoration:none}
.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.tcard{background:var(--sky2);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:2px}
.tcard b{font-size:20px;color:var(--gold)}.tcard span{font-size:13px}.tcard small{color:var(--sub);font-size:12px}
.tcard.warn b{color:var(--warn)}
.tsec{margin:22px 0 8px;font-size:16px}.tsec small{color:var(--sub);font-weight:500;margin-left:4px}
.tli{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.tli>li{background:var(--sky2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:0}
.tq{display:block}.tq .code{display:block;font-size:12px;margin-bottom:2px}
.tmeta{color:var(--sub);font-size:13px;margin-top:4px}
.tmis{color:var(--warn);font-size:13px;margin-top:3px}
.tli details{margin-top:4px;font-size:13.5px}.tli summary{color:var(--blue);cursor:pointer}
.tli details p{margin:6px 0 0;white-space:pre-wrap;color:var(--ink)}
.tscroll{overflow-x:auto}
.tbig{border-collapse:collapse;width:100%;min-width:620px;font-size:14px}
.tbig th,.tbig td{border-bottom:1px solid var(--line);padding:9px 8px;text-align:left;vertical-align:top}
.tbig thead th{color:var(--sub);font-weight:500;font-size:12.5px}
.tbig tbody th{font-weight:600}.tbig tbody th .code{display:block}
.tbig td small{display:block;color:var(--sub);font-size:11.5px}
.tbig td.full{color:var(--ok)}.tbig td.off{color:#5a6488}
.topen{font:inherit;font-size:13px;color:var(--ink);background:var(--sky);border:1px solid var(--line);border-radius:8px;padding:4px 6px}
.tpar{display:grid;gap:8px}
.tpar textarea,.turl{font:inherit;font-size:14px;color:var(--ink);background:var(--sky2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%}
.tpar .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.primary.small,.secondary.small{padding:8px 14px;font-size:14px}
@media (max-width:640px){
  .trow{grid-template-columns:1fr auto;grid-template-areas:"n a" "r g" "l w"}
  .tname{grid-area:n}.talert{grid-area:a;justify-self:end!important}.trank{grid-area:r}.tago{grid-area:g;text-align:right}.tlit{grid-area:l}.tnow{grid-area:w;text-align:right}
}

/* 학부모 리포트 (parent.html) */
.preport{max-width:640px;margin:0 auto;padding:18px 0 40px;display:grid;gap:12px}
.phead{text-align:center;padding:10px 0 4px}.phead h1{margin:4px 0;font-size:26px}
.pcard{background:var(--sky2);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.pcard h2{margin:0 0 8px;font-size:17px}.pcard p{margin:6px 0}.pcard b{color:var(--gold)}
.prank{display:flex;gap:14px;align-items:center}.pri{font-size:40px}.prn{font-size:22px;font-weight:800;color:var(--gold)}.prn small{font-size:14px;color:var(--sub);font-weight:500}
.pdays{display:flex;gap:6px;margin:4px 0 8px}.pdays span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--sub);border:1px solid var(--line)}
.pdays span.on{background:var(--gold);color:#241a00;border-color:var(--gold);font-weight:700}
.pstars{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.pstars li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
.pst{font-weight:600}.pstars .sub{grid-column:1/-1;font-size:12.5px}
.pbar{display:flex;gap:4px}.pbar i{width:26px;height:8px;border-radius:4px;background:var(--line)}
.pbar i.half{background:#8a7a45}.pbar i.full{background:var(--gold)}.pbar i.off{background:#1b2240}
.ptodos{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ptodo{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--sky)}
.pq{font-weight:600;line-height:1.6}
.pwhy{color:var(--warn);font-size:13.5px;margin-top:4px}.pwhy b{color:var(--ok)}
.phow{margin:8px 0 0;padding-left:20px;font-size:14px;line-height:1.7;color:var(--ink)}
.pkw{display:inline-block;border:1px solid #f2c45f66;color:var(--gold);border-radius:99px;padding:0 9px;margin:2px 2px 0 0;font-size:13px}
.pcard blockquote{margin:8px 0 0;padding:10px 14px;border-left:3px solid var(--gold);background:var(--sky);border-radius:0 10px 10px 0;line-height:1.7}
.pcm{white-space:pre-wrap;line-height:1.7}
.pfail{text-align:center;display:grid;gap:10px;justify-items:center;padding:20px}
.lg-links{position:relative;z-index:2;display:flex;justify-content:center;gap:6px}.lg-links .lg-teacher{margin:14px 0 0}
.lg-teacher{position:relative;z-index:2;display:block;width:max-content;margin:14px auto 0;color:#6f7899;font-size:13px;text-decoration:none;padding:6px 12px}
.center-msg a.ghost{text-decoration:none;color:var(--sub)}
.syms{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sym{min-width:44px;min-height:40px;padding:6px 10px;border-radius:10px;background:var(--sky2);border:1px solid var(--line);color:var(--ink);font-size:16px}
.sym:active{background:var(--line)}
.tpv{min-height:0;margin-top:8px;font-size:19px;color:var(--ink)}.tpv:empty{display:none}.tpv small{font-size:12px;color:var(--sub);margin-right:6px}
/* 입력칸이 기본 너비를 고집해 상자 밖으로 삐져나가던 것(폰 글씨를 크게 하면 심해짐) — 상자 너비에 맞춘다 */
.lg-form,.login{grid-template-columns:minmax(0,1fr)}
.lg-form label,.login label{min-width:0}
.lg-form input,.login input,.lg-go{width:100%;min-width:0}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
/* 글로 쓰기 — 수식 칸(분수 네모칸) */
.ced{min-height:84px;max-height:220px;overflow-y:auto;font-size:17px;line-height:2.1;color:#1d2233;background:var(--paper);border-radius:12px;padding:10px 12px;outline:none;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.ced:empty::before{content:attr(data-ph);color:#9aa2b8}
.ced:focus{box-shadow:0 0 0 3px #f2c45f66}
.fx{display:inline-flex;align-items:center;gap:2px;vertical-align:middle;margin:0 2px;padding:1px 2px}
.fx input{font:inherit;font-size:15px;text-align:center;color:#1d2233;background:#fff;border:1.5px dashed #9aa6c8;border-radius:5px;padding:0 2px;height:1.55em;min-width:1.35em;line-height:1}
.fx input:focus{outline:none;border:1.5px solid #e0a21c;background:#fff8e1}
.fx input.on{border-style:solid;border-color:#c9cfdf}
.fx input.on:not(:focus){border-color:transparent;background:transparent}
.fx .fw{font-size:17px;height:1.7em}
.fx .fs{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.fx .fs .fn{border-bottom-left-radius:5px}
.fx .fs::after{content:"";order:1;display:block;width:100%;height:1.5px;background:#1d2233;margin:0}
.fx .fs .fd{order:2}
.sym.fbtn{display:inline-flex;align-items:center;gap:6px}.sym.fbtn small{font-size:13px}
.fico{display:inline-flex;align-items:center;gap:2px}
.fico i{display:block;width:9px;height:9px;border:1.5px solid currentColor;border-radius:2px}
.fico span{display:inline-flex;flex-direction:column;align-items:center;gap:2px;position:relative}
.fico span::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1.5px;background:currentColor}
.fico .w{width:10px;height:13px}
.ch:disabled{opacity:.6}.ch.right:disabled,.ch.wrong:disabled{opacity:1}
/* 선생님 화면 — 시간 설정 */
.tset{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;background:var(--sky2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.tset label{display:flex;gap:8px;align-items:center;font-size:14px}
.tset select{font:inherit;font-size:14px;color:var(--ink);background:var(--sky);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.tago small{display:block;color:var(--gold);font-size:11.5px}
.tset label{white-space:nowrap;min-width:0;max-width:100%}.tset select{min-width:0;max-width:min(320px,58vw)}
/* 별계 지도 아래 행성 목록 (마스터 10/12) */
.plist{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:6px}
.prow{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;text-align:left;background:var(--sky2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:16px}
.prow i{font-style:normal;font-weight:800;font-size:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#aab3d3;background:#1f2542;border:1.5px solid color-mix(in srgb,var(--p) 60%,transparent)}
.prow.lit i{color:#1b1530;background:radial-gradient(circle at 36% 30%,#fff,var(--p) 45%);border-color:#fff;box-shadow:0 0 12px var(--p)}
.prow span{min-width:0}.prow b{font-size:13px;color:var(--sub);font-weight:600;white-space:nowrap}
.prow.lit b{color:var(--gold)}
.prow:hover{border-color:#3a4570}
.starmap .pl.lit{filter:drop-shadow(0 0 4px rgba(255,255,255,.35))}
/* 홈(마스터 10/12) — 탐험가 등급 · 은하 안내 버튼 · 용어 */
.rankbtn .rk-l{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--sub);letter-spacing:.04em;padding-right:4px;border-right:1px solid var(--line);margin-right:2px}
.rankbtn .rk-i{font-size:20px}
i.tq{font-style:normal;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--sub);font-size:10.5px;color:var(--sub);cursor:help}
.tm{border-bottom:1.5px dotted currentColor;cursor:help}
.galbtn{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:18px 0 6px;padding:2px 0;text-align:left}
.galbtn b{font-size:18px;letter-spacing:.08em;color:var(--ink)}.galbtn span{font-size:13px;color:var(--gold)}
.galbtn:hover span{text-decoration:underline}
.tpop{position:fixed;inset:0;z-index:50;background:#0008;display:flex;align-items:flex-end;justify-content:center;padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.tpop-in{width:min(460px,100%);background:var(--paper);color:#1d2233;border-radius:18px;padding:16px 18px;box-shadow:0 10px 40px #0009;animation:tpopIn .2s ease-out}
.tpop-in b{font-size:17px}.tpop-in p{margin:8px 0 10px;line-height:1.7;font-size:15.5px}.tpop-in .ghost{color:#5a6488}
@keyframes tpopIn{from{transform:translateY(20px);opacity:0}}
.g-steps{margin:8px 0 4px;padding-left:20px;line-height:1.8}.g-bigs{list-style:none;padding:0;margin:6px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.g-bigs li{display:flex;justify-content:space-between;gap:8px;background:rgba(255,255,255,.04);border-radius:10px;padding:6px 10px;font-size:14px}.g-bigs small{color:var(--sub)}
/* 캐릭터를 누르면 살짝 흔들림 */
.buddy img.wig{animation:wig .45s ease-in-out!important}
@keyframes wig{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg) scale(1.03)}45%{transform:rotate(7deg)}70%{transform:rotate(-4deg)}85%{transform:rotate(2deg)}}
/* 오늘 공부 시간 — 떠 있는 작은 시계(끌어서 옮김) */
.sclock{position:fixed;right:10px;bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:5px;padding:3px 10px 3px 4px;border-radius:99px;
  background:linear-gradient(180deg,#fff7d1,#ffd76a);color:#5a3a00;box-shadow:0 4px 14px #0007,0 0 0 2px #fff6 inset;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.sclock img{width:24px;height:24px;object-fit:contain;animation:clkBob 1.6s ease-in-out infinite;pointer-events:none}
.sclock b{font:700 12px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.sclock.idle{background:linear-gradient(180deg,#e9edf8,#c9d1e8);color:#4a5578}.sclock.idle img{animation:none;opacity:.8}
.sclock.low{background:linear-gradient(180deg,#ffd9b0,#ff9f5a);color:#4a1d00}
.sclock.end{background:linear-gradient(180deg,#ffc0b6,#ff6f5e);color:#3a0700;animation:clkPulse 1s ease-in-out infinite}
.sclock.hold{cursor:grabbing;transform:scale(1.08)}
.sclock.wig{animation:wig .45s ease-in-out}
@keyframes clkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px) rotate(-6deg)}}
@keyframes clkPulse{0%,100%{box-shadow:0 4px 14px #0007,0 0 0 0 #ff6f5e88}50%{box-shadow:0 4px 14px #0007,0 0 0 7px #ff6f5e00}}
body.intro-on .sclock{display:none}
/* 선생님 화면 — 학원 이름 */
.tacad{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:18px}
.tacad label{display:flex;gap:8px;align-items:center;font-size:14px}
.tacad input{font:inherit;font-size:14px;color:var(--ink);background:var(--sky2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;width:12em;max-width:52vw}
.rankbtn{max-width:100%}.rankbtn small{white-space:nowrap}
/* 난이도 꼬리표(마스터 10/12) */
.lvt{display:inline-block;margin-left:6px;font-size:.74em;font-weight:700;line-height:1.5;padding:0 7px;border-radius:99px;border:1px solid currentColor;opacity:.85;vertical-align:1px;white-space:nowrap}
.tab .lvt{margin-left:5px}
.go .lvt{margin-left:4px}
/* 🔑 선생님 열쇠 */
.kbtn{margin-top:4px;font-size:18px;width:40px;height:40px;border-radius:50%;background:var(--sky2);border:1px solid var(--line);opacity:.7}
.kbtn:hover{opacity:1}
.kpop{position:fixed;inset:0;z-index:60;background:#000a;display:flex;align-items:center;justify-content:center;padding:16px}
.kpop-in{width:min(380px,100%);background:var(--sky2);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:12px;box-shadow:0 20px 50px #000c}
.kpop-in b{font-size:17px}
.kpop-in label{display:grid;gap:6px;font-size:14px;color:var(--sub)}
.kpop-in input{font:inherit;font-size:18px;color:var(--ink);background:var(--sky);border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;width:100%}
.krow{display:flex;flex-wrap:wrap;gap:8px}.krow[hidden],.kpop [hidden]{display:none!important}.krow .secondary{flex:1 1 auto}
.kmsg{min-height:20px;font-size:14px;color:var(--gold)}
.tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;line-height:1.25}
.tab .lvt{margin:0;font-size:11px}
.live .hear{color:var(--sub);font-size:15px}
/* ⭐ 별빛(마스터 10/13) — 위쪽 숫자 · 결과의 '+n' · 날아가는 별 가루 */
.bar .who{display:flex;align-items:center;gap:4px}
.starct{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(180deg,#2a2a14,#1d1d10);border:1px solid #f2c45f66;border-radius:99px;padding:4px 11px 4px 8px;color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;transition:transform .2s}
.starct i{font-style:normal;font-size:15px}
.starct.bump{transform:scale(1.18);box-shadow:0 0 18px #f2c45f88}
.gain{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:-4px;animation:gainIn .5s cubic-bezier(.3,1.6,.5,1) both}
.gain b{color:var(--gold);font-size:19px;letter-spacing:.02em;text-shadow:0 0 14px #f2c45f88}
.gain small{color:var(--sub);font-size:12px}
@keyframes gainIn{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.sdust{position:fixed;z-index:80;pointer-events:none;font-style:normal;color:var(--gold);font-size:17px;text-shadow:0 0 10px #f2c45f}
.starcards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.scard{display:grid;gap:2px;background:linear-gradient(135deg,#29260f,#17150b);border:1px solid #f2c45f55;border-radius:var(--r);padding:12px 14px}
.scard span{font-size:13px;color:var(--sub)}.scard b{font-size:28px;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.15}.scard small{font-size:11.5px;color:var(--sub)}
.scard.all{background:linear-gradient(135deg,#1b2350,#141a33);border-color:#33407a}.scard.all b{color:var(--blue)}
.rankcard .rkscore{margin-left:auto;display:grid;justify-items:center;background:#0006;border:1px solid #33407a;border-radius:14px;padding:6px 12px}
.rkscore b{font-size:24px;color:var(--ink);line-height:1.1}.rkscore small{font-size:11px;color:var(--sub)}
table.tiers{width:100%;border-collapse:collapse;margin:8px 0;font-size:14.5px}
table.tiers td{padding:6px 6px;border-bottom:1px solid #e3e0d4}table.tiers td:first-child{font-size:20px;width:30px}
table.tiers tr.me{background:#fff2c9}table.tiers small{color:#6b7190}
.rec .myd{margin-top:4px}.rec .myd summary{font-size:13px;color:var(--gold);cursor:pointer}
.rec .myd p{margin:6px 0 2px;padding:8px 10px;background:#0005;border-radius:10px;font-size:14.5px;line-height:1.6}
.rec .redo{justify-self:start;color:var(--gold);padding:4px 0}
@media (max-width:520px){.starct{padding:3px 8px 3px 6px;font-size:14px}.bar .who .ghost.small{font-size:12.5px;padding:6px 6px}}
.tsem{display:grid;gap:8px}
.semrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.semrow input{font:inherit;font-size:14px;color:var(--ink);background:var(--sky2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;color-scheme:dark}
.semrow .semn{width:13em;max-width:60vw}
.tlit small{display:block;color:var(--gold);font-size:12px}
.rec .myd p small{color:var(--sub);font-size:11.5px;margin-right:4px}
table.tiers td:nth-child(3){white-space:nowrap}
/* ✦ 별빛노트 */
.notebtn{display:flex;align-items:center;gap:12px;width:100%;margin-top:4px;text-align:left;background:linear-gradient(120deg,#2b2460,#1a1d44 60%,#2a2350);border:1px solid #6d5fd6aa;border-radius:16px;padding:12px 16px;box-shadow:inset 0 0 24px #8f7cff22}
.notebtn .nbt{flex:1;display:grid}.notebtn b{font-size:17px;color:#e6dcff}.notebtn small{color:var(--sub);font-size:13px}.notebtn .nba{color:#bfaeff;font-size:22px}
.nbs{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff7cf,#f2c45f 45%,#a77a1a);color:#3a2700;font-size:20px;box-shadow:0 0 16px #f2c45f99;animation:nbTw 2.6s ease-in-out infinite}
.nbs.big{width:52px;height:52px;font-size:28px}
@keyframes nbTw{0%,100%{box-shadow:0 0 12px #f2c45f88}50%{box-shadow:0 0 24px #f2c45fcc}}
.snote{display:grid;gap:12px}
.sn-head{display:flex;gap:12px;align-items:center}.sn-head h2{margin:0}.sn-head .sub{margin:0}
.sn-note{margin:0;font-size:13.5px;color:var(--sub);background:var(--sky2);border:1px dashed var(--line);border-radius:12px;padding:8px 12px}
.sn-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sn-q{display:flex;gap:8px;align-items:flex-start;font-weight:600;line-height:1.6}
.sn-n{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--line);font-size:13px;margin-top:1px}
.sn-a{margin:6px 0 0 32px;background:var(--paper);color:#1d2233;border-radius:14px;padding:10px 14px;position:relative}
.sn-a p{margin:4px 0 0;line-height:1.7}
.sn-a.mine{background:#fff6d6;box-shadow:0 0 0 2px #f2c45f}
.sn-a.none{background:var(--sky2);color:var(--sub);font-size:14px;border:1px dashed var(--line)}
.sn-who{font-weight:700;color:#5a4a00;font-size:14px}.sn-who small{margin-left:8px;font-weight:500;color:#7a7f99;font-size:12px}
/* 선생님 — 별빛노트 관리 */
.tnb li .tmeta b{color:var(--gold)}
.tnb .row{gap:6px;margin-top:6px}
.tans{margin:6px 0 0;padding:8px 10px;background:#0005;border-radius:10px;line-height:1.6}
/* 🏆 빛나는 탐험가 */
.hallbtn{display:flex;align-items:center;gap:6px;background:var(--sky2);border:1px solid #f2c45f66;border-radius:99px;padding:6px 14px;font-size:15px;color:var(--gold);font-weight:700}
.hallbtn span{color:var(--ink);font-weight:600;font-size:14px}
.hall{display:grid;gap:10px}.hall h2{margin:4px 0 0}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;margin:8px 0 4px}
.pod{display:grid;justify-items:center;gap:2px;text-align:center;padding:12px 6px 0;border-radius:16px 16px 6px 6px;background:linear-gradient(180deg,#1d2350,#11152c);border:1px solid var(--line);min-width:0}
.pod.p1{background:linear-gradient(180deg,#3a3213,#16140b);border-color:#f2c45f88;box-shadow:0 0 30px #f2c45f33}
.pod-ic{font-size:30px;line-height:1.1}.pod.p1 .pod-ic{font-size:40px}
.pod-t{font-size:13px;color:var(--gold);font-weight:700;letter-spacing:.06em}
.pod b{font-size:17px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pod.p1 b{font-size:20px}
.pod small{color:var(--sub);font-size:12px}
.pod-bar{width:100%;height:18px}.pod.p1 .pod-bar{height:46px}.pod.p2 .pod-bar{height:28px}
.pod.me{outline:2px solid var(--gold)}
.hsec{margin:14px 0 2px;font-size:17px}.hsec small{color:var(--sub);font-size:12.5px;font-weight:500;margin-left:6px}
.awards{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.awards li{display:flex;align-items:center;gap:10px;background:var(--sky2);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.awards li.me{border-color:var(--gold)}
.aw-ic{font-size:22px;width:30px;text-align:center}.aw-n{min-width:5.5em;font-weight:700}
.awards b{margin-left:auto;text-align:right}.awards i{color:var(--sub);font-weight:400;font-style:normal;font-size:13.5px}
/* ⚡ 계산 연습 */
.funrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0 2px}
.funbtn{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;background:linear-gradient(135deg,#1c2a52,#141a33);border:1px solid #3a4c8a;border-radius:16px;padding:10px 14px}
.funbtn span{grid-row:1/3;font-size:26px}.funbtn b{font-size:16px}.funbtn small{color:var(--sub);font-size:12.5px}
.calc{display:grid;gap:12px}.calc h2{margin:4px 0 0}
.cunits{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cunit{display:grid;gap:2px;width:100%;text-align:left;background:var(--sky2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.cunit b{font-size:16px}.cunit small{color:var(--sub);font-size:12.5px}.cunit i{font-style:normal;font-size:12.5px;color:var(--gold)}
.cunit.word{border-style:dashed}
.ctips{display:grid;gap:8px}
.ctip{background:var(--paper);color:#1d2233;border-radius:14px;padding:12px 14px}
.ctip b{font-size:15.5px}.ctip ul{margin:6px 0 0;padding-left:18px;line-height:1.75;font-size:15px}.ctip li.ex{list-style:none;margin-left:-18px;margin-top:4px;background:#eef2ff;border-radius:8px;padding:4px 10px;color:#2b3270}
.cspeed{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.cspeed span{color:var(--sub);font-size:13.5px;margin-right:4px}
.cspeed button{border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:14px;background:var(--sky2)}.cspeed button.on{border-color:var(--gold);color:var(--gold)}
.race{position:relative;display:grid;gap:4px;background:var(--sky2);border:1px solid var(--line);border-radius:14px;padding:8px 40px 8px 8px;margin-top:4px}
.lane{position:relative;height:38px;border-bottom:1px dashed #2f3860}
.lane:last-of-type{border-bottom:0}
.tok{position:absolute;left:0;top:1px;width:36px;height:36px;transition:left .45s ease-out}
.tok img{width:36px;height:36px;object-fit:contain}
.tok.tg{transition:left .2s linear}
.goal{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:22px}
.cnum{display:flex;justify-content:space-between;color:var(--sub);font-size:14px;margin:8px 2px 0}.cnum b{color:var(--ink);font-variant-numeric:tabular-nums}
.ccard{background:var(--paper);color:#1d2233;border-radius:var(--r);padding:18px 16px;margin-top:8px;min-height:120px;display:grid;gap:10px;align-content:center}
.cq{font-size:22px;font-weight:700;line-height:1.6;text-align:center}
.ctag{font-size:13px;color:#5a6488;text-align:center}
.ccard .figbox{display:flex;justify-content:center}
.cfb{text-align:center;min-height:24px;font-size:16px}.cfb .ok{color:#178a5a;font-weight:700}.cfb .no{color:#c2410c}.cfb small{color:#5a6488;font-weight:500}
.count{font-size:64px;font-weight:800;color:#c99a1c;text-align:center}
.kdisp{display:flex;justify-content:center;align-items:center;gap:8px;margin:12px 0 4px;min-height:72px}
.kone{min-width:150px;text-align:center;font-size:30px;font-weight:700;background:var(--sky2);border:2px solid var(--gold);border-radius:12px;padding:6px 14px;font-variant-numeric:tabular-nums}
.kmix{display:flex;align-items:center;gap:6px}.kfr{display:grid;justify-items:center;gap:3px}.kfr i{width:100%;height:2.5px;background:var(--ink);border-radius:2px}
.kbox{min-width:56px;min-height:40px;font-size:24px;font-weight:700;background:var(--sky2);border:2px solid var(--line);border-radius:10px;padding:0 8px}.kbox.on{border-color:var(--gold);box-shadow:0 0 10px #f2c45f55}
.kunit{font-size:20px;color:var(--sub)}
.khint{text-align:center;color:var(--sub);font-size:12.5px;margin:0}
.kpad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px;margin:8px auto 0}
.kpad button{background:var(--sky2);border:1px solid var(--line);border-radius:12px;font-size:22px;font-weight:700;padding:12px 0;touch-action:manipulation}
.kpad button:active{transform:scale(.96);background:#1d2448}
.kpad .kok{grid-row:span 2;background:var(--gold);color:#241a00;font-size:18px}
.kpad .kz{grid-column:span 3}
.kpad [data-x="→"]{font-size:14px}
.cchs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.cchs .ch{justify-content:center;text-align:center;background:var(--sky2);border:1.5px solid var(--line);border-radius:14px;padding:14px 8px;font-size:18px;font-weight:700;color:var(--ink)}
.cchs .ch.right{border-color:var(--ok);background:#163a2c;color:#bff3da}.cchs .ch.wrong{border-color:var(--warn);background:#3a1d16}
/* ⚔ 대결 */
.funbtn.vs{background:linear-gradient(135deg,#3a1f4a,#1a1533);border-color:#7a4fa0}
.battle{display:grid;gap:12px}.battle h2{margin:4px 0 0}
.tabs.two{grid-template-columns:1fr 1fr!important}
.brule{background:var(--sky2);border:1px dashed var(--line);border-radius:14px;padding:10px 14px;font-size:14.5px;line-height:1.7}
.bme{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.bme>span{color:var(--sub);font-size:13.5px}.bme small{color:var(--sub)}
.bdg{display:inline-flex;cursor:pointer}.bdg svg{filter:drop-shadow(0 2px 6px #0008)}
.blist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.blist li{display:flex;align-items:center;gap:10px;background:var(--sky2);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.blist .bf{flex:1;font-weight:700}.blist .bf small{margin-left:6px;color:var(--sub);font-weight:400}
.blist li.sub{display:block;border-style:dashed}
.bpick .kpop-in{max-height:86vh;overflow:auto}
.bpscroll{display:grid;gap:10px;max-height:58vh;overflow:auto}
.bpg{display:flex;flex-wrap:wrap;gap:6px}.bpg small{width:100%;color:var(--sub)}
.bpg .secondary{padding:7px 11px;flex:0 0 auto}
.lname{position:absolute;right:6px;top:10px;font-size:12px;color:var(--sub)}
.tok.vsn b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#ff9fb4,#c4507a);color:#fff;font-size:16px}
.vsbar{margin:6px 0 0;text-align:center;font-size:13px;color:var(--pink);background:#2a1530;border:1px solid #6a3a6a;border-radius:99px;padding:3px 12px}
.bres{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:420px}
.bres>div{display:grid;gap:2px;background:var(--sky2);border:1px solid var(--line);border-radius:14px;padding:10px}
.bres>div.win{border-color:var(--gold);box-shadow:0 0 16px #f2c45f44}.bres small{color:var(--sub)}.bres b{font-size:16px}
.bnew{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--gold)}
.bdglist{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:6px}
.bdglist li{display:flex;align-items:center;gap:10px}.bdglist li span{display:grid}.bdglist li small{color:#6b7190}
.bdglist li.off{opacity:.35}.bdglist li.me{background:#fff2c9;border-radius:10px;padding:2px 6px}
/* 선생님 화면 2판(마스터 10/13: 깔끔하게 · 누르면 보이게) */
.tqq{display:block}.tqq .code{display:block;font-size:12px;margin-bottom:3px}.tqt{line-height:1.65;font-size:15px}
.tmenu{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:14px 0}
.tmenu.two{grid-template-columns:1fr 1fr}
.tmbtn{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;background:var(--sky2);border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-height:72px}
.tmbtn:hover{border-color:#3a4570}
.tmbtn i{grid-row:1/3;font-style:normal;font-size:26px}.tmbtn b{font-size:16px}.tmbtn small{color:var(--sub);font-size:13px}
.tmbtn.hot{border-color:var(--warn);box-shadow:inset 0 0 0 1px #ff9a7a55}.tmbtn.hot small{color:var(--warn)}
.tstu{display:grid;grid-template-columns:1fr auto auto 14px;gap:12px;align-items:center;width:100%;text-align:left;background:var(--sky2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.tsn b{font-size:16px}.tsn small{margin-left:6px;color:var(--sub);font-size:12.5px}
.tsr{font-size:14px;white-space:nowrap}.tsr i{color:var(--sub);font-style:normal}
.tsx{display:grid;justify-items:end;gap:2px}.tsx em{font-style:normal;color:#241a00;background:var(--warn);border-radius:99px;padding:1px 9px;font-size:12px;font-weight:700}.tsx small{color:var(--sub);font-size:12px;white-space:nowrap}
.tsgo{color:var(--sub);font-size:20px}
.tcards.four{grid-template-columns:repeat(4,1fr)}
.tbox{background:var(--sky2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;display:grid;gap:8px}
.tbox h3{margin:0;font-size:16px}.tbox h3 small{color:var(--sub);font-weight:500;font-size:12.5px;margin-left:6px}.tbox .sub{margin:0}
.tbox .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.tbox a{text-decoration:none}
.tin{font:inherit;font-size:15px;color:var(--ink);background:var(--sky);border:1px solid var(--line);border-radius:10px;padding:9px 12px;max-width:100%}
textarea.tin{width:100%}
.tbigs{display:grid;gap:10px}
.tbigc{background:var(--sky2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:10px}
.tbh .code{display:block}.tbh b{font-size:16px}
.tbr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tbcell{display:grid;gap:1px;background:var(--sky);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.tbcell small{color:var(--sub);font-size:12px}.tbcell b{font-size:18px}.tbcell i{font-style:normal;color:var(--sub);font-size:11.5px}
.tbcell.full{border-color:var(--ok)}.tbcell.full b{color:var(--ok)}.tbcell.off{opacity:.55}
.tbo{display:flex;gap:8px;align-items:center;font-size:14px;flex-wrap:wrap}.tbo small{color:var(--gold)}
.tcalc{list-style:none;margin:0;padding:0;display:grid;gap:6px}.tcalc li{display:grid}.tcalc span{color:var(--sub);font-size:13px}
@media (max-width:620px){.tcards.four{grid-template-columns:1fr 1fr}.tmenu{grid-template-columns:1fr 1fr}.tmbtn{grid-template-columns:1fr;grid-template-rows:auto;row-gap:2px;padding:12px}.tmbtn i{grid-row:auto;font-size:22px}
  .tstu{grid-template-columns:1fr auto 12px;row-gap:4px}.tsr{grid-column:1}.tsx{grid-row:1/3;grid-column:2}.tsgo{grid-row:1/3;grid-column:3}}

/* ── 📖 용어 맞히기 · 🗺 별지도 (app 0.15) ── */
.funbtn.wq{background:linear-gradient(135deg,#1f3a3a,#13232a);border-color:#3f8a80}
.cfrom{font-size:12.5px;color:#2f8a57;text-align:center;margin-top:2px}
.cq.cword{font-size:24px;font-weight:800}
.cchs.long{grid-template-columns:1fr}.cchs.long .ch{justify-content:flex-start;text-align:left;font-size:15.5px;font-weight:600;line-height:1.45;padding:12px 14px}
.wsay{display:grid;gap:10px;margin-top:10px}.wsay .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.wsay .live{min-height:24px;text-align:center;font-size:15px}
.wtype input{flex:1;min-width:200px;max-width:280px;font-size:18px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--sky2);color:var(--ink)}
.mapct{font-size:13.5px;color:var(--sub);text-align:center;margin:2px 0 8px}.mapct b{color:var(--gold)}
.hbtn:disabled{opacity:.45}

/* ── 깔끔한 화면(대전제 3번, app 0.16) ── */
.galttl{display:flex;align-items:center;gap:6px;font-size:17px;margin:18px 2px 4px}
.homenav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 4px}
.homenav button{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--sky2);border:1px solid var(--line);border-radius:14px;padding:10px 4px;font-weight:700;font-size:14px;color:var(--ink)}
.homenav button span{font-size:22px;line-height:1.1}
.play h2{margin:4px 0 12px}.playgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.playgrid .funbtn{padding:16px}.funbtn.hl{background:linear-gradient(135deg,#3a3418,#1d1a10);border-color:#8a7a3a}
details.brule{margin:8px 0}details.brule summary{cursor:pointer;color:var(--sub);font-size:14px}
.phowd{margin-top:6px}.phowd summary{cursor:pointer;font-size:14px;color:#3a6fb0;font-weight:700}
details.tq2{display:inline}details.tq2 summary{display:inline-block;cursor:pointer;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;border:1px solid currentColor;font-size:12px;list-style:none}details.tq2[open]{display:block;margin-top:4px}
details.tq2 summary::-webkit-details-marker{display:none}
.rec .myd summary{color:var(--ink);display:inline-block;cursor:pointer;margin-top:6px;padding:6px 12px;border-radius:999px;background:var(--sky2);border:1px solid var(--line);font-size:14px;font-weight:700;list-style:none}
.rec .myd summary::-webkit-details-marker{display:none}
.myd-in{margin-top:8px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px dashed var(--line)}
.myd-in b{display:block;font-size:13px;color:var(--gold);margin-top:2px}.myd-in p{margin:4px 0 8px;line-height:1.6}.myd-in p.mod{color:var(--sub)}
/* 나의 기록 — 대단원·소단원별로 묶기 (10/14) */
.recgroups{display:grid;gap:8px}
.recbig{background:var(--sky2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.recbig>summary{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;list-style:none;font-weight:700}
.recbig>summary::-webkit-details-marker{display:none}
.recbig>summary::after{content:'›';margin-left:4px;color:var(--sub);transition:transform .2s}
.recbig[open]>summary::after{transform:rotate(90deg)}
.recbig .rbc{font-size:12px;color:var(--sub);font-weight:600;white-space:nowrap}
.recbig .rbt{flex:1;min-width:0}
.recbig .rbn{min-width:26px;text-align:center;padding:2px 8px;border-radius:999px;background:#0004;color:var(--gold);font-size:13px}
.recsm{padding:0 10px 10px}
.recsm .rst{font-size:13px;color:var(--sub);margin:4px 2px 6px;font-weight:600}
.recsm .rec{background:#0003}

/* 👆 누르기 질문(10/19) — 그림 이름 누르기 · 이름 카드 */
.thit{fill:rgba(224,123,57,.08);stroke:rgba(224,123,57,.35);stroke-width:1.2;cursor:pointer}
.thit.on{fill:rgba(243,140,60,.55);stroke:#e07b39;stroke-width:2.6}
.tord{font:800 12px sans-serif;fill:#c2410c}
.tapsteps{display:flex;gap:5px;justify-content:center;margin:2px 0 6px}.tapsteps i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.tapsteps i.d{background:#8fd6b4}.tapsteps i.c{background:#f3c969}
.tapsub{margin:4px 0 8px}
.tcards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}
.tcard{min-height:44px;padding:8px 14px;border-radius:12px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:inherit;font-size:16px}
.tcard.on{border-color:#f3c969;background:rgba(243,201,105,.25);font-weight:700}

/* 👥 선생님 화면 학생 관리(10/20) */
.tmenu.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:620px){.tmenu.three{grid-template-columns:1fr 1fr}}
.mlist{display:flex;flex-wrap:wrap;gap:8px}
.mstu{display:flex;gap:10px;align-items:center;min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:var(--sky);color:var(--ink);font:inherit;cursor:pointer}
.mstu span{font-size:12.5px;color:var(--sub)}
.tmsg{background:var(--sky2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:6px 0 10px}
.danger{color:#c2410c!important;border-color:#f2b8a0!important}
#mName,#mGrade,#mPw{flex:1 1 140px;min-width:0}

/* mission 미리 만든 문제 — 그림 · 누르기(0.19) */
.mq .mfig{margin:12px 0 2px;text-align:center;background:#fff;border-radius:12px;padding:8px}.mq .mfig svg{max-width:100%;height:auto}
.mq .mfig.tapme [data-t]{cursor:pointer}
.mq .mfig [data-t].sel :is(rect,circle,ellipse,polygon,path,line,polyline):not([stroke="transparent"]){stroke:#E07B39 !important;stroke-width:3px !important}
.mq .mfig [data-t].sel :is(rect,circle,ellipse,polygon){fill:#FDE6D3 !important}
.mq .tapbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.mq .tapbar .sub{font-size:14px}
/* 선생님 「다시 하기」(10/21) */
.trs{border-top:1px solid var(--line);padding-top:8px}
.trs summary{display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer;font-size:14px}
.trs summary em{color:var(--sub);font-style:normal;font-size:12.5px;white-space:nowrap}
.trs .row{margin:8px 0 4px}.trs .tli{margin:4px 0 0}

/* mission(마스터 10/21): 고르고 「제출」 · 맞는 답은 파랑 · 설명 머리 「꼭 확인!」 */
.mq .ch.sel{border-color:#4f7cff;background:#eef3ff;box-shadow:0 0 0 2px #4f7cff33}
.mq .ch.right{border-color:#3b6fe0;background:#e8f0ff}.mq .ch.right .cn{color:#3b6fe0}
.mq .subbar{display:flex;justify-content:flex-end;margin-top:12px}.mq .subbar .primary{min-width:120px}
.sbubble.mok{background:#e8f0ff;color:#1d3f8f}
.tmenu.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:620px){.tmenu.four{grid-template-columns:1fr 1fr}}
.trgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.trc{display:grid;gap:3px;font-size:13px}.trc .code{font-size:12px}.trc small{color:var(--gold);font-size:11.5px}
.lvline{margin:6px 0 2px;font-size:14px;font-weight:800;letter-spacing:1px;color:var(--gold)}
.prow b small{font-size:11.5px;font-weight:600;color:var(--sub);margin-right:4px}
.tmenu.five{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){.tmenu.five{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.tmenu.five{grid-template-columns:1fr 1fr}}
.vsnav{justify-content:space-between}.vsnav b{font-size:16px}
.tvis{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tvis li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:14px;padding:6px 0;border-top:1px solid var(--line)}
.tvis li:first-child{border-top:0}.tvis li span{color:var(--gold);font-weight:700}.tvis li small{color:var(--sub);font-size:12.5px}

/* 📒 개념 노트(0.21) — 학생이 고른 설명만 담는 복습 노트 · js/note2.js */
.cnote h2{margin:4px 0 2px}.cnote>.sub{margin:0 0 12px}
.cnlist{display:grid;gap:6px}
.cncard{background:#0003;border:1px solid var(--line);border-radius:12px}
.cncard>summary{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:baseline;padding:10px 12px;cursor:pointer;list-style:none}
.cncard>summary::-webkit-details-marker{display:none}
.cncard[open]>summary{border-bottom:1px dashed var(--line)}
.cnlv{font-size:11.5px;color:var(--gold);font-weight:700;white-space:nowrap}.cnqt{line-height:1.55}
.cnbody{padding:10px 12px 12px;display:grid;gap:10px}
.cnex{background:#f3f0ff;color:#2f2665;border-radius:12px;padding:10px 12px}
.cnh{font-size:12.5px;font-weight:700;color:#5b4bb7;margin-bottom:4px}
.cnex .figbox{margin-top:8px}
.cnmore{justify-self:start;color:var(--gold)}
.cnact{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.cnact .secondary{display:grid;gap:2px;padding:10px 12px;text-align:left}.cnact .secondary small{color:var(--sub);font-size:12px}
.cndel{justify-self:end;font-size:13px}
.cnempty{text-align:center;padding:30px 10px;display:grid;gap:6px;justify-items:center}.cnempty p{margin:0}.cnei{font-size:44px}
.cnempty .secondary{margin-top:10px}
.cnb.in,.cnr.in{color:var(--ok)}
.cnq{font-size:14.5px;line-height:1.6;color:var(--sub)}
.cnopts{display:grid;gap:8px}
.cnopt{display:grid;gap:2px;text-align:left;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--sky)}
.cnopt small{color:var(--sub);font-size:12.5px}.cnopt.in{border-color:var(--ok)}.cnopt.in small{color:var(--ok)}
.recact{display:flex;flex-wrap:wrap;gap:4px 14px}
.rec .rq{cursor:pointer}
.recmis{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.recmis .mredo{color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.mredo small,.redo small{color:var(--sub);font-size:11.5px}