/* 기원매스 통합관리 — 화면 스타일.
   글꼴: Pretendard (static/fonts/pretendard, SIL OFL 1.1 — base.html 에서 먼저 읽는다). 외부 CDN 없이 우리 서버에서만 내보낸다.
   틀: 어두운 '프레임' 위에 밝은 '캔버스'(본문)를 얹는다. 큰 결은 같고 계정 종류마다 색이 다르다 (base.html 의 body 클래스):
     t-admin     관리자(통합관리자)  — 남색 프레임 · 인디고
     t-assistant 조교(질문답변)      — 짙은 초록 프레임 · 에메랄드 · 민트빛 캔버스
     t-student   학생               — 와인빛 프레임 · 노을 주황 · 크림빛 캔버스
     t-anon      로그인 전           — 세 색을 다 쓴 프레임
   직원 = 왼쪽 메뉴(좁은 화면에서는 위 가로 메뉴), 학생 = 위 메뉴(휴대폰에서는 아래 탭). */
:root {
  --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --faint: #94a3b8;
  --line: #e4e8ef; --line-2: #eef1f6; --card: #fff; --field: #d5dbe5;
  --ok: #16a34a; --ok-soft: #dcfce7; --ok-ink: #166534;
  --warn: #d97706; --warn-soft: #fef3c7; --warn-ink: #92400e;
  --bad: #dc2626; --bad-soft: #fee2e2; --bad-ink: #991b1b;
  --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px;
  --sh-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --sh: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -16px rgba(15, 23, 42, .18);
  --sh-lg: 0 2px 6px rgba(15, 23, 42, .05), 0 26px 60px -26px rgba(15, 23, 42, .32);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 테마 — 기본은 관리자 */
  --frame: #0a0f1f;
  --glow-1: rgba(99, 102, 241, .42); --glow-2: rgba(168, 85, 247, .2); --glow-3: rgba(56, 189, 248, .12);
  --frame-ink: #97a3c4; --frame-strong: #eef0fb; --frame-dim: rgba(255, 255, 255, .34);
  --frame-line: rgba(255, 255, 255, .08); --frame-hover: rgba(255, 255, 255, .06); --frame-on: rgba(129, 140, 248, .2); --frame-bar: #a5b4fc;
  --accent: #4f46e5; --accent-2: #4338ca; --accent-rgb: 79, 70, 229; --accent-soft: #eef0ff; --accent-ink: #3730a3; --ring: rgba(79, 70, 229, .22);
  --accent-grad: linear-gradient(135deg, #818cf8 0%, #6366f1 42%, #7c3aed 100%);
  --ring-a: #818cf8; --ring-b: #4f46e5;
  --canvas: #f5f6fb; --wash: rgba(99, 102, 241, .12); --wash-2: rgba(168, 85, 247, .07);
  --bg: var(--canvas);
}
body.t-assistant {
  --frame: #031a16;
  --glow-1: rgba(16, 185, 129, .36); --glow-2: rgba(45, 212, 191, .18); --glow-3: rgba(132, 204, 22, .1);
  --frame-ink: #8db5a9; --frame-strong: #e4f6ef; --frame-on: rgba(52, 211, 153, .18); --frame-bar: #6ee7b7;
  --accent: #0b8060; --accent-2: #096b50; --accent-rgb: 11, 128, 96; --accent-soft: #e0f4eb; --accent-ink: #075940; --ring: rgba(11, 128, 96, .22);
  --accent-grad: linear-gradient(135deg, #6ee7b7 0%, #10b981 45%, #0d9488 100%);
  --ring-a: #34d399; --ring-b: #0b8060;
  --canvas: #f0f7f3; --wash: rgba(16, 185, 129, .14); --wash-2: rgba(45, 212, 191, .08);
}
body.t-student {
  --frame: #1f0a15;
  --glow-1: rgba(251, 113, 60, .46); --glow-2: rgba(244, 63, 94, .3); --glow-3: rgba(251, 191, 36, .14);
  --frame-ink: rgba(255, 228, 214, .74); --frame-strong: #fff4ee; --frame-on: rgba(255, 255, 255, .14); --frame-bar: #fdba74;
  --accent: #c2410c; --accent-2: #a3360a; --accent-rgb: 194, 65, 12; --accent-soft: #ffedd5; --accent-ink: #9a3412; --ring: rgba(234, 88, 12, .24);
  --accent-grad: linear-gradient(135deg, #fdba74 0%, #f97316 42%, #e11d48 100%);
  --ring-a: #fb923c; --ring-b: #e11d48;
  --canvas: #fbf6f0; --wash: rgba(251, 146, 60, .16); --wash-2: rgba(244, 63, 94, .08);
}
body.t-anon { --glow-1: rgba(99, 102, 241, .4); --glow-2: rgba(249, 115, 22, .26); --glow-3: rgba(16, 185, 129, .26); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--canvas); font-size: 14.5px; line-height: 1.6; letter-spacing: -0.006em;
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(var(--accent-rgb), .22); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
img, video, iframe { max-width: 100%; }
p { margin: .7em 0; }
code { font-family: var(--mono); font-size: .9em; background: var(--line-2); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.ic { width: 18px; height: 18px; flex: none; }

/* ── 프레임 · 캔버스 ──────────────────────────────────── */
body.staff, body.student, body.anon { min-height: 100vh; background-color: var(--frame);
  background-image: radial-gradient(1000px 680px at -8% -14%, var(--glow-1), transparent 62%),
                    radial-gradient(860px 600px at 108% 112%, var(--glow-2), transparent 60%),
                    radial-gradient(700px 520px at 105% -10%, var(--glow-3), transparent 60%);
  background-attachment: fixed; }
main { min-width: 0; }
main.canvas { position: relative; border-radius: 26px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 40px 90px -40px rgba(0, 0, 0, .7);
  background: radial-gradient(1100px 360px at 10% -170px, var(--wash), transparent 70%),
              radial-gradient(900px 320px at 100% -210px, var(--wash-2), transparent 70%), var(--canvas); }
main.canvas > .wrap { max-width: 1240px; margin: 0 auto; padding: 30px 40px 72px; }
main.bare > .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px 40px; }

.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none !important; flex: none; }
.brand .mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -0.03em;
  background: var(--accent-grad); box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
.brand .name { display: flex; flex-direction: column; line-height: 1.2; }
.brand .name b { font-size: 16px; font-weight: 750; letter-spacing: -0.025em; }
.brand .name small { font-size: 11.5px; color: var(--muted); font-weight: 500; letter-spacing: 0; }

/* 직원: 왼쪽 메뉴 (프레임 위) */
body.staff { padding: 10px 10px 10px 256px; }
body.staff main.canvas { min-height: calc(100vh - 20px); }
.side { position: fixed; inset: 0 auto 0 0; width: 256px; z-index: 50; display: flex; flex-direction: column; padding: 22px 14px 14px; color: var(--frame-ink); }
.side-top { padding: 0 8px; }
.side .brand { color: #fff; }
.side .brand .name small { color: var(--frame-ink); }
.role-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 5px 12px 5px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--frame-line); color: var(--frame-strong); font-size: 12.5px; font-weight: 650; }
.role-chip i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--frame-bar); box-shadow: 0 0 0 3px var(--frame-on), 0 0 14px var(--frame-bar); }
.side-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; margin-top: 18px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.nav-group { margin: 16px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--frame-dim); }
.side-nav a { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; color: var(--frame-ink); font-weight: 550; font-size: 14.5px;
  transition: background .15s, color .15s; }
