/* =====================================================================
   naexam 공통 스타일 — tokens.css의 디자인 토큰만 사용한다.
   구성: 기본 → 레이아웃 → 컴포넌트 → 화면별(문제은행/시험/응시/결과/통계)
   ===================================================================== */

/* ---------- 기본 ---------- */
* { box-sizing: border-box; }

/* hidden 속성은 어떤 display 규칙보다 우선한다 (.lock-overlay 등 flex 요소 포함) */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--c-bg);
    color: var(--c-text);
    line-height: 1.6;
    font-size: 15px;
}

a { color: var(--c-primary-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.45rem; font-weight: 750; margin: 0 0 var(--sp-4); letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 var(--sp-3); }
small { color: var(--c-text-muted); font-weight: 400; }
code { background: var(--c-surface-dim); padding: 0 var(--sp-1); border-radius: var(--r-sm); font-size: .88em; }

.text-muted { color: var(--c-text-muted); }
.text-center { text-align: center; }

/* ---------- 상단바 ---------- */
.topbar {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-1);
    position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-4);
    display: flex; align-items: center; gap: var(--sp-5); height: 60px;
}
.brand { font-size: 1.25rem; font-weight: 800; color: var(--c-primary-600); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: var(--sp-1); flex: 1; }
.nav-link {
    color: var(--c-text); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
    font-weight: 500;
}
.nav-link:hover { background: var(--c-primary-50); color: var(--c-primary-600); text-decoration: none; }
.nav-link.disabled { color: var(--c-text-muted); cursor: not-allowed; opacity: .5; }
.topbar-user { display: flex; align-items: center; gap: var(--sp-3); }
.user-name { font-weight: 650; color: var(--c-text); }

/* ---------- 레이아웃 ---------- */
.container { max-width: 1200px; margin: var(--sp-5) auto; padding: 0 var(--sp-4); }
.guest-body { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.guest-container { width: 100%; max-width: 420px; padding: var(--sp-4); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.page-head h1 { margin: 0; }

/* ---------- 카드 ---------- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-1);
}
.auth-card { padding: var(--sp-6); }
.auth-title { text-align: center; margin-bottom: var(--sp-5); color: var(--c-primary-600); }
.auth-alt { text-align: center; margin: var(--sp-4) 0 0; color: var(--c-text-muted); }
.form-card { max-width: 500px; }
.table-card { padding: 0; overflow-x: auto; }
.table-card h2 { padding: var(--sp-4) var(--sp-4) 0; }

/* ---------- 버튼 (primary / secondary(outline) / danger) ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px; padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-md); border: 1px solid transparent;
    font-size: inherit; font-family: inherit; font-weight: 600;
    cursor: pointer; text-align: center;
    transition: background .15s, box-shadow .15s, transform .05s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--c-primary-500); color: #fff; }
.btn-primary:hover { background: var(--c-primary-600); box-shadow: var(--shadow-1); }
.btn-secondary,
.btn-outline { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
.btn-secondary:hover,
.btn-outline:hover { background: var(--c-surface-dim); border-color: var(--c-text-muted); }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #B91C1C; }
.btn-danger-text { color: var(--c-danger); }
.btn-danger-text:hover { background: var(--c-danger-bg); border-color: var(--c-danger-bd); }
.btn-sm { min-height: 32px; padding: var(--sp-1) var(--sp-3); font-size: .86rem; font-weight: 500; }
.btn-block { width: 100%; }

/* ---------- 폼 ---------- */
.form-group { margin-bottom: var(--sp-4); }
.form-group label { display: block; font-weight: 650; margin-bottom: var(--sp-2); }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=datetime-local], input[type=file], select, textarea {
    width: 100%; padding: var(--sp-2) var(--sp-3); min-height: 42px;
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    font-size: inherit; font-family: inherit; background: var(--c-surface); color: var(--c-text);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--c-primary-500); outline-offset: -1px; border-color: var(--c-primary-500);
}
textarea { min-height: auto; line-height: 1.6; }
.form-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.inline-form { display: inline-flex; gap: var(--sp-2); align-items: center; }
.inline-form select, .inline-form input { min-height: 34px; padding: var(--sp-1) var(--sp-2); width: auto; }
.filter-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.filter-bar input[type=text] { max-width: 280px; }
.filter-bar select, .filter-bar input { width: auto; }
.checkbox-label { display: inline-flex; align-items: center; gap: var(--sp-2); margin-right: var(--sp-4); font-weight: 450; min-height: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 var(--sp-4); }
.sticky-actions {
    position: sticky; bottom: 0; background: var(--c-bg);
    padding: var(--sp-3) 0; border-top: 1px solid var(--c-border);
}

