@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   hmibt LMS · Design System
   ---------------------------------------------------------------
   1  Tokens          2  Reset & base      3  Typography
   4  Layout shells   5  Auth gate         6  Page header
   7  Surfaces        8  Tables            9  Forms
   10 Buttons         11 Status atoms      12 Messaging
   13 Domain modules  14 Utilities         15 Responsive & a11y
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  /* brand ramp — 버건디.
     첫 화면(home.css)이 버건디인데 로그인 뒤 화면은 청록이라 다른 사이트처럼
     보였습니다. --brand-600 을 home.css 의 --terra 와 **같은 값**으로 맞췄고,
     --brand-700 은 --terra-dark 와 같습니다. 한쪽을 바꾸면 다른 쪽도 함께
     바꾸세요 — 두 파일이 어긋나면 화면을 넘길 때 색이 튑니다. */
  --brand-50:#f9f3f4;  --brand-100:#f1e2e4; --brand-200:#e6c4c9;
  --brand-300:#d79ba4; --brand-400:#c5606f; --brand-500:#a93546;
  --brand-600:#8b2635; --brand-700:#6f1d29; --brand-800:#561821;
  --brand-900:#3e1118;

  /* neutral canvas — 로즈 크림. 회색도 살짝 붉은 기를 띠어야 버건디와
     한 벌로 보입니다. 청록빛 회색 위에 버건디를 얹으면 색이 싸웁니다. */
  --bg:#faf6f4;
  --surface:#ffffff;
  --surface-2:#fdfbfa;
  --surface-3:#f4ebe9;
  --surface-inset:#fbf7f6;
  --border:#e8dcda;
  --border-2:#f2e9e7;
  --border-strong:#d6c4c1;

  /* ink */
  --ink:#241d1f;
  --ink-2:#5c4f52;
  /* 흐린 글자. 예전 값(#7b8c87)은 흰 바탕에서 3.5:1 밖에 안 나와 휴대폰을
     밝은 곳에서 볼 때 잘 안 보였습니다. 흰 카드 5.0:1 · 로즈 바탕 4.6:1
     둘 다 기준(4.5)을 넘는 값으로 올렸습니다. */
  /* --ink-3 는 옅은 카드 위에서 대비가 4.33배로 국제 기준(4.5)에
     못 미쳤습니다. 한 단계 진하게 해 5.50배로 올렸습니다.
     어두운 테마도 4.44 → 5.42 로 함께 올렸습니다. */
  --ink-3:#6C5C60;
  --ink-on-brand:#ffffff;

  /* semantic */
  --accent:var(--brand-600);
  --accent-ink:var(--brand-700);
  --accent-soft:var(--brand-50);
  --accent-line:var(--brand-200);

  --amber:#95600d;      --amber-soft:#fdf5e7; --amber-line:#f0dcb0;
  --red:#a8321f;        --red-soft:#fceeeb;   --red-line:#f2ccc4;
  --green:#186b46;      --green-soft:#e8f4ee; --green-line:#bcddca;
  --info:#1c5b91;       --info-soft:#eaf2fa;  --info-line:#c3d9ee;

  /* 과목 구분색 여섯 벌. 위 semantic 색과 달리 좋다/나쁘다를 뜻하지 않고
     '다른 과목'이라는 것만 알려 줍니다. 모두 흰 바탕에서 본문만큼 진해서
     색을 구별하기 어려운 분에게도 글자는 그대로 읽힙니다. */
  --hue0:#4a6a1e; --hue0-line:#cfe0b8;
  --hue1:#1c5b91; --hue1-line:#c3d9ee;
  --hue2:#146b60; --hue2-line:#aed8d0;
  --hue3:#5a4bb0; --hue3-line:#cdc7ee;
  --hue4:#9a5410; --hue4-line:#f0d8b6;
  --hue5:#a8325a; --hue5-line:#f0c4d2;

  /* focus */
  --focus:var(--brand-500);
  --focus-halo:rgba(169,53,70,.22);

  /* elevation */
  /* 그림자도 따뜻한 쪽으로. 청록빛 그림자는 로즈 바탕에서 회색이 아니라
     초록으로 보입니다. */
  --sh-1:0 1px 2px rgba(45,25,28,.05);
  --sh-2:0 1px 2px rgba(45,25,28,.05), 0 6px 16px -8px rgba(45,25,28,.14);
  --sh-3:0 2px 6px -1px rgba(45,25,28,.08), 0 18px 36px -12px rgba(45,25,28,.20);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.6);

  /* geometry */
  --r-xs:6px; --r-sm:8px; --r:10px; --r-md:12px;
  --r-lg:16px; --r-xl:22px; --r-full:999px;

  /* type */
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
         "Apple SD Gothic Neo","Segoe UI","Noto Sans KR","Malgun Gothic",
         system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,"Cascadia Mono",
         Consolas,"Liberation Mono",monospace;

  /* motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.16s;

  /* metrics */
  --rail-w:230px;
  --topbar-h:54px;
  --tabbar-h:58px;

  color-scheme:light;
}

/* dark theme — follows OS unless the user picks one explicitly */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) { color-scheme:dark; }
}
:root[data-theme="dark"] { color-scheme:dark; }

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#120d0e;
    --surface:#1a1315;
    --surface-2:#1f171a;
    --surface-3:#291e21;
    --surface-inset:#150f11;
    --border:#33262a;
    --border-2:#251b1e;
    --border-strong:#4a383c;

    --ink:#f0e9ea;
    --ink-2:#b5a5a9;
    --ink-3:#9a8a8e;

    --accent:#e08a97;
    --accent-ink:#eda9b3;
    --accent-soft:#2b1216;
    --accent-line:#4a2229;
    /* 버건디는 그 자체로 어두워서 어두운 배경에서는 밝은 로즈로 뒤집습니다.
       그 위에는 어두운 글자라야 대비가 나옵니다 (흰 글자는 약 2:1). */
    --ink-on-brand:#2b0a10;

    --amber:#d6a44d;  --amber-soft:#2a2113; --amber-line:#453619;
    --red:#e2705c;    --red-soft:#2c1714;   --red-line:#4a2620;
    --green:#4fb383;  --green-soft:#0f2519; --green-line:#1e4231;
    --info:#6ba6dd;   --info-soft:#101f2c;  --info-line:#1e344a;

    --focus:#e59aa5;
    --focus-halo:rgba(229,154,165,.26);

    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -10px rgba(0,0,0,.7);
    --sh-3:0 2px 8px -1px rgba(0,0,0,.5), 0 22px 44px -14px rgba(0,0,0,.8);
    --sh-inset:inset 0 1px 0 rgba(255,255,255,.04);
  }
}
:root[data-theme="dark"] {
  --bg:#120d0e;
  --surface:#1a1315;
  --surface-2:#1f171a;
  --surface-3:#291e21;
  --surface-inset:#150f11;
  --border:#33262a;
  --border-2:#251b1e;
  --border-strong:#4a383c;

  --ink:#f0e9ea;
  --ink-2:#b5a5a9;
  --ink-3:#9a8a8e;

  --accent:#e08a97;
  --accent-ink:#eda9b3;
  --accent-soft:#2b1216;
  --accent-line:#4a2229;
  --ink-on-brand:#2b0a10;

  --amber:#d6a44d;  --amber-soft:#2a2113; --amber-line:#453619;
  --red:#e2705c;    --red-soft:#2c1714;   --red-line:#4a2620;
  --green:#4fb383;  --green-soft:#0f2519; --green-line:#1e4231;
  --info:#6ba6dd;   --info-soft:#101f2c;  --info-line:#1e344a;

  --focus:#e59aa5;
  --focus-halo:rgba(229,154,165,.26);

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -10px rgba(0,0,0,.7);
  --sh-3:0 2px 8px -1px rgba(0,0,0,.5), 0 22px 44px -14px rgba(0,0,0,.8);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.04);
}

/* ── 2. Reset & base ───────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }

body {
  background:var(--bg);
  color:var(--ink);
  font:400 15px/1.6 var(--sans);
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  text-underline-offset:2px;
  min-height:100vh;
  /* 한국어는 어절 단위로 끊습니다. 긴 영문·URL 만 강제로 자릅니다. */
  word-break:keep-all;
  overflow-wrap:break-word;
}

a { color:inherit; text-decoration:none; }
img,svg { max-width:100%; }
button,input,select,textarea { font-family:inherit; color:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }

/* one focus treatment, everywhere */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
.gate-card input:focus-visible,
.fields :is(input,select,textarea):focus-visible,
.filters :is(input,select):focus-visible {
  outline-offset:0;
}

::selection { background:var(--accent-line); color:var(--accent-ink); }

/* thin, unobtrusive scrollbars on scroll containers */
.tablewrap,.worklist,.rail,.cur-units-table { scrollbar-width:thin; }
.tablewrap::-webkit-scrollbar,.worklist::-webkit-scrollbar { height:9px; width:9px; }
.tablewrap::-webkit-scrollbar-thumb,.worklist::-webkit-scrollbar-thumb {
  background:var(--border-strong); border-radius:var(--r-full);
  border:2px solid transparent; background-clip:content-box;
}

/* ── 3. Typography ─────────────────────────────────────────── */
h1 {
  font:650 clamp(19px,1.1rem + .35vw,23px)/1.3 var(--sans);
  letter-spacing:-.022em; margin:0 0 3px;
}
h2 {
  font:600 13px/1.5 var(--sans);
  letter-spacing:.01em; margin:0 0 12px; color:var(--ink-3);
  text-transform:none;
}
h3 { font:600 15px/1.4 var(--sans); margin:0 0 8px; letter-spacing:-.012em; }

.lead   { color:var(--ink-3); font-size:13px; margin:0 0 22px; }
.quiet  { color:var(--ink-3); font-size:12px; }
.sub    { font-size:12px; color:var(--ink-3); font-weight:400; }
.hint   { font-weight:400; color:var(--ink-3); font-size:12px; margin-left:6px; }
.req    { color:var(--red); }
.mono   { font-family:var(--mono); font-size:13px; letter-spacing:-.02em; }
/* 학생 목록 — 이름 앞 학생 번호. 주소(admin/students/{번호})와 같은 번호입니다 */
.stunum { display:inline-block; min-width:3.2em; margin-right:7px; text-align:right;
          font-variant-numeric:tabular-nums; }
.quiet-text { color:var(--ink-3); }
.sec    { font:650 15px/1.4 var(--sans); letter-spacing:-.015em; margin:24px 0 10px; }
.sec-h  { font:600 13px/1.5 var(--sans); color:var(--ink-3); margin:20px 2px 8px; }
.sec-note { font:400 12px var(--sans); color:var(--ink-3); margin-left:6px; }
.page-sub { color:var(--ink-3); font-size:13px; margin:-4px 0 18px; }

.link { color:var(--accent-ink); font-weight:500; }
.link:hover { text-decoration:underline; }

/* ── 4. Layout shells ──────────────────────────────────────── */

/* skip link */
.skip {
  position:fixed; top:8px; left:8px; z-index:100;
  transform:translateY(-160%);
  background:var(--accent); color:var(--ink-on-brand);
  padding:9px 16px; border-radius:var(--r-sm);
  font:600 13px var(--sans); box-shadow:var(--sh-3);
  transition:transform var(--dur) var(--ease-out);
}
.skip:focus { transform:translateY(0); }

/* — admin / teacher: rail + canvas — */
.shell { display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:100vh; }

.rail {
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:18px 0 14px;
  position:sticky; top:0; height:100vh;
  z-index:20;
}
.rail nav { flex:1; padding:0 10px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
.rail nav a {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:450; color:var(--ink-2);
  position:relative;
}
.rail nav a svg {
  width:17px; height:17px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.75;
}
.rail nav a:hover { background:var(--surface-3); color:var(--ink); }
.rail nav a:hover svg { opacity:1; }
.rail nav a.on {
  background:var(--accent-soft); color:var(--accent-ink); font-weight:600;
}
.rail nav a.on svg { opacity:1; }
.rail nav a.on::before {
  content:""; position:absolute; left:-10px; top:50%;
  width:3px; height:18px; margin-top:-9px;
  background:var(--accent); border-radius:0 3px 3px 0;
}

.wordmark {
  display:flex; align-items:baseline; gap:6px;
  padding:0 20px 18px;
  font:650 17px var(--sans); letter-spacing:-.035em;
  color:var(--accent-ink);
}
.wordmark em {
  font-style:normal; font-size:10.5px; font-weight:500;
  color:var(--ink-3); letter-spacing:0;
  background:var(--surface-3); padding:2px 7px; border-radius:var(--r-full);
}

.rail-foot {
  padding:12px 14px 0; margin:0 6px;
  border-top:1px solid var(--border-2);
  display:flex; align-items:center; gap:9px;
}
.rail-foot .who-wrap { display:block; flex:1; min-width:0; }
.who {
  display:block; font-size:13px; font-weight:550; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rail-foot .quiet { display:block; line-height:1.3; }
.avatar {
  width:30px; height:30px; flex:none; border-radius:var(--r-full);
  background:var(--accent-soft); color:var(--accent-ink);
  display:grid; place-items:center;
  font:650 12px var(--sans); letter-spacing:0;
}
.rail-foot .quiet:hover { color:var(--accent); }

main {
  padding:26px clamp(18px,2.2vw,34px) 72px;
  min-width:0;
  /* 화면이 넓어질수록 표가 같이 늘어나 한 줄 안에서 눈이 멀리 움직여야
     했습니다. 읽는 폭을 여기서 끊습니다. */
  max-width:1240px;
}
/* 주간 시간표는 요일 일곱 칸이 한 화면에 들어와야 읽을 수 있습니다.
   이 화면만 폭 제한을 풉니다. 레이아웃에 main 클래스를 넘길 자리가 없어
   안에 무엇이 들어왔는지로 알아봅니다. */
main:has(.ttwrap) { max-width:none; }
/* 학생 홈만 넓게. 핸드폰 폭(460px)에 갇혀 있으면 PC 에서 오른쪽 절반이
   통째로 비고, 카드가 세로로만 쌓여 홈이 길어집니다. 시간표(.ttwrap)가
   이미 같은 방식을 쓰고 있어 새 위험이 아닙니다. */
main.phone:has(> .homewrap) { max-width:900px; }

/* — student / guardian: topbar + tabbar — */
.l-student { background:var(--bg); }

.topbar {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  height:var(--topbar-h); padding:0 16px;
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:15;
}
@supports not (backdrop-filter:blur(1px)) { .topbar { background:var(--surface); } }
.topbar .wordmark { padding:0; font-size:16px; }
/* 🔴 로고 옆 날짜 (2026-10-12). 본문 맨 윗줄을 돌려받으려고 올렸습니다. */
.topbar-l { display:flex; align-items:baseline; gap:8px; min-width:0; }
.topbar-date { font:500 13px var(--sans); color:var(--ink-3); white-space:nowrap; }

.phone {
  max-width:460px; margin:0 auto;
  padding:14px 16px calc(var(--tabbar-h) + 34px);
}

.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:15;
  display:flex;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--border);
  padding:6px 4px max(6px,env(safe-area-inset-bottom));
}
@supports not (backdrop-filter:blur(1px)) { .tabbar { background:var(--surface); } }
.tabbar a {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:5px 2px 4px; border-radius:var(--r-sm);
  color:var(--ink-3); font-size:10.5px; font-weight:500;
  -webkit-tap-highlight-color:transparent;
}
.tabbar a svg {
  width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--dur) var(--ease-out);
}
.tabbar a.on { color:var(--accent); }
.tabbar a.on svg { stroke-width:1.9; transform:translateY(-1px); }
.tabbar a:active svg { transform:scale(.9); }

/* mobile drawer trigger (admin/teacher) */
.railtoggle {
  display:none; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink-2);
}
.railtoggle svg { width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; }

/* theme toggle */
.themebtn {
  width:32px; height:32px; flex:none; padding:0;
  display:grid; place-items:center;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink-3);
}
.themebtn:hover { color:var(--accent); border-color:var(--accent-line); }
.themebtn svg { width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.themebtn .i-moon { display:none; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .themebtn .i-sun  { display:none; }
  :root:not([data-theme="light"]) .themebtn .i-moon { display:block; }
}
:root[data-theme="dark"] .themebtn .i-sun  { display:none; }
:root[data-theme="dark"] .themebtn .i-moon { display:block; }
:root[data-theme="light"] .themebtn .i-sun  { display:block; }
:root[data-theme="light"] .themebtn .i-moon { display:none; }

/* ── 5. Auth gate ──────────────────────────────────────────── */
.gate {
  min-height:100vh; display:grid; place-items:center;
  padding:24px 20px;
  background:
    radial-gradient(760px 420px at 50% -8%, var(--accent-soft), transparent 68%),
    var(--bg);
}
.gate-card {
  width:100%; max-width:372px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:34px 30px 28px;
  box-shadow:var(--sh-2);
}
/* 학원 이름 = 홈으로 가는 문. 링크지만 밑줄 없이 제목처럼 보입니다. */
.gate-mark {
  display:inline-block;
  font:650 26px var(--sans); letter-spacing:-.04em; color:var(--accent-ink);
  text-decoration:none;
  transition:opacity var(--dur) var(--ease);
}
.gate-mark:hover { opacity:.72; }
.gate-mark:focus-visible {
  outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-xs);
}
.gate-sub { margin:3px 0 24px; color:var(--ink-3); font-size:13px; }
.gate-card label {
  display:block; font-size:12px; font-weight:500;
  color:var(--ink-2); margin-bottom:14px;
}
.gate-card input {
  display:block; width:100%; margin-top:6px;
  padding:11px 13px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  font:15px var(--sans); background:var(--surface-inset); color:var(--ink);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gate-card input:focus {
  outline:none; background:var(--surface);
  border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-halo);
}
.gate-card button {
  width:100%; margin-top:8px; padding:12px;
  border:0; border-radius:var(--r-sm);
  background:var(--accent); color:var(--ink-on-brand);
  font:600 15px var(--sans);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gate-card button:hover { background:var(--accent-ink); }
.gate-card button:active { transform:translateY(1px); }
.gate-help {
  margin:18px 0 0; font-size:12px; color:var(--ink-3); line-height:1.6;
  text-align:center;
}
.gate-contact { color:var(--ink-2); font-weight:550; }

/* 소셜 로그인 버튼 (로그인·가입 화면) */
.sns { display:grid; gap:8px; margin-bottom:4px; }
.sns-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px; border-radius:var(--r-sm);
  font:600 14px var(--sans); text-decoration:none;
  transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sns-btn:hover  { filter:brightness(.96); }
.sns-btn:active { transform:translateY(1px); }
.sns-btn svg { width:18px; height:18px; flex:none; }
.sns-kakao  { background:#FEE500; color:#191919; }
.sns-naver  { background:#03C75A; color:#fff; }
.sns-google { background:#fff; color:#3c4043; border:1px solid var(--border); }
.or {
  display:flex; align-items:center; gap:10px;
  margin:14px 0; font-size:12px; color:var(--ink-3);
}
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--border); }

/* ── 6. Page header ────────────────────────────────────────── */
.pagehead {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; margin-bottom:20px; flex-wrap:wrap;
}
.pagehead h1 { margin-bottom:3px; }
.pagehead .lead { margin-bottom:0; }
.h1-sub { font-weight:400; font-size:15px; color:var(--ink-3); margin-left:6px; }
.crumb { font-size:12px; color:var(--ink-3); margin-bottom:7px; }
.crumb a { color:var(--ink-2); }
.crumb a:hover { color:var(--accent); text-decoration:underline; }
.headbtns { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.stats { display:flex; gap:20px; flex-wrap:wrap; }
.stat { font-size:12px; color:var(--ink-3); }
.stat b {
  display:block; font:650 22px/1.2 var(--mono);
  letter-spacing:-.03em; color:var(--ink);
}
.stat.alert b { color:var(--amber); }

/* ── 7. Surfaces ───────────────────────────────────────────── */
.panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:18px 20px; margin-bottom:16px;
  box-shadow:var(--sh-1);
}

.cards {
  display:grid; gap:12px; margin-bottom:26px;
  grid-template-columns:repeat(auto-fit,minmax(176px,1fr));
}
.card {
  display:block; position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:16px 18px;
  box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease-out);
}
a.card:hover {
  border-color:var(--accent-line);
  box-shadow:var(--sh-2);
  transform:translateY(-1px);
}
.card-label { display:block; font-size:12px; font-weight:500; color:var(--ink-3); }
.card-num {
  display:block; font:650 clamp(26px,1.4rem + .8vw,32px)/1.15 var(--mono);
  letter-spacing:-.04em; margin:7px 0 3px;
}
.card-foot { display:block; font-size:12px; color:var(--ink-3); }
/* '5 / 6' 처럼 분모가 붙는 숫자. 뒤쪽을 작고 흐리게 두어 앞 숫자를 읽습니다 */
.card-num .of { font:400 15px var(--mono); color:var(--ink-3); letter-spacing:0; }

.tile {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:15px 17px; margin-bottom:10px;
  box-shadow:var(--sh-1);
}
.tile-label { font-size:12px; font-weight:500; color:var(--ink-3); margin-bottom:5px; }
.tile-body  { font-size:14px; color:var(--ink-2); line-height:1.65; }
.tile-link  { display:block; color:inherit;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease); }
.tile-link:hover  { box-shadow:var(--sh-2); border-color:var(--accent-line); }
.tile-link:active { transform:scale(.99); }
.tile-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:5px; }
.tile-top .tile-label { margin-bottom:0; }
.tile-date { font-size:12px; color:var(--ink-3); flex:none; }
.tile-strong { font:650 19px/1.35 var(--sans); letter-spacing:-.02em; margin:3px 0 5px; }
.tile-strong .of { font:400 14px var(--sans); color:var(--ink-3); letter-spacing:0; }
/* 큰 글씨 옆에 붙는 배지 — 같이 커지면 둘 다 제목처럼 보입니다 (2026-10-12) */
.tile-strong .badge { vertical-align:middle; margin-left:6px; letter-spacing:0; }
.past-tile { opacity:.62; box-shadow:none; }
a.past-tile:hover { opacity:1; }
/* 카드 안에서 상세로 넘어가는 줄. 본문과 버튼 사이라 위아래로 숨을 띄웁니다. */
.tile-detail { display:inline-block; margin-top:9px; font-size:13px; font-weight:500; }

/* 영수증 두 갈래 — 학원 영수증 · 카드 매출전표 */
.rc-links { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; }
.rc-links .tile-detail { margin-top:9px; }
.rc-links .sub { font-size:11.5px; color:var(--ink-3); font-weight:400; margin-left:4px; }

/* 수강권 카드 — '남은 N회' 가 어디서 나온 숫자인지 바로 보이게
   (원장님 2026-10-09: "언제 어떻게 수업을 했는지 안 보여") */
.tile-when {
  display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline;
  margin:2px 0 10px; font-size:13px; color:var(--ink-2);
}
.tile-when b { font-weight:600; color:var(--ink-3); font-size:12px; margin-right:3px; }
.tile-when .nx  { color:var(--ink); font-weight:500; }
.tile-when .off { color:var(--amber); }
.tile-when .off .sub { color:var(--ink-3); font-weight:400; }
.tile-when .whenmore { flex-basis:100%; font-size:13px; font-weight:500; margin-top:2px; }

/* 옛 사이트에서 옮겨 온 수강권 — 건수만 (자세한 숫자가 틀려서 안 보여 줍니다) */
.oldpass {
  display:flex; flex-wrap:wrap; gap:3px 10px; align-items:baseline;
  margin:18px 0 6px; padding:13px 15px;
  background:var(--surface-2); border-radius:var(--r-md);
  font-size:13px; color:var(--ink-2);
}
.oldpass b { font-weight:600; color:var(--ink); }
.oldpass .sub { flex-basis:100%; font-size:12px; color:var(--ink-3); }

/* 홈 진도 아래의 '더 보기'. 카드 모양은 그대로 쓰되 한 줄짜리라 속을 줄이고
   가운데로 모읍니다. 위 카드들과 같은 상자여야 목록의 끝이라는 게 읽힙니다 —
   따로 떼어 놓으면 별개 항목처럼 보입니다. */
.tile-more {
  text-align:center; padding:11px 17px;
  font-size:13.5px; font-weight:500; color:var(--ink-3);
}

/* 항목·값이 짝으로 붙는 목록 (수강권 자세히 보기의 기간·수업·회차).
   좁은 화면에서는 값이 두 줄로 넘어가므로 라벨 폭을 고정해 값 왼쪽 끝을
   맞춥니다. 표로 짜면 셀이 안 접혀서 가로로 삐져나옵니다. */
.deflist { display:flex; flex-wrap:wrap; margin-top:12px; font-size:14px; }
.deflist dt {
  flex:0 0 62px; padding:7px 0; color:var(--ink-3);
  font-size:13px; border-top:1px solid var(--border-2);
}
/* 남은 폭을 통째로 차지해야 다음 dt 가 아랫줄로 밀립니다. flex:1 1 0 으로
   두면 dd 들이 서로 쪼그라들어 항목 네 개가 한 줄에 세로로 서 버립니다. */
.deflist dd {
  flex:1 1 calc(100% - 62px); min-width:0;
  padding:7px 0; margin:0; color:var(--ink-2);
  line-height:1.6; border-top:1px solid var(--border-2);
}
.deflist dt:first-of-type, .deflist dt:first-of-type + dd { border-top:0; }
.deflist .sub { display:block; font-size:12.5px; color:var(--ink-3); }

.hero {
  position:relative; overflow:hidden;
  background:
    linear-gradient(168deg,var(--accent-soft) 0%,transparent 62%),
    var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:20px 20px 18px; margin-bottom:12px;
  box-shadow:var(--sh-2);
}
.hero-label { font-size:12px; font-weight:550; color:var(--accent-ink); letter-spacing:.01em; }
.hero-time {
  font:650 clamp(28px,1.6rem + 1.2vw,34px)/1.2 var(--sans);
  letter-spacing:-.035em; margin:6px 0 3px;
}
.hero-sub { font-size:13px; color:var(--ink-2); margin-bottom:17px; }

/* 🔴 수업 입장 + 숙제 올리기를 **한 줄에** (원장님 2026-10-12).
   둘 다 '오늘 수업' 에 딸린 일이라 나란히 둡니다.
   auto-fit + minmax 라 **좁으면 저절로 한 칸으로 되돌아갑니다** — 좁은
   화면에서 억지로 두 칸을 만들면 '수업 입장' 글자가 깨집니다. */
/* 🔴 원장님(2026-10-12): "모바일에도 데스크탑같이 2단으로".
   그래서 **휴대폰에서도 두 칸**입니다. 다만 아주 좁은 기기(320px 안팎,
   아이폰 SE 1세대 등)에서는 두 칸이 각 130px 밖에 안 되어 '10:00 PM
   수업 시작' 이 세 줄로 깨집니다. 거기서만 한 칸으로 되돌립니다. */
.duo {
  display:grid; gap:10px; margin-bottom:12px;
  grid-template-columns:1fr 1fr;
  align-items:start;
}
@media (max-width:359px) { .duo { grid-template-columns:1fr; } }
/* 짝이 없는 날(오늘 숙제 없음)에는 한 칸으로 — 반쪽짜리 카드 옆이 비면
   고장 난 것처럼 보입니다 (원장님이 보내 주신 화면이 그랬습니다). */
.duo-1 { grid-template-columns:1fr; }

/* 🔴 수강권 네 탭 (원장님 2026-10-12)
   쌓아 두면 아래 묶음이 묻힙니다. 넷을 맨 위에 나란히 세웁니다.
   좁은 화면에서는 가로로 밀어 볼 수 있게 두되, 스크롤 막대는 감춥니다. */
