:root {
  color-scheme: light;
  /* ===== EduNote 디자인 토큰 (2026-07-12, EduNote_디자인토큰.md 참조) ===== */
  /* brand indigo (실측: 기존 사용값과 동일) */
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-500:#6366f1;
  --brand-600:#4f46e5; --brand-700:#4338ca; --brand-950:#1e1b4b;
  /* semantic */
  --error:#f04452; --success:#03b26c; --warning:#fe9800; --info-teal:#18a5a5;
  /* grey = 현행 slate 스케일 유지 (토스 웜그레이 전환 안 함) */
  --g900:#0f172a; --g800:#1e293b; --g700:#475569; --g600:#64748b;
  --g500:#94a3b8; --g400:#cbd5e1; --border:#e2e8f0; --surface:#f1f5f9;
  --bg-soft:#f8fafc; --canvas:#ffffff;
  /* motion */
  --m-fast:150ms; --m-std:250ms; --m-slow:400ms;
  --ease-enter:cubic-bezier(0,0,.2,1); --ease-exit:cubic-bezier(.4,0,1,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  /* elevation */
  --sh-subtle:0 1px 3px rgba(0,0,0,.06); --sh-std:0 2px 8px rgba(0,0,0,.08);
  --sh-lift:0 4px 12px rgba(0,0,0,.12); --scrim:rgba(2,9,19,.5);
}
@media (prefers-reduced-motion:reduce){
  :root{ --m-fast:0ms; --m-std:0ms; --m-slow:0ms }
}
html { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', sans-serif;
  background: #f1f5f9;
  color: #1e293b;
  min-height: 100vh;
  overscroll-behavior-y: none;
  overflow-x: hidden; /* body 가로 스크롤바 방지 */
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #e2e8f0; }
::-webkit-scrollbar-thumb { background: #c7ccd1; border-radius: 2px; }

/* ── Header ── */
header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid #eef0f3;
  padding: 0 14px;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  gap: 8px;
  box-sizing: border-box;
}
#headerSchoolName { display: none; }
.logo-wrap  { display:flex; align-items:center; gap:8px; }
.logo-img   { width: 44px; height: 44px; border-radius: 11px; background: transparent; padding: 0; border: none; object-fit: contain; flex-shrink: 0; }
.logo-title { font-size: 14px; font-weight: 900; letter-spacing: -0.3px; color: #1e293b; font-family: 'Pretendard Variable','Pretendard',-apple-system,'Apple SD Gothic Neo',sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-date  { font-size: 11px; color: #94a3b8; margin-top: 2px; white-space: nowrap; }

/* ── Buttons ── */
/* 버튼 즉각 눌림 피드백 (전역) */
button:not(:disabled):active{transform:scale(.97)}
/* 버튼 처리중 상태 */
.btn-busy{pointer-events:none;opacity:.72;cursor:default}
.btn-busy:active{transform:none}
.btn-spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-2px;margin-right:6px;animation:btnspin .6s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
.btn { border: none; border-radius: 10px; padding: 9px 16px; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; transition: opacity 0.15s, background 0.15s; }
.btn:hover { opacity: 0.85; }
.btn-indigo { background: #4f46e5; box-shadow: 0 2px 8px rgba(79,70,229,0.22); }
.btn-full   { width: 100%; padding: 14px; font-size: 15px; border-radius: 14px; }
.btn-edit   { flex:1; padding:7px; background:#ede9fe; border:1px solid #c4b5fd; border-radius:10px; color:#6d28d9; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.btn-del    { padding:7px 14px; background:#fee2e2; border:1px solid #fca5a5; border-radius:10px; color:#dc2626; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.btn-cancel { padding:13px 20px; background:#f1f5f9; border:1px solid #cbd5e1; border-radius:12px; color:#64748b; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }

/* ── Tabs ── */
.tabs { display:flex; gap:3px; padding:10px 12px 0; border-bottom:2px solid #e2e8f0; background:#fff; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { border:1px solid #e2e8f0; border-bottom:none; border-radius:10px 10px 0 0; padding:8px 12px; color:#94a3b8; font-size:11px; font-weight:700; cursor:pointer; background:#f8fafc; font-family:inherit; transition:all 0.2s; flex:0 0 auto; text-align:center; white-space:nowrap; }
.tab.soon { color:#cbd5e1; }
.tab.active { background:#4f46e5; border-color:transparent; color:#fff; }

/* ── Content ── */
.content { padding:20px; max-width:100%; margin:0 auto; box-sizing:border-box; }
.panel { display:none; flex-direction:column; gap:14px; }
.panel.active { display:flex; animation: panelIn .22s ease-out; }

/* ── Card ── */
.card { background:#fff; border:1px solid #eef0f3; border-radius:16px; padding:18px; box-shadow:0 1px 3px rgba(15,23,42,0.04), 0 6px 20px rgba(15,23,42,0.03); }
.card-title { font-size:12px; font-weight:800; margin-bottom:12px; letter-spacing:-0.2px; }

/* ── Form ── */
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
label.field-label { display:block; font-size:11px; font-weight:700; color:#64748b; margin-bottom:6px; letter-spacing:0; }
input[type=text], input[type=date], select, textarea {
  width:100%; background:#f2f4f6; border:1.5px solid #eaecef; border-radius:10px;
  padding:10px 13px; color:#1e293b; font-size:14px; outline:none; font-family:inherit;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input[type=text]:focus, input[type=date]:focus, select:focus, textarea:focus { border-color:#4f46e5; background:#fff; box-shadow:0 0 0 3px rgba(79,70,229,0.12); }
select option { background:#fff; color:#1e293b; }
textarea { resize:vertical; }

/* ── Progress ── */
.prog-wrap { margin-top:10px; padding:10px 14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; display:flex; align-items:center; gap:12px; }
.prog-bar-bg { flex:1; height:7px; background:#e2e8f0; border-radius:4px; overflow:hidden; }
.prog-bar    { height:100%; border-radius:4px; transition:width 0.4s ease; }

/* ── Record card ── */
.rec-card { background:#fff; border:1.5px solid #e2e8f0; border-radius:12px; padding:16px; margin-bottom:10px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.rec-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #f1f5f9; flex-wrap:wrap; }
.rec-date   { font-size:12px; font-weight:700; color:#64748b; }
.rec-student { font-size:12px; font-weight:800; color:#6366f1; background:#ede9fe; padding:2px 8px; border-radius:20px; }
.po-badge    { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700; margin-top:3px; }
.po-section  { font-size:12px; font-weight:800; }
.rec-row    { font-size:13px; margin-bottom:7px; line-height:1.5; border-top:1.5px solid #e2e8f0; padding-top:7px; margin-top:4px; }
.rec-label  { font-weight:700; }
.rec-memo   { font-size:13px; color:#334155; margin-top:4px; border-top:1.5px solid #e2e8f0; padding-top:7px; }
.rec-btns   { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.rec-btns .btn-edit { flex:1 1 auto; min-width:72px; white-space:nowrap; }

/* ── Stats ── */
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stat-card { background:#fff; border-radius:12px; padding:16px 12px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,0.05); border:1px solid #e2e8f0; }
.stat-icon  { font-size:22px; }
.stat-val   { font-size:22px; font-weight:800; margin-top:4px; }
.stat-label { font-size:11px; color:#64748b; margin-top:2px; }
.dist-wrap  { display:flex; gap:8px; }
.dist-item  { flex:1; text-align:center; }
.dist-emoji { font-size:18px; margin-bottom:4px; }
.dist-count { font-size:16px; font-weight:800; }
.dist-label { font-size:10px; color:#64748b; }
.dist-pct   { font-size:10px; color:#94a3b8; }

@media (min-width: 768px) {
  /* ── PC 레이아웃: 사이드바+헤더 고정, 콘텐츠 마진 ── */
  #mainApp.sidebar-active {
    display: block !important;
  }

  /* 사이드바: 좌측 고정 */
  #sidebar {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: 0;
    bottom: 0; /* height:100vh 대신 양끝 고정 — 스크롤바/뷰포트 계산 차이에도 항상 화면 안 */
    left: 0;
    width: 220px;
    height: auto;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    overflow: hidden;
    z-index: 100;
  }

  /* 헤더: 상단 고정 */
  #mainApp.sidebar-active > header {
    display: flex !important;
    position: fixed !important;
    top: 0;
    left: 220px;
    right: 0;
    height: 64px;
    padding: 0 32px;
    background: #fff;
    border-bottom: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    box-sizing: border-box;
    z-index: 50;
    align-items: center;
  }

  /* 탭: PC에서 숨김 */
  #mainApp.sidebar-active > .tabs { display: none !important; }

  /* PC 헤더에서 로고/타이틀 숨김 */
  #mainApp.sidebar-active > header .logo-wrap { visibility: hidden; width: 0; overflow: hidden; padding: 0; margin: 0; }
  #headerSchoolName { display: block; }
  #mainApp.sidebar-active > header #sidebarUserId { display: inline !important; }
  #mainApp.sidebar-active > header #sidebarUser { max-width: none !important; font-size: 13px !important; }
  #mainApp.sidebar-active > header #sidebarBadge { font-size: 11px !important; padding: 3px 8px !important; }
  #mainApp.sidebar-active > header #planBadge { font-size: 11px !important; padding: 3px 8px !important; }
  #mainApp.sidebar-active > header > div:last-child { gap: 8px !important; }
  #mainApp.sidebar-active > header #myPageBtn { font-size: 11px !important; padding: 6px 10px !important; }
  #mainApp.sidebar-active > header #logoutBtn { font-size: 11px !important; padding: 6px 10px !important; }

  /* 콘텐츠: 사이드바+헤더 여백 확보, 자체 스크롤 컨테이너 */
  #mainContent {
    position: fixed !important;
    top: 64px;
    left: 220px;
    right: 0;
    bottom: 0;
    margin: 0 !important;
    max-width: none !important;
    padding: 28px 32px !important;
    background: #f1f5f9;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* 패널 콘텐츠 최대 너비 제한 + 가운데 정렬 (가독성) */
  #mainContent > .panel {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  /* 입력 탭은 더 좁게 (가독성) */
  #mainContent > #panel-input {
    max-width: 780px;
  }

  .card { padding: 24px; border-radius: 16px; }
  .card-title { font-size: 13px; }
  .btn { padding: 11px 22px; font-size: 13px; }
  .btn-full { padding: 15px; font-size: 16px; }
  input[type=text], input[type=date], select, textarea { font-size: 15px; padding: 12px 16px; }
  .rec-card { padding: 20px; margin-bottom: 0; }
  .rec-date { font-size: 13px; }
  .rec-row { font-size: 14px; }
  .rec-memo { font-size: 14px; }
  #recordList { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-val { font-size: 26px; }
  .grid2 { gap: 20px; }
  #toast { font-size: 14px; padding: 13px 20px; }
}

@media (min-width: 1024px) {
  #mainApp.sidebar-active > header { left: 240px; }
  #sidebar { width: 240px; }
  #mainContent { left: 240px; }
  #recordList { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
}

@media (min-width: 1400px) {
  #mainContent { padding: 36px 48px !important; }
}

/* 사이드바 내부 스타일 */
.sidebar-logo {
  padding: 0 16px;
  height: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 64px;
}
.sidebar-nav {
  flex: 1;
  min-height: 0; /* flex 자식이 내용 높이 이하로 줄어들 수 있게 — 푸터 잘림 방지 */
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-tab:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-tab.active { background: linear-gradient(135deg,#6366f1,#4f46e5); color: #fff; box-shadow: 0 4px 12px rgba(99,102,241,0.4); }
.sidebar-tab .tab-icon { font-size: 18px; width: 24px; text-align: center; }
/* ===== 2단 네비게이션 (1-A) ===== */
.tabs{flex-direction:column!important;align-items:stretch!important;overflow-x:hidden!important;gap:6px!important;padding-bottom:6px!important}
.nav-group-row,.nav-sub-row{display:flex;gap:5px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-group-row::-webkit-scrollbar,.nav-sub-row::-webkit-scrollbar{display:none}
.nav-gchip{flex:0 0 auto;border:1px solid #e2e8f0;border-radius:9px;padding:7px 11px;font-size:11px;font-weight:800;color:#64748b;background:#f8fafc;cursor:pointer;font-family:inherit;white-space:nowrap;display:flex;align-items:center;gap:4px;transition:all .15s}
.nav-gchip.active{background:#4f46e5;border-color:transparent;color:#fff}
.nav-sub-row{padding-left:2px}
.nav-schip{flex:0 0 auto;border:none;border-radius:8px;padding:6px 11px;font-size:11px;font-weight:700;color:#94a3b8;background:#fff;cursor:pointer;font-family:inherit;white-space:nowrap;display:flex;align-items:center;gap:5px}
.nav-schip.active{color:#4f46e5;background:#eef2ff}
.nav-cnt{display:inline-block;min-width:16px;text-align:center;background:#e2e8f0;color:#475569;font-size:10px;font-weight:800;padding:0 5px;border-radius:9px}
.nav-schip.active .nav-cnt{background:#c7d2fe;color:#4338ca}
.nav-cnt.alert{background:#ef4444;color:#fff}
.sb-leaf .nav-cnt.alert{background:#ef4444;color:#fff}
.nav-soon{font-size:9px;font-weight:700;color:#a78bfa;background:#f5f3ff;border:1px solid #ede9fe;padding:0 5px;border-radius:8px}
/* 사이드바 아코디언 */
.sb-group{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:rgba(255,255,255,0.72);font-size:13px;font-weight:800;cursor:pointer;border:none;background:none;font-family:inherit;text-align:left;width:100%;transition:all .15s}
.sb-group:hover{background:rgba(255,255,255,0.07);color:#fff}
.sb-group.active{color:#fff}
.sb-group .sb-ico{width:22px;text-align:center;flex:0 0 22px}
.sb-group .sb-chev{margin-left:auto;font-size:10px;opacity:.7;transition:transform .15s}
.sb-group.open .sb-chev{transform:rotate(90deg)}
.sb-sub{display:flex;flex-direction:column;gap:2px;margin:1px 0 4px 8px;padding-left:8px;border-left:1px solid rgba(255,255,255,0.1)}
.sb-leaf{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;color:rgba(255,255,255,0.55);font-size:12px;font-weight:600;cursor:pointer;border:none;background:none;font-family:inherit;text-align:left;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-leaf:hover{background:rgba(255,255,255,0.08);color:#fff}
.sb-leaf.active{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-weight:700;box-shadow:0 3px 10px rgba(99,102,241,0.35)}
.sb-leaf .nav-cnt{margin-left:auto;background:rgba(255,255,255,0.18);color:#fff}
.sb-leaf .nav-soon{margin-left:auto;background:rgba(255,255,255,0.1);border-color:transparent;color:rgba(255,255,255,0.6)}
/* 대시보드 */
.dash-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:640px){.dash-grid{grid-template-columns:repeat(2,1fr)}}
.dash-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px 14px;text-align:center}
.dash-card.total{background:linear-gradient(135deg,#eef2ff,#f5f3ff);border-color:#c7d2fe}
.dash-num{font-size:30px;font-weight:900;color:#4f46e5;line-height:1}
.dash-lab{font-size:12px;font-weight:700;color:#64748b;margin-top:6px}
.dash-bar-row{display:flex;align-items:center;gap:10px;margin:9px 0}
.dash-bar-lab{width:48px;font-size:12px;font-weight:700;color:#475569;flex:0 0 48px}
.dash-bar-track{flex:1;background:#f1f5f9;border-radius:8px;height:22px;overflow:hidden}
.dash-bar-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,#6366f1,#8b5cf6);min-width:2px;transition:width .7s cubic-bezier(.22,1,.36,1)}
.dash-bar-val{width:40px;text-align:right;font-size:12px;font-weight:800;color:#4f46e5;flex:0 0 40px}
.mp-pane{display:none}
.mp-pane.active{display:block}
.sidebar-bottom {
  padding: 16px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
/* 사이드바 하단 상시 위젯 (이용권 D-day + 발송 잔여 + 충전) */
.sidebar-bottom{padding:13px 12px;gap:9px}
.sbf-plan-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.sbf-plan{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.85);font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sbf-plan svg{flex:0 0 auto}
.sbf-dday{font-size:10px;font-weight:800;padding:2px 7px;border-radius:8px;white-space:nowrap;flex:0 0 auto}
.sbf-chips{display:flex;gap:6px}
.sbf-chip{flex:1;background:rgba(255,255,255,.06);border-radius:8px;padding:7px 8px;text-align:center}
.sbf-chip-lab{font-size:9px;color:rgba(255,255,255,.45);font-weight:700;margin-bottom:1px}
.sbf-chip-val{font-size:15px;font-weight:900;line-height:1;color:#e2e8f0}
.sbf-charge{width:100%;border:none;border-radius:8px;padding:7px;background:#6366f1;color:#fff;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:4px;transition:background .15s,transform .06s}
.sbf-charge:hover{background:#4f46e5}
.sbf-charge:active{transform:scale(.97)}
.sbf-charge svg{flex:0 0 auto}
/* 낮은 뷰포트(확대/작은 창): 푸터 컴팩트 모드 — 충전 버튼은 끝까지 사수 */
@media (max-height: 560px) {
  .sidebar-bottom{padding:8px 10px;gap:6px}
  .sbf-chips{display:none}
  .sbf-charge{padding:6px;font-size:10.5px}
}
@media (max-height: 460px) {
  .sbf-plan-row{display:none}
}
.sidebar-count {
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: auto;
}
.alert { background:#fef2f2; border:1px solid #fca5a5; border-radius:10px; padding:11px 16px; margin-bottom:12px; display:flex; align-items:center; gap:8px; font-size:13px; color:#dc2626; font-weight:600; }

/* ── Misc ── */
.empty    { text-align:center; padding:60px 20px; color:#94a3b8; font-size:15px; }
.save-row { display:flex; gap:10px; }
#toast {
  position:fixed; left:50%; top:78px; transform:translateX(-50%) translateY(-120px);
  opacity:0; pointer-events:none; z-index:99999;
  display:flex; align-items:center; gap:9px;
  background:#202632; color:#fff;
  border-radius:999px; padding:13px 20px;
  font-size:14px; font-weight:600; letter-spacing:0.1px; line-height:1.4;
  box-shadow:0 8px 30px rgba(15,23,42,0.28);
  max-width:90vw; box-sizing:border-box;
  transition:transform 0.32s cubic-bezier(0.2,0.9,0.3,1.2), opacity 0.25s;
}
#toast.on { transform:translateX(-50%) translateY(0); opacity:1; }
#toast .toast-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ── 인쇄용 오버레이 ── */
#printOverlay {
  display:none;
  position:fixed; inset:0; z-index:9999;
  background:#e2e8f0; overflow-y:auto;
  padding:32px;
  font-family:'Pretendard Variable','Pretendard','Apple SD Gothic Neo',sans-serif;
  color:#1e293b;
  box-sizing:border-box;
}
#printArea {
  width:480px;
  margin:0 auto;
  background:#fff;
  padding:24px 28px;
  border-radius:12px;
  box-shadow:0 4px 24px rgba(0,0,0,0.1);
  box-sizing:border-box;
}
#printOverlay .po-header {
  display:flex; align-items:center; gap:14px;
  border-bottom:3px solid #6366f1; padding-bottom:16px; margin-bottom:24px;
}
#printOverlay .po-logo { width:52px; height:52px; aspect-ratio:1/1; border-radius:50%; border:2px solid #6366f1; object-fit:contain; background:#fff; flex:0 0 52px; }
#printOverlay .po-title { font-size:20px; font-weight:900; letter-spacing:-0.3px; font-family:'Pretendard Variable','Pretendard',-apple-system,'Apple SD Gothic Neo',sans-serif; }
#printOverlay .po-sub   { font-size:12px; color:#64748b; margin-top:3px; }
#printOverlay .po-grid  { display:grid; grid-template-columns:1fr; gap:12px; }
#printOverlay .po-card  {
  border:1.5px solid #e2e8f0; border-radius:12px; padding:14px 16px;
  break-inside:avoid; background:#fff;
  word-break:keep-all; word-wrap:break-word; overflow-wrap:break-word;
}
#printOverlay .po-card-date {
  font-size:12px; font-weight:800; color:#000;
  display:inline-block; margin-bottom:4px;
}
#printOverlay .po-card-student {
  font-size:13px; font-weight:800; color:#000; margin-bottom:8px;
}
#printOverlay .po-row {
  font-size:12px; margin-bottom:5px; line-height:1.6; color:#1e293b;
  word-break:keep-all; word-wrap:break-word; overflow-wrap:break-word;
}
#printOverlay .po-badge {
  display:inline-block; font-size:10px; font-weight:700;
  padding:1px 7px; border-radius:20px; margin-left:6px;
}
#printOverlay .po-section {
  font-size:11px; font-weight:800; color:#000;
  text-transform:none; letter-spacing:0; margin-bottom:3px; margin-top:7px;
  display:block; word-break:keep-all;
}
#printOverlay .po-close {
  position:fixed; top:20px; right:28px;
  background:#6366f1; color:#fff; border:none;
  border-radius:9px; padding:8px 16px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; z-index:10000;
}
#printOverlay .po-dl {
  position:fixed; top:20px; right:130px;
  background:#22c55e; color:#fff; border:none;
  border-radius:9px; padding:8px 16px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; z-index:10000;
}

.group-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-radius:10px;padding:10px 16px;cursor:pointer;user-select:none;margin-bottom:6px;font-size:13px;font-weight:800;}
.group-arrow{font-size:11px;transition:transform 0.25s;}
.group-arrow.open{transform:rotate(90deg);}
.group-body{overflow:hidden;transition:max-height 0.3s ease;}
.group-body.collapsed{max-height:0!important;}
/* 이행도 버튼 */
.comp-btn-wrap { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.comp-btn {
  padding:5px 11px; border-radius:20px; border:1.5px solid #e2e8f0;
  background:#f8fafc; color:#64748b; font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all 0.15s;
}
.comp-btn.active {
  border-color: var(--btn-color);
  background: var(--btn-bg);
  color: var(--btn-color);
  font-weight:800;
}
/* 카카오 실시간 상담 플로팅 버튼 반응형 */
#kakaoFab {
  position:fixed; right:18px; bottom:18px; z-index:99990;
  width:56px; height:56px; padding:0; border-radius:50%; background:#FEE500;
  display:flex; align-items:center; justify-content:center; gap:0;
  box-shadow:0 4px 14px rgba(0,0,0,0.22); text-decoration:none;
  transition:transform .15s ease;
}
#kakaoFab .kakaoFabText { font-size:14px; font-weight:800; color:#3C1E1E; white-space:nowrap; }
#kakaoFab .kakaoFabShort { display:none; }
#kakaoFab svg { width:34px; height:34px; flex-shrink:0; }
@media (max-width: 640px) {
  /* 작은 화면: 로그인/가입 모달 패딩 축소 (인증 영역 가로 넘침 방지) */
  .login-modal-box { padding:24px 16px !important; }
  /* 모바일: 헤더의 학원 로고+학원명 숨김 (공간 부족, 로고/EduNote와 겹침 방지) */
  .header-school-pc { display:none !important; }
  /* 모바일: 헤더 EduNote 글씨 표시 */
  .header-title { display:block !important; font-size:13px; }
  #kakaoFab { right:12px; bottom:40px; height:48px; width:48px; padding:0; border-radius:50%; justify-content:center; gap:0; overflow:visible; }
  #kakaoFab svg { width:24px; height:24px; }
  #kakaoFab .kakaoFabLong { display:none; }
  #kakaoFab .kakaoFabShort {
    display:block;
    position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
    font-size:11px; font-weight:800; color:#3C1E1E;
    background:#FEE500; padding:1px 7px; border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.18); white-space:nowrap;
  }
  #kakaoFab .kakaoFabShort::after {
    content:''; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
    border-left:4px solid transparent; border-right:4px solid transparent;
    border-bottom:4px solid #FEE500;
  }
}

/* 수업입력 미리보기 (웹 전용) */
#lessonPreviewToggle{display:none;position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:7000;background:#4f46e5;color:#fff;border:none;border-radius:10px 0 0 10px;width:30px;height:72px;font-size:20px;cursor:pointer;box-shadow:-2px 0 8px rgba(0,0,0,0.12);font-family:inherit;align-items:center;justify-content:center}
#lessonPreviewPane{position:fixed;top:0;right:0;bottom:0;width:min(440px,44vw);background:#eef2f7;border-left:1px solid #d8dee9;z-index:6990;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;box-shadow:-6px 0 20px rgba(0,0,0,0.08)}
#lessonPreviewPane.open{transform:translateX(0)}
@media (min-width:1200px){ body.tab-input #lessonPreviewToggle{display:flex} body.preview-open #lessonPreviewToggle{right:min(440px,44vw) !important} body.preview-open #mainContent{padding-right:calc(min(440px,44vw) + 24px) !important} }
@media (max-width:1199px){ #lessonPreviewPane,#lessonPreviewToggle{display:none !important} }

/* 미리보기 추가: 토글 라벨 + 모바일 시트 + 입력카드 폭 */
#lessonPreviewToggle{flex-direction:column;height:auto;min-height:84px;padding:12px 2px;width:36px}
#lessonPreviewFab{display:none;position:fixed;right:18px;bottom:82px;z-index:99991;background:#4f46e5;color:#fff;border:none;border-radius:24px;padding:11px 18px;font-size:13px;font-weight:800;box-shadow:0 4px 14px rgba(79,70,229,.4);cursor:pointer;font-family:inherit;align-items:center;gap:6px}
#lessonPreviewBackdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9450}
#lessonPreviewSheet{position:fixed;left:0;right:0;bottom:0;height:64vh;background:#fff;border-radius:18px 18px 0 0;z-index:9500;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .28s ease;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
#lessonPreviewSheet.open{transform:translateY(0)}
@media (max-width:1199px){ body.tab-input #lessonPreviewFab{display:flex} }
@media (max-width:640px){ #lessonPreviewFab{right:12px;bottom:100px} }
@media (min-width:1200px){ #lessonPreviewFab,#lessonPreviewBackdrop,#lessonPreviewSheet{display:none !important} #panel-input{max-width:780px} }

/* ── init loader keyframe (moved from inline) ── */
    @keyframes loaderSlide {
      0%   { width:0%;   margin-left:0% }
      50%  { width:60%;  margin-left:20% }
      100% { width:0%;   margin-left:100% }
    }
  

/* ── 선택저장(과제목록/통계 체크박스 모드) ── */
.rec-sel-box, .stu-sel-box { display:none; }
body.sel-mode-list .rec-sel-box { display:flex; }
body.sel-mode-stat .stu-sel-box { display:flex; }
.rec-sel-wrap.sel-on > .rec-card { outline:2.5px solid #6366f1; outline-offset:-3px; }
.stu-sel-wrap.sel-on { box-shadow:0 0 0 2.5px #6366f1; border-radius:9px; }

/* ───────── 랜딩페이지 (lp-) ───────── */
.lp-section { max-width:1000px; margin:0 auto; padding:66px 20px; }
.lp-row { display:flex; gap:48px; align-items:center; }
.lp-row.lp-rev { flex-direction:row-reverse; }
.lp-col { flex:1 1 0; min-width:0; }
.lp-illust { flex:1 1 0; min-width:0; }
.lp-illust img { width:100%; height:auto; display:block; }
.lp-eyebrow { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.03em; color:#4f46e5; background:#eef2ff; padding:5px 13px; border-radius:999px; margin-bottom:15px; }
.lp-badge-soon { display:inline-block; font-size:10px; font-weight:800; color:#b45309; background:#fef3c7; padding:3px 9px; border-radius:999px; margin-left:7px; vertical-align:middle; letter-spacing:0; }
.lp-h2 { font-size:26px; font-weight:900; color:#0f172a; line-height:1.34; margin:0 0 15px; letter-spacing:-.01em; }
.lp-p { font-size:14.5px; color:#475569; line-height:1.8; margin:0 0 18px; }
.lp-list { list-style:none; padding:0; margin:0; }
.lp-list li { position:relative; padding-left:30px; font-size:13.5px; color:#334155; line-height:1.5; margin-bottom:11px; font-weight:600; }
.lp-list li::before { content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; line-height:20px; text-align:center; font-size:12px; font-weight:900; color:#fff; background:linear-gradient(135deg,#6366f1,#4f46e5); border-radius:7px; }
.lp-hero { background:linear-gradient(160deg,#eef2ff 0%,#f8fafc 100%); }
.lp-hero .lp-h1 { font-size:32px; font-weight:900; color:#0f172a; line-height:1.3; letter-spacing:-.015em; margin:0 0 16px; }
@media (max-width:760px) {
  .lp-section { padding:46px 18px; }
  .lp-row, .lp-row.lp-rev { flex-direction:column; gap:28px; }
  .lp-h2 { font-size:22px; }
  .lp-hero .lp-h1 { font-size:25px; }
  .lp-illust { max-width:340px; margin:0 auto; }
}

/* ── 스켈레톤 로딩 (토스풍 shimmer) ─────────────────── */
@keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel {
  background: linear-gradient(90deg, #f1f3f7 25%, #e9ecf2 37%, #f1f3f7 63%);
  background-size: 400% 100%;
  animation: skelShimmer 1.4s ease infinite;
  border-radius: 12px;
}
.skel-row { height: 56px; }
.skel-stack { display: flex; flex-direction: column; gap: 10px; }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: #f1f3f7; }
}

/* ── 빈 상태 (토스풍 empty state) ─────────────────── */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:5px; padding:36px 20px; text-align:center; }
.empty-state .es-ico { width:52px; height:52px; border-radius:50%; background:#f2f4f6; display:flex; align-items:center; justify-content:center; margin-bottom:7px; }
.empty-state .es-title { font-size:14.5px; font-weight:800; color:#475569; }
.empty-state .es-sub { font-size:12px; color:#94a3b8; line-height:1.55; }
.empty-state .es-cta { margin-top:10px; padding:9px 18px; background:#4f46e5; color:#fff; border:none; border-radius:10px; font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; }

/* ── 모바일 바텀시트 (토스풍) ─────────────────── */
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheetDim { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .as-sheet { align-items: flex-end !important; padding: 0 !important; animation: sheetDim .2s ease; }
  .as-sheet > div {
    width: 100% !important;
    max-width: none !important;
    overflow-y: auto;
    border-radius: 22px 22px 0 0 !important;
    max-height: 86vh !important;
    box-shadow: 0 -8px 40px rgba(15,23,42,.18) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    animation: sheetUp .3s cubic-bezier(.22, 1, .36, 1);
  }
  .as-sheet > div::before {
    content: ''; display: block; width: 44px; height: 4px; border-radius: 4px;
    background: #e2e8f0; margin: 2px auto 14px;
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .as-sheet, .as-sheet > div { animation: none; }
}

/* ── 토글 스위치 (토스풍, 설정용 체크박스 대체) ─────────────────── */
.tgl {
  -webkit-appearance: none; appearance: none;
  width: 40px; height: 24px; border-radius: 99px;
  background: #d3d9e0; position: relative; cursor: pointer;
  transition: background .2s; flex-shrink: 0; margin: 0; border: none; outline: none;
}
.tgl:checked { background: #4f46e5; }
.tgl::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s cubic-bezier(.22,1,.36,1);
}
.tgl:checked::after { transform: translateX(16px); }
.tgl:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .tgl, .tgl::after { transition: none; } }


/* ── 탭 전환 트랜지션 (토스풍) ─────────────────── */
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .panel.active { animation: none; } }

/* ── 고정폭 숫자 — 카운트업·통계 자리 흔들림 방지 ── */
body { font-variant-numeric: tabular-nums; }

/* ── 상태 뱃지 4색 체계 (2026-07-10): ok=teal 정상 / warn=amber 주의 / danger=red 문제 / muted=gray 비활성 ── */
.bdg { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; line-height:1.5; white-space:nowrap; vertical-align:middle; }
.bdg-ok     { background:#ccfbf1; color:#0f766e; }
.bdg-warn   { background:#fef3c7; color:#b45309; }
.bdg-danger { background:#fee2e2; color:#dc2626; }
.bdg-muted  { background:#f1f5f9; color:#64748b; }