/* 질문노트 학생 화면 — 디자인 확정안(11-10) 가안 「차분한 교재」 + 가-1(힌트 보조색 살구).
   사양: 3_과사람학원 폴더의 1110_디자인확정_가안보완확정안_설명.md. 시안 design-proposals/1110c/assets(base.css·A.css·A1.css)에서 옮김.
   상태 색 = 세 갈래와 1:1 — 수업 질문 q(청록) · 힌트 h(살구) · 해설 보고 고침 x(회색) · 하는 중 o(점선). 색만으로 구분하지 않게 글자 꼬리표를 함께.
   11-10 수정(대표님): 아이콘은 상태의 뜻을 알려 주는 곳(번호판 범례·번호 칸 모서리·세 갈래 3종)에만. public/icons/ui(밝음)·ui-dark(어두움).
   안내 문구는 v3처럼 고양이 말풍선(청록 테두리·손글씨, 한 화면에 하나). 제목은 명조 대신 고딕(아래 --f-head 한 곳에서 바꿈) */
:root{
  --bg:#F3F4F1; --sf:#FFFFFF; --ink:#1E2328; --ink2:#3F454C; --mut:#5E646A; --line:#D5D9D2;
  --acc:#15625E; --acc-t:#E3EEEC; --on-acc:#FFFFFF; --track:#E4E7E2; --btn-bd:#AEB4AC; --dash:#B3B9B1;
  --q-bg:#DCEBE8; --q-bd:#15625E; --q-ink:#15625E;
  --h-bg:#FBE8DC; --h-t:#FDF3EC; --h-bd:#C4693F; --h-ink:#94431F;
  --x-bg:#E9EBE7; --x-bd:#848B86; --x-ink:#4D5459;
  --o-bd:#8E959A;
  --toast:#1E2328; --on-toast:#FFFFFF;
  /* 글꼴(11-10 수정, 명조 뺌): 제목 = 고운돋움(굵기 한 가지 → --w-head 400, 가짜 굵게 안 씀), 큰 숫자·번호 = 본문 글꼴 굵게(--f-num),
     본문 IBM Plex Sans KR, 말풍선 손글씨 나눔손글씨 펜. 제목 글꼴을 바꿀 때는 이 네 줄(+ t.css 같은 자리)과 HTML 의 Google Fonts 주소만.
     Google Fonts 가 늦거나 막혀도 고딕 기본 글꼴로 먼저 보임(display=swap) */
  --f-head:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif; --w-head:400;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif;
  --f-num:var(--f-body); --w-num:700;
  --f-hand:"Nanum Pen Script","IBM Plex Sans KR","Malgun Gothic",cursive;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121615; --sf:#1B2120; --ink:#E9EDEB; --ink2:#C3CAC7; --mut:#9AA3A0; --line:#2C3533;
  --acc:#5FB7AC; --acc-t:#1D3431; --on-acc:#121615; --track:#2A3331; --btn-bd:#48524F; --dash:#55605D;
  --q-bg:#173430; --q-bd:#5FB7AC; --q-ink:#7CCBC0;
  --h-bg:#3A2419; --h-t:#2A1D16; --h-bd:#D98A62; --h-ink:#F2B08E;
  --x-bg:#262B2A; --x-bd:#7D8582; --x-ink:#B9C0BD;
  --o-bd:#6B7370;
  --toast:#E9EDEB; --on-toast:#121615;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121615; --sf:#1B2120; --ink:#E9EDEB; --ink2:#C3CAC7; --mut:#9AA3A0; --line:#2C3533;
  --acc:#5FB7AC; --acc-t:#1D3431; --on-acc:#121615; --track:#2A3331; --btn-bd:#48524F; --dash:#55605D;
  --q-bg:#173430; --q-bd:#5FB7AC; --q-ink:#7CCBC0;
  --h-bg:#3A2419; --h-t:#2A1D16; --h-bd:#D98A62; --h-ink:#F2B08E;
  --x-bg:#262B2A; --x-bd:#7D8582; --x-ink:#B9C0BD;
  --o-bd:#6B7370;
  --toast:#E9EDEB; --on-toast:#121615;
  color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word;min-height:100vh;min-height:100dvh;
  padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));
  -webkit-tap-highlight-color:transparent;overflow-x:hidden}