/* ---------- 알림 / 빈 상태 ---------- */
.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-4); border: 1px solid; }
.alert-success { background: var(--c-success-bg); border-color: var(--c-success-bd); color: #166534; }
.alert-error { background: var(--c-danger-bg); border-color: var(--c-danger-bd); color: #991B1B; }

.empty-state,
.table td.text-center.text-muted {
    padding: var(--sp-7) var(--sp-4) !important;
    text-align: center; color: var(--c-text-muted);
}
.empty-state::before,
.table td.text-center.text-muted::before { content: '🗂️'; display: block; font-size: 1.6rem; margin-bottom: var(--sp-2); }

/* ---------- 배지 ---------- */
.badge {
    display: inline-flex; align-items: center; padding: 1px var(--sp-3);
    border-radius: var(--r-full); font-size: .78rem; font-weight: 600;
    background: var(--c-bg); color: var(--c-text-muted);
}
.badge-role { background: var(--c-primary-50); color: var(--c-primary-700); }
.badge-active { background: var(--c-success-bg); color: var(--c-success); }
.badge-inactive { background: var(--c-bg); color: var(--c-text-muted); }
.badge-suspended { background: var(--c-danger-bg); color: var(--c-danger); }

/* 시험 상태 */
.badge-exam-draft { background: var(--c-bg); color: var(--c-text-muted); }
.badge-exam-published { background: var(--c-success-bg); color: var(--c-success); }
.badge-exam-closed { background: var(--c-danger-bg); color: var(--c-danger); }
.badge-exam-archived { background: var(--c-bg); color: var(--c-text-muted); }

/* 시험 유형 (실전=주의 / 연습=메인 / 상시=보조) */
.badge-type-real { background: var(--c-danger-bg); color: var(--c-danger); }
.badge-type-practice { background: var(--c-primary-50); color: var(--c-primary-700); }
.badge-type-quiz { background: var(--c-secondary-50); color: var(--c-secondary-700); }

/* ---------- 테이블 ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); text-align: left; white-space: nowrap; }
.table th { background: var(--c-surface-dim); font-size: .82rem; font-weight: 650; color: var(--c-text-muted); }
.table tbody tr:hover { background: var(--c-surface-dim); }
.td-body { white-space: normal !important; min-width: 200px; }
.td-tags { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.td-actions { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

/* ---------- 통계 카드 / 페이지네이션 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.stat-card { text-align: center; padding: var(--sp-4); }
.stat-value { font-size: 1.7rem; font-weight: 800; color: var(--c-primary-600); }
.stat-label { color: var(--c-text-muted); font-size: .88rem; }
.pagination { display: flex; gap: var(--sp-1); justify-content: center; margin: var(--sp-4) 0; }
.page-link {
    min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm); border: 1px solid var(--c-border); background: var(--c-surface);
}
.page-link.active { background: var(--c-primary-500); color: #fff; border-color: var(--c-primary-500); }
.error-code { font-size: 3rem; margin-bottom: var(--sp-2); color: var(--c-primary-500); }

/* ---------- 서브 내비 ---------- */
.subnav { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); border-bottom: 2px solid var(--c-border); }
.subnav a {
    padding: var(--sp-2) var(--sp-4); color: var(--c-text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 550;
}
.subnav a:hover { text-decoration: none; color: var(--c-text); }
.subnav a.active { color: var(--c-primary-600); border-bottom-color: var(--c-primary-500); font-weight: 700; }

/* ---------- 문제은행: 편집기 ---------- */
.repeat-rows { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.repeat-row { display: flex; gap: var(--sp-2); align-items: center; }
.repeat-row input[type=text], .repeat-row input[type=number] { flex: 1; min-height: 38px; }
.repeat-row select { width: auto; min-height: 38px; }
.sub-title { font-size: .95rem; font-weight: 700; margin: var(--sp-4) 0 var(--sp-2); }
.question-form .card h2 { border-bottom: 1px solid var(--c-border); padding-bottom: var(--sp-2); }
.import-help li { margin-bottom: var(--sp-1); }

.cat-tree { list-style: none; padding-left: var(--sp-5); margin: var(--sp-2) 0; }
.cat-tree-root { padding-left: 0; }
.cat-node { padding: var(--sp-1) 0; }
.cat-node.depth-1 > .cat-row { font-weight: 700; }
.cat-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.cat-name-input { width: 180px !important; flex: none !important; }

.media-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.media-list li { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; }

.version-item { border-bottom: 1px solid var(--c-border); padding: var(--sp-2) 0; }
.version-item summary { cursor: pointer; }
.version-json, .audit-json {
    background: var(--c-surface-dim); padding: var(--sp-3); border-radius: var(--r-sm);
    overflow-x: auto; font-size: .78rem; max-height: 400px; white-space: pre-wrap;
}
.audit-json { max-width: 420px; margin: var(--sp-1) 0; }

/* ---------- 문항 플레이어 (미리보기 + 응시 공용) ---------- */
.qp-body { font-size: 1.08rem; margin-bottom: var(--sp-5); line-height: 1.9; }
.qp-hint { color: var(--c-text-muted); font-size: .85rem; }
.qp-passage { background: var(--c-surface-dim); }
.qp-passage-body { line-height: 1.9; }
.qp-media-img { max-width: 100%; border-radius: var(--r-md); margin: var(--sp-2) 0; }
.qp-media-video { max-width: 100%; border-radius: var(--r-md); }

.qp-option {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    min-height: var(--touch-min); padding: var(--sp-3) var(--sp-4);
    border: 1.5px solid var(--c-border); border-radius: var(--r-md);
    margin-bottom: var(--sp-2); cursor: pointer; background: var(--c-surface);
    transition: background .15s, border-color .15s;
}
.qp-option:hover { background: var(--c-primary-50); }
.qp-option:has(input:checked) { border-color: var(--c-primary-500); background: var(--c-primary-50); }
.qp-option input { margin-top: .35rem; width: 18px; height: 18px; min-height: auto; }
.qp-option-no { font-weight: 700; }
.qp-short-input { max-width: 400px; }
.qp-ox .qp-option { display: inline-flex; margin-right: var(--sp-2); padding: var(--sp-3) var(--sp-6); font-size: 1.25rem; font-weight: 800; }

/* 드래그 타일: 잡을 수 있어 보이게 (그림자 + 커서 + 그립감) */
.qp-tile {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: var(--touch-min); padding: var(--sp-2) var(--sp-4);
    background: var(--c-surface); border: 1.5px solid var(--c-border); border-radius: var(--r-md);
    cursor: grab; user-select: none; touch-action: none;
    box-shadow: var(--shadow-1);
    transition: box-shadow .15s, border-color .15s;
}
.qp-tile:hover { box-shadow: var(--shadow-2); border-color: var(--c-primary-100); }
.qp-tile:active { cursor: grabbing; }
.qp-tile.tap-selected { border-color: var(--c-primary-500); background: var(--c-primary-50); box-shadow: 0 0 0 2px var(--c-primary-500); }
.drag-ghost { opacity: .4; }
.drag-chosen { box-shadow: var(--shadow-3); }

.drop-slot {
    min-height: var(--touch-min); min-width: 120px;
    border: 2px dashed var(--c-border); border-radius: var(--r-md);
    padding: var(--sp-1); display: inline-flex; align-items: center; gap: var(--sp-1);
    vertical-align: middle; transition: border-color .15s, background .15s;
}
.drop-pool {
    min-height: 60px; border: 2px dashed transparent; border-radius: var(--r-md);
    padding: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2);
    background: var(--c-surface-dim); margin-top: var(--sp-4);
}
.drop-ready { border-color: var(--c-secondary-500); background: var(--c-secondary-50); }

.qp-order-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); max-width: 560px; }
.qp-order-item { display: flex; width: 100%; }
.qp-grip { color: var(--c-text-muted); cursor: grab; }
.qp-order-btns { margin-left: auto; display: flex; gap: var(--sp-1); }
.qp-move {
    min-width: 36px; min-height: 36px; border: 1px solid var(--c-border);
    background: var(--c-surface); border-radius: var(--r-sm); cursor: pointer;
}
.qp-move:hover { background: var(--c-primary-50); }

