/* Pretendard 서브셋 — KS X 1001 상용 한글 2350자 + 라틴/기호.
   원본 1.48MB → 328KB (78% 감소). 강사가 쓰는 임의의 이름·문구까지 덮는다.
   unicode-range 분할은 이 서비스에선 이득이 없다 — 모든 페이지가 한글이라
   결국 한글 구간을 받게 되고, 라틴 구간은 7KB에 불과하다. */
@font-face{font-family:'Pretendard';font-weight:400;font-style:normal;font-display:swap;
  src:local('Pretendard Regular'),url('/fonts/Pretendard-Regular.subset.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:600;font-style:normal;font-display:swap;
  src:local('Pretendard SemiBold'),url('/fonts/Pretendard-SemiBold.subset.woff2') format('woff2')}

:root{
  --bg:#fff;--ink:#14213d;--mid:#4d5771;--soft:#6b7488;--card:#fff;--line:#e3e6ed;
  --acc:#14213d;--on:#fff;--wash:#f7f8fb;--aline:#dfe3ec;
  --r:14px;--rs:10px;
  --kr:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
[data-theme=forest]{--bg:#f8faf8;--ink:#1a2e22;--mid:#41604f;--soft:#5a7566;
  --line:#dde8e0;--acc:#2c6e49;--wash:#eaf4ed;--aline:#c4dfcf}
[data-theme=rose]{--bg:#fffafa;--ink:#3d1f28;--mid:#6d4551;--soft:#8a6470;
  --line:#f2dfe3;--acc:#b4415f;--wash:#fdeef1;--aline:#f3ccd5}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--kr);font-size:16px;
  line-height:1.65;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;min-height:100dvh}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:2px;border-radius:4px}

.shell{display:flex;justify-content:center;padding:40px 16px 56px}
.col{width:100%;max-width:440px}
.col.wide{max-width:720px}

.avatar{width:80px;height:80px;border-radius:50%;background:var(--wash);color:var(--acc);
  border:1px solid var(--aline);margin:0 auto 14px;display:flex;align-items:center;
  justify-content:center;font-size:29px;font-weight:600;line-height:1.15;
  letter-spacing:-.03em;padding-bottom:2px;overflow:hidden}
.avatar:has(img){padding-bottom:0}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.name{font-size:26px;font-weight:600;letter-spacing:-.022em;line-height:1.3;margin:0;text-align:center}
.tagline{font-size:16px;line-height:1.6;color:var(--mid);margin:6px 0 0;text-align:center}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.card.hero{background:var(--wash);border:1.5px solid var(--aline);
  box-shadow:0 1px 2px rgba(20,33,61,.05),0 12px 32px -14px rgba(20,33,61,.16)}
h2{font-size:18px;font-weight:600;margin:0 0 5px;letter-spacing:-.02em;line-height:1.45}
.lead{font-size:15px;line-height:1.65;color:var(--mid);margin:0 0 18px}
.lbl{font-size:12px;font-weight:600;color:var(--mid);letter-spacing:.02em;
  display:block;margin:0 0 7px}

input,textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--rs);
  font-size:16px;font-family:var(--kr);color:var(--ink);background:var(--card);min-height:50px}
input::placeholder{color:var(--soft)}
input:focus,textarea:focus{border-color:var(--acc);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 14%,transparent)}
textarea{min-height:76px;resize:vertical;line-height:1.6}

button{padding:13px 16px;border:0;border-radius:var(--rs);cursor:pointer;background:var(--acc);
  color:var(--on);font-size:16px;font-weight:600;font-family:var(--kr);min-height:50px;
  transition:opacity .15s,transform .06s}
button:hover:not(:disabled){opacity:.9}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.5;cursor:default}
button.sec{background:var(--card);color:var(--ink);border:1px solid var(--line)}
button.block{width:100%}
button.sm{min-height:40px;padding:9px 14px;font-size:14px}

.field{display:flex;flex-direction:column;gap:9px}
@media(min-width:520px){.field.row{flex-direction:row;gap:8px}
  .field.row input{flex:1}.field.row button{flex:0 0 108px}}

