/* ============================================================
   하루연산 학생 셸 — Phase A 목업(_workspace/35_mockup_phaseA/*.dc.html) 직역.
   값은 목업 인라인 스타일을 px 그대로 옮겼다(34 §1.4). ui.css를 로드하지 않는다.
   토큰 표: 34 §1.3. 큰 CTA는 진파랑 #326FAD(흰 글자 5.23:1) — #4DAAF7 바탕 흰 글자 금지(37 D14).
   ============================================================ */

/* 폰트: 웹폰트 파일을 두지 않는다(오프라인·외부 CDN 금지) — font-family 스택의 "Pretendard"는
   기기에 설치돼 있을 때만 쓰이고, 없으면 시스템 폰트로 내려간다(@font-face 없음 → 404 없음). */

:root{
  --bg:#F5F7FA; --text:#152434; --text-2:#3B4A5A; --muted:#5E6E80; --faint:#94A1AA;
  --primary:#4DAAF7; --primary-dark:#326FAD; --primary-soft:#EAF3FC; --primary-softer:#F2F8FE;
  --on-primary-sub:#DCEBFA; --border:#E2E8EF; --divider:#EEF2F6; --key-bg:#F8FAFC; --seg-track:#E9EDF2;
  --slot-idle:#A9B6C2; --carry:#C9D3DC; --memo-bg:#FBFCFD; --memo-line:#D6DEE6;
  --green:#2B987F; --green-soft:#E7F5F1; --green-ink:#1F7A65;
  --warn-soft:#FFF6EC; --warn-line:#F3D3AE; --warn-icon:#A85A12; --warn-ink:#7A4410; --todo:#C2741F;
  --err-soft:#FBECEB; --err-ink:#B23A34; --star:#E8A317; --link-hover:#24548A;
  --dis-bg:#E6EBF0; --dis-ink:#A5B1BB;
  /* 세로셈 칸(폰, 34 §4.3 · S13) */
  --cw:52px; --op-h:44px; --op-f:34px; --cell-h:56px; --cell-f:32px; --carry-h:26px; --carry-f:15px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.s{background:var(--bg);color:var(--text);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  letter-spacing:-.02em;word-break:keep-all;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
:where(.s) button{font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;margin:0}
:where(.s) button:disabled{cursor:default}
:where(.s) a{color:var(--primary-dark)} :where(.s) a:hover{color:var(--link-hover)}
:where(.s) :is(h1,h2,p){margin:0}
:where(.s) img{max-width:100%}
[hidden]{display:none!important}
.s-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.s :focus-visible{outline:3px solid var(--primary);outline-offset:2px}

/* 44px 미만 요소의 터치 영역만 넓힌다(34 §1.5.4) */
.s-hit{position:relative}
.s-hit::before{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}

/* ── 셸 ── */
.s-app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.s-wrap{flex:1;width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column}
.s-head{height:56px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.s-head.back{justify-content:flex-start;gap:10px;padding:0 12px}
.s-logo-img{height:20px;width:auto;display:block}
.s-logo-img.lg{height:24px}
.s-dev .s-logo-img{align-self:flex-start}
.s-main{flex:1;display:flex;flex-direction:column}
.s-foot{flex:none;padding:0 22px 30px;display:flex;flex-direction:column;gap:10px}
.s-h1{font-size:26px;font-weight:900;line-height:1.35}
.s-lead{font-weight:600;font-size:14px;color:var(--muted);line-height:1.6}
.s-cap{font-weight:600;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.6}
.s-title17{font-weight:900;font-size:17px}
.s-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--text-2)!important}
.s-pillgray{font-weight:800;font-size:12px;color:var(--muted);background:var(--divider);border-radius:99px;padding:4px 10px}
.s-info{padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--border);font-weight:600;font-size:13px;color:var(--text-2);line-height:1.55}

/* ── 큰 CTA ── */
.s-cta{display:flex;align-items:center;justify-content:center;width:100%;height:56px;border:0;border-radius:14px;
  background:var(--primary-dark);color:#fff!important;font-weight:900;font-size:17px;text-decoration:none;touch-action:manipulation}
.s-cta:active{background:var(--link-hover)}
.s-cta.xl{height:60px;border-radius:16px;font-size:18px}             /* S2 시작하기 */
.s-cta.lg{height:58px;border-radius:16px;font-size:18px}             /* S12 */
.s-cta.md{height:52px;border-radius:12px;font-weight:800;font-size:16px} /* S1·C1·C5·D1 */
.s-cta.md.narrow{max-width:300px}
.s-cta.line{height:52px;border:2px solid var(--primary-dark);background:#fff;color:var(--primary-dark)!important;font-weight:800;font-size:16px}
.s-cta.line:active{background:var(--primary-soft)}
.s-cta:disabled,.s-cta.dis{background:var(--dis-bg);color:var(--dis-ink)!important;border-color:var(--dis-bg)}
.s-cta.busy{opacity:.72}

/* ── 주의·오류 박스 ── */
.s-note{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:12px;font-weight:700;font-size:13.5px;line-height:1.55}
.s-note>svg{flex:none;margin-top:2px}
.s-note.warn{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn-ink)}
.s-note.warn>svg{color:var(--warn-icon)}
.s-note.err{background:var(--err-soft);color:var(--err-ink)}
.s-note .acts{margin-top:8px}
.s-note .lnk{border:0;background:none;padding:0;height:44px;color:var(--primary-dark);font-weight:800;font-size:13.5px}

/* ── 뼈대(로딩) ── */
.s-skel{display:block;background:var(--divider);border-radius:20px}
.s-skel.line{height:34px;width:70%;border-radius:10px}
.s-skel.line.w60{width:60%;margin:0 auto}
.s-skel.card{height:170px}
.s-skel.week{height:76px;border-radius:12px}
.s-skel.kid{width:132px;height:142px;border-radius:18px}
.s-skel.solve{width:260px;height:150px;border-radius:16px}
.s-skel.stars{width:126px;height:44px;border-radius:12px;margin:0 auto}
@media (prefers-reduced-motion:no-preference){.s-skel{animation:s-pulse 1.4s ease-in-out infinite}}
@keyframes s-pulse{50%{opacity:.55}}

/* ── 스피너 ── */
.s-spin{display:inline-block;flex:none;width:14px;height:14px;border-radius:99px;border:2.5px solid var(--primary);border-right-color:transparent}
@media (prefers-reduced-motion:no-preference){.s-spin{animation:s-rot .8s linear infinite}}
@keyframes s-rot{to{transform:rotate(360deg)}}

/* ── 토스트 ── */
.s-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--text);color:#fff;font-weight:700;font-size:13.5px;padding:11px 16px;border-radius:12px;max-width:calc(100% - 36px);
  transition:opacity .2s,transform .2s;z-index:60;text-align:center}
