/* =====================================================================
   Deno UI — 톤: 따뜻하고 귀엽지만 믿음직하게. 학습 화면은 깔끔, 칭찬·보상은 크게.
   색은 전부 토큰으로. 라이트/다크 2가지, 앱 주 색은 Deno 초록 하나. 자세한 원칙은 docs/UI.md
   ===================================================================== */
:root{
  /* 브랜드 고정색 */
  --green:#6ED7A9; --sky:#8EC5F5; --lav:#C6B6FF; --sun:#FFD166; --red:#D64545; --gold:#FFC23D;
  --night:#2E3A59; --night-2:#3A486B; --on-night:#F7F9F8; --on-night-2:#B9C3DA;
  /* 표면 · 글자 (라이트) */
  --bg:#FFFFFF; --card:#FFFFFF; --fill:#F0F3F1; --line:#E1E8E4; --line-2:#CBD3CE;
  --ink:#2E3A59; --ink-2:#3E4863; --muted:#5D6781;
  /* 근무별 색 */
  --d-soft:#E3F7EE; --d-ink:#1F6E4C; --e-soft:#E4F1FC; --e-ink:#22609A; --n-soft:#EEEAFF; --n-ink:#5B47B8; --o-soft:#FFF4D6; --o-ink:#7A5700;
  /* 정답 · 오답 */
  --ok:#1A7F57; --ok-soft:#E3F7EE; --ok-ink:#13603F; --no:#C53030; --no-soft:#FDECEA; --no-ink:#A7322B; --no-press:#9B2222;
  --fire:#C2410C; --xp:#9A6B00;
  /* 앱 주 색 = Deno 초록 (모든 공룡 같음) */
  --accent:#1A7F57; --accent-press:#13603F; --on-accent:#FFFFFF; --accent-soft:#E3F7EE; --accent-ink:#1F6E4C; --accent-bright:#6ED7A9;
  --display:'Jua',sans-serif; --body:'IBM Plex Sans KR',system-ui,sans-serif;
  --r-lg:24px; --r-md:16px; --r-sm:12px;
  color-scheme:light;
}

/* 다크 (나이트 근무 눈부심 줄이기) */
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#0F1522; --card:#1A2333; --fill:#232E42; --line:#2C3850; --line-2:#3B4863;
  --ink:#E8ECF4; --ink-2:#C9D1E0; --muted:#9AA6BD;
  --d-soft:#173A2E; --d-ink:#7FE0B5; --e-soft:#16324A; --e-ink:#9CCDF6; --n-soft:#2A2550; --n-ink:#C8BBFF; --o-soft:#3A2F12; --o-ink:#FFD98A;
  --ok:#4CC28A; --ok-soft:#173A2E; --ok-ink:#7FE0B5; --no:#F06A60; --no-soft:#3D1D1D; --no-ink:#FF9B91; --no-press:#C9483F;
  --fire:#FF8A3D; --xp:#FFD166;
  --accent:#6ED7A9; --accent-press:#3FAF80; --on-accent:#0B2A1E; --accent-soft:#173A2E; --accent-ink:#7FE0B5;}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere} /* 한국어는 낱말 단위로 줄바꿈 */