.msg{font-size:14px;margin:12px 0 0;padding:11px 13px;border-radius:var(--rs);display:none;line-height:1.55}
.msg.show{display:block;animation:rise .22s ease-out}

/* 토스트 — 화면 우하단 고정 오버레이.
   레이아웃에 영향을 주지 않고, 어느 액션이든 같은 자리에 뜬다.
   모바일에서는 하단 전폭(엄지 닿는 곳, 좁은 화면에서 잘리지 않게). */
#toaster{position:fixed;z-index:60;right:16px;bottom:80px;left:auto;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  pointer-events:none;max-width:min(380px,calc(100vw - 32px))}
@media(max-width:520px){#toaster{left:12px;right:12px;bottom:74px;max-width:none;align-items:stretch}}

.toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;
  background:#1e222b;color:#f2f4f8;border:1px solid rgba(255,255,255,.10);
  border-radius:12px;padding:12px 13px;font-size:14px;line-height:1.5;
  letter-spacing:-.01em;box-shadow:0 10px 32px -8px rgba(0,0,0,.45);
  opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,.9,.3,1)}
.toast.in{opacity:1;transform:none}
.toast .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;margin-top:6px;background:#8b93a3}
.toast.ok   .dot{background:#4ade80}
.toast.warn .dot{background:#fbbf24}
.toast.err  .dot{background:#f87171}
.toast .body{flex:1;min-width:0}
.toast .sub{display:block;color:#a8b0bf;font-size:12.5px;margin-top:2px}
.toast .x{flex:0 0 auto;background:none;border:0;color:#8b93a3;cursor:pointer;
  font-size:15px;line-height:1;padding:3px 2px;min-height:0;width:auto;font-family:inherit}
.toast .x:hover{color:#f2f4f8;opacity:1}
@media(prefers-reduced-motion:reduce){.toast{transition:opacity .12s}}

.notice{font-size:13px;color:var(--mid);line-height:1.62;margin:16px 0 0}

/* 입력칸 바로 아래 힌트·오류. 오류는 관습대로 input 직후에 둔다. */
.hint{font-size:13px;margin:7px 0 0;line-height:19px;color:var(--mid)}
.hint.err{color:#8f2d2d}
.hint.ok{color:#14572c}
.notice a{color:var(--mid)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pill{display:flex;gap:8px;align-items:center;background:var(--wash);
  border:1px dashed var(--aline);border-radius:var(--rs);padding:11px 13px}
.pill code{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:480px){.pill{flex-direction:column;align-items:stretch}
  .pill code{text-align:center}}

.empty{text-align:center;padding:30px 18px;border:1px dashed var(--line);
  border-radius:12px;background:var(--wash)}
.empty .big{font-size:15px;font-weight:600;margin-bottom:5px}
.empty p{color:var(--mid);font-size:13.5px;margin:0 0 16px;line-height:1.6}

.sw{display:flex;gap:10px}
.sw button{width:38px;height:38px;min-height:38px;border-radius:50%;padding:0;
  border:2px solid transparent}
.sw button[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg) inset}
.stack{display:flex;flex-direction:column;gap:16px}
.count{font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.muted{color:var(--mid);font-size:13.5px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 카카오톡 문의 플로팅 — 강사 화면에만. 학생은 우리 고객이 아니라 선생님을 보고 온 사람이다. */
.helpbtn{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;align-items:center;gap:0;
  flex-direction:row-reverse;
  background:#FEE500;color:#191600;border-radius:999px;padding:11px;text-decoration:none;
  box-shadow:0 4px 16px -4px rgba(0,0,0,.25);transition:gap .18s,padding .18s}
.helpbtn span{font-size:14px;font-weight:600;letter-spacing:-.01em;max-width:0;overflow:hidden;
  white-space:nowrap;transition:max-width .18s}
.helpbtn:hover,.helpbtn:focus-visible{gap:7px;padding:11px 12px 11px 15px}
.helpbtn:hover span,.helpbtn:focus-visible span{max-width:140px}
@media(max-width:520px){.helpbtn{right:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.helpbtn,.helpbtn span{transition:none}}