.s-toast.on{opacity:1;transform:translate(-50%,0)}
body[data-page=solve] .s-toast,body[data-page=review] .s-toast{bottom:calc(330px + env(safe-area-inset-bottom))}

/* ============================================================
   D1 기기 첫 실행 (DevStart)
   ============================================================ */
.s-dev{padding:44px 22px 0;gap:18px}
.s-h1.d1{font-size:25px}
.s-opt{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:16px;text-decoration:none;text-align:left;width:100%}
.s-opt .ico{flex:none;display:flex}
.s-opt .txt{display:flex;flex-direction:column;gap:3px}
.s-opt .tt{font-weight:800;font-size:16px}
.s-opt .ds{font-weight:600;font-size:12.5px;line-height:1.5}
.s-opt.pri{background:var(--primary-dark);color:#fff!important;border:0}
.s-opt.pri .ds{color:var(--on-primary-sub)}
.s-opt.pri .badge{font-size:11.5px;background:rgba(255,255,255,.22);border-radius:99px;padding:2px 8px}
.s-opt.sec{background:#fff;border:1px solid var(--border);color:var(--text)}
.s-opt.sec .ico{color:var(--primary-dark)}
.s-opt.sec .ds{color:var(--muted)}

/* ============================================================
   S2 오늘의 문제지 (Start)
   ============================================================ */
.s-who{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 10px;border-radius:99px;border:1px solid var(--border);
  background:#fff;color:var(--text)!important;font-weight:800;font-size:13px;text-decoration:none}
.s-who.static{padding:0 12px 0 6px}
.s-who .av{width:28px;height:28px;border-radius:99px;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-size:13px}
.s-who .tag{display:flex;align-items:center;gap:3px;padding:4px 8px;border-radius:99px;background:var(--bg);color:var(--muted);font-size:11.5px}
.s-today{padding:18px 22px 0;gap:18px}
.s-scard{background:#fff;border:1px solid var(--border);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px}
.s-scard .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.s-scard .no{font-weight:800;font-size:13px;color:var(--primary-dark)}
.s-scard .min{font-weight:700;font-size:12.5px;color:var(--muted);white-space:nowrap}
.s-scard .ttl{font-weight:900;font-size:20px;line-height:1.4}
.s-scard .paper{font-weight:600;font-size:13px;color:var(--muted)}
.s-chips{display:flex;gap:8px;flex-wrap:wrap}
.s-chip{font-weight:800;font-size:12.5px;color:var(--text-2);background:var(--bg);border-radius:99px;padding:5px 11px}
.s-empty{font-weight:600;font-size:14px;color:var(--muted);line-height:1.6}
.s-empty.done{font-weight:700;color:var(--text)}
/* 아이 직접 시작(AF_StartSelf, 45 §4.3) — 카드·안내를 세로로 쌓는다(A-core는 자식 1개라 변화 없음) */
#s2-card{display:flex;flex-direction:column;gap:16px}
.s-note.info{background:#fff;border:1px solid var(--border);color:var(--text-2);font-weight:600;padding:12px 14px}
.s-note.info>svg{color:var(--primary-dark)}
.s-note.ok{align-items:center;background:var(--green-soft);border:1px solid #BFE3D8;color:#1F5F50;padding:12px 14px}
.s-note.ok>svg{color:var(--green-ink);margin-top:0}
.s-donecard{background:#fff;border:1px solid var(--border);border-radius:20px;padding:18px 20px;display:flex;align-items:center;gap:12px}
.s-donecard .ok{width:40px;height:40px;flex:none;border-radius:99px;background:var(--green-soft);color:var(--green-ink);display:flex;align-items:center;justify-content:center}
.s-donecard .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.s-donecard .tag{font-weight:800;font-size:13px;color:var(--green-ink)}
.s-donecard .ttl{font-weight:900;font-size:16px;line-height:1.4}
.s-donecard .go{flex:none;height:40px;padding:0 14px;border-radius:10px;background:var(--primary-soft);color:var(--primary-dark)!important;display:flex;align-items:center;font-weight:800;font-size:13.5px;text-decoration:none}
.s-weekbox{display:flex;flex-direction:column;gap:10px}
.s-weekbox .lbl{font-weight:800;font-size:14px}
.s-weekbox .lbl b{color:var(--green)}
.s-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.s-day{height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:13px;
  background:#fff;border:1px solid var(--border);color:var(--muted);font-weight:700}
.s-day.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:800}
.s-day.today{background:transparent;border:2px dashed var(--primary);color:var(--primary-dark);font-weight:800}

/* ============================================================
   S1 누가 쓰나요 (Profile)
   ============================================================ */
.s-who-main{padding:36px 22px 0;align-items:center;gap:22px}
.s-h1.who{font-size:24px}
.s-kids{display:flex;gap:14px;max-width:100%;overflow-x:auto;padding:2px;scrollbar-width:none}
.s-kid{flex:none;width:132px;padding:16px 0;border-radius:18px;border:3px solid var(--border);background:#fff;display:flex;flex-direction:column;align-items:center;gap:8px}
.s-kid[aria-checked=true]{border-color:var(--primary)}
.s-kid .av{width:64px;height:64px;border-radius:99px;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:26px}
.s-kid.alt .av{background:var(--green-soft);color:var(--green)}
.s-kid .nm{font-weight:900;font-size:16px}
.s-kid .gr{font-weight:700;font-size:12px;color:var(--muted)}
.s-pin{display:flex;flex-direction:column;align-items:center;gap:12px}
.s-pin-label{font-weight:800;font-size:14px;color:var(--text-2)}
.s-dots{display:flex;gap:14px}
.s-dot{width:18px;height:18px;border-radius:99px;background:#fff;border:2px solid var(--slot-idle)}
.s-dot.on{background:var(--primary-dark);border-color:var(--primary-dark)}
.s-dots.shake{animation:s-shake .32s}
@media (prefers-reduced-motion:reduce){.s-dots.shake{animation:none}}
@keyframes s-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.s-pin-err{font-weight:700;font-size:13px;color:var(--err-ink);text-align:center}
.s-pinpad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:300px}
.s-pinpad button{height:58px;border-radius:14px;border:1px solid var(--border);background:#fff;color:var(--text);font-weight:800;font-size:22px;touch-action:manipulation;display:flex;align-items:center;justify-content:center}
.s-pinpad button:active{background:var(--primary-soft)}
.s-pinpad button.del{background:var(--bg);color:var(--text-2)}
.s-pinpad button:disabled{opacity:.5}
.s-who-foot{padding:0 22px 26px;align-items:center;gap:8px}
.s-guard{display:flex;align-items:center;gap:12px;width:100%;max-width:320px;padding:12px 14px;border-radius:14px;border:1px solid var(--carry);background:#fff;color:var(--text);text-align:left}
.s-guard .tile{width:40px;height:40px;flex:none;border-radius:12px;background:var(--text);color:#fff;display:flex;align-items:center;justify-content:center}
.s-guard .txt{flex:1;display:flex;flex-direction:column;gap:2px}
.s-guard .tt{font-weight:800;font-size:15px}
.s-guard .ds{font-weight:600;font-size:12px;color:var(--muted)}
.s-guard .chev{display:flex;color:var(--faint)}
.s-devline{font-weight:600;font-size:11.5px;color:var(--muted);text-align:center}

/* ============================================================
   S12 링크로 연 화면 (LinkOpened)
   ============================================================ */
.s-link{padding:14px 22px 0;gap:16px}
.s-link .h24{font-size:24px;font-weight:900;line-height:1.35}
.s-link .h22{font-size:22px;font-weight:900;line-height:1.35}
.s-link .gone{display:flex;flex-direction:column;gap:14px;padding-top:30px}
.s-lcard{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px}
.s-lcard .ttl{font-weight:900;font-size:18px}
.s-lcard .meta{font-weight:700;font-size:13px;color:var(--muted)}
.s-checking{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;padding-top:30px}

/* ============================================================
   C1 보호자 폰으로 연결 · C5 오류 (PairShow · PairErrors)
   ============================================================ */
.s-pair{padding:8px 22px 0;align-items:center;gap:16px}
.s-pair-wait{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.s-pair-lead{font-weight:700;font-size:14.5px;color:var(--text-2);text-align:center;line-height:1.6}
.s-pair-lead b{color:var(--text)}
.s-qrbox{padding:16px;border-radius:20px;background:#fff;border:1px solid var(--border)}
.s-qr{width:200px;height:200px;display:block}
.s-qr svg{width:100%;height:100%;display:block}
.s-code-grp{display:flex;flex-direction:column;align-items:center;gap:6px}
.s-code-grp .cap{font-weight:700;font-size:12.5px;color:var(--muted)}
.s-code{font-weight:900;font-size:34px;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.s-code-grp .tm{font-weight:700;font-size:12px;color:var(--muted)}
.s-waitpill{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:99px;background:var(--primary-soft);color:var(--primary-dark);font-weight:800;font-size:13px}
.s-paired{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:60px;width:100%}
.s-okcirc{width:72px;height:72px;border-radius:99px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center}
.s-paired h1{font-size:24px;font-weight:900}
.s-paired p{font-weight:600;font-size:14px;color:var(--muted);text-align:center;line-height:1.6}
.s-paired .s-cta{width:260px;margin-top:10px}
.s-perr{display:flex;flex-direction:column;gap:14px;padding-top:22px;width:100%;align-items:stretch}
.s-perr .circ{width:64px;height:64px;border-radius:99px;background:var(--warn-soft);color:var(--warn-icon);display:flex;align-items:center;justify-content:center}
.s-perr h1{font-size:22px;font-weight:900;line-height:1.35}
.s-perr p{font-weight:600;font-size:14px;color:var(--muted);line-height:1.6}

/* ============================================================
   풀이 화면 공통 (S3·S4·S5·S10·S13·S14·S15) — 키패드 하단 고정
   ============================================================ */
.s-solve{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.s-solve-view{flex:1;min-height:0;display:flex;flex-direction:column}
.s-shead{flex:none;padding:12px 14px 8px;display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;
  grid-template-areas:"exit prog no pill" ". step step step";column-gap:10px;row-gap:6px;align-items:center}
.s-exit{grid-area:exit;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--text-2)!important;border:0;background:none;padding:0}
.s-prog{grid-area:prog;height:10px;background:var(--border);border-radius:99px;overflow:hidden}
.s-prog>i{display:block;height:100%;width:0;background:var(--primary);border-radius:99px}
.s-no{grid-area:no;font-weight:800;font-size:14px;min-width:44px;text-align:right;white-space:nowrap}
.s-shead .s-pill{grid-area:pill}
.s-step{grid-area:step;font-weight:700;font-size:12.5px;color:var(--muted);min-width:0}
.s-pill{font-weight:800;font-size:12px;border-radius:99px;padding:4px 10px;white-space:nowrap;color:var(--green-ink);background:var(--green-soft)}
.s-pill[data-k=saving],.s-pill[data-k=submitting]{color:var(--primary-dark);background:var(--primary-soft)}
.s-pill[data-k=offline],.s-pill[data-k=other]{color:var(--warn-icon);background:var(--warn-soft)}
.s-pill[data-k=format]{color:var(--err-ink);background:var(--err-soft)}

.s-body{flex:1;min-height:0;display:flex;flex-direction:column}
.s-left{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.s-problem{flex:1;width:100%;max-width:560px;margin:0 auto;padding:4px 18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px}
.s-problem.center{justify-content:center;gap:22px}            /* S3 */
.s-problem.center.g26{gap:26px}                                 /* S4·S5 */
.s-problem.top12{gap:12px}                                      /* S13·S14 */
.s-problem.ro .s-wbox{opacity:.6;pointer-events:none}
.s-qno{font-weight:800;font-size:14px;color:var(--muted)}
.s-memo-card{display:none}

/* 문제식 */
.s-eq{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.s-expr{font-weight:800;font-size:clamp(32px,11vw,44px);line-height:1.2;white-space:nowrap;text-align:center}
.s-expr.dec{font-size:clamp(30px,10vw,40px)}
.s-expr.fx{font-size:34px}                                     /* S4 분수식 */
.s-expr.word{font-size:24px;white-space:normal;line-height:1.3}
.s-expr .frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;font-size:24px;line-height:1.1;margin:0 1px}
.s-expr .frac .fn{min-width:22px;text-align:center;padding:0 1px 2px;border-bottom:3px solid var(--text)}
.s-expr .frac .fd{min-width:22px;text-align:center;padding-top:2px}
.s-expr.word .frac{font-size:18px}

/* 위젯 묶음 */
.s-wbox{display:flex;flex-direction:column;align-items:center;gap:10px}
.s-wrow{display:flex;align-items:center;gap:10px}
.s-affix{font-weight:900;font-size:32px}
.s-hint{font-weight:600;font-size:13px;color:var(--muted);text-align:center;line-height:1.6}
.s-hint.v{font-weight:700;font-size:12.5px;display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.5}
.s-hint .dir{display:flex;align-items:center;gap:6px;color:var(--primary-dark);font-weight:800}
.s-ferr{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;color:var(--err-ink);text-align:left}
.s-ferr svg{flex:none}

/* 입력 칸(slot) 공통 — 34 §4.2. 폭은 위젯 종류별 상수(답 길이로 늘지 않음) */
.s-slot{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#fff;
  border:2px dashed var(--slot-idle);border-radius:16px;cursor:text;touch-action:manipulation}
.s-slot.filled{border-style:solid}
.s-slot.focus{border:3px solid var(--primary)}
.s-slot.err{border:2px solid var(--err-ink);background:var(--err-soft)}
.s-slot.err.focus{border-width:3px}
.s-slot.shake{animation:s-shake .15s}
@media (prefers-reduced-motion:reduce){.s-slot.shake{animation:none}}
.s-slot input{position:absolute;inset:0;width:100%;height:100%;border:0;margin:0;padding:0 4px;background:transparent;outline:none;
  text-align:center;font:inherit;font-weight:900;font-size:inherit;color:var(--text);caret-color:transparent;border-radius:inherit;
  letter-spacing:-.02em;-webkit-appearance:none;appearance:none}
.s-slot.err input{color:var(--err-ink)}
.s-slot input:disabled{color:var(--text);-webkit-text-fill-color:var(--text);opacity:1}
.s-caret{display:none;width:3px;height:50%;background:var(--primary);pointer-events:none;position:relative;z-index:1}
.s-slot.focus.empty .s-caret{display:block}
@media (prefers-reduced-motion:no-preference){.s-slot.focus.empty .s-caret{animation:s-blink 1s steps(1) infinite}}
@keyframes s-blink{50%{opacity:0}}
.s-problem.ro .s-slot{opacity:.6}

.s-slot.big{width:150px;height:72px;font-size:40px;border-radius:16px}       /* int·decimal·percent·□ 하위 */
.s-slot.q{width:108px;height:76px;font-size:38px;border-radius:14px}         /* 몫 */
.s-slot.r{width:84px;height:76px;font-size:38px;border-radius:14px}          /* 나머지 */
.s-slot.whole{width:64px;height:76px;font-size:36px;border-radius:14px}      /* 자연수 */
.s-slot.fpart{width:60px;height:56px;font-size:30px;border-radius:12px}      /* 분자·분모 */
.s-slot.lab{width:150px;height:64px;font-size:30px;border-radius:14px}       /* 라벨 칸 */
.s-slot.term{width:96px;height:64px;font-size:30px;border-radius:14px}       /* 비의 항 */
.s-slot.item{width:96px;height:56px;font-size:28px;border-radius:12px}       /* 수 목록 입력 */
.s-slot.cell{width:var(--cw);height:var(--cell-h);font-size:var(--cell-f);border-radius:12px}
.s-slot.carry{width:var(--cw);height:var(--carry-h);font-size:var(--carry-f);border-radius:8px;border:2px dashed var(--carry)}
.s-slot.carry input{font-weight:800;color:var(--muted)}
.s-slot.carry.focus{border:2px solid var(--primary)}
.s-slot.big .s-caret,.s-slot.q .s-caret,.s-slot.r .s-caret{height:40px}

/* 분수(S4) */
.s-frac-ans{display:flex;align-items:center;gap:10px}
.s-fld{display:flex;flex-direction:column;align-items:center;gap:6px}
.s-lab{font-weight:700;font-size:11.5px;color:var(--muted)}
.s-lab.qr{font-size:12px}
.s-fstack{display:flex;flex-direction:column;align-items:center;gap:6px}
.s-fbar{width:72px;height:4px;border-radius:2px;background:var(--text)}

/* 몫·나머지(S5) */
.s-qr-ans{display:flex;align-items:flex-start;gap:10px}
.s-qr-dots{height:76px;display:flex;align-items:center;font-weight:900;font-size:28px;color:var(--muted)}

/* 세로셈(S13·T1) */
.s-vgrid{display:grid;grid-template-columns:repeat(var(--cols),var(--cw));column-gap:8px;row-gap:6px;align-items:center}
.s-vgrid .op,.s-vgrid .dg{height:var(--op-h);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--op-f)}
.s-vgrid .op{font-size:var(--op-f2,var(--op-f))}
.s-vgrid .ln{grid-column:1/-1;height:4px;border-radius:2px;background:var(--text)}
.s-vgrid .sp{height:var(--carry-h)}
.s-vgrid .sp.a{height:var(--cell-h)}
.s-vtools{align-self:stretch;display:flex;align-items:center;gap:8px}
.s-seg{flex:1;display:flex;gap:4px;background:var(--seg-track);border-radius:12px;padding:3px}
.s-seg button{flex:1;height:44px;border:0;border-radius:9px;font-size:12.5px;background:transparent;color:var(--muted);font-weight:700;padding:0 4px}
.s-seg button[aria-pressed=true]{background:#fff;box-shadow:0 1px 3px rgba(21,36,52,.12);color:var(--text);font-weight:800}
.s-memo-btn{flex:none;display:flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:99px;border:1px solid var(--border);
  background:#fff;color:var(--text-2);font-weight:700;font-size:13px}
.s-vtools .s-memo-btn{padding:0 12px}

/* 세로 나눗셈(S14) */
.s-ld{display:grid;grid-template-columns:64px 52px 22px auto;column-gap:6px;row-gap:6px;align-items:center}
.s-ld .lab{font-weight:800;font-size:13px;color:var(--muted);text-align:right}
.s-ld .dv{height:56px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:34px}
.s-ld .digits{display:flex;gap:8px;border-top:4px solid var(--text);margin-left:-10px;padding-left:10px}
.s-ld .digits span{width:52px;height:56px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:34px}
.s-ld .cells{display:flex;gap:8px;justify-content:flex-end}
.s-ld .mid{height:30px;border-radius:8px;border:2px dashed var(--carry);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11.5px;color:var(--muted)}
.s-ld .bar{height:3px;border-radius:2px;background:var(--text)}

/* 수 목록(int_list) */
.s-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;max-width:340px}
.s-lchip{height:34px;padding:0 10px;border-radius:99px;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;gap:6px;
  font-weight:900;font-size:15px;border:0}
.s-add{height:44px;padding:0 8px;border:0;background:none;color:var(--primary-dark);font-weight:800;font-size:13px}
.s-add:disabled{color:var(--dis-ink)}
.s-count{font-weight:700;font-size:12.5px;color:var(--muted)}

/* 선택형(choice) */
.s-choice{display:flex;gap:6px;width:100%;max-width:340px}
.s-choice button{flex:1;height:56px;border-radius:10px;border:2px solid var(--border);background:#fff;color:var(--text);font-weight:800;font-size:16px;touch-action:manipulation}
.s-choice button[aria-checked=true]{border:3px solid var(--primary);background:var(--primary-soft);color:var(--primary-dark);font-weight:900}

/* 라벨 칸(labeled_fields) · 비(ratio) */
.s-lrows{display:flex;flex-direction:column;gap:10px}
.s-lrow{display:flex;align-items:center;gap:8px}
.s-lrow .l{width:76px;font-weight:800;font-size:13px}
.s-ratio-sep{font-weight:900;font-size:30px}

/* S11 상태 박스 */
.s-sbox{align-self:stretch;padding:14px 16px;border-radius:14px;display:flex;flex-direction:column;gap:8px;color:var(--green-ink);background:var(--green-soft)}
.s-sbox .t{font-weight:900;font-size:15px;line-height:1.45}
.s-sbox .sub{font-weight:600;font-size:13px;line-height:1.5}
.s-sbox[data-k=saving],.s-sbox[data-k=submitting]{color:var(--primary-dark);background:var(--primary-soft)}
.s-sbox[data-k=offline],.s-sbox[data-k=other],.s-sbox[data-k=fatal]{color:var(--warn-icon);background:var(--warn-soft)}
.s-sbox[data-k=format]{color:var(--err-ink);background:var(--err-soft)}
.s-sbox .acts{display:flex;gap:6px}
.s-sbox .acts button,.s-sbox .acts a{flex:1;height:42px;border-radius:10px;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.s-sbox .acts .pri{border:0;background:var(--primary-dark);color:#fff}
.s-sbox .acts .sec{border:1px solid var(--border);background:#fff;color:var(--text-2)}

/* ── 키패드(34 §4.1) ── */
.s-pad{flex:none;padding:14px 14px calc(24px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.s-pad>*{width:100%;max-width:480px;margin-left:auto;margin-right:auto}
.s-pad .s-seg.aside{display:none}
.s-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.s-key{height:var(--kh,58px);border-radius:14px;border:1px solid var(--border);background:var(--key-bg);color:var(--text);font-weight:800;font-size:var(--kf,24px);
  touch-action:manipulation;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center;padding:0}
.s-key:active{background:var(--primary-soft)}
.s-key.del{background:var(--divider);color:var(--text-2)}
.s-key.go{background:var(--primary-dark);color:#fff;border:0;font-weight:900;font-size:18px}
.s-key.go:active{background:var(--link-hover)}
.s-key.sub{background:var(--primary-soft);color:var(--primary-dark);border:0;font-weight:900;font-size:15px}
.s-key.pt{font-weight:900;font-size:30px}
.s-key.pt[aria-disabled=true]{color:var(--carry)}
.s-key:disabled{opacity:.45}
.s-pad.k64{--kh:64px;--kf:26px}
.s-pad-next{width:100%;height:52px;border-radius:14px;border:0;background:var(--primary-dark);color:#fff;font-weight:900;font-size:18px;touch-action:manipulation}
.s-pad-next:active{background:var(--link-hover)}
.s-pad-next:disabled{background:var(--dis-bg);color:var(--dis-ink)}

/* ── 시트(S16 메모장 · S7 다시 풀기 · 안내) ── */
.s-scrim{position:fixed;inset:0;background:rgba(21,36,52,.42);z-index:40}
.s-sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:#fff;border-radius:22px 22px 0 0;
  padding:8px 18px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;box-shadow:0 -6px 24px rgba(21,36,52,.16);z-index:41;max-height:92dvh;overflow-y:auto}
.s-sheet.memo{height:60vh;height:60dvh;overflow:hidden}
.s-grab{align-self:center;flex:none;width:40px;height:5px;border-radius:99px;background:var(--memo-line)}
.s-sheet-hd{display:flex;align-items:center;gap:8px}
.s-sheet-hd .txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.s-sheet-hd .tt{font-weight:900;font-size:17px}
.s-sheet-hd .ds{font-weight:600;font-size:12.5px;color:var(--muted)}
.s-btn-sm{flex:none;height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text-2);font-weight:800;font-size:13.5px}
.s-btn-sm.pri{border:0;background:var(--primary-dark);color:#fff;padding:0 16px}
.s-canvas-wrap{flex:1;min-height:0;position:relative;border-radius:14px;background:var(--memo-bg);border:1px dashed var(--memo-line);overflow:hidden}
.s-canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.s-canvas-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-weight:700;font-size:14px;pointer-events:none}
.s-memo-note{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:12.5px;color:var(--muted)}

/* ── S6b 제출 전 확인 ── */
.s-review-view{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;width:100%;max-width:520px;margin:0 auto}
.s-rev{padding:16px 22px 0;gap:12px}
.s-rev-top{display:flex;justify-content:flex-end}
.s-sub6{margin-top:6px!important;font-weight:600;font-size:14px;color:var(--muted)}
.s-rgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.s-rchip{height:52px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;
  border:2px solid var(--primary);background:var(--primary-soft);color:var(--primary-dark);touch-action:manipulation}
.s-rchip .n{font-weight:900;font-size:16px;line-height:1}
.s-rchip .t{font-weight:800;font-size:10.5px;line-height:1;white-space:nowrap}
.s-rchip.todo{border:2px dashed var(--todo);background:#fff;color:var(--warn-ink)}
.s-rchip.fmt{border:2px solid var(--err-ink);background:var(--err-soft);color:var(--err-ink)}
.s-rchip.unsaved{border:2px dotted var(--warn-icon);background:var(--warn-soft);color:var(--warn-ink)}
.s-legend{display:flex;flex-wrap:wrap;column-gap:14px;row-gap:6px;font-weight:700;font-size:12.5px;color:var(--text-2)}
.s-legend span{display:flex;align-items:center;gap:6px}
.s-legend .sw{width:14px;height:14px;border-radius:4px;background:var(--primary-soft);border:2px solid var(--primary)}
.s-legend .sw.todo{background:#fff;border:2px dashed var(--todo)}
.s-legend .sw.fmt{background:var(--err-soft);border:2px solid var(--err-ink)}
.s-legend .sw.unsaved{background:var(--warn-soft);border:2px dotted var(--warn-icon)}
.s-rv-notes{display:flex;flex-direction:column;gap:12px}
.s-foot.rev{padding:10px 22px 26px}
.s-offnote{display:block;margin-top:-4px;text-align:center;font-weight:700;font-size:12.5px;color:var(--warn-icon)}

/* ── S7 결과 ── */
.s-res{padding:40px 22px 0;align-items:center;gap:16px}
.s-stars{display:flex;align-items:center;gap:6px;color:var(--star)}
.s-res h1{font-size:28px;font-weight:900;text-align:center}
.s-score{display:flex;align-items:baseline;gap:6px}
.s-score .c{font-weight:900;font-size:56px;color:var(--primary-dark)}
.s-score .t{font-weight:800;font-size:22px;color:var(--muted)}
.s-rcard{width:100%;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column}
.s-rcard h2{margin:4px 0;font-size:15px;font-weight:900}
.s-rrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--divider)}
.s-rrow:last-child{border-bottom:0}
.s-rrow .l{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.s-rrow .q{font-weight:800;font-size:16px}
.s-rrow .q .frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;font-size:12px;line-height:1.05}
.s-rrow .q .frac .fn{border-bottom:2px solid var(--text);padding:0 1px}
.s-rrow .q .vf{display:inline}
.s-rrow .a{font-weight:600;font-size:12.5px;color:var(--muted)}
.s-rrow .a.blank{color:var(--warn-icon)}
.s-retry{flex:none;height:40px;padding:0 14px;border-radius:10px;border:0;background:var(--primary-soft);color:var(--primary-dark);font-weight:800;font-size:13.5px}
.s-solved{flex:none;font-weight:800;font-size:12.5px;color:var(--green-ink)}
.s-allok{font-weight:700;font-size:14px}
.s-bye{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:60px;text-align:center}
.s-bye h1{font-size:24px}

/* 다시 풀기 시트 */
.s-sheet.practice .s-problem{flex:none;padding:6px 0 4px;gap:14px}
.s-pr-msg{font-weight:700;font-size:13px;color:var(--warn-icon);text-align:center}
.s-pr-ans{font-weight:800;font-size:15px;text-align:center}
.s-pr-reveal{align-self:center;height:44px;padding:0 10px;border:0;background:none;color:var(--primary-dark);font-weight:800;font-size:13.5px;text-decoration:underline}
.s-sheet.practice .s-pad{padding:0;border-top:0}
.s-sheet.practice .s-cta{margin-top:2px}

/* ============================================================
   태블릿 세로 600~959 · 본문 열 가운데(34 §1.5.1)
   ============================================================ */
@media (min-width:600px){
  .s-shead{padding:14px 20px 10px}
}

/* ============================================================
   T1 태블릿 가로(≥960) — 2단: 왼쪽 문제+메모장, 오른쪽 340px 키패드 (Vertical.dc.html)
   ============================================================ */
@media (min-width:960px) and (orientation:landscape){
  :root{--cw:64px;--op-h:52px;--op-f:40px;--op-f2:34px;--cell-h:62px;--cell-f:36px;--carry-h:30px;--carry-f:17px}
  .s-shead{height:64px;padding:0 20px;background:#fff;border-bottom:1px solid var(--border);row-gap:0;column-gap:14px;
    grid-template-columns:44px auto minmax(0,1fr) auto auto;grid-template-areas:"exit step prog no pill"}
  .s-step{font-weight:800;font-size:15px;color:var(--text)}
  .s-prog{margin:0 8px}
  .s-no{font-size:15px;min-width:0}
  .s-body{flex-direction:row;gap:20px;padding:20px}
  .s-left{gap:16px;overflow:visible;min-width:0}
  .s-problem{flex:none;max-width:none;margin:0;background:#fff;border:1px solid var(--border);border-radius:20px;padding:18px 24px;justify-content:center;max-height:62%;overflow-y:auto}
  .s-problem.vert{flex-direction:row;align-items:center;gap:36px}
  .s-problem.vert .s-qno{align-self:flex-start;font-size:15px}
  .s-problem.vert .s-hint.v{align-items:flex-start;text-align:left;gap:8px;font-size:13px}
  .s-problem.vert .s-hint.v .dir{gap:6px}
  .s-vtools,.s-memo-btn{display:none!important}
  .s-memo-card{display:flex;flex:1;min-height:0;background:#fff;border:1px solid var(--border);border-radius:20px;padding:14px 18px;flex-direction:column;gap:8px}
  .s-memo-card .hd{display:flex;align-items:center;justify-content:space-between}
  .s-memo-card .tt{font-weight:800;font-size:14px}
  .s-memo-card .tt .sub{font-weight:600;font-size:12.5px;color:var(--muted)}
  .s-memo-card .s-btn-sm{height:36px;padding:0 12px;border-radius:9px;font-size:13px}
  .s-memo-card .s-canvas-wrap{border-radius:12px}
  .s-pad{width:340px;flex:none;border:1px solid var(--border);border-radius:20px;padding:18px;gap:12px}
  .s-pad>*{max-width:none}
  .s-pad .s-seg.aside{display:flex;flex:none;background:var(--bg);border-radius:10px;padding:4px;gap:6px}
  .s-pad .s-seg.aside button{height:40px;border-radius:8px;font-size:13px}
  .s-keys{flex:1;grid-auto-rows:minmax(0,1fr)}
  .s-key{height:auto;min-height:56px;font-size:28px}
  .s-key.go{font-size:20px}
  .s-key.sub{font-size:16px}
  .s-key.del svg{width:28px;height:28px}
  .s-toast{bottom:40px}
  body[data-page=solve] .s-toast,body[data-page=review] .s-toast{bottom:40px}
}

/* 키 높이 — 아주 낮은 화면(가로로 눕힌 폰·작은 폰)에서만 줄인다. 터치 44 이상 유지 */
@media (max-height:700px) and (max-width:959px){
  .s-pad{--kh:50px;padding-top:10px;gap:6px}
  .s-pad.k64{--kh:54px}
  .s-keys{gap:6px}
}

/* ── 바로 확인 모드(A-family 45 §4.1 · AF_Instant / AF_InstantDone) ── */
.s-memo-card[hidden]{display:none !important}
.s-inst-chip{display:inline-flex;align-items:center;gap:4px;margin-left:8px;vertical-align:middle;font-weight:800;font-size:11.5px;color:var(--primary-dark);background:var(--primary-soft);border-radius:99px;padding:3px 9px}
.s-ipanel{align-self:stretch;box-sizing:border-box;padding:12px 16px;border-radius:14px;display:flex;flex-direction:column;gap:6px;background:var(--primary-soft)}
.s-ipanel .hd{display:flex;align-items:center;gap:10px}
.s-ipanel .dot{width:30px;height:30px;flex:none;border-radius:99px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--primary-dark)}
.s-ipanel .t{font-weight:900;font-size:18px;color:var(--primary-dark)}
.s-ipanel .sub{font-weight:700;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.s-ipanel[data-tone=err]{background:var(--err-soft)}
.s-ipanel[data-tone=err] .dot{background:var(--err-ink)} .s-ipanel[data-tone=err] .t{color:var(--err-ink)}
.s-ipanel[data-tone=ok]{background:var(--green-soft)}
.s-ipanel[data-tone=ok] .dot{background:var(--green)} .s-ipanel[data-tone=ok] .t{color:var(--green-ink)}
.s-ipanel[data-tone=warn]{background:var(--warn-soft)}
.s-ipanel[data-tone=warn] .dot{background:var(--warn-icon)} .s-ipanel[data-tone=warn] .t{color:var(--warn-ink)}
.s-ipanel .acts{display:flex;gap:8px;flex-wrap:wrap}
.s-ipanel .acts button{height:44px;padding:0 14px;border-radius:10px;font:inherit;font-weight:800;font-size:13.5px;border:1px solid var(--border);background:#fff;color:var(--text-2)}
.s-ipanel .acts .rev{border:2px solid var(--primary-dark);color:var(--primary-dark)}
.s-irec{align-self:stretch;background:#fff;border:1px solid var(--border);border-radius:16px;padding:8px 14px;display:flex;flex-direction:column}
.s-irec .hd{font-weight:800;font-size:12.5px;color:var(--muted);padding-bottom:2px}
.s-irec .r{display:flex;align-items:center;gap:8px;min-height:32px}
.s-irec .l{width:52px;flex:none;font-weight:700;font-size:13px;color:var(--muted)}
.s-irec .v{font-weight:900;font-size:15px}
.s-irec .m{display:flex;align-items:center;gap:3px;font-weight:800;font-size:12px;color:var(--muted)}
.s-irec .m[data-tone=err]{color:var(--err-ink)} .s-irec .m[data-tone=ok]{color:var(--green-ink)} .s-irec .m[data-tone=warn]{color:var(--warn-icon)}
.s-irec .sp{flex:1}
.s-irec .k{font-weight:800;font-size:11.5px;border-radius:99px;padding:3px 8px;color:var(--muted);background:#EEF2F6}
.s-irec .k.score{color:var(--primary-dark);background:var(--primary-soft)}
.s-problem.inst-wrong .s-slot:not(.carry),.s-problem.inst-twice .s-slot:not(.carry){border:2px solid var(--err-ink);background:var(--err-soft)}
.s-problem.inst-wrong .s-slot input,.s-problem.inst-twice .s-slot input{color:var(--err-ink);-webkit-text-fill-color:var(--err-ink)}
.s-problem.inst-fixed .s-slot:not(.carry),.s-problem.inst-correct .s-slot:not(.carry){border:2px solid var(--green);background:var(--green-soft)}
.s-problem.inst-fixed .s-slot input,.s-problem.inst-correct .s-slot input{color:var(--green-ink);-webkit-text-fill-color:var(--green-ink)}
.s-problem.inst-revealed .s-slot:not(.carry){border:2px solid var(--border);background:var(--bg)}
.s-problem.inst-revealed .s-slot input{color:var(--faint);-webkit-text-fill-color:var(--faint)}
.s-problem.inst-offline .s-slot:not(.carry){border:2px solid #A9B6C2;background:#fff}
.s-fixpill{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:14px;color:var(--green-ink);background:var(--green-soft);border-radius:99px;padding:6px 12px}
.s-score .f{font-weight:800;font-size:18px;color:var(--muted);margin-right:6px}
.s-fixed{flex:none;display:flex;align-items:center;gap:4px;font-weight:800;font-size:12.5px;color:var(--green-ink)}

/* ════════════════════════════════════════════════════════════
   A-reward 물결 2B 공용(AR_StartGoal · AR_GoalDone · AR_ResultGoal) — 값은 목업 인라인 px 그대로.
   보상 꺼짐이면 이 규칙을 쓰는 요소가 생기지 않는다(JS가 ④ goals · ⑩ goal_events가 있을 때만 그림).
   ════════════════════════════════════════════════════════════ */
#s2-rwb:empty,#s2-goals:empty{display:none}
#s2-goals{display:flex;flex-direction:column;gap:12px}
/* 새 소식 띠(S2 맨 위) */
.rw-banner{display:flex;align-items:center;gap:6px;padding:8px 6px 8px 14px;border-radius:16px;background:var(--warn-soft);border:1px solid var(--warn-line)}
.rw-banner.ok{background:var(--green-soft);border-color:#BFE3D8}
.rw-banner .lnk{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;gap:12px;color:var(--text)!important;text-decoration:none}
.rw-banner .ic{width:40px;height:40px;flex:none;border-radius:99px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--warn-icon)}
.rw-banner.ok .ic{color:var(--green-ink)}
.rw-banner .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rw-banner .tt{font-weight:900;font-size:15px;line-height:1.35}
.rw-banner .ds{font-weight:700;font-size:12.5px;color:var(--muted)}
.rw-banner .x{width:44px;height:44px;flex:none;border:0;border-radius:99px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;padding:0}
/* 목표 카드 */
.rw-goals{background:#fff;border:1px solid var(--warn-line);border-radius:20px;padding:16px 18px 6px;display:flex;flex-direction:column}
.rw-goals.sm{align-self:stretch;width:100%;border-radius:16px;padding:12px 16px 4px}
.rw-goals-hd{display:flex;align-items:center;gap:8px;color:var(--warn-icon);padding-bottom:4px;font-weight:900;font-size:15px}
.rw-goals-empty{padding:10px 0 14px;font-weight:600;font-size:13.5px;color:var(--muted)}
.rw-grow{display:flex;flex-direction:column;gap:8px;padding:12px 0}
.rw-grow+.rw-grow{border-top:1px solid #F3E6D6}
.rw-goals.sm .rw-grow{gap:7px;padding:10px 0}
.rw-grow .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rw-grow .tt{font-weight:900;font-size:16px;min-width:0}
.rw-goals.sm .rw-grow .tt{font-weight:800;font-size:15px}
.rw-grow .rw{flex:none;display:flex;align-items:center;gap:5px;font-weight:800;font-size:13px;color:var(--warn-icon)}
.rw-grow .bot{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.rw-grow .cnt{flex:none;color:var(--text-2)}
.rw-grow .note{flex:1;min-width:0;text-align:right;font-weight:800}
.rw-goals.sm .rw-grow .note{text-align:left;font-size:13.5px}
.rw-grow .note.warm{color:var(--warn-icon)} .rw-goals.sm .rw-grow .note.warm{color:var(--warn-ink)}
.rw-grow .note.ok{color:var(--green-ink)}
.rw-grow .note.gray{color:var(--muted);font-weight:700}
.rw-bar{height:12px;background:var(--divider);border-radius:99px;overflow:hidden}
.rw-bar.sm{height:10px}
.rw-bar .fill{height:100%;background:var(--star);border-radius:99px}
.rw-bar .fill.done{background:var(--green)}
.rw-dots{display:flex;gap:6px}
.rw-dots .d{width:40px;height:14px;border-radius:99px;background:var(--divider)}
.rw-dots .d.on{background:var(--green)}
.rw-dots .d.today{background:#fff;border:2px dashed var(--warn-icon)}
.rw-goals-foot{padding:10px 0 8px;border-top:1px solid #F3E6D6;font-weight:700;font-size:13px;color:var(--warn-ink)}
.rw-chip{flex:none;font-weight:800;font-size:12.5px;border-radius:99px;padding:3px 10px}
.rw-chip.ok{color:#fff;background:var(--green-ink)}
.rw-settle{padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--border);display:flex;gap:12px;align-items:flex-start}
.rw-settle .ic{width:36px;height:36px;flex:none;border-radius:99px;background:var(--warn-soft);color:var(--warn-icon);display:flex;align-items:center;justify-content:center}
.rw-settle .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rw-settle .tt{font-weight:900;font-size:14.5px}
.rw-settle .bd{font-weight:700;font-size:13px;color:var(--text-2);line-height:1.5}
.rw-settle .ds{font-weight:600;font-size:12.5px;color:var(--muted)}
.rw-propose{align-self:flex-start;min-height:44px;display:flex;align-items:center;gap:6px;padding:0 4px;color:var(--primary-dark)!important;font-weight:800;font-size:14px;text-decoration:none}
.rw-propose .pend{font-weight:700;font-size:12px;color:var(--muted);margin-left:4px}
/* 결과 달성 띠(AR_ResultGoal) */
.rw-ribbon{align-self:stretch;width:100%;min-height:64px;display:flex;align-items:center;gap:12px;padding:10px 14px;border:0;border-radius:16px;background:var(--warn-icon);color:#fff;text-align:left}
.rw-ribbon .ic{width:42px;height:42px;flex:none;border-radius:99px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.rw-ribbon .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rw-ribbon .tt{font-weight:900;font-size:17px}
.rw-ribbon .ds{font-weight:700;font-size:13px}
/* 보상 버튼(따뜻한 갈색 = 보상 쓰기 · 선 버튼) */
.rw-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:56px;border-radius:16px;border:0;font-weight:900;font-size:17px;text-decoration:none;touch-action:manipulation}
.rw-cta.warm{background:var(--warn-icon);color:#fff!important}
.rw-cta.warm:active{background:var(--warn-ink)}
.rw-cta.line{height:54px;border:1px solid var(--border);background:#fff;color:var(--text-2)!important;font-weight:800;font-size:16px}
.rw-cta:disabled{background:var(--dis-bg);color:var(--dis-ink)!important;border-color:var(--dis-bg)}
.rw-cta.busy{opacity:.72}
/* 목표 달성(AR_GoalDone) — 겹침 화면 */
.rw-done{position:fixed;inset:0;z-index:250;background:var(--bg);overflow-y:auto;display:flex;justify-content:center}
.rw-done-in{width:100%;max-width:520px;min-height:100%;display:flex;flex-direction:column}
.rw-done-main{flex:1;padding:34px 22px 12px;display:flex;flex-direction:column;align-items:center;gap:14px}
.rw-done-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--border);font-weight:800;font-size:13px;color:var(--text-2)}
.rw-done-pill svg{flex:none}
.rw-done-ic{width:104px;height:104px;flex:none;border-radius:99px;background:var(--warn-soft);color:var(--warn-icon);display:flex;align-items:center;justify-content:center}
.rw-done h1{font-size:30px;font-weight:900;text-align:center}
.rw-done-sub{font-weight:700;font-size:16px;color:var(--text-2);text-align:center;line-height:1.6}
.rw-done-box{align-self:stretch;background:#fff;border:1px solid var(--border);border-radius:20px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.rw-done-box .cap{font-weight:800;font-size:13px;color:var(--muted);text-align:center}
.rw-done-box .row{display:flex;flex-direction:column;gap:2px;padding:8px 0}
.rw-done-box .row+.row{border-top:1px solid var(--divider)}
.rw-done-box .amt{font-weight:900;font-size:22px;color:var(--warn-icon)}
.rw-done-box .from{font-weight:700;font-size:12.5px;color:var(--muted)}
.rw-done-box .now{margin-top:6px;padding:10px 12px;border-radius:12px;background:var(--bg);display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:13.5px;color:var(--text-2)}
.rw-done-badge{align-self:stretch;background:#fff;border:1px solid var(--border);border-radius:20px;padding:18px;display:flex;align-items:center;gap:14px}
.rw-done-badge .ic{width:52px;height:52px;flex:none;border-radius:99px;background:var(--green-soft);color:var(--green-ink);display:flex;align-items:center;justify-content:center}
.rw-done-badge .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rw-done-badge .tt{font-weight:900;font-size:18px}
.rw-done-badge .ds{font-weight:700;font-size:13px;color:var(--muted)}
.rw-done-foot{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--muted);text-align:center}
.rw-done-btns{flex:none;padding:0 22px calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.rw-done-btns .rw-cta.warm{height:58px;font-size:18px}

/* ============================================================
   실기기 QA 2차(2026-10-05, iPad 사파리 + 애플 펜슬) — 풀이 화면(한 문제씩·문제지 보기 공통)
   ============================================================ */
/* 페이지 확대 막기(student.js lockPageZoom이 html에 s-nozoom을 붙인다 — 터치 기기·문제지 보기 화면):
   두 번 탭·두 손가락 확대는 빼고 위아래·옆 스크롤은 그대로 */
html.s-nozoom,html.s-nozoom body{touch-action:pan-x pan-y}
html.s-nozoom .s-solve button,html.s-nozoom .s-sheet button,html.s-nozoom .s-exit{touch-action:manipulation}
/* 답 칸(터치 기기에서는 readonly)·메모장·키패드를 길게 눌러도 글자 선택·돋보기·말풍선이 뜨지 않게 */
html.s-nozoom .s-slot input{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.s-nozoom .s-memo-card,html.s-nozoom .s-canvas-wrap,html.s-nozoom .s-pad,html.s-nozoom .s-sheet.memo{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* 메모장 캔버스 테두리 안쪽 어디를 눌러도 브라우저가 스크롤·확대로 가져가지 않게 */
.s-canvas-wrap{touch-action:none}
/* 바로 확인 회차의 가로 태블릿: 문제 카드 높이를 미리 잡아(55% — iPad 1180×820에서 '다시 해 볼까?' 문구 + 이 문제 기록
   한 줄이 들어가는 높이, 실측 54%) 맞음·틀림 문구가 붙어도 아래 메모장 크기가 바뀌지 않게 한다. 더 길면 예전처럼
   62%까지 늘고 그 뒤로는 카드 안에서 스크롤(가운데 맞춤은 auto 여백 — 넘칠 때 위가 잘리지 않게) */
@media (min-width:960px) and (orientation:landscape){
  .s-solve.s-inst .s-problem{min-height:55%}
  .s-solve.s-inst .s-problem:not(.vert){justify-content:flex-start}
  .s-solve.s-inst .s-problem:not(.vert)>:first-child{margin-top:auto}
  .s-solve.s-inst .s-problem:not(.vert)>:last-child{margin-bottom:auto}
}