.wrap{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
h1,h2,h3{margin:0}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:none;border:0;padding:0}
button:disabled{cursor:default}
button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.cat{display:block;flex:none;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.ic{display:inline-flex;flex:none;line-height:0}
.ic img{display:block;width:100%;height:100%}

/* 머리글: 회색 고양이 로고 32px + 앱 이름 + 작게 HAN'S MATH CLASS */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 12px}
.logo{display:flex;align-items:center;gap:8px}
.logo .cat{width:32px}
.appname{font-family:var(--f-head);font-weight:var(--w-head);font-size:21px;line-height:1}
.mark{font-size:11px;letter-spacing:.12em;color:var(--mut);font-weight:600;white-space:nowrap}
.offline{display:flex;align-items:center;font-size:13px;font-weight:600;background:var(--x-bg);border:1px solid var(--x-bd);color:var(--ink);border-radius:4px;padding:8px 12px;margin:0 0 12px}

.screen{flex:1;display:flex;flex-direction:column;gap:16px;padding:4px 0 calc(32px + env(safe-area-inset-bottom,0px))}
.loading{color:var(--mut);font-size:14px;padding:40px 0;text-align:center}

/* 고양이 말풍선(v3 자리·문구, 11-10 되살림): 고양이 60px + 청록 테두리 말풍선, 손글씨. 한 화면에 하나 */
.say{display:flex;align-items:flex-end;gap:8px;margin:4px 0 0;min-width:0}
.say .cat{width:58px}
.bub{position:relative;margin:0 0 22px;min-width:0;background:var(--acc-t);border:1.5px solid var(--acc);border-radius:16px;padding:5px 14px 4px;
  font-family:var(--f-hand);font-size:26px;line-height:1.2;color:var(--ink);word-break:keep-all;text-wrap:balance}
.bub::after{content:"";position:absolute;left:-7px;bottom:12px;width:11px;height:11px;background:var(--acc-t);border-left:1.5px solid var(--acc);border-bottom:1.5px solid var(--acc);transform:rotate(45deg)}
.say.r{flex-direction:row-reverse;align-self:flex-end}
.say.r .bub::after{left:auto;right:-7px;transform:rotate(-135deg)}
.note{font-size:14px;color:var(--ink2);margin:0}
.cls{font-size:13px;color:var(--mut);font-weight:600}

/* 인사 */
.hi{margin:8px 0 4px}
.hi small{display:block;color:var(--mut);font-size:14px}
.hi b{display:block;margin:4px 0 0;font-family:var(--f-head);font-weight:var(--w-head);font-size:28px;line-height:1.3}
.hi.has-cat{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.hi.has-cat .hi-t{min-width:0}
.hi.has-cat b{word-break:keep-all}
.hi.has-cat .cat{width:70px;margin:0 2px -2px 0}

/* 과제 카드: 위에만 청록 3px 띠 */
.hw{background:var(--sf);border:1px solid var(--line);border-top:3px solid var(--acc);border-radius:0 0 4px 4px;padding:20px}
.hw .book{font-size:14px;color:var(--mut);line-height:1.35}
.hw .range{font-family:var(--f-num);font-size:40px;line-height:1.1;font-weight:var(--w-num);font-variant-numeric:tabular-nums}
.hw .due{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:14px;color:var(--ink2);margin-top:16px}
.dday{font-weight:700;font-size:14px;line-height:1.4;padding:2px 8px;border-radius:3px;background:var(--acc);color:var(--on-acc);font-variant-numeric:tabular-nums}
.dday.over{background:var(--x-bg);color:var(--x-ink)}

.row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:8px}
.lbl{font-weight:700;font-size:16px}
.lbl-sub{font-size:14px;color:var(--mut)}