.qp-match-rows { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 640px; }
.qp-match-row { display: flex; align-items: center; gap: var(--sp-4); }
.qp-match-left { flex: 1; padding: var(--sp-2) var(--sp-4); min-height: var(--touch-min); display: flex; align-items: center; background: var(--c-primary-50); border-radius: var(--r-md); }
.qp-match-slot { flex: 1; }

.qp-class-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.qp-class-box { border: 1.5px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.qp-class-title { background: var(--c-secondary-50); color: var(--c-secondary-700); padding: var(--sp-2) var(--sp-3); font-weight: 700; text-align: center; }
.qp-class-zone { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3); min-height: 90px; min-width: auto; border: none; border-radius: 0; }
.qp-class-zone.drop-ready { background: var(--c-secondary-50); }

.qp-blank { min-width: 110px; min-height: 40px; margin: 0 var(--sp-1); }
.qp-blank .qp-tile { margin: 0; }
.blank-chip {
    display: inline-block; padding: 0 var(--sp-3); margin: 0 var(--sp-1);
    background: var(--c-primary-50); border: 1px dashed var(--c-primary-500);
    border-radius: var(--r-sm); color: var(--c-primary-700); font-size: .85em;
}

.answer-reveal summary { cursor: pointer; padding: var(--sp-1) 0; }

