:root {
  --primary: #1b6dff;        /* SOOP풍 선명한 블루 액센트 */
  --primary-dark: #155ad6;
  --primary-soft: #eaf1ff;   /* 액센트 옅은 배경(활성/호버) */
  --bg: #ffffff;             /* 콘텐츠 배경: 흰색 */
  --card: #ffffff;           /* 카드/패널: 흰색 */
  --text: #111827;           /* 본문: 짙은 검정 */
  --muted: #6b7280;          /* 보조 텍스트 */
  --border: #eceef1;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
  --btn-h: 42px;             /* 공통 버튼 높이(모든 버튼 동일) */
}

/* ── Google Material Icons ── */
.icon { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.125em; }
.icon svg { width: 100%; height: 100%; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 16px;
  background: var(--card);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* ── 앱 셸 (상단 헤더 + 고정 사이드바 + 콘텐츠) ── */
.app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app-header {
  flex: 0 0 auto;
  height: 60px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  z-index: 5;
}
.app-main { flex: 1 1 auto; display: flex; min-height: 0; }
.app-sidebar {
  flex: 0 0 256px; width: 256px;
  background: var(--card);
  border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden;
  padding: 1rem 0.75rem;
  transition: flex-basis 0.18s ease, width 0.18s ease, padding 0.18s ease;
}
/* 콘텐츠도 사이드바와 동일한 흰 배경 (통일) */
.app-content { flex: 1 1 auto; overflow-y: auto; background: var(--card); }
.page { max-width: none; margin: 0; padding: 2rem 2.5rem; }

/* ── 햄버거 클릭 시: 아이콘 전용 레일(아이콘만 세로 배치) ── */
body.sidebar-collapsed .app-sidebar { flex-basis: 72px; width: 72px; padding: 1rem 0.5rem; }
.sidebar-collapsed .nav-section-title { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
.sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding: 0.7rem 0; }
.sidebar-collapsed .nav-item span { display: none; }
.sidebar-collapsed .nav-item.active::before { display: none; }

/* 로고 / 브랜드 */
.logo { display: inline-flex; align-items: center; gap: 0.55rem; padding-left: 0.25rem; }
.logo-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--primary); color: #fff;
  font-weight: 800; font-size: 0.85rem;
  display: grid; place-items: center;
}
.brand { font-weight: 700; font-size: 1.02rem; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; }

