/* ============================================================
   찰쓰매쓰 — self-contained design system (Toss-style neutral base)
   No framework. Phase 4: full teacher-surface redesign.
   ============================================================ */

/* 1) Tokens -------------------------------------------------- */
:root {
  color-scheme: light;
  /* green scale */
  --g-50:#f2faf4; --g-100:#e0f4e5; --g-200:#c2e8cd; --g-300:#94d6a8; --g-400:#5cbd7b;
  --g-500:#34a85c; --g-600:#22914a; --g-700:#1d773e; --g-800:#195f34; --g-900:#123f24;
  --grad-brand: linear-gradient(135deg,#3cb56a 0%,#1e9150 100%);
  --grad-hero: linear-gradient(180deg,#eef9f1 0%,#f7fbf8 55%,#ffffff 100%);
  /* neutrals (green-tinted) */
  --ink:#101b13; --ink-2:#3a4a40; --muted:#5f7167;
  --line:#e3ebe5; --line-strong:#cfdcd3;
  --bg:#f5f9f6; --surface:#ffffff; --surface-2:#fafdfb;
  --danger:#d64545; --danger-bg:#fdf0f0;
  --warn:#d98b1f; --warn-bg:#fbf3e4;
  /* type */
  --font-sans:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo',sans-serif;
  --fs-xs:.78rem; --fs-sm:.875rem; --fs-base:.9375rem; --fs-lg:1.0625rem; --fs-xl:1.25rem; --fs-2xl:1.5rem; --fs-3xl:2.1rem;
  --ls-tight:-.02em;
  /* radius */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-full:999px;
  /* elevation */
  --shadow-1:0 1px 2px rgba(16,40,25,.04);
  --shadow-2:0 2px 6px rgba(16,40,25,.05),0 12px 28px rgba(16,40,25,.07);
  --shadow-3:0 4px 12px rgba(16,40,25,.08),0 20px 48px rgba(16,40,25,.12);
  --shadow-brand:0 6px 16px rgba(34,145,74,.28);
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1); --dur-1:.15s; --dur-2:.25s;
  /* layout */
  --container-max:980px; --container-narrow:600px; --topbar-h:56px;
}

/* 2) Reset + base typography -------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-base);font-weight:450;line-height:1.55;background:var(--bg);color:var(--ink);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0}
h1{font-size:var(--fs-3xl);font-weight:800;letter-spacing:var(--ls-tight);line-height:1.2}
h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:var(--ls-tight);line-height:1.25}
h3{font-size:var(--fs-lg);font-weight:700;letter-spacing:var(--ls-tight)}
p{margin:0 0 .75rem}
p:last-child{margin-bottom:0}
small{font-size:var(--fs-xs)}
a{color:var(--g-700);text-decoration:none}
a:hover{text-decoration:underline}
hgroup{margin:0 0 1rem}
hgroup>h1,hgroup>h2,hgroup>h3{margin:0 0 .15rem}
hgroup>p{margin:0}
main{max-width:var(--container-max);margin:0 auto;padding:1.25rem 1rem 3rem}
body.student main{max-width:var(--container-narrow)}

/* 3) Form controls ------------------------------------------ */
input:not([type=checkbox]):not([type=radio]),select,textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--radius-md);padding:.6rem .85rem;margin:0 0 .55rem;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
  border-color:var(--g-500);box-shadow:0 0 0 3px rgba(52,168,92,.18);outline:none;
}
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f7167' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:1rem;
  padding-right:2.4rem;
}
/* custom checkbox */
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:1.25rem;height:1.25rem;border:1.5px solid var(--line-strong);border-radius:6px;
  background:var(--surface);cursor:pointer;flex-shrink:0;margin:0;vertical-align:-.25em;
  transition:all var(--dur-1) var(--ease);
}
input[type=checkbox]:checked{
  border-color:transparent;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.8rem no-repeat, var(--grad-brand);
}
/* switch (AND-filter toggle) */
input[type=checkbox][role=switch]{
  width:2.4rem;height:1.35rem;border-radius:var(--radius-full);border:none;
  background:var(--line-strong);position:relative;vertical-align:-.35em;
  transition:background var(--dur-1) var(--ease);
}
input[type=checkbox][role=switch]::before{
  content:"";position:absolute;top:2px;left:2px;width:calc(1.35rem - 4px);height:calc(1.35rem - 4px);
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,40,25,.25);
  transition:transform var(--dur-1) var(--ease);
}
input[type=checkbox][role=switch]:checked{background:var(--g-500)}
input[type=checkbox][role=switch]:checked::before{transform:translateX(calc(2.4rem - 1.35rem))}
/* keyboard-focus ring (a11y) for interactive elements */
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(52,168,92,.3)}