svg{flex-shrink:0}
button{font-family:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
img{display:block}
a{color:var(--e-ink)}
.hidden{display:none!important}
.display{font-family:var(--display);font-weight:400}
.muted{font-size:13px;color:var(--muted)}

/* ---------- 버튼: 눌리는 느낌(아래 그림자) ---------- */
.btn{min-height:54px;padding:0 24px;border:0;border-radius:var(--r-md);font-size:17px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .08s,box-shadow .08s,background .2s;letter-spacing:.2px}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:none!important}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 4px 0 var(--accent-press)}
.btn-mint{background:var(--green);color:#14382A;box-shadow:0 4px 0 #3FAF80}
.btn-ghost{background:var(--card);border:2px solid var(--line);color:var(--ink);box-shadow:0 4px 0 var(--line)}
.btn-danger{background:var(--no);color:#fff;box-shadow:0 4px 0 var(--no-press)}
.btn-block{width:100%}
.btn:disabled{background:var(--fill);color:var(--muted);box-shadow:0 4px 0 var(--line);cursor:not-allowed}

/* ---------- 온보딩 ---------- */
.onb{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.onb-dark{background:var(--night);color:var(--on-night)}
.onb-result{background:var(--bg)}
.topbar{display:flex;align-items:center;gap:12px;padding:16px 20px;max-width:1160px;width:100%;margin:0 auto}
.topbar .logo-img{width:36px;height:36px;border-radius:10px;object-fit:cover}
.topbar .logo{font-family:var(--display);font-size:26px}
.topbar .tag{font-size:11px;letter-spacing:4px;opacity:.7}
.onb-body{flex:1;width:100%;max-width:1160px;margin:0 auto;padding:16px 20px 32px;display:flex;flex-direction:column}
.intro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.intro h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(30px,6vw,44px);line-height:1.25}
.intro p{margin:0;color:#DDE3EF;font-size:17px}
.intro .btn{width:min(100%,360px)}
.intro .sub{font-size:14px;color:var(--on-night-2)}
.egg-ring{width:min(64vw,260px);aspect-ratio:1;border-radius:999px;background:radial-gradient(circle,rgba(110,215,169,.30) 0%,rgba(110,215,169,.10) 42%,transparent 68%);display:flex;align-items:center;justify-content:center;position:relative}
.egg-ring::before{content:'';position:absolute;inset:14%;border-radius:50%;border:2px dashed rgba(255,255,255,.12);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.egg-ring .egg{width:74%}
.egg-hint{position:relative;z-index:2;margin-bottom:-10px;background:#fff;color:var(--night);font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px;animation:bob 2s ease-in-out infinite}
.egg-hint::after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fff}

/* ---------- 알: 몸통(점프·흔들림) + 껍질(동그랗게) + 그림자 + 금 + 효과 ---------- */
.egg{position:relative;display:block;aspect-ratio:1;padding:0;border:0;background:none;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
button.egg{cursor:pointer}
button.egg:focus-visible{outline:3px solid var(--sky);outline-offset:6px;border-radius:50%}
.egg .body{position:absolute;inset:0;z-index:1;transform-origin:50% 92%;will-change:transform}
.egg .shell{position:absolute;inset:0} /* egg.webp = 3D 세트의 알(egg-0, 효과 없음). 반짝이는 CSS(.fx)로 따로 */
.egg .shell img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.egg .shadow{position:absolute;left:24%;right:24%;bottom:-2%;height:8%;border-radius:50%;background:rgba(8,14,30,.45);filter:blur(3px);will-change:transform,opacity}
.egg .crack{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.egg .crack path{fill:none;stroke:#4E3B2C;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s .2s ease-out}
.egg[data-crack="1"] .k1,.egg[data-crack="2"] :is(.k1,.k2),.egg[data-crack="3"] :is(.k1,.k2,.k3),.egg[data-crack="4"] .crack path{stroke-dashoffset:0}
/* 가만히: 3초마다 웅크렸다 살짝 점프 → 착지하며 찌그러짐 → 좌우로 흔들 */
.egg.idle .body{animation:egg-idle 3.2s linear infinite}
.egg.idle .shadow{animation:egg-idle-shadow 3.2s linear infinite}
@keyframes egg-idle{
  0%,52%{transform:none;animation-timing-function:ease-in-out}
  57%{transform:scale(1.07,.9);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  64%{transform:translateY(-14%) scale(.95,1.06);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  71%{transform:scale(1.08,.9);animation-timing-function:ease-out}
  76%{transform:rotate(-8deg)}82%{transform:rotate(6deg)}88%{transform:rotate(-3deg)}94%{transform:rotate(1.5deg)}100%{transform:none}}
@keyframes egg-idle-shadow{0%,52%,100%{transform:none;opacity:1}57%{transform:scaleX(1.1)}64%{transform:scale(.62);opacity:.5}71%{transform:scaleX(1.15);opacity:1}}
/* 톡 건드리면: 웅크림 → 높이 점프 → 쿵 착지 → 크게 흔들 (끝날 때까지 다시 안 눌림) */
.egg.hop .body{animation:egg-hop .9s linear}
.egg.hop .shadow{animation:egg-hop-shadow .9s linear}
@keyframes egg-hop{
  0%{transform:none;animation-timing-function:ease-out}
  10%{transform:scale(1.15,.84);animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  38%{transform:translateY(-40%) scale(.92,1.1) rotate(-7deg);animation-timing-function:cubic-bezier(.6,0,.9,.5)}
  58%{transform:scale(1.2,.8);animation-timing-function:ease-out}
  67%{transform:rotate(-12deg)}76%{transform:rotate(10deg)}84%{transform:rotate(-5deg)}92%{transform:rotate(2deg)}100%{transform:none}}
@keyframes egg-hop-shadow{0%,100%{transform:none;opacity:1}10%{transform:scaleX(1.2)}38%{transform:scale(.45);opacity:.3}58%{transform:scaleX(1.3);opacity:1}}
.egg .fx{position:absolute;inset:0;z-index:3;pointer-events:none}
.spark{position:absolute;left:50%;top:45%;width:14px;height:14px;margin:-7px;border-radius:50%;box-shadow:0 0 8px currentColor;animation:spark .95s cubic-bezier(.15,.8,.3,1) forwards}
.spark:nth-child(3n){width:10px;height:10px;margin:-5px;border-radius:3px}
@keyframes spark{0%{transform:translate(0,0) scale(.4);opacity:0}12%{opacity:1;transform:translate(calc(var(--dx)*.3),calc(var(--dy)*.3)) scale(1.35)}65%{opacity:1;transform:translate(calc(var(--dx)*.85),calc(var(--dy)*.85)) scale(1)}100%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.egg .tok{position:absolute;left:50%;top:-30%;font-family:var(--display);font-size:34px;line-height:1;color:var(--sun);white-space:nowrap;
  text-shadow:-2px -2px 0 var(--night),2px -2px 0 var(--night),-2px 2px 0 var(--night),2px 2px 0 var(--night),0 4px 0 var(--night);animation:tok .9s ease-out forwards}
@keyframes tok{0%{opacity:0;transform:translate(-50%,14px) scale(.5)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.3)}38%{transform:translate(-50%,0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px)}}
.egg .ring{position:absolute;left:12%;right:12%;bottom:-6%;height:18%;border-radius:50%;border:3px solid rgba(255,255,255,.75);opacity:0;animation:ring .55s ease-out .47s forwards}
@keyframes ring{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(1.7)}}
/* 부화: 점점 세게 흔들림 → 껍질 위아래로 갈라짐 → 공룡 튀어나옴 */
.egg .half.top{clip-path:polygon(0 0,100% 0,100% 48%,70% 48%,63% 54%,56% 47%,50% 55%,43% 46%,37% 55%,30% 49%,0 49%)}
.egg .half.bot{clip-path:polygon(0 49%,30% 49%,37% 55%,43% 46%,50% 55%,56% 47%,63% 54%,70% 48%,100% 48%,100% 100%,0 100%)}
.egg .born{position:absolute;left:5%;right:5%;bottom:2%;width:90%;aspect-ratio:1;object-fit:contain;z-index:2;opacity:0;transform:scale(.2) translateY(30%)}
.egg.hatch .body{animation:egg-hatch 1.6s linear forwards}
@keyframes egg-hatch{
  0%{transform:none}6%{transform:rotate(-6deg)}12%{transform:rotate(6deg)}18%{transform:rotate(-4deg)}24%{transform:none}
  30%{transform:scale(1.08,.9)}38%{transform:translateY(-10%) rotate(-10deg)}44%{transform:scale(1.1,.88)}
  50%{transform:rotate(12deg)}55%{transform:rotate(-12deg)}60%{transform:rotate(13deg)}64%{transform:rotate(-14deg)}
  68%{transform:translateX(-5%) rotate(15deg)}72%{transform:translateX(5%) rotate(-15deg)}76%{transform:translateX(-5%) rotate(15deg)}80%{transform:translateX(4%) rotate(-12deg)}
  88%{transform:translateY(-12%) scale(1.06)}100%{transform:scale(1.08,.94)}}
.egg.open .half.top{animation:shell-top .75s cubic-bezier(.2,.7,.4,1) forwards}
.egg.open .half.bot{animation:shell-bot .75s ease-in forwards}
.egg.open .born{animation:born .8s cubic-bezier(.2,1.5,.4,1) .12s forwards}
.egg.open .shadow{animation:none;transform:scale(1.25)}
@keyframes shell-top{0%{transform:scale(1.14,.93)}40%{transform:translate(-14%,-58%) rotate(-28deg) scale(1.14,.93);opacity:1}100%{transform:translate(-40%,-90%) rotate(-60deg) scale(1,.8);opacity:0}}
@keyframes shell-bot{0%{transform:scale(1.14,.93)}100%{transform:translateY(16%) scale(1.2,.85);opacity:0}}
@keyframes born{0%{opacity:0;transform:scale(.2) translateY(30%)}55%{opacity:1;transform:scale(1.15) translateY(-14%)}75%{transform:scale(.95,1.05) translateY(0)}100%{opacity:1;transform:none}}
.burst{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(circle at 50% 42%,#fff 0,rgba(255,255,255,.92) 18%,rgba(255,240,200,.5) 40%,transparent 70%);animation:burst .85s ease-out forwards}
@keyframes burst{0%{opacity:0;transform:scale(.6)}20%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}

/* 설문 */
.survey{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch;flex:1}
.q-card{flex:999 1 480px;min-width:0;background:#fff;color:#2E3A59;border-radius:28px;padding:clamp(22px,4vw,36px);display:flex;flex-direction:column;gap:20px;animation:rise .4s ease}
.dots{display:flex;align-items:center;gap:8px}
.dot{width:12px;height:12px;border-radius:999px;background:#D6DED9;transition:all .25s}
.dot.on{background:#1A7F57}
.dot.cur{width:36px}
.dots .count{margin-left:auto;font-size:14px;font-weight:700;color:#5D6781}
.q-tag{font-size:14px;font-weight:700;color:#1A7F57}
.q-text{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(26px,4.4vw,36px);line-height:1.3}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
/* 공룡 고르기: 2×2, 그림 위·이름 아래. 지금 공룡(바꾸기)은 초록 테두리 */
.opts.dino-pick{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt.dino-opt{min-height:0;padding:14px 10px;align-items:center;text-align:center;gap:2px}
.opt.dino-opt img{width:min(104px,100%);aspect-ratio:1;object-fit:contain;margin-bottom:4px}
.opt.dino-opt b{font-size:17px}
.opt.dino-opt span{font-size:13px}
.opt.dino-opt[aria-pressed="true"]{border-color:var(--accent)}
.opt{min-height:96px;padding:18px 20px;text-align:left;background:#F5F7F6;border:2px solid #E1E8E4;border-radius:20px;display:flex;flex-direction:column;justify-content:center;gap:4px;box-shadow:0 4px 0 #E1E8E4;transition:transform .08s,border-color .15s}
.opt:hover{border-color:#1A7F57}
.opt:active{transform:translateY(4px);box-shadow:none}
.opt b{font-size:18px}
.opt span{font-size:15px;color:#5D6781}
.opt.has-img{flex-direction:row;align-items:center;gap:14px}
.opt.has-img>img{width:64px;height:64px;object-fit:contain;flex-shrink:0}
.opt.has-img>div{display:flex;flex-direction:column;gap:4px}
.q-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:#6B7590}
.q-foot button{background:none;border:0;font-size:14px;font-weight:700;color:#5D6781;min-height:44px;padding:0 4px;white-space:nowrap;flex-shrink:0}
.egg-panel{flex:1 1 320px;min-width:0;border-radius:28px;background:var(--night-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;text-align:center}
.egg-panel .egg{width:min(48vw,220px)}
.egg-panel .line{font-family:var(--display);font-size:24px}
.egg-panel .hint{font-size:14px;color:var(--on-night-2)}

/* 부화 중 */
.hatching{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center}
.hatch-sub{color:var(--on-night-2)}
.hatch-title{font-size:30px}
.hatching .bar{width:min(70vw,260px);height:10px;border-radius:999px;background:var(--night-2);overflow:hidden}
.hatching .bar i{display:block;height:100%;width:0;background:var(--green);transition:width 1.6s ease}

/* 결과 */
.result{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch;align-content:center;flex:1}
.res-card{flex:1 1 340px;min-width:0;border-radius:28px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:var(--accent-soft);color:var(--ink);animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.res-card img{width:min(56vw,230px);aspect-ratio:1;object-fit:contain;animation:bob 2.6s ease-in-out infinite}
.res-card .title{font-size:15px;font-weight:700;color:var(--accent-ink)}
.res-card .name{font-family:var(--display);font-size:42px;line-height:1.1}
.res-card .kind{font-size:15px;color:var(--ink-2)}
.res-side{flex:999 1 420px;min-width:0;background:var(--card);border-radius:28px;padding:clamp(22px,4vw,32px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.res-side h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(26px,4vw,34px)}
.facts{display:flex;flex-direction:column;gap:10px}
.fact{display:flex;gap:14px;padding:12px 16px;background:var(--fill);border-radius:14px;font-size:15px}
.fact b{width:76px;flex-shrink:0;color:var(--muted)}
.fact{align-items:center}
.fact .seg{flex:1;padding:3px}
.fact .seg button{min-height:40px}
.fact-note{font-size:13px;padding:0 4px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:700;color:var(--muted)}
.field input,.tinput{height:52px;padding:0 16px;border-radius:14px;border:2px solid var(--line);font:inherit;font-size:17px;color:var(--ink);background:var(--card)}
.field input:focus,.tinput:focus{border-color:var(--accent);outline:none}
.field input[aria-invalid=true]{border-color:var(--no)}
.field-err{min-height:20px;font-size:13px;font-weight:700;color:var(--no-ink)}
.res-actions{display:flex;gap:10px;flex-wrap:wrap}
.res-actions .btn-primary{flex:1 1 160px}
.res-actions .btn-ghost{flex:0 0 auto;padding:0 18px}

/* ---------- 앱 틀 ---------- */
.app{min-height:100vh;min-height:100dvh;display:flex}
.side{width:236px;flex-shrink:0;background:var(--card);border-right:2px solid var(--line);padding:24px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}
.side .brand{display:flex;align-items:center;gap:10px;padding:0 10px 20px}
.side .brand img{width:36px;height:36px;border-radius:10px;object-fit:cover}
.side .brand span{font-family:var(--display);font-size:28px;color:var(--accent-ink)}
.nav-btn{display:flex;align-items:center;gap:14px;min-height:50px;padding:0 14px;border-radius:14px;border:2px solid transparent;background:transparent;color:var(--muted);font-size:15px;font-weight:700;text-align:left;width:100%}
.nav-btn svg{width:22px;height:22px;flex-shrink:0}
.nav-btn:hover{background:var(--fill)}
.nav-btn.active{background:var(--accent-soft);border-color:var(--accent-bright);color:var(--accent-ink)}
.main{flex:1;min-width:0;padding:28px clamp(16px,3vw,44px) 48px;display:flex;flex-direction:column;gap:20px;max-width:1180px}
.tabbar{display:none}
.playing .side{display:none} /* 레슨 중엔 옆 메뉴도 숨겨 문제·결과 시트가 가운데에 */
.units,.grade-card,.memo-bar,.memo-list{max-width:760px;width:100%} /* PC에서 목록이 화면 끝까지 늘어나지 않게 */
.main > *{animation:rise .35s ease both}
.main > *:nth-child(2){animation-delay:.04s}.main > *:nth-child(3){animation-delay:.08s}.main > *:nth-child(4){animation-delay:.12s}.main > *:nth-child(5){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.head .hello{font-size:15px;color:var(--muted)}
.head h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(26px,3.6vw,34px);line-height:1.25}
.shift{display:flex;gap:4px;background:var(--fill);padding:4px;border-radius:14px}
.shift button{white-space:nowrap;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:15px;font-weight:700}
.shift button[aria-pressed="true"]{background:var(--card);box-shadow:0 2px 0 var(--line)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px} /* 좁은 폰·큰 글씨에서도 한 줄로 접힘 */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.card h3{margin:0;font-size:17px;font-weight:700}
.badge{font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px}
.row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.row:last-child{border-bottom:0}
.ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ico svg{width:22px;height:22px}
.learn{border:2px solid var(--line);text-align:left;background:var(--card);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:8px;min-height:44px;box-shadow:0 4px 0 var(--line);transition:transform .08s}
.learn:active{transform:translateY(4px);box-shadow:none}
.learn b{font-size:17px}
.learn span{font-size:14px;color:var(--muted)}

.stat{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;background:var(--card);border:2px solid var(--line);font-weight:700;font-size:15px}
.stat svg{width:20px;height:20px}
.stat.fire{color:var(--fire)}.stat.fire.off{color:var(--muted)}
button.stat{font:inherit;font-weight:700;cursor:pointer}
.stat-t{color:var(--ink);font-size:14px}.stat-t b{color:var(--fire)}.stat.off .stat-t b{color:var(--muted)}
.flame{animation:flicker 1.4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes flicker{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.08,.95) rotate(-3deg)}60%{transform:scale(.96,1.06) rotate(2deg)}}

/* 내 공룡 카드 */
.dino-card{display:flex;gap:14px;align-items:center;flex-direction:row}
.dino-card img{width:118px;height:118px;object-fit:contain;flex-shrink:0;animation:bob 2.8s ease-in-out infinite;cursor:pointer}
.dino-card img.cheer{animation:cheer .6s ease}
@keyframes cheer{0%,100%{transform:none}30%{transform:translateY(-18px) rotate(-6deg)}60%{transform:translateY(0) scale(1.06,.94)}}
.dino-card .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.dino-card .nm{font-family:var(--display);font-size:24px;line-height:1.1}
.dino-card .nm small{font-family:var(--body);font-size:13px;font-weight:700;margin-left:6px;color:var(--accent-ink)}
.xp{height:10px;border-radius:999px;background:var(--fill);overflow:hidden}
.xp i,.prog i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .7s cubic-bezier(.2,.8,.3,1);position:relative}
.xp i::after,.prog i::after{content:'';position:absolute;left:6px;right:6px;top:3px;height:3px;border-radius:3px;background:rgba(255,255,255,.35)}
.bubble{background:var(--fill);border-radius:12px;padding:8px 11px;font-size:14px;line-height:1.5;position:relative}
.prog{height:14px;border-radius:999px;background:var(--fill);overflow:hidden}
.goal{font-family:var(--display);font-size:28px;line-height:1.2}
.goal-cnt{font-size:14px;color:var(--ink-2)}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center;font-size:12px;color:var(--muted)}
.week div{display:flex;flex-direction:column;gap:4px}
.week i{height:26px;border-radius:8px;background:var(--fill)}
.week i.full{background:var(--accent)}
.week i.half{background:var(--accent-bright);opacity:.6}
.week i.today{background:transparent;border:2px dashed var(--accent)}

/* 일일 퀘스트 */
.quest{display:flex;align-items:center;gap:12px}
.quest .q-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:700}
.quest .prog{height:12px}
.quest .prog i{background:var(--gold)}
/* 보상 상자: 잠김 흐림 → 열 수 있음 흔들림 + 금빛 테두리 → 받음 뚜껑 열림 */
.chest{width:56px;height:52px;padding:6px;border-radius:16px;flex-shrink:0;display:block}
.chest img{width:44px;height:40px;display:block;object-fit:contain;transform:scale(1.15)}
.chest:not(.ready):not(.got) img{filter:saturate(.55);opacity:.5}
.chest.ready{background:var(--o-soft);box-shadow:0 0 0 2px var(--gold)}
.q-get{min-width:84px;min-height:44px;padding:0 14px;border:0;border-radius:12px;font:inherit;font-size:14px;font-weight:700;white-space:nowrap;flex-shrink:0;cursor:pointer;background:var(--accent);color:var(--on-accent);box-shadow:0 3px 0 var(--accent-press);display:inline-flex;align-items:center;justify-content:center;gap:4px}
.q-get:disabled{cursor:default;background:var(--fill);color:var(--muted);box-shadow:none}
.q-get.got{background:transparent;color:var(--ok-ink);padding:0 6px}
.q-get svg{width:16px;height:16px}
.chest.ready{animation:wiggle 1.2s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}10%{transform:rotate(-8deg)}20%{transform:rotate(8deg)}30%{transform:rotate(-4deg)}40%{transform:rotate(0)}}

/* ---------- 학습 탭 ---------- */
.subtabs{display:flex;gap:6px;flex-wrap:wrap}
.subtabs button{min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:var(--card);font-size:14px;font-weight:700;color:var(--muted)}
.subtabs button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.src{font-size:13px;color:var(--muted)}
.src a{color:var(--e-ink)}

/* ---------- 문제 풀이 ---------- */
.play{max-width:720px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:18px;padding-bottom:220px}
.play-top{display:flex;align-items:center;gap:12px}
.play-top .x{width:44px;height:44px;border-radius:12px;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center}
.play-top .x svg{width:26px;height:26px}
.play-top .prog{flex:1;height:16px}
.combo{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--fire);min-width:44px;font-size:16px}
.combo svg{width:20px;height:20px}
.combo.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.cat{font-size:13px;font-weight:700;color:var(--accent-ink);display:flex;align-items:center;gap:8px}
.tag-new{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--lav);color:#2E2457}
.tag-retry{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--o-soft);color:var(--o-ink)}
.stem{margin:0;font-size:clamp(21px,3vw,26px);font-weight:700;line-height:1.45}
.big-term{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:clamp(30px,6vw,40px);line-height:1.2;word-break:break-word}
.case{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:16px 18px;font-size:16px;line-height:1.7}
.choices{display:flex;flex-direction:column;gap:12px}
.choice{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;text-align:left;font-size:16px;background:var(--card);border:2px solid var(--line);border-radius:16px;box-shadow:0 4px 0 var(--line);transition:transform .08s,border-color .15s,background .15s}
.choice:active:not(:disabled){transform:translateY(4px);box-shadow:none}
.choice .k{flex-shrink:0;width:30px;height:30px;border-radius:9px;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--muted)}
.choice.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 4px 0 var(--accent-bright)}
.choice.sel .k{border-color:var(--accent);color:var(--accent-ink)}
.choice.ok{border-color:var(--ok);background:var(--ok-soft);box-shadow:0 4px 0 var(--ok)}
.choice.no{border-color:var(--no);background:var(--no-soft);box-shadow:0 4px 0 var(--no);animation:shake .4s ease}
.choice:disabled{cursor:default}
.choice .why{display:block;font-size:13px;color:var(--muted);margin-top:2px}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.tf{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tf .choice{justify-content:center;font-size:30px;font-family:var(--display);min-height:96px}
.statement{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:18px;font-size:clamp(20px,4vw,24px);font-weight:700;text-align:center}
/* 조립 */
.slots{min-height:66px;border-bottom:2px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding-bottom:10px}
.slots.empty::before{content:'아래 조각을 순서대로 눌러요';color:var(--muted);font-size:14px;align-self:center}
.bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:56px}
.tile{min-height:48px;padding:0 16px;border-radius:14px;border:2px solid var(--line);background:var(--card);box-shadow:0 4px 0 var(--line);font-size:17px;font-weight:700;transition:transform .08s;animation:pop .2s ease}
.tile:active:not(:disabled){transform:translateY(4px);box-shadow:none}
.tile.used{visibility:hidden}
.tile small{display:block;font-size:11px;color:var(--muted);font-weight:500}
.hint-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--muted)}
.hint-chips span{background:var(--fill);padding:4px 10px;border-radius:999px;color:var(--ink-2);font-weight:700}
/* 짝 맞추기 */
.match{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.match .col{display:flex;flex-direction:column;gap:12px}
.mt{min-height:58px;padding:8px 10px;border-radius:16px;border:2px solid var(--line);background:var(--card);box-shadow:0 4px 0 var(--line);font-size:15px;font-weight:700;line-height:1.3;transition:transform .08s,opacity .3s}
.mt.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 4px 0 var(--accent-bright)}
.mt.hit{border-color:var(--ok);background:var(--ok-soft);animation:pop .3s ease}
.mt.gone{opacity:.25;box-shadow:none;cursor:default}
.mt.miss{border-color:var(--no);background:var(--no-soft);animation:shake .4s ease}
/* 아래에서 올라오는 결과 시트 */
.check-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:2px solid var(--line);padding:16px clamp(16px,4vw,40px) calc(16px + env(safe-area-inset-bottom))}
.check-bar .in{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.check-bar.ok{background:var(--ok-soft);border-color:transparent;animation:sheet .25s ease}
.check-bar.no{background:var(--no-soft);border-color:transparent;animation:sheet .25s ease}
@keyframes sheet{0%{transform:translateY(100%)}65%{transform:translateY(-6px)}100%{transform:none}}
.fb-head{display:flex;align-items:center;gap:12px}
.fb-head img{width:56px;height:56px;object-fit:contain;flex-shrink:0}
.check-bar.ok .fb-head img{animation:cheer .6s ease}
.check-bar.no .fb-head img{animation:shake .5s ease}
.fb-head b{font-size:20px;font-family:var(--display);font-weight:400}
.check-bar.ok .fb-head b{color:var(--ok-ink)}
.check-bar.no .fb-head b{color:var(--no-ink)}
.fb-head b small{display:block;font-family:var(--body);font-size:13px;font-weight:700;color:var(--ink-2)}
.fb-ex .fb-more>.fb-parts{margin:4px 0 6px}
.fb-ex{max-height:24vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.check-bar.ok .btn-primary{background:var(--ok);color:#fff;box-shadow:0 4px 0 var(--ok-ink)}
:root[data-theme=dark] .check-bar.ok .btn-primary{color:#0B2A1E}
.check-bar.no .btn-primary{background:var(--no);color:#fff;box-shadow:0 4px 0 var(--no-press)}
:root[data-theme=dark] .check-bar.no .btn-primary,:root[data-theme=dark] .btn-danger{color:#2A0D0B}
.combo-pop{position:fixed;left:50%;top:22%;z-index:40;transform:translateX(-50%);font-family:var(--display);font-size:clamp(30px,7vw,44px);color:var(--fire);white-space:nowrap;pointer-events:none;
.combo-pop img{width:1.3em;height:1.3em;object-fit:contain;vertical-align:-.3em;margin-right:4px}
  text-shadow:-2px -2px 0 var(--card),2px -2px 0 var(--card),-2px 2px 0 var(--card),2px 2px 0 var(--card);animation:combo-pop 1.1s ease forwards}
@keyframes combo-pop{0%{opacity:0;transform:translate(-50%,20px) scale(.5)}25%{opacity:1;transform:translate(-50%,0) scale(1.15)}70%{opacity:1;transform:translate(-50%,-6px) scale(1)}100%{opacity:0;transform:translate(-50%,-30px)}}
/* 레슨 끝 · 연속 기록 화면 */
.done{align-items:center;text-align:center;padding:28px 22px;gap:14px}
.done h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(30px,6vw,40px);color:var(--accent-ink)}
.done img.dino{width:170px;height:170px;object-fit:contain;animation:cheer .8s ease .2s 2}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.tile-stat{border-radius:16px;border:2px solid var(--gold);overflow:hidden;text-align:center;animation:pop .4s ease both}
.tile-stat:nth-child(2){border-color:var(--accent);animation-delay:.12s}.tile-stat:nth-child(3){border-color:var(--sky);animation-delay:.24s}
.tile-stat small{display:block;background:var(--gold);color:#3D2A00;font-size:12px;font-weight:700;padding:4px}
.tile-stat:nth-child(2) small{background:var(--accent);color:var(--on-accent)}.tile-stat:nth-child(3) small{background:var(--sky);color:#0B2236}
.tile-stat b{display:block;font-size:22px;padding:10px 4px;font-family:var(--display);font-weight:400}
/* 나 › 성장 기록 숫자: 보상 화면이 아니라 기록이라 차분하게(색 머리 없이 숫자 먼저) */
.tiles.plain .tile-stat,.tiles.plain .tile-stat:nth-child(n){display:flex;flex-direction:column-reverse;border:1px solid var(--line);background:var(--card);animation:none;padding:12px 4px}
.tiles.plain .tile-stat small,.tiles.plain .tile-stat:nth-child(n) small{background:none;color:var(--muted);padding:0}
.tiles.plain .tile-stat b{padding:0 4px 2px}
.streak-big{font-family:var(--display);font-size:96px;line-height:1;color:var(--fire);animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
.streak-big img{width:120px;height:120px;display:block;margin:0 auto;object-fit:contain}
.exam-res{width:100%;padding:12px 14px;border-radius:14px;font-size:15px;text-align:left}
.exam-res.pass{background:var(--ok-soft);color:var(--ok-ink)}
.exam-res.fail{background:var(--o-soft);color:var(--o-ink)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:14px;border-radius:2px;animation:fall var(--t,1.8s) cubic-bezier(.3,.6,.5,1) var(--d,0s) forwards}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--x,0),105vh) rotate(var(--r,540deg))}}

/* ---------- 모달 · 토스트 ---------- */
.modal{position:fixed;inset:0;z-index:55;background:rgba(10,14,24,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.modal-card{width:min(440px,100%);background:var(--card);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:14px;animation:sheet .25s ease;margin-bottom:env(safe-area-inset-bottom)}
.modal-card h2{margin:0;font-family:var(--display);font-weight:400;font-size:24px}
@media (min-width:861px){.modal{align-items:center}}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:var(--night);color:#fff;padding:12px 18px;border-radius:14px;font-size:15px;opacity:0;pointer-events:none;transition:all .3s;z-index:70;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.err{background:var(--no);color:#fff}

/* ---------- 설정 · 알림 · 친구 ---------- */
.set-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;padding:12px 0;border-bottom:1px solid var(--line)} /* 좁거나 글씨가 크면 입력칸이 아래 줄로 */
.set-row:last-child{border-bottom:0}
.set-row .lbl{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 150px}
.set-row .lbl b{font-size:15px;word-break:keep-all}
.set-row .lbl span{font-size:13px;color:var(--muted)}
.sw{position:relative;width:52px;height:32px;flex-shrink:0;border:0;border-radius:999px;background:var(--line-2);padding:0;transition:background .2s}
.sw::after{content:'';position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .2s}
.sw[aria-checked="true"]{background:var(--accent)}
.sw[aria-checked="true"]::after{left:24px}
.sw:disabled{opacity:.4;cursor:not-allowed}
.tm{height:44px;padding:0 10px;border-radius:12px;border:2px solid var(--line);font:inherit;font-size:15px;color:var(--ink);background:var(--card)}
.tm:focus{border-color:var(--accent);outline:none}
.tm{max-width:100%;min-width:0}
.set-row > div:last-child{flex-wrap:wrap;max-width:100%} /* 시간 두 칸이 좁으면 두 줄로 */
.seg{display:flex;gap:4px;background:var(--fill);padding:4px;border-radius:14px;flex-wrap:wrap}
.seg button{flex:1;white-space:nowrap;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;font-size:14px;font-weight:700;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 2px 0 var(--line)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dh{font-size:12px;color:var(--muted);text-align:center}
.cal button{min-height:48px;border-radius:12px;border:2px solid transparent;font-family:var(--display);font-size:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;padding:4px 0}
.cal button small{font-family:var(--body);font-size:10px;opacity:.75}
.cal button.today{border-color:var(--ink)}
.chipx{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 6px 0 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:14px}
.chipx button{width:32px;height:32px;border-radius:999px;border:0;background:transparent;color:inherit;font-size:16px;line-height:1}
.tl{position:relative;height:56px;border-radius:12px;background:var(--fill);overflow:hidden;margin-top:6px}
.tl .blk{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 4px}
.tl .pin{position:absolute;top:6px;bottom:6px;width:4px;margin-left:-2px;border-radius:4px}
.tl .now{position:absolute;top:0;bottom:0;width:2px;background:var(--ink)}
.tl-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:-2px;margin-right:4px}
.plan{display:flex;flex-direction:column;gap:8px}
.plan .it{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--fill);font-size:14px}
.plan .it b{width:52px;flex-shrink:0;font-size:15px}
.plan .st{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:auto;flex-shrink:0}
.plan .kind{font-weight:700}
.plan .msg{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.lockscreen{background:linear-gradient(160deg,#2E3A59,#46557d);border-radius:28px;padding:22px 16px;display:flex;flex-direction:column;gap:10px;color:#fff}
.lockscreen .clock{text-align:center;font-size:44px;font-weight:300;letter-spacing:1px;line-height:1}
.lockscreen .date{text-align:center;font-size:13px;opacity:.8;margin-bottom:6px}
.push{background:rgba(255,255,255,.92);color:#2E3A59;border-radius:18px;padding:10px 12px;display:flex;gap:10px;align-items:flex-start;animation:pop .4s ease}
.push img{width:36px;height:36px;border-radius:9px;object-fit:cover;flex-shrink:0}
.push .h{display:flex;justify-content:space-between;font-size:12px;color:#5D6781}
.push b{font-size:14px;display:block}
.push p{margin:0;font-size:14px;line-height:1.45}
.demo-clock{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border:2px dashed var(--line-2);border-radius:16px;padding:10px 14px;font-size:14px}
.demo-clock input[type=range]{flex:1;min-width:140px;accent-color:var(--accent);height:32px}
.demo-clock b{font-family:var(--display);font-size:22px;min-width:64px}
.fr{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.fr:last-child{border-bottom:0}
.fr img{width:52px;height:52px;object-fit:contain;flex-shrink:0;border-radius:14px;background:var(--fill)}
.fr .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fr .who b{font-size:16px}
.fr .who span{font-size:13px;color:var(--muted)}
.fr.pending{opacity:.75}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;width:max-content}
.status i{width:8px;height:8px;border-radius:999px;background:currentColor}
.nudge{min-height:44px;padding:0 14px;border-radius:12px;border:0;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:700;flex-shrink:0;box-shadow:0 3px 0 var(--accent-press)}
.nudge:active:not(:disabled){transform:translateY(3px);box-shadow:none}
.nudge:disabled{background:var(--fill);color:var(--muted);box-shadow:none}
.nudge.no{background:var(--fill);color:var(--ink-2);box-shadow:0 3px 0 var(--line-2)}
.lb{display:flex;align-items:center;gap:12px;font-size:15px;padding:6px 10px;margin:0 -10px;border-radius:12px}
.lb img{width:36px;height:36px;object-fit:contain}
.lb .n{flex:1}
.code-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.code-box code{font-family:var(--display);font-size:24px;letter-spacing:2px;background:var(--fill);padding:8px 14px;border-radius:12px}
.offmatch{display:grid;grid-template-columns:72px repeat(7,minmax(0,1fr));gap:4px;align-items:center;font-size:12px}
.offmatch .c{height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:14px}
.offmatch .both{outline:3px solid var(--gold);outline-offset:-3px}
.link-card{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:14px;border-radius:16px;background:var(--fill)}
.link-card > div{flex:1 1 140px;min-width:0}
.link-card .logo{width:44px;height:44px;flex-shrink:0;display:block}
.pick{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:2px solid var(--line);background:var(--card);cursor:pointer}
.pick input{width:22px;height:22px;accent-color:var(--accent);flex-shrink:0}
.pick img{width:40px;height:40px;object-fit:contain}
.pick:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.req{background:var(--accent-soft);border-color:transparent}

/* ---------- 홈 (A안 · 카드형) ---------- */
.home-head{flex-wrap:nowrap;align-items:flex-start}
.home-head .stat{flex-shrink:0}
.home{display:flex;flex-direction:column;gap:12px}
/* 태블릿(PC 두 칸 전): 카드가 화면 끝까지 늘어나지 않게 가운데 한 줄 */
@media (min-width:600px) and (max-width:1060px){.main>*{width:100%;max-width:600px;margin-left:auto;margin-right:auto}}
.home>div{display:flex;flex-direction:column;gap:12px;min-width:0}
/* PC: 두 칸을 줄마다 같은 높이로 (왼쪽·오른쪽 카드 끝선이 맞게) */
@media (min-width:1061px){
  .home{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:0;align-items:stretch;
    grid-template-areas:"cont goal" "cont wk" "extra extra" "inbox inbox" "dino quick" "quest quest"}
  .home>div{margin-bottom:16px}
  .h-wk{grid-area:wk}.h-goal{grid-area:goal}.h-inbox{grid-area:inbox}.h-dino{grid-area:dino}.h-quick{grid-area:quick}.h-extra{grid-area:extra}.h-cont{grid-area:cont}.h-quest{grid-area:quest}
  .home>div>:last-child{flex:1}
  .home .cont .btn{margin-top:auto}
  .home .quick .q-row{flex:1}
  .home #quests{justify-content:space-between}
}
.wk{gap:8px;padding:12px 14px;text-align:left;font:inherit;color:inherit;width:100%}
button.wk{cursor:pointer;transition:transform .08s}
button.wk:active{transform:translateY(2px)}
.wk-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.wk-h .muted{font-weight:400}
.wk-d{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center;font-size:12px;color:var(--muted)}
.wk-d .now{font-weight:700;color:var(--ink)}
.wk-d .c{height:32px;border-radius:9px;font-family:var(--display);font-size:16px;display:flex;align-items:center;justify-content:center;background:var(--fill);color:var(--muted)} /* 오늘만 근무색으로 채우고 나머지는 회색(읽히는 대비는 유지) */
.wk-d .c.today{color:var(--card);font-size:17px;box-shadow:0 3px 8px rgba(46,58,89,.18)}
.dday{background:var(--n-soft);border-color:transparent;gap:2px;text-align:left;font:inherit;color:inherit;width:100%}
button.dday{cursor:pointer}
.dd-k{font-size:13px;font-weight:700;color:var(--n-ink)}
.dd-n{font-family:var(--display);font-size:40px;line-height:1.1;color:var(--n-ink)}
.dd-s{font-size:13px;color:var(--ink-2)}
.dd-t{font-size:16px}
.dd-in{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.dd-in .tm{flex:1;min-width:150px}
.cont{background:var(--accent-soft);border-color:transparent;gap:10px}
.cont-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cont-k{font-size:13px;font-weight:700;color:var(--accent-ink)}
.cont-t{display:block;font-size:19px;font-weight:700}
.cont-s{display:block;font-size:14px;color:var(--ink-2)}
.segs{display:flex;gap:6px}
.segs i{flex:1;height:7px;border-radius:999px;background:rgba(46,58,89,.12)}
:root[data-theme=dark] .segs i{background:rgba(232,236,244,.14)}
.segs i.on{background:var(--accent)}
.goal-a{flex-direction:row;align-items:center;gap:16px}
.ring{position:relative;width:72px;height:72px;flex-shrink:0}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:7}
.ring .tr{stroke:var(--fill)}
.ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dasharray .8s}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px}
.goal-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.goal-h{display:flex;justify-content:space-between;align-items:baseline;gap:4px 8px;flex-wrap:wrap}
.goal-h b{font-size:16px}
.link{border:0;background:none;padding:0;min-height:32px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.week.bars{gap:4px}
.week.bars i{height:8px;border-radius:4px}
.week.bars i.today{border-width:1.5px}
.week .now{font-weight:700;color:var(--ink)}
/* 바로가기: 차분한 목록 3줄 */
.quick{padding:0;gap:0;overflow:hidden}
.q-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;font:inherit;color:var(--ink);width:100%}
.q-row:last-child{border-bottom:0}
.q-row:active{background:var(--fill)}
.q-row svg{width:20px;height:20px;color:var(--ink-2)}
.q-row b{flex:1;font-size:15px;font-weight:500}
.q-row span{font-size:13px;color:var(--muted)}
.q-row svg:last-child{width:16px;height:16px;color:var(--line-2)}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.btn-sm{min-height:40px;padding:0 14px;font-size:14px;border-radius:12px;flex-shrink:0}
.btn-sm.btn-primary{box-shadow:0 3px 0 var(--accent-press)}
.btn-sm.btn-ghost{box-shadow:0 3px 0 var(--line)}

/* ---------- 학습: 등급 카드 + 단원 목록 ---------- */
.gc-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.gc-h b{font-size:17px}
.units{display:flex;flex-direction:column;gap:8px}
.unit-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:var(--card)}
.unit-row.is-cur{background:var(--accent-soft);border-color:transparent}
.unit-row .dot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--fill);color:var(--line-2)}
.unit-row .dot svg{width:20px;height:20px}
.unit-row.is-done .dot{background:var(--gold);color:#5A3D00}
.unit-row.is-cur .dot{background:var(--accent);color:var(--on-accent)}
/* 단원 그림: 동그라미 없이 그림만. 잠긴 단원은 흐리게 */
.unit-row .dot.u-img{width:44px;height:44px;background:none}
.unit-row .dot.u-img img{width:44px;height:44px;object-fit:contain}
.unit-row.is-lock .dot.u-img img{filter:grayscale(.8);opacity:.45}
.ur-b{flex:1;min-width:0;display:flex;flex-direction:column}
.ur-b small{font-size:11px;font-weight:700;color:var(--muted)}
.ur-b b{font-size:15px}
.ur-b span{font-size:12px;color:var(--muted)}
.unit-row.is-lock .ur-b b{color:var(--muted)}

/* ---------- 결과 시트: 정답 크게, 해설은 괄호 안 작게 ---------- */
.fb-ans{background:var(--card);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.fb-ans small{font-size:12px;font-weight:700}
.check-bar.ok .fb-ans small{color:var(--ok-ink)}
.check-bar.no .fb-ans small{color:var(--no-ink)}
.fb-ans strong{font-size:24px;line-height:1.25;font-weight:700;color:var(--ink)}
.fb-ans.long strong{font-size:17px;line-height:1.45}
.fb-ans span{font-size:15px;color:var(--ink-2)}
.fb-why{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.fb-why b.em{color:var(--ok-ink);font-weight:700} /* 정답·핵심어 */
.fb-why b.num{color:var(--e-ink);font-weight:700} /* 수치 */
.fb-src{color:var(--muted)}
.df-logo{align-self:flex-start;width:56px;height:56px;display:block}
.fb-why.plain{font-size:15px;color:var(--ink-2)}
.fb-caution{font-size:13px;line-height:1.5;color:var(--no-ink)}
/* 정답·오답 효과 */
.fx-burst{position:fixed;width:0;height:0;z-index:35;pointer-events:none}
.pop{animation:ok-pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes ok-pop{0%{transform:scale(1)}35%{transform:scale(1.05)}100%{transform:none}}
.slots.miss,.tinput.miss{animation:shake .4s ease}
.play-top{position:relative}
.prog.glow i{animation:glow .7s ease}
@keyframes glow{0%{filter:none}30%{filter:brightness(1.3);box-shadow:0 0 12px var(--accent-bright)}100%{filter:none}}
.xp-float{position:absolute;right:52px;top:-6px;font-weight:700;font-size:15px;color:var(--xp);pointer-events:none;animation:xp-up .95s ease-out forwards}
@keyframes xp-up{0%{opacity:0;transform:translateY(10px) scale(.7)}25%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:0;transform:translateY(-22px)}}

/* ---------- 첫 화면: 별 반짝 + 소개 ---------- */
.onb-intro{position:relative;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#3D4C74 0%,var(--night) 55%,#242E4A 100%)}
.onb-intro .topbar,.onb-intro .onb-body{position:relative;z-index:1}
.sky{position:absolute;inset:0;pointer-events:none}
.sky i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.4;animation:twinkle 3.2s ease-in-out infinite}
.sky i:nth-child(1){left:8%;top:10%}.sky i:nth-child(2){left:22%;top:24%;animation-delay:.6s}.sky i:nth-child(3){left:36%;top:6%;animation-delay:1.2s}
.sky i:nth-child(4){left:52%;top:16%;animation-delay:.3s;width:4px;height:4px}.sky i:nth-child(5){left:68%;top:8%;animation-delay:1.8s}.sky i:nth-child(6){left:84%;top:20%;animation-delay:.9s}
.sky i:nth-child(7){left:92%;top:42%;animation-delay:2.2s}.sky i:nth-child(8){left:6%;top:48%;animation-delay:1.5s;width:4px;height:4px}.sky i:nth-child(9){left:14%;top:72%;animation-delay:.4s}
.sky i:nth-child(10){left:88%;top:68%;animation-delay:2.6s}.sky i:nth-child(11){left:76%;top:86%;animation-delay:1s}.sky i:nth-child(12){left:28%;top:90%;animation-delay:2s}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.9;transform:scale(1.25)}}
.egg-stage{display:flex;flex-direction:column;align-items:center}
.intro-txt{display:flex;flex-direction:column;align-items:center;gap:10px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.5px;color:var(--green)}
.intro p{line-height:1.6}
.intro-pts{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.intro-pts li{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:13px;color:#DDE3EF;white-space:nowrap}
.intro-pts svg{width:16px;height:16px;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.flabel{font-size:14px;font-weight:700;color:var(--muted)}

/* ---------- 친구: 초대 코드 한 줄 · 공개 설정 줄 ---------- */
.add-row{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
.ar-b{flex:1;min-width:120px;display:flex;flex-direction:column}
.ar-b code{font-family:var(--display);font-size:22px;letter-spacing:1.5px}
.set-link{flex-direction:row;align-items:center;gap:10px;text-align:left;font:inherit;color:inherit;width:100%;cursor:pointer}
.set-link svg{width:20px;height:20px;color:var(--muted)}
.sl-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sl-b b{font-size:15px}
.sl-b span{font-size:13px;color:var(--muted)}
.nudge.later{background:var(--fill);color:var(--ink-2);box-shadow:0 3px 0 var(--line-2);font-size:13px}
.nudge.danger{background:var(--no-soft);color:var(--no-ink);box-shadow:0 3px 0 var(--no)}
.pick .rooms i{display:inline-block;font-style:normal;font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--fill);color:var(--ink-2);margin:4px 4px 0 0}

/* ---------- 설정: 테마 카드 (미리보기 그림은 테마 모습을 그대로 보여줘야 해서 고정색) ---------- */
.theme-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.theme-pick button{border:2px solid var(--line);border-radius:14px;background:var(--card);padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink);min-height:44px}
.theme-pick button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.tp{width:44px;height:30px;border-radius:8px;border:1px solid #E1E8E4;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 7px;overflow:hidden}
.tp i{height:4px;border-radius:2px}
.tp-light{background:#FFFFFF}.tp-light i:first-child{background:#2E3A59}.tp-light i:last-child{width:60%;background:#1A7F57}
.tp-dark{background:#151B2C;border-color:#151B2C}.tp-dark i:first-child{background:#E8ECF4}.tp-dark i:last-child{width:60%;background:#6ED7A9}
.tp-system{padding:0;background:linear-gradient(90deg,#FFFFFF 50%,#151B2C 50%)}.tp-system i{display:none}

/* 근무 고르기 시트 */
.shift-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.shift-pick button{min-height:64px;border:2px solid transparent;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px}
.shift-pick button b{font-family:var(--display);font-size:20px;font-weight:400}
.shift-pick button[aria-pressed="true"]{border-color:currentColor}
.legend b{font-family:var(--display);font-weight:400}
.shift{flex-wrap:wrap}

/* ---------- 접근성: 정답·오답을 글자·아이콘으로도 · 화면낭독 안내 · 대체 풀이 ---------- */
.choice{position:relative}
.mark{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:700;padding:3px 9px;border-radius:999px}
.mark svg{width:14px;height:14px;stroke-width:3}
.mark.ok{background:var(--ok);color:var(--card)}
.mark.no{background:var(--no);color:var(--card)}
.tf .mark{position:absolute;top:8px;right:8px;margin:0;font-family:var(--body)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.alt-mode{align-self:flex-start;color:var(--muted)}

/* ---------- 실력 진단 · 부서 단원 · 보호권 ---------- */
.place{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;background:var(--e-soft);border-color:transparent}
.pl-b{flex:1 1 200px;display:flex;flex-direction:column;gap:2px}
.pl-b b{font-size:15px}
.pl-b span{font-size:13px;color:var(--ink-2)}
.pl-a{display:flex;align-items:center;gap:12px}
.dept-soon{background:var(--fill);border-style:dashed;flex-direction:row;align-items:center;gap:12px}
.dept-soon>div{display:flex;flex-direction:column;gap:4px}
.dept-ico{width:48px;height:48px;object-fit:contain;flex-shrink:0}
.shield svg{width:26px;height:26px;color:var(--e-ink)}
.muted svg{width:16px;height:16px;vertical-align:-3px}

/* ---------- 메모: 검색 + 목록 + 편집 시트 ---------- */
.memo-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.memo-search{flex:1 1 200px;min-width:0;display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--muted)}
.memo-search:focus-within{border-color:var(--accent)}
.memo-search svg{width:20px;height:20px}
.memo-search input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink)}
.memo-bar .btn svg{width:18px;height:18px}
.memo-list{display:flex;flex-direction:column;gap:8px}
.memo-item{gap:4px;text-align:left;font:inherit;color:inherit;width:100%;cursor:pointer}
.memo-item b{font-size:16px}
.memo-item span{font-size:14px;color:var(--ink-2);line-height:1.5}
.memo-item small{font-size:12px;color:var(--muted)}
.memo-item mark{background:var(--sun);color:#3D2A00;border-radius:3px;padding:0 2px}
.memo-empty{align-items:center;text-align:center;gap:6px;padding:28px 20px}
.memo-empty>img{width:72px;height:72px;object-fit:contain}
/* 빈 화면: 그림 + 한 줄 */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:20px}
.empty>img{width:72px;height:72px;object-fit:contain}
.memo-t,.memo-b{width:100%;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-size:16px;padding:12px 14px}
.memo-t{font-weight:700}
.memo-b{resize:vertical;line-height:1.6;min-height:180px}
.memo-t:focus,.memo-b:focus{border-color:var(--accent);outline:none}
.memo-act{display:flex;align-items:center;gap:8px}
.memo-add{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-size:13px;font-weight:700}
.memo-add svg{width:16px;height:16px}
.memo-add:disabled{opacity:.7}

/* ---------- 하단 메뉴 · 옆 메뉴: 둥근 아이콘 + 선택된 탭은 말랑한 알약 + '나'는 내 공룡 얼굴 ---------- */
.tabbar button{border:0;background:none;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:var(--display);font-size:13px;color:var(--muted);-webkit-tap-highlight-color:transparent}
.tabbar .ti{width:min(58px,100%);height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;transition:background .2s}
.tabbar .ti svg{width:25px;height:25px;stroke-width:2.1}
.tabbar button.active{color:var(--accent-ink)}
.tabbar button.active .ti{background:var(--accent-soft);animation:tab-pop .4s cubic-bezier(.2,1.6,.4,1)}
.tabbar button.active .ti svg,.nav-btn.active svg{fill:var(--accent-bright);fill-opacity:.45}
.tabbar button:active .ti{transform:scale(.9)}
.ti img,.nav-btn img{width:30px;height:30px;object-fit:contain;opacity:.7;transition:opacity .2s}
.tabbar button.active .ti img,.nav-btn.active img{opacity:1}
.nav-btn img{width:26px;height:26px}
@keyframes tab-pop{0%{transform:scale(.8)}100%{transform:none}}

/* ---------- 모바일 (앱) ---------- */
@media (max-width:860px){
  .side{display:none}
  .main{padding:18px 16px 110px;gap:16px}
  .tabbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);border-radius:22px 22px 0 0;box-shadow:0 -6px 18px rgba(46,58,89,.06);padding:6px 6px calc(8px + env(safe-area-inset-bottom));z-index:20}
  .dino-card img{width:84px;height:84px}
  .egg-panel{order:-1;padding:18px;flex-direction:row;gap:14px;text-align:left}
  .egg-panel .egg{width:84px;flex-shrink:0}
  .egg-panel .line{font-size:20px}
  .egg-panel .hint{display:none}
  .shift{width:100%}
  .shift button{flex:1;padding:0 6px}
  .playing .tabbar{display:none}
  .playing .main{padding-bottom:20px}
}
/* 글 적게 (2026-10-17): 설명 문장 대신 아이콘+값 · ⓘ 시트 · 펼치기 */
.mi{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.mi svg{width:15px;height:15px;flex-shrink:0;color:var(--muted)}
.mi-flame svg,.mi-bolt svg{color:var(--gold)}
.mi-target svg{color:var(--accent-ink)}
.mi-shield svg{color:var(--e-ink)}
.mis{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.tip-btn{width:40px;height:40px;margin:-10px -10px -10px 0;border:0;background:transparent;color:var(--muted);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.tip-btn svg{width:20px;height:20px}
.tip-btn:active{background:var(--fill)}
.card-h:has(.tip-btn){align-items:center;flex-wrap:nowrap}
.tip-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.tip-list b{color:var(--ink)}
.xp-row{display:flex;align-items:center;gap:10px}
.xp-w{position:relative;flex:1;min-width:0;display:block}
.xp-w .xp{display:block}
.flag{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--card);border:1.5px solid var(--line-2);color:var(--muted);display:flex;align-items:center;justify-content:center}
.flag svg{width:12px;height:12px}
.flag.on{background:var(--o-soft);border-color:var(--gold);color:var(--o-ink)}
.xp-n{font-size:12px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;flex-shrink:0}
.noti-peek{display:inline-flex;align-items:center;gap:4px;border:0;background:var(--fill);color:var(--ink-2);font:inherit;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;cursor:pointer;min-height:28px}
.noti-peek svg{width:14px;height:14px}
.q-row .cnt{min-width:28px;padding:2px 8px;border-radius:999px;background:var(--fill);color:var(--ink-2);font-size:13px;font-weight:700;text-align:center}
.q-p{display:flex;align-items:center;gap:8px}
.q-p .prog{flex:1}
.q-p .muted{font-size:12px;font-weight:400;flex-shrink:0;font-variant-numeric:tabular-nums}
.fr .who .df-mini{display:inline-block;width:18px;height:18px;margin-left:6px;vertical-align:-3px}
.pv{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pv i{font-style:normal;display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 6px;border-radius:999px;background:var(--fill);color:var(--muted);font-size:12px;font-weight:700}
.pv i svg{width:12px;height:12px}
.pv i.on{background:var(--d-soft);color:var(--d-ink)}
.nt-list{display:flex;flex-direction:column}
.nt{display:flex;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid var(--line);font-size:15px}
.nt:last-child{border-bottom:0}
.nt b{flex:1}
.nt > span:last-child{font-size:13px;color:var(--muted)}
.nt-i{width:32px;height:32px;border-radius:10px;background:var(--fill);display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex-shrink:0}
.nt-i svg{width:18px;height:18px}
.plan details.it{display:block}
.plan details.it summary{display:flex;gap:12px;align-items:flex-start;list-style:none;cursor:pointer}
.plan details.it summary::-webkit-details-marker{display:none}
.plan .chev svg{width:14px;height:14px;color:var(--muted);transition:transform .2s;margin-top:3px}
.plan details[open] .chev svg{transform:rotate(90deg)}
.plan details .msg{margin:6px 0 0 64px}
.fb-parts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fb-parts span{display:inline-flex;align-items:baseline;gap:5px;padding:5px 10px;border-radius:10px;background:var(--card);font-size:13px;color:var(--ink-2)}
.fb-parts span b{font-size:15px;color:var(--ink)}
.fb-parts i{font-style:normal;color:var(--muted);font-weight:700}
.fb-parts.tag span{align-items:center;color:var(--accent-ink)}
.fb-parts.tag span b{color:inherit}
.fb-parts.tag svg{width:14px;height:14px}
.fb-more summary{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;list-style:none;min-height:32px}
.fb-more summary::-webkit-details-marker{display:none}
.fb-more summary::after{content:'›';display:inline-block;transition:transform .2s;font-size:16px}
.fb-more[open] summary::after{transform:rotate(90deg)}
.done-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.lv{display:inline-block;min-width:26px;margin-right:8px;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:700;text-align:center}
.lv-0{background:var(--no-soft);color:var(--no-ink)}.lv-1{background:var(--o-soft);color:var(--o-ink)}.lv-2{background:var(--ok-soft);color:var(--ok-ink)}
.miss-box{width:100%;display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:16px;background:var(--fill);text-align:left}
.mb-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.miss-chips{display:flex;flex-wrap:wrap;gap:6px}
.miss-chips span{padding:4px 10px;border-radius:999px;background:var(--card);font-size:13px;font-weight:700;color:var(--ink-2)}
.done-chips .mi{padding:6px 12px;border-radius:999px;background:var(--fill);font-size:14px;font-weight:700;color:var(--ink-2)}
.shields{display:flex;gap:2px}
.shield.off svg{color:var(--line-2)}
/* 레슨 완료·연속 기록의 '계속': 레슨 중 결과 시트의 '계속'과 같은 자리·같은 크기 */
.done-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--line);padding:12px clamp(16px,4vw,40px) calc(14px + env(safe-area-inset-bottom))}
.done-bar .in{max-width:720px;margin:0 auto;display:flex;gap:10px}
.done-bar .btn{flex:1}
.play.has-bar{padding-bottom:100px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* 배지 모음: 받은 배지는 색, 아직은 흑백 */
.badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
.bdg{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;text-align:center;color:var(--muted)}
.bdg img{width:56px;height:56px;object-fit:contain;filter:grayscale(1);opacity:.35}
.bdg.got{color:var(--ink);font-weight:700}
.bdg.got img{filter:none;opacity:1}