/* 번호판: 상태마다 바탕 + 테두리 + 모서리 아이콘 18px(+힌트 단계 숫자) — 남기는 아이콘 */
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.tile{position:relative;aspect-ratio:1;min-height:56px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;
  background:var(--sf);border:1px solid var(--line);border-radius:4px;color:var(--ink);transition:transform .12s cubic-bezier(.16,1,.3,1)}
.tile:active{transform:scale(.95)}
.tile.long{font-size:19px;letter-spacing:-.02em} /* 4자리 번호(교재 974~1010 등)가 375px 다섯 칸에 여유 있게 들어가게(11-11) */
@media (hover:hover){.tile:hover{border-color:var(--ink2)}}
.tile.class{background:var(--q-bg);border:1.5px solid var(--q-bd)}
.tile.hint{background:var(--h-bg);border:1.5px solid var(--h-bd)}
.tile.fixed{background:var(--x-bg);border:1.5px solid var(--x-bd)}
.tile.open{background:var(--sf);border:1.5px dashed var(--o-bd)}
.mk{position:absolute;top:2px;right:2px;display:flex;align-items:center;line-height:1}
.mk em{font-style:normal;font-size:12px;font-weight:700;margin-left:1px;color:var(--h-ink)}

/* 범례: 칸 견본 44px 안에 아이콘 32px, 2×2 — 남기는 아이콘 4개 */
.legend{list-style:none;margin:0;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;background:var(--sf);border:1px solid var(--line);border-radius:4px}
.legend li{display:flex;align-items:center;gap:10px;min-width:0}
.legend b{display:block;font-size:14px;line-height:1.3}
.legend small{display:block;font-size:12px;color:var(--mut);line-height:1.35}
.sw{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:4px;background:var(--sf);border:1px solid var(--line)}
.sw.class{background:var(--q-bg);border:1.5px solid var(--q-bd)}
.sw.hint{background:var(--h-bg);border:1.5px solid var(--h-bd)}
.sw.fixed{background:var(--x-bg);border:1.5px solid var(--x-bd)}
.sw.open{border:1.5px dashed var(--o-bd)}

/* 내 기록 두 칸: 숫자 + 설명 한 줄(아이콘 없음) */
.mine{display:grid;grid-template-columns:1fr 1fr;background:var(--sf);border:1px solid var(--line);border-radius:4px}
.mine>div{padding:14px 16px;min-width:0}
.mine>div+div{border-left:1px solid var(--line)}
.mine b{display:block;font-family:var(--f-num);font-size:28px;font-weight:var(--w-num);line-height:1.1;font-variant-numeric:tabular-nums}
.mine .q b{color:var(--q-ink)}
.mine p{margin:4px 0 0;font-size:13px;color:var(--ink2);line-height:1.3;white-space:nowrap}