/* 4) Buttons ------------------------------------------------- */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font:inherit;font-size:var(--fs-base);font-weight:700;color:#fff;background:var(--grad-brand);
  border:none;border-radius:var(--radius-md);padding:.6rem 1.15rem;cursor:pointer;
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),filter var(--dur-1) var(--ease);
}
button:hover,.btn:hover{filter:brightness(1.05);box-shadow:var(--shadow-brand)}
button:active,.btn:active{transform:translateY(1px);box-shadow:none}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;filter:none}
/* The old CSS framework made form buttons full-width; the two login CTAs depend on it. */
#login-form button[type=submit],#sform button[type=submit]{width:100%}
/* mini — element-agnostic: renders identically on <a role=button> and <button> */
.mini{
  display:inline-flex;align-items:center;justify-content:center;padding:.28rem .7rem;
  font-size:var(--fs-xs);font-weight:600;border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;
  color:#fff;background:var(--grad-brand);
}
a.mini:not(.secondary):not(.danger):hover{filter:brightness(1.05);box-shadow:var(--shadow-brand);text-decoration:none}
/* tonal secondary (after .mini so `mini secondary` resolves tonal) */
button.secondary,.secondary{background:var(--g-100);color:var(--g-700)}
button.secondary:hover,.secondary:hover{background:var(--g-200);filter:none;box-shadow:none;text-decoration:none}
/* tonal red danger — destructive actions (works on <button> and .mini/<a>) */
button.danger,.danger{background:var(--danger-bg);color:var(--danger)}
button.danger:hover,.danger:hover{background:#f9dede;filter:none;box-shadow:none;text-decoration:none}
/* quiet — 경량 아웃라인 mini (상담·결제 목록의 수정/삭제) */
.mini.quiet,.mini.quiet-danger{background:transparent;color:var(--muted);border:1px solid var(--line)}
.mini.quiet:hover{color:var(--g-700);border-color:var(--g-300);background:var(--g-50);filter:none;box-shadow:none;text-decoration:none}
.mini.quiet-danger:hover{color:var(--danger);border-color:#f0c4c4;background:var(--danger-bg);filter:none;box-shadow:none;text-decoration:none}
/* ghost — outline/tonal, auto width */
.ghost{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  width:auto;padding:.4rem .85rem;font-size:var(--fs-sm);font-weight:600;margin:0;
  border-radius:var(--radius-md);white-space:nowrap;
}
.ghost:hover{background:var(--g-50);border-color:var(--g-300);color:var(--g-700);filter:none;box-shadow:none}
/* rows/toolbars: inline controls sit flush */
.row>label{margin:0}
.row select,.toolbar select{width:auto}
.row>input:not([type=checkbox]):not([type=radio]),.toolbar>input:not([type=checkbox]):not([type=radio]),.row>select,.toolbar>select{margin-bottom:0}

/* 5) Components --------------------------------------------- */

/* top bar */
nav.topbar{
  display:flex;align-items:center;gap:1rem;min-height:var(--topbar-h);
  padding:0 1.1rem;background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;box-shadow:var(--shadow-1);
}
nav.topbar .brand{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-weight:800;font-size:var(--fs-lg);color:var(--ink);letter-spacing:var(--ls-tight);text-decoration:none;
}
nav.topbar .brand:hover{text-decoration:none}
.brand-ico{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:28px;height:28px;background:var(--g-100);border-radius:8px;font-size:16px;line-height:1;
}
nav.topbar .tabs{display:flex;gap:.25rem}
nav.topbar .tabs a{
  text-decoration:none;color:var(--muted);font-weight:600;font-size:var(--fs-sm);
  padding:.4rem .9rem;border-radius:var(--radius-full);white-space:nowrap;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
nav.topbar .tabs a:hover{background:var(--g-50);color:var(--g-700);text-decoration:none}
nav.topbar .tabs a.active{background:var(--g-100);color:var(--g-800);font-weight:700}
body.student nav.topbar{gap:.6rem}

/* cards / surfaces */
.card,article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:1.1rem 1.2rem}
article{margin-bottom:1rem}
article h3,article h4{margin:0 0 .6rem}
.page-title{margin-bottom:1rem}
.page-title h2{margin:0 0 .15rem}
/* labeled form field (template editor 등) */
.field{display:block;font-weight:600;font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 .6rem}
.field>input:not([type=checkbox]):not([type=radio]),.field>textarea,.field>select{margin:.25rem 0 0}

/* home dashboard */
.dash{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.dash-card{
  display:block;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-2);padding:1.6rem;
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.dash-card:hover{transform:translateY(-3px);border-color:var(--g-300);box-shadow:var(--shadow-3)}
.dash-card,.dash-card *{text-decoration:none!important}
.dash-card .ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;background:var(--g-50);border-radius:14px;font-size:26px;line-height:1;
}
.dash-card h3{font-size:var(--fs-xl);font-weight:800;margin:.8rem 0 .2rem}
.dash-card p{margin:0}
.dash-card .count{
  display:inline-block;background:var(--g-100);color:var(--g-800);font-weight:700;
  font-size:var(--fs-sm);border-radius:var(--radius-full);padding:.25rem .8rem;margin-top:.6rem;
}

/* secondary tabs (오답 관리) — segmented control */
.subtabs{
  display:inline-flex;gap:2px;flex-wrap:wrap;margin-bottom:1rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:4px;box-shadow:none;
}
.subtabs a{
  text-decoration:none;color:var(--muted);font-weight:600;font-size:var(--fs-sm);
  padding:.38rem .85rem;border-radius:var(--radius-md);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.subtabs a:hover{background:var(--g-50);color:var(--g-700);text-decoration:none}
.subtabs a.active{background:#fff;color:var(--g-800);box-shadow:var(--shadow-1);font-weight:700}

/* toolbar */
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.5rem 0}

/* lists / items */
.list-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:.8rem 1rem;margin-bottom:.6rem;box-shadow:var(--shadow-1)}
.problem-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:.7rem .9rem;margin-bottom:.6rem;box-shadow:var(--shadow-1)}
.card.preamble{opacity:.65;border-style:dashed}
.student-row{padding:.85rem 1rem}
.student-link{font-weight:700;font-size:var(--fs-lg);color:var(--ink)}
.student-link:hover{color:var(--g-700);text-decoration:none}
.ws-title{font-weight:700;color:var(--ink)}
.ws-auto-badge{display:inline-flex;align-items:center;margin-left:.5rem;background:var(--g-100);color:var(--g-800);border:1px solid var(--g-200);font-weight:700;font-size:var(--fs-xs);border-radius:var(--radius-full);padding:.05rem .5rem;line-height:1.5;vertical-align:middle}

/* chips / tags */
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.35rem 0}
.chip{border-radius:var(--radius-full);padding:.15rem .7rem;font-size:var(--fs-xs);font-weight:600;cursor:pointer;border:1px solid transparent}
.chip.filter{background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.chip.filter:hover{border-color:var(--g-300);color:var(--g-700)}
.chip.filter.active{background:var(--grad-brand);color:#fff;border-color:transparent}
.chip.tag{background:var(--surface-2);color:var(--muted);border:1px solid var(--line);cursor:default}
/* #번호 태그 접기/펼치기 토글 칩 — filter 톤 유지, 점선으로 구분 */
.chip.filter.tag-num-toggle{border-style:dashed;font-weight:700}

/* dropzone / preview / mmd */
#drop-zone{border:2px dashed var(--line-strong);border-radius:var(--radius-lg);padding:3rem 1.5rem;text-align:center;cursor:pointer;background:var(--surface);color:var(--ink);transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
#drop-zone:hover,#drop-zone.dragover{border-color:var(--g-400);background:var(--g-50)}
.dz-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--g-50);border-radius:14px;font-size:24px;line-height:1;margin-bottom:.6rem}
.dz-title{font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:0}
.dz-sub{color:var(--muted);font-size:var(--fs-sm);margin:.35rem 0 0}
.preview{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:.5rem .75rem;min-height:2rem;overflow-x:auto}
.preview .katex-display{margin:.3em 0;overflow-x:auto;overflow-y:hidden}
.preview .mmd-h{display:block;font-weight:700;font-size:var(--fs-sm);color:var(--g-700);margin:.2em 0}
.preview .mmd-box{border:1px solid var(--ink-2);border-radius:2px;padding:.5rem .8rem;margin:.5rem 0}
/* clamp: 전체 렌더 후 높이만 접기 (수식 중간 자름 방지). max-height:none 전환이라 transition 없음 */
.prev-clamp{position:relative;overflow:hidden}
.prev-clamp.prev-lg{max-height:11rem}
.prev-clamp.prev-sm{max-height:5.5rem}
.prev-clamp.expanded{max-height:none}
.prev-clamp.overflowing{cursor:pointer}
.prev-clamp.overflowing::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2.6rem;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--surface));
  border-radius:0 0 var(--radius-md) var(--radius-md);
}
.prev-clamp.overflowing::before{
  content:"펼치기 ▾";position:absolute;right:.55rem;bottom:.3rem;z-index:1;pointer-events:none;
  font-size:var(--fs-xs);font-weight:600;color:var(--g-700);
}
.prev-clamp.overflowing.expanded::after{content:none}
.prev-clamp.overflowing.expanded::before{content:"접기 ▴"}
.mmd-img{max-width:100%;display:block;margin:.4em 0;border-radius:var(--radius-sm)}
textarea.mmd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;min-height:4.5rem}

/* spinner */
.spinner{display:inline-block;width:1em;height:1em;vertical-align:-.15em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;margin-right:.5em}
@keyframes spin{to{transform:rotate(360deg)}}