/* ---------- 유튜브 모달 ---------- */
.yt-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .78); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.yt-modal { position: relative; width: min(90vw, 960px); }
.yt-modal-body { position: relative; padding-top: 56.25%; background: #000; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-3); }
.yt-modal-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.yt-modal-close { position: absolute; top: -44px; right: 0; min-width: var(--touch-min); min-height: var(--touch-min); background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
body.yt-modal-open { overflow: hidden; }

/* ---------- 시험 관리 ---------- */
.eq-grip { cursor: grab; color: var(--c-text-muted); }

/* ---------- 시험 카드 (응시자) ---------- */
.exam-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.exam-card { display: flex; flex-direction: column; transition: box-shadow .15s; }
.exam-card:hover { box-shadow: var(--shadow-2); }
.exam-card h2 { margin: var(--sp-2) 0; }
.exam-card .btn { margin-top: auto; }
.exam-card-head { display: flex; gap: var(--sp-2); align-items: center; }
.exam-card.is-exhausted { opacity: .65; background: var(--c-surface-dim); }
.exam-card.is-exhausted:hover { box-shadow: var(--shadow-1); }
.exam-meta { list-style: none; padding: 0; margin: 0 0 var(--sp-4); color: var(--c-text-muted); font-size: .92rem; }
.exam-meta li { padding: 2px 0; }

/* ---------- 응시 화면 ---------- */
.take-body { background: var(--c-bg); }
.take-header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    background: var(--c-surface); border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-1); padding: var(--sp-2) var(--sp-4); min-height: 60px;
}
.take-title { font-weight: 750; }
.take-status { display: flex; align-items: center; gap: var(--sp-4); }

/* 타이머: 눈에 띄되 불안하지 않게 — 차분한 필 형태, 5분 미만만 강조 */
.take-timer {
    font-size: 1.15rem; font-weight: 750; font-variant-numeric: tabular-nums;
    padding: var(--sp-1) var(--sp-4); border-radius: var(--r-full);
    background: var(--c-primary-50); color: var(--c-primary-700);
}
.take-timer.timer-danger { background: var(--c-danger-bg); color: var(--c-danger); animation: pulse-soft 2s infinite; }
@keyframes pulse-soft { 50% { opacity: .65; } }

.save-status { font-size: .85rem; color: var(--c-success); font-weight: 550; }
.save-status.pending { color: var(--c-text-muted); }
.save-status.offline { color: var(--c-danger); font-weight: 700; }

.take-layout { display: flex; gap: var(--sp-4); max-width: 1200px; margin: var(--sp-4) auto; padding: 0 var(--sp-4); align-items: flex-start; }
.take-nav {
    position: sticky; top: 76px; width: 230px; flex-shrink: 0;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-1);
}
.take-nav-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
.nav-q {
    min-height: var(--touch-min); min-width: var(--touch-min);
    border: 1.5px solid var(--c-border); border-radius: var(--r-sm);
    background: var(--c-surface); cursor: pointer; font-size: .95rem; font-weight: 600;
    position: relative; font-family: inherit;
}
.nav-q:hover { background: var(--c-primary-50); }
.nav-q.current { outline: 2px solid var(--c-primary-500); font-weight: 800; }
.nav-q.answered { background: var(--c-primary-50); border-color: var(--c-primary-500); color: var(--c-primary-700); }
.nav-q.flagged::after {
    content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--c-warning);
}
.take-nav-legend { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); font-size: .8rem; color: var(--c-text-muted); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--c-border); margin-right: var(--sp-2); background: var(--c-surface); }
.dot-answered { background: var(--c-primary-100); border-color: var(--c-primary-500); }
.dot-flagged { background: var(--c-warning); border-color: var(--c-warning); }