.side-nav a:hover { background: var(--frame-hover); color: #fff; text-decoration: none; }
.side-nav a.on { background: var(--frame-on); color: #fff; font-weight: 650; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.side-nav a.on::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--frame-bar); }
.side-nav a.on .ic { color: var(--frame-bar); }
.side-nav .ic { width: 19px; height: 19px; opacity: .95; }
.side-user { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--frame-line); }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; background: var(--accent-grad); }
.side-user .who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.side-user .who b { color: #fff; font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .who small { color: var(--frame-ink); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user form, .top-user { margin: 0; }
.side-user button.link, .top-user button.link { width: 34px; height: 34px; justify-content: center; border-radius: 10px; color: var(--frame-ink); }
.side-user button.link:hover, .top-user button.link:hover { background: var(--frame-hover); color: #fff; text-decoration: none; }
.side-user button.link span, .top-user button.link span, .toast-x span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 학생: 위 메뉴 (프레임 위) · 로그인 전 화면의 위 막대 */
.topbar { display: flex; align-items: center; gap: 18px; height: 72px; padding: 0 10px; color: #fff; }
body.student .topbar { max-width: 1100px; margin: 0 auto; }
.topbar .brand { color: #fff; }
.topbar .brand .name small { color: var(--frame-ink); }
.topbar.plain { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.topbar .top-link { margin-left: auto; font-weight: 650; color: #fff; padding: 7px 14px; border-radius: 10px; background: rgba(255, 255, 255, .1); }
.topbar .top-link:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }
.tabnav { display: flex; gap: 4px; margin-left: 14px; }
.tabnav a { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 11px; color: var(--frame-ink); font-weight: 650; transition: background .15s, color .15s; }
.tabnav a:hover { background: var(--frame-hover); color: #fff; text-decoration: none; }
.tabnav a.on { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.top-user { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--frame-ink); }
.top-user .who { font-weight: 650; color: var(--frame-strong); }
body.student { padding: 0 12px 12px; }
body.student main.canvas { max-width: 1100px; margin: 0 auto; min-height: calc(100vh - 84px); }
body.student main.canvas > .wrap { max-width: 980px; padding-top: 28px; }

@media (max-width: 1023px) {
  body.staff { padding: 0 8px 8px; }
  .side { position: static; width: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 14px 10px 0; }
  .side-top { display: flex; align-items: center; gap: 12px; padding: 0; min-width: 0; }
  .role-chip { margin: 0; }
  .side-user { grid-column: 2; grid-row: 1; margin: 0; padding: 0; background: none; border: 0; }
  .side-user .who { display: none; }
  .side-nav { grid-column: 1 / -1; flex-direction: row; align-items: center; margin: 8px -10px 0; padding: 4px 10px 12px; overflow-x: auto; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .nav-group { flex: none; width: 1px; height: 22px; margin: 0 6px; padding: 0; overflow: hidden; color: transparent; background: var(--frame-line); }
  .side-nav a { flex: none; padding: 8px 12px; font-size: 14px; }
  .side-nav a.on::before { display: none; }
  body.staff main.canvas { min-height: calc(100vh - 118px); border-radius: 22px; }
  main.canvas > .wrap { padding: 26px 24px 60px; }
}
@media (max-width: 720px) {
  body.staff, body.student { padding: 0; }
  .side { padding: 12px 14px 0; }
  .side .brand .mark { width: 32px; height: 32px; font-size: 15px; }
  .side .brand .name small { display: none; }
  .role-chip { padding: 4px 10px 4px 8px; font-size: 11.5px; }
  body.staff main.canvas { border-radius: 22px 22px 0 0; min-height: calc(100vh - 112px); }
  main.canvas > .wrap { padding: 22px 16px 56px; }
  body.student .topbar { height: 60px; padding: 0 16px; gap: 12px; }
  .topbar .brand .name small { display: none; }
  .tabnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; gap: 0; justify-content: space-around;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -14px rgba(15, 23, 42, .25); }
  .tabnav a { flex: 1; flex-direction: column; gap: 3px; padding: 6px 4px 4px; font-size: 11.5px; font-weight: 650; color: var(--muted); border-radius: 10px; }
  .tabnav a.on { background: none; color: var(--accent); box-shadow: none; }
  .tabnav a.on .ic { filter: drop-shadow(0 4px 8px rgba(var(--accent-rgb), .35)); }
  .tabnav a:hover { background: none; color: var(--ink-2); }
  .tabnav .ic { width: 23px; height: 23px; }
  .top-user .who { display: none; }
  body.student main.canvas { border-radius: 24px 24px 0 0; min-height: calc(100vh - 60px); }
  body.student main.canvas > .wrap { padding: 20px 16px calc(100px + env(safe-area-inset-bottom)); }
}

/* ── 글자 · 머리 ─────────────────────────────────────── */
h1 { font-size: 28px; line-height: 1.28; font-weight: 800; letter-spacing: -0.034em; margin: 0 0 16px; }
h1 .small, h1 .muted { font-weight: 550; letter-spacing: -0.01em; }
h2 { font-size: 17px; line-height: 1.4; font-weight: 750; letter-spacing: -0.02em; margin: 34px 0 12px; }
h3 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; }
.muted { color: var(--muted); } .small { font-size: 12.5px; }
.error { color: var(--bad); }
.eyebrow { margin: 0 0 6px; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: -0.005em; }
.crumb { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.crumb > span:first-child { color: var(--accent); }
.crumb .ic { width: 14px; height: 14px; color: var(--faint); }
h1 + p.small.muted, .lead { max-width: 840px; margin: -4px 0 22px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.page-head, .hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1, .hello h1 { margin: 0; }
.page-head .lead { margin: 8px 0 0; }
.page-head .actions, .hello .row { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) { h1 { font-size: 23px; } h2 { font-size: 16px; margin-top: 28px; } }

/* ── 알림 띠 · 토스트 ─────────────────────────────────── */
.demo-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 8px 14px; border-radius: 12px;
  background: #fffbeb; border: 1px solid #fde68a; color: var(--warn-ink); }
.demo-banner::before { content: "DEMO"; flex: none; padding: 2px 7px; border-radius: 6px; background: var(--warn); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.toast { position: fixed; z-index: 300; top: 20px; right: 24px; width: max-content; max-width: min(480px, calc(100vw - 32px)); display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 8px 11px 14px; border-radius: 14px; background: #0f172a; color: #f1f5f9; font-weight: 550; font-size: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 22px 50px -18px rgba(15, 23, 42, .6); animation: toast-in .38s cubic-bezier(.2, .9, .3, 1.15) both; }
.toast::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.toast-text { flex: 1; min-width: 0; padding-top: 1px; }
button.toast-x { position: relative; flex: none; min-height: 0; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: #94a3b8; }
button.toast-x:hover { background: rgba(255, 255, 255, .08); color: #fff; }
button.toast-x .ic { width: 15px; height: 15px; margin: 0; }
.toast.out { animation: toast-out .28s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (max-width: 720px) { .toast { left: 12px; right: 12px; top: 12px; width: auto; max-width: none; } }
.alert { padding: 10px 13px; border-radius: 11px; font-size: 13.5px; margin: 0 0 16px; }
.alert.bad { background: var(--bad-soft); color: var(--bad-ink); }

/* ── 카드 · 숫자 ──────────────────────────────────────── */
.card { background: var(--card); border: 1px solid rgba(15, 23, 42, .07); border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--sh-sm); min-width: 0; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
details.card > summary { font-weight: 650; color: var(--ink-2); }
details.card[open] > summary { margin-bottom: 6px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin-bottom: 16px; }
.grid > .card { margin-bottom: 0; }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { position: relative; background: var(--card); border: 1px solid rgba(15, 23, 42, .07); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--sh-sm); min-width: 0; }
.stat .n { font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.stat .l { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.stat .ic.stat-ic { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.stat.tone-ok .stat-ic { background: var(--ok-soft); color: var(--ok); }
.stat.tone-warn .stat-ic { background: var(--warn-soft); color: var(--warn); }
.stat.tone-violet .stat-ic { background: #f3e8ff; color: #7c3aed; }
.card .stat { box-shadow: none; background: #fafbfd; }
@media (max-width: 720px) {
  .grid.stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 14px; } .stat .n { font-size: 24px; }
  .card { padding: 16px; border-radius: 16px; }
}

/* ── 대시보드 타일 (bento) ───────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.bento > * { grid-column: span 12; min-width: 0; }
.bento > .span-3 { grid-column: span 3; } .bento > .span-4 { grid-column: span 4; } .bento > .span-5 { grid-column: span 5; }
.bento > .span-6 { grid-column: span 6; } .bento > .span-7 { grid-column: span 7; } .bento > .span-8 { grid-column: span 8; }
@media (max-width: 1180px) {
  .bento > .span-3 { grid-column: span 6; }
  .bento > .span-5, .bento > .span-7, .bento > .span-8 { grid-column: span 12; }
  .bento > .span-4.side-tile { grid-column: span 12; }
}
@media (max-width: 860px) { .bento > .span-4, .bento > .span-6 { grid-column: span 12; } }
@media (max-width: 560px) {
  .bento { gap: 10px; }
  .bento > .span-3 { grid-column: span 6; padding: 16px; gap: 10px; border-radius: 18px; }
  .bento > .span-3 .kpi-n { font-size: 32px; }
  .bento > .span-3 .go { font-size: 0; gap: 0; }
  .bento > .span-3 .tile-ic { width: 32px; height: 32px; }
  .bento > .span-3 .kpi-sub { font-size: 12px; }
}
.tile { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 20px; background: #fff; color: var(--ink);
  border: 1px solid rgba(15, 23, 42, .06); box-shadow: var(--sh); overflow: hidden; }
a.tile { text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
a.tile:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); border-color: rgba(var(--accent-rgb), .22); text-decoration: none; }
.tile-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); letter-spacing: -0.015em; }
.tile-head h2 { margin: 0; font-size: 15.5px; }
.tile-head .go { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 650; color: var(--accent); white-space: nowrap; }
.tile-head .go .ic { width: 15px; height: 15px; transition: transform .18s; }
a.tile:hover .go .ic { transform: translateX(2px); }
.tile-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.tile-ic .ic { width: 19px; height: 19px; }
.tone-warn .tile-ic { background: var(--warn-soft); color: var(--warn); }
.tone-ok .tile-ic { background: var(--ok-soft); color: var(--ok); }
.tone-violet .tile-ic { background: #f3e8ff; color: #7c3aed; }
.tone-sky .tile-ic { background: #e0f2fe; color: #0284c7; }
.kpi-n { font-size: 42px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; font-variant-numeric: tabular-nums; }
.kpi-n small { margin-left: 3px; font-size: 16px; font-weight: 700; color: var(--muted); letter-spacing: -0.01em; }
.kpi-sub { color: var(--muted); font-size: 13px; line-height: 1.55; }
.kpi-sub b { color: var(--ink-2); }
.tile .chips { margin-top: auto; }
/* 어두운 타일 — 그 계정의 프레임 색 */
.tile.dark, .hero { color: #fff; border-color: transparent;
  background: radial-gradient(520px 300px at -6% -20%, var(--glow-1), transparent 62%), radial-gradient(460px 280px at 108% 120%, var(--glow-2), transparent 62%), var(--frame); }
.tile.dark .tile-head, .hero .tile-head { color: var(--frame-strong); }
.tile.dark .kpi-sub, .tile.dark .muted, .hero .muted, .hero .kpi-sub { color: var(--frame-ink); }
.tile.dark .kpi-sub b, .hero .kpi-sub b { color: #fff; }
.tile.dark .kpi-n small, .hero .kpi-n small { color: var(--frame-ink); }
.tile.dark .tile-ic, .hero .tile-ic { background: rgba(255, 255, 255, .1); color: var(--frame-bar); }
.tile.dark .go, .hero .go { color: var(--frame-bar); }
.tile.dark .chip, .hero .chip { background: rgba(255, 255, 255, .1); color: var(--frame-strong); }
.tile.dark a.chip:hover, .hero a.chip:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.btn.light, button.light { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }
.btn.light:hover, button.light:hover { background: #f1f5f9; border-color: #f1f5f9; color: var(--ink); }
.btn.ghost, button.ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .18); box-shadow: none; }
.btn.ghost:hover, button.ghost:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .28); }

/* 둥근 비율 그래프 (출석률 등): style="--p: 72" */
.ring { --p: 0; --size: 108px; --th: 11px; position: relative; flex: none; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: conic-gradient(from -90deg, var(--ring-a) 0%, var(--ring-b) calc(var(--p) * 1%), var(--line-2) calc(var(--p) * 1%) 100%); }
.ring::before { content: ""; position: absolute; inset: var(--th); border-radius: 50%; background: #fff; box-shadow: inset 0 1px 3px rgba(15, 23, 42, .06); }
.ring > * { position: relative; }
.ring b { display: block; font-size: 23px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ring small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 650; color: var(--muted); }
.hero .ring, .tile.dark .ring { background: conic-gradient(from -90deg, var(--ring-a) 0%, var(--frame-bar) calc(var(--p) * 1%), rgba(255, 255, 255, .12) calc(var(--p) * 1%) 100%); }
.hero .ring::before, .tile.dark .ring::before { background: var(--frame); box-shadow: none; }
.hero .ring small, .tile.dark .ring small { color: var(--frame-ink); }
.rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.ring-item { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: 16px; background: #fafbfd; border: 1px solid var(--line-2); }
.ring-item .ring-title { margin: 0 0 8px; font-weight: 700; }
.mini { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 8px; }
.mini > div { min-width: 44px; }
.mini dt { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.mini dd { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* 비율 막대: <div class="split"><i style="flex: 23"></i>…</div> */
.split { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line-2); }
.split > i { display: block; min-width: 6px; border-radius: 999px; background: var(--accent); }
.split > i:nth-child(2) { background: rgba(var(--accent-rgb), .45); }
.split > i:nth-child(3) { background: rgba(var(--accent-rgb), .22); }
.legend { display: flex; gap: 6px 16px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 3px; background: var(--accent); }
.legend li:nth-child(2) i { background: rgba(var(--accent-rgb), .45); }
.legend li:nth-child(3) i { background: rgba(var(--accent-rgb), .22); }
.legend b { color: var(--ink); font-weight: 750; }
.tile.dark .legend { color: var(--frame-ink); }
.tile.dark .legend b { color: #fff; }
.tile.dark .split { background: rgba(255, 255, 255, .1); }
.tile.dark .split > i:first-child, .tile.dark .legend li:first-child i { background: var(--frame-bar); }
/* 최근 회차: 출석률 고리 + 회차별 막대 */
.week-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.week-board + .week-board { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line-2); }
@media (max-width: 1280px) { .week-board { grid-template-columns: 1fr; } }
@media (min-width: 1281px) { .week-board .mini { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 6px 22px; } }
.trend-box { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line-2); }
.trend-title { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.trend { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.trend li { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) 3em; align-items: center; gap: 12px; font-size: 13px; }
.trend li a { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend .bar { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.trend .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ring-a), var(--ring-b)); }
.trend b { text-align: right; font-variant-numeric: tabular-nums; }
.trend li:first-child a, .trend li:first-child b { color: var(--accent); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
a.chip:hover { background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; }
.chip b { font-weight: 800; }
.chip.warn { background: var(--warn-soft); color: var(--warn-ink); }
/* 바로 하기 목록 */
.action-list { display: grid; gap: 8px; }
.action-list a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 650;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.action-list a:hover { border-color: rgba(var(--accent-rgb), .35); background: var(--accent-soft); text-decoration: none; }
.action-list .ic { width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.action-list a:hover .ic { background: #fff; }
.action-list small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.action-list .ic.chev { width: 18px; height: 18px; padding: 0; margin-left: auto; background: none; color: var(--faint); }
.action-list a:hover .ic.chev { background: none; }
/* 질문 대기열 (조교 워크스페이스) */
.queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.queue a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 15px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.queue a:hover { border-color: rgba(var(--accent-rgb), .35); box-shadow: var(--sh); transform: translateY(-1px); text-decoration: none; }
.q-wait { min-width: 66px; padding: 7px 8px; border-radius: 11px; text-align: center; background: var(--warn-soft); color: var(--warn-ink); font-size: 12px; font-weight: 750; line-height: 1.25; }
.q-wait small { display: block; font-size: 10.5px; font-weight: 650; opacity: .8; }
.q-main { min-width: 0; }
.q-title { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue .ic.chev { color: var(--faint); }
.empty-state { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line); border-radius: 18px; background: rgba(255, 255, 255, .55); }
.empty-state > .ic { width: 46px; height: 46px; padding: 11px; border-radius: 15px; background: var(--accent-soft); color: var(--accent); }
.empty-state b { color: var(--ink-2); font-size: 15px; }
.empty-state p { margin: 0; }
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); min-width: 0; }
.link-list li:last-child { border-bottom: 0; }
.link-list .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold { list-style: none; margin: 0; padding: 0; }
.fold li + li { border-top: 1px solid var(--line-2); }
.fold summary { display: flex; align-items: center; gap: 10px; padding: 10px 0; list-style: none; font-weight: 650; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 3px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg); transition: transform .15s; }
.fold details[open] > summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
.fold pre.msg { margin: 0 0 12px; }

/* 빠른 이동 (예전 대시보드 — 남은 화면 호환) */
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; margin: 0 0 28px; }
.quick a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); color: var(--ink); font-weight: 650; box-shadow: var(--sh-sm); }
.quick a:hover { text-decoration: none; border-color: rgba(var(--accent-rgb), .3); box-shadow: var(--sh); }
.quick a small { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.quick .ic { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }

/* ── 표 ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid rgba(15, 23, 42, .07); border-radius: 16px;
  font-size: 14px; box-shadow: var(--sh-sm); margin-bottom: 16px; }
th, td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; }
th { background: #f8fafc; color: var(--muted); font-weight: 650; font-size: 12.5px; white-space: nowrap; }
tr:first-child > th { border-bottom-color: var(--line); }
tr:last-child > td, tr:last-child > th { border-bottom: 0; }
tr:first-child > :first-child { border-top-left-radius: 16px; } tr:first-child > :last-child { border-top-right-radius: 16px; }
tr:last-child > :first-child { border-bottom-left-radius: 16px; } tr:last-child > :last-child { border-bottom-right-radius: 16px; }
tr:hover > td { background: rgba(var(--accent-rgb), .035); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .btn, td button { min-height: 32px; padding: 5px 12px; font-size: 13px; }
td button.link { min-height: 0; padding: 0; }
.card table { border: 0; border-radius: 0; box-shadow: none; margin-bottom: 0; }
.card table tr > * { border-radius: 0 !important; }
.card table th { background: transparent; }
.card table tr:hover > td { background: transparent; }
.history td { white-space: nowrap; }
@media (max-width: 720px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  table > tbody { display: table; width: 100%; }
  th, td { padding: 9px 12px; }
}

/* ── 폼 ───────────────────────────────────────────────── */
input[type=text], input[type=password], input[type=url], input[type=number], input[type=search], input[type=tel], input[type=email],
input[type=date], input[type=time], input[type=datetime-local], input:not([type]), select, textarea {
  max-width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--field); border-radius: 11px; background: #fff;
  font: inherit; font-size: 14.5px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
select { -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 14px; }
select[multiple] { background-image: none; padding-right: 12px; }
textarea { width: 100%; min-height: 130px; resize: vertical; line-height: 1.65; }
input[type=file] { max-width: 100%; font: inherit; font-size: 13.5px; color: var(--muted); }
input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--field); border-radius: 10px; background: #fff;
  font: inherit; font-size: 13.5px; font-weight: 650; color: var(--ink-2); cursor: pointer; transition: background .15s; }
input[type=file]::file-selector-button:hover { background: var(--line-2); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; vertical-align: -3px; margin: 0 4px 0 0; }
label { cursor: default; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { cursor: pointer; }
form.inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field label { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.field > input[type=text], .field > input[type=password], .field > input[type=url], .field > select { width: 100%; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > * { min-width: 0; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.filters input[type=text] { min-width: min(100%, 240px); }
.search { position: relative; flex: 1 1 260px; max-width: 420px; margin: 0; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--faint); pointer-events: none; }
.search input { width: 100%; padding-left: 38px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; margin-top: 12px; }
.perm-grid label { font-size: 13.5px; }
.perm-group { margin: 14px 0 0; font-size: 12px; font-weight: 750; color: var(--accent); letter-spacing: .02em; }
.perm-group + .perm-grid { margin-top: 6px; }
progress { -webkit-appearance: none; appearance: none; height: 8px; width: 220px; max-width: 100%; border: 0; border-radius: 999px; background: var(--line); overflow: hidden; vertical-align: middle; }
progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--accent-grad); border-radius: 999px; transition: width .4s; }
progress::-moz-progress-bar { background: var(--accent-grad); border-radius: 999px; }
details > summary { cursor: pointer; }
details > summary::marker { color: var(--faint); }

/* ── 버튼 · 꼬리표 ────────────────────────────────────── */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0; min-height: 40px; padding: 8px 16px; border: 1px solid var(--accent); border-radius: 11px;
  background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 650; line-height: 1.3; text-align: center; text-decoration: none !important; cursor: pointer;
  box-shadow: 0 1px 2px rgba(var(--accent-rgb), .3), 0 6px 16px -10px rgba(var(--accent-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s, transform .1s; }
button:hover, .btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
button.secondary, .btn.secondary { background: #fff; color: var(--ink-2); border-color: var(--field); box-shadow: var(--sh-sm); }
button.secondary:hover, .btn.secondary:hover { background: #f8fafc; border-color: #c3ccd8; color: var(--ink); }
button.danger, .btn.danger { background: #fff; color: var(--bad); border-color: #fecaca; box-shadow: var(--sh-sm); }
button.danger:hover, .btn.danger:hover { background: var(--bad-soft); border-color: #fca5a5; }
button.link { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent); font-weight: 550; }
button.link:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
button.link.danger-link { color: var(--bad); }
button.block, .btn.block { width: 100%; min-height: 48px; font-size: 15px; }
.btn .ic, button .ic { width: 17px; height: 17px; margin-right: 6px; }
.side-user button.link .ic, .top-user button.link .ic { margin-right: 0; }
@media (max-width: 720px) { .hide-sm { display: none; } }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink);
  font-size: 12px; font-weight: 650; line-height: 1.7; white-space: nowrap; vertical-align: middle; }
.tag.ok { background: var(--ok-soft); color: var(--ok-ink); }
.tag.bad { background: var(--bad-soft); color: var(--bad-ink); }
.tag.warn { background: var(--warn-soft); color: var(--warn-ink); }
.tag.plain { background: var(--line-2); color: var(--ink-2); }
h1 .tag { font-size: 12.5px; vertical-align: 4px; letter-spacing: 0; }
.pager { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 16px; }
.pager a, .pager b { min-width: 34px; height: 34px; padding: 0 9px; display: inline-grid; place-items: center; border-radius: 10px; font-weight: 650; }
.pager a { background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.pager a:hover { border-color: rgba(var(--accent-rgb), .35); text-decoration: none; }
.pager b { background: var(--accent); color: #fff; }

/* ── 로그인 · 비밀번호 ────────────────────────────────── */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 420px); align-items: center; gap: 64px; padding: 48px 0; }
.auth-intro { color: #fff; }
.auth-intro .brand { color: #fff; margin-bottom: 40px; }
.auth-intro .brand .mark { width: 44px; height: 44px; border-radius: 13px; font-size: 21px; background: linear-gradient(135deg, #818cf8 0%, #10b981 55%, #f97316 100%); box-shadow: 0 10px 30px -10px rgba(99, 102, 241, .8); }
.auth-intro .brand .name b { font-size: 19px; }
.auth-intro .brand .name small { color: rgba(255, 255, 255, .6); }
.auth-intro h1 { font-size: 44px; line-height: 1.18; letter-spacing: -0.045em; margin: 0 0 18px; }
.auth-intro h1 em { font-style: normal; background: linear-gradient(90deg, #a5b4fc, #6ee7b7 50%, #fdba74); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-intro p { margin: 0; max-width: 460px; color: rgba(226, 232, 240, .72); font-size: 15.5px; line-height: 1.75; }
.auth-roles { display: grid; gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; max-width: 460px; }
.auth-roles li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 15px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: rgba(241, 245, 249, .82); font-size: 14px; }
.auth-roles i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.auth-roles li:nth-child(1) i { background: #a5b4fc; box-shadow: 0 0 14px #818cf8; }
.auth-roles li:nth-child(2) i { background: #6ee7b7; box-shadow: 0 0 14px #34d399; }
.auth-roles li:nth-child(3) i { background: #fdba74; box-shadow: 0 0 14px #fb923c; }
.auth-roles b { color: #fff; font-weight: 700; margin-right: 4px; }
.auth-card { width: 100%; padding: 34px 32px 28px; border-radius: 26px; background: #fff; border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(15, 23, 42, .04); }
.auth-card h1 { font-size: 25px; margin: 0 0 6px; }
.auth-card .lead { margin: 0 0 24px; font-size: 14px; }
.auth-card .field > input { min-height: 48px; font-size: 15px; }
.auth-card button.block { background: #0f172a; border-color: #0f172a; box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .8); }
.auth-card button.block:hover { background: #1e293b; border-color: #1e293b; }
.auth-card input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .2); }
.auth-foot { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.login { max-width: 440px; margin: 40px auto; padding: 28px 28px 24px; border-radius: 22px; box-shadow: var(--sh-lg); }
.login h1 { font-size: 22px; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding: 28px 0 40px; }
  .auth-intro .brand { margin-bottom: 22px; }
  .auth-intro h1 { font-size: 30px; }
  .auth-intro p { font-size: 14.5px; }
  .auth-roles { display: none; }
  .auth-card { padding: 26px 22px 22px; border-radius: 22px; }
  .login { margin: 12px auto; padding: 22px 18px; }
}

/* ── 학생 포털 ────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 28px; padding: 26px 28px; border-radius: 24px;
  margin-bottom: 18px; box-shadow: var(--sh-lg); }
.hero .eyebrow { color: var(--frame-bar); }
.hero h1 { margin: 0; color: #fff; }
.hero .hero-sub { margin: 8px 0 0; color: var(--frame-ink); font-size: 14px; }
.hero .row { margin-top: 18px; }
.hero-stats { display: flex; align-items: center; gap: 22px; }
.hero-stats dl { display: grid; grid-template-columns: auto auto; gap: 6px 18px; margin: 0; }
.hero-stats dt { color: var(--frame-ink); font-size: 12.5px; font-weight: 600; }
.hero-stats dd { margin: 0; text-align: right; font-weight: 800; font-size: 16px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; }
.hero-stats dd small { color: var(--frame-ink); font-weight: 600; font-size: 12px; margin-left: 2px; }
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; padding: 22px 20px; border-radius: 22px; }
  .hero-stats { justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
  .hero .ring { --size: 92px; --th: 9px; }
  .hero .row .btn { flex: 1; }
}
.tiles-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-bottom: 18px; }
.mini-tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(15, 23, 42, .06); box-shadow: var(--sh-sm); color: var(--ink); }
a.mini-tile:hover { text-decoration: none; box-shadow: var(--sh); border-color: rgba(var(--accent-rgb), .25); }
.mini-tile .tile-ic { width: 44px; height: 44px; border-radius: 14px; }
.mini-tile .grow { flex: 1; min-width: 0; }
.mini-tile b { display: block; font-size: 15px; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-tile small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-tile .count { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mini-tile .ic.chev { color: var(--faint); }
.timeline { list-style: none; margin: 0 0 16px; padding: 6px 0; background: #fff; border: 1px solid rgba(15, 23, 42, .06); border-radius: 20px; box-shadow: var(--sh-sm); }
.timeline li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 20px 12px 42px; }
.timeline li + li { border-top: 1px solid var(--line-2); }
.timeline li::before { content: ""; position: absolute; left: 20px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 4px var(--line-2); }
.timeline li.ok::before { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.timeline li.bad::before { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-soft); }
.timeline li.warn::before { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.t-main { min-width: 0; }
.t-title { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-meta { display: block; font-size: 12.5px; color: var(--muted); }
.t-score { min-width: 54px; text-align: right; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.t-score small { font-size: 12px; font-weight: 600; color: var(--muted); }
.timeline li.empty { grid-template-columns: 1fr; padding: 22px 20px; color: var(--muted); text-align: center; }
.timeline li.empty::before { display: none; }
.list { list-style: none; margin: 0 0 16px; padding: 0; background: var(--card); border: 1px solid rgba(15, 23, 42, .06); border-radius: 20px; box-shadow: var(--sh-sm); overflow: hidden; }
.list > li { border-bottom: 1px solid var(--line-2); }
.list > li:last-child { border-bottom: 0; }
.list > li > a, .list > li > .item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--ink); }
.list > li > a:hover { background: rgba(var(--accent-rgb), .04); text-decoration: none; }
.list .item-main { flex: 1; min-width: 0; }
.list .item-title { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.list .item-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.list .thumb { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.list .thumb .ic { width: 22px; height: 22px; }
.list .chev { color: var(--faint); flex: none; }
.list .empty { padding: 26px 18px; color: var(--muted); text-align: center; }

/* ── 자료실 ───────────────────────────────────────────── */
.lib-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.lib-layout > :only-child { grid-column: 1 / -1; }
.lib-layout .upload-card { position: sticky; top: 20px; }
@media (max-width: 1100px) { .lib-layout { grid-template-columns: 1fr; } .lib-layout .upload-card { position: static; order: -1; } }
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.file { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(15, 23, 42, .07); box-shadow: var(--sh-sm);
  transition: box-shadow .18s, border-color .18s, transform .18s; }
.file:hover { box-shadow: var(--sh); border-color: rgba(var(--accent-rgb), .22); transform: translateY(-1px); }
.file-top { display: flex; gap: 13px; align-items: flex-start; min-width: 0; }
.ftype { position: relative; flex: none; width: 42px; height: 50px; border-radius: 9px; display: grid; place-items: end center; padding-bottom: 7px; overflow: hidden;
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .01em; background: linear-gradient(160deg, #94a3b8, #475569); box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .6); }
.ftype::before { content: ""; position: absolute; top: 0; right: 0; width: 13px; height: 13px; background: linear-gradient(225deg, #fff 50%, rgba(255, 255, 255, .45) 50%); }
.ftype.pdf { background: linear-gradient(160deg, #f87171, #dc2626); }
.ftype.hwp { background: linear-gradient(160deg, #60a5fa, #1d4ed8); }
.ftype.doc { background: linear-gradient(160deg, #818cf8, #4338ca); }
.ftype.xls { background: linear-gradient(160deg, #4ade80, #15803d); }
.ftype.ppt { background: linear-gradient(160deg, #fdba74, #ea580c); }
.ftype.img { background: linear-gradient(160deg, #d8b4fe, #9333ea); }
.file-main { min-width: 0; }
.file-title { display: block; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.file-meta { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.file-note { margin: 0; font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.file-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.file-foot .btn { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.file-foot form { margin: 0; }
.cats { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.cats a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-weight: 650; font-size: 13.5px; }
.cats a span { color: var(--faint); font-weight: 650; font-size: 12px; }
.cats a:hover { border-color: rgba(var(--accent-rgb), .35); text-decoration: none; }
.cats a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cats a.on span { color: rgba(255, 255, 255, .6); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

/* ── 화면 캡처 억제 (static/guard.js) ─────────────────── */
#wm { position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-repeat: repeat; }
body.guard-strict { -webkit-user-select: none; user-select: none; }
body.guard-strict input, body.guard-strict textarea { -webkit-user-select: text; user-select: text; }
body.guard-strict img, body.guard-strict video { -webkit-user-drag: none; }
body.guard-hidden main { filter: blur(24px); }
@media print { body.guard * { visibility: hidden !important; } body.guard::after { content: "인쇄할 수 없는 화면입니다."; visibility: visible; } }

/* ── 질문답변 · 문항 · 공지 ───────────────────────────── */
pre.msg { margin: 0 0 12px; padding: 14px 16px; border-radius: var(--r); background: #f8fafc; border: 1px solid var(--line-2);
  font-family: inherit; font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.qa-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.qa-layout > div:only-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .qa-layout { grid-template-columns: 1fr; } }
.problem-img { display: block; max-width: 100%; border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; background: #fff; }
.qa-photo { max-width: 220px; max-height: 220px; border: 1px solid var(--line); border-radius: 12px; margin: 8px 8px 0 0; box-shadow: var(--sh-sm); transition: transform .15s; }
a:hover > .qa-photo { transform: scale(1.02); }
.problem-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; }
.notice { border-left: 4px solid var(--accent); }
.notice.pinned { border-left-color: var(--warn); }
.notice summary { list-style-position: outside; }
.notice summary b { font-size: 15px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 6px 0 16px; padding: 4px; border-radius: 13px; background: rgba(15, 23, 42, .06); }
.tab { padding: 7px 14px; border-radius: 10px; color: var(--ink-2); font-weight: 650; font-size: 14px; }
.tab:hover { background: rgba(255, 255, 255, .7); text-decoration: none; }
.tab.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 1px 1px rgba(15, 23, 42, .04); }
.board-matrix td.cell { padding: 0; text-align: center; }
.board-matrix td.cell a { display: block; padding: 10px 12px; color: var(--ink-2); }
.board-matrix td.cell a:hover { background: var(--accent-soft); text-decoration: none; }
.board-matrix td.cell.has-open b { color: var(--warn); }
.board-matrix td.cell.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.answer-key { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.answer-key b { font-size: 12.5px; color: var(--muted); }
.answer-key span { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); }

/* ── 영상 플레이어 (core/templates/_player.html, static/player.js) ── */
.player { width: 100%; max-height: 70vh; background: #000; border-radius: 14px; }
.player-box { position: relative; background: #000; border-radius: 16px; overflow: hidden; box-shadow: var(--sh); }
.player-box .player { display: block; border-radius: 0; }
.player-box:fullscreen { display: flex; align-items: center; justify-content: center; border-radius: 0; }
.player-box:fullscreen .player { width: 100%; height: 100%; max-height: none; }
.player-embed .player { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.player-embed:fullscreen .player { aspect-ratio: auto; }
.player-box.pseudo-fs { position: fixed; inset: 0; z-index: 1000; border-radius: 0; display: flex; align-items: center; justify-content: center; }
.player-box.pseudo-fs .player { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
.player-mark { position: absolute; pointer-events: none; color: rgba(255, 255, 255, .45); font-size: 15px; text-shadow: 0 0 3px rgba(0, 0, 0, .8); white-space: nowrap; transition: left 1.2s, top 1.2s; user-select: none; }
.player-fs { position: absolute; right: 10px; top: 10px; min-height: 0; padding: 4px 10px; font-size: 12px; font-weight: 650; background: rgba(15, 23, 42, .55);
  border: 1px solid rgba(255, 255, 255, .35); color: #fff; border-radius: 8px; opacity: .8; box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.player-fs:hover { opacity: 1; background: rgba(15, 23, 42, .75); border-color: rgba(255, 255, 255, .5); }

/* ── 영상 파이프라인 단계 (videos/detail.html, static/video_status.js) ── */
.pipe { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pipe li { position: relative; padding: 14px 14px 12px; border-radius: 13px; border: 1px solid var(--line); background: #f8fafc; color: var(--muted); font-size: 13.5px; font-weight: 650; overflow: hidden; }
.pipe li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--line); }
.pipe li.done { border-color: #bbf7d0; background: #f0fdf4; color: var(--ok-ink); }
.pipe li.done::before { background: var(--ok); }
.pipe li.now { border-color: #fcd34d; background: #fffbeb; color: var(--warn-ink); box-shadow: 0 0 0 3px rgba(251, 191, 36, .18); }
.pipe li.now::before { background: linear-gradient(90deg, #f59e0b 0%, #fde68a 50%, #f59e0b 100%); background-size: 200% 100%; animation: pipe-run 1.1s linear infinite; }
.pipe li.fail { border-color: #fecaca; background: #fef2f2; color: var(--bad-ink); }
.pipe li.fail::before { background: var(--bad); }
@keyframes pipe-run { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .pipe li.now::before, .toast, .toast.out { animation: none; } a.tile, .file, .queue a { transition: none; } }
@media (max-width: 720px) { .pipe { grid-template-columns: 1fr 1fr; } }

/* 한 기기 재생 — 다른 곳에서 열려 멈춘 플레이어 자리 (static/playlock.js) */
.playlock-stop { border-color: #e2a3a3; background: #fff5f5; color: #9b1c1c; font-weight: 600; }

/* 홈 화면 앱 카드 (학생 홈) — pwa.js 가 보여 줄 것만 켠다 */
.pwa-card .pwa-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.pwa-card .pwa-head img { border-radius: 10px; flex: none; }
.pwa-card .pwa-head b { display: block; font-size: 15px; }
.pwa-card .pwa-head small { display: block; color: var(--muted); font-size: 12.5px; }
.pwa-card .pwa-push { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.pwa-card [data-pwa="msg"]:empty, .pwa-card [hidden] { display: none !important; }  /* button 의 display 가 hidden 속성을 덮지 않게 */