.ptabs {
  display:flex; gap:6px; margin:0 0 14px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ptabs::-webkit-scrollbar { display:none; }
.ptabbtn {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  padding:8px 13px; border:1px solid var(--border); border-radius:var(--r-full);
  background:var(--surface); color:var(--ink-2);
  font:600 13.5px var(--sans); white-space:nowrap; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* ⚠️ `:not(.on)` 이 꼭 있어야 합니다. 이게 없으면 `.ptabbtn:hover:not(:disabled)`
   (선택자 3개) 가 `.ptabbtn.on` (2개) 을 이겨서, **켜진 탭에 마우스를 올리면
   배경만 흰색**이 되고 글자는 흰색 그대로라 안 보입니다. 실제로 그랬습니다. */
.ptabbtn:hover:not(:disabled):not(.on) {
  background:var(--surface-2); color:var(--ink);
}
.ptabbtn.on,
.ptabbtn.on:hover,
.ptabbtn.on:focus {
  background:var(--accent); border-color:var(--accent);
  color:var(--ink-on-brand);
}
/* 비어 있는 탭 — 눌렀는데 아무것도 없으면 고장 난 줄 아십니다 */
.ptabbtn:disabled { opacity:.42; cursor:default; }
.ptabbtn-n {
  min-width:17px; padding:0 4px; border-radius:var(--r-full);
  background:var(--surface-3); color:var(--ink-2);
  font:600 11.5px/17px var(--sans); text-align:center;
}
.ptabbtn.on .ptabbtn-n {
  background:color-mix(in srgb, #fff 26%, transparent); color:var(--ink-on-brand);
}

/* 🔴 쪽 번호 — 지난 수강권이 수십 건일 때 (원장님 2026-10-12) */
.pgnav {
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  margin:14px 0 4px;
}
.pgbtn {
  min-width:34px; padding:7px 10px;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--ink-2);
  font:600 13px var(--sans); cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.pgbtn:hover:not(.on) { background:var(--surface-2); color:var(--ink); }
.pgbtn.on, .pgbtn.on:hover {
  background:var(--accent); border-color:var(--accent); color:var(--ink-on-brand);
}

/* 🔴 수강권 표 (원장님 2026-10-12: "위와 같이 표로 만들어줘")
   줄글로 '미국교과과정 · 25분 · 1:1 · 주2회' 라고 이어 붙이면, 어느 것이
   무엇인지 읽는 사람이 짐작해야 합니다. 항목 이름을 왼쪽에 붙입니다.

   왼쪽 칸은 고정폭(86px)이라 값들이 세로로 가지런히 섭니다.
   좁은 화면에서는 이름 아래 값이 오도록 한 칸으로 떨어집니다. */
.ptab {
  display:grid; grid-template-columns:86px 1fr;
  gap:6px 12px; margin:12px 0 0;
  font:13.5px/1.55 var(--sans);
}
.ptab dt { color:var(--ink-3); font-weight:500; }
.ptab dd { margin:0; color:var(--ink); font-weight:550; }
.ptab dd .sub { font-weight:400; color:var(--ink-3); }
@media (max-width:359px) {
  .ptab { grid-template-columns:1fr; gap:1px 0; }
  .ptab dt { margin-top:7px; font-size:12px; }
}

/* 레벨테스트 '완료' 카드의 접는 안내 */
.lt-more { margin-top:4px; }
.lt-more > summary {
  cursor:pointer; list-style:none; display:inline-block;
  font:600 13px var(--sans); color:var(--accent-ink);
  padding:5px 0;
}
.lt-more > summary::-webkit-details-marker { display:none; }
.lt-more > summary::after { content:' ⌄'; }
.lt-more[open] > summary::after { content:' ⌃'; }
.lt-more .hero-btn { margin:6px 0 10px; }
.duo > .hero, .duo > .tile { margin-bottom:0; }
/* 🔴 큰 시각과 '25분 · 1:1 · 선생님' 줄이 빠져서(원장님 2026-10-12)
   카드 안에 라벨 + 단추 + 안내 한 줄만 남았습니다. 여백을 그만큼 줄입니다. */
.duo > .hero { padding:14px 14px 13px; }
.hero > .hero-label { margin-bottom:10px; }

.hero-btn {
  display:block; width:100%; box-sizing:border-box;
  padding:13px; border:0; border-radius:var(--r-md);
  background:var(--accent); color:var(--ink-on-brand);
  font:600 15px var(--sans); text-align:center;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.hero-btn:hover { background:var(--accent-ink); }
.hero-btn:active { transform:scale(.985); }
.hero-btn:disabled {
  background:var(--surface-3); color:var(--ink-3); cursor:not-allowed;
}
/* 🔴 원장님(2026-10-12): 처음엔 "너무 크다" 하셔서 줄였는데, 두 칸으로
   바꾼 뒤에는 **"버튼을 크게"** 라고 하셨습니다. 칸이 절반으로 좁아져
   단추도 같이 작아 보였기 때문입니다. 다시 키웁니다.
   글자가 길어져(10:00 PM 수업 시작) 좁은 칸에서는 줄이 바뀌어야 하므로
   한 줄 강제를 풀고, 두 줄이 되어도 모양이 유지되게 합니다. */
.hero .hero-btn {
  padding:15px 12px; font-size:16px; font-weight:650;
  line-height:1.25; min-height:52px;
  display:flex; align-items:center; justify-content:center;
  word-break:keep-all;
}
.hero-note { text-align:center; font-size:12px; color:var(--ink-3); margin-top:7px; }
.quiet-hero { background:var(--surface); box-shadow:var(--sh-1); }
.quiet-hero .hero-label { color:var(--ink-3); }
.quiet-hero .hero-time { color:var(--ink-3); font-size:22px; }

.split { display:grid; gap:16px; grid-template-columns:1.4fr 1fr; align-items:start; }
.split.even { grid-template-columns:1fr 1fr; }

/* 대시보드 — 왼쪽은 자리가 고정된 것, 오른쪽은 흘러가는 알림.
   예전에는 알림이 맨 위에 가로로 깔려서, 스무 줄 쌓이면 숫자 카드와
   '만료 수강권 정리' 가 화면 아래로 밀려났습니다 (원장님 지적). */
.dashwrap {
  display:grid; gap:16px; align-items:start;
  grid-template-columns:minmax(0, 1fr) 340px;
}
.dashmain { min-width:0; }          /* 안쪽 표가 칸을 밀지 않게 */
.dashside { position:sticky; top:16px; }
.alertbox { margin-bottom:0; }
.alertrows { max-height:calc(100vh - 190px); overflow-y:auto; }
/* 좁은 칸이라 글이 여러 줄로 접힙니다 — 단추를 옆이 아니라 아래에 두어
   글이 칸을 다 쓰게 합니다. */
.alertrows .row {
  flex-direction:column; align-items:stretch; gap:6px; padding-right:4px;
}
.alertrows .row > .btn-ghost { align-self:flex-end; }
.alertrows .row-title { font-weight:700; line-height:1.55; }
.alertrows .alert-read { opacity:.55; }
.alertrows .alert-read .row-title { font-weight:400; }

@media (max-width: 1100px) {
  /* 좁은 화면에서는 위아래로. 알림이 **아래**로 갑니다 — 고정 내용이
     먼저 보여야 한다는 뜻은 화면이 좁아져도 같습니다. */
  .dashwrap { grid-template-columns:1fr; }
  .dashside { position:static; }
  .alertrows { max-height:340px; }
}
/* 패널 안에 들어간 행은 테두리를 겹치지 않게 가볍게 처리합니다 */
.panel .rows .row { box-shadow:none; background:var(--surface-2); }
.panel .lead { margin:-4px 0 16px; }

.kv { display:flex; gap:14px; padding:9px 0; border-bottom:1px solid var(--border-2); }
.kv:last-child { border-bottom:0; }
.kv-k { width:66px; flex:none; font-size:12px; color:var(--ink-3); padding-top:2px; }
.kv-v { flex:1; font-size:14px; min-width:0; line-height:1.65; }

.hollow {
  border:1px dashed var(--border-strong); border-radius:var(--r-md);
  padding:30px 24px; text-align:center;
  color:var(--ink-3); font-size:13px; line-height:1.85;
}

.empty-note {
  color:var(--ink-3); font-size:14px; padding:16px;
  background:var(--surface); border:1px dashed var(--border-strong);
  border-radius:var(--r-md);
}

.steps { margin:0; padding-left:20px; color:var(--ink-2); font-size:14px; }
.steps li { margin-bottom:7px; }
.steps strong { color:var(--ink); font-weight:600; }

.rows { display:flex; flex-direction:column; gap:8px; }
.row {
  display:flex; align-items:center; gap:16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:13px 16px;
  box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.row:hover { border-color:var(--border-strong); }
.row-time { font:650 15px var(--mono); width:88px; flex:none; letter-spacing:-.03em; }
.row-main { flex:1; min-width:0; }
.row-title { display:block; font-size:15px; }
.row-sub { display:block; font-size:12px; color:var(--ink-3); margin-top:2px; }
a.row:hover { border-color:var(--accent-line); box-shadow:var(--sh-2); }
.row-num { font:650 17px var(--mono); text-align:right; min-width:70px; letter-spacing:-.03em; }

/* ── 8. Tables ─────────────────────────────────────────────── */
.tablewrap {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow-x:auto;
  box-shadow:var(--sh-1);
  /* 표를 화면 폭에 억지로 늘리지 않고 내용만큼만 씁니다. 늘려 놓으면 남는
     폭이 글자 열 한 곳으로 몰려서, 강사 목록의 이름 칸이 527px 이 되고
     이름과 그 옆 칸 사이가 손바닥만큼 벌어졌습니다.
     내용이 많아지면 max-width 까지 저절로 늘어납니다. */
  width:fit-content;
  max-width:100%;
}
table.grid { width:100%; border-collapse:collapse; font-size:14px; }
table.grid th {
  position:sticky; top:0; z-index:1;
  text-align:left; font:600 11.5px var(--sans);
  letter-spacing:.03em; color:var(--ink-3);
  padding:11px 14px; white-space:nowrap;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
table.grid td {
  padding:9px 14px; vertical-align:top;
  border-bottom:1px solid var(--border-2);
}

/* 넓은 화면에서 남는 폭이 모든 열에 고르게 나눠지는 바람에 날짜 한 칸이
   200px 을 차지하고 글자 사이가 휑하게 벌어졌습니다. 폭이 정해진 열
   (숫자·날짜)은 내용만큼만 쓰게 하고, 남는 폭은 이름·보호자처럼 길어질 수
   있는 글자 열이 가져갑니다. 열을 더 붙이고 싶으면 .fit 을 답니다. */
table.grid :is(th,td):is(.num,.mono,.fit) { width:1px; white-space:nowrap; }

table.grid tr:last-child td { border-bottom:0; }
table.grid tbody tr { transition:background var(--dur) var(--ease); }
table.grid tbody tr:hover { background:var(--surface-2); }
table.grid .num { text-align:right; font-family:var(--mono); font-size:13px; }
table.grid .dim td { opacity:.5; }
.th-r { text-align:right; }
.th-sub { display:block; font:400 11px var(--sans); color:var(--ink-3); margin-top:1px; }
.row-off td { opacity:.45; }

.pager { display:flex; gap:6px; align-items:center; justify-content:center; margin:20px 0; }
.pager a,.pager .off,.pager .pos { padding:7px 15px; border-radius:var(--r-sm); font-size:13px; }
.pager a {
  border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pager a:hover { border-color:var(--accent); color:var(--accent); }
.pager .off { color:var(--ink-3); opacity:.45; }
.pager .pos { font-family:var(--mono); color:var(--ink-3); }

/* ── 9. Forms ──────────────────────────────────────────────── */
.form .panel { margin-bottom:14px; }
.fields {
  display:grid; gap:15px;
  grid-template-columns:repeat(auto-fit,minmax(214px,1fr));
}
.fields label { display:block; font-size:12px; font-weight:500; color:var(--ink-2); }
.fields label.wide { grid-column:1/-1; }

.fields :is(input,select,textarea),
.filters :is(input,select),
.slot :is(input,select),
.plan-add :is(input,select),
.disc-form input,.sub-add input,.mk-form input,
.pw-form input,.tz-sel,.reason-text,.price-in,
.cur-text,.cur-num,.cur-sel,.subj-add input,
.tier-r input,.tier-foot input,#fbtext,
.hwinput,.hwnote {
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface-inset);
  color:var(--ink);
  font:14px var(--sans);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.fields :is(input,select,textarea):focus,
.filters :is(input,select):focus,
.slot :is(input,select):focus,
.plan-add :is(input,select):focus,
.disc-form input:focus,.sub-add input:focus,.mk-form input:focus,
.pw-form input:focus,.tz-sel:focus,.reason-text:focus,.price-in:focus,
.cur-text:focus,.cur-num:focus,.cur-sel:focus,.subj-add input:focus,
.tier-r input:focus,.tier-foot input:focus,#fbtext:focus,
.hwinput:focus,.hwnote:focus {
  outline:none; background:var(--surface);
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-halo);
}

.fields :is(input,select,textarea) {
  display:block; width:100%; margin-top:6px; padding:9px 11px;
}
.fields textarea { resize:vertical; line-height:1.65; }
.fields select { cursor:pointer; }
.input-locked { opacity:.6; background:var(--surface-3) !important; cursor:not-allowed; }

.filters { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.filters input[type=search] { flex:1; min-width:200px; padding:9px 12px; background:var(--surface); }
.filters select { padding:9px 10px; background:var(--surface); cursor:pointer; }
.filters input[type=date] { padding:9px 10px; font-family:var(--mono); background:var(--surface); }
.filters button {
  padding:9px 18px; border:0; border-radius:var(--r-sm);
  background:var(--accent); color:var(--ink-on-brand); font:550 14px var(--sans);
}
.filters button:hover { background:var(--accent-ink); }

.formbar { display:flex; gap:8px; align-items:center; margin:20px 0 28px; flex-wrap:wrap; }
.formbar button {
  padding:10px 26px; border:0; border-radius:var(--r-sm);
  background:var(--accent); color:var(--ink-on-brand); font:600 14px var(--sans);
  transition:background var(--dur) var(--ease);
}
.formbar button:hover { background:var(--accent-ink); }

/* 설정 화면 ─ 숫자 뒤에 단위를 붙입니다 */
.hint-b   { display:block; margin:5px 0 0; line-height:1.5; }
.withunit { display:flex; align-items:center; gap:8px; }
.withunit input { flex:1; min-width:0; }
.withunit .unit { flex:none; font-size:12px; color:var(--ink-3); }

/* 설정 화면 ─ 문구 편집 */
.copyfields { display:grid; gap:16px; }
.copyfield > label {
  display:block; font-size:12px; font-weight:500; color:var(--ink-2); margin-bottom:6px;
}
.copyfield :is(input,textarea) {
  display:block; width:100%; padding:9px 11px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-inset); color:var(--ink);
  font:400 14px/1.65 var(--sans); resize:vertical;
}
.copyfield :is(input,textarea):focus { outline:none; background:var(--surface); }
.copyfield :is(input,textarea)::placeholder { color:var(--ink-3); }
.copydef {
  margin-top:5px; font-size:12px; line-height:1.6; color:var(--ink-3);
}
@media (min-width:900px) {
  .copyfields { grid-template-columns:1fr 1fr; }
  .copyfield:has(textarea) { grid-column:1/-1; }
}

.pw-form { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.pw-form input { padding:11px 12px; }
.pw-form textarea {
  padding:11px 12px; resize:vertical; line-height:1.6;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-inset); color:var(--ink); font:14px var(--sans);
}
.pw-form textarea:focus {
  outline:none; background:var(--surface);
  border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-halo);
}
.pw-form select {
  padding:11px 12px; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-inset); color:var(--ink); font:14px var(--sans);
}
.pw-form select:focus {
  outline:none; background:var(--surface);
  border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-halo);
}

/* 레벨테스트 희망 일시 고르기 */
.lt-when {
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-inset); padding:12px;
}
.lt-when-label { font:600 13px var(--sans); color:var(--ink-2); margin-bottom:6px; }
.lt-when-row { display:flex; gap:8px; }
.lt-when-row input[type=date] { flex:1; min-width:0; background:var(--surface); }
.lt-see {
  flex:none; padding:0 14px; cursor:pointer;
  border:1px solid var(--accent); border-radius:var(--r-sm);
  background:var(--surface); color:var(--accent); font:600 13px var(--sans);
}
.lt-see:hover { background:var(--accent); color:var(--ink-on-brand); }
.lt-slots {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(74px, 1fr));
  gap:6px;
}
.lt-slot { position:relative; }
.lt-slot input { position:absolute; opacity:0; pointer-events:none; }
.lt-slot span {
  display:block; text-align:center; padding:8px 0; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink-2);
  font:600 13px var(--sans); font-variant-numeric:tabular-nums;
}
.lt-slot span:hover { border-color:var(--accent); }
.lt-slot input:checked + span {
  background:var(--accent); border-color:var(--accent); color:var(--ink-on-brand);
}

.reason-text { width:100%; padding:11px; line-height:1.6; resize:vertical; }
.reason-types { display:flex; gap:16px; margin:8px 0 10px; font-size:14px; color:var(--ink-2); flex-wrap:wrap; }
.reason-types label { display:flex; align-items:center; gap:6px; cursor:pointer; }

.tz-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
.tz-name { min-width:74px; font:600 14px var(--sans); }
.tz-sel { flex:1; padding:9px 10px; cursor:pointer; }

input[type=checkbox],input[type=radio] { accent-color:var(--accent); cursor:pointer; }

/* ── 10. Buttons ───────────────────────────────────────────── */
.btn {
  display:inline-block; border:0; border-radius:var(--r-sm);
  background:var(--accent); color:var(--ink-on-brand);
  padding:8px 16px; font:550 13px var(--sans); white-space:nowrap;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover  { background:var(--accent-ink); }
.btn:active { transform:translateY(1px); }

.btn-ghost {
  display:inline-block; padding:9px 16px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink-2);
  font:500 13px var(--sans);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
/* 글 옆에 끼워 넣는 작은 버튼 */
.btn-ghost.sm { padding:4px 10px; font-size:12px; vertical-align:baseline; }

.btn-mute { background:var(--surface); color:var(--ink-2); border:1px solid var(--border); }
.btn-mute:hover { background:var(--surface-3); border-color:var(--border-strong); }

.btn-sm {
  display:inline-block; padding:8px 18px; border:0; border-radius:var(--r-sm);
  background:var(--accent); color:var(--ink-on-brand); font:600 13px var(--sans);
}
.btn-sm:hover { background:var(--accent-ink); }
.btn-sm.ghost {
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--border); font-weight:500;
}
.btn-sm.ghost:hover { border-color:var(--accent); color:var(--accent); }

.btn-del {
  background:none; border:1px solid var(--border); border-radius:var(--r-sm);
  padding:5px 11px; font-size:12px; color:var(--ink-3);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-del:hover { border-color:var(--red); color:var(--red); background:var(--red-soft); }

.save-all { border:0; font:600 14px var(--sans); padding:11px 26px; margin:4px 0 8px; }
.more-btn {
  display:block; text-align:center; padding:12px; margin:4px 0 12px;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--ink-2); font-size:14px;
}
.more-btn:hover { border-color:var(--accent); color:var(--accent); }
.back-link { display:block; text-align:center; margin-top:14px; font-size:13px; color:var(--ink-3); }
.back-link:hover { color:var(--accent); }
.logout-link { display:block; text-align:center; margin:6px 0 14px; color:var(--ink-3); font-size:13px; }
.logout-link:hover { color:var(--red); }
.renew-btn { margin-top:12px; }

/* ── 11. Status atoms ──────────────────────────────────────── */
.badge {
  display:inline-block; font:550 11px var(--sans);
  padding:3px 9px; border-radius:var(--r-full);
  white-space:nowrap; letter-spacing:.01em;
  border:1px solid transparent;
}
.badge.ok   { background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-line); }
.badge.warn { background:var(--amber-soft);  color:var(--amber);      border-color:var(--amber-line); }
.badge.bad  { background:var(--red-soft);    color:var(--red);        border-color:var(--red-line); }
.badge.mute { background:var(--surface-3);   color:var(--ink-3);      border-color:var(--border); }

.chips { display:flex; gap:6px; margin-bottom:13px; flex-wrap:wrap; align-items:center; }
.chip {
  font-size:13px; padding:6px 14px; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.chip:hover { border-color:var(--accent-line); color:var(--accent-ink); }
.chip.on {
  background:var(--accent); border-color:var(--accent);
  color:var(--ink-on-brand); font-weight:550;
}
.chip.on:hover { background:var(--accent-ink); color:var(--ink-on-brand); }
.chip.off { opacity:.45; text-decoration:line-through; }

/* 과목 칩은 저마다 색을 답니다. 고르지 않은 칩도 색을 유지해야 '토플이 어디
   있더라' 하고 찾을 때 눈이 먼저 갑니다 — 다 회색이면 매번 읽어야 합니다.
   색은 서버가 data-hue 로 넘겨 줍니다. */
.chip[data-hue] { color:var(--h); border-color:var(--h-line); }
.chip[data-hue]:hover { border-color:var(--h); color:var(--h); background:var(--surface-2); }
.chip[data-hue].on {
  background:var(--h); border-color:var(--h); color:var(--ink-on-brand);
}
.chip[data-hue].on:hover { background:var(--h); color:var(--ink-on-brand); }
.chip[data-hue="0"] { --h:var(--hue0); --h-line:var(--hue0-line); }
.chip[data-hue="1"] { --h:var(--hue1); --h-line:var(--hue1-line); }
.chip[data-hue="2"] { --h:var(--hue2); --h-line:var(--hue2-line); }
.chip[data-hue="3"] { --h:var(--hue3); --h-line:var(--hue3-line); }
.chip[data-hue="4"] { --h:var(--hue4); --h-line:var(--hue4-line); }
.chip[data-hue="5"] { --h:var(--hue5); --h-line:var(--hue5-line); }
.chip-n { font:600 11px var(--mono); opacity:.65; margin-left:5px; }
.chip.on .chip-n { opacity:.85; }

/* static tag pill (student feedback) */
span.tag {
  display:inline-block; font-size:11px; padding:3px 9px;
  border-radius:var(--r-full); background:var(--surface-3); color:var(--ink-2);
}
.tags { display:flex; gap:5px; flex-wrap:wrap; margin:7px 0 2px; }

/* interactive tag (teacher feedback) */
label.tag { position:relative; }
label.tag input { position:absolute; opacity:0; pointer-events:none; }
label.tag span {
  display:inline-block; padding:6px 14px;
  border:1px solid var(--border); border-radius:var(--r-full);
  font-size:12.5px; color:var(--ink-2); background:var(--surface); cursor:pointer;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
label.tag span:hover { border-color:var(--accent-line); }
label.tag input:checked + span {
  background:var(--accent-soft); border-color:var(--accent);
  color:var(--accent-ink); font-weight:600;
}
label.tag input:focus-visible + span { outline:2px solid var(--focus); outline-offset:2px; }

.dot {
  display:inline-block; width:6px; height:6px; flex:none;
  border-radius:50%; background:var(--accent);
}
.dot.ok   { background:var(--accent); }
.dot.warn { background:var(--amber); }
.wl-item .dot { width:7px; height:7px; }
.tile-label .dot { margin-right:5px; vertical-align:1px; }

/* ── 12. Messaging ─────────────────────────────────────────── */
.flash {
  display:flex; align-items:flex-start; gap:10px;
  border-radius:var(--r-md); padding:11px 14px;
  font-size:13.5px; line-height:1.55; margin-bottom:16px;
  background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid var(--accent-line);
  animation:flash-in .3s var(--ease-out);
}
.flash.warn { background:var(--amber-soft); color:var(--amber); border-color:var(--amber-line); }
.flash.err  { background:var(--red-soft);   color:var(--red);   border-color:var(--red-line); }
.flash-x {
  margin-left:auto; flex:none; background:none; border:0; padding:0 2px;
  color:inherit; opacity:.5; font-size:16px; line-height:1;
}
.flash-x:hover { opacity:1; }
@keyframes flash-in { from { opacity:0; transform:translateY(-5px); } }

.notice {
  background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid var(--accent-line);
  border-radius:var(--r-sm); padding:10px 13px;
  font-size:13px; margin-bottom:16px; line-height:1.55;
}
.notice.warn { background:var(--red-soft); color:var(--red); border-color:var(--red-line); }

.summary {
  margin-top:14px; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid var(--accent-line); font-size:13px;
}
.summary strong { font-family:var(--mono); font-weight:600; }

.quota-warn {
  margin-top:10px; padding:10px 13px; border-radius:var(--r-sm);
  background:var(--amber-soft); color:var(--amber);
  border:1px solid var(--amber-line); font-size:13px;
}

.linkbox {
  margin-top:8px; padding:10px 12px;
  background:var(--surface-inset); border:1px solid var(--border);
  border-radius:var(--r-sm);
  font:12px var(--mono); word-break:break-all; color:var(--ink-2);
}
.mono,.num,code { word-break:normal; }

/* ── 13. Domain modules ────────────────────────────────────── */

/* 13a. teacher workspace */
.workspace { display:grid; grid-template-columns:270px 1fr; gap:16px; align-items:start; }
.worklist {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden;
  position:sticky; top:20px; box-shadow:var(--sh-1);
}
.wl-item {
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-bottom:1px solid var(--border-2);
  position:relative; transition:background var(--dur) var(--ease);
}
.wl-item:last-child { border-bottom:0; }
.wl-item:hover { background:var(--surface-2); }
.wl-item.on { background:var(--accent-soft); }
.wl-item.on::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent);
}
.wl-item.done { opacity:.5; }
.wl-item.done.on { opacity:1; }
.wl-time { font:650 13px var(--mono); width:66px; flex:none; letter-spacing:-.03em; }
.wl-body { flex:1; min-width:0; }
.wl-name { display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wl-sub  { display:block; font-size:11px; color:var(--ink-3); }

.workpane {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:20px 22px; box-shadow:var(--sh-1);
}
.pane-head {
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  padding-bottom:14px; border-bottom:1px solid var(--border-2); margin-bottom:18px;
}
.pane-head h2    { font-size:17px; color:var(--ink); margin:0 0 2px; }
.pane-head .lead { margin:0; }

.attblock { margin-bottom:22px; }
.attrow {
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--border-2);
}
.attrow:last-child { border-bottom:0; }
/* 미국 강사가 아이를 바로 알아보도록 영어이름을 크고 굵게 */
.attname { font-size:19px; font-weight:700; letter-spacing:-.01em; }
.attname .sub { margin-left:6px; }

.segs {
  display:inline-flex; flex:none;
  border:1px solid var(--border); border-radius:var(--r-sm);
  overflow:hidden; background:var(--surface-inset);
}
.seg { position:relative; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg span {
  display:block; padding:7px 16px; font-size:13px; color:var(--ink-2);
  cursor:pointer; border-left:1px solid var(--border);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg:first-child span { border-left:0; }
.seg span:hover { background:var(--surface-3); }
.seg input:checked + span {
  background:var(--accent); color:var(--ink-on-brand); font-weight:550;
}
.seg input:focus-visible + span { outline:2px solid var(--focus); outline-offset:-2px; }

.fb-label { display:block; font-size:12px; font-weight:500; color:var(--ink-2); margin-bottom:8px; }
.fb-label-gap { margin-top:16px; }
#fbtext {
  width:100%; padding:13px 15px; border-radius:var(--r-md);
  font:15px/1.75 var(--sans); resize:vertical;
}
.fb-foot { display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:10px; }
.fb-foot button {
  padding:10px 20px; border:0; border-radius:var(--r-sm);
  background:var(--accent); color:var(--ink-on-brand);
  font:600 14px var(--sans); margin-left:6px;
}
.fb-foot button:hover { background:var(--accent-ink); }
.fb-foot button.btn-ghost {
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--border); font-weight:500;
}
.fb-foot button:disabled {
  background:var(--surface-3); color:var(--ink-3); cursor:not-allowed; border:0;
}
.fb-text { margin-top:7px; line-height:1.7; }
/* 영어 피드백 아래 한글 자동 번역 상자 (학부모 화면) */
.fb-ko { margin-top:8px; padding:10px 12px; background:var(--surface-2);
         border-left:3px solid var(--accent-line); border-radius:0 8px 8px 0; }
.fb-ko-label { font-size:11.5px; font-weight:600; color:var(--ink-3); margin-bottom:4px; }
.fb-ko-body { font-size:13.5px; line-height:1.7; color:var(--ink-2); }

.late-box {
  background:var(--amber-soft); border:1px solid var(--amber-line);
  border-radius:var(--r-md); padding:12px 13px; margin-bottom:12px;
}
.late-head { font:650 12.5px var(--sans); color:var(--amber); margin-bottom:7px; }
.late-item {
  display:block; padding:7px 9px; border-radius:var(--r-xs);
  font:13px var(--mono); color:var(--ink);
}
.late-item:hover { background:var(--surface); }
.late-note { font-size:11px; color:var(--ink-3); margin-top:7px; line-height:1.55; }

/* 학부모가 연기한 수업 안내 (강사 Today) */
.pp-box {
  background:var(--red-soft); border:1px solid var(--red-line);
  border-radius:var(--r-md); padding:12px 13px; margin-bottom:12px;
}
.pp-head { font:650 12.5px var(--sans); color:var(--red); margin-bottom:7px; }
.pp-item { padding:5px 9px; font:13px var(--mono); color:var(--ink); }
.pp-when { font-size:11px; color:var(--ink-3); margin-left:4px; }
.pp-note { font-size:11px; color:var(--ink-3); margin-top:7px; line-height:1.55; }

/* 13c. 공지 (관리자 작성 · 강사 열람) */
.notice-form { margin-bottom:22px; }
.notice-form textarea {
  width:100%; margin:8px 0; padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); font:13.5px/1.6 var(--sans);
}
.notice-row { display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.notice-row input[type=text] { flex:1; min-width:200px; }
.notice-pin { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2); }
.notice-off { opacity:.55; }

/* 학생 공지 — 그룹·개인 대상 학생 고르기 */
.sn-pick {
  margin:8px 0; padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface);
}
.sn-pick-title { font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:6px; }
.sn-grid { display:flex; flex-wrap:wrap; gap:4px 16px; }
.sn-ck { display:flex; align-items:center; gap:6px; font-size:13px; padding:2px 0; }