/* progress table (진도표) — hairline rows, borderless cells until focus */
table.progress{font-size:.9rem;border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums}
table.progress th,table.progress td{border-bottom:1px solid var(--line);padding:.6rem .5rem;vertical-align:top;text-align:left;line-height:1.6}
table.progress tbody tr:last-child td{border-bottom:none}
table.progress thead th{
  position:sticky;top:0;z-index:1;background:var(--g-50);color:var(--g-700);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;white-space:nowrap;
}
table.progress input:not([type=checkbox]),table.progress textarea{
  background:transparent;border:1.5px solid transparent;border-radius:var(--radius-sm);
  padding:.35rem;margin:0;font-size:.9rem;line-height:1.6;color:var(--ink);box-shadow:none;
}
table.progress input:not([type=checkbox]):focus,table.progress textarea:focus{
  background:#fff;border-color:var(--g-500);box-shadow:0 0 0 3px rgba(52,168,92,.18);outline:none;
}
/* autoGrow(app.ts)로 높이를 내용에 맞춤 — 고정 높이 스크롤바 대신 전체 표시 */
table.progress textarea{min-height:3.2rem;min-width:8rem;resize:none;overflow:hidden}
table.progress textarea.cell-lesson{min-width:18rem}
table.progress input.cell-date{width:5.5rem}
/* 진도표 cell components */
.session-cell{margin-bottom:.3rem}
.task-cell{min-width:16rem}
/* 과제 cell: 과제 목록 아래에 선생님 코멘트(hw_done) 메모를 점선으로 구분해 배치 */
.hw-memo-wrap{margin-top:.5rem;padding-top:.5rem;border-top:1px dashed var(--line)}
table.progress textarea.hw-memo{width:100%;min-width:0;min-height:2.6rem;font-size:.9rem;line-height:1.6;color:var(--ink)}
table.progress textarea.hw-memo::placeholder{color:var(--muted)}
/* 과제+코멘트 일체형 박스 (숙제 검사) — 코멘트는 박스 안 하단, 위 구분선으로 부착감 */
.task-item{border:1px solid var(--line);border-radius:var(--radius-md);padding:.45rem .6rem;margin:.4rem 0;background:var(--surface)}
.task-item.done{background:var(--g-50);border-color:var(--g-100)}
.task-item.partial{background:var(--warn-bg);border-color:#f0dcb4}
.task-item.miss{background:var(--danger-bg);border-color:#f0c4c4}
table.progress .task-item textarea.task-comment{font-size:.85rem;min-height:1.9rem;color:var(--ink-2);margin-left:0;border-top:1px solid var(--line);border-radius:0;padding-top:.4rem;margin-top:.35rem}
.task-row{display:flex;align-items:center;gap:.25rem;flex-wrap:nowrap;margin:.1rem 0}
.task-text{font-size:.9rem}
.task-text.done{color:var(--muted)}
.task-text.partial{color:var(--warn);font-weight:600}
.task-text.miss{color:var(--danger);font-weight:600}
/* 과제 텍스트 인라인 수정(숙제 검사) — 항상 편집 가능, blur 자동 저장.
   투명 보더·배경 및 흰 배경+초록 보더 포커스는 위 table.progress textarea(:focus) 규칙 재사용. */
table.progress .task-item textarea.task-text-edit{
  flex:1;min-width:0;min-height:1.6rem;font-size:.9rem;line-height:1.5;padding:.1rem .2rem;margin:0;resize:none;overflow:hidden;
}
.task-item textarea.task-text-edit.done{color:var(--muted)}
.task-item textarea.task-text-edit.partial{color:var(--warn);font-weight:600}
.task-item textarea.task-text-edit.miss{color:var(--danger);font-weight:600}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:1.7rem;height:1.7rem;padding:0;font-size:.8rem;border-radius:var(--radius-sm);
  background:var(--g-100);color:var(--g-700);
}
.icon-btn:hover{background:var(--g-200);filter:none;box-shadow:none}
.icon-btn.danger{background:var(--danger-bg);color:var(--danger)}
.icon-btn.danger:hover{background:#f9dede}
.icon-btn.partial{background:var(--warn-bg);color:var(--warn);font-weight:800}
.icon-btn.partial:hover{background:#f6e9cf}
.icon-btn.miss{background:var(--danger-bg);color:var(--danger);font-weight:800}
.icon-btn.miss:hover{background:#f9dede}
/* 회차 group card (teacher): real green border wrapping its 차시 table */
.round-block{overflow-x:auto;-webkit-overflow-scrolling:touch;border:2px solid var(--g-200)}
/* 회차 header band — shared by teacher .round-block & student .round-group */
.round-head{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin:-1.1rem -1.2rem .9rem;padding:.7rem 1.2rem;
  background:var(--g-50);border-bottom:1px solid var(--g-100);
  border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
}
.round-state{color:var(--g-700);font-size:var(--fs-xs);font-weight:700}

/* 6) Login hero ---------------------------------------------- */
/* While a login section is visible, body carries the hero gradient.
   fixed attachment → the gradient always spans exactly the viewport,
   at any window height, and ends in white: zero void, no seams.
   Logged-in views keep the plain --bg (selector stops matching). */
body:has(#login-view:not(.hidden)),
body:has(#login:not(.hidden)){background:var(--grad-hero) fixed}

#login-view,#login{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:calc(100vh - var(--topbar-h) - 4.25rem);
  min-height:calc(100dvh - var(--topbar-h) - 4.25rem);
}
/* barely-visible math-symbol backdrop (∑ ∫ π √ ± × ÷), g-300 glyphs,
   360px tile, glyphs kept inside tile bounds → no repeat seams */
#login-view::before,#login::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.08;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='360'%3E%3Cg%20fill='%2394d6a8'%20font-family='Georgia,serif'%3E%3Ctext%20x='46'%20y='84'%20font-size='46'%20transform='rotate(-12%2046%2084)'%3E%26%238721%3B%3C/text%3E%3Ctext%20x='238'%20y='66'%20font-size='54'%20transform='rotate(9%20238%2066)'%3E%26%238747%3B%3C/text%3E%3Ctext%20x='146'%20y='190'%20font-size='42'%20transform='rotate(-7%20146%20190)'%3E%26%23960%3B%3C/text%3E%3Ctext%20x='282'%20y='208'%20font-size='46'%20transform='rotate(11%20282%20208)'%3E%26%238730%3B%3C/text%3E%3Ctext%20x='72'%20y='294'%20font-size='40'%20transform='rotate(7%2072%20294)'%3E%26%23177%3B%3C/text%3E%3Ctext%20x='192'%20y='324'%20font-size='42'%20transform='rotate(-9%20192%20324)'%3E%26%23215%3B%3C/text%3E%3Ctext%20x='294'%20y='318'%20font-size='36'%20transform='rotate(5%20294%20318)'%3E%26%23247%3B%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0/360px 360px;
}
.login-wrap{position:relative;width:100%;max-width:520px;margin:0 auto;text-align:center}
.login-logo-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;background:linear-gradient(180deg,#f6fcf8 0%,var(--g-100) 100%);
  border-radius:22px;box-shadow:var(--shadow-2);font-size:40px;line-height:1;margin-bottom:20px;
}
.login-title{font-size:var(--fs-3xl);font-weight:800;line-height:1.2;letter-spacing:var(--ls-tight);margin:0 0 .55rem}
.grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-tag{color:var(--muted);font-size:var(--fs-base);margin:0}

/* role cards */
.role-cards{display:flex;gap:.9rem;margin-top:1.9rem}
.role-card{
  flex:1;display:flex;flex-direction:column;align-items:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-2);padding:1.5rem 1rem;
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.role-card:hover{transform:translateY(-3px);border-color:var(--g-300);box-shadow:var(--shadow-3)}
.role-card .ico{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:56px;height:56px;background:var(--g-50);border-radius:16px;font-size:30px;line-height:1;margin-bottom:.65rem;
}
.role-txt{display:flex;flex-direction:column;align-items:center;gap:.1rem}
.role-name{font-weight:700;font-size:var(--fs-lg)}
.role-card small{color:var(--muted);font-weight:500}
.role-go{color:var(--g-700);font-weight:600;font-size:var(--fs-sm);margin-top:.7rem}

/* teacher password form state */
#login-form{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-2);padding:1.75rem;max-width:400px;margin:1.9rem auto 0;text-align:center;
}
#login-back{margin:.9rem 0 0}

/* student login card */
.login-card{
  position:relative;width:100%;max-width:400px;margin:0 auto;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-2);padding:2rem 1.5rem;
}
.login-card .login-logo-ico{width:64px;height:64px;border-radius:20px;font-size:34px;margin-bottom:.9rem}
.login-card h2{margin:0 0 .2rem}
.login-card .login-tag{margin-bottom:1.4rem}
.login-alt{margin:1.15rem 0 0}

/* 로그인 역할 세그먼트: 학생 | 학부모 병렬 선택 */
.role-seg{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:4px;margin:0 0 1.1rem}
.role-seg button{flex:1;background:transparent;color:var(--muted);font-weight:600;font-size:var(--fs-sm);padding:.5rem .25rem;border-radius:var(--radius-md);box-shadow:none}
.role-seg button:hover{background:var(--g-50);filter:none;box-shadow:none}
.role-seg button.active{background:#fff;color:var(--g-800);font-weight:700;box-shadow:var(--shadow-1)}

/* 7) Student portal surfaces --------------------------------- */
/* greeting */
.student-hello{margin:.35rem 0 1rem}
.student-hello h1{font-size:var(--fs-2xl);font-weight:800;margin:0 0 .15rem}
.student-hello p{margin:0}
/* hero stat card */
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-2);padding:1.25rem 1.4rem;margin-bottom:1.4rem}
.stat-label{font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.stat-num{display:flex;align-items:baseline;gap:.3rem;margin:.1rem 0 .8rem}
.stat-big{font-size:var(--fs-3xl);font-weight:800;line-height:1.1}
.stat-unit{color:var(--ink);font-size:var(--fs-lg);font-weight:700}
.stat-total{color:var(--muted);font-size:var(--fs-sm);margin-left:.25rem}
.stat-empty{font-weight:700;font-size:var(--fs-lg)}
.bar{height:8px;background:var(--g-100);border-radius:var(--radius-full);overflow:hidden}
.bar-fill{height:100%;background:var(--grad-brand);border-radius:var(--radius-full);transition:width var(--dur-2) var(--ease)}
/* 회차 section header: badge + hairline rule */
.round-h{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0 .65rem}
.round-badge{background:var(--g-100);color:var(--g-800);font-weight:700;font-size:var(--fs-sm);border-radius:var(--radius-full);padding:.25rem .8rem;white-space:nowrap}
.round-rule{flex:1;height:1px;background:var(--line)}
/* 회차 group card (student portal) — same green-border language as teacher */
.round-group{border:2px solid var(--g-200);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1);padding:1.1rem 1.2rem;margin-bottom:1.2rem}
.round-group.current{border-color:var(--g-500)}
.round-group .lcard{box-shadow:none;border:1px solid var(--line)}
.round-group .lcard:last-child{margin-bottom:0}
/* 숙제 탭 차시 섹션 (박스 없이 회차 그룹 안에서 구분) — 박스 겹은 회차 그룹 + 과제 박스 2겹만 */
.session-sec{padding:.35rem 0 .8rem}
.session-sec:last-child{padding-bottom:0}
.session-sec + .session-sec{border-top:1px solid var(--line);padding-top:.9rem}
.session-sec .head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;font-weight:700;color:var(--ink)}
/* lesson cards */
.lcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:1.05rem 1.2rem;margin-bottom:.7rem}
.lcard .head{display:flex;align-items:center;gap:.5rem;font-weight:700;margin-bottom:.6rem;color:var(--ink)}
.head-date{font-variant-numeric:tabular-nums}
.session-chip{background:var(--g-50);color:var(--g-700);font-weight:700;font-size:var(--fs-xs);border-radius:var(--radius-sm);padding:.15rem .5rem}
.fld{border-left:3px solid var(--g-100);padding-left:.7rem;margin:.65rem 0}
.lbl{display:block;font-size:.8125rem;font-weight:700;color:var(--g-700);letter-spacing:.03em;margin-bottom:.15rem}
.val{font-size:1rem;font-weight:500;line-height:1.65;color:var(--ink);white-space:pre-wrap}
/* 상담 타임라인 (교사 콘솔 상담 탭) */
.consult-item{position:relative;padding:.2rem 0 1rem 1.4rem}
.consult-item::before{content:"";position:absolute;left:.32rem;top:.5rem;bottom:0;width:2px;background:var(--g-100)}
.consult-item:last-child::before{display:none}
.consult-item::after{content:"";position:absolute;left:0;top:.45rem;width:10px;height:10px;border-radius:50%;background:var(--g-400);border:2px solid #fff;box-shadow:0 0 0 1px var(--g-200)}
.consult-item .val{margin-top:.35rem}
/* 선생님 코멘트 블록 (숙제 탭, hw_done) */
.coach-note{background:var(--g-50);border-left:3px solid var(--g-300);border-radius:var(--radius-sm);padding:.5rem .7rem;margin-top:.5rem;font-size:var(--fs-sm);color:var(--ink-2);white-space:pre-wrap}
.coach-note-lbl{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--g-700);margin-bottom:.15rem}
.coach-note-body{font-size:.9rem;line-height:1.6}
/* 과제+코멘트 일체형 박스 (학생·학부모 포털) — 컨테이너는 세로 flex, 상태 틴트는 전체 박스에 */
.tasks .task{
  display:flex;flex-direction:column;align-items:stretch;width:100%;margin:.4rem 0;padding:.55rem .8rem;
  border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--line);
  box-shadow:none;transition:background var(--dur-1) var(--ease);
}
/* .task-main만 탭 대상 — 전역 button 그라디언트를 리셋 */
.task-main{
  display:flex;align-items:center;gap:.65rem;width:100%;min-height:34px;
  text-align:left;font:inherit;font-weight:400;color:inherit;
  background:none;border:none;padding:0;margin:0;cursor:pointer;box-shadow:none;
}
.task-main:hover{background:none;filter:none;box-shadow:none}
.task-main:active{transform:scale(.985);box-shadow:none}
.tasks .task .grow{font-size:.95rem}
.tasks .task.done{background:var(--g-50);border-color:var(--g-100)}
.tasks .task.done .grow{color:var(--muted)}
.tasks .task.partial{background:var(--warn-bg);border-color:#f0dcb4}
.tasks .task.miss{background:var(--danger-bg);border-color:#f0c4c4}
.task-partial-cap{color:var(--warn);font-size:var(--fs-xs);font-weight:700;flex-shrink:0}
.task-miss-cap{color:var(--danger);font-size:var(--fs-xs);font-weight:700;flex-shrink:0}
/* 과제별 선생님 코멘트 — 같은 박스 안 하단, 얇은 구분선 + 전체 폭(들여쓰기 없음) */
.task-cmt{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--g-800);white-space:pre-wrap}
/* state marker: empty box / green check / amber △ / red ✕ */
.tri-box{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:1.35rem;height:1.35rem;border-radius:6px;line-height:1;
  border:2px solid var(--line-strong);background:var(--surface);
  color:transparent;font-size:.9rem;font-weight:800;
}
.tri-box.done{background:var(--grad-brand);border-color:transparent;color:#fff}
.tri-box.partial{background:var(--warn-bg);border-color:#f0dcb4;color:var(--warn)}
.tri-box.miss{background:var(--danger-bg);border-color:#f0c4c4;color:var(--danger)}
.pill{display:inline-block;background:var(--g-100);color:var(--g-700);font-weight:700;border-radius:var(--radius-full);padding:.15rem .7rem;font-size:var(--fs-sm)}

/* utilities */
.hidden{display:none!important}
.muted{color:var(--muted);font-size:var(--fs-sm)}
.error{color:var(--danger)}
.success{color:var(--g-700)}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.grow{flex:1}

/* 7b) 오답관리 확장: 문제집·오답노트·모의고사 --------------- */

/* number-chip grid (문제집 문항 · 오답노트 문항) */
.num-grid{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0}
.num-chip{
  min-width:2.1rem;padding:.28rem .5rem;font-size:var(--fs-xs);font-weight:700;line-height:1;
  border-radius:var(--radius-sm);cursor:pointer;
  background:var(--surface);color:var(--muted);border:1.5px solid var(--line);
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.num-chip:hover{border-color:var(--g-300);color:var(--g-700);filter:none;box-shadow:none}
.num-chip.linked{background:var(--g-100);color:var(--g-800);border-color:var(--g-200)}
.num-chip.active{box-shadow:0 0 0 3px rgba(52,168,92,.25)}
.num-chip.unlinked{border-style:dashed}
.num-chip.wrong{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}
.num-chip.wrong:hover{background:#f9dede;color:var(--danger)}

/* 문제집 상세: 단원 카드 / 문제 연결 패널 */
.unit-card{margin-bottom:.8rem}
/* .row 안 좁은 입력칸 — 전역 input{width:100%} (0-2-1)을 뒤 선언 동률로 이김 */
.row>input.wb-num{width:10.5rem;flex:0 0 auto}
.row>input.score-in{width:7rem;flex:0 0 auto}
.row>input.date-in{width:11rem;flex:0 0 auto}
/* 시험명: 넓으면 grow, 좁으면 다음 줄 wrap (basis 12rem이 shrink 붕괴 방지) */
.row>input.title-in{flex:1 1 12rem;min-width:9rem}
.link-panel{margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--line)}

/* 문제집 표지 사진 */
.wb-cover-thumb{width:44px;height:58px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line);flex-shrink:0}
span.wb-cover-thumb{display:inline-flex;align-items:center;justify-content:center;font-size:22px;background:var(--surface-2)}
.wb-cover{display:block;max-width:140px;border-radius:var(--radius-md);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.wb-head{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.wb-cover-box{display:flex;flex-direction:column;align-items:center;gap:.45rem;flex-shrink:0}

/* 문제집 PDF 가져오기 (브라우저 로컬 pdf.js) */
.pdf-import h4{margin:.2rem 0 .3rem}
.pdf-import h5{margin:.9rem 0 .35rem;font-size:var(--fs-base);color:var(--g-800)}
.pdf-import-status{margin:.4rem 0;min-height:1.2em}
.pdf-import-cover{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.pdf-import-cover-prev{max-width:160px;border-radius:var(--radius-md);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.pdf-import-strip{display:flex;gap:.5rem;overflow-x:auto;padding:.4rem 0;-webkit-overflow-scrolling:touch}
.pdf-import-thumb{flex:0 0 auto;width:120px;cursor:pointer;border:2px solid var(--line);border-radius:var(--radius-sm);padding:2px;background:var(--surface);text-align:center}
.pdf-import-thumb:hover{border-color:var(--g-300)}
.pdf-import-thumb.selected{border-color:var(--g-500);box-shadow:0 0 0 3px rgba(52,168,92,.22)}
.pdf-import-thumb-img{display:block;width:100%;height:auto;border-radius:calc(var(--radius-sm) - 2px)}
.pdf-import-thumb-no{font-size:var(--fs-xs);font-weight:700;color:var(--muted);padding:.15rem 0}
.pdf-import-bill{margin-left:.5rem}
.row>input.pdf-import-num{width:7rem;flex:0 0 auto}
.pdf-import-table-wrap{overflow-x:auto;margin:.5rem 0}
.pdf-import-table{border-collapse:collapse;min-width:30rem;width:100%}
.pdf-import-table th,.pdf-import-table td{border:1px solid var(--line);padding:.3rem .4rem;text-align:left;vertical-align:middle}
.pdf-import-table th{background:var(--surface-2);font-size:var(--fs-xs);color:var(--muted);font-weight:700}
.pdf-import-table input{width:100%}
.pdf-import-table input.pdf-import-num{width:6rem}

/* 단원 DB 문제 픽커: 결과 리스트는 카드 안에서 스크롤 */
.picker-results{max-height:24rem;overflow-y:auto;margin-top:.5rem}

/* 오답노트: 단원 블록 (초록 카드 톤 — 보더+헤더 틴트) / 요약 */
.unit-block{margin:.7rem 0;padding:.7rem .85rem;border:1.5px solid var(--g-200);border-radius:var(--radius-md);background:var(--surface)}
.unit-block h4{margin:-.7rem -.85rem .55rem;padding:.45rem .85rem;font-size:var(--fs-base);color:var(--g-800);background:var(--g-50);border-bottom:1px solid var(--g-100);border-radius:calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0}
.wrong-summary{margin:.5rem 0}

/* 오답노트: 문제집 선택 칩의 오답 수 배지 (빨강 틴트) */
.wb-wrong-badge{display:inline-flex;align-items:center;background:var(--danger-bg);color:var(--danger);font-weight:700;font-size:var(--fs-xs);border-radius:var(--radius-full);padding:.05rem .5rem;line-height:1.5}
.fdoc-chip.active .wb-wrong-badge{background:rgba(255,255,255,.22);color:#fff}

/* 오답 목록(미리보기): 라벨 + 본문 KaTeX 클램프 / 미연결 배지 */
.wrong-list{display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0 .2rem}
.wrong-item{display:flex;gap:.65rem;align-items:flex-start;padding:.5rem .65rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.wrong-label{flex:0 0 auto;align-self:center;background:var(--g-100);color:var(--g-800);font-weight:700;font-size:var(--fs-xs);border-radius:var(--radius-full);padding:.2rem .7rem;white-space:nowrap}
.wrong-prev{flex:1 1 auto;min-width:0;max-height:4.5rem;overflow:hidden;font-size:var(--fs-sm);color:var(--ink)}
.wrong-prev.muted{color:var(--muted);font-size:var(--fs-xs)}
.wrong-unlinked{flex:1 1 auto;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.wrong-badge-unlinked{background:var(--warn-bg);color:var(--warn);font-weight:700;font-size:var(--fs-xs);border-radius:var(--radius-full);padding:.2rem .6rem}

/* 모의고사: 차트 카드 + SVG */
.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:1rem 1.1rem;margin-bottom:1rem}
.chart-controls{margin-bottom:.4rem}
.chart-plot{position:relative;width:100%}
.chart-svg{display:block;width:100%;height:auto;overflow:visible}
.chart-empty{text-align:center;padding:2rem 1rem;margin:0}
.chart-legend{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:.5rem}
.leg-item{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.src-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;flex-shrink:0;vertical-align:middle}
.cx-grid{stroke:var(--line);stroke-width:1}
.cx-axis{fill:var(--muted);font-size:11px;font-family:var(--font-sans)}
.cx-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cx-dot{stroke:#fff;stroke-width:2}
.cx-trend{fill:none;stroke-width:2;stroke-dasharray:6 4;opacity:.5}
.cx-hit{fill:transparent;cursor:pointer}
.chart-tip{
  position:absolute;transform:translate(-50%,-135%);pointer-events:none;z-index:5;white-space:nowrap;
  background:var(--ink);color:#fff;border-radius:var(--radius-sm);padding:.35rem .55rem;font-size:var(--fs-xs);
  box-shadow:var(--shadow-2);
}
.chart-tip .tip-title{font-weight:700}
.chart-tip .tip-date{color:var(--g-200)}

/* 모의고사: 성적 테이블 */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mock-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.mock-table th,.mock-table td{border-bottom:1px solid var(--line);padding:.45rem .55rem;text-align:left;white-space:nowrap;vertical-align:middle}
.mock-table thead th{background:var(--g-50);color:var(--g-700);font-size:var(--fs-xs);font-weight:700}

/* 결제 (교사 결제 탭 + 학부모 포털 결제 탭) */
.mock-table tr.pay-total td{font-weight:800;background:var(--g-50);color:var(--g-800);border-bottom:none}
/* 납입 내역 월별 그룹 */
.pay-month{margin:.4rem 0 1rem}
.pay-month-head{display:flex;align-items:center;gap:.6rem;margin:0 0 .4rem}
.pay-grand{display:flex;justify-content:space-between;font-weight:800;border-top:2px solid var(--g-200);margin-top:.6rem;padding-top:.55rem}
/* 월별 표가 각기 다른 폭을 잡아 열이 어긋나던 문제 → 고정 레이아웃 + 공통 열 폭.
   회차|금액|납입일|메모(가변)|액션(교사 5번째 열만). 학부모 표는 4열이라 nth-child(5)에 안 걸림. */
.pay-month table{table-layout:fixed;width:100%}
.pay-month th:nth-child(1),.pay-month td:nth-child(1){width:4.5rem}
.pay-month th:nth-child(2),.pay-month td:nth-child(2){width:6.5rem;white-space:nowrap}
.pay-month th:nth-child(3),.pay-month td:nth-child(3){width:7.2rem;white-space:nowrap}
.pay-month th:nth-child(5),.pay-month td:nth-child(5){width:5.5rem}
.pay-month td:nth-child(4){white-space:normal;overflow-wrap:anywhere}
.row>input.pay-round{width:6rem;flex:0 0 auto}
.row>input.pay-amount{width:9.5rem;flex:0 0 auto}
.row>input.phone-in{width:13rem;flex:0 0 auto}
/* 현금영수증 병합 행 (교사 결제 탭 입력 카드 하단) */
.pay-receipt-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.7rem;padding-top:.7rem;border-top:1px dashed var(--line)}
.pay-receipt-row .muted{font-size:var(--fs-xs)}
.lbl-inline{font-size:var(--fs-xs);font-weight:700;color:var(--g-700)}
/* 학부모 포털 현금영수증 입력 (한 줄) */
.row>input.receipt-phone{flex:1 1 12rem;min-width:9rem}
/* 빈 상태 (납입 내역 없음 등) */
.empty-state{text-align:center;padding:1.5rem 0}
.empty-state p{margin:0}
.empty-emoji{font-size:1.6rem;line-height:1;margin-bottom:.4rem}
/* 학부모 숙제 탭: 상태 표시 전용 (클릭 불가) — .task-main이 비인터랙티브 div */
.tasks .task.readonly .task-main{cursor:default}
.tasks .task.readonly .task-main:active{transform:none}

/* 8) Responsive ---------------------------------------------- */
@media (max-width:640px){.dash{grid-template-columns:1fr}}
@media (max-width:560px){
  nav.topbar{gap:.35rem;padding:0 .6rem}
  nav.topbar .brand{font-size:var(--fs-xs);white-space:nowrap}
  nav.topbar .tabs{gap:.2rem}
  nav.topbar .tabs a{padding:.35rem .5rem;font-size:var(--fs-xs)}
  .ghost{padding:.3rem .55rem;font-size:var(--fs-xs)}
  /* role cards become full-width horizontal rows (better thumb targets) */
  .role-cards{flex-direction:column;gap:10px;margin-top:1.5rem}
  .role-card{flex-direction:row;align-items:center;gap:.9rem;padding:1rem 1.1rem;text-align:left}
  .role-card .ico{width:48px;height:48px;font-size:26px;border-radius:14px;margin-bottom:0}
  .role-txt{align-items:flex-start}
  .role-go{margin:0 0 0 auto;white-space:nowrap}
}

/* 8b) 통합관리시스템: 숨긴 관리자 진입 + 학생 포털 탭 -------- */
.admin-entry{margin:2rem 0 0;text-align:center}
.admin-link{font-size:.72rem;color:var(--muted);opacity:.25;text-decoration:none;transition:opacity var(--dur-1) var(--ease)}
.admin-link:hover,.admin-link:focus-visible{opacity:.8;text-decoration:underline}
.num-chip.static{cursor:default}
body.student .subtabs{margin:0 0 1rem}
body.student .lcard .head .muted{margin-left:auto;font-size:var(--fs-sm)}

/* 8c) 진행중 회차 강조(초록 테두리) + 지난 회차 구분선 ----- */
.round-block.current{border-color:var(--g-500)}
.round-badge.current{background:var(--grad-brand);color:#fff}
.past-divider{display:flex;align-items:center;gap:.8rem;margin:1.7rem 0 1rem;color:var(--muted);font-size:var(--fs-sm);font-weight:700;white-space:nowrap}
.past-divider::before,.past-divider::after{content:"";flex:1;height:1px;background:var(--line-strong)}
/* 회차 카드 모바일 패딩 축소 (헤더 밴드 음수 마진도 함께) */
@media (max-width:560px){
  .round-block,.round-group{padding:.85rem .9rem}
  .round-head{margin:-.85rem -.9rem .7rem;padding:.6rem .9rem}
}

/* 오답노트 number-chip 터치 타깃 — 모바일에서 최소 40×40 보장 */
@media (max-width:430px){
  .num-chip{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
}

/* 8d) 서브탭이 많아지면(교사 8·학부모 7) 모바일에서 가로 스크롤 -------- */
@media (max-width:560px){
  .subtabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  .subtabs a{flex:0 0 auto}
}

/* 10) 월간 피드백 문서(fdoc) — 교사 미리보기·인쇄뷰·학부모 포털 공유 ------
   초록 헤더 밴드·표·서술·캘린더. 토큰 재사용, 클래스 접두사 .fdoc-. */
.fdoc{max-width:800px;margin:0 auto;color:var(--ink);font-size:.95rem;line-height:1.65}
.fdoc-title{font-size:var(--fs-2xl);font-weight:800;text-align:center;margin:.2rem 0 1.5rem;letter-spacing:var(--ls-tight)}
.fdoc-section{margin:0 0 1.7rem}
.fdoc-h{background:var(--grad-brand);color:#fff;font-weight:700;font-size:var(--fs-lg);padding:.5rem .95rem;border-radius:var(--radius-md);margin:0 0 .85rem;box-shadow:var(--shadow-brand)}
.fdoc-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem;margin:0 0 .85rem;font-variant-numeric:tabular-nums}
.fdoc-table th,.fdoc-table td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left;vertical-align:top;line-height:1.55}
.fdoc-table thead th{background:var(--g-50);color:var(--g-800);font-weight:700;white-space:nowrap}
.fdoc-sess{white-space:nowrap;font-weight:700;color:var(--g-800)}
.fdoc-sess-date{font-weight:500;color:var(--muted);font-size:var(--fs-xs);margin-top:.15rem}
.fdoc-tasks{display:flex;flex-direction:column;gap:.25rem}
.fdoc-task{display:flex;gap:.45rem;align-items:baseline}
.fdoc-mark{flex:0 0 auto;width:1.1em;text-align:center;font-weight:800}
.fdoc-mark.done-0{color:var(--muted)}
.fdoc-mark.done-1{color:var(--g-600)}
.fdoc-mark.done-2{color:var(--warn)}
.fdoc-mark.done-3{color:var(--danger)}
.fdoc-note{white-space:pre-wrap;background:var(--g-50);border-left:3px solid var(--g-300);border-radius:var(--radius-sm);padding:.65rem .85rem;color:var(--ink-2)}
/* Ⅲ 캘린더 */
.fdoc-cal{display:flex;flex-direction:column;gap:1.1rem}
.fdoc-cal-label{font-weight:700;color:var(--g-800);margin:0 0 .45rem}
.fdoc-cal-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:var(--fs-xs)}
.fdoc-cal-table th{background:var(--g-50);color:var(--g-700);text-align:center;font-weight:700;padding:.3rem 0;border:1px solid var(--line)}
.fdoc-cal-table td{height:3.1rem;vertical-align:top;padding:.25rem .3rem;border:1px solid var(--line);color:var(--ink-2)}
.fdoc-cal-empty{background:var(--surface-2)}
.fdoc-cal-day .d{font-weight:600;display:block;text-align:right}
.fdoc-cal-day.has-mark{background:var(--g-50);border-color:var(--g-200)}
.fdoc-cal-day .mark{display:block;margin-top:.15rem;color:var(--g-700);font-weight:700;font-size:.68rem;line-height:1.2;white-space:normal}

/* 교사 편집 화면(칩·상태 배지·에디터·미리보기) */
.fdoc-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1rem}
.fdoc-chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-weight:700;font-size:var(--fs-sm);border-radius:var(--radius-full);padding:.32rem .85rem;cursor:pointer}
.fdoc-chip:hover{border-color:var(--g-300)}
.fdoc-chip.active{background:var(--grad-brand);color:#fff;border-color:transparent}
.fdoc-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--line-strong);flex:0 0 auto}
.fdoc-dot.draft{background:var(--warn)}
.fdoc-dot.published{background:var(--g-500)}
.fdoc-chip.active .fdoc-dot{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.fdoc-badge{display:inline-flex;align-items:center;font-weight:700;font-size:var(--fs-sm);border-radius:var(--radius-full);padding:.25rem .75rem}
.fdoc-badge.draft{background:var(--warn-bg);color:var(--warn)}
.fdoc-badge.published{background:var(--g-100);color:var(--g-800)}
.fdoc-actions{display:flex;align-items:center;gap:.55rem;margin:0 0 1rem}
.fdoc-field-label{display:block;font-weight:700;color:var(--g-800);font-size:var(--fs-sm);margin:.9rem 0 .35rem}
textarea.fdoc-input{width:100%;min-height:6rem;resize:none;overflow:hidden;line-height:1.7}
.fdoc-preview-title{margin:1.4rem 0 .6rem}
.fdoc-preview{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:1.4rem 1.3rem;overflow-x:auto}

/* 인쇄뷰: 화면 액션 + 크롬 숨김 + A4 print */
.fdoc-print-actions{display:flex;gap:.5rem;margin:0 0 1.2rem}
body.feedback-print .topbar{display:none}
body.feedback-print main{max-width:820px}
@media print{
  @page{size:A4;margin:0} /* 여백 0 → 브라우저 머리글/바닥글 제거. 안쪽 여백은 .fdoc padding+clone으로 매 페이지 재현 */
  html,body{background:#fff}
  .topbar,.fdoc-print-actions,.subtabs,.toolbar{display:none!important}
  main{padding:0!important;margin:0!important;max-width:none!important}
  .fdoc-preview{border:none;box-shadow:none;padding:0}
  .fdoc{max-width:none;margin:0;padding:14mm;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .fdoc-h{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;break-after:avoid}
  .fdoc-title{break-after:avoid}
  .fdoc-cal-month{break-inside:avoid}
  .fdoc-table tr{break-inside:avoid}
  .fdoc-table thead{display:table-header-group}
  .fdoc-table thead th,.fdoc-cal-table th,.fdoc-cal-day.has-mark,.fdoc-badge{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* 11) 수업 일정 페이지(schedule) — 교사 학생 상세·학생/학부모 포털 공유.
   .fdoc-cal* 그리드 재사용 + 다음 수업 요약(sched-next) + 오늘 강조(is-today). */
.sched{display:flex;flex-direction:column;gap:1.1rem}
.sched-next{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;background:var(--g-50);border:1px solid var(--g-200);border-radius:var(--radius-full);padding:.4rem .95rem;color:var(--g-800)}
.sched-next-lbl{color:var(--g-600);font-weight:700;font-size:var(--fs-sm)}
.sched-next-val{font-weight:800}
.sched-empty{color:var(--muted);text-align:center;padding:1.6rem 0}
.fdoc-cal-day.is-today{border-color:var(--g-500);box-shadow:inset 0 0 0 2px var(--g-500)}
.fdoc-cal-day.is-today .d{color:var(--g-700)}

/* 8.5) 결제 현황 대시보드 ------------------------------------- */
.billing-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.2rem 0 1rem}
.billing-toolbar input{flex:1 1 14rem;min-width:10rem;margin-bottom:0}
.billing-list{display:flex;flex-direction:column;gap:.8rem}
.billing-card{padding:.9rem 1.1rem}
.billing-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.billing-head strong{font-size:var(--fs-lg);font-weight:700}
.billing-payer{font-size:var(--fs-xs)}
.billing-round{background:var(--g-100);color:var(--g-800);font-weight:700;font-size:var(--fs-sm);border-radius:var(--radius-full);padding:.2rem .75rem;white-space:nowrap}
.billing-progress{height:7px;background:var(--g-100);border-radius:var(--radius-full);overflow:hidden;margin:.55rem 0 .8rem}
.billing-progress-fill{height:100%;background:var(--grad-brand);border-radius:var(--radius-full);transition:width var(--dur-2) var(--ease)}
.billing-cells{display:flex;gap:.6rem 1.2rem;flex-wrap:wrap;align-items:center}
.billing-cell{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.billing-lbl{font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.billing-chip{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;font-size:var(--fs-sm);border-radius:var(--radius-full);padding:.25rem .8rem;cursor:pointer;border:1px solid transparent}
.billing-chip.none{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.billing-chip.draft{background:var(--warn-bg);color:var(--warn)}
.billing-chip.pub{background:var(--g-100);color:var(--g-800)}
.billing-chip:hover{filter:brightness(.98);box-shadow:none}
.billing-ok{font-weight:700;font-size:var(--fs-sm);color:var(--g-700)}
.billing-compose-slot{margin-top:.85rem}
.billing-compose{border-top:1px dashed var(--line);padding-top:.8rem}
textarea.billing-msg{width:100%;min-height:7rem;resize:none;overflow:hidden;line-height:1.7;white-space:pre-wrap}

/* 거래내역 업로드(입금 자동 매칭) */
.import-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.import-slot:not(:empty){margin:-.4rem 0 1rem}
.import-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:1rem 1.1rem;box-shadow:var(--shadow-1)}
.import-card-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}
.import-card-head strong{font-size:var(--fs-lg);font-weight:700}
.import-loading{margin:.4rem 0}
.import-table-wrap{overflow-x:auto}
.import-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.import-table th,.import-table td{text-align:left;padding:.4rem .55rem;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.import-table th{font-size:var(--fs-xs);color:var(--muted);font-weight:700}
.import-table .import-amt{font-variant-numeric:tabular-nums;font-weight:700}
.import-row-off{color:var(--muted)}
.import-chip{display:inline-block;font-weight:700;font-size:var(--fs-xs);border-radius:var(--radius-full);padding:.15rem .6rem;border:1px solid transparent;white-space:nowrap}
.import-chip.ok{background:var(--g-100);color:var(--g-800)}
.import-chip.warn{background:var(--warn-bg);color:var(--warn)}
.import-chip.dup,.import-chip.none{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.import-foot{display:flex;justify-content:flex-end;margin-top:.8rem}

/* R3) 문제 추가 — Mathpix 사용량 · 대용량 PDF 범위/진행바 -------- */
.ocr-usage{margin:.2rem 0 .6rem}
.ocr-usage-out{margin-left:.5rem}
.ocr-panel{margin:.6rem 0}
.row>input.ocr-range-num{width:6rem;flex:0 0 auto}
.ocr-bill{margin:.3rem 0}
.ocr-progress-wrap:empty{margin:0}
.ocr-progress-wrap{margin:.6rem 0}
.ocr-progress-label{margin-bottom:.35rem}
.ocr-progress{height:.55rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-full);overflow:hidden}
.ocr-progress-bar{height:100%;background:var(--g-500);transition:width .2s ease}

/* R5) 문제 추가 — PDF 뷰어 + 드래그 영역 스캔 -------- */
.pdfv-card{margin:.6rem 0}
.pdfv-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.5rem}
.pdfv-controls .grow{flex:1 1 auto}
.pdfv-page-input{width:3.4rem;text-align:center;flex:0 0 auto;margin:0}
.pdfv-page-total{color:var(--muted);font-size:var(--fs-sm)}
.pdfv-bill{color:var(--muted);font-size:var(--fs-xs);margin:.1rem 0 .5rem}
.pdfv-canvas-wrap{position:relative;width:100%;max-width:860px;margin:0 auto;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;min-height:2rem}
.pdfv-canvas{display:block;width:100%;height:auto}
.pdfv-canvas-wrap.pdfv-loading{opacity:.55}
.pdfv-overlay{position:absolute;inset:0;touch-action:none;cursor:crosshair}
.pdfv-sel{position:absolute;box-sizing:border-box;border:2px solid var(--g-500);background:rgba(52,168,92,.18);pointer-events:none}
.pdfv-sel-btns{position:absolute;display:flex;gap:.3rem;z-index:2}
.pdfv-status{margin-top:.5rem;min-height:1.2rem}
.pdfv-bulk{margin:.6rem 0}
.pdfv-bulk>summary{cursor:pointer;font-weight:600;color:var(--g-700);padding:.35rem 0;list-style:revert}

/* R1) 시범과외 파이프라인(전화상담 → 시범 → 정규/미성사) -------- */
.trial-list{display:flex;flex-direction:column;gap:.8rem}
.trial-card .trial-phone{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.trial-badge{display:inline-flex;align-items:center;font-weight:700;font-size:var(--fs-xs);border-radius:var(--radius-full);padding:.2rem .7rem;white-space:nowrap}
.trial-badge.warn{background:var(--warn-bg);color:var(--warn)}
.trial-badge.green{background:var(--g-100);color:var(--g-700)}
.trial-badge.muted{background:var(--danger-bg);color:var(--danger)}
.trial-badge.done{background:var(--g-800);color:#fff}
.trial-dates{display:flex;gap:.5rem;flex-wrap:wrap;margin:.55rem 0 .1rem}
.trial-date{font-size:var(--fs-xs);font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-full);padding:.15rem .6rem;white-space:nowrap}
.trial-card-foot{display:flex;align-items:center;gap:.5rem;margin-top:.6rem}
.trial-detail-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.trial-detail-head input.title-in{flex:1 1 12rem;min-width:9rem;margin-bottom:0}
.trial-section{margin-bottom:.9rem}
.trial-section-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.trial-section-head h3{margin:0}
.trial-script{white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:.85rem 1rem;line-height:1.7;font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--ink-2);margin:0}
textarea.trial-script-edit{width:100%;min-height:8rem;resize:none;overflow:hidden;line-height:1.7;margin-bottom:0}
.trial-q{margin:0 0 .7rem}
.trial-q-label{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--muted);margin-bottom:.3rem}
textarea.trial-field{width:100%;resize:none;overflow:hidden;line-height:1.6;margin-bottom:0}
.trial-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.trial-fee-row{align-items:center}
.trial-fee-row input[type=number]{width:9rem}
.trial-paid{display:inline-flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.trial-register-slot:not(:empty){margin-top:.7rem}
.trial-register-form{border-top:1px dashed var(--line);padding-top:.7rem}
.trial-register-done{margin:.2rem 0}

/* 시험지 만들기 골라담기 — 담기 피드백 */
.picked-count{display:inline-block;background:var(--g-100);color:var(--g-800);font-weight:700;font-size:var(--fs-xs);border-radius:var(--radius-full);padding:.1rem .55rem;margin-left:.15rem;vertical-align:middle}
.picked-count:empty{display:none}
.mini.picked-flash{background:var(--g-100);color:var(--g-800);border:1px solid var(--g-300)}
.mini.picked-in{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}

/* 9) Motion preference --------------------------------------- */
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}