/* 다른 과제 */
.others{display:grid;gap:8px}
.others button{display:flex;width:100%;align-items:center;padding:12px 16px;min-height:56px;text-align:left;background:var(--sf);border:1px solid var(--line);border-radius:4px}
.others .t{flex:1;min-width:0;display:flex;flex-direction:column}
.others b{font-weight:600;font-size:14.5px;line-height:1.4}
.others .t span{font-size:13px;color:var(--mut)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
.link{padding:8px 0;min-height:44px;color:var(--ink2);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.link.center{align-self:center}

/* 문항 */
.back{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;padding:8px 12px 8px 0;margin:-4px 0 -8px;color:var(--ink2);font-size:14.5px;font-weight:600}
.qhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.qno{font-family:var(--f-num);font-weight:var(--w-num);font-size:32px;line-height:1;color:var(--acc)}
.tag{font-size:13px;color:var(--mut)}
.prob{font-size:15.5px;line-height:1.75;background:var(--sf);border:1px solid var(--line);border-radius:4px;padding:16px;overflow-wrap:break-word;min-width:0}
.prob p,.sol p,.step p{margin:0}
.prob p + p,.sol p + p{margin-top:2px}
.katex{font-size:1em}
.eq{overflow-x:auto;overflow-y:hidden;margin:6px 0;padding:2px 0;-webkit-overflow-scrolling:touch}
.eq .katex-display{margin:0}
.box{border:1px solid var(--ink);border-radius:2px;padding:10px 12px;margin:8px 0;overflow-x:auto}
.fig{display:block;max-width:100%;height:auto;margin:12px auto;background:#fff;border-radius:2px}
.tbl{overflow-x:auto;margin:6px 0}
.tbl table{border-collapse:collapse;font-size:14px}
.tbl td{border:1px solid var(--mut);padding:3px 10px;text-align:center;white-space:nowrap}
.choices{list-style:none;margin:16px 0 0;padding:12px 0 0;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:8px 20px}
.choices li{display:inline-flex;gap:4px;align-items:baseline}
.choices li>span:first-child{color:var(--ink2)}
.tex-err{font-size:13px;color:var(--mut)}

/* 지금 상태 줄(다시 고를 때) */
.now{font-size:13.5px;color:var(--mut);background:var(--sf);border:1px solid var(--line);border-radius:4px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 8px}
.now b{color:var(--ink)}
.now .st{display:inline}

/* 세 갈래: 한 판 안에 줄 셋. 줄마다 '가는 곳' 꼬리표(그 상태 색). 고른 줄 = 그 상태 면 + 안쪽 2px + '고름' */
.opts{display:flex;flex-direction:column;background:var(--sf);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.opt{position:relative;display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:16px;min-height:84px}
.opt+.opt{border-top:1px solid var(--line)}
.opt .t{min-width:0}
.opt .t b{display:block;font-family:var(--f-head);font-weight:var(--w-head);font-size:18px;line-height:1.35}
.opt .t small{display:block;font-size:13px;color:var(--mut);line-height:1.4}
.to{display:inline-flex;align-items:center;font-size:12px;font-weight:700;margin-top:6px;padding:1px 8px;border-radius:3px}
.opt.q .to{background:var(--q-bg);color:var(--q-ink)}
.opt.h .to{background:var(--h-bg);color:var(--h-ink)}
.opt.x .to{background:var(--x-bg);color:var(--x-ink)}
.opt.on.q{background:var(--q-bg);box-shadow:inset 0 0 0 2px var(--q-bd)}
.opt.on.h{background:var(--h-t);box-shadow:inset 0 0 0 2px var(--h-bd)}
.opt.on.x{background:var(--x-bg);box-shadow:inset 0 0 0 2px var(--x-bd)}
.opt.on .to{background:var(--sf)}
.opt.on .t{padding-right:40px}
.picked{position:absolute;right:12px;top:12px;font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;color:var(--sf)}
.opt.q .picked{background:var(--q-ink)} .opt.h .picked{background:var(--h-ink)} .opt.x .picked{background:var(--x-ink)}
@media (hover:hover){.opt:not(:disabled):not(.on):hover{background:var(--bg)}}
.opt:disabled{opacity:.5}

/* 힌트 사다리: 줄마다 '힌트 n' 글자(전구 아이콘 없음). 열린 = 옅은 살구, 지금 연 것 cur = 흰 면 + 살구 테두리, 안 연 것 = 점선
   (예전 지금 줄 이름 now 가 '지금 상태 줄' .now 와 겹쳐 글자가 흐려졌음 → cur 로 바꿈) */
.ladder{display:flex;flex-direction:column;gap:8px}
.step{background:var(--sf);border:1px solid var(--line);border-radius:4px;padding:14px 16px;font-size:15.5px;line-height:1.8;overflow-wrap:break-word;min-width:0;overflow-x:auto}
.step .n{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;line-height:1.3;color:var(--h-ink)}
.step .n small{font-size:13px;color:var(--mut);font-weight:400;margin-left:auto}
.step p{margin:8px 0 0}
.step.open{background:var(--h-t);border-color:var(--h-bg)}
.step.cur{background:var(--sf);border:1.5px solid var(--h-bd)}
.step.lock{background:transparent;border-style:dashed;border-color:var(--dash)}
.step.lock .n{color:var(--mut)}

/* 해설 */
.sol{background:var(--sf);border:1px solid var(--line);border-radius:4px;padding:16px;font-size:15px;line-height:1.75;overflow-wrap:break-word;min-width:0}
.sol .ans{display:inline-block;font-family:var(--f-num);font-weight:var(--w-num);font-size:20px;line-height:1.3;margin-bottom:10px;padding-bottom:4px;border-bottom:2px solid var(--x-bd)}

/* 버튼: 주 버튼 청록, 힌트 열기 = 흰 면 + 살구 테두리, 수업 질문으로 = 옅은 청록(버튼 안 아이콘 없음) */
.btns{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:8px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:12px 16px;border-radius:4px;font-size:17px;font-weight:700;background:var(--acc);color:var(--on-acc);text-align:center}
.btn.ghost{background:var(--sf);border:1px solid var(--btn-bd);color:var(--ink);font-size:16px}
.btn.hint{background:var(--sf);border:1.5px solid var(--h-bd);color:var(--h-ink)}
.btn.toq{background:var(--q-bg);border:1.5px solid var(--q-bd);color:var(--q-ink);font-size:15.5px}
.btn:disabled{opacity:.5}

/* 완료 순간: 고양이 80px + 큰 말풍선 한 번. 말풍선 테두리 = 그 상태 색(q 청록 · h 살구 · x 회색) */
.done{flex:1;display:grid;place-content:center;justify-items:center;text-align:center;gap:4px;padding:32px 0}
.done .say{margin:0}
.done .say .cat{width:80px}
.done .bub{font-size:36px;padding:6px 18px 4px;margin-bottom:30px;text-align:left}
.done .say.h .bub,.done .say.h .bub::after{background:var(--h-t);border-color:var(--h-bd)}
.done .say.x .bub,.done .say.x .bub::after{background:var(--x-bg);border-color:var(--x-bd)}
.done p{color:var(--ink2);margin:0;font-size:14.5px}
@media (prefers-reduced-motion:no-preference){
  .done .say{animation:pop .4s cubic-bezier(.16,1,.3,1) both}
  @keyframes pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
  .cells.shake{animation:shake .32s}
  @keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
}

/* 접속: 이름 고르기 · 번호 */
.names{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.names button{position:relative;min-height:56px;padding:8px 6px;border:1px solid var(--line);background:var(--sf);border-radius:4px;font-size:17px;font-weight:600;line-height:1.25}
.names button:active{transform:scale(.97)}
@media (hover:hover){.names button:hover{border-color:var(--acc)}}
.names button small{display:block;font-size:11.5px;color:var(--h-ink);font-weight:600}
.names button.locked{color:var(--mut);border-style:dashed;border-color:var(--dash)}
.who{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.who b{font-family:var(--f-head);font-weight:var(--w-head);font-size:25px}
.pin-tip{min-height:3.2em}
.cells{display:flex;justify-content:center;gap:12px;margin:4px 0}
.cells i{width:52px;height:60px;border-radius:4px;border:1.5px solid var(--line);background:var(--sf);display:grid;place-items:center;font-style:normal}
.cells i.on{border-color:var(--acc)}
.cells i.on::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--acc)}
.msg{min-height:1.5em;text-align:center;font-size:14.5px;font-weight:600;margin:0}
.msg.bad{color:var(--h-ink)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:320px;width:100%;margin:0 auto}
.pad button{min-height:56px;border-radius:4px;border:1px solid var(--line);background:var(--sf);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.pad button:active{background:var(--acc-t)}
.pad button.fn{font-size:14px;font-weight:600;color:var(--ink2);background:transparent;border-color:transparent}
.pad button:disabled{opacity:.4}

/* 알림 띠 */
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:min(440px,calc(100% - 32px));width:max-content;
  background:var(--toast);color:var(--on-toast);border-radius:4px;padding:12px 16px;font-size:14.5px;font-weight:600;z-index:10}

@media (max-width:370px){
  .legend{grid-template-columns:1fr}
}