.notice-item {
  display:flex; align-items:center; gap:9px; padding:11px 10px;
  border-bottom:1px solid var(--border); color:var(--ink); font-size:13.5px;
}
.notice-item:last-child { border-bottom:0; }
.notice-item:hover { background:var(--surface-2); }
.notice-item.on { background:var(--surface-2); }
.notice-item-title { flex:1; font-weight:650; }
.notice-item.read .notice-item-title { font-weight:400; color:var(--ink-2); }
.notice-date { font:12px var(--mono); color:var(--ink-3); }
.notice-view { margin-bottom:14px; }
.notice-meta { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.notice-title { font-size:16.5px; margin-bottom:10px; }
.notice-body { font-size:13.5px; line-height:1.75; color:var(--ink); overflow-wrap:break-word; }
.notice-body a { color:var(--accent); text-decoration:underline; }

/* 변경 알림(user_alerts) — 강사 Notices 상단 · 학부모 홈 상단 */
.alert-list { margin-bottom:14px; }
.panel-title { font-size:13px; font-weight:700; color:var(--ink-2); margin:0 0 6px; }
.alert-item {
  display:flex; align-items:flex-start; gap:8px; padding:10px 8px;
  border-bottom:1px solid var(--border); color:var(--ink);
  font-size:13px; line-height:1.55;
}
.alert-item:last-child { border-bottom:0; }
.alert-item:hover { background:var(--surface-2); }
.alert-item .dot { flex:none; margin-top:6px; }
.alert-body { flex:1; }
.alert-item.read .alert-body { color:var(--ink-2); }
.alert-item .notice-date { flex:none; white-space:nowrap; margin-top:2px; }

/* 하단 탭 배지 — 홈 탭의 안 읽은 변경 알림 건수 */
.tabbar a { position:relative; }
.tabbar a .tabnum {
  position:absolute; top:1px; left:calc(50% + 5px);
  font-style:normal; min-width:16px; text-align:center;
  font-size:10px; font-weight:700; line-height:1;
  padding:2.5px 5px; border-radius:var(--r-full);
  background:var(--accent); color:var(--ink-on-brand);
}

/* 13b. zoom host load */
.loadbars { display:flex; flex-direction:column; gap:6px; }
.loadbar { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; }
.lb-h { width:28px; color:var(--ink-3); }
.lb-track { flex:1; height:7px; background:var(--surface-3); border-radius:var(--r-full); overflow:hidden; }
.lb-fill {
  display:block; height:100%; background:var(--accent);
  border-radius:var(--r-full); transition:width .4s var(--ease-out);
}
.loadbar.full .lb-fill { background:var(--red); }
.loadbar.full .lb-n { color:var(--red); font-weight:600; }
.lb-n { width:44px; text-align:right; color:var(--ink-3); }

/* 13c. recurring slots */
.slot { display:flex; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border-2); }
.slot:last-child { border-bottom:0; }
.slot-no {
  width:22px; height:22px; flex:none; border-radius:50%;
  background:var(--surface-3); color:var(--ink-3);
  font:600 11px var(--mono); display:grid; place-items:center;
}
.slot :is(select,input) { padding:8px 10px; }
.slot select:first-of-type { width:106px; }
.slot input[type=time] { width:126px; font-family:var(--mono); }
.slot select:last-of-type { flex:1; min-width:130px; }
.slotline { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.slotchip {
  font:12px var(--mono); background:var(--surface-3); color:var(--ink-2);
  padding:3px 10px; border-radius:var(--r-full);
}
.inlineform { display:inline; }
.inlineform select {
  padding:5px 9px; border:1px solid var(--border); border-radius:var(--r-xs);
  font:12px var(--sans); background:var(--surface); color:var(--ink-2);
}

/* 13b-1. 수업 변경 (강사 대강·교체 / 일시 이동) */
.chg { position:relative; }
.chg > summary {
  list-style:none; cursor:pointer; display:inline-block;
  padding:5px 11px; border:1px solid var(--border); border-radius:var(--r-full);
  font:12px var(--sans); color:var(--ink-2); background:var(--surface);
}
.chg > summary::-webkit-details-marker { display:none; }
.chg[open] > summary { border-color:var(--accent); color:var(--accent-ink); }
.chg-pop {
  position:absolute; right:0; top:calc(100% + 6px); z-index:30;
  min-width:330px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:0 10px 28px rgba(0,0,0,.12);
  display:flex; flex-direction:column; gap:8px;
}
.chg-row { display:flex; align-items:center; gap:6px; }
.chg-label { flex:none; width:32px; font:12px var(--sans); color:var(--ink-3); }
.chg-row :is(select,input) {
  padding:6px 8px; border:1px solid var(--border); border-radius:var(--r-xs);
  font:12px var(--sans); background:var(--surface); color:var(--ink);
}
.chg-row select { flex:1; min-width:0; }
.chg-row input[type=time] { width:96px; font-family:var(--mono); }
.chg-row input[type=date] { width:130px; font-family:var(--mono); }
.chg-row button {
  flex:none; padding:6px 10px; border:1px solid var(--border);
  border-radius:var(--r-xs); font:12px var(--sans);
  background:var(--surface); color:var(--ink-2); cursor:pointer;
}
.chg-row button:hover { border-color:var(--accent); color:var(--accent-ink); }
.chg-row button.chg-all { color:var(--accent-ink); border-color:var(--accent); }
.chg-row button:disabled { opacity:.4; cursor:not-allowed; }

/* 출석 줄 — 그룹이면 학생이 여럿이라 줄바꿈을 허용합니다 */
.chg-att { flex-wrap:wrap; }
.att-one {
  display:inline-flex; align-items:center; gap:5px;
  font:12px var(--sans); color:var(--ink-2);
}
.att-one select { flex:none; width:auto; }
.att-wait {
  display:inline-flex; align-items:center; gap:3px;
  font:11px var(--sans); color:var(--ink-3); cursor:pointer;
}
.att-wait input { accent-color:var(--accent); }

/* 13c-0. 강사 휴가 처리 — 기간의 수업을 몰아 서브 배정·휴강 */
.pagehead-btns { display:flex; gap:8px; flex-wrap:wrap; }
.vac-actions {
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin:14px 0 8px;
}
.vac-actions select {
  padding:9px 10px; background:var(--surface); cursor:pointer;
  border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--ink); font:14px var(--sans);
}
.vac-actions button {
  padding:9px 18px; border:0; border-radius:var(--r-sm);
  background:var(--accent); color:var(--ink-on-brand); font:550 14px var(--sans);
}
.vac-actions button:hover { background:var(--accent-ink); }
.vac-actions .vac-cancel { background:var(--red); }
.vac-actions .vac-cancel:hover { background:var(--red); filter:brightness(.85); }
.vac-or { font-size:13px; color:var(--ink-3); margin-left:4px; }