/* 상단 검색 (dxTextBox filled → 은은한 알약형) */
.app-header .dx-texteditor.dx-editor-filled { background: #f3f5f7; border-radius: 999px; }
.app-header .dx-texteditor.dx-editor-filled::after { border: none; }
.app-header .dx-texteditor.dx-editor-filled.dx-state-focused { background: #fff; box-shadow: 0 0 0 2px var(--primary-soft); }
.app-header .dx-texteditor.dx-editor-filled .dx-placeholder { color: #9aa3af; }
#appToolbar { flex: 1 1 auto; }

/* 사용자 칩 / 아바타 */
.user-chip { color: var(--text); font-size: 0.92rem; display: inline-flex; align-items: center; gap: 0.65rem; font-weight: 600; padding: 0 0.4rem; margin-right: 1.25rem; white-space: nowrap; }
.avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; }
.user-name { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.user-role { font-size: 0.72rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* 사이드바 내비게이션 */
/* 그룹: 배경 없이 섹션 타이틀 + 간격으로만 구분 */
.nav-section { margin-bottom: 0.35rem; }
.nav-section + .nav-section { border-top: 1px solid var(--border); padding-top: 0.35rem; }
.nav-section-title { font-size: 0.73rem; font-weight: 700; letter-spacing: 0.05em; color: #9aa3af; padding: 0.6rem 0.7rem 0.3rem; }
.nav-item {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.65rem 0.8rem; margin: 0.1rem 0;
  border-radius: 10px; cursor: pointer;
  color: var(--text); font-size: 0.97rem; font-weight: 500;
  text-decoration: none; position: relative;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-item .dx-icon { font-size: 20px; color: #98a2b3; transition: color 0.12s ease; }
.nav-item:hover { background: #eef0f3; }
.nav-item.active { background: var(--primary-soft); color: var(--primary); }
.nav-item.active .dx-icon { color: var(--primary); }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 58%; border-radius: 0 3px 3px 0; background: var(--primary);
}

.container { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.25rem; }
.lead { color: var(--muted); font-size: 1.075rem; margin: 0.5rem 0 1.75rem; }
footer { text-align: center; color: var(--muted); padding: 2rem 0; }

h1 { font-size: 2.15rem; margin: 0 0 0.6rem; }
h2 { font-size: 1.45rem; margin: 0; }
h3 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; color: var(--muted); }

/* 학생 카드 그리드 */
.student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.6rem;
  margin-top: 2rem;
}
.student-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.6rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.student-head { display: flex; justify-content: space-between; align-items: center; }
.badge {
  background: #eef2ff; color: var(--primary-dark);
  padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
}
.profile-type { color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0 0; }

.score-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.score-table th { padding: 0.6rem; text-align: left; font-weight: 600; font-size: 0.8rem; border-bottom: 2px solid var(--border); }
.score-table td { padding: 0.6rem; border-bottom: 1px solid var(--border); }
.score-table td:first-child { font-weight: 600; color: var(--text); min-width: 45px; }
.score-table td:last-child { color: var(--muted); font-size: 0.8rem; text-align: center; min-width: 35px; }

.score-cell { }
.score-progress-wrap { display: flex; align-items: center; gap: 0.8rem; }
.score-progress { flex: 1; height: 8px; border: none; border-radius: 4px; background: #eef2ff; accent-color: var(--primary); }
.score-progress::-webkit-progress-bar { background: #eef2ff; border-radius: 4px; }
.score-progress::-webkit-progress-value { background: linear-gradient(to right, var(--primary), var(--primary-dark)); border-radius: 4px; }
.score-progress::-moz-progress-bar { background: linear-gradient(to right, var(--primary), var(--primary-dark)); border-radius: 4px; }
.score-value { font-size: 0.8rem; font-weight: 700; color: var(--primary-dark); min-width: 38px; text-align: right; }

.weak-units { list-style: none; padding: 0; margin: 0; }
.weak-units li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.25rem 0; border-bottom: 1px dashed var(--border); font-size: 0.85rem; }
.unit-name { font-weight: 600; }
.rate { color: var(--muted); }
.pattern { background: #fef3c7; color: #92400e; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.75rem; }
.muted { color: var(--muted); font-size: 0.85rem; }

/* 공통 버튼: 모든 버튼은 동일한 높이(--btn-h)로 고정한다(테두리 유무와 무관). */
/* ── 기본 버튼 (Large) ── */
.btn-primary, .btn-secondary, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--btn-h);
  line-height: 1.2;
  padding: 0 1.3rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-secondary:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-danger {
  background: #fff;
  color: #dc2626;
  border: 1px solid #fca5a5;
}
.btn-danger:hover {
  background: #fee2e2;
  border-color: #dc2626;
}
.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 폼 */
.form-grid { display: grid; gap: 1rem; max-width: 540px; }
.form-row { display: flex; flex-direction: column; gap: 0.3rem; }
.form-row label { font-weight: 600; font-size: 0.9rem; }
.form-row select, .form-row input[type=text], .form-row input[type=number] {
  padding: 0.5rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95rem;
}
.ratio-display { font-weight: 600; color: var(--primary-dark); }
.validation { color: #dc2626; font-size: 0.85rem; }
.radio-group { display: flex; gap: 1rem; }
.radio { font-weight: 400; display: inline-flex; align-items: center; gap: 0.3rem; }
input[type=range] { width: 100%; }
.student-banner { display: flex; gap: 0.6rem; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 1rem; margin-bottom: 1.2rem; }

/* 문제 미리보기 */
.question-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.q-type { display: inline-block; font-size: 0.75rem; background: #eef2ff; color: var(--primary-dark); padding: 0.1rem 0.5rem; border-radius: 999px; margin-bottom: 0.4rem; }
.q-choices { list-style: none; padding: 0; margin: 0.5rem 0; }
.q-choices li { padding: 0.15rem 0; }
.q-answer { margin-top: 0.5rem; padding: 0.5rem; background: #f0fdf4; border-left: 3px solid #16a34a; font-size: 0.9rem; }
.answer-box { border: 1px dashed var(--border); border-radius: 6px; min-height: 2.5rem; margin-top: 0.4rem; }
.answer-box.essay { min-height: 5rem; }
.toolbar { display: flex; gap: 0.6rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.toolbar a, .toolbar button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; min-height: 38px; border-radius: 6px; }

/* 문제지 */
.paper { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; }
.paper-header { border-bottom: 2px solid var(--text); padding-bottom: 0.8rem; margin-bottom: 1.2rem; }
.paper-header h2 { font-size: 1.3rem; }
.paper-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--muted); font-size: 0.88rem; margin-top: 0.3rem; }
.q-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.q-no { font-weight: 700; }
.q-text { flex: 1; }
.btn-regen { font-size: 0.78rem; color: var(--primary-dark); text-decoration: none; border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.5rem; }
.btn-regen:hover { background: #eef2ff; }
.question-item.regenerating { opacity: 0.5; position: relative; }
.question-item.regenerating::after { content: "재생성 중…"; position: absolute; top: 0.5rem; right: 0.5rem; font-size: 0.78rem; color: var(--primary-dark); }
.loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; z-index: 50; }
.loading-overlay[hidden] { display: none; }
.spinner { width: 42px; height: 42px; border: 4px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 오류 페이지 */
.error-page { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; text-align: center; max-width: 560px; margin: 2rem auto; }
.error-message { color: var(--muted); margin: 1rem 0 1.5rem; }
.error-page .toolbar { justify-content: center; }

/* ── 로그인 (스플릿 스크린: 좌측 브랜드 히어로 + 우측 폼) ── */
.login-body { display: flex; min-height: 100vh; margin: 0; }

/* 좌측 히어로 */
.login-hero {
  flex: 1 1 52%;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2f86ff 0%, var(--primary) 45%, #0e44c7 100%);
  color: #fff;
  padding: 3.5rem 3.75rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.login-hero::before,
.login-hero::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.10);
}
.login-hero::before { width: 460px; height: 460px; right: -160px; top: -150px; }
.login-hero::after  { width: 320px; height: 320px; left: -120px; bottom: -130px; background: rgba(255,255,255,0.07); }
.hero-brand { display: flex; align-items: center; gap: 0.7rem; position: relative; z-index: 1; }
.hero-brand .logo-mark { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,0.22); box-shadow: none; font-size: 1.05rem; }
.hero-brand-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.hero-copy { position: relative; z-index: 1; }
.hero-title { font-size: 2.7rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 1rem; }
.hero-sub { font-size: 1.1rem; line-height: 1.7; opacity: 0.92; margin: 0; }
.hero-foot { position: relative; z-index: 1; font-size: 0.82rem; opacity: 0.75; }

/* 우측 폼 패널 */
.login-panel { flex: 1 1 48%; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--card); }
.login-form-wrap { width: 100%; max-width: 360px; }
.panel-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.4rem; }
.panel-sub { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.9rem; }
.login-form { display: flex; flex-direction: column; gap: 1.1rem; }

@media (max-width: 880px) {
  .login-hero { display: none; }
  .login-panel { flex: 1 1 100%; }
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.field-input {
  height: 44px; padding: 0 0.85rem; font-size: 0.95rem;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  font-family: inherit; transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.field-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field-msg { color: #dc2626; font-size: 0.8rem; }
.login-error { color: #dc2626; font-size: 0.86rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; padding: 0.55rem 0.7rem; }
.login-error:empty { display: none; }
.login-btn {
  height: 46px; margin-top: 0.3rem; border: none; border-radius: 10px; cursor: pointer;
  background: var(--primary); color: #fff; font-size: 0.98rem; font-weight: 700; font-family: inherit;
  box-shadow: 0 2px 6px rgba(27,109,255,0.30); transition: background 0.12s ease;
}
.login-btn:hover { background: var(--primary-dark); }
.login-demo { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 0.3rem; }
.login-demo-title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #9aa3af; }
.login-demo code { font-size: 0.82rem; color: var(--muted); background: var(--bg); padding: 0.2rem 0.45rem; border-radius: 6px; width: fit-content; }

/* ── 역할 칩 / 상태 배지 ── */
.role-chip { display: inline-flex; align-items: center; background: var(--primary-soft); color: var(--primary-dark); font-size: 0.8rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px; }
.status-badge { display: inline-flex; align-items: center; font-size: 0.8rem; font-weight: 700; padding: 0.18rem 0.65rem; border-radius: 999px; }
.status-badge.on { background: #e7f7ee; color: #137a45; }
.status-badge.off { background: #f1f3f5; color: #6b7280; }

/* ── 페이지 헤더(제목 + 우측 액션) ── */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.page-head .btn-primary { margin-top: 0; }

/* ── SOOP 보드형 헤더 (좌: 제목+검색 / 우: 보기·필터·추가) ── */
.board-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.board-left { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.board-title { font-size: 1.45rem; font-weight: 800; margin: 0; display: inline-flex; align-items: baseline; gap: 0.4rem; }
.board-count { font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.board-count b { color: var(--primary); font-weight: 800; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px;
  background: #fff; color: var(--text); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease;
}
.icon-btn:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.icon-btn .dx-icon { font-size: 17px; }
.board-search { display: inline-flex; align-items: center; }
.board-search[hidden] { display: none; }
.board-search input {
  border: 1px solid var(--border); border-radius: 9px; padding: 0.5rem 0.85rem;
  width: 240px; max-width: 100%; font-size: 0.92rem; font-family: inherit; color: var(--text); outline: none;
}
.board-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.board-right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.vt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 34px; border: none; background: #fff; color: var(--muted); cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.vt-btn + .vt-btn { border-left: 1px solid var(--border); }
.vt-btn:hover { background: #f6f7f9; color: var(--text); }
.vt-btn.active { background: var(--primary-soft); color: var(--primary-dark); }
.divider { width: 1px; height: 22px; background: var(--border); }
.text-btn {
  display: inline-flex; align-items: center; gap: 0.3rem; height: 36px; padding: 0 0.9rem;
  border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--text);
  font-size: 0.92rem; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.text-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.text-btn .dx-icon { font-size: 14px; transition: transform 0.15s ease; }
.text-btn.open .dx-icon { transform: rotate(180deg); }
/* 보드 헤더의 버튼은 컴팩트 툴바(아이콘 34px)와 어울리도록 같은 높이로 통일 */
.board-right .btn-primary, .board-right .btn-secondary, .board-right .btn-danger { margin-top: 0; min-height: 36px; gap: 0.35rem; }

/* ── 확장 필터 패널 ── */
.filter-panel {
  margin-top: 1rem; padding: 1.1rem 1.25rem; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 0.85rem;
}
.filter-panel[hidden] { display: none; }
.filter-row { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.filter-label { width: 54px; flex-shrink: 0; font-size: 0.88rem; font-weight: 700; color: var(--muted); }
.filter-opts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.opt {
  border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.9rem;
  background: #fff; color: var(--text); font-size: 0.88rem; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.opt:hover { border-color: var(--primary); }
.opt.active { border-color: var(--primary); background: var(--primary); color: #fff; }

/* ── 카드형 보기 ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.card-grid[hidden] { display: none; }
.user-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.85rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.user-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.user-card-head { display: flex; align-items: center; gap: 0.75rem; }
.uc-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%; background: var(--primary-soft);
  color: var(--primary-dark); font-weight: 800; font-size: 1.1rem;
}
.uc-name { font-weight: 700; font-size: 1rem; }
.uc-user { font-size: 0.85rem; color: var(--muted); }
.uc-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.15rem; }
.uc-date { font-size: 0.82rem; color: var(--muted); }

/* ── 데이터 카드 + 테이블 ── */
.data-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; margin-top: 1.5rem; }
.table-toolbar { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.table-search { display: inline-flex; align-items: center; gap: 0.5rem; background: #f1f3f5; border-radius: 999px; padding: 0.5rem 0.95rem; width: 320px; max-width: 100%; }
.table-search .dx-icon { font-size: 18px; color: var(--muted); }
.table-search input { border: none; background: transparent; outline: none; width: 100%; font-size: 0.95rem; font-family: inherit; color: var(--text); }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  text-align: left; font-size: 0.82rem; font-weight: 700; color: var(--muted);
  padding: 0.95rem 1.25rem; background: #fafbfc; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table tbody td { padding: 1rem 1.25rem; border-bottom: 1px solid #f2f4f6; font-size: 0.96rem; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: #fafbfd; }
/* 테이블 col-action 열 최소 너비 */
.data-table th.col-action, .data-table td.col-action { min-width: 130px; }
.cell-strong { font-weight: 600; }
.cell-muted { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.table-empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }

/* ── 모달 ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(17,24,39,0.5); display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 100; }
.modal-overlay[hidden] { display: none; }
.modal { width: 100%; max-width: 520px; background: var(--card); border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.12); overflow: hidden; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 2rem 2rem 1.5rem; gap: 0.8rem; background: var(--card); }
.modal-head-icon { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.modal-head h2 { font-size: 1.4rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 0.9rem; flex: 1; letter-spacing: -0.3px; }
.modal-close { border: none; background: transparent; font-size: 1.8rem; line-height: 1; color: #4b5563; cursor: pointer; padding: 0; transition: color 0.2s; }
.modal-close:hover { color: #1f2937; }
.modal-body { padding: 0 3rem 3rem 2rem; display: flex; flex-direction: column; gap: 1.2rem; flex: 1; overflow-y: auto; max-height: calc(100vh - 200px); }
.modal-body p { margin: 0; line-height: 1.6; word-break: break-word; }
.modal-body .cell-muted { white-space: normal; }
.modal-foot { display: flex; justify-content: flex-end; gap: 0.8rem; padding: 1.5rem 2rem; border-top: none; background: var(--card); }
.modal-foot .btn-primary, .modal-foot .btn-secondary, .modal-foot .btn-danger { margin-top: 0; }
/* ── 모달 헤더 아이콘 색상 변형 ── */
.modal-head-icon.danger { color: #dc2626; }  /* 삭제/경고 */
.modal-head-icon.info { color: #1b6dff; }    /* 정보 */
.modal-head-icon.success { color: #059669; } /* 성공 */
.modal-head-icon.error { color: #dc2626; }   /* 오류 */
.form-error { color: #dc2626; font-size: 0.88rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; padding: 0.6rem 0.75rem; }
.form-error[hidden] { display: none; }
.role-checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.check-pill { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.45rem 0.85rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; user-select: none; }
.check-pill input { accent-color: var(--primary); width: 16px; height: 16px; }
.check-pill:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.switch-row { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.switch-row input { accent-color: var(--primary); width: 18px; height: 18px; }

/* ── 사이트 설정 폼 ── */
.form-ok { color: #047857; font-size: 0.9rem; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 9px; padding: 0.6rem 0.8rem; margin-top: 1rem; }
.form-ok[hidden], .setting-form .form-error[hidden] { display: none; }
.setting-form .form-error { margin-top: 1rem; }
.setting-form { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
.setting-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 1.4rem 1.6rem; }
.setting-cat { font-size: 1.05rem; font-weight: 800; margin: 0 0 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--border); }
.setting-rows { display: flex; flex-direction: column; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.95rem 0; border-bottom: 1px solid #f2f4f6; }
.setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.setting-row:first-child { padding-top: 0; }
.setting-meta { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.setting-label { font-size: 0.98rem; font-weight: 600; color: var(--text); }
.setting-desc { font-size: 0.84rem; color: var(--muted); }
.setting-control { flex-shrink: 0; }
.setting-input { width: 280px; max-width: 46vw; }
input.setting-input[type="number"] { width: 160px; }

/* 토글 스위치 */
.toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track { width: 46px; height: 26px; border-radius: 999px; background: #d1d5db; position: relative; transition: background 0.15s ease; }
.toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.15s ease; }
.toggle input:checked + .toggle-track { background: var(--primary); }
.toggle input:checked + .toggle-track::after { transform: translateX(20px); }
.toggle input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px var(--primary-soft); }

/* ── SOOP풍 폴리시 (카드/버튼/그림자/타이포) ── */
.student-card, .student-banner, .paper, .error-page { border-radius: 14px; box-shadow: var(--shadow-sm); border-color: var(--border); }
.student-card { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.student-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.question-item { border-radius: 12px; box-shadow: var(--shadow-sm); border-color: var(--border); }
.btn-primary { border-radius: 10px; box-shadow: 0 1px 2px rgba(27,109,255,0.30); }
.btn-secondary { border-radius: 10px; }
.badge { background: var(--primary-soft); color: var(--primary-dark); }
.bar { background: #eef1f6; }
.bar-fill { background: var(--primary); }
.pattern { background: #fff4e5; color: #9a5b00; }
h1 { letter-spacing: -0.02em; font-weight: 800; }
h1 .dx-icon { color: #d97706; vertical-align: -2px; }

/* ── 보기 전환 (리스트/카드) ── */
.vt-btn svg { width: 18px; height: 18px; }
.btn-primary-mini { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary-mini:hover { background: var(--primary-dark); }

/* ── SVG 아이콘 (깔끔한 스타일 - SOOP) ── */
.btn-mini { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); cursor: pointer; transition: all 0.2s; }
.btn-mini:hover { background: #f5f6f7; border-color: var(--primary); }
.btn-mini svg { width: 16px; height: 16px; color: #98A2B3; transition: color 0.2s; flex-shrink: 0; }
.btn-mini:hover svg { color: var(--primary); }
.btn-mini.btn-delete { }
.btn-mini.btn-delete svg { color: #dc2626; }
.btn-mini.btn-delete:hover { border-color: #dc2626; background: #fee2e2; }
.btn-mini.btn-delete:hover svg { color: #991b1b; }
.btn-primary-mini { border-color: var(--primary); background: var(--primary); }
.btn-primary-mini:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-primary-mini svg { color: #fff; }
.cell-action-center { text-align: center; }
.col-action { text-align: center; display: flex; gap: 0.4rem; justify-content: center; flex-wrap: nowrap; align-items: center; }
/* 테이블 col-action 셀 최소 너비 */
td.col-action { min-width: 210px; }

/* ── 텍스트 버튼 (아이콘 + 텍스트) ── */
.btn-text { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card); cursor: pointer; transition: all 0.2s; color: var(--text); text-decoration: none; white-space: nowrap; flex-shrink: 0; line-height: 1; }
.btn-text:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.btn-text .icon { width: 14px; height: 14px; color: #98A2B3; flex-shrink: 0; }
.btn-text:hover .icon { color: var(--primary); }
.btn-danger-text { color: #dc2626; border-color: #fca5a5; }
.btn-danger-text:hover { border-color: #dc2626; background: #fee2e2; color: #dc2626; }
.btn-danger-text:hover .icon { color: #dc2626; }
.btn-danger-text .icon { color: #dc2626; }

/* ── 리스트 보기 (SOOP 스타일 - 깔끔) ── */
.student-list-view { display: flex; flex-direction: column; gap: 0.8rem; }
.student-list-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); }

.list-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.list-info { flex: 1; min-width: 0; }
.list-name { font-size: 0.95rem; font-weight: 700; margin: 0; color: var(--text); }
.list-meta { font-size: 0.8rem; color: var(--muted); margin: 0.2rem 0 0; }
.list-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

/* 성적 상세 버튼 */
.btn-score-detail { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; height: 32px; padding: 0 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-score-detail:hover { border-color: var(--primary); color: var(--primary); background: #f5f6f7; }
.btn-score-detail svg { width: 12px; height: 12px; stroke: currentColor; }

.list-weak { font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
.weak-label { font-weight: 600; color: var(--text); }
.weak-item { display: inline; margin-right: 0.8rem; }
.weak-rate { color: var(--muted); font-size: 0.75rem; margin-left: 0.2rem; }

/* ── 성적 모달 ── */
.modal-lg { max-width: 600px; }
.score-section { margin-bottom: 1.5rem; }
.score-section:last-child { margin-bottom: 0; }
.score-title { font-size: 0.92rem; font-weight: 700; margin-bottom: 0.8rem; }
.score-table { width: 100%; border-collapse: collapse; }
.score-table thead { background: #f5f6f7; }
.score-table th { padding: 0.6rem; text-align: left; font-size: 0.85rem; font-weight: 600; }
.score-table td { padding: 0.6rem; border-bottom: 1px solid var(--border); }
.score-table .bar { display: flex; align-items: center; gap: 0.5rem; }
.score-table .bar-fill { background: var(--primary); height: 6px; border-radius: 3px; flex: 1; }
.score-table .bar-label { font-size: 0.85rem; font-weight: 600; min-width: 35px; }

/* ── 통계 바 (대시보드) ── */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0; }
.stat-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: 0.3rem; box-shadow: var(--shadow-sm); }
.stat-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); letter-spacing: -0.01em; }
.stat-value { font-size: 1.8rem; font-weight: 800; color: var(--primary); }
@media (max-width: 1024px) { .stats-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .stats-bar { grid-template-columns: 1fr; } }

/* ── 문제 설정 폼 (세로 배치 - SOOP 스타일) ── */
.config-layout-vertical { margin-top: 1.5rem; }
.config-container-vertical { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.2rem; }
.config-section { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem; box-shadow: var(--shadow-sm); }
.section-title { font-size: 0.9rem; font-weight: 700; color: var(--text); margin: 0 0 1rem; letter-spacing: -0.01em; }

.info-summary-clean { padding: 0; }
.summary-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.summary-label { font-weight: 700; color: var(--muted); }
.summary-value { font-weight: 600; color: var(--text); }
.summary-divider { color: var(--border); }

.config-form-vertical { display: flex; flex-direction: column; gap: 0.8rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.form-item-sm { display: flex; flex-direction: column; gap: 0.3rem; }
.form-item-full { display: flex; flex-direction: column; gap: 0.3rem; }
.form-label-sm { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.field-input-sm { padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; }
.field-input-sm:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,109,255,0.1); }
.radio-row-compact { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.radio-sm { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; font-size: 0.9rem; }
.radio-sm input[type=radio] { width: 14px; height: 14px; accent-color: var(--primary); }
.ratio-control-sm { display: flex; flex-direction: column; gap: 0.5rem; }
.ratio-display-compact-vertical { font-size: 0.9rem; font-weight: 600; color: var(--primary); }
.ratio-labels-bottom { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 600; margin-top: 0.4rem; }

.config-footer-vertical { display: flex; gap: 0.8rem; margin-top: 1.5rem; }
.config-footer-vertical .btn-primary, .config-footer-vertical .btn-secondary {
  flex: 1; height: 40px; font-size: 0.93rem; padding: 0; margin-top: 0;
  display: flex; align-items: center; justify-content: center;
}
.form-item { display: flex; flex-direction: column; gap: 0.35rem; }
.form-item.form-full-width { grid-column: 1/-1; }
.form-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.ratio-slider-compact { display: flex; flex-direction: column; gap: 0.5rem; }
.ratio-display-compact { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; }
.ratio-display-compact strong { color: var(--primary); }
.form-actions { display: flex; gap: 0.8rem; }
.form-actions-full { display: flex; gap: 0.8rem; margin-top: 1.5rem; }
.btn-lg { height: var(--btn-h); font-size: 0.98rem; padding: 0 1.3rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; flex: 1; border-radius: 10px; font-weight: 600; cursor: pointer; }
@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } }

/* ── 폼·카드 스타일 (보드형 통일) ── */
.data-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; box-shadow: var(--shadow-sm); }
.form-section { margin-bottom: 1.75rem; }
.form-section:last-of-type { margin-bottom: 1.5rem; }
.form-section-title { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.9rem; color: var(--text); }
.form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 768px) { .form-row-pair { grid-template-columns: 1fr; } }
.field-input { padding: 0.6rem 0.9rem; border: 1px solid var(--border); border-radius: 9px; font-size: 0.95rem; font-family: inherit; }
.field-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,109,255,0.1); }
.field-input select { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23666" d="M1 1l5 5 5-5"/></svg>'); background-repeat: no-repeat; background-position: right 0.6rem center; padding-right: 2rem; appearance: none; }
.field-hint { font-size: 0.8rem; color: var(--muted); margin-top: -0.2rem; }
.radio-row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.radio { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font-size: 0.95rem; user-select: none; }
.radio input[type=radio] { cursor: pointer; width: 16px; height: 16px; accent-color: var(--primary); }
.ratio-control { display: flex; flex-direction: column; gap: 0.6rem; }
.ratio-labels { display: flex; justify-content: space-between; font-size: 0.88rem; font-weight: 600; }
.ratio-labels span { color: var(--text); }
.ratio-labels strong { color: var(--primary); }
.form-footer { display: flex; gap: 0.8rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.form-footer .btn-primary, .form-footer .btn-secondary { margin-top: 0; }
.card-title { font-size: 1.2rem; font-weight: 800; margin: 0; }
.card-section-title { font-size: 0.92rem; font-weight: 700; margin: 1.2rem 0 0.6rem; }
.card-section-title:first-child { margin-top: 0; }
.weak-units { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.weak-units li { padding: 0.6rem 0.8rem; background: #f8f9fa; border-radius: 8px; font-size: 0.9rem; }
.weak-units .unit-main { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.2rem; }
.weak-units .unit-name { font-weight: 600; color: var(--text); }
.weak-units .rate { font-size: 0.85rem; color: var(--primary); font-weight: 700; }
.weak-units .pattern { background: none; color: var(--muted); font-size: 0.8rem; margin-top: 0.3rem; }
.btn-block { width: 100%; }
.button-group { display: flex; gap: 0.8rem; margin-top: 1rem; align-items: center; }
.button-group .btn-primary, .button-group .btn-secondary { flex: 1; margin-top: 0; height: var(--btn-h); }

/* ── 대시보드 (QBK-ORR-002) ── */
.dash-head { margin-bottom: 1.5rem; }
.dash-sub { margin: 0.35rem 0 0; color: var(--muted); display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.98rem; }
.dash-role { display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; font-size: 0.85rem; }
.dash-dot { color: var(--border); }
.dash-h2 { font-size: 1.1rem; font-weight: 800; margin: 1.75rem 0 0.9rem; letter-spacing: -0.01em; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.stat-tile { display: flex; align-items: center; gap: 0.9rem; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); }
.stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--primary-soft); color: var(--primary-dark); }
.stat-icon .dx-icon { font-size: 22px; }
.stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.stat-label { color: var(--muted); font-size: 0.88rem; font-weight: 600; margin-top: 0.15rem; }

.shortcut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.shortcut-card { display: flex; flex-direction: column; gap: 0.35rem; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text); transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; }
.shortcut-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--primary); }
.sc-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--primary-soft); color: var(--primary-dark); margin-bottom: 0.4rem; }
.sc-icon .dx-icon { font-size: 20px; }
.sc-title { font-weight: 700; font-size: 1.02rem; }
.sc-desc { color: var(--muted); font-size: 0.88rem; }
.dash-empty { padding: 1.5rem; color: var(--muted); }

/* ── 문제지 생성 모달 (Dashboard) ── */
.gen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gen-req { color: #dc2626; font-size: 0.85rem; }
.gen-ratio-val { color: var(--primary); margin-left: 0.35rem; }
/* dxSelectBox 테두리·포커스를 field-input 스타일과 통일 */
#genStudentBox .dx-texteditor { border-radius: 9px; border-color: var(--border); font-family: inherit; font-size: 0.95rem; }
#genStudentBox .dx-texteditor.dx-state-focused { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,109,255,0.1); }

/* ── CSV 업로드 미리보기 모달 (학생 관리) ── */
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
.scope-badge { display: inline-flex; align-items: center; padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; }
.scope-badge.global { background: var(--primary-soft); color: var(--primary-dark); }
.scope-badge.academy { background: #f1f3f5; color: #495057; }
.col-check { width: 42px; text-align: center; }
.col-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; vertical-align: middle; }
.modal.modal-wide { max-width: 760px; width: 92vw; }
.csv-summary { font-size: 0.92rem; font-weight: 600; padding: 0.6rem 0.8rem; border-radius: 9px; margin-bottom: 0.9rem; }
.csv-summary.is-ok { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.csv-summary.has-error { color: #b42318; background: #fef3f2; border: 1px solid #fecdca; }
.csv-preview-wrap { max-height: 52vh; overflow: auto; }
.csv-preview-wrap .data-table thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
tr.row-invalid { background: #fef3f2; }
.row-msg { font-size: 0.8rem; color: #b42318; margin-top: 0.2rem; }

/* ── 시험지 배정 모달 ── */
.modal-fullscreen { width: 96vw; max-width: 1400px; height: 90vh; max-height: 90vh; display: flex; flex-direction: column; }
.assign-modal-body { flex: 1; overflow: hidden; padding: 0; display: grid; grid-template-columns: 280px 1fr 240px; min-height: 0; }

/* 좌: 시험지 목록 */
.ap-left { display: flex; flex-direction: column; gap: 0; border-right: 1px solid var(--border); min-height: 0; }
.ap-filter-row { display: flex; gap: 0.5rem; padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ap-filter-row .field-input-sm { flex: 1; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.85rem; font-family: inherit; appearance: none; background: var(--bg); color: var(--text); }
.ap-filter-row .field-input-sm:focus { outline: none; border-color: var(--primary); }
.ap-paper-list { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
.ap-paper-item { padding: 0.8rem 0.9rem; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.12s; }
.ap-paper-item:hover { background: var(--primary-soft); }
.ap-paper-item.selected { background: var(--primary-soft); border-left: 3px solid var(--primary); }
.ap-pi-main { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.3rem; }
.ap-pi-subject { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.ap-pi-unit { font-size: 0.83rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.ap-pi-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.8rem; }
.ap-pi-diff { color: var(--muted); }
.ap-pi-count { color: var(--muted); }
.ap-pi-assigned { font-size: 0.78rem; color: var(--muted); }
.ap-pi-assigned.assigned { color: var(--primary); font-weight: 700; }
.ap-pi-date { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }
.badge-sm { display: inline-flex; align-items: center; padding: 0.08rem 0.45rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--primary-soft); color: var(--primary-dark); }

/* 중: 문제 미리보기 */
.ap-middle { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border); }
.ap-empty-msg { color: var(--muted); font-size: 0.93rem; padding: 1.5rem; }
#apPreviewContent { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.ap-paper-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: 0.88rem; }
.ap-meta-badge { display: inline-flex; padding: 0.18rem 0.6rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; font-size: 0.82rem; }
.ap-meta-unit { background: #f1f3f5; color: var(--text); }
.ap-meta-diff { color: var(--muted); font-weight: 600; }
.ap-meta-count { color: var(--text); font-weight: 700; }
.ap-meta-date { color: var(--muted); margin-left: auto; }
.ap-questions { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.ap-q-item { padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.ap-q-item .ap-q-num { font-weight: 700; margin-right: 0.35rem; color: var(--text); }
.ap-q-type { display: inline-flex; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; margin-right: 0.5rem; }
.ap-q-type.mc { background: #e0f2fe; color: #0369a1; }
.ap-q-type.sa { background: #f0fdf4; color: #15803d; }
.ap-q-text { margin-top: 0.45rem; font-size: 0.93rem; line-height: 1.6; }
.ap-q-choices { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ap-q-choices li { font-size: 0.88rem; color: var(--muted); padding-left: 0.2rem; }
.ap-q-answer { margin-top: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--primary); border-top: 1px dashed var(--border); padding-top: 0.4rem; }

/* 우: 학생 선택 */
.ap-right { display: flex; flex-direction: column; min-height: 0; }
.ap-students-head { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ap-students-head .field-label { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.ap-select-all { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; font-size: 0.82rem; color: var(--muted); }
.ap-select-all input { accent-color: var(--primary); width: 14px; height: 14px; }
.ap-student-list { flex: 1; overflow-y: auto; padding: 0.4rem 0; }
.ap-student-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.9rem; cursor: pointer; transition: background 0.1s; font-size: 0.9rem; }
.ap-student-item:hover { background: var(--primary-soft); }
.ap-student-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.ap-stu-name { color: var(--text); font-weight: 600; }
.ap-assign-foot { padding: 0.85rem 0.9rem; border-top: 1px solid var(--border); flex-shrink: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ap-assign-btn { width: 100%; justify-content: center; }
.form-success { font-size: 0.85rem; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; padding: 0.5rem 0.75rem; }

/* ── 공개범위 배지 (Dashboard) ── */
.scope-badge.scope-public  { background:#ecfdf5; color:#047857; }
.scope-badge.scope-academy { background:var(--primary-soft); color:var(--primary-dark); }
.scope-badge.scope-draft   { background:#f3f4f6; color:#6b7280; }
.scope-academy-name { font-size:.78rem; color:var(--muted); margin-left:.4rem; }

/* 범위 편집 모달 */
.modal.modal-sm { max-width: 420px; }
.scope-radio-list { display:flex; flex-direction:column; gap:.7rem; align-items:stretch; }
.scope-radio-opt { width:100%; box-sizing:border-box; align-items:flex-start; padding:.5rem .6rem; border-radius:9px; transition:background .1s; }
.scope-radio-opt:hover { background:var(--primary-soft); }
.scope-radio-body { display:flex; flex-direction:column; gap:.2rem; }
.scope-radio-desc { font-size:.82rem; color:var(--muted); }

/* hidden 속성이 .field(display:flex)에 의해 무력화되지 않도록 강제 */
.field[hidden] { display: none; }