/* 문항 카드: 여백 넉넉히 */
.take-main {
    flex: 1; background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--sp-6); min-height: 60vh; box-shadow: var(--shadow-1);
}
.take-q-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.take-q-head h2 { margin: 0; font-size: 1.2rem; }
.flag-label { font-size: .9rem; margin-right: 0; }
.take-pager { display: flex; justify-content: space-between; margin-top: var(--sp-6); }
.take-pager .btn { min-width: 110px; min-height: var(--touch-min); }

.lock-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .82); z-index: 2000;
    display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
}

/* ---------- 결과 화면: 히어로 ---------- */
.result-hero {
    background: linear-gradient(135deg, var(--c-primary-500), var(--c-secondary-500));
    color: #fff; border-radius: var(--r-lg); padding: var(--sp-6);
    margin-bottom: var(--sp-4); box-shadow: var(--shadow-2);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
}
.result-hero .hero-score { font-size: 3rem; font-weight: 850; line-height: 1.1; }
.result-hero .hero-score small { color: rgba(255, 255, 255, .8); font-size: 1.3rem; font-weight: 500; }
.result-hero .hero-sub { color: rgba(255, 255, 255, .9); font-size: .95rem; }
.hero-pass, .hero-fail {
    display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-5);
    border-radius: var(--r-full); font-size: 1.15rem; font-weight: 800; background: rgba(255, 255, 255, .92);
}
.hero-pass { color: var(--c-success); }
.hero-fail { color: var(--c-danger); }
.chart-half { max-width: 560px; }
.expl-row td { background: var(--c-surface-dim); font-size: .9rem; }

/* ---------- 오답노트 / 다시 풀기 ---------- */
.wrong-item { border-top: 1px solid var(--c-border); padding: var(--sp-4) 0; }
.wrong-item .wrong-q { margin: 0 0 var(--sp-2); line-height: 1.8; }
.practice-feedback { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid; }
.practice-feedback.ok { background: var(--c-success-bg); border-color: var(--c-success-bd); color: #166534; }
.practice-feedback.no { background: var(--c-danger-bg); border-color: var(--c-danger-bd); color: #991B1B; }

/* ---------- 채점 / 통계 / 감사로그 ---------- */
.grading-pending { border-left: 4px solid var(--c-warning); }
.essay-answer {
    background: var(--c-surface-dim); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--sp-4); min-height: 80px; white-space: pre-wrap;
}
.row-warning { background: var(--c-warning-bg) !important; }
.row-warning:hover { background: #FEF3C7 !important; }
.option-dist summary { cursor: pointer; font-size: .82rem; }
.option-dist ul { list-style: none; padding: var(--sp-1) 0 0; margin: 0; font-size: .85rem; }
.option-dist li { display: flex; align-items: center; gap: var(--sp-2); padding: 1px 0; }
.dist-bar { display: inline-block; width: 120px; height: 8px; background: var(--c-bg); border-radius: var(--r-full); overflow: hidden; }
.dist-bar span { display: block; height: 100%; background: var(--c-primary-500); opacity: .65; }

/* ---------- 대시보드 ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); align-items: start; }
.dash-list { list-style: none; padding: 0; margin: 0; }
.dash-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); }
.dash-list li:last-child { border-bottom: none; }
.dash-empty { color: var(--c-text-muted); padding: var(--sp-4) 0; text-align: center; }

/* ---------- 반응형 ---------- */
@media (max-width: 768px) {
    .take-layout { flex-direction: column; }
    .take-nav { position: static; width: 100%; }
    .take-nav-grid { grid-template-columns: repeat(8, 1fr); }
    .take-title { font-size: .9rem; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .take-main { padding: var(--sp-4); }
    .qp-match-row { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
}
@media (max-width: 900px) {
    /* 상단 메뉴: 가로 스크롤 대신 줄바꿈 — 메뉴가 많아도(관리자) 전부 보이게 */
    .topbar-inner { flex-wrap: wrap; height: auto; padding: var(--sp-2) var(--sp-4); row-gap: 0; }
    .nav { order: 3; width: 100%; flex-wrap: wrap; padding-bottom: var(--sp-1); }
}
@media (max-width: 640px) {
    .page-head { flex-direction: column; align-items: flex-start; }
    .td-actions { flex-direction: column; }
    .result-hero { flex-direction: column; align-items: flex-start; }
}