/* 13c-1. 수업 기록 — 관리자가 강사 기록을 훑어보는 피드 */
.filters-check {
  display:inline-flex; align-items:center; gap:5px;
  font:13px var(--sans); color:var(--ink-2); cursor:pointer;
}
.filters-check input { accent-color:var(--accent); }
.lesson-card { padding:14px 16px; }
.lesson-head {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font:13px var(--sans); color:var(--ink-2);
}
.lesson-badges { display:flex; gap:5px; }
.lesson-student { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.lesson-student-head {
  display:flex; align-items:center; gap:7px; font:600 13px var(--sans);
}
.lesson-prog {
  margin:7px 0 0 2px; font:12.5px var(--sans); color:var(--ink-2);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.lesson-test { font:12px var(--sans); color:var(--ink-2); }
.lesson-hw {
  flex-basis:100%; margin-left:10px; font:12px var(--sans); color:var(--ink-3);
}
.lesson-pic { color:var(--accent-ink); text-decoration:underline; }
.lesson-fb {
  margin-top:7px; padding:9px 11px; background:var(--surface-2);
  border-radius:var(--r-sm); font:13px/1.65 var(--sans); color:var(--ink);
  white-space:pre-line;
}
.lesson-fb-ko {
  margin-top:4px; padding:8px 11px; background:var(--surface-3);
  border-radius:var(--r-sm); font:12.5px/1.6 var(--sans); color:var(--ink-2);
}
.lesson-common { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.lesson-common-label { font:600 12px var(--sans); color:var(--ink-3); margin-bottom:2px; }
.lesson-pics { display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
.lesson-pics img {
  height:84px; border-radius:var(--r-xs); border:1px solid var(--border);
}

/* 13d. calendar */
.cal-head { display:flex; justify-content:space-between; align-items:center; margin:4px 2px 12px; }
.cal-title { font:650 17px var(--sans); letter-spacing:-.02em; }
.cal-nav {
  display:grid; place-items:center; width:36px; height:36px;
  border-radius:var(--r-sm); font-size:20px; color:var(--ink-2);
}
.cal-nav:hover { background:var(--surface-3); color:var(--accent); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:16px; }
.cal-w { text-align:center; font-size:11px; font-weight:500; color:var(--ink-3); padding:5px 0; }
.cal-d {
  position:relative; aspect-ratio:1/1.05;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:var(--r-md); font-size:14px; color:var(--ink);
  transition:background var(--dur) var(--ease);
}
.cal-d:hover { background:var(--surface-3); }
.cal-d.empty { visibility:hidden; }
.cal-d.today { background:var(--surface-3); font-weight:700; }
.cal-d.hol > span:first-child { color:var(--red); }
.cal-d.sel { background:var(--accent); color:var(--ink-on-brand); font-weight:650; }
.cal-d.sel.hol > span:first-child { color:var(--ink-on-brand); }
.cal-d.sel .dot { background:var(--ink-on-brand); }
.cal-dots { display:flex; gap:3px; margin-top:3px; height:5px; }
.cal-dots .dot { width:5px; height:5px; }
/* 달력 점 색 = 수업 상태 (범례와 짝) */
.dot.st-plan { background:transparent; border:1.5px solid var(--ink-3); box-sizing:border-box; }
.dot.st-ok   { background:var(--green); }
.dot.st-bad  { background:var(--red); }
.dot.st-warn { background:var(--amber); }
.dot.st-mute { background:var(--border); }
.dot.st-fb   { background:var(--accent); }
.cal-d.sel .cal-dots .dot { background:var(--ink-on-brand); border-color:var(--ink-on-brand); }
.cal-legend {
  display:flex; flex-wrap:wrap; gap:6px 14px;
  margin:-6px 2px 16px; font-size:11.5px; color:var(--ink-3);
}
.cal-legend span { display:inline-flex; align-items:center; gap:5px; }
.cal-legend .dot { width:6px; height:6px; }
.day-head { font:650 15px var(--sans); margin:16px 2px 8px; letter-spacing:-.015em; }
.day-hol { color:var(--red); font-size:13px; font-weight:600; }
.day-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

/* 13e. recording link */
.rec-row { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.rec-link { font:600 13px var(--sans); color:var(--accent); }
.rec-link:hover { text-decoration:underline; }
.rec-until { font-size:12px; color:var(--ink-3); }
/* 녹화 재생 암호 — 링크와 **따로** 둡니다. 주소에 붙이면 링크 하나로
   다 열려서 암호를 넣는 뜻이 없어집니다. */
.rec-pw { font-size:12.5px; color:var(--ink-2); }
.rec-pw b {
  font:600 13px var(--mono, ui-monospace, monospace); letter-spacing:.04em;
  background:var(--surface-2); border-radius:var(--r-sm); padding:2px 7px; margin:0 3px;
}
.rec-copy {
  border:1px solid var(--line); background:none; border-radius:var(--r-full);
  padding:2px 9px; font:12px var(--sans); color:var(--ink-2); cursor:pointer;
}
.rec-copy:hover { border-color:var(--accent); color:var(--accent-ink); }

/* 13f. makeups */
.mk-card {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:13px 16px; margin-bottom:8px;
  flex-wrap:wrap; box-shadow:var(--sh-1);
}
.mk-card.done { opacity:.7; }
.mk-info { font-size:14px; line-height:1.7; }
.mk-meta { font-size:12px; color:var(--ink-3); }
.mk-form { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.mk-form input { padding:8px 10px; font:13px var(--mono); }
.mk-form .btn { border:0; font:600 13px var(--sans); }
.mk-line {
  margin-top:8px; padding:7px 11px; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid var(--accent-line); font-size:13px; font-weight:600;
}
.mk-note { font-size:12px; color:var(--ink-3); }

/* 13g. plans (student picker) */
.plan-opt {
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:14px 16px; margin-bottom:8px;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan-opt:hover { border-color:var(--accent-line); }
.plan-opt:has(input:checked) {
  border-color:var(--accent); box-shadow:0 0 0 2px var(--focus-halo);
}
.plan-opt.off { opacity:.5; cursor:default; }
.plan-opt.off:hover { border-color:var(--border); }
.plan-name { flex:1; font:600 15px var(--sans); }
.plan-price { font:650 15px var(--sans); color:var(--accent-ink); }

/* 13h. plans (admin table) */
.plan-table {
  width:100%; border-collapse:collapse;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden; margin-bottom:14px;
  box-shadow:var(--sh-1);
}
.plan-table th {
  font:600 11.5px var(--sans); letter-spacing:.03em; color:var(--ink-3);
  text-align:left; padding:10px 12px;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.plan-table td { padding:9px 12px; border-bottom:1px solid var(--border-2); font-size:14px; }
.plan-table tr:last-child td { border-bottom:0; }
/* 25분·55분 아홉 줄이 한 표에 이어 붙어 있어서 어디서 넘어갔는지 안 보였습니다.
   글자색과 왼쪽 선으로 두 덩어리를 갈라 둡니다. 25분/55분 말고 다른 길이를
   만들면 그냥 기본 먹색으로 나옵니다 — 색이 없다고 안 보이지는 않습니다. */
.plan-combo { display:inline-block; padding-left:9px; border-left:3px solid transparent; }
.plan-combo[data-dur="25"] { color:#1c5b91; border-left-color:#c3d9ee; }
.plan-combo[data-dur="55"] { color:#a8325a; border-left-color:#f0c4d2; }
.plan-used { font-size:11px; color:var(--ink-3); margin-left:6px; }
.price-in { width:112px; text-align:right; padding:7px 10px; font:14px var(--mono); }
.plan-add {
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:13px 15px; font-size:14px;
}
.plan-add :is(input,select) { padding:8px 10px; }
.plan-add input[type=number] { width:66px; }
.plan-add .btn { border:0; font:600 13px var(--sans); }

.disc-bar { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.disc-form,.sub-add {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:11px 14px; font-size:14px;
}
.disc-form input,.sub-add input { padding:7px 10px; }
.disc-form input[type=number] { width:72px; }
.disc-form .btn,.sub-add .btn { border:0; font:600 13px var(--sans); }
.disc-badge {
  font:600 11px var(--sans); color:var(--accent-ink); background:var(--accent-soft);
  border:1px solid var(--accent-line);
  border-radius:var(--r-full); padding:2px 8px; margin-left:5px;
}

.tier-form {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:13px 15px; margin-bottom:6px;
}
.tier-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; }
.tier-cell {
  display:flex; flex-direction:column; gap:5px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  padding:9px 10px; font-size:13px; opacity:.5;
  transition:opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tier-cell.on { opacity:1; border-color:var(--accent); background:var(--accent-soft); }
.tier-m { display:flex; align-items:center; gap:5px; font-weight:600; }
.tier-r input { width:54px; padding:5px 7px; font:13px var(--mono); text-align:right; }
.tier-foot { display:flex; align-items:center; gap:8px; margin-top:11px; font-size:13px; flex-wrap:wrap; }
.tier-foot input { width:78px; padding:6px 9px; font:13px var(--mono); }
.tier-foot .btn { border:0; font:600 13px var(--sans); }

.subject-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--border-2);
}
.subject-label { font:600 13px var(--sans); color:var(--ink-2); }
.subject-chk { display:flex; align-items:center; gap:6px; font-size:14px; cursor:pointer; }
.subj-chips { align-items:center; }
.subj-add { display:flex; gap:6px; margin-left:6px; }
.subj-add input { padding:7px 12px; border-radius:var(--r-full); font:13px var(--sans); width:112px; }
.subj-add .btn { border:0; font:600 12px var(--sans); padding:7px 14px; }

/* 13i. curriculum */
.cur-trackbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:11px 15px; margin-top:4px; font-size:14px;
}
.cur-trackbar .sub { margin-left:6px; }
.cur-trackbtns { display:flex; gap:6px; }
.cur-table td { padding:7px 8px; vertical-align:middle; white-space:nowrap; }
.cur-table th { padding:9px 8px; white-space:nowrap; }
.cur-text { width:100%; min-width:150px; padding:7px 9px; }
.cur-parts { min-width:112px; }
.cur-num { width:60px; text-align:right; padding:7px 8px; font:13px var(--mono); }
.cur-sel { padding:7px 8px; font:13px var(--sans); cursor:pointer; }
.cur-units { display:block; font-size:11px; margin-top:3px; }
.cur-table input[type=checkbox] { transform:scale(1.15); }
.cur-units-table { max-width:640px; }
.cur-unitno { width:90px; color:var(--ink-3); font-size:13px; }

/* 저장 버튼 옆의 '같은 이름 트랙에도 적용'. 버튼 오른쪽에 나란히 둡니다 —
   저장을 누르는 순간에 함께 결정하는 값이라, 표 위쪽에 떨어뜨려 놓으면
   켜 놓은 것을 잊고 저장하게 됩니다. */
.cur-savebar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cur-spread {
  display:flex; align-items:center; gap:7px;
  font-size:13px; color:var(--ink-2); cursor:pointer;
}
.cur-spread input { transform:scale(1.15); }
.cur-spread .sub { color:var(--ink-3); font-size:11.5px; }

/* 13j. passes (수강권) */

/* 요약 카드가 곧 필터입니다 */
.qcards { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.qcard {
  display:flex; align-items:baseline; gap:9px;
  padding:12px 14px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--sh-1); text-decoration:none;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.qcard:hover { border-color:var(--accent-line); }
.qcard.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--focus-halo); }
.qcard-n { font:650 21px/1 var(--sans); font-variant-numeric:tabular-nums; }
.qcard-l { font-size:12.5px; color:var(--ink-2); }
.qcard.t-warn .qcard-n { color:var(--amber); }
.qcard.t-bad  .qcard-n { color:var(--red); }
.qcard.t-mute .qcard-n { color:var(--ink-3); }

/* 잔여 회차 — 막대는 거들 뿐, 숫자가 주인공입니다 */
.meter { display:flex; align-items:center; gap:9px; min-width:132px; }
.meter-track {
  flex:1; height:5px; border-radius:var(--r-full);
  background:var(--surface-3); overflow:hidden;
}
.meter-fill { display:block; height:100%; border-radius:var(--r-full); background:var(--accent); }
.meter.low .meter-fill { background:var(--amber); }
.meter.out .meter-fill { background:var(--red); }
.meter-n { font:600 13px var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.meter.low .meter-n { color:var(--amber); }
.meter.out .meter-n { color:var(--red); }
.meter-n .sub { font-weight:400; color:var(--ink-3); }

.dday { font:600 12px var(--mono); color:var(--ink-3); }
.dday.warn { color:var(--amber); }
.dday.bad  { color:var(--red); }

/* 조정 폼 펼치기 — JS 없이 체크박스 + :has() 로 다음 행을 엽니다 */
.p-toggle { cursor:pointer; }
.p-toggle input { position:absolute; opacity:0; width:0; height:0; }
.p-toggle span {
  display:inline-block; padding:4px 11px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--surface-2);
  font:500 12px var(--sans); color:var(--ink-2); white-space:nowrap;
}
.p-toggle:hover span { border-color:var(--accent-line); color:var(--accent-ink); }
.p-toggle:has(input:checked) span {
  background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-ink);
}
.p-toggle input:focus-visible + span { box-shadow:0 0 0 2px var(--focus-halo); }

.p-edit { display:none; }
.p-row:has(input:checked) + .p-edit { display:table-row; }
.p-row:has(input:checked) > td { border-bottom-color:transparent; }
.p-edit > td { background:var(--surface-2); padding:14px 16px; }

/* 수강권 목록 — 수업 기간. 시작일은 고정, 종료일은 수업한 날에 따라 밀립니다 */
.per-s { color:var(--ink); }
.per-w { color:var(--ink-3); margin:0 3px; }
.per-e { color:var(--ink-2); }

/* 수강권 조정 영역 위의 회차 대조표 */
.p-hist {
  background:var(--surface-inset); border:1px solid var(--border);
  border-radius:var(--r-md); padding:11px 13px; margin-bottom:14px;
}
.p-hrow { display:flex; gap:10px; align-items:baseline; margin-bottom:5px; font-size:12.5px; }
.p-hlab {
  flex:0 0 auto; min-width:76px; font:600 11.5px var(--sans);
  color:var(--ink-3); letter-spacing:.01em;
}
.p-hlab b { font-variant-numeric:tabular-nums; }
.p-hdates { font:12px var(--mono); color:var(--ink-2); word-break:keep-all; }
.p-hrow.h-done .p-hlab { color:var(--accent-ink); }
.p-hrow.h-off  .p-hlab { color:var(--amber); }
.p-hrow.h-soon .p-hlab { color:var(--ink-3); }
.p-hrow.h-soon .p-hdates { color:var(--ink-3); }
.p-hnote { margin:8px 0 0; font-size:11.5px; color:var(--ink-3); }

.p-form { display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap; }
.p-fld { display:flex; flex-direction:column; gap:5px; }
.p-fld > span { font-size:11.5px; color:var(--ink-3); }
.p-fld :is(input,select) { padding:7px 10px; font:13px var(--sans); min-width:104px; }
.p-fld input[type=number] { font-family:var(--mono); width:84px; min-width:0; }
.p-hint { flex-basis:100%; font-size:12px; color:var(--ink-3); margin:0; }

@media (max-width:900px) { .qcards { grid-template-columns:repeat(2,1fr); } }

/* 13k. curriculum progress (강사 화면 진도 체크) */

.progblock { margin:22px 0; }
.progwho {
  margin:14px 0 6px; font:600 12px var(--sans);
  color:var(--ink-3); letter-spacing:.02em;
}

.progitem {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; margin-top:8px;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); cursor:pointer;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.progitem:hover { border-color:var(--accent-line); }
.progitem input { position:absolute; opacity:0; width:0; height:0; }
.progitem:has(input:checked) { background:var(--accent-soft); border-color:var(--accent-line); }
.progitem:has(input:focus-visible) { box-shadow:0 0 0 2px var(--focus-halo); }

.progtxt { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.progtxt b { font:600 14px var(--sans); }
.progtxt .sub { font-size:12px; color:var(--ink-3); }

/* 체크 표시 — 켜지면 채워집니다 */
.progtick {
  flex-shrink:0; padding:5px 12px; border-radius:var(--r-full);
  border:1px solid var(--border-2); background:var(--surface-2);
  font:600 12px var(--sans); color:var(--ink-3); white-space:nowrap;
}
.progitem:has(input:checked) .progtick {
  background:var(--accent); border-color:var(--accent); color:var(--ink-on-brand);
}

.prog-hint { margin:10px 0 0; font-size:12px; color:var(--ink-3); }

/* 지난 진도 — 강사가 오늘 어디서 이어야 하는지 보는 접이식 목록 */
.progpast { margin-top:10px; }
.progpast > summary {
  cursor:pointer; font:600 12px var(--sans); color:var(--ink-3);
  padding:5px 2px; list-style:none;
}
.progpast > summary::-webkit-details-marker { display:none; }
.progpast > summary::before { content:'▸ '; }
.progpast[open] > summary::before { content:'▾ '; }
.progpast > summary:hover { color:var(--accent-ink); }

.pastrow {
  display:flex; align-items:baseline; gap:9px;
  padding:6px 2px; border-top:1px solid var(--border-2); font-size:12.5px;
}
.pastrow .mono { color:var(--ink-3); flex:none; }
.pastbook { font-weight:600; flex:none; }
.pastunit { color:var(--ink-2); flex:1; min-width:0; }
.pastrow .ok { color:var(--accent-ink); font-weight:600; flex:none; }
/* 갈아탄 교재처럼 끝맺음이 아닌 줄. 오른쪽 끝을 흐리게 두어 '완료' 와
   한눈에 갈립니다. */
.pastrow .quiet { flex:none; }

/* 13k-2. 숙제 · 학생별 개별 코멘트 (강사 화면)
   한 학생이 한 덩어리입니다. 줄 사이를 선으로 갈라 두지 않으면 그룹 수업에서
   위 학생의 숙제 칸과 아래 학생의 이름이 붙어 보입니다. */

.hwblock { margin:22px 0; }
.hwrow {
  display:flex; flex-direction:column; gap:9px;
  padding:12px 0; border-top:1px solid var(--border-2);
}
.hwrow .progwho { margin:0; }

/* 지난 숙제 + 이행 여부. 좁아지면 세그먼트가 아랫줄로 접힙니다 */
.hwprev { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hwprev-label { flex:none; font:600 12px var(--sans); color:var(--ink-3); }
.hwprev-text { flex:1; min-width:140px; font-size:13px; color:var(--ink-2); }
/* 아래 입력칸보다 눈에 덜 띄어야 합니다. 오늘 할 일은 '내 주는 것' 쪽입니다 */
.hwprev .seg span { padding:6px 12px; font-size:12px; }

.hwinput { width:100%; padding:9px 12px; }
.hwnote  { width:100%; padding:10px 12px; line-height:1.7; resize:vertical; }
.hwinput::placeholder,.hwnote::placeholder { color:var(--ink-3); }

/* 단원 시험 — 교재 카드 안. 링크 단추와 점수 칸이 한 줄에 나란히 섭니다 */
.testrow {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:9px; padding:9px 12px;
  border:1px solid var(--border-2); border-radius:var(--r-sm);
  background:var(--surface-2);
}
.testlead { font:600 12px var(--sans); color:var(--ink-3); white-space:nowrap; }
.testlink {
  font:600 12.5px var(--sans); color:var(--accent-ink);
  text-decoration:none; padding:5px 12px; border-radius:var(--r-full);
  border:1px solid var(--accent-line); background:var(--accent-soft);
  white-space:nowrap;
}
.testlink:hover { border-color:var(--accent); }
.testscore { display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.score-num {
  width:64px; padding:6px 8px; text-align:center;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-inset); color:var(--ink); font:14px var(--sans);
}
.score-num:focus {
  outline:none; background:var(--surface);
  border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-halo);
}
.score-sep { color:var(--ink-3); }
.score-pass { font:12px var(--sans); color:var(--ink-3); white-space:nowrap; }

/* 날짜 넘기기 — 강사 화면 머리글 아래 */
.daynav { margin-top:10px; }

/* 숙제 — 학부모 피드백 카드. 코멘트와 섞이지 않게 바탕을 한 겹 깔아
   "읽는 것" 과 "해야 하는 것" 을 눈으로 가릅니다. */
.hwcard {
  margin-top:12px; padding:10px 12px;
  border-radius:var(--r-md); background:var(--surface-2);
  display:flex; flex-direction:column; gap:6px;
}
.hwline { display:flex; align-items:baseline; gap:9px; }
.hwcard-label { flex:none; font:600 12px var(--sans); color:var(--ink-3); }
.hwcard-text { flex:1; min-width:0; font-size:13.5px; line-height:1.65; }

/* 13k-3. 수업 사진
   강사 화면(.imgzone)은 붙여넣기·파일 선택으로 사진을 다는 자리이고,
   학부모 화면(.fbimgs)은 그 사진을 보여 주는 자리입니다.
   원본은 새 탭에서 열립니다 — 문제 풀이 캡처는 확대해서 봐야 합니다. */
.imgzone { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:7px; }
.imgthumb { position:relative; display:inline-block; }
.imgthumb img {
  /* 가로도 고정합니다. `width:auto` 면 사진이 뜨기 전에는 폭이 0이었다가
     뜨는 순간 옆 사진들이 밀립니다. 어차피 잘라서(object-fit:cover)
     보여 주므로 폭을 정해 두어도 보이는 것은 같습니다. */
  height:56px; width:84px; object-fit:cover; display:block;
  border-radius:var(--r-sm); border:1px solid var(--border-2);
}
.imgdel {
  position:absolute; top:-7px; right:-7px; width:20px; height:20px;
  border:0; border-radius:var(--r-full); cursor:pointer;
  /* 다크 모드에서 --ink 는 거의 흰색이 됩니다. 글자를 #fff 로 박아 두면
     흰 동그라미에 흰 × 가 되어 지우기 단추가 사라집니다. --surface 는
     --ink 와 항상 반대쪽이라 어느 모드에서든 보입니다. */
  background:var(--ink); color:var(--surface); font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.imgdel:hover { background:#b3261e; }
.imgadd {
  display:inline-flex; align-items:center; padding:6px 11px; cursor:pointer;
  border:1px dashed var(--border); border-radius:var(--r-sm);
  font:600 12px var(--sans); color:var(--ink-3);
}
.imgadd:hover { color:var(--accent-ink); border-color:var(--accent-ink); }

.fbimgs { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.fbimgs img {
  height:84px; width:auto; max-width:160px; object-fit:cover; display:block;
  border-radius:var(--r-sm); border:1px solid var(--border-2);
}
/* 숙제 줄 안에서는 글 아래로 내려앉습니다 */
.hwcard-text .fbimgs { margin-top:6px; }

/* 사진 + 저장 단추 — 사진은 6개월 뒤 지워지니 보관은 핸드폰으로 */
.fbimg-w { display:inline-flex; flex-direction:column; gap:3px; align-items:center; }
.imgsave {
  font:600 11.5px var(--sans); color:var(--ink-3); text-decoration:none;
  padding:2px 10px; border:1px solid var(--border); border-radius:99px;
}
.imgsave:hover { color:var(--ink); border-color:var(--ink-3); }
.fb-keep-hint {
  font:12.5px/1.5 var(--sans); color:var(--ink-3);
  background:var(--surface-2); border-radius:var(--r-sm);
  padding:9px 13px; margin-bottom:10px;
}

/* 지난 회차는 접어 둡니다 — 카드 하나가 열두 덩어리라 스무 개가 이어지면
   "지지난 주에 뭐였더라" 를 찾다가 지칩니다. 최근 두 회만 펴 둡니다.
   삼각형은 브라우저 기본 마커를 감추고 직접 그립니다 (.progpast 와 같은 방식).
   접힌 카드 안의 사진은 loading="lazy" 덕분에 **펼치기 전까지 안 나갑니다** —
   그래서 접기와 lazy 는 둘이 함께여야 효과가 납니다. */
.fbcard > summary { cursor:pointer; list-style:none; flex-wrap:wrap; }
.fbcard > summary::-webkit-details-marker { display:none; }
.fbcard > summary .tile-label::before { content:'▸ '; color:var(--ink-3); }
.fbcard[open] > summary .tile-label::before { content:'▾ '; }
.fbcard > summary:hover .tile-label { color:var(--accent-ink); }
.fbcard:not([open]) > summary { margin-bottom:0; }
.fbsum-bits {
  flex-basis:100%; font:12.5px/1.5 var(--sans); color:var(--ink-3); margin-top:3px;
}
.fbcard[open] .fbsum-bits { display:none; }   /* 펼치면 아래에 다 보입니다 */

/* 13k-2. 숙제 내기 — 학부모 홈에서 찍어 올리는 카드.
   단추가 한 줄을 다 차지해야 엄지로 누르기 쉽습니다. */
.hwsub-btn {
  display:flex; align-items:center; justify-content:center; margin-top:10px;
  padding:11px 14px; cursor:pointer;
  border:1.5px dashed var(--border); border-radius:var(--r-sm);
  font:600 14px var(--sans); color:var(--accent-ink);
}
.hwsub-btn:active { background:var(--surface-2); }
.hwsub-hint { margin-top:7px; font-size:12px; color:var(--ink-3); }

/* 강사 Today — 학부모가 제출한 숙제 사진 */
.subblock {
  margin-bottom:14px; padding:12px 14px;
  background:var(--surface-2); border-radius:var(--r-sm);
}
.subrow + .subrow { margin-top:8px; }

/* 13k-3. 사진 크게 보기(학부모 홈) · 첨삭(강사 Today) — 화면 위에 얹는 층.
   핸드폰에서 새 탭으로 나가면 돌아오는 길이 없어서 앱 안에서 처리합니다. */
.lb {
  position:fixed; inset:0; z-index:60; background:rgba(10,14,13,.9);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:18px;
}
.lb img { max-width:100%; max-height:78vh; border-radius:8px; }
.lb-bar { display:flex; gap:10px; }
.lb-btn {
  padding:10px 18px; border:0; border-radius:8px; cursor:pointer;
  font:600 13.5px var(--sans); background:#fff; color:#1c2321;
}
.lb-btn.danger { background:#b3261e; color:#fff; }
.lb-btn.accent { background:var(--accent); color:var(--ink-on-brand); }

.anno {
  position:fixed; inset:0; z-index:60; background:rgba(10,14,13,.9);
  display:flex; flex-direction:column;
}
.anno-bar {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:10px 16px; background:var(--surface);
}
.anno-title { font:600 14px var(--sans); }
.anno-tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.anno-bar .lb-btn { border:1px solid var(--border); }
.anno-bar .lb-btn.accent { border-color:var(--accent); }
.anno-bar .lb-btn.on { background:#1c2321; color:#fff; border-color:#1c2321; }
.anno-color {
  width:26px; height:26px; border-radius:50%; padding:0; cursor:pointer;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--border);
}
.anno-color.on { box-shadow:0 0 0 2px #1c2321; }
.anno-wrap {
  flex:1; overflow:auto; display:flex;
  align-items:center; justify-content:center; padding:16px;
}
.anno-wrap canvas {
  max-width:100%; max-height:100%; touch-action:none;
  background:#fff; border-radius:6px; cursor:crosshair;
}

/* display:flex 가 hidden 속성을 이기지 못하게 */
.lb[hidden], .anno[hidden] { display:none; }

/* 13l. 진도 막대 — 학부모 홈 타일과 진도 페이지가 같이 씁니다 */
.bar {
  height:6px; border-radius:var(--r-full); overflow:hidden;
  background:var(--surface-3); margin:8px 0 9px;
}
.bar > span {
  display:block; height:100%; border-radius:inherit;
  background:var(--accent); min-width:2px;
  transition:width var(--dur) var(--ease);
}

/* 수업에서 나간 것 — 학부모 진도 페이지의 회차 기록 */
.tlrow {
  display:flex; align-items:baseline; gap:10px;
  padding:9px 0; border-top:1px solid var(--border-2);
}
.tlrow:first-of-type { border-top:0; padding-top:4px; }
.tldate { color:var(--ink-3); flex:none; }
.tlbody { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tlbody b { font:600 14px var(--sans); }
.tlmark {
  flex:none; padding:3px 9px; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface-2);
  font:600 11.5px var(--sans); color:var(--ink-3); white-space:nowrap;
}
.tlmark.ok {
  background:var(--accent-soft); border-color:var(--accent-line);
  color:var(--accent-ink);
}
/* 단원 시험 점수 — 진도 줄 바로 아래 붙는 보조 줄 (학부모 피드백) */
.tltest { padding-top:0; border-top:0; margin-top:-4px; }
.test-score {
  flex:none; display:inline-flex; align-items:center; gap:7px;
  font:13px var(--sans); color:var(--ink-2); white-space:nowrap;
}
.test-score b { font:700 14px var(--sans); color:var(--ink); }
/* 그 수업 뒤 남은 회차. 줄마다 자릿수가 달라도 오른쪽 끝이 흔들리지 않게
   폭을 잡아 둡니다 — 위아래로 훑으며 숫자가 줄어드는 걸 보는 칸입니다. */
.tlleft {
  flex:none; width:58px; text-align:right;
  font-size:12px; color:var(--ink-3); white-space:nowrap;
}

/* 13m. 교재 배정 줄 — 학생 상세와 수강권 발급이 같이 씁니다.
   트랙 하나가 한 줄이고, 교재를 고른 줄만 배정됩니다. */
.bpick-head {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px;
}
.bpick-head label { display:flex; align-items:center; gap:7px; font-weight:600; }

.bpick { border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.bpick-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 12px; border-top:1px solid var(--border-2);
  background:var(--surface);
  transition:background var(--dur) var(--ease);
}
.bpick-row:first-child { border-top:0; }
.bpick-row.on { background:var(--accent-soft); }

/* 교재를 안 고른 줄은 흐릿하게 둡니다. 트랙이 스무 줄 넘게 늘어서기 때문에
   지금 무엇을 주기로 했는지가 한눈에 들어와야 합니다. 흐리게만 하고 잠그지는
   않습니다 — 눌러서 고르는 순간 또렷해집니다. 글자는 opacity 로만 죽여서
   읽으려면 읽힙니다. */
.bpick-row:not(.on) { opacity:.55; }
.bpick-row:not(.on):hover, .bpick-row:not(.on):focus-within { opacity:1; }

/* 트랙 이름과 '지금 …' 은 너비를 못 박아 둡니다. 둘 다 내용만큼만 차지하게
   두면 줄마다 남는 자리가 달라져서 레벨·교재 고르개가 조금씩 어긋나 보입니다.
   스무 줄이 세로로 늘어서는 화면이라 어긋난 것이 눈에 잘 띕니다. */
.bpick-track {
  display:flex; flex-direction:column; gap:1px;
  flex:0 0 150px; min-width:0;
}
.bpick-track b { font:600 13.5px var(--sans); }
.bpick-track .sub { font-size:11.5px; color:var(--ink-3); }

.bpick-lv { flex:none; width:132px; }
.bpick-bk { flex:2 1 210px; min-width:0; }
.bpick-now {
  flex:1 1 130px; min-width:0; font-size:12px; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.bpick-foot {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px;
}

@media (max-width:720px) {
  .bpick-lv, .bpick-bk { flex:1 1 100%; width:auto; }
}

/* ── 14. Utilities ─────────────────────────────────────────── */
.clamp3 {
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden;
}

/* 여백·정렬만 손보는 도우미입니다. 인라인 style 대신 씁니다.
   컴포넌트 규칙보다 뒤에 두어야 덮어쓸 수 있으므로 이 자리에 모읍니다.
   .flush 를 먼저 둔 이유: "flush gap-t" 처럼 겹쳐 쓰면 위 여백만 남습니다. */
.flush          { margin:0; }
.gap-t          { margin-top:16px; }
.grow           { flex:1; min-width:140px; }
.note-left      { text-align:left; }
.tile-intro     { margin-bottom:6px; }
.hollow-flush   { margin:0; }
.tablewrap.flat { border:0; }

/* ── 15. Responsive & a11y ─────────────────────────────────── */
@media (max-width:1080px) {
  .workspace { grid-template-columns:240px 1fr; }
}

@media (max-width:900px) {
  .split { grid-template-columns:1fr; }
  .workspace { grid-template-columns:1fr; }
  .worklist { position:static; }
  .tier-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:860px) {
  :root { --rail-w:0px; }

  .shell { grid-template-columns:1fr; }

  /* rail becomes an off-canvas drawer */
  .rail {
    position:fixed; top:0; bottom:0; left:0; width:264px; height:100dvh;
    z-index:40; box-shadow:var(--sh-3);
    transform:translateX(-100%);
    transition:transform .22s var(--ease-out);
    border-right:1px solid var(--border);
  }
  body.nav-open .rail { transform:translateX(0); }
  body.nav-open .rail-scrim {
    opacity:1; pointer-events:auto;
  }
  .rail-scrim {
    position:fixed; inset:0; z-index:35;
    background:rgba(45,25,28,.45);   /* 위 ::backdrop 과 같은 따뜻한 막 */
    opacity:0; pointer-events:none;
    transition:opacity .22s var(--ease);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  }
  .railtoggle { display:flex; }
  .mobilebar {
    display:flex; align-items:center; gap:10px;
    height:var(--topbar-h); padding:0 14px;
    background:var(--surface); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:16;
  }
  .mobilebar .wordmark { padding:0; font-size:16px; flex:1; }

  main { padding:18px 16px 56px; }
  .pagehead { gap:12px; }
  .stats { gap:16px; }
}

@media (min-width:861px) {
  .rail-scrim,.mobilebar { display:none; }
}

@media (max-width:560px) {
  .cards { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
  .tier-grid { grid-template-columns:repeat(2,1fr); }
  .attrow { flex-direction:column; align-items:stretch; gap:8px; }
  .segs { width:100%; }
  .seg { flex:1; }
  .seg span { text-align:center; padding:9px 8px; }
  .pane-head { flex-direction:column; }
  .workpane { padding:16px; }
  .filters input[type=search] { min-width:100%; }
  /* comfortable touch targets */
  .tabbar a,.btn,.btn-sm,.chip { min-height:38px; }
  .chip { display:inline-flex; align-items:center; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

@media (prefers-contrast:more) {
  :root { --border:var(--border-strong); --ink-3:var(--ink-2); }
  .card,.panel,.tile,.row { box-shadow:none; }
}

@media print {
  .rail,.tabbar,.topbar,.mobilebar,.railtoggle,.themebtn,
  .headbtns,.filters,.pager,.flash,.skip { display:none !important; }
  .shell { grid-template-columns:1fr; }
  body { background:#fff; }
  .panel,.card,.tile,.tablewrap { box-shadow:none; border-color:#ccc; }
  main { padding:0; }
}

/* ── 설정 화면 · 준비 중 메뉴 ───────────────────────────
   13:29 판 settings.php / layout.php 가 쓰는 규칙입니다.
   변수 이름만 지금 체계로 옮겼습니다. */

.setlist {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden;
}
.setrow {
  display:flex; align-items:flex-start; gap:20px; padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.setrow:last-child { border-bottom:0; }
.setrow:hover { background:var(--surface-2); }
.set-main { flex:1; min-width:0; }
.set-label { display:block; font-size:14px; font-weight:500; margin-bottom:2px; }
.set-help {
  display:block; font-size:12px; color:var(--ink-3);
  line-height:1.6; max-width:62ch;
}
.set-input { display:flex; align-items:center; gap:7px; flex:none; padding-top:2px; }
.set-input input {
  width:82px; text-align:right; padding:7px 9px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  font:14px var(--mono); background:var(--surface); color:var(--ink);
}
.set-input input:focus {
  outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent;
}
.set-unit { font-size:12px; color:var(--ink-3); width:46px; }

.checklist {
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;
}
.checkrow {
  display:flex; gap:12px; align-items:flex-start; padding:12px 18px;
  border-bottom:1px solid var(--border);
}
.checkrow:last-child { border-bottom:0; }
.check-label { display:block; font-size:14px; }
.check-mark {
  width:19px; height:19px; flex:none; border-radius:var(--r-full);
  display:grid; place-items:center; font:600 11px var(--sans); margin-top:2px;
}
.check-body { min-width:0; }
.check-note { display:block; font-size:12px; color:var(--ink-3); line-height:1.6; }
.checkrow.ok   .check-mark { background:var(--accent-soft); color:var(--accent-ink); }
.checkrow.todo .check-mark { background:var(--amber-soft);  color:var(--amber); }
.checkrow.todo .check-note { color:var(--amber); }

/* 메뉴 옆 대기 건수 — 출석·레벨테스트를 적으면 줄어듭니다 */
.rail nav a .navnum {
  font-style:normal; margin-left:auto; flex:none;
  min-width:18px; text-align:center;
  font-size:10.5px; font-weight:700; line-height:1;
  padding:3px 6px; border-radius:var(--r-full);
  background:var(--accent); color:var(--ink-on-brand);
}

/* 아직 화면이 없는 메뉴 — 눌리지 않습니다 */
.rail nav .soon {
  display:flex; align-items:center; gap:10px; padding:8px 20px;
  font-size:14px; color:var(--ink-3); opacity:.5;
  cursor:default; user-select:none;
}
.rail nav .soon svg {
  width:17px; height:17px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.rail nav .soon em {
  font-style:normal; font-size:10px; margin-left:auto; letter-spacing:.02em;
  border:1px solid var(--border); border-radius:var(--r-full); padding:1px 7px;
}

@media (max-width:900px) {
  .setrow { flex-direction:column; gap:10px; }
  .set-input { padding-top:0; }
}

/* ── 입학 보드 ─────────────────────────────────────────
   단계별 세 칸. 칸 안의 카드는 눌러서 상세로 들어갑니다. */
.board {
  display:grid; gap:14px; align-items:start; margin-bottom:26px;
  grid-template-columns:repeat(3,1fr);
}
.board-h {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--ink-2);
  margin:0 0 10px; padding:0 2px;
}
.board-n {
  font-size:11px; font-weight:600; color:var(--ink-3);
  border:1px solid var(--border); border-radius:var(--r-full);
  padding:1px 8px; background:var(--surface);
}
.board .hollow { margin:0; }
.board-card { display:block; }
.board-card .chips { margin:0; }
.board-card .chip { font-size:12px; padding:4px 10px; }

@media (max-width:900px) {
  .board { grid-template-columns:1fr; }
}

/* ── 시간표 격자 ───────────────────────────────────────
   한국 시간 00:00~24:00 을 30분씩 끊은 표입니다.
   행이 강사(전체 보기)일 때도 요일(강사 한 명)일 때도 같은 규칙을 씁니다.
   칸 하나 = 30분. 48칸 + 이름 열이라 가로로 넘칩니다.
   칸 폭은 --tt-w 하나로 정합니다. 수업 이름표가 이 값으로 폭을 계산합니다. */
.ttwrap {
  overflow-x:auto; border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--surface);
}
.tt {
  --tt-w:24px;
  border-collapse:separate; border-spacing:0; table-layout:fixed;
}

/* 30분 칸은 여백 없이 색만 칠합니다. 왼쪽 이름 열은 글자가 들어가므로
   빼 둡니다 — 여기에 걸리면 `.tt th` 가 `.tt-lab` 보다 셋째 자리에서 이겨
   아래에 적어 둔 padding 이 통째로 지워집니다. */
.tt :is(th,td):not(.tt-lab) { padding:0; margin:0; }

/* 왼쪽 이름 열은 가로 스크롤에도 붙어 있어야 어느 줄인지 알 수 있습니다 */
.tt-lab {
  position:sticky; left:0; z-index:3;
  width:104px; min-width:104px; max-width:104px;
  background:var(--surface-2); border-right:1px solid var(--border-strong);
  border-bottom:1px solid var(--border-2);
  font-size:12px; font-weight:600; color:var(--ink);
  text-align:left; padding:5px 12px; height:28px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.tt-lab .tt-sub {
  display:block; font-size:11px; font-weight:400; color:var(--ink-3);
  margin-top:1px;
}
.tt thead .tt-lab { background:var(--surface-3); z-index:4; }

.tt-h {
  width:var(--tt-w); min-width:var(--tt-w); height:26px;
  font-size:10px; font-weight:600; color:var(--ink-3);
  background:var(--surface-3); text-align:left;
  border-bottom:1px solid var(--border);
}
.tt-h.hr { border-left:1px solid var(--border-strong); padding-left:2px; }

.tt-c {
  position:relative;
  width:var(--tt-w); min-width:var(--tt-w); height:28px;
  background:var(--surface);
  border-right:1px solid var(--border-2);
  border-bottom:1px solid var(--border-2);
  cursor:pointer;
}
.tt-c.hr { border-left:1px solid var(--border-strong); }

/* 1 배경 — 강사 가능 시간. 어디에 넣을 수 있는지가 이 화면의 핵심이라
   연한 색으로는 눈에 안 들어옵니다. 한 톤 진하게 씁니다. */
/* 테마를 따라가도록 --accent-soft 를 씁니다. 예전엔 --brand-100 을 직접
   써서 그린·네이비 테마에서도 이 칸만 브랜드색으로 남았습니다. */
.tt-c.on { background:var(--accent-soft); }

/* 2 반복 수업 — 가능 시간 위에 덮입니다 */
.tt-c.busy { background:var(--info-soft); box-shadow:inset 0 0 0 1px var(--info-line); }
.tt-c.busy.pause { background:var(--surface-3); }
.tt-name {
  position:absolute; top:5px; left:3px; z-index:2;
  font-size:11px; line-height:1.4; color:var(--info);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}

/* 3 그 주의 실제 회차 상태 */
.tt-c.done   { background:var(--surface-3); }
.tt-c.cancel {
  background:repeating-linear-gradient(45deg,
    var(--red-soft) 0 4px, transparent 4px 8px);
}
.tt-dot {
  position:absolute; right:2px; bottom:2px; z-index:2;
  width:5px; height:5px; border-radius:var(--r-full); background:var(--red);
}

/* 매칭 중인 학생의 희망 시간 */
.tt-c.want { box-shadow:inset 0 0 0 2px var(--amber); }

/* 담은 칸 */
.tt-c.pick { background:var(--accent); }
.tt-c.pick::after {
  content:''; position:absolute; inset:6px 5px;
  border-radius:var(--r-xs); background:var(--surface);
  opacity:.85;
}

/* 매칭 중이 아니라 누를 것이 없는 칸. 배경은 건드리지 않습니다 —
   건드리면 뒤에 오는 규칙이 아니라 이 규칙이 이겨서 가능 시간이 지워집니다. */
.tt-c.void { cursor:default; }

/* 시간표 범례 */
.ttkey { display:flex; flex-wrap:wrap; gap:14px; margin:12px 2px 0;
         font-size:12px; color:var(--ink-2); }
.ttkey span { display:inline-flex; align-items:center; gap:6px; }
.ttkey i {
  width:16px; height:14px; border-radius:var(--r-xs);
  border:1px solid var(--border); flex:none;
}

/* 요일 탭 */
.ttdays { display:flex; gap:6px; margin:0 0 14px; flex-wrap:wrap; }
.ttdays a {
  padding:7px 15px; border-radius:var(--r-sm); font-size:13px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
  text-decoration:none;
}
.ttdays a.on {
  background:var(--accent); border-color:var(--accent); color:var(--ink-on-brand);
  font-weight:600;
}

/* 담은 칸 목록 (매칭 중일 때 위에 붙습니다) */
.ttcart {
  position:sticky; top:0; z-index:6; margin:0 0 16px;
  border:1px solid var(--accent-line); background:var(--accent-soft);
  border-radius:var(--r-md); padding:13px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.ttcart .grow { flex:1 1 auto; }
.ttcart .cart-list { font-size:13px; color:var(--ink); margin-top:4px; }

/* 과목이 안 맞는 강사 줄. 숨기지는 않습니다 — 고르는 건 사람이 합니다 */
.tt tr.dim .tt-lab, .tt tr.dim .tt-c { opacity:.45; }
.tt tr.dim:hover .tt-lab, .tt tr.dim:hover .tt-c { opacity:1; }

/* 담은 칸이 없을 때의 발급 버튼 */
.btn.off, a.btn.off {
  background:var(--surface-3); color:var(--ink-3); border-color:var(--border);
  pointer-events:none; box-shadow:none;
}

/* ── 줌 인터뷰 시간 잡기 팝업 ──────────────────────────── */
/* 시간표를 그대로 쓰려고 iframe 을 띄웁니다. 격자가 1300px 가까이라
   좁은 화면에서는 가로로 스크롤됩니다. */
.ivdlg {
  border:0; padding:0; background:transparent;
  width:min(1340px, 96vw); max-width:none; max-height:92vh;
}
/* 화면을 덮는 막. 예전 청록 시절 값(초록빛 검정)이 남아 있어 버건디 화면
   위에 초록 막이 덮였습니다. 그림자(--sh-*)와 같은 따뜻한 색조로 맞춥니다. */
.ivdlg::backdrop { background:rgba(45, 25, 28, .45); }
.ivdlg iframe {
  display:block; width:100%; height:min(720px, 88vh);
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface);
}

/* 팝업 안쪽 (layout=blank 로 뜹니다) */
.ivpop { padding:18px 20px 16px; }
.ivhead {
  display:flex; align-items:flex-start; gap:14px;
  padding-bottom:13px; margin-bottom:13px; border-bottom:1px solid var(--border);
}
.ivhead .grow { flex:1 1 auto; }
.ivdays { display:flex; align-items:center; gap:8px; margin:0 0 12px; flex-wrap:wrap; }
.ivdays form { margin:0; }
.ivdays .ivdate { margin-left:6px; font-weight:600; font-size:13px; }

.ivbar {
  position:sticky; bottom:0; margin-top:14px; padding:13px 15px;
  border:1px solid var(--accent-line); background:var(--accent-soft);
  border-radius:var(--r-md);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.ivbar .grow { flex:1 1 auto; font-size:13px; }
.ivbar button[disabled] {
  background:var(--surface-3); color:var(--ink-3); border-color:var(--border);
  box-shadow:none; cursor:default;
}

/* 다른 학생의 인터뷰가 이미 잡힌 칸 */
.tt-c.book { background:var(--amber); opacity:.35; }

/* ═══════════════════════════════════════════════════════════════
   16. 색상 테마 — 마이페이지에서 고릅니다 (users.ui_theme)
   ---------------------------------------------------------------
   terra  버건디 & 딥 모브 (기본 · 첫 화면과 같은 색)
   forest 그린 & 샴페인
   navy   네이비 & 블루
   OS 다크 모드에서는 위 다크 토큰이 그대로 이깁니다 — 테마는
   밝은 화면에서만 색을 바꿉니다.

   ★ 색을 고칠 때 지켜야 할 두 가지 (2026-09-07 에 전수 점검했습니다)
     1) 연한 바탕끼리 색차(ΔE)가 3 이상이어야 합니다. 학부모 홈에서
        피드백 말풍선(--accent-soft) · 숙제 카드(--accent2-soft) ·
        안내(--surface-3) 가 나란히 놓이는데, 3 미만이면 한 덩어리로 보입니다.
     2) 연한 바탕 위 글자는 4.5:1 이상이어야 합니다.
        그린·네이비 테마의 --ink-3 가 2.9~3.7 밖에 안 나와 안내 문구가
        밝은 곳에서 안 보였습니다. 색은 그대로 두고 진하기만 올렸습니다.
   ═══════════════════════════════════════════════════════════════ */

/* 보조색(--accent2*) 기본값. 테마가 없거나 다크 모드면 성공색을 씁니다. */
:root {
  --accent2:var(--green);
  --accent2-ink:var(--green);
  --accent2-soft:var(--green-soft);
  --accent2-line:var(--green-line);
}

@media (prefers-color-scheme: light) {

  /* 버건디 — 한미ibt 기본색이자 첫 화면(home.css)과 같은 색입니다.
     ★ 이 묶음이 :root 를 이깁니다. 브랜드색을 바꾸려면 세 곳을 함께 고치세요:
        ① 여기 --accent          ② :root 의 --brand-600  ③ home.css 의 --terra
     칸 이름이 t-terra 인 것은 예전에 테라코타였기 때문입니다. 이름은 users.ui_theme
     에 저장된 값이라 그대로 두고 색만 바꿨습니다 (바꾸면 기존 회원 설정이 깨집니다). */
  body.t-terra {
    /* 바탕색은 형제를 가르는 가장 큰 신호입니다 (원장님: "탭의 색상과
       배경색이 다르게"). 예전 값(#FAF6F4)은 거의 흰색이라 옆에 놓고 봐야
       겨우 달랐습니다. 카드는 흰색 그대로라 바탕이 진해질수록 카드가 더
       또렷하게 떠오릅니다. */
    --bg:#F8EDEE;
    --surface:#FFFFFF; --surface-2:#FDFAF9; --surface-3:#F1EDEC;
    --surface-inset:#FBF7F6;
    --border:#E8DCDA; --border-2:#F2E9E7; --border-strong:#D6C4C1;
    --ink:#241D1F; --ink-2:#5C4F52; --ink-3:#6C5C60;
    --accent:#8B2635; --accent-ink:#6F1D29;
    --accent-soft:#F6E7E9; --accent-line:#E8C7CC;
    --ink-on-brand:#FFFFFF;
    /* 오류색은 버건디와 색상이 겹칩니다. 주황 쪽으로 24도 밀어 두었습니다 —
       빨간 경고와 브랜드 단추가 같은 색으로 보이면 안 됩니다. */
    --red:#B4451F; --red-soft:#F8EAE5; --red-line:#EBCEC4;
    --green:#2F6B4F; --green-soft:#EBF2EF; --green-line:#CFE0D8;
    --amber:#8A6220; --amber-soft:#F5F0E8; --amber-line:#E6DBC9;
    /* 보조색 — 딥 플럼.
       처음에는 첫 화면의 딥 모브(#5B3A44)를 그대로 썼는데, 버건디와 색상이
       8도밖에 차이가 안 나서 **연한 톤이 서로 구별되지 않았습니다.**
       학부모 홈에서 선생님 피드백 말풍선(--accent-soft)과 숙제 카드
       (--accent2-soft)가 나란히 놓이는데 같은 분홍 상자로 보였습니다.
       같은 와인 계열이면서 연한 톤이 확실히 갈리는 자주(285도)로 옮겼습니다.
       모든 연한색 짝의 색차(ΔE)가 3 이상인 것을 확인했습니다. */
    --accent2:#563A63; --accent2-ink:#473052;
    --accent2-soft:#EFECF1; --accent2-line:#DAD2DD;
    --focus:#8B2635; --focus-halo:rgba(139,38,53,.22);
    --sh-1:0 1px 2px rgba(70,45,50,.05);
    --sh-2:0 1px 2px rgba(70,45,50,.05), 0 4px 14px -4px rgba(70,45,50,.10);
    --sh-3:0 2px 6px -1px rgba(70,45,50,.08), 0 18px 36px -12px rgba(70,45,50,.20);
  }

  body.t-forest {
    --bg:#EAF2ED;
    --surface:#FFFFFF; --surface-2:#FBFAF5; --surface-3:#F3F1E8;
    --surface-inset:#F7F5EC;
    --border:#E9E6DB; --border-2:#F0EEE5; --border-strong:#D3CEBD;
    --ink:#272C27; --ink-2:#5E6659; --ink-3:#6C7268;
    --accent:#2F6B50; --accent-ink:#245741;
    --accent-soft:#E9F0E9; --accent-line:#C8DBC9;
    --ink-on-brand:#FFFFFF;
    --red:#AB4A3D; --red-soft:#F9E5E1; --red-line:#EBC6BE;
    --green:#2F7A54; --green-soft:#E7F1E9; --green-line:#C3DCCB;
    --amber:#816637; --amber-soft:#F2ECDE; --amber-line:#E0D3B4;
    --accent2:#A8875A; --accent2-ink:#7C6132;
    --accent2-soft:#F2ECDE; --accent2-line:#E3D6B9;
    --focus:#2F6B50; --focus-halo:rgba(47,107,80,.22);
    --sh-1:0 1px 2px rgba(60,70,55,.05);
    --sh-2:0 1px 2px rgba(60,70,55,.05), 0 4px 14px -4px rgba(60,70,55,.10);
    --sh-3:0 2px 6px -1px rgba(60,70,55,.08), 0 18px 36px -12px rgba(60,70,55,.20);
  }

  body.t-navy {
    --bg:#EBF0FB;
    --surface:#FFFFFF; --surface-2:#FAFBFD; --surface-3:#F1F4FA;
    --surface-inset:#F5F7FC;
    --border:#E3E8F1; --border-2:#EDF0F6; --border-strong:#C7D0E0;
    --ink:#1B2430; --ink-2:#4A5670; --ink-3:#667081;
    --accent:#3457D5; --accent-ink:#2843AE;
    --accent-soft:#E8EEFC; --accent-line:#C9D6F5;
    --ink-on-brand:#FFFFFF;
    --red:#BB4224; --red-soft:#FCE9E2; --red-line:#F2C9BA;
    --green:#0C7C55; --green-soft:#E2F5EC; --green-line:#B8E4CF;
    --amber:#96660F; --amber-soft:#FBF3E2; --amber-line:#EDDCB2;
    --accent2:#0F9D6A; --accent2-ink:#0C7C55;
    --accent2-soft:#E2F5EC; --accent2-line:#BCE3D0;
    --focus:#3457D5; --focus-halo:rgba(52,87,213,.22);
    --sh-1:0 1px 2px rgba(30,45,80,.05);
    --sh-2:0 1px 2px rgba(30,45,80,.05), 0 4px 14px -4px rgba(30,45,80,.10);
    --sh-3:0 2px 6px -1px rgba(30,45,80,.08), 0 18px 36px -12px rgba(30,45,80,.20);
  }
}

/* ── 어두운 화면에서의 테마색 ────────────────────────────────
   위의 테마 세 벌은 밝은 화면에서만 켜집니다. 그래서 어두운 화면에서는
   그린을 고르든 파랑을 고르든 전부 버건디(로즈)로 보였습니다 — 형제마다
   화면 색을 다르게 하는 것이 어두운 화면에서만 통째로 먹히지 않았습니다.

   바탕·카드·테두리·강조색을 함께 바꿉니다. 강조색만 바꾸면 초록 바탕 위에
   붉은 기가 도는 카드가 얹혀 어색합니다. 어두운 바탕에서는 진한 색이
   묻히므로 강조색은 밝은 쪽으로 뒤집고, 그 위 글자는 어두운 색이라야
   대비가 나옵니다. 글자색(--ink)은 세 테마가 함께 씁니다.

   ⚠ 상단 주소창 색은 layout.php 의 theme-color 가 따로 들고 있습니다.
   밝은 화면 값만 들어 있어 어두운 화면에서는 원래부터 안 맞습니다. */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) body.t-forest {
    --bg:#0C120F;
    --surface:#131B16; --surface-2:#17201A; --surface-3:#1F2B23;
    --surface-inset:#0F1712;
    --border:#26332B; --border-2:#1B241E; --border-strong:#3A4C41;
    --accent:#6FBF95; --accent-ink:#86CDA6;
    --accent-soft:#0F2519; --accent-line:#1E4231;
    --ink-on-brand:#08160F;
    --focus:#7FCBA3; --focus-halo:rgba(127,203,163,.26);
  }
  :root:not([data-theme="light"]) body.t-navy {
    --bg:#0D1017;
    --surface:#141824; --surface-2:#181D2A; --surface-3:#212838;
    --surface-inset:#101420;
    --border:#283042; --border-2:#1C2230; --border-strong:#3B4560;
    --accent:#8FAAF0; --accent-ink:#A6BCF4;
    --accent-soft:#131A2E; --accent-line:#26345A;
    --ink-on-brand:#0A1024;
    --focus:#9CB4F2; --focus-halo:rgba(156,180,242,.26);
  }
}
:root[data-theme="dark"] body.t-forest {
    --bg:#0C120F;
  --surface:#131B16; --surface-2:#17201A; --surface-3:#1F2B23;
  --surface-inset:#0F1712;
  --border:#26332B; --border-2:#1B241E; --border-strong:#3A4C41;
  --accent:#6FBF95; --accent-ink:#86CDA6;
  --accent-soft:#0F2519; --accent-line:#1E4231;
  --ink-on-brand:#08160F;
  --focus:#7FCBA3; --focus-halo:rgba(127,203,163,.26);
}
:root[data-theme="dark"] body.t-navy {
    --bg:#0D1017;
  --surface:#141824; --surface-2:#181D2A; --surface-3:#212838;
  --surface-inset:#101420;
  --border:#283042; --border-2:#1C2230; --border-strong:#3B4560;
  --accent:#8FAAF0; --accent-ink:#A6BCF4;
  --accent-soft:#131A2E; --accent-line:#26345A;
  --ink-on-brand:#0A1024;
  --focus:#9CB4F2; --focus-halo:rgba(156,180,242,.26);
}

/* ═══════════════════════════════════════════════════════════════
   17. 학부모 화면 — B안 구조 (라운드 카드 · 말풍선 · 진도 묶음)
   ═══════════════════════════════════════════════════════════════ */

.l-student { letter-spacing:-.01em; }

/* 카드: 테두리 대신 그림자로 뜹니다 */
.l-student .tile {
  border-color:transparent;
  border-radius:var(--r-xl);
  padding:18px 18px 16px; margin-bottom:14px;
  box-shadow:var(--sh-2);
}
.l-student .hero { border-color:transparent; }
.l-student .tile-label {
  font:700 15.5px/1.45 var(--sans); letter-spacing:-.015em;
  color:var(--ink); margin-bottom:7px;
}
.l-student .tile-top { margin-bottom:8px; }
.l-student .tile-label .who {
  display:block; font:500 12.5px/1.5 var(--sans); color:var(--ink-3);
  letter-spacing:0; margin-top:1px;
}

/* 자녀 칩: 고른 칩이 확실히 차오릅니다 */
.l-student .chips { gap:8px; }
.l-student .chip { padding:8px 17px; font-weight:600; font-size:13.5px; }
.l-student .chip.on { box-shadow:0 3px 8px var(--focus-halo); }

/* 성향 태그는 포인트색을 답니다 */
.l-student span.tag {
  background:var(--accent-soft); color:var(--accent-ink); font-weight:600;
}

/* 진도 줄 묶음 상자 */
.l-student .prog {
  background:var(--surface-3); border-radius:var(--r-lg);
  padding:5px 14px; margin:10px 0 2px;
}
.l-student .prog .tlrow { border-top-color:transparent; }
.l-student .prog .tlrow + .tlrow { border-top-color:var(--border-2); }
.l-student .prog .tlrow:first-of-type { padding-top:9px; }
.l-student .tlmark { border-color:transparent; background:var(--surface); }
.l-student .prog .tlmark.ok {
  background:var(--accent2-soft); border-color:transparent;
  color:var(--accent2-ink);
}
.l-student .test-score b { font:800 19px var(--sans); color:var(--accent); }

/* 선생님 코멘트: 말풍선 */
.l-student .fb-text {
  margin-top:12px; padding:12px 16px 13px;
  background:var(--accent-soft);
  border-radius:4px 18px 18px 18px;
  color:var(--ink);
}
.l-student .fb-text .t-name {
  display:block; font:700 11.5px var(--sans); color:var(--accent-ink);
  margin-bottom:4px; letter-spacing:0;
}
.l-student .fb-label { margin:14px 2px 0; }
.l-student .fb-label + .fb-text { margin-top:7px; }

/* 한글 번역 상자: 점선 카드 */
.l-student .fb-ko {
  border:1.5px dashed var(--accent-line); border-left-width:1.5px;
  background:var(--surface-2); border-radius:14px; padding:10px 14px;
}
.l-student .fb-ko-label { color:var(--accent2-ink); font-weight:700; }

/* 숙제 카드: 보조색으로 확실히 구분 */
.l-student .hwcard {
  background:var(--accent2-soft); border-radius:var(--r-lg);
  padding:12px 15px;
}
.l-student .hwcard-label { color:var(--accent2-ink); font-weight:700; }
.l-student .hwcard .badge.ok {
  background:var(--surface); color:var(--accent2-ink); border-color:transparent;
}
.l-student .hwcard .badge.mute,
.l-student .hwcard .badge.bad { border-color:transparent; }

/* 배지·안내 */
.l-student .badge { font-weight:650; padding:4px 11px; border-color:transparent; }
.l-student .badge.ok { background:var(--accent2-soft); color:var(--accent2-ink); }
.l-student .fb-keep-hint {
  background:var(--surface-3); border-radius:var(--r-lg);
  padding:11px 15px; margin-bottom:14px; color:var(--ink-2);
}
/* 학부모 화면의 .tile-top 은 아래 여백이 있어서, 접힌 카드에서는
   그 여백만 빈 자리로 남습니다. */
.l-student .fbcard:not([open]) > summary { margin-bottom:0; }

/* 녹화본: 알약 단추 */
.l-student .rec-row { margin-top:14px; }
.l-student .rec-link {
  display:inline-block; padding:8px 18px;
  border:1.5px solid var(--accent); border-radius:var(--r-full);
  background:var(--surface); color:var(--accent);
}
.l-student .rec-link:hover {
  text-decoration:none; background:var(--accent); color:var(--ink-on-brand);
}

/* 사진·버튼 라운드 */
.l-student .fbimgs img { border-radius:var(--r-md); }
.l-student .more-btn { border-radius:var(--r-full); }
.l-student .hero-btn { border-radius:var(--r-lg); }
.l-student .topbar .wordmark { color:var(--accent); }

/* 마이페이지 — 테마 고르기 */
.theme-pick { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.theme-pick label {
  display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:11px 13px; border:1.5px solid var(--border);
  border-radius:var(--r-md); background:var(--surface);
  transition:border-color var(--dur) var(--ease);
}
.theme-pick input { position:absolute; opacity:0; pointer-events:none; }
.theme-pick label:has(input:checked) {
  border-color:var(--accent); background:var(--accent-soft);
}
.theme-pick label:has(input:focus-visible) {
  outline:2px solid var(--focus); outline-offset:2px;
}
.theme-sw { display:flex; flex:none; }
.theme-sw i {
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--surface);
}
.theme-sw i + i { margin-left:-6px; }
.theme-name { font:600 14px var(--sans); flex:1; }
.theme-name .sub { font-weight:400; }
.tp-terra .a  { background:#8B2635; } .tp-terra .b  { background:#563A63; }
.tp-forest .a { background:#2F6B50; } .tp-forest .b { background:#A8875A; }
.tp-navy .a   { background:#3457D5; } .tp-navy .b   { background:#0F9D6A; }

/* ── 18. 강사 정산(Payout) ─────────────────────────────────
   노쇼 절반 지급 체크박스 — Absent 를 고른 줄에만 나타납니다. */
.attrow { flex-wrap:wrap; }
.noshow-wait {
  display:none; width:100%; align-items:flex-start; gap:8px;
  padding:9px 12px; border-radius:var(--r-sm);
  background:var(--amber-soft);
  border:1px dashed var(--amber-line);
  font:13px/1.5 var(--sans); color:var(--ink-2); cursor:pointer;
}
.attrow:has(input[value="absent_noshow"]:checked) .noshow-wait { display:flex; }
.noshow-wait input { margin-top:2px; accent-color:var(--accent); }
.noshow-wait em {
  display:block; font-style:normal; font-size:12px; color:var(--ink-3);
}

/* 정산 표 — 관리자·강사 공용 */
.payout-sum {
  display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px;
}
.payout-sum .stat b { font-size:18px; }
.amount-cell { font-weight:700; color:var(--ink); white-space:nowrap; }
.badge.draft     { background:var(--surface-3); color:var(--ink-2); }
.badge.confirmed { background:var(--accent-soft); color:var(--accent-ink); }
.badge.paid      { background:var(--green-soft); color:var(--green); }
.payout-actions { display:flex; gap:6px; justify-content:flex-end; }
.payout-actions form { display:inline; }

/* ── 19. 수강권 신청(pass request) ─────────────────────────
   학부모 신청 화면의 라디오 칩과 관리자 신청 목록. */
.hero-btn.alt {
  background:var(--surface); color:var(--accent-ink);
  border:1px solid var(--accent-line); margin-top:8px;
}
a.hero-btn.alt:hover { background:var(--accent-soft); }

.reqform .pick-h {
  font:600 13px var(--sans); color:var(--ink-2); margin:16px 0 7px;
}
.reqform .pick-h:first-of-type { margin-top:0; }
.pick { display:flex; flex-wrap:wrap; gap:6px; }
.pick label { cursor:pointer; }
.pick input { position:absolute; opacity:0; pointer-events:none; }
.pick span {
  display:inline-block; padding:7px 14px;
  border:1px solid var(--border); border-radius:var(--r-full);
  font:500 14px var(--sans); color:var(--ink-2);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pick span:hover { border-color:var(--accent-line); color:var(--accent-ink); }
.pick input:checked + span {
  background:var(--accent); border-color:var(--accent); color:var(--ink-on-brand);
}
.pick input:focus-visible + span { outline:2px solid var(--accent-line); }
.reqform textarea {
  width:100%; box-sizing:border-box; resize:vertical; font:14px/1.6 var(--sans);
}
/* ── 수강권 신청 — 아직 못 정하신 분께 (한 줄) ──────────
   예전에는 번호 붙인 두 칸이었는데 190px 을 먹으면서도 안 읽혔습니다. */
.guide-one {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:12px;
}
.guide-call {
  display:inline-flex; align-items:baseline; gap:6px; flex:none;
  padding:9px 16px; border-radius:var(--r-full);
  background:var(--accent); color:var(--ink-on-brand);
  font:600 13.5px var(--sans); text-decoration:none;
}
.guide-call b { font-weight:700; letter-spacing:.01em; }
.guide-call:hover { background:var(--accent-ink); color:var(--ink-on-brand); }
.guide-note { font:13px var(--sans); color:var(--ink-3); }

/* 관리자 노트 — 한 줄씩 쌓입니다 (작성일·작성자·내용) */
.notes-wrap { margin-top:12px; }
.notes { table-layout:auto; }
.notes th, .notes td { vertical-align:top; }
.notes .nowrap { white-space:nowrap; width:1%; }
/* 내용이 남는 자리를 다 쓰게 합니다 — 안 그러면 글이 한 글자씩 접힙니다 */
.notes .note-body { white-space:pre-line; line-height:1.65; width:100%; min-width:220px; }
.notes td:last-child { width:1%; white-space:nowrap; }
.notes .sub { font-size:11.5px; }

.memo-form textarea {
  width:100%; box-sizing:border-box; resize:vertical;
  padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-sm);
  font:13.5px/1.7 var(--sans); color:var(--ink); background:var(--surface);
}
.memo-form textarea:focus {
  outline:none; border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-halo);
}
.memo-bar { display:flex; gap:7px; margin-top:8px; }

/* ── 학생 이야기 (관리자 학생 화면) ─────────────────────
   학부모가 여러 화면에서 남긴 것을 한 자리에 날짜 순으로 모읍니다.
   상담하면서 목표를 눈으로 보라고 만든 자리입니다. */
.story-now {
  display:grid; gap:6px; margin-bottom:12px;
  padding:11px 13px; border-radius:var(--r-sm);
  background:var(--accent-soft); border:1px solid var(--accent-line);
}
.story-now div { display:flex; gap:9px; align-items:baseline; }
.story-now span {
  flex:none; width:76px; font:600 11.5px var(--sans); color:var(--accent-ink);
  opacity:.8;
}
.story-now b { font:600 13.5px/1.5 var(--sans); color:var(--ink); }

.story { display:flex; flex-direction:column; }
.story-item { padding:10px 0; border-top:1px solid var(--border-2); }
.story-item:first-child { border-top:0; padding-top:2px; }
.story-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.story-kind {
  padding:2px 8px; border-radius:var(--r-full);
  font:600 11px var(--sans);
  background:var(--surface-3); color:var(--ink-2);
}
.story-kind.k-req { background:var(--accent-soft);  color:var(--accent-ink); }
.story-kind.k-lt  { background:var(--accent2-soft); color:var(--accent2-ink); }
.story-kind.k-voc { background:var(--info-soft);    color:var(--info); }
.story-kind.k-con { background:var(--green-soft);   color:var(--green); }
.story-at { font-size:11.5px; color:var(--ink-3); }
.story-line { font:13px/1.65 var(--sans); color:var(--ink-2); }
.story-line b { color:var(--ink-3); font-weight:600; margin-right:3px; }
.story-note {
  margin-top:5px; padding:8px 10px; border-radius:var(--r-sm);
  background:var(--surface-3); color:var(--ink-2);
  font:13px/1.65 var(--sans); white-space:pre-line;
}

/* 레벨테스트 결과 — 학부모 피드백 화면 맨 위.
   선생님이 남긴 결과를 학부모가 볼 곳이 여기 말고는 없습니다. */
.lt-result { border:1px solid var(--accent-line); }
.ltr-row {
  display:flex; gap:12px; padding:10px 0;
  border-top:1px solid var(--border-2);
}
.ltr-row:first-of-type { border-top:0; padding-top:4px; }
.ltr-k {
  flex:none; width:82px;
  font:600 12.5px/1.5 var(--sans); color:var(--ink-3);
}
.ltr-v { flex:1; min-width:0; font:13.5px/1.6 var(--sans); color:var(--ink-2); }
.ltr-v b { color:var(--accent-ink); font-weight:700; margin-right:5px; }
.ltr-v .quiet { margin-right:6px; }
.ltr-note {
  margin-top:5px; padding:8px 11px; border-radius:var(--r-sm);
  background:var(--surface-3); color:var(--ink-2); font-size:13px; line-height:1.65;
}
.ltr-note b { color:var(--ink); margin-right:4px; }
.ltr-book { margin-top:5px; font-size:12.5px; color:var(--ink-3); }

/* 시간 칸에 선생님 이름 함께 — 누구를 만날지 알고 고르시게 */
.lt-slot-ins span { display:block; line-height:1.35; }
.lt-slot-ins b  { display:block; font:600 14px var(--sans); }
.lt-slot-ins em {
  display:block; margin-top:1px; font-style:normal;
  font:400 11.5px var(--sans); opacity:.8;
}

/* 단어 진단 결과 — 강사 화면. 레벨을 모른 채 줌에 들어가지 않도록
   시각적으로 눈에 띄게 둡니다. */
.vplace {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  margin-top:6px; padding:7px 11px; border-radius:var(--r-sm);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  font:13px var(--sans); color:var(--accent-ink);
}
.vplace b { font:700 14px var(--sans); }
.vplace.none { background:var(--surface-3); border-color:var(--border); }

/* ── 레벨테스트 진행 표시 ──────────────────────────────
   1 단어진단 → 2 신청서 → 3 확정. 지금 어디쯤인지 보이게 합니다. */
.lt-flow {
  display:flex; gap:6px; margin-bottom:14px;
}
.lt-flow span {
  flex:1; min-width:0; display:flex; align-items:center; gap:6px; justify-content:center;
  padding:9px 6px; border-radius:var(--r-sm);
  background:var(--surface-3); color:var(--ink-3);
  font:600 12.5px var(--sans);
}
.lt-flow span b {
  width:19px; height:19px; border-radius:var(--r-full); flex:none;
  background:var(--border-strong); color:var(--surface);
  font:700 11px/19px var(--sans); text-align:center;
}
/* 끝난 단계 — 완료색에 체크표시. 지금 할 차례와 **다른 색**이어야 합니다.
   예전에는 둘 다 같은 강조색이라 네 칸이 한 덩어리로 보였습니다. */
.lt-flow span.done   { background:var(--accent2-soft); color:var(--accent2-ink); }
.lt-flow span.done b { background:var(--accent2); color:var(--surface); font-size:12px; }

/* 지금 하실 차례 — 굵은 테두리로 한 칸만 튀어나오게 */
.lt-flow span.now {
  background:var(--accent-soft); color:var(--accent-ink);
  box-shadow:inset 0 0 0 2px var(--accent);
}
.lt-flow span.now b { background:var(--accent); color:var(--ink-on-brand); }

/* 눈으로만 알 수 있는 것은 읽어 주는 기계에도 남깁니다 */
.sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── 단계 카드도 함께 ────────────────────────────────────
   진행 줄만 칠하면 아래로 내려갈수록 어느 카드가 끝난 것인지 다시
   헷갈립니다. 끝난 카드는 배경까지 완료색으로 눕히고, 지금 하실 카드는
   테두리를 세워 올립니다. */
.tile.is-done {
  background:var(--accent2-soft);
  border-color:var(--accent2-line);
  border-left:3px solid var(--accent2);
  border-top-left-radius:var(--r-sm); border-bottom-left-radius:var(--r-sm);
}
.tile.is-now {
  border-color:var(--accent-line);
  border-left:3px solid var(--accent);
  border-top-left-radius:var(--r-sm); border-bottom-left-radius:var(--r-sm);
  box-shadow:var(--sh-2);
}

.tile-locked { opacity:.62; }
.lt-hint {
  margin:2px 0 4px; padding:10px 12px; border-radius:var(--r-sm);
  background:var(--surface-3); font:13px/1.65 var(--sans); color:var(--ink-2);
}
.lt-go {
  display:block; text-align:center; text-decoration:none; margin-top:10px;
}

/* ── 3단계 · 내 신청 내역 한 줄 ──────────────────────────
   왼쪽은 누구·언제, 오른쪽은 상태와 줌 링크입니다.

   🔴 예전에는 화면 안에서 style="display:flex; justify-content:space-between"
   에 오른쪽 칸만 flex:none 이었습니다. 그러면 오른쪽이 절대 줄지 않아서,
   "James Hendrick 선생님 · 줌으로 참여하기 · 예약 확정" 처럼 길어지는 순간
   왼쪽이 **가장 긴 낱말 너비까지** 짓눌립니다. 휴대폰에서 학생 이름이
   한 줄에 한 낱말씩 다섯 줄로 흘러내렸습니다.

   그래서 좌우로 벌리지 않고 **위아래로 쌓습니다.** 이 카드가 앉는 칸은
   넓은 화면에서도 390px 남짓이라, 좌우로 두면 어느 화면에서든 한쪽이
   짓눌립니다. 쌓으면 누구·언제가 한 줄, 상태가 그 아래 한 줄로 끝납니다. */
.lt-my { padding:6px 0; font:13px/1.6 var(--sans); }
.lt-my + .lt-my { border-top:1px solid var(--border); }
.lt-my-who  { display:block; }
.lt-my-when { display:block; margin-top:2px; color:var(--ink-3); }
.lt-my-when.on { color:var(--accent); font-weight:600; }

/* ── 수강권 신청 — 번호가 매겨진 단계 ────────────────────
   한 화면에 항목이 열 개 넘게 늘어서면 무엇을 골랐는지 안 보입니다.
   단계마다 카드로 끊고 번호를 붙입니다. 번호는 CSS 가 셉니다 —
   1:1 과 그룹은 묻는 것이 달라서, 숨겨진 단계는 세지 않습니다
   (display:none 인 요소는 counter 를 올리지 않습니다). */
.steps { counter-reset:step; background:none; padding:0; border:none; box-shadow:none; }
.step {
  counter-increment:step;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:13px 14px 14px; margin-bottom:9px;
}
.step-h {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 9px; font:600 14.5px var(--sans); color:var(--ink);
}
.step-h::before {
  content:counter(step);
  flex:none; width:21px; height:21px; border-radius:var(--r-full);
  background:var(--accent); color:var(--ink-on-brand);
  font:600 12px/21px var(--sans); text-align:center;
}
.step-sub {
  font:400 12px var(--sans); color:var(--ink-3);
  padding:2px 7px; border-radius:var(--r-full); background:var(--surface-2);
}
.step-tip { margin-top:10px; font:12px/1.6 var(--sans); color:var(--ink-3); }
/* 빈자리가 '어느 날짜 기준' 인지 — 날짜를 바꾸면 이 줄이 바뀝니다 */
.step-tip .asof { display:block; margin-top:4px; font-weight:700;
  color:var(--brand, #1f5fd0); }
.step-empty {
  padding:16px; border-radius:var(--r-sm); text-align:center;
  background:var(--surface-2); font:13px/1.7 var(--sans); color:var(--ink-2);
}
/* 홈의 '우리 아이 배움' 이 비어 있을 때, 안내 칸과 바로 아래 카드가 맞붙어
   한 덩어리로 보였습니다. 카드 사이 간격(14px)과 같게 띄웁니다.
   신청서 쪽 .step-empty 는 단계 안에 있어 건드리지 않습니다. */
.step-empty + .home-grid { margin-top:14px; }

/* 고르는 칩 — 손가락으로 누를 만큼 큼직하게 */
.pick.big span { padding:8px 14px; font-size:14px; }
.pick.col { flex-direction:column; }
.pick.col span { display:block; text-align:center; padding:10px 8px; }

/* 기간 · 횟수 · 길이 — 셋이 한 묶음이라 나란히 둡니다 */
.tri { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.tri-h { font:600 12px var(--sans); color:var(--ink-3); margin-bottom:7px; }

/* 요일과 시간 — 요일을 눌러 켜고, 켜진 요일만 시각을 고릅니다 */
/* 월~금 다섯 칸. 넓으면 한 줄에 다섯, 좁으면 알아서 접힙니다 —
   칸 수를 못 박으면 5개일 때 마지막 줄에 하나만 남아 어색해집니다. */
.daygrid {
  display:grid; gap:8px;
  /* 3 + 2 로 놓습니다. 다섯 칸을 한 줄에 넣으면 칸이 67px 이 되어
     시간 드롭다운의 '16:00' 이 잘립니다. 넓은 화면에서는 한 줄로 폅니다. */
  grid-template-columns:repeat(3, 1fr);
}
@media (min-width:560px) { .daygrid { grid-template-columns:repeat(5, 1fr); } }
.daycell {
  border:1px solid var(--border); border-radius:var(--r-sm);
  padding:5px; text-align:center; background:var(--surface);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.daychip {
  display:block; width:100%; padding:4px 0; border:0; border-radius:var(--r-sm);
  background:none; cursor:pointer;
  font:600 15px var(--sans); color:var(--ink-3);
}
.daytime {
  width:100%; margin-top:6px; padding:5px 2px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  font:13px var(--sans); color:var(--ink-3); background:var(--surface-2);
}
.daycell.on { border-color:var(--accent); background:var(--accent-soft); }
.daycell.on .daychip { color:var(--accent-ink); }
.daycell.on .daytime {
  color:var(--ink); background:var(--surface); border-color:var(--accent-line);
  font-weight:600;
}

/* 환불 조건 팝업 — 결제 전에 읽을 수 있게 (약관법 제3조 설명 의무) */
.refund-link { margin:12px 0 0; text-align:center; }
.refund-link a {
  font:600 13px var(--sans); color:var(--ink-2);
  text-decoration:underline; text-underline-offset:3px;
}
.refund-link a:hover { color:var(--accent-ink); }

.modal { /* 학부모 화면에도 팝업을 씁니다 — 첫 화면과 같은 모양 */
  width:min(520px, calc(100vw - 28px));
  border:0; border-radius:var(--r-lg); padding:26px 24px 22px;
  background:var(--surface); color:var(--ink); box-shadow:var(--sh-3);
}
.modal::backdrop { background:rgba(45,25,28,.45); }
.modal h3 { margin:0 0 6px; font:700 20px var(--sans); }
.modal .modal-lead { margin:0 0 18px; font:14px var(--sans); color:var(--ink-3); }
.modal .modal-x { position:absolute; top:12px; right:12px; margin:0; }
.modal .modal-x button {
  width:32px; height:32px; border:0; border-radius:var(--r-full);
  background:var(--surface-3); color:var(--ink-3);
  font:20px/32px var(--sans); cursor:pointer;
}
.modal .modal-note {
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--border-2);
  font:12.5px/1.7 var(--sans); color:var(--ink-3);
}

.rf-block { margin-bottom:18px; }
.rf-block:last-of-type { margin-bottom:0; }
.rf-h {
  font:700 14.5px var(--sans); color:var(--accent-ink);
  padding-bottom:6px; margin-bottom:8px;
  border-bottom:1px solid var(--accent-line);
}
.rf-block > p { margin:0; font:14px/1.7 var(--sans); color:var(--ink-2); }
.rf-list { margin:0; padding-left:17px; }
.rf-list li {
  font:13.5px/1.7 var(--sans); color:var(--ink-2); margin-bottom:8px;
}
.rf-list li:last-child { margin-bottom:0; }
.rf-list b { color:var(--ink); }
.rf-formula {
  margin-top:6px; padding:10px 12px; border-radius:var(--r-sm);
  background:var(--surface-3); font:13px/1.8 var(--mono, var(--sans));
  color:var(--ink);
}
.rf-sub {
  margin-top:5px; padding-left:2px;
  font:13px/1.75 var(--sans); color:var(--ink-3);
}

/* 결제 완료 팝업 — 무엇이 끝났고 다음에 무슨 일이 있는지 남깁니다 */
.paidbox {
  width:min(400px, calc(100vw - 32px));
  border:0; border-radius:var(--r-lg); padding:26px 24px 22px;
  background:var(--surface); color:var(--ink); text-align:center;
  box-shadow:var(--sh-3);
}
.paidbox::backdrop { background:rgba(45,25,28,.45); }
.paid-mark {
  width:46px; height:46px; margin:0 auto 12px; border-radius:var(--r-full);
  background:var(--green-soft); color:var(--green);
  font:700 24px/46px var(--sans);
}
.paidbox h2 { margin:0 0 8px; font:700 19px var(--sans); }
.paidbox p { margin:0 0 18px; font:14px/1.7 var(--sans); color:var(--ink-2); }
.paidbox p b { color:var(--accent-ink); }
.paidbox form { margin:0; }
.paidbox .hero-btn { width:100%; }

/* 돈이 걸린 일이 대기 중일 때 대시보드 카드 하나만 눈에 띄게 합니다.
   여러 장을 동시에 물들이면 결국 아무것도 안 띕니다. */
.card-hot { border-color:var(--amber-line); background:var(--amber-soft); }
.card-hot .card-foot b { color:var(--amber); }

/* ── 환불 신청 (관리자 화면) ────────────────────────────
   학부모가 쓴 사유서와 회차 계산 근거를 함께 봅니다.
   근거가 화면에 없으면 관리자가 감으로 셈하게 됩니다. */
.rf { padding-bottom:18px; }
.rf-meta { margin:2px 0 12px; font:12.5px/1.7 var(--sans); color:var(--ink-3); }
.rf-body {
  margin:0 0 14px; padding:13px 15px;
  border-left:3px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--surface-3);
  font:14.5px/1.75 var(--sans); color:var(--ink); white-space:pre-line;
}
.rf-acc {
  margin:0 0 14px; font:13px var(--sans); color:var(--ink-2);
  padding:9px 12px; border-radius:var(--r-md);
  background:var(--amber-soft); border:1px solid var(--amber-line);
}
.rf-calc {
  margin-bottom:14px; padding:13px 15px;
  border:1px solid var(--line); border-radius:var(--r-md);
}
.rf-calc-h {
  font:600 12px var(--sans); letter-spacing:.04em;
  color:var(--ink-3); margin-bottom:8px;
}
.rf-tab { width:100%; border-collapse:collapse; font:13.5px var(--sans); }
.rf-tab th {
  text-align:left; font-weight:400; color:var(--ink-3);
  padding:5px 12px 5px 0; white-space:nowrap; width:1%; vertical-align:top;
}
.rf-tab td { padding:5px 0; color:var(--ink); font-variant-numeric:tabular-nums; }
.rf-tab .sub { color:var(--ink-3); font-size:12.5px; margin-left:5px; }
.rf-sum th, .rf-sum td {
  border-top:1px solid var(--line); padding-top:9px;
}
.rf-sum td b { color:var(--accent-ink); font-size:16px; }
.rf-legal {
  margin:9px 0 0; font:12.5px/1.65 var(--sans); color:var(--ink-3);
}
.rf-legal b { color:var(--ink-2); }
.rf-warn {
  margin:11px 0 0; padding:9px 11px; border-radius:var(--r-md);
  background:var(--amber-soft); border:1px solid var(--amber-line);
  font:12.5px/1.65 var(--sans); color:var(--ink-2);
}
.rf-act { margin:0; }
.rf-l { display:block; margin-bottom:6px; font:600 13px var(--sans); }
.rf-l .sub { font-weight:400; color:var(--ink-3); margin-left:5px; }
.rf-act textarea {
  width:100%; padding:10px 12px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  font:14px/1.6 var(--sans); color:var(--ink); resize:vertical;
}
.rf-btns { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.rf-btns .link { margin-left:auto; font-size:13px; }

/* 우리 쪽에서 확인할 수 없는 항목 (줌 계정 설정처럼 사람이 켜는 것) */
.checkrow.info .check-mark { background:var(--accent-soft); color:var(--accent-ink); }

/* 회사 제출용 인쇄 링크 — 눈에 띄되 연장·신청 단추를 밀어내지 않게 */
.printlinks { display:flex; gap:14px; margin-top:6px; flex-wrap:wrap; }
.printlinks .link { font-size:12.5px; color:var(--ink-3); }
.printlinks .link:hover { color:var(--accent); }

/* ── 글자로 적는 설정 ───────────────────────────────────
   사업자등록번호·계좌번호처럼 원장님이 직접 넣으시는 값들입니다. */
.txtset { margin-bottom:26px; }
.txtset-g {
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px 6px; margin:0 0 14px;
}
.txtset-g legend {
  padding:0 8px; font:600 13px var(--sans); color:var(--ink-2);
}
.txtrow { display:block; margin-bottom:14px; }
.txtrow-l { display:block; font:600 13px var(--sans); color:var(--ink); margin-bottom:5px; }
.txtrow input {
  width:100%; box-sizing:border-box; padding:9px 12px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  font:15px var(--sans); color:var(--ink); background:var(--surface);
}
.txtrow-h { display:block; margin-top:4px; font:12px/1.6 var(--sans); color:var(--ink-3); }
@media (min-width:640px) {
  .txtset-g { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
  .txtset-g legend { grid-column:1 / -1; }
}
.taxnow {
  margin:0 0 14px; padding:12px 15px; border-radius:var(--r-md);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  font:13.5px/1.75 var(--sans); color:var(--ink-2);
}
.taxnow b { color:var(--accent-ink); }
.taxnow .sub { display:block; margin-top:4px; color:var(--ink-3); font-size:12.5px; }

/* 관리자 교재 화면의 구매 링크 칸 */
.buyform { margin:0 0 20px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.buy-l { display:block; margin-bottom:8px; font:600 13px var(--sans); }
.buy-l .sub { font-weight:400; color:var(--ink-3); margin-left:5px; }
.buy-row { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.buy-row input { flex:1; min-width:220px; padding:9px 12px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  font:14px var(--sans); color:var(--ink); background:var(--surface); }
.buy-cover { width:44px; height:auto; border-radius:4px; flex:none; }

/* ── 회원 탈퇴 ──────────────────────────────────────────
   눈에 잘 안 띄는 자리에 조용히 두되, 길은 열어 둡니다 —
   찾을 수 없으면 그것도 문제입니다. */
.wd { margin-top:22px; }
.wd summary {
  cursor:pointer; padding:10px 0; list-style:none;
  font:13px var(--sans); color:var(--ink-3); text-align:center;
}
.wd summary::-webkit-details-marker { display:none; }
.wd summary:hover { color:var(--ink-2); text-decoration:underline; }
.wd-body {
  padding:16px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface);
}
.wd-body p { margin:0 0 10px; font:13.5px/1.75 var(--sans); color:var(--ink-2); }
.wd-body p.sub { font-size:12.5px; color:var(--ink-3); }
.wd-warn {
  margin:0 0 12px; padding:10px 12px; border-radius:var(--r-md);
  background:var(--amber-soft); border:1px solid var(--amber-line);
  font:13px var(--sans); color:var(--amber);
}
.wd-l { display:block; margin-bottom:6px; font:600 13px var(--sans); }
.wd-l .sub { font-weight:400; color:var(--ink-3); margin-left:5px; }
.wd-give { display:flex; gap:8px; align-items:flex-start; margin:12px 0; cursor:pointer; }
.wd-give input { margin-top:3px; accent-color:var(--red); }
.wd-give span { font:13px var(--sans); color:var(--ink-2); }
.wd form .btn-del { width:100%; margin-top:4px; }

/* ── 사유를 적는 메시지창 ───────────────────────────────
   원장님 요청 — 테두리를 또렷하게 둘러서 '여기에 적는 칸' 임을 한눈에
   알게 합니다. 예전에는 배경과 색이 거의 같아 설명글로 보고 지나치는
   분이 계셨습니다. */
.msgbox {
  border:2px solid var(--accent-line); border-radius:var(--r-md);
  background:var(--surface); overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
.msgbox:focus-within { border-color:var(--accent); }
.msgbox textarea {
  display:block; width:100%; border:0; background:transparent;
  padding:12px 13px; resize:vertical; outline:none;
}
.msgbox textarea::placeholder { color:var(--ink-3); line-height:1.9; }
.msgbox-tip {
  padding:8px 13px; border-top:1px dashed var(--accent-line);
  background:var(--accent-soft);
  font:12px/1.65 var(--sans); color:var(--accent-ink);
}

/* ── 인쇄물 (수강 증명서 · 출석부) ──────────────────────
   회사나 기관에 제출하는 종이입니다. 화면을 그대로 인쇄하면 메뉴와 단추까지
   나와서 못 냅니다 — 인쇄만을 위한 화면을 따로 두고, 인쇄할 때는 흰 종이에
   검은 글씨로 나가게 합니다. */
body.l-print { background:#fff; color:#111; }
.sheet {
  max-width:760px; margin:32px auto; padding:36px 40px;
  background:#fff; color:#111;
  font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
.sheet-wide { max-width:900px; }
.sheet-h {
  margin:0 0 28px; text-align:center;
  font:700 26px/1.3 var(--serif, serif); letter-spacing:.35em;
  padding-left:.35em;   /* 자간 때문에 오른쪽으로 밀리는 것을 되돌립니다 */
}
.sheet-t { width:100%; border-collapse:collapse; margin-bottom:26px; }
.sheet-t th, .sheet-t td {
  border:1px solid #333; padding:11px 13px; font-size:14.5px; line-height:1.6;
  text-align:left; vertical-align:top;
}
.sheet-t th { width:110px; background:#f2f2f2; font-weight:600; white-space:nowrap; }
.sheet-t-top th { width:88px; }
.sheet-sub { color:#666; font-size:13px; }

.sheet-roll { width:100%; border-collapse:collapse; margin-bottom:24px; font-size:13.5px; }
.sheet-roll th, .sheet-roll td { border:1px solid #333; padding:7px 9px; }
.sheet-roll th { background:#f2f2f2; font-weight:600; }
.sheet-roll .c { text-align:center; }
.sheet-roll .ab { color:#b4451f; font-weight:600; }
.sheet-roll .wait { color:#777; }
.sheet-empty { text-align:center; color:#777; padding:30px 0; }

.sheet-say  { margin:34px 0 0; text-align:center; font-size:15.5px; }
.sheet-date { margin:16px 0 26px; text-align:center; font-size:14.5px; }
.sheet-sign { text-align:center; line-height:1.9; }
.sheet-org  { font:700 19px var(--serif, serif); letter-spacing:.06em; }
.sheet-seal { color:#888; font-size:13px; }
.sheet-fine { margin-top:10px; color:#555; font-size:12.5px; line-height:1.7; }
/* ── 결제 영수증 ────────────────────────────────────────
   원장님(2026-10-09): 옛 사이트 영수증과 같은 모양으로.
   파란 띠 제목 · 구역 제목 · 회색 이름칸 + 흰 값칸.
   종이로 나갈 것이라 색은 한 가지(파랑)만 쓰고 나머지는 회색조로 둡니다. */
.rcpt .rcpt-bar {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  background:#2f7fd4; color:#fff; padding:14px 18px; margin:0 0 22px;
}
.rcpt .rcpt-bar h1 {
  margin:0; font:700 20px/1.3 var(--sans); letter-spacing:.04em; color:#fff;
}
.rcpt .rcpt-no { font:600 12.5px var(--mono); color:#dbeafe; white-space:nowrap; }
.rcpt .rcpt-sec {
  margin:22px 0 8px; padding-left:11px; position:relative;
  font:700 15px/1.4 var(--sans); color:#1f1f1f; letter-spacing:.01em;
}
.rcpt .rcpt-sec::before {
  content:""; position:absolute; left:0; top:.35em;
  width:4px; height:.95em; background:#2f7fd4;
}
.rcpt .sheet-t { margin-bottom:0; }
.rcpt .sheet-t th { width:124px; }
.rcpt .rcpt-amt { font-size:17px; }
.rcpt .rcpt-st {
  display:inline-block; padding:2px 9px; border-radius:3px;
  font-size:12.5px; font-weight:700;
}
.rcpt .rcpt-st.ok { background:#e7f1fb; color:#1b5fa8; border:1px solid #bcd9f3; }
.rcpt .rcpt-st.no { background:#f3f3f3; color:#666;    border:1px solid #ddd; }
.rcpt .rcpt-wait { color:#666; }

/* 영수증 아래 안내 — 세금계산서와 혼동하지 않도록 작게 답니다 */
.sheet-note {
  margin:30px 0 0; padding-top:12px; border-top:1px solid #ddd;
  color:#666; font-size:12px; line-height:1.7;
}

.print-bar {
  max-width:760px; margin:0 auto 40px; text-align:center;
  display:flex; gap:14px; align-items:center; justify-content:center;
}
.print-bar .hero-btn { width:auto; padding:10px 28px; margin:0; }

/* ── 종이로 나갈 때 ──────────────────────────────────────
   원장님(2026-10-09): "인쇄부분은 도큐먼트로 인쇄되게 마진이 문서 폼에
   맞추어서 제대로 구성해줘."

   예전에는 `.sheet { padding:0 }` 이라 @page 여백에만 기댔습니다. 그런데
   브라우저 인쇄 창에서 **여백을 '없음'** 으로 두시면 @page 가 무시되어
   표가 종이 가장자리에 그대로 붙습니다 — 잘려 나오기도 합니다.
   그래서 **종이 안쪽에도** 여백을 둡니다. 두 가지가 겹쳐도 과하지 않게
   @page 는 조금 줄였습니다 (16mm + 6mm ≒ 보통 문서 여백). */
@media print {
  .no-print { display:none !important; }
  /* 🔴 원장님(2026-10-12): "인쇄가 한 장에 다 나와야 하는데 페이지가 밀려"
     A4 한 장(297mm)에 들어가게 여백을 전반적으로 조였습니다.
     16/14mm → 12/13mm. 이 정도면 제본·편철에도 지장이 없습니다. */
  @page { size:A4; margin:12mm 13mm; }

  body.l-print { background:#fff; }
  .sheet {
    max-width:none; margin:0 auto; padding:0;   /* 화면용 32px 바깥여백 제거 */
    font-size:10.5pt; line-height:1.45;
  }
  .sheet-h { font-size:19pt; margin-bottom:7mm; }
  .sheet-t { margin-bottom:0; }
  .sheet-t th, .sheet-t td { font-size:10pt; padding:1.9mm 2.6mm; line-height:1.4; }

  /* 회색 칸은 기본값으로 인쇄에서 빠집니다 — 표가 밋밋해지지 않게 켭니다 */
  .sheet-t th, .sheet-roll th,
  .rcpt .rcpt-bar, .rcpt .rcpt-sec::before, .rcpt .rcpt-st {
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .rcpt .rcpt-bar { margin-bottom:5mm; padding:3mm 4mm; }
  .rcpt .rcpt-bar h1 { font-size:15pt; }
  .rcpt .rcpt-sec { margin:4.5mm 0 1.6mm; font-size:10.5pt; }
  .rcpt .rcpt-amt { font-size:12.5pt; }
  /* 표·서명·도장이 두 장으로 갈리면 서류로 못 씁니다 */
  .sheet-t, .sheet-sign, .sheet-say, .sheet-date { page-break-inside:avoid; }
  .sheet-say  { margin-top:7mm; font-size:11pt; }
  .sheet-date { margin:3mm 0 5mm; font-size:10.5pt; }
  .sheet-sign { line-height:1.6; }
  .sheet-org  { font-size:14pt; }
  .sheet-fine { margin-top:4mm; font-size:9pt; line-height:1.5; }
  .sheet-note { margin-top:6mm; }
  /* 두 장으로 넘어갈 바에는 글자를 줄여서라도 한 장에 — 서류는 한 장이
     기본이고, 두 장이면 뒷장에 도장만 달랑 찍혀 나갑니다. */
  .sheet-sub { font-size:9pt; }

  /* 🔴 빈 2쪽 막기 (원장님 2026-10-12: "데스크탑은 아직 수정이 안된것 같아"
     — 1쪽에 내용이 다 들어갔는데도 백지 2쪽이 따라 나왔습니다).

     내용 **뒤쪽에 보이지 않는 높이**가 조금이라도 남으면 브라우저가 장을
     하나 더 만듭니다. 사파리가 특히 그렇습니다. 그래서 세 가지를 다 막습니다.
       ① 문서 전체 높이를 내용만큼으로 (100vh 같은 값이 끼어들지 못하게)
       ② 맨 끝 요소의 아래 여백을 0 으로 — 1mm 가 남아도 장이 생깁니다
       ③ 서류 뒤에서 장을 넘기지 않게 */
  html, body.l-print {
    height:auto !important; min-height:0 !important;
    overflow:visible !important; margin:0 !important; padding:0 !important;
  }
  body.l-print > *:last-child,
  .sheet > *:last-child,
  .sheet-sign, .sheet-fine { margin-bottom:0 !important; }
  .sheet { page-break-after:avoid; break-after:avoid; }
  /* 가로로 삐져나가도 장이 하나 더 생깁니다 */
  .sheet, .sheet-t, .rcpt .rcpt-bar { max-width:100% !important; }
  /* 출석부는 줄이 많아 갈릴 수 있습니다 — 줄 하나는 안 쪼개지게 */
  .sheet-roll tr { page-break-inside:avoid; }
  .sheet-roll thead { display:table-header-group; }   /* 쪽마다 머리줄 반복 */
}

/* 현금영수증 — 계좌로 받은 돈만 대상입니다. 카드는 매출전표가 증빙입니다. */
.cashrcpt { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.cashrcpt .pick { margin-bottom:2px; }
.cashtag {
  display:inline-block; margin-top:3px; padding:2px 8px;
  border-radius:var(--r-full); background:var(--accent-soft);
  color:var(--accent-ink); font-size:11.5px;
}
.cashwait { border-color:var(--accent-line); background:var(--accent-soft); }
.cashwait .bankwait-h { background:transparent; }

/* 입금 대기 — 통장과 대조하는 목록. 결제 200줄에 섞이면 못 찾습니다. */
.bankwait {
  margin-bottom:22px; padding:14px 16px 6px;
  border:1px solid var(--amber-line); border-radius:var(--r-md);
  background:var(--amber-soft);
}
.bankwait-h {
  margin:0 0 10px; font:700 15px var(--sans); color:var(--ink);
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
}
.bankwait-h .sub { font:400 12.5px var(--sans); color:var(--ink-2); }
.bankwait .grid { background:var(--surface); }
.bankwait .num { font-variant-numeric:tabular-nums; }
.wait-over td { background:var(--red-soft); }
.wait-over .over { color:var(--red); margin-left:4px; }

/* 마감된 시간을 고른 칸 — 초록(고름)과 헷갈리지 않게 노랑으로 */
.daycell.full { border-color:var(--amber-line); background:var(--amber-soft); }
.daycell.full .daychip { color:var(--amber); }

/* ── 학부모가 신청하신 내용 (발급 화면) ─────────────────
   예전에는 이걸 안 보여 줘서 관리자가 다른 화면에서 찾아 손으로 옮겨
   적어야 했고, 옮기다 빠뜨리면 엉뚱한 날부터 수업이 생겼습니다. */
.reqbox {
  margin-bottom:18px; padding:14px 16px;
  border:1px solid var(--accent-line); border-radius:var(--r-md);
  background:var(--accent-soft);
}
.reqbox-h {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:9px;
}
.reqbox-h b { font:700 14px var(--sans); color:var(--ink); }
.reqbox-h .sub { color:var(--ink-3); font-size:12px; }
.reqbox .rf-tab td b { color:var(--accent-ink); }
.reqbox .rf-tab .sub { display:block; margin:2px 0 0; font-size:11.5px; }
.reqbox-note { white-space:pre-line; }

/* ── 마감된 시간 · 대기 ─────────────────────────────────
   강사가 다 찬 시간을 골랐을 때. 예전에는 길이 없어서 그냥 창을 닫으셨습니다. */
.slotfull {
  margin-top:11px; padding:13px 15px; border-radius:var(--r-md);
  background:var(--amber-soft); border:1px solid var(--amber-line);
}
.slotfull b { display:block; font:600 13.5px var(--sans); color:var(--ink); }
.slotfull > span { display:block; margin-top:3px; font:12.5px/1.7 var(--sans); color:var(--ink-2); }
.slotwait { display:flex; gap:9px; align-items:flex-start; margin-top:11px; cursor:pointer; }
.slotwait input { margin-top:3px; accent-color:var(--accent); flex:none; }
.slotwait span { font:600 13px var(--sans); color:var(--ink); }
.slotwait em { display:block; font:400 12px var(--sans); color:var(--ink-3); font-style:normal; }

/* ── 이미 받아 둔 것 ────────────────────────────────────
   목표·참고사항이 이미 있으면 그 값만 한 줄로 보여 주고 칸을 접습니다.
   매번 처음부터 고르게 하면 신청이 길어지기만 합니다. */
.have-already {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 13px; border-radius:var(--r-md);
  background:var(--surface-3); border:1px solid var(--line);
}
.have-v { flex:1; min-width:0; font:14px/1.6 var(--sans); color:var(--ink); }
.have-edit {
  flex:none; padding:5px 12px; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface);
  font:12.5px var(--sans); color:var(--ink-2); cursor:pointer;
}
.have-edit:hover { border-color:var(--accent); color:var(--accent); }

/* 못 고르는 반 — 감추지 않고 이유를 적어 둡니다.
   빼 버리면 학부모는 그 반이 있는지도 모르고 전화하십니다. */
.grouprow-off { opacity:.62; cursor:default; }
.grouprow-off:hover { border-color:var(--border); background:var(--surface); }

/* 정원·개강 후 안내. 반 카드 안에서 눈에 띄어야 눌러 보고 알게 됩니다. */
.gwarn {
  display:block; margin-top:6px; padding:4px 9px; width:fit-content;
  border-radius:var(--r-full); background:var(--amber-soft);
  color:var(--amber); font:12px var(--sans);
}
.gwarn.ok { background:var(--green-soft); color:var(--green); }
.gwarn b { font-weight:600; }

/* 반 목록에 붙는 인원 할인 줄. 지금 결제액이 아니라 **다음 수강**
   할인이라는 것이 문장에서 분명해야 합니다. */
.gnext {
  display:block; margin-top:6px; padding:4px 9px;
  border-radius:var(--r-full); background:var(--green-soft);
  color:var(--green); font:12px var(--sans); width:fit-content;
}
.gnext b { font-weight:600; }

/* 그룹 인원별 할인 — 많이 모일수록 나눠 드립니다.
   재결제하시는 날의 반 인원 기준이라, 관리자가 연장 안내할 때 이 값을 봅니다. */
.gsize { white-space:nowrap; font-variant-numeric:tabular-nums; }
.gsize-on {
  display:inline-block; margin-right:5px; padding:1px 7px;
  border-radius:var(--r-full); background:var(--green-soft);
  color:var(--green); font:600 11.5px var(--sans);
}
.gsize-was {
  margin-left:5px; color:var(--ink-3); font-size:11.5px;
  text-decoration:line-through;
}
.gsize-need { display:block; color:var(--ink-3); font-size:11px; }

/* ══ 학생 마이페이지 홈 ══════════════════════════════════
   원장님: "한눈에 잘 안 들어와. 수강신청하듯이 조직화해서 만들어줘."

   예전에는 똑같이 생긴 흰 카드가 세로로 쌓여 있었습니다. 무엇이 급한지
   알 수 없었고, 알림이 많은 주에는 '수업 입장' 단추가 800px 아래로 밀렸습니다.

   그래서 **행동이 필요한 것과 읽기만 하면 되는 것**으로 화면을 가릅니다.
   신호는 하나뿐입니다 — 왼쪽 버건디 띠(.act). 여러 가지로 구분하면
   아무것도 구분되지 않습니다. */

/* ── 오늘 · 자녀 고르기 ── */
/* 🔴 이름과 '형제 추가' 를 **한 줄에** (2026-10-12). 둘 다 짧아서 각자
   한 줄씩 쓰면 옆자리가 통째로 빕니다. 좁으면 알아서 줄이 바뀝니다. */
.home-top {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:12px;
}
.home-top .chips { margin-bottom:0; }
.home-h {
  margin:0; font:700 20px var(--sans); color:var(--ink);
  letter-spacing:-.01em; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.home-h em { font-style:normal; font-weight:500; color:var(--ink-3); font-size:16px; }

/* ── 묶음 머리글 ── */
.sec-bar {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:22px 0 10px;
}
.sec-bar h2 { margin:0; font:700 16px var(--sans); color:var(--ink); }
.sec-note { font:12.5px var(--sans); color:var(--ink-3); }
.sec-more { margin-left:auto; font:13px var(--sans); color:var(--accent); }
.todo-n {
  display:inline-block; min-width:20px; padding:1px 7px; margin-left:4px;
  border-radius:var(--r-full); background:var(--accent); color:var(--ink-on-brand);
  font:600 12px/1.6 var(--sans); text-align:center; vertical-align:2px;
}

/* ── 지금 해 주세요 — 왼쪽 띠 하나로만 구분합니다 ── */
.tile.act {
  border-left:3px solid var(--accent);
  border-top-left-radius:var(--r-sm); border-bottom-left-radius:var(--r-sm);
}
.tile.act .hero-btn { margin-top:12px; }
.gap-t { margin-top:12px; }

/* ── 다른 아이의 다음 수업 (한 줄) ── */
.upnext {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; margin-top:-4px;
}
.upnext-b { flex:1; min-width:0; font:13.5px var(--sans); color:var(--ink-2); }
.upnext-b b { color:var(--ink); margin-right:5px; }
.upnext-x {
  flex:none; font:600 12px var(--sans); color:var(--ink-3);
  padding:3px 10px; border-radius:var(--r-full); border:1px solid var(--line);
}
.upnext.on { border-color:var(--accent-line); background:var(--accent-soft); }
.upnext.on .upnext-x {
  background:var(--accent); border-color:var(--accent); color:var(--ink-on-brand);
}

/* 안 읽은 알림 한 줄 — 히어로 바로 아래 */
.hflash {
  display:flex; align-items:center; gap:8px; text-decoration:none;
  margin:10px 0 0;
}
.hflash-x { margin-left:auto; flex:none; font-weight:600; white-space:nowrap; }

/* ── 진도 — 아이당 카드 한 장, 안에 줄로 ──
   예전에는 교재마다 카드 한 장이라 자녀당 최대 5장이 쌓였습니다. */
.hrows { display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.hrow + .hrow { padding-top:12px; border-top:1px solid var(--line-soft); }
.hrow-t { display:flex; align-items:baseline; gap:8px; }
.hrow-t b { flex:1; min-width:0; font:600 14px var(--sans); color:var(--ink); }
.hrow-pct { flex:none; font:600 12.5px var(--sans); color:var(--accent-ink); }
.hrow .bar { margin:6px 0 5px; }
.hrow-s { font:12.5px var(--sans); color:var(--ink-3); }

/* ── PC 두 칸 ──
   뷰포트가 아니라 **남은 폭**을 보는 auto-fit 을 씁니다. 이 파일에는
   컨테이너가 428px 인데 뷰포트 560px 기준으로 칸을 나눠 잘린 전례가
   있습니다(.daygrid). auto-fit 은 그 실수를 아예 못 하게 합니다. */
.home-grid {
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  align-items:start;
}
.home-grid > * { margin-left:0; margin-right:0; }
@supports (display:grid) {
  .home-grid { column-gap:14px; }
}
.home-grid .wide { grid-column:1 / -1; }

/* ── 핸드폰 홈에 바로가기 ───────────────────────────────
   매번 브라우저를 켜고 주소를 치는 대신 앱처럼 한 번에 열리게 합니다.
   홈 맨 위에 얇은 줄로 두어, 수업 정보를 밀어내지 않게 합니다.
   한 번 닫으면 그 기기에서 30일 동안 안 뜹니다 — 매번 뜨면 잔소리입니다. */
.a2hs {
  display:flex; align-items:center; gap:11px;
  margin-bottom:12px; padding:10px 12px;
  border:1px solid var(--accent-line); border-radius:var(--r-md);
  background:var(--accent-soft);
}
.a2hs-ic img { display:block; border-radius:9px; }
.a2hs-b { flex:1; min-width:0; line-height:1.45; }
.a2hs-b b { display:block; font:600 13.5px var(--sans); color:var(--ink); }
.a2hs-b span { font:12.5px var(--sans); color:var(--ink-2); }
.a2hs-go {
  flex:none; padding:8px 16px; border-radius:var(--r-full); border:0;
  background:var(--accent); color:var(--ink-on-brand);
  font:600 13.5px var(--sans); cursor:pointer;
}
.a2hs-go:hover { background:var(--accent-ink); }
.a2hs-x {
  flex:none; width:28px; height:28px; border:0; border-radius:var(--r-full);
  background:transparent; color:var(--ink-3);
  font:18px/1 var(--sans); cursor:pointer;
}
.a2hs-x:hover { background:var(--surface); color:var(--ink); }

.a2hs-ios {
  margin-bottom:12px; padding:14px 16px;
  border:1px solid var(--accent-line); border-radius:var(--r-md);
  background:var(--surface);
}
.a2hs-ios b { display:block; font:600 14px var(--sans); margin-bottom:8px; }
.a2hs-ios ol { margin:0; padding-left:20px; }
.a2hs-ios li { font:13.5px/1.85 var(--sans); color:var(--ink-2); }
.a2hs-ios li b { display:inline; font-weight:600; color:var(--ink); }
.a2hs-close {
  margin-top:11px; padding:7px 15px; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface);
  font:13px var(--sans); color:var(--ink-2); cursor:pointer;
}

/* ── 그룹 대기 명단 (관리자) ────────────────────────────
   같은 과목·같은 요일을 원하는 사람끼리 묶어 보여 줍니다. 이름만 늘어놓으면
   누구를 같은 반에 넣을 수 있는지 안 보입니다. */
.wl {
  margin-bottom:20px; border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
}
.wl-ready { border-color:var(--green-line); }
.wl-h {
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  padding:12px 16px; background:var(--surface-3);
}
.wl-ready .wl-h { background:var(--green-soft); }
.wl-h h2 { margin:0; font:700 15px var(--sans); color:var(--ink); }
.wl-n {
  margin-left:auto; font:12.5px var(--sans); color:var(--ink-3);
  padding:3px 10px; border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--surface);
}
.wl-n.on { color:var(--green); border-color:var(--green-line); font-weight:600; }
.wl .grid { margin:0; }
.wl-note { max-width:22ch; white-space:pre-line; }
.wl-sel { max-width:190px; }
.wl form { display:flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:wrap; margin:0; }

/* 맞는 반이 없을 때 가는 길. 반 목록과 같은 모양이되 점선으로 두어
   '반' 이 아니라 '다른 길' 임이 보이게 합니다. */
.grouprow-wait { border-style:dashed; }
.grouprow-wait .groupbody b { color:var(--accent-ink); }

/* ── 결제 확인 화면 ─────────────────────────────────────
   원장님: "결제하기를 누르면 수업 신청 부분을 좀 더 크게 해서 확인하게 하고,
            카드결제와 무통장입금을 선택하게 해."
   예전에는 금액 한 줄과 단추 하나뿐이라, 무엇을 결제하는지 확인할 자리도
   무통장입금으로 갈 길도 없었습니다. */
.paypage { max-width:520px; margin:0 auto; }
.pay-h { margin:0 0 14px; font:700 22px var(--sans); }
.paycard {
  margin-bottom:14px; padding:18px 18px 16px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface);
}
.pay-what {
  font:600 12.5px var(--sans); letter-spacing:.04em;
  color:var(--ink-3); margin-bottom:12px;
}
.pay-lines { display:grid; grid-template-columns:auto 1fr; gap:9px 16px; margin:0; }
.pay-lines dt { font:13px var(--sans); color:var(--ink-3); white-space:nowrap; }
.pay-lines dd { margin:0; font:600 15px var(--sans); color:var(--ink); }
.pay-name { margin:0; font:600 16px/1.6 var(--sans); color:var(--ink); }
.pay-total {
  display:flex; align-items:baseline; gap:10px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.pay-total span { font:13px var(--sans); color:var(--ink-3); }
.pay-total b {
  margin-left:auto; font:700 26px var(--sans); color:var(--accent-ink);
  letter-spacing:-.02em;
}

.paypick { display:flex; flex-direction:column; gap:9px; }
.paypick label { cursor:pointer; }
.paypick input { position:absolute; opacity:0; pointer-events:none; }
.paypick span {
  display:block; padding:13px 15px; border-radius:var(--r-md);
  border:1.5px solid var(--border); background:var(--surface);
}
.paypick b { display:block; font:600 15px var(--sans); color:var(--ink); }
.paypick em {
  display:block; margin-top:3px; font-style:normal;
  font:12.5px var(--sans); color:var(--ink-3);
}
.paypick input:checked + span {
  border-color:var(--accent); background:var(--accent-soft);
}
.paypick input:checked + span b { color:var(--accent-ink); }
.paypick input:focus-visible + span { outline:2px solid var(--focus); outline-offset:2px; }
#bankform, #cardgo { margin-top:16px; }

/* ── 무통장입금 안내 ────────────────────────────────────
   신청은 끝났고 입금만 남은 자리입니다. 계좌번호를 눌러 복사할 수 있게
   두었습니다 — 핸드폰으로 보면서 은행 앱을 켜야 하는데, 숫자를 손으로
   옮겨 적으면 한 자리씩 틀립니다. */
.bankbox { max-width:460px; margin:0 auto; text-align:center; }
.bank-mark {
  width:52px; height:52px; margin:6px auto 14px; border-radius:var(--r-full);
  background:var(--accent-soft); color:var(--accent-ink);
  font:700 26px/52px var(--sans);
}
.bankbox h1 { font:700 22px var(--sans); margin:0 0 8px; }
.bank-lead { margin:0 0 20px; font:14.5px/1.75 var(--sans); color:var(--ink-2); }
.bank-lead b { color:var(--accent-ink); }
.bank-acc {
  text-align:left; border:1px solid var(--accent-line); border-radius:var(--r-md);
  background:var(--accent-soft); padding:4px 16px;
}
.bank-row {
  display:flex; align-items:center; gap:10px; padding:11px 0;
  border-bottom:1px solid var(--accent-line);
}
.bank-row:last-child { border-bottom:0; }
.bank-k { flex:none; width:78px; font:13px var(--sans); color:var(--ink-3); }
.bank-v { flex:1; font:15px var(--sans); color:var(--ink); word-break:break-all; }
.bank-no { font-weight:600; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.bank-total .bank-v b { font:700 19px var(--sans); color:var(--accent-ink); }
.bank-copy {
  flex:none; padding:6px 12px; border-radius:var(--r-full);
  border:1px solid var(--accent-line); background:var(--surface);
  font:12.5px var(--sans); color:var(--accent-ink); cursor:pointer;
}
.bank-copy:hover { background:var(--accent); border-color:var(--accent); color:var(--ink-on-brand); }
.bank-note {
  text-align:left; margin-top:14px; padding:13px 15px;
  border-radius:var(--r-md); background:var(--amber-soft);
  border:1px solid var(--amber-line);
}
.bank-note p { margin:0 0 8px; font:13px/1.7 var(--sans); color:var(--ink-2); }
.bank-note p:last-child { margin-bottom:0; }
.bank-note b { color:var(--ink); }
.bank-what {
  text-align:left; margin:16px 0 20px; padding-top:14px;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:6px 14px;
}
.bank-what dt { font:13px var(--sans); color:var(--ink-3); }
.bank-what dd { margin:0; font:13.5px var(--sans); color:var(--ink); }
.bank-what .sub { color:var(--ink-3); font-size:12.5px; }
.bank-tel { margin:12px 0 0; font:12.5px var(--sans); color:var(--ink-3); }

/* ── 누구 것인가 고르는 줄 ─────────────────────────────
   무료 레벨테스트가 아이 한 명당 한 번이라, 형제가 있으면 먼저 아이를
   골라야 합니다. 칩 줄에 '+ 형제 추가' 를 같이 두어, 둘째 아이가
   막혔을 때 그 자리에서 길이 열리게 합니다. */
.wholine {
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-bottom:8px;
}
.wholine-l { font:600 13px var(--sans); color:var(--ink-2); flex:none; }
.wholine .chips { margin:0; }
.chip-add {
  border-style:dashed !important;
  color:var(--accent) !important;
}
.chip-add:hover { border-color:var(--accent) !important; background:var(--accent-soft) !important; }
.wholine-note { margin-bottom:14px; }

/* ── 수업 연기 신청 결과 ────────────────────────────────
   승인·거절을 팝업으로 한 번 알리고, 목록에서 다시 볼 수 있게 합니다.
   확인하신 것은 × 로 지웁니다 (학부모 화면에서만 사라집니다). */
.absbox { text-align:left; }
.absbox h2 { text-align:center; }
.absbox .paid-mark { background:var(--green-soft); color:var(--green); }
.absbox .paid-mark.no { background:var(--amber-soft); color:var(--amber); }
.abs-one {
  margin:0 0 12px; padding:11px 13px; border-radius:var(--r-md);
  background:var(--surface-3); font:14px/1.7 var(--sans); color:var(--ink-2);
}
.abs-one b { color:var(--ink); }
.abs-one .sub { font-size:12.5px; color:var(--ink-3); }

.abslist { padding-bottom:6px; }
.absrow {
  display:flex; align-items:flex-start; gap:9px;
  padding:10px 0; border-top:1px solid var(--line-soft);
}
.absrow:first-of-type { border-top:0; }
.absrow-b { flex:1; min-width:0; font:13.5px/1.65 var(--sans); color:var(--ink); }
.absrow-b .sub { color:var(--ink-3); font-size:12.5px; }
.absrow form { margin:0; flex:none; }
.absrow-x {
  width:26px; height:26px; border:0; border-radius:var(--r-full);
  background:transparent; color:var(--ink-3);
  font:17px/1 var(--sans); cursor:pointer;
}
.absrow-x:hover { background:var(--surface-3); color:var(--ink); }

/* ── 환불 신청서 ────────────────────────────────────────
   전화 대신 화면에서 사유를 적어 보내는 자리입니다.
   수강권 카드 맨 아래의 조용한 링크로 두었습니다 — 연장·신청 단추와
   같은 무게로 두면 그만두는 길이 이어가는 길만큼 커 보입니다. */
.refund-link {
  display:inline-block; margin-top:10px;
  font:13px var(--sans); color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px;
}
.refund-link:hover { color:var(--ink-2); }

/* 이미 낸 신청 — 단추 대신 진행 상태. "보냈는데 아무 일도 안 일어나네" 를 막습니다 */
.refund-state {
  margin-top:12px; padding-top:11px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font:13px var(--sans);
}
.refund-reply {
  flex-basis:100%; margin-top:4px; padding:10px 12px;
  border-radius:var(--r-md); background:var(--surface-3);
  font:13.5px/1.65 var(--sans); color:var(--ink-2);
}

.refbox {
  width:min(460px, calc(100vw - 28px));
  max-height:calc(100vh - 48px); overflow:auto;
  border:0; border-radius:var(--r-lg); padding:24px 22px 20px;
  background:var(--surface); color:var(--ink); box-shadow:var(--sh-3);
}
.refbox::backdrop { background:rgba(45,25,28,.45); }
.refbox h2 { margin:0 0 4px; font:700 19px var(--sans); }
.refbox-sub { margin:0 0 16px; font:13px var(--sans); color:var(--ink-3); }
.refbox-l {
  display:block; margin:14px 0 7px;
  font:600 13px var(--sans); color:var(--ink);
}
.refbox-l .sub { font-weight:400; color:var(--ink-3); margin-left:6px; }
.refbox-reasons { display:flex; flex-wrap:wrap; gap:7px; }
.refbox-reasons label { cursor:pointer; }
.refbox-reasons input { position:absolute; opacity:0; width:0; height:0; }
.refbox-reasons span {
  display:inline-block; padding:6px 12px; border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--surface);
  font:13px var(--sans); color:var(--ink-2);
}
.refbox-reasons input:checked + span {
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.refbox-reasons input:focus-visible + span { outline:2px solid var(--focus); outline-offset:2px; }
.refbox textarea {
  width:100%; padding:11px 12px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  font:14px/1.65 var(--sans); color:var(--ink); resize:vertical;
}
.refbox-acc { margin-top:14px; }
.refbox-acc summary {
  cursor:pointer; font:13px var(--sans); color:var(--ink-2);
  padding:7px 0;
}
.refbox-acc summary .sub { color:var(--ink-3); }
.refbox-acc-in { display:flex; flex-direction:column; gap:7px; padding-top:6px; }
.refbox-acc-in input {
  padding:9px 11px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  font:14px var(--sans); color:var(--ink);
}
.refbox-note {
  margin:16px 0 0; padding:12px 14px; border-radius:var(--r-md);
  background:var(--surface-3);
  font:12.5px/1.7 var(--sans); color:var(--ink-2);
}
.refbox-note b { color:var(--ink); }
.refbox-btns { display:flex; gap:9px; margin-top:16px; }
.refbox-btns .hero-btn { flex:1; margin:0; }
.refbox-tel {
  margin:12px 0 0; text-align:center;
  font:12.5px var(--sans); color:var(--ink-3);
}

/* 자바스크립트가 막혀도 링크가 죽지 않게 — :target 으로 펼칩니다 */
.refbox:not([open]):target {
  display:block; position:static; margin:12px 0 0;
  width:auto; max-height:none;
  border:1px solid var(--accent-line);
}

/* 예상 수강료 — 개월을 고르면 바로 나옵니다.
   관리자 견적과 같은 셈법이라 나중에 받는 청구서와 어긋나지 않습니다. */
.fee {
  margin-top:12px; padding:14px 16px; border-radius:var(--r-md);
  background:var(--accent-soft); border:1px solid var(--accent-line);
}
.fee-k { font:600 12.5px var(--sans); color:var(--accent-ink); opacity:.85; }
/* 할인 전 정가 — 가운데에 줄을 그어 '원래 이 값' 임을 보여 줍니다.
   줄이 옅으면 그냥 회색 숫자로 보여서, 굵기와 색을 또렷하게 둡니다. */
.fee-full {
  display:flex; align-items:baseline; gap:7px;
  margin-top:4px; font:15px var(--sans); color:var(--ink-2);
}
.fee-full b {
  font:600 11.5px var(--sans); color:var(--ink-3);
  letter-spacing:.02em; text-decoration:none;
}
.fee-full i {
  font-style:normal;
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:var(--red);
  text-underline-offset:0;
}
.fee-v {
  margin-top:1px; font:700 26px var(--sans); color:var(--accent-ink);
  letter-spacing:-.02em;
}
/* 얼마를 아끼는지 — 숫자 하나만 있으면 싼지 비싼지 알 수 없습니다 */
.fee-save {
  display:inline-block; margin-top:6px;
  padding:4px 11px; border-radius:var(--r-full);
  background:var(--green-soft); color:var(--green);
  border:1px solid var(--green-line);
  font:700 13px var(--sans);
}
.fee-sub { margin-top:6px; font:12.5px/1.6 var(--sans); color:var(--ink-3); }
/* 결제 전에 알려야 하는 조건 — 약관법 제3조(중요 내용 설명) */
.fee-note {
  margin-top:10px; padding:9px 11px; border-radius:var(--r-sm);
  background:var(--surface); border:1px dashed var(--accent-line);
  font:12.5px/1.65 var(--sans); color:var(--ink-2);
}
.fee-note b { color:var(--accent-ink); }

/* 주당 횟수와 고른 요일 수 맞추기 — 보내기 전에 바로 알 수 있게 */
.step-sub.need { background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
.day-count {
  margin-top:9px; padding:9px 12px; border-radius:var(--r-sm);
  font:600 13px var(--sans);
  background:var(--surface-3); color:var(--ink-2);
  border:1px solid var(--border);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.day-count.ok {
  background:var(--green-soft); color:var(--green); border-color:var(--green-line);
}
.day-count.over {
  background:var(--amber-soft); color:var(--amber); border-color:var(--amber-line);
}
.day-count.bump { animation:daybump .45s var(--ease); }
@keyframes daybump {
  0%,100% { transform:translateX(0); }
  25%     { transform:translateX(-4px); }
  75%     { transform:translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .day-count.bump { animation:none; } }

.bigdate {
  width:100%; box-sizing:border-box; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  font:15px var(--sans); color:var(--ink); background:var(--surface);
}

.submit-bar { margin-top:4px; }

/* ── 수강 목표 ─────────────────────────────────────────
   갈래를 켜면 그 아래 세부가 활성으로 보입니다. 세부만 눌러도 갈래가
   자동으로 켜지므로 두 번 누르지 않아도 됩니다. */
/* 두 칸으로 놓아 화면을 절반으로 줄입니다. 켜진 갈래만 한 줄을 다 차지해
   세부를 고를 자리를 얻습니다 — 늘 한 줄씩 놓으면 열 갈래가 500px 을 먹습니다. */
.goals { display:grid; grid-template-columns:1fr 1fr; gap:5px; align-items:start; }
.goals .goal:has(input[name="goal[]"]:checked) { grid-column:1 / -1; }
@media (max-width:340px) { .goals { grid-template-columns:1fr; } }
.goals.dim { opacity:.45; }
.goal {
  border:1px solid var(--border); border-radius:var(--r-sm);
  padding:7px 11px; background:var(--surface);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.goal:has(input[name="goal[]"]:checked) {
  border-color:var(--accent); background:var(--accent-soft);
}
.goal-h { display:flex; align-items:center; gap:8px; cursor:pointer; }
.goal-h input { accent-color:var(--accent); flex:none; }
.goal-h span { font:600 13.5px var(--sans); color:var(--ink); }
.goal-subs { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 1px 23px; }
.goal-subs label { cursor:pointer; }
.goal-subs input { position:absolute; opacity:0; pointer-events:none; }
.goal-subs span {
  display:inline-block; padding:5px 12px;
  border:1px solid var(--border); border-radius:var(--r-full);
  font:500 13px var(--sans); color:var(--ink-3); background:var(--surface);
}
.goal-subs input:checked + span {
  background:var(--accent); border-color:var(--accent); color:var(--ink-on-brand);
}
.goal-subs input:focus-visible + span { outline:2px solid var(--focus); }
.goal-none {
  display:flex; align-items:flex-start; gap:9px; cursor:pointer;
  margin-top:7px; padding:9px 11px; border-radius:var(--r-sm);
  border:1px dashed var(--border-strong); background:var(--surface-3);
}
.goal-none input { margin-top:2px; accent-color:var(--accent); flex:none; }
.goal-none span { font:600 14px var(--sans); color:var(--ink-2); }
.goal-none em {
  display:block; margin-top:2px; font-style:normal;
  font:400 13px var(--sans); color:var(--ink-3);
}

/* 빠진 학생 정보만 그 자리에서 채우기 */
.step-fill { border-color:var(--accent-line); background:var(--accent-soft); }
.fill { display:grid; gap:11px; }
@media (min-width:520px) { .fill { grid-template-columns:1fr 1fr; } }
.fill label { display:block; font:600 13px var(--sans); color:var(--ink-2); }
.fill input, .fill select {
  display:block; width:100%; box-sizing:border-box; margin-top:5px;
  padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-sm);
  font:15px var(--sans); color:var(--ink); background:var(--surface);
}

/* 칸 하나짜리 줄 — .fill 은 넓은 화면에서 두 칸으로 나뉘는데,
   이름처럼 하나만 있을 때는 반쪽만 차서 어색합니다. */
.fill.one { grid-template-columns:1fr; }

/* ── 그룹 반 고르기 ────────────────────────────────────
   그룹은 시간을 고르는 것이 아니라 이미 열린 반을 고르는 일입니다. */
.grouplist { display:flex; flex-direction:column; gap:8px; }
.grouprow {
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  padding:11px 13px; border:1px solid var(--border); border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.grouprow:hover { border-color:var(--accent-line); }
.grouprow input { margin-top:3px; accent-color:var(--accent); flex:none; }
.grouprow:has(input:checked) {
  border-color:var(--accent); background:var(--accent-soft);
}
.groupbody b { display:block; font:600 14px var(--sans); color:var(--ink); }
.groupbody em {
  display:block; margin-top:3px; font-style:normal;
  font:13px/1.6 var(--sans); color:var(--ink-3);
}
.groupfoot {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:7px;
}
.groupprice { font:600 15px var(--sans); color:var(--ink); }
.seat-left {
  font:600 12px var(--sans); color:var(--accent-ink);
  padding:3px 9px; border-radius:var(--r-full); background:var(--accent-soft);
}
.seat-tag {
  font:600 12px var(--sans); color:var(--ink-3);
  padding:3px 9px; border-radius:var(--r-full); background:var(--surface-2);
}

/* 관리자 — 신청 목록 */
.req-panel { margin-bottom:16px; }
.req-row { align-items:flex-start; }
.req-row .row-title { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.req-note {
  margin-top:5px; padding:6px 9px; border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--ink-2); white-space:pre-line;
}
.req-actions { display:flex; gap:6px; flex:none; flex-wrap:wrap; justify-content:flex-end; }
.req-actions form { display:inline-flex; gap:6px; }
.quote-form input[type=number] { width:110px; }
.pay-tile { border:1px solid var(--accent-line); }
.pay-tile form { margin-top:12px; }

/* ── 회원가입 동의 · 약관 전문 ─────────────────────────
   이용약관과 개인정보취급방침은 둘 다 동의해야 가입됩니다.
   본문은 스크롤 상자에 넣어 화면이 길어지지 않게 합니다. */
.agree-block {
  margin: 14px 0 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.agree-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 12px;
  background: var(--surface-3);
  font-size: 13px; font-weight: 700;
}
.agree-head a { font-weight: 600; font-size: 12px; color: var(--accent); }
.agree-body {
  max-height: 110px; overflow-y: auto;
  padding: 10px 12px;
  font-size: 12px; line-height: 1.65; color: var(--ink-3, #6b6b6b);
  white-space: normal; word-break: break-word;
  border-top: 1px solid var(--border);
}
.agree-body strong { color: var(--ink-2); font-weight: 700; }
/* 미리보기가 잘렸을 때 전문으로 가는 길 — 글이 문장 중간에서 끝난 것처럼
   보이면 학부모는 그것이 약관 전부인 줄 압니다. */
.agree-more { margin: 8px 0 0; font-size: 11.5px; }

/* 환불 화면 — 모르는 값과 추정값을 눈에 띄게. 돈이라 조용히 넘어가면 안 됩니다. */
.rf-unknown { color: var(--ink-2); }
.rf-unknown b { color: var(--amber); }
.rf-guess { display:inline-block; margin-top:4px; font-size:12px; color: var(--amber); }
/* ── 환불 실행 ────────────────────────────────────────
   돈이 나가는 자리라, 눌러야 열리는 서랍에 넣습니다. 목록을 훑다가
   실수로 누르는 일이 없어야 합니다. */
.rf-led { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm);
          background: var(--surface-3); }
.rf-led-h { font: 600 12.5px/1 var(--sans); color: var(--ink-3); margin-bottom: 9px; }
.rf-led-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
              padding: 6px 0; border-top: 1px solid var(--border); font-size: 13px; }
.rf-led-row:first-of-type { border-top: 0; }
.rf-sent { display: flex; gap: 6px; align-items: center; flex: 1 1 240px; }
.rf-sent input { flex: 1; min-width: 100px; }

.rf-settle { margin-top: 14px; border: 1px solid var(--accent-line);
             border-radius: var(--r-md); background: var(--surface); }
.rf-settle > summary { cursor: pointer; padding: 12px 15px; font-weight: 600;
                       color: var(--accent-ink); list-style: none; }
.rf-settle > summary::before { content: '▸ '; }
.rf-settle[open] > summary::before { content: '▾ '; }
.rf-settle > form { padding: 0 15px 15px; }
.rf-pay { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px;
          border: 1px solid var(--border); border-radius: var(--r-sm);
          margin-bottom: 6px; font-size: 13.5px; cursor: pointer; }
.rf-pay input { margin-top: 3px; flex: none; }
.rf-amt { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.rf-amt input { width: 160px; font-variant-numeric: tabular-nums; }
.rf-way { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px;
          font-size: 13.5px; }
.rf-way label { display: flex; gap: 6px; align-items: baseline; }

/* ── 수강권 카드 접기 ─────────────────────────────────
   원장님: "수강권의 내용이 너무 길어. 아코디언처럼 나와서 처리해줘."
   보강 규칙·인쇄·신청 링크를 안으로 넣고, 밖에는 지금 알아야 하는 것만
   남깁니다. <details> 라 자바스크립트가 막혀도 열립니다. */
.passmore { margin-top: 12px; border-top: 1px solid var(--border); }
.passmore > summary {
  cursor: pointer; list-style: none;
  padding: 11px 2px 3px; font: 500 13.5px/1.5 var(--sans);
  color: var(--ink-3);
}
.passmore > summary::-webkit-details-marker { display: none; }
.passmore > summary::after { content: ' ▾'; font-size: 11px; }
.passmore[open] > summary::after { content: ' ▴'; }
.passmore > summary:hover { color: var(--accent-ink); }
.passmore-in { padding: 4px 2px 2px; display: grid; gap: 9px; justify-items: start; }
.passmore-in .sub { margin: 0; }
.passmore-in .printlinks { margin: 0; }
.passmore-ask { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* 반 사건에서 나온 정산 — 안 보내면 그대로 묻힙니다 */
.rf-pend { border-color: var(--amber-line); background: var(--amber-soft); }
.rf-pend-row { padding: 10px 0; border-top: 1px solid var(--amber-line); }
.rf-pend-row:first-of-type { border-top: 0; }
.rf-pend-who { font-size: 13.5px; margin-bottom: 6px; }
.rf-pend-in { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rf-pend-in input[type=number] { width: 120px; font-variant-numeric: tabular-nums; }
.rf-pend-in input[type=text] { flex: 1 1 140px; min-width: 120px; }
.rf-pend-warn { margin: 6px 0 0; font-size: 12.5px; color: var(--amber); }

/* ── 형제마다 다른 색 ─────────────────────────────────
   원장님: "형제간의 내용이 비슷해서 … 형제별 내용이 혼동이 없게."

   화면 전체 색은 layout 이 아이별 테마로 바꿉니다. 여기서는 **아이 고르개**
   가 세 색을 한 자리에서 보여 주어 "이 아이는 이 색" 을 익히게 합니다.
   그래서 토큰(--accent)이 아니라 **고정색**을 씁니다 — 지금 화면이 무슨
   색이든 세 칩은 늘 같은 색이어야 알아볼 수 있습니다. */
.chips .chip.k1 { --kc:#8B2635; }   /* 첫째 · 버건디 */
.chips .chip.k2 { --kc:#2F6B50; }   /* 둘째 · 그린 */
.chips .chip.k3 { --kc:#3457D5; }   /* 셋째부터 · 파랑 */
.chips .chip.k1, .chips .chip.k2, .chips .chip.k3 {
  border-color: var(--kc); color: var(--kc);
}
.chips .chip.k1.on, .chips .chip.k2.on, .chips .chip.k3.on {
  background: var(--kc); border-color: var(--kc); color: #fff;
}
/* 어두운 화면에서는 진한 색이 바닥에 묻힙니다 — 밝은 쪽으로 올립니다.
   테마 단추로 고른 것이 OS 설정을 이겨야 하므로, 이 파일이 원래 쓰는
   세 갈래(:not([data-theme="light"]) · [data-theme="dark"])를 그대로 씁니다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chips .chip.k1 { --kc:#E08A97; }
  :root:not([data-theme="light"]) .chips .chip.k2 { --kc:#6FBF95; }
  :root:not([data-theme="light"]) .chips .chip.k3 { --kc:#8FAAF0; }
  :root:not([data-theme="light"]) .chips .chip.k1.on,
  :root:not([data-theme="light"]) .chips .chip.k2.on,
  :root:not([data-theme="light"]) .chips .chip.k3.on { color:#17100F; }
}
:root[data-theme="dark"] .chips .chip.k1 { --kc:#E08A97; }
:root[data-theme="dark"] .chips .chip.k2 { --kc:#6FBF95; }
:root[data-theme="dark"] .chips .chip.k3 { --kc:#8FAAF0; }
:root[data-theme="dark"] .chips .chip.k1.on,
:root[data-theme="dark"] .chips .chip.k2.on,
:root[data-theme="dark"] .chips .chip.k3.on { color:#17100F; }

/* 자동 확정 대상이 아닌 건의 '참고 계산' 안내 줄 */
.rf-ref {
  padding:9px 11px; border-radius:var(--r-sm);
  background:var(--amber-soft); border:1px solid var(--amber-line);
  color:var(--ink-2); font-size:12.5px; line-height:1.6;
}
.rf-ref b { color:var(--amber); }

/* 방금 만든 설정 링크. 한 번만 보이므로 눈에 띄어야 합니다. */
.setuplink {
  margin-bottom:16px; padding:14px 16px; border-radius:var(--r-md);
  background:var(--accent-soft); border:1px solid var(--accent-line);
}
.setuplink b { display:block; color:var(--accent-ink); }
.setuplink .sub { display:block; margin:3px 0 8px; color:var(--ink-2); font-size:12.5px; }
.setuplink input {
  width:100%; box-sizing:border-box; padding:9px 11px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink);
  font:13px var(--mono);
}
.warn-ink { color:var(--red); }

/* ── 회원 합치기 ───────────────────────────────────────
   표시하는 자리와 합치는 자리를 눈으로 갈라 둡니다 — 표시는 아무것도
   바꾸지 않고, 합치기는 되돌릴 수 없습니다. */
.mg-run { border-left:3px solid var(--amber); }
.mg-undone { opacity:.62; }
.mg-undo { margin-top:8px; }
.mg-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 0; border-bottom:1px solid var(--border-2); font-size:13px;
}
.mg-row:last-of-type { border-bottom:0; }
.mg-keep b { color:var(--ink); }
.mg-arrow { color:var(--ink-3); }
.mg-gone { color:var(--ink-2); text-decoration:line-through; }
.mg-note { flex:1; }
.mg-row form { margin:0; }
.mg-go { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; }

.mg-grp { padding-bottom:14px; }
.mg-tab { width:100%; border-collapse:collapse; font-size:13px; margin:4px 0 10px; }
.mg-tab th {
  text-align:left; font:600 11.5px var(--sans); color:var(--ink-3);
  padding:6px 8px; border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.mg-tab td { padding:9px 8px; border-bottom:1px solid var(--border-2); vertical-align:top; }
.mg-tab tr:last-child td { border-bottom:0; }
.mg-off td { opacity:.5; }
.mg-act { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.mg-act input[type="text"] {
  flex:1; min-width:200px; padding:8px 11px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--ink); font:13px var(--sans);
}
@media (max-width:760px) {
  .mg-tab, .mg-tab tbody, .mg-tab tr, .mg-tab td { display:block; width:100%; }
  .mg-tab thead, .mg-tab th { display:none; }
  .mg-tab tr { border-bottom:1px solid var(--border); padding:8px 0; }
  .mg-tab td { border:0; padding:2px 0; }
}

/* ── 누가 수업을 듣는가 (가입 첫 칸) ────────────────────
   가입 화면에서 **가장 먼저, 가장 크게** 고르는 칸입니다. 이 한 번의 선택으로
   아래 칸도 갈리고 그 뒤 화면들도 갈리므로, 다른 입력칸보다 눈에 띄어야
   합니다. 세 칸이 한 줄에 나란히 서고 좁은 화면에서는 접힙니다. */
.asbox { border:0; padding:0; margin:0 0 14px; }
.asbox legend {
  padding:0; margin-bottom:8px;
  font:600 13px var(--sans); color:var(--ink-2);
}
.aspick { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.aspick label { cursor:pointer; }
.aspick input { position:absolute; opacity:0; pointer-events:none; }
.aspick span {
  display:flex; flex-direction:column; gap:2px; align-items:center;
  padding:12px 6px; border-radius:var(--r-md);
  border:1px solid var(--border); background:var(--surface);
  text-align:center;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.aspick b { font:600 15px var(--sans); color:var(--ink); }
.aspick i { font:400 11.5px var(--sans); font-style:normal; color:var(--ink-3); }
.aspick span:hover { border-color:var(--accent-line); }
.aspick input:checked + span {
  background:var(--accent); border-color:var(--accent);
}
.aspick input:checked + span b,
.aspick input:checked + span i { color:var(--ink-on-brand); }
.aspick input:focus-visible + span { outline:2px solid var(--focus); outline-offset:2px; }
.asnote {
  margin:-4px 0 12px; padding:10px 12px; border-radius:var(--r-sm);
  background:var(--surface-3); color:var(--ink-2);
  font-size:12.5px; line-height:1.6; text-align:left;
}
@media (max-width:360px) { .aspick { grid-template-columns:1fr; } }

/* ── 비밀번호 찾기 ─────────────────────────────────────
   여러 번 틀리신 뒤 로그인 화면 아래에 폅니다. 계정을 잠그지 않으므로
   경고가 아니라 **안내**로 보이게 합니다 — 빨강이 아니라 차분한 색. */
.pwhelp {
  margin-top:14px; padding:13px 15px; border-radius:var(--r-md);
  background:var(--surface-3); border:1px solid var(--border);
  text-align:left; font-size:13px; line-height:1.65;
}
.pwhelp b { color:var(--ink); }
.pwhelp .sub { display:block; margin-top:4px; color:var(--ink-2); }
.pwhelp-go {
  display:inline-block; margin-top:9px; padding:7px 14px;
  border-radius:var(--r-full); background:var(--accent);
  color:var(--ink-on-brand); font-weight:600; font-size:13px;
}
/* 찾기 화면의 세 갈래 */
.pwstep { display:flex; gap:10px; text-align:left; margin:14px 0 10px; }
.pwstep-n {
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:var(--ink-on-brand);
  font:700 12px/22px var(--sans); text-align:center;
}
.pwstep-b { font-size:13.5px; line-height:1.6; }
.pwstep-b .sub { display:block; margin-top:2px; color:var(--ink-2); font-size:12.5px; }

/* 다른 아이 앞으로 온 소식 한 줄. 홈은 아이 한 명씩만 보여 주므로,
   그 아이 탭으로 가는 길이 여기 말고는 없습니다. */
.othernews { display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 12px; }
.othernews-i {
  display:inline-flex; align-items:center; gap:2px;
  padding:7px 13px; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface);
  font-size:13px; color:var(--ink-2);
}
.othernews-i b { color:var(--ink); font-weight:600; margin-right:3px; }
.othernews-i:hover { border-color:var(--accent-line); color:var(--accent-ink); }

/* 수강권 신청서 — 누구 앞으로 쓰고 있는지 알리는 띠. 신청서가 길어서
   중간쯤 내려가면 잊습니다. 그래서 위에 붙어 따라옵니다. 상단 막대(z-index 15)
   보다는 뒤에, 카드보다는 앞에 둡니다. */
.reqwho {
  position:sticky; top:var(--topbar-h); z-index:12;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin:-4px 0 14px; padding:8px 12px;
  border-radius:var(--r-full);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  color:var(--ink-2); font-size:13px;
}
.reqwho b { color:var(--accent-ink); font-weight:650; }
.reqwho a { margin-left:auto; color:var(--ink-3); font-size:12px; }
.reqwho a:hover { color:var(--accent-ink); }

/* 고르는 칸이 아니라 **확인하는 칸**. 단추처럼 생겼지만 눌리지 않습니다 —
   이 신청서는 아이 한 명 앞으로만 만들어지기 때문입니다. */
/* 이름 확인 한 줄. 레벨테스트 신청서는 옆에 안내 링크와 '형제 추가' 가
   함께 서므로 가운데 정렬로 묶습니다. */
.pickone { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.wholine-x { font-size:12px; color:var(--ink-3); }
.wholine-x:hover { color:var(--accent-ink); }
.pick-fixed {
  display:inline-block; padding:9px 20px; border-radius:var(--r-full);
  background:var(--accent); color:var(--ink-on-brand);
  font:600 15px var(--sans);
}

/* 칩에 붙는 '오늘 하실 일' 숫자. 홈은 아이 한 명씩만 보여 주므로, 지금 안 보고
   있는 아이의 일이 여기 말고는 드러날 자리가 없습니다. 그래서 회색이 아니라
   **그 아이 색으로 꽉 채웁니다** — 눈에 안 띄면 없는 것과 같습니다. */
.chip-todo {
  display:inline-block; min-width:16px; margin-left:6px; padding:1.5px 5px;
  border-radius:var(--r-full); background:var(--kc, var(--accent)); color:#fff;
  font:700 10.5px/1.35 var(--sans); text-align:center; vertical-align:1px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip-todo { color:#17100F; }
}
:root[data-theme="dark"] .chip-todo { color:#17100F; }

/* '전체' 탭처럼 여러 아이가 함께 있는 화면에서는 카드마다 점으로 표시합니다.
   화면 전체를 한 아이 색으로 칠할 수 없기 때문입니다. */
.kdot {
  display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:5px; vertical-align:1px; flex:none;
}
.kdot.k1 { background:#8B2635; } .kdot.k2 { background:#2F6B50; } .kdot.k3 { background:#3457D5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kdot.k1 { background:#E08A97; }
  :root:not([data-theme="light"]) .kdot.k2 { background:#6FBF95; }
  :root:not([data-theme="light"]) .kdot.k3 { background:#8FAAF0; }
}
:root[data-theme="dark"] .kdot.k1 { background:#E08A97; }
:root[data-theme="dark"] .kdot.k2 { background:#6FBF95; }
:root[data-theme="dark"] .kdot.k3 { background:#8FAAF0; }

/* 알림 '모두 확인' — 화면을 여는 것만으로 읽음 처리하지 않기 때문에
   사람이 눌러 주셔야 메뉴의 숫자가 사라집니다 */
.alert-done { margin-top: 10px; }

/* ── 결제 완료 팝업 ───────────────────────────────────
   원장님: "너무 내용이 길어 … 신청내용을 표로 넣고 안내는 요약해서."
   결제를 막 마치신 분이 알고 싶은 것은 **무엇을 얼마에 샀는지**와
   **언제 연락이 오는지** 둘뿐입니다. */
.paid-tbl {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  margin: 4px 0 14px; padding: 12px 14px;
  border-radius: var(--r-sm); background: var(--surface-3);
  text-align: left; font-size: 13.5px;
}
.paid-tbl dt { color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.paid-tbl dd { margin: 0; color: var(--ink); }
.paid-next { margin: 0 0 4px; font-size: 13.5px; line-height: 1.7; text-align: left; }
.paid-next .sub { display: block; margin-top: 3px; }

/* ── 가능한 시간 표 (수강 신청) ───────────────────────
   원장님: "가능 시간 보기 버튼 생성 후 가능 시간 테이블을 보여줘."
   마감된 시간을 고르셨을 때 다른 시간을 하나씩 찍어 보지 않으셔도 되게,
   비어 있는 칸을 한눈에 보여 드립니다. */
.slotsee {
  align-self: flex-start; margin: 8px 0 2px;
  padding: 9px 16px; border-radius: var(--r-full);
  border: 1px solid var(--accent); background: var(--surface);
  color: var(--accent-ink); font: 600 13.5px/1 var(--sans); cursor: pointer;
}
.slotsee:hover { background: var(--accent); color: var(--ink-on-brand); }

.slottable { margin-top: 10px; }
.slottable > summary {
  cursor: pointer; list-style: none; padding: 9px 2px;
  font: 600 13.5px/1.5 var(--sans); color: var(--accent-ink);
}
.slottable > summary::-webkit-details-marker { display: none; }
.slottable > summary::after { content: ' ▾'; font-size: 11px; }
.slottable[open] > summary::after { content: ' ▴'; }
.slottable-in { padding: 4px 0 2px; }
.slottable-legend {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
  font-size: 12.5px; color: var(--ink-3);
}

/* 표에서 못 고를 때의 이유 — 표를 닫지 않고 그 자리에 적습니다 */
/* 선생님으로 고르기 — 담임제라 "코니 선생님께" 가 자연스러운 요구입니다.
   학부모 화면이라 **성을 뺀 이름만** 씁니다 (원장님이 정하신 규칙). */
.pickins { margin:0 0 14px; }
.pickins-l { display:block; font:600 12.5px var(--sans); color:var(--ink-3); margin-bottom:7px; }
.pickins-b { display:flex; flex-wrap:wrap; gap:7px; }
.pickins-b label { cursor:pointer; }
.pickins-b input { position:absolute; opacity:0; width:0; height:0; }
.pickins-b span {
  display:inline-block; padding:8px 14px; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface);
  font:600 13.5px var(--sans); color:var(--ink-2);
}
.pickins-b input:checked + span {
  background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-ink);
}
.pickins-b input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.pickins-tip { margin:8px 0 0; font-size:12.5px; color:var(--accent-ink); }

/* 시간표 칸에 적는 선생님 이름 */
.sg.ok { font:600 10.5px/1.2 var(--sans); color:var(--accent-ink); }

.sg-msg {
  margin:8px 0 0; padding:10px 12px; border-radius:var(--r-sm);
  background:var(--amber-soft); color:var(--amber);
  font-size:13px; font-weight:500;
}
.slottable-legend i { display: inline-block; width: 12px; height: 12px;
                      border-radius: 3px; vertical-align: -2px; margin-right: 5px; }
.slottable-legend i.ok { background: var(--accent-soft); border: 1px solid var(--accent-line); }
.slottable-legend i.no { background: var(--surface-3); border: 1px solid var(--border); }
/* 시간이 서른 줄 넘어 세로로 길어집니다 — 표 안에서만 스크롤합니다 */
.slottable-scroll { max-height: 360px; overflow: auto; border: 1px solid var(--border);
                    border-radius: var(--r-sm); background: var(--surface); }
#slotgrid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
#slotgrid thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-2);
  padding: 7px 4px; font-weight: 600; color: var(--ink-2);
  border-bottom: 1px solid var(--border);
}
#slotgrid tbody th {
  position: sticky; left: 0; background: var(--surface);
  padding: 4px 8px; font: 500 12px/1.4 var(--mono, monospace);
  color: var(--ink-2); text-align: left; white-space: nowrap;
  border-right: 1px solid var(--border);
}
#slotgrid td { padding: 3px; text-align: center; }
#slotgrid tr.allfull { opacity: .45; }
#slotgrid tr.allfull th { color: var(--ink-3); }
.sg { display: block; width: 100%; height: 22px; border-radius: 4px; border: 1px solid; }
button.sg.ok { background: var(--accent-soft); border-color: var(--accent-line); cursor: pointer; }
button.sg.ok:hover { background: var(--accent); border-color: var(--accent); }
span.sg.no { background: var(--surface-3); border-color: var(--border); }

/* ── 반 사건 (관리자) ─────────────────────────────────
   반 하나에 일이 생기면 학생 전원의 돈이 함께 움직입니다. 누르기 전에
   "누구에게 얼마" 가 보여야 합니다. */
.ge-preview, .ge-past {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 14px; background: var(--surface-3);
}
.ge-preview-h { font: 600 13px/1.5 var(--sans); color: var(--ink-2); margin-bottom: 8px; }
.ge-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13.5px;
}
.ge-row:first-of-type { border-top: 0; }
.ge-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ge-manual { color: var(--amber); font-size: 12.5px; }
.ge-total { border-top: 2px solid var(--border-strong); }
.ge-note { margin: 8px 0 0; font-size: 12.5px; color: var(--amber); }

.ge-form { display: grid; gap: 8px; max-width: 620px; }
.ge-l { font: 600 12.5px/1.5 var(--sans); color: var(--ink-2); margin-top: 6px; }
.ge-kind {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; cursor: pointer; font-size: 13.5px;
}
.ge-kind input { margin-top: 3px; flex: none; }
.ge-kind-t { display: block; font-weight: 600; }
.ge-kind:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ge-opts { display: grid; gap: 6px; padding: 10px 12px;
           border: 1px dashed var(--border); border-radius: var(--r-sm); }
.ge-past { margin-top: 16px; }

/* ── 수강권 목록 아래 작은 단추 ─────────────────────
   원장님: "카드밑에 조그만 버튼으로." 환불은 카드마다 달지 않고 여기
   한 곳에서 들어갑니다 — 그만두는 길이 다니는 길보다 눈에 띄면 안 됩니다. */
.passfoot { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.l-student .passfoot .btn-sm,
.passfoot .btn-sm {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--r-full);
  border:1px solid var(--accent-line); background:var(--surface);
  color:var(--accent-ink); font:600 13px/1 var(--sans); text-decoration:none;
}
.passfoot .btn-sm.ghost { border-color:var(--border); color:var(--ink-3); }
.passfoot .btn-sm:hover { border-color:var(--accent); color:var(--accent-ink); }
.btn-sm-n {
  min-width:17px; height:17px; padding:0 5px; border-radius:var(--r-full);
  background:var(--accent); color:var(--ink-on-brand);
  font:700 11px/17px var(--sans); text-align:center;
}

/* ── 결제 내역의 환불 신청 ──────────────────────────── */
.rfpick {
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--border); border-radius:var(--r-md);
  padding:12px 14px; margin-top:8px; background:var(--surface);
}
.rfpick:hover { border-color:var(--accent-line); }
.rfpick-t { display:block; font:600 14.5px/1.5 var(--sans); }
.rfpick-d { display:block; font-size:13px; color:var(--ink-2); margin-top:3px; }
.rfrule { margin-top:10px; }
.rfrule > summary {
  cursor:pointer; list-style:none; padding:6px 2px;
  font:500 13.5px/1.5 var(--sans); color:var(--ink-3);
}
.rfrule > summary::-webkit-details-marker { display:none; }
.rfrule > summary::after { content:' ▾'; font-size:11px; }
.rfrule[open] > summary::after { content:' ▴'; }
.rfrule ul { margin:4px 0 0; padding-left:18px; font-size:13px;
             color:var(--ink-2); line-height:1.7; }

/* 상태만 완료로 되어 있고 돈이 안 나간 건 — 가장 위험한 상태입니다 */
.rf-nomoney {
  margin: 12px 0 0; padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--red-soft); border: 1px solid var(--red-line);
  color: var(--red); font-size: 13px; line-height: 1.65;
}

/* 청약철회 — 전액을 드려야 하는 건은 놓치면 분쟁이 됩니다 */
.rf-cooloff {
  margin: 10px 0 0; padding: 10px 13px; border-radius: var(--r-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent-ink); font-size: 13px; line-height: 1.65;
}

/* 리포트 강사 코멘트 — 번역을 먼저 보여 드리고 원문은 접어 둡니다 */
.fb-orig > summary {
  cursor: pointer; font-size: 11.5px; color: var(--ink-3);
  margin-top: 4px; list-style: none;
}
.fb-orig > summary::before { content: '▸ '; }
.fb-orig[open] > summary::before { content: '▾ '; }
.fb-orig[open] { font-size: 12.5px; color: var(--ink-3); }
/* .gate-card label 이 display:block, .gate-card input 이 width:100% 라서
   그대로 두면 체크박스와 글이 두 줄로 갈라집니다. 같은 만큼 구체적으로
   적어(.gate-card 를 앞에 붙여) 덮어씁니다. */
.gate-card label.agree-check,
.agree-check {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; margin: 0;
  font-size: 13px; font-weight: 600;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.gate-card label.agree-check input[type="checkbox"],
.agree-check input[type="checkbox"] {
  display: inline-block;
  width: 17px; height: 17px;
  min-width: 17px;            /* 글이 길어도 네모가 찌그러지지 않게 */
  margin: 0; padding: 0;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.agree-check > span { flex: 1; }
.agree-check b { color: var(--red, #b4462f); }
.gate-card label.agree-optional,
.agree-optional {
  border: 1px solid var(--border); border-radius: 10px;
  margin: 10px 0 4px; font-weight: 500;
}
.agree-optional .quiet { font-weight: 400; color: var(--ink-3, #8a8a8a); }

/* 약관 전문 화면 */
.legal-card { max-width: 720px; text-align: left; }
.legal-title { font-size: 20px; margin: 6px 0 2px; }
.legal-body {
  margin: 16px 0 20px;
  font-size: 13px; line-height: 1.8; color: var(--ink-2, #4a4a4a);
  white-space: normal; word-break: break-word;
}

/* 로그인 화면 — 옛 회원 안내 상자.
   "로그인이 안 된다" 는 문의의 대부분이 '이메일 대신 예전 아이디' 라서입니다. */
.gate-note {
  margin-top: 14px; padding: 12px 14px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px; line-height: 1.75;
  color: var(--ink-2, #4a4a4a);
  text-align: left;
}
.gate-note b { color: var(--ink, #2c2c2c); }
.gate-note .quiet { color: var(--ink-3, #8a8a8a); }

/* ── 관리자 · 약관 본문 편집 ────────────────────────────
   약관은 다른 설정과 달리 통째로 긴 글이라 넓은 칸이 필요합니다.
   SQL 을 다시 돌리지 않고 여기서 고칠 수 있게 두었습니다. */
.legal-edit { margin-bottom:20px; }
.legal-field { display:block; margin-bottom:14px; }
.legal-label {
  display:block; margin-bottom:6px;
  font:600 13px var(--sans); color:var(--ink-2);
}
.legal-label em {
  font-style:normal; font-weight:400; color:var(--ink-3); margin-left:6px;
}
.legal-field textarea,
.legal-field input[type=text] {
  width:100%; box-sizing:border-box; padding:10px 12px;
  border:1px solid var(--border); border-radius:8px;
  font:13px/1.7 var(--mono, var(--sans)); color:var(--ink);
  background:var(--surface); resize:vertical;
}
.legal-field input[type=text] { font:14px var(--sans); max-width:220px; }
.legal-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* 발급 화면 — 그 시각에 되는 선생님이 몇 분인지. 부딪힌다는 경고만 보고
   누구로 바꿔야 할지 모르는 일을 없앱니다. */
.slot-free { margin-left:8px; color:var(--muted); font-size:12.5px; }
.slot-free.none { color:#b4451f; font-weight:600; }

/* 결제 내역 — 무슨 수업이었는지 아주 작게 (원장님 요청) */
.paywhat {
  margin-top:6px; padding-left:9px; border-left:2px solid var(--line);
  color:var(--muted); font-size:12px; line-height:1.6;
}

/* 강사 화면 — 지난 피드백을 학생마다 나눠 보여 줄 때의 이름표 */
.kv-who {
  margin: 14px 0 6px; font: 700 13px var(--sans); color: var(--ink-3);
  letter-spacing: .02em;
}
.kv-who:first-of-type { margin-top: 4px; }

/* 탈퇴 사유 갈래 — 자유 서술만 받으면 세어 볼 수가 없습니다 */
.wd-why { display:grid; gap:2px; margin:0 0 12px; }
.wd-why label {
  display:flex; align-items:flex-start; gap:9px; cursor:pointer;
  padding:7px 2px; font-size:14px; line-height:1.5;
}
.wd-why input { margin-top:3px; flex:none; }
.wd-why label:hover span { color:var(--accent-ink); }

/* 탈퇴 갈래 막대 — 어디를 고쳐야 하는지 먼저 보이게 */
.wdbars { display:grid; gap:9px; }
.wdbar { display:grid; grid-template-columns:170px 1fr 48px; align-items:center; gap:12px; }
.wdbar-l { font-size:13.5px; color:var(--ink-2); }
.wdbar-t { height:12px; background:var(--surface-2); border-radius:var(--r-full); overflow:hidden; }
.wdbar-t i { display:block; height:100%; background:var(--accent); border-radius:var(--r-full); }
.wdbar-n { font:600 13px var(--sans); color:var(--ink-3); text-align:right; }
.wd-note { font-size:13px; color:var(--ink-2); max-width:340px; }
@media (max-width: 700px) {
  .wdbar { grid-template-columns:1fr 44px; }
  .wdbar-t { grid-column:1 / -1; }
}

/* 공휴일로 밀린 회차 — 보충 날짜 정하기 */
.hs-ask { border-color: var(--amber, #c98a2e); }
.hs-row {
  display:grid; gap:10px; padding:13px 0; border-top:1px solid var(--line);
}
.hs-row:first-of-type { border-top:0; }
.hs-what b { font-size:15px; }
.hs-what .sub { margin-left:6px; }
.hs-pick { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.hs-pick label { display:grid; gap:4px; font-size:12.5px; color:var(--ink-3); }
.hs-pick label.chk { display:flex; align-items:center; gap:6px; }
.hs-go { display:flex; gap:8px; flex-wrap:wrap; }

/* 교재 진급 확인 — 다 뗀 교재에서 다음 교재로 */
.adv-flow {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:12px 0; padding:12px 14px;
  background:var(--surface-2); border-radius:var(--r-md);
}
.adv-from, .adv-to { display:grid; gap:1px; min-width:0; }
.adv-from b, .adv-to b { font-size:14.5px; line-height:1.4; }
.adv-arrow { color:var(--accent); font-size:18px; font-weight:700; flex:none; }
.adv-none { color:var(--ink-3); font-weight:600; }
.adv-op { margin-bottom:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.adv-go { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.adv-go label { display:grid; gap:4px; font-size:12.5px; color:var(--ink-3); min-width:230px; }
.adv-or { color:var(--ink-3); font-size:12.5px; padding-bottom:9px; }
.adv-why { min-width:180px; }

/* 강사 화면 — 교재를 다 뗀 학생 (사무실 결정 대기) */
.advbox { border-color: var(--amber, #c98a2e); }
.advrow { display:grid; gap:8px; padding:11px 0; border-top:1px solid var(--line); }
.advrow:first-of-type { border-top:0; }
.advrow-w { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.advrow-p { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.advrow-p input[type=text] { flex:1 1 220px; min-width:180px; }

/* 강사 소개 — 관리자 화면 */
.insphoto { display:block; margin:0 0 8px; }
.insphoto img { width:96px; height:96px; border-radius:999px; object-fit:cover;
  border:1px solid var(--border); display:block; }
.chkline { display:flex; align-items:center; gap:7px; font-weight:500; }
.chkline input { width:auto; margin:0; }
.qlist { display:grid; gap:10px; margin-top:10px; }
.qrow { display:flex; gap:12px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; }
.qbody { flex:1; min-width:0; }
.qbody p { margin:6px 0 0; font-size:14px; line-height:1.75; white-space:pre-wrap; }
.qko { color:var(--ink-2); }
.qact { display:flex; flex-direction:column; gap:6px; flex:none; }
.qact .inline { margin:0; }
/* 수업 기록 고르기 — 칸을 세로로 쌓습니다.
   .field 에 모양이 없어서 이름표와 입력칸이 한 줄에 붙어 있었습니다. */
#qform .field { display:block; margin:0 0 14px; }
#qform .field > span { display:block; margin-bottom:5px; font-weight:600; font-size:14px; }
#qform .field > span .hint { font-weight:400; margin-left:6px; }
#qform textarea, #qform input[type=number] { width:100%; }
#qform .row2 { display:grid; gap:14px; grid-template-columns:1fr; align-items:end; }
@media (min-width:640px){ #qform .row2 { grid-template-columns:220px 1fr; } }
#qform .field.chk { display:flex; align-items:center; gap:8px; margin:0 0 14px; }
#qform .field.chk input { width:auto; margin:0; }
#qform .field.chk span { margin:0; }
#qform .btn-row { display:flex; gap:8px; flex-wrap:wrap; }
/* 홈페이지 강사 소개 칸 — 이름표와 입력칸을 세로로 */
.panel:has(> h2 > .sec-note) label { display:block; }
.panel label > input[type=file],
.panel label > input[type=number],
.panel label > textarea { display:block; margin-top:5px; width:100%; max-width:520px; }
.panel label > .hint { display:block; margin-top:4px; }
.panel .grid2 { display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:720px){ .panel .grid2 { grid-template-columns:1fr 1fr; } }

/* 더보기 자료 목록 */
.mlist { display:grid; gap:10px; margin-top:10px; }
.mrow { display:flex; gap:14px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; }
.mthumb { flex:none; width:72px; height:56px; border-radius:var(--r-sm);
  overflow:hidden; background:var(--bg-2); display:flex;
  align-items:center; justify-content:center; }
.mthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.mvid { font:700 12px var(--sans); color:var(--accent); }
.mbody { flex:1; min-width:0; }
.mbody b { display:block; margin-top:4px; font-size:14px; }
.murl { margin:3px 0 0; font-size:12px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mnote { margin:3px 0 0; font-size:12px; color:var(--ink-3); }
.mact { display:flex; flex-direction:column; gap:6px; flex:none; }
.mact .inline { margin:0; }
#mform .field { display:block; margin:0 0 14px; }
#mform .field > span { display:block; margin-bottom:5px; font-weight:600; font-size:14px; }
#mform .field > span .hint { font-weight:400; margin-left:6px; }
#mform input[type=url], #mform input[type=text], #mform input[type=number],
#mform input[type=file] { width:100%; max-width:520px; }
#mform .hint { display:block; margin-top:4px; }
#mform .row2 { display:grid; gap:14px; grid-template-columns:1fr; align-items:end; }
@media (min-width:640px){ #mform .row2 { grid-template-columns:220px 1fr; } }
#mform .field.chk { display:flex; align-items:center; gap:8px; margin:0 0 14px; }
#mform .field.chk input { width:auto; margin:0; }
#mform .field.chk span { margin:0; }
/* 원본 피드백 — 길면 접어 둡니다 */
.qfull { margin-top:6px; }
.qfull > summary {
  list-style:none; cursor:pointer; font-size:14px; line-height:1.75;
  color:var(--ink-2);
}
.qfull > summary::-webkit-details-marker { display:none; }
.qfull > summary em {
  font-style:normal; font-size:12px; font-weight:700; color:var(--accent);
  white-space:nowrap; margin-left:4px;
}
.qfull[open] > summary { display:none; }
.qfull > p { margin:0; font-size:14px; line-height:1.75; white-space:pre-wrap; }