/* ── Pretendard 웹폰트 (로컬) ─────────────────── */
@font-face {
    font-family: "Pretendard";
    src: url("fonts/pretendard/Pretendard-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("fonts/pretendard/Pretendard-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("fonts/pretendard/Pretendard-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("fonts/pretendard/Pretendard-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("fonts/pretendard/Pretendard-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("fonts/pretendard/Pretendard-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("fonts/pretendard/Pretendard-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("fonts/pretendard/Pretendard-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("fonts/pretendard/Pretendard-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --bg: #f7f7fb;
    --card: #ffffff;
    --border: #e5e7eb;
    --text: #1f2937;
    --text-light: #6b7280;
    --danger: #ef4444;
    --success: #16a34a;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    padding-left: 64px;
    font-family: "Pretendard", "Malgun Gothic", -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
}
a { color: inherit; text-decoration: none; }
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Header */
.site-header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}
.site-header .logo {
    font-weight: 800;
    font-size: 18px;
    color: var(--primary);
}
.site-header nav a {
    margin-left: 16px;
    font-size: 14px;
    color: var(--text-light);
}

/* Hero */
.hero {
    padding: 40px 0 24px;
    text-align: center;
}
.hero h1 {
    font-size: 26px;
    margin-bottom: 8px;
}
.hero p {
    color: var(--text-light);
    margin: 0;
}
.home-search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 520px;
    margin: 22px auto 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 6px 6px 16px;
}
.home-search svg { width: 18px; height: 18px; color: var(--text-light); flex-shrink: 0; }
.home-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: var(--text);
    padding: 8px 0;
}
.chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 560px;
    margin: 16px auto 0;
}
.chip {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text);
    background: var(--card);
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.on {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}

/* 내 학습 현황 */
.study-status {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin: 30px 0 34px;
}
.study-status h3 { margin: 0 0 12px; font-size: 15px; }
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.stat-tile {
    text-align: center;
    background: var(--bg);
    border-radius: 10px;
    padding: 16px 8px;
}
.stat-value { font-size: 24px; font-weight: 800; color: var(--primary); }
.stat-label { font-size: 12px; color: var(--text-light); margin-top: 4px; }

/* 자격증 등급별 구분 (탭) */
.cert-tabs .cnt {
    color: var(--text-light);
    font-weight: 400;
}
.cert-tab-panel { display: none; }
.cert-tab-panel.active { display: block; }

/* Cards / Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin: 20px 0 40px;
}
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    transition: box-shadow .15s, transform .15s;
}
.card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.card h3 {
    margin: 0 0 6px;
    font-size: 16px;
}
.card .meta {
    font-size: 13px;
    color: var(--text-light);
}
.qimg {
    display: block;
    max-width: 100%;
    margin: 10px 0 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}
.choice-img {
    display: block;
    max-width: min(420px, 100%);
    max-height: 130px;
    width: auto;
    height: auto;
    margin: 6px 0 4px 22px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    padding: 6px;
}
.inline-formula-img {
    display: inline-block;
    vertical-align: middle;
    max-height: 42px;
    max-width: 100%;
    margin: 0 2px;
    background: #fff;
    border-radius: 3px;
    cursor: zoom-in;
}
/* 클릭하면 크게 — 분수식이 작아서 안 보일 때 */
.inline-formula-img.zoomed {
    max-height: 120px;
    cursor: zoom-out;
}
.choice-img.zoomed, .qimg.zoomed { max-width: 100%; }
.choice-img, .qimg { cursor: zoom-in; }
.qtable-wrap {
    overflow-x: auto;
    margin: 10px 0;
}
.qtable {
    border-collapse: collapse;
    font-size: 13px;
}
.qtable td, .qtable th {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: center;
    white-space: nowrap;
}
/* 칸이 하나뿐인 표는 사실상 지문 상자다. 이때까지 nowrap 을 걸면
   문장 하나가 1700px 짜리 한 줄이 되어 가로 스크롤이 생긴다. */
.qtable tr:only-child td:only-child,
.qtable tbody tr:only-child td:only-child {
    white-space: normal;
    text-align: left;
    line-height: 1.75;
}
.qtable th {
    background: var(--bg-alt, rgba(127,127,127,0.12));
    font-weight: 600;
}
.badge {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--primary);
    margin-bottom: 8px;
}
/* 등급 배지 + 자격 종류 딱지를 한 줄에 */
.cert-tags {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    margin-bottom: 8px;
}
.cert-tags .badge { margin-bottom: 0; }
.cert-tags .cert-qual { margin-bottom: 0; }
.cert-tags .cert-expl { margin-bottom: 0; }

/* 해설이 들어 있는 종목 표시 — 강조는 하되 등급 배지보다 조용하게 */
.cert-expl {
    display: inline-block;
    margin: 0 0 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}
:root[data-theme="dark"] .cert-expl { background: #10281a; color: #86efac; }

/* 자격 종류 딱지 —
   거의 모든 카드에 같은 값(국가기술자격)이 붙는 부가 정보라,
   색으로 강조하지 않고 회색으로 조용히 둔다. 강조는 등급 배지(.badge)가 맡는다. */
.cert-qual {
    display: inline-block;
    margin: 0 0 8px;
    /* 등급 배지(.badge)와 높이를 똑같이 맞춘다 */
    padding: 2px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
}
:root[data-theme="dark"] .cert-qual { background: #2a2d35; color: #b6bcc7; }

/* 필기 / 실기 구분 배지 */
.badge-written   { background: #dbeafe; color: #1d4ed8; }
.badge-practical { background: #dcfce7; color: #15803d; }
.card.card-written   { border-top: 3px solid #3b82f6; }
.card.card-practical { border-top: 3px solid #22c55e; }


/* Tabs */
.tabs {
    display: flex;
    gap: 8px;
    margin: 20px 0 12px;
    border-bottom: 1px solid var(--border);
}
.tabs a,
.tabs button {
    padding: 10px 16px;
    font-weight: 600;
    color: var(--text-light);
    border-bottom: 2px solid transparent;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
}
.tabs a.active,
.tabs button.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Round list */
.year-group { margin-bottom: 22px; }
.year-group h4 {
    font-size: 14px;
    color: var(--text-light);
    margin: 0 0 8px;
}
.round-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 8px;
}
.round-row .title { font-weight: 600; }
.round-row .count { font-size: 13px; color: var(--text-light); margin-top: 2px; }
.btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.btn:hover { background: var(--primary-dark); }
.btn.secondary {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.btn.ghost {
    background: transparent;
    color: var(--text-light);
    border: 1px solid var(--border);
}

/* Mode select */
.mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0;
}
.mode-option {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
}
.mode-option input { margin-right: 6px; }
.mode-option .desc { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.mode-option.selected {
    border-color: var(--primary);
    background: #eef2ff;
}

/* Exam page */
.exam-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: start;
}
/* grid 아이템의 기본값은 min-width:auto 라서, 안에 줄바꿈되지 않는 긴 내용이
   하나라도 있으면 1fr 칸이 그만큼 부풀어 페이지 전체가 옆으로 늘어난다.
   min-width:0 을 줘야 칸이 정상적으로 줄어든다. */
.exam-layout > * { min-width: 0; }
.exam-sidebar {
    position: sticky;
    top: 70px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}
.timer {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    background: #fef2f2;
    color: var(--danger);
    margin-bottom: 12px;
}
.qnum-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.qnum-grid a {
    display: block;
    text-align: center;
    font-size: 12px;
    padding: 6px 0;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
}
.qnum-grid a.answered {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.question-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 14px;
    scroll-margin-top: 70px;
}
.question-card .qno {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.bookmark-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-light);
    line-height: 0;
}
.bookmark-btn svg { width: 19px; height: 19px; }
.bookmark-btn.active { color: #f59e0b; }
.bookmark-btn.active svg { fill: #f59e0b; }
.question-card .qtext {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    line-height: 1.5;
}
.choice-label {
    /* 보기가 두 줄 이상이면 둘째 줄부터 번호 안쪽으로 들여쓴다 (내어쓰기).
       --ch-hang 이 '4. ' 한 칸의 폭. 라디오가 있으면 그만큼 더 준다. */
    --ch-hang: 1.15em;
    display: block;
    padding: 10px 12px;
    padding-left: calc(12px + var(--ch-hang));
    text-indent: calc(-1 * var(--ch-hang));
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}
/* 문제 풀이 화면은 앞에 라디오 버튼이 있다 (13px + 여백 8px) */
.exam-layout .choice-label,
.choice-label:has(input[type="radio"]) { --ch-hang: 2.45em; }

/* 들여쓰기는 글줄에만 — 안에 든 그림·표는 원래 자리로 */
.choice-label img,
.choice-label > div,
.choice-label .qtable-wrap { text-indent: 0; }

.choice-label:hover { background: #f9fafb; }
.choice-label input { margin-right: 8px; }

.submit-bar {
    position: sticky;
    bottom: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 12px 0;
    text-align: center;
}

/* Result */
.score-summary {
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 30px;
    margin: 20px 0;
}
.score-summary .score {
    font-size: 40px;
    font-weight: 800;
    color: var(--primary);
}
.score-summary .sub { color: var(--text-light); margin-top: 6px; }
.pass-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}
.pass-badge.pass { background: rgba(34,197,94,.15); color: var(--success); }
.pass-badge.fail { background: rgba(239,68,68,.15); color: var(--danger); }

.subject-grade-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 24px;
    margin: 20px 0;
}
.subject-grade-list { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.subject-grade-row { font-size: 14px; }
.subject-grade-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-weight: 600;
}
.subject-grade-pct { font-weight: 700; color: var(--primary); }
.subject-grade-pct.low { color: var(--danger); }
.subject-grade-bar {
    background: var(--border);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}
.subject-grade-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 999px;
}
.subject-grade-fill.low { background: var(--danger); }
.result-item.correct { border-left: 4px solid var(--success); }
.result-item.wrong { border-left: 4px solid var(--danger); }
.result-item .your-answer { font-size: 13px; margin-top: 6px; }
.result-item .explain {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-light);
}
.choice-label.correct-choice { border-color: var(--success); background: #f0fdf4; }
.choice-label.wrong-choice { border-color: var(--danger); background: #fef2f2; }

/* Forms (admin) */
.form-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    max-width: 640px;
    margin-bottom: 20px;
}
.form-box label { display: block; font-weight: 600; margin: 12px 0 6px; font-size: 14px; }
.form-box input[type=text], .form-box input[type=password], .form-box input[type=email], .form-box input[type=number], .form-box select, .form-box textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
.form-box textarea { min-height: 120px; }
.alert {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 14px;
}
.alert.success { background: #f0fdf4; color: var(--success); }
.alert.error { background: #fef2f2; color: var(--danger); }
table.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
table.admin-table th, table.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    text-align: left;
}
table.admin-table th { background: #f9fafb; }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}

/* Category page layout (사이드바 + 본문) */
.category-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}
.category-layout > * { min-width: 0; }
@media (max-width: 720px) {
    .category-layout { grid-template-columns: 1fr; }
}
.category-sidebar {
    position: sticky;
    top: 70px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sidebar-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
}
.sidebar-box h4 {
    margin: 0 0 10px;
    font-size: 14px;
}
.search-input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}
.exam-count {
    font-size: 12px;
    color: var(--text-light);
    margin: 8px 2px 0;
}

/* 실전 모의고사 박스 */
.mock-box select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 8px;
}
.mock-box .desc {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 10px;
}

/* 내 기록 미니 탭 */
.mini-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.mini-tabs button {
    flex: 1 1 auto;
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 4px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-light);
}
.mini-tabs button.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.mini-tab-panel { display: none; }
.mini-tab-panel.active { display: block; }
.record-item {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.record-item:last-child { border-bottom: none; }
.record-item .r-title { font-weight: 600; }
.record-item .r-meta { color: var(--text-light); font-size: 12px; margin-top: 2px; }
.login-notice {
    font-size: 12px;
    color: var(--text-light);
    text-align: center;
    padding: 16px 4px;
}

/* Icon rail (호버시 확장) */
.rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 64px;
    background: var(--card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 45;
    overflow: hidden;
    white-space: nowrap;
    transition: width .16s ease;
}
.rail:hover {
    width: 250px;
    box-shadow: 2px 0 20px rgba(0,0,0,.15);
}
/* 레일이 접혀 있을 때 아이콘들의 세로 중심선은 32px.
   로고(32px)·아바타(28px)처럼 크기가 다른 것도 같은 중심선에 맞춘다. */
.rail-logo { display: flex; align-items: center; padding: 14px 0 10px 16px; }
.rail-badge {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0;
    background: var(--primary); color: #fff;
    border-radius: 9px; font-weight: 800; font-size: 15px;
}
.rail-menu { display: flex; flex-direction: column; padding: 4px 11px; }
.rail-menu a, .rail-item {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 42px;
    padding: 0 11px;
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    flex-shrink: 0;
}
.rail-menu a:hover, .rail-footer a:hover { background: var(--bg); }
.rail-menu svg, .rail-footer svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-light); }
.rail hr { border: none; border-top: 1px solid var(--border); margin: 8px 16px; flex-shrink: 0; }
.rail-label { opacity: 0; transition: opacity .1s ease; }
.rail:hover .rail-label { opacity: 1; }
/* 레일 하위 메뉴 (커뮤니티 > 게시판) */
.rail-sub { max-height: 0; overflow: hidden; transition: max-height .16s ease; }
.rail:hover .rail-sub { max-height: 240px; }
.rail-menu .rail-sub a {
    height: 34px;
    padding: 0 11px 0 47px;
    font-size: 13px;
    color: var(--text-light);
}
.rail-menu .rail-sub a.active { color: var(--primary); font-weight: 700; }

.rail-toggle-row { justify-content: flex-start; }
.rail-toggle-label { display: flex; align-items: center; justify-content: space-between; flex: 1; }
.rail-footer {
    margin-top: auto;
    padding: 10px 11px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rail-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: #111827; color: #fff; flex-shrink: 0;
    /* 20px 아이콘과 같은 중심선에 오도록 좌우로 4px 씩 물린다 */
    margin-left: -4px; margin-right: -4px;
}
.rail-avatar svg { width: 15px; height: 15px; color: #fff; }
.rail-avatar-guest { font-size: 20px; line-height: 1; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; inset: 0; cursor: pointer;
    background: #d1d5db; transition: .2s; border-radius: 999px;
}
.slider:before {
    content: ""; position: absolute; height: 16px; width: 16px;
    left: 3px; top: 3px; background: #fff; transition: .2s; border-radius: 50%;
}
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider:before { transform: translateX(16px); }

/* ================== 다크모드 ================== */
:root[data-theme="dark"] {
    --primary: #818cf8;
    --primary-dark: #a5b4fc;
    --bg: #0f1115;
    --card: #181b22;
    --border: #2a2e37;
    --text: #e5e7eb;
    --text-light: #9aa1ab;
    --danger: #f87171;
    --success: #4ade80;
}
:root[data-theme="dark"] .badge { background: #23264a; color: #a5b4fc; }
:root[data-theme="dark"] .badge-written   { background: #16264a; color: #93c5fd; }
:root[data-theme="dark"] .badge-practical { background: #10281a; color: #86efac; }
:root[data-theme="dark"] .alert.success { background: #10281a; }
:root[data-theme="dark"] .alert.error { background: #33161a; }
:root[data-theme="dark"] .choice-label.correct-choice { background: #10281a; }
:root[data-theme="dark"] .choice-label.wrong-choice { background: #33161a; }
:root[data-theme="dark"] .timer { background: #33161a; }
:root[data-theme="dark"] .explain { background: #20242c; }
:root[data-theme="dark"] table.admin-table th { background: #20242c; }
:root[data-theme="dark"] .mini-tabs button { background: #20242c; }
:root[data-theme="dark"] .mode-option.selected { background: #23264a; }
:root[data-theme="dark"] .qnum-grid a { background: #20242c; }
:root[data-theme="dark"] .form-box, :root[data-theme="dark"] .sidebar-box, :root[data-theme="dark"] .card,
:root[data-theme="dark"] .question-card, :root[data-theme="dark"] .round-row, :root[data-theme="dark"] .score-summary {
    background: var(--card);
}
:root[data-theme="dark"] .form-box input, :root[data-theme="dark"] .form-box select,
:root[data-theme="dark"] .form-box textarea, :root[data-theme="dark"] .search-input {
    background: #20242c;
    color: var(--text);
    border-color: var(--border);
}
:root[data-theme="dark"] .form-box input::placeholder,
:root[data-theme="dark"] .search-input::placeholder {
    color: #6b7280;
}

/* ================== 전자책 (이론교재) ================== */
.book-header { margin: 24px 0 6px; }

.book-layout { margin-top: 18px; }

.book-toc h4 { margin-bottom: 6px; }
.toc-list {
    max-height: 70vh;
    overflow-y: auto;
    font-size: 13px;
}
.toc-major {
    font-weight: 700;
    color: var(--text-light);
    margin: 14px 0 4px;
    font-size: 12px;
}
.toc-list .toc-major:first-child { margin-top: 4px; }
.toc-minor {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 6px;
    border-radius: 6px;
    color: var(--text);
    line-height: 1.4;
}
.toc-minor:hover { background: var(--bg); }
.toc-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-light);
    font-size: 10px;
    font-weight: 700;
}

.book-major-title {
    font-size: 19px;
    margin: 40px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary);
}
.book-main .book-major-title:first-child { margin-top: 4px; }

/* 통합교재(여러 과목 병합) 보기의 과목 구분 */
.toc-subject {
    font-weight: 800;
    font-size: 13px;
    color: var(--primary);
    margin: 18px 0 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.toc-list .toc-subject:first-child { margin-top: 4px; padding-top: 0; border-top: none; }

.book-subject-title {
    font-size: 22px;
    margin: 54px 0 10px;
    padding: 12px 18px;
    background: var(--primary);
    color: #fff;
    border-radius: 12px;
}
.book-main .book-subject-title:first-child { margin-top: 4px; }

.book-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 18px;
    scroll-margin-top: 76px;
}
.book-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.book-item-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.book-item-title { margin: 0; font-size: 17px; }

.theory-body {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text);
    overflow-wrap: anywhere;
}
.theory-body p { margin: 0 0 14px; }
.theory-body p:last-child { margin-bottom: 0; }
.theory-body strong.hl {
    color: var(--primary-dark);
    font-weight: 700;
}
.theory-body mark {
    background: #fef08a;
    color: #713f12;
    padding: 1px 4px;
    border-radius: 4px;
}
:root[data-theme="dark"] .theory-body mark {
    background: #4a3f10;
    color: #fde68a;
}
.theory-body ul.theory-list {
    margin: 10px 0 16px;
    padding-left: 20px;
}
.theory-body ul.theory-list li { margin-bottom: 6px; }
.theory-body table.theory-table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 18px;
    font-size: 13.5px;
}
.theory-body table.theory-table th,
.theory-body table.theory-table td {
    border: 1px solid var(--border);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.theory-body table.theory-table th {
    background: var(--bg);
    font-weight: 700;
}

.theory-body .callout {
    margin: 14px 0 18px;
    padding: 12px 16px;
    border-radius: 10px;
    border-left: 4px solid var(--primary);
    background: #eef2ff;
    font-size: 14px;
    line-height: 1.6;
}
.theory-body .callout strong {
    display: inline-block;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: 2px;
}
.theory-body .callout-tip {
    border-left-color: var(--success);
    background: #f0fdf4;
}
.theory-body .callout-tip strong {
    background: var(--success);
    color: #fff;
}
.theory-body .callout-warn {
    border-left-color: var(--danger);
    background: #fef2f2;
}
.theory-body .callout-warn strong {
    background: var(--danger);
    color: #fff;
}
:root[data-theme="dark"] .theory-body .callout { background: #1a1d2e; }
:root[data-theme="dark"] .theory-body .callout-tip { background: #10281a; }
:root[data-theme="dark"] .theory-body .callout-warn { background: #33161a; }

.book-figure {
    margin: 6px 0 18px;
    text-align: center;
}
/* min() 이 중요하다 — 420px 로만 두면 좁은 화면에서 그림이 칸을 뚫고 나가
   페이지 전체가 가로로 밀린다 (휴대폰에서 화면이 축소돼 보이던 원인) */
.book-figure .qimg {
    max-width: min(420px, 100%);
    height: auto;
    margin: 0 auto 8px;
}
.book-figure figcaption {
    font-size: 12px;
    color: var(--text-light);
}

/* ── 그림 크게 보기 ──
   도표나 곡선 그림은 칸 너비에 맞춰 줄이면 읽을 수가 없다.
   눌러서 원래 크기로 펴고, 그림칸 안에서만 좌우로 밀어 본다.
   (페이지 자체는 절대 가로로 움직이지 않는다) */
.fig-scroll { max-width: 100%; }
.fig-zoom-btn {
    display: inline-block;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    padding: 4px 11px;
    margin: 0 0 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--text-light);
    cursor: pointer;
}
.fig-zoom-btn:hover { color: var(--primary); border-color: var(--primary); }
.fig-zoom-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.book-figure.zoom-on .fig-scroll {
    overflow-x: auto;
    text-align: left;
    -webkit-overflow-scrolling: touch;
}
.book-figure.zoom-on .qimg {
    max-width: none;
    width: auto;
    height: auto;
    /* 높이는 묶어 둔다 — 안 그러면 세로로만 화면을 다 잡아먹어서
       그림 한 귀퉁이밖에 안 보인다 */
    max-height: min(68vh, 480px);
    margin-left: 0;
    margin-right: 0;
    cursor: zoom-out;
}

/* ── 교재는 본문이 넓어야 읽힌다 ──
   자격증 목록 화면은 720px 에서 한 줄로 펴지지만, 교재는 그러면
   태블릿(768px)에서 글칸이 380px 밖에 안 남아 글이 뚝뚝 끊긴다. */
@media (max-width: 900px) {
    .book-layout { grid-template-columns: 1fr; }
    .book-layout .category-sidebar {
        position: static;
        top: auto;
        margin-bottom: 14px;
    }
    /* 목차가 첫 화면을 다 잡아먹지 않게 */
    .book-layout .toc-list { max-height: 220px; }
}

/* ── 좁은 화면(휴대폰)에서 교재 읽기 ── */
@media (max-width: 640px) {
    .book-item { padding: 16px 14px; border-radius: 12px; }
    .book-item-head { gap: 8px; margin-bottom: 11px; }
    .book-item-title { font-size: 16px; line-height: 1.4; }
    .book-subject-title { font-size: 18px; padding: 10px 14px; margin: 34px 0 10px; }
    .book-major-title { font-size: 17px; margin: 26px 0 12px; }
    .quiz-box { padding: 13px 12px; }
    .quiz-explain { padding: 11px 12px; }
    .book-figure .qimg { padding: 5px; }
    .book-figure { margin: 6px 0 14px; }
}

.quiz-box {
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-top: 8px;
}
.quiz-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--primary);
    margin-bottom: 10px;
}
:root[data-theme="dark"] .quiz-badge { background: #23264a; color: #a5b4fc; }
.quiz-q {
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.quiz-choices .choice-label {
    background: var(--card);
    font-size: 14px;
}
.quiz-explain {
    display: none;
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--card);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-light);
}
.quiz-explain.show { display: block; }

/* ================== 게시판 ================== */
.board-table td { vertical-align: middle; }
.board-table td a:hover { color: var(--primary); }

.pager { display: flex; gap: 4px; justify-content: center; margin: 22px 0; flex-wrap: wrap; }
.pager a {
    min-width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; color: var(--text-light); background: var(--card);
}
.pager a:hover { border-color: var(--primary); color: var(--primary); }
.pager a.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

.post-view {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px;
    margin-top: 10px;
}
.post-body {
    padding: 20px 2px;
    line-height: 1.75;
    font-size: 15px;
    word-break: break-word;
    min-height: 120px;
}
.post-images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.post-images img {
    max-width: 100%;
    max-height: 320px;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: block;
}

.comment-item {
    border-bottom: 1px solid var(--border);
    padding: 14px 2px;
}
.comment-item.admin-reply {
    background: var(--bg);
    border-radius: 10px;
    padding: 14px;
    border-bottom: none;
    margin-bottom: 8px;
}
.comment-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.comment-body { font-size: 14px; line-height: 1.65; word-break: break-word; }
.link-btn {
    background: none; border: none; padding: 0;
    color: var(--text-light); font-size: 12px; cursor: pointer;
    font-family: inherit; text-decoration: underline;
}
.link-btn:hover { color: var(--danger); }

.form-box input[type=file] {
    width: 100%; padding: 9px 10px;
    border: 1px dashed var(--border); border-radius: 8px;
    font-size: 13px; font-family: inherit; background: transparent; color: var(--text);
}

/* ================== 관리자 레이아웃 ================== */
.container-wide { max-width: 1280px; }

.admin-shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 26px; align-items: start; }
.admin-content { min-width: 0; padding-bottom: 20px; }

.admin-nav {
    position: sticky;
    top: 72px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 8px 12px;
    margin-top: 24px;
}
.admin-nav-head { padding: 12px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.admin-nav-title { font-weight: 800; font-size: 15px; }
.admin-nav-user { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.admin-nav-user a { color: var(--primary); font-weight: 600; margin-left: 6px; }
.admin-nav-group {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    color: var(--text-light); text-transform: none;
    padding: 14px 10px 5px;
}
.admin-nav-link {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.35;
}
.admin-nav-link:hover { background: var(--bg); }
.admin-nav-link.sub { padding-left: 20px; font-size: 13px; color: var(--text-light); }
.admin-nav-link.active { background: var(--primary); color: #fff; font-weight: 700; }
.admin-nav-link.active.sub { color: #fff; }

.admin-h1 { margin: 24px 0 6px; font-size: 22px; }
.admin-h3 { font-size: 15px; margin: 0 0 10px; }
.admin-desc { color: var(--text-light); font-size: 13.5px; line-height: 1.7; margin: 0 0 18px; }

.admin-todo {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    background: var(--card); border: 1px solid var(--border); border-left: 4px solid #f59e0b;
    border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px;
}
.admin-todo a { color: var(--primary); font-weight: 600; }
.admin-todo a b { font-weight: 800; }

.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.admin-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 16px; display: block;
}
a.admin-card:hover { border-color: var(--primary); }
.admin-card .ac-label { font-size: 12px; color: var(--text-light); }
.admin-card .ac-value { font-size: 26px; font-weight: 800; margin: 4px 0 2px; }
.admin-card .ac-sub { font-size: 12px; color: var(--text-light); }

.admin-two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; align-items: start; }

@media (max-width: 900px) {
    .admin-shell { grid-template-columns: 1fr; gap: 14px; }
    .admin-nav { position: static; margin-top: 18px; }
    .admin-two-col { grid-template-columns: 1fr; }
}

/* ================== 주문 · 결제 · 마이페이지 ================== */
.order-wrap { max-width: 900px; margin: 0 auto; padding: 24px 0 60px; }
.order-steps { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-light); margin-bottom: 20px; }
.order-steps span.on { color: var(--primary); font-weight: 800; }
.order-steps span.done { color: var(--success, #16a34a); font-weight: 700; }
.order-steps .sep { color: var(--border); }

.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 780px) { .order-grid { grid-template-columns: 1fr; } }

.order-h3 { font-size: 15px; margin: 0 0 10px; }
.req { color: var(--danger); }

.order-info { list-style: none; margin: 0; padding: 0; }
.order-info li { font-size: 13px; color: var(--text-light); line-height: 1.6; margin-bottom: 12px; }
.order-info li b { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 2px; }

.agree-row {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 16px; font-size: 13px; line-height: 1.6; cursor: pointer;
}
.agree-row input { margin-top: 3px; flex-shrink: 0; }

.order-summary {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 18px; position: sticky; top: 72px;
}
.os-book { font-weight: 700; font-size: 14px; line-height: 1.4; }
.os-plan { font-size: 12.5px; color: var(--primary); font-weight: 700; margin: 2px 0 12px; }
.os-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.os-table th, .os-table td { padding: 7px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.os-table th { color: var(--text-light); font-weight: 500; width: 84px; }
.os-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 13px; }
.os-total strong { font-size: 20px; font-weight: 800; color: var(--primary); }

.pay-methods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.pay-method {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 13px 14px; font-size: 13.5px; opacity: .62; cursor: not-allowed;
    background: var(--card);
}
.pay-method .pm-ic { font-size: 16px; }
.pay-method .pm-name { flex: 1; }
.pay-method .pm-soon { font-size: 11px; color: var(--text-light); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }

.pay-pending {
    border: 1px solid var(--border); border-left: 4px solid var(--primary);
    border-radius: 10px; padding: 16px; background: var(--card);
}
.pay-pending strong { font-size: 14px; }
.pay-pending p { font-size: 13px; color: var(--text-light); line-height: 1.75; margin: 8px 0 14px; }

.admin-testpay {
    margin-top: 18px; padding: 14px 16px; border-radius: 10px;
    border: 1px dashed #f59e0b; background: rgba(245,158,11,.07);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.admin-testpay strong { font-size: 12.5px; color: #f59e0b; }
.admin-testpay span { font-size: 12.5px; color: var(--text-light); flex: 1; min-width: 200px; }

.pay-done { text-align: center; padding: 46px 20px; }
.pay-done .pd-icon {
    width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 16px;
    background: var(--success, #16a34a); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.pay-done h1 { font-size: 22px; margin: 0 0 6px; }
.pay-done p { color: var(--text-light); font-size: 14px; margin: 0; }

.my-h3 { font-size: 16px; margin: 30px 0 12px; }
.ent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ent-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.ent-card.expired { opacity: .62; }
.ent-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ent-tag { font-size: 11.5px; font-weight: 700; color: var(--primary); }
.ent-tag.off { color: var(--text-light); }
.ent-card h4 { margin: 0 0 4px; font-size: 15px; line-height: 1.4; }
.ent-meta { font-size: 12px; color: var(--text-light); margin-bottom: 12px; }
.ent-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ent-cnt { font-size: 11.5px; color: var(--text-light); }

.ord-status { font-size: 12px; font-weight: 700; }
.ord-status.s-pending { color: #f59e0b; }
.ord-status.s-paid, .ord-status.s-done { color: var(--success, #16a34a); }
.ord-status.s-shipping { color: var(--primary); }
.ord-status.s-cancelled { color: var(--text-light); }

/* ================== 로그인 (소셜) ================== */
.auth-wrap { max-width: 400px; margin: 50px auto 70px; text-align: center; }
.auth-wrap h1 { font-size: 22px; margin: 0 0 8px; }
.auth-lead { color: var(--text-light); font-size: 13.5px; line-height: 1.7; margin: 0 0 26px; }

.social-list { display: flex; flex-direction: column; gap: 10px; }
.social-btn {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    height: 52px; padding: 0 18px;
    border-radius: 10px; border: 1px solid transparent;
    font-size: 15px; font-weight: 700;
    text-decoration: none; cursor: pointer; overflow: hidden;
    transition: filter .12s ease, box-shadow .12s ease;
}
/* 로고는 항상 같은 위치·같은 크기. 로고 이미지의 배경색이 버튼 색과 같아 자연스럽게 이어진다 */
.sb-mark {
    width: 24px; height: 24px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
    border-radius: 0; background: transparent;
}
.sb-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 로고 자리만큼 오른쪽을 비워 문구가 버튼 정중앙에 오도록 */
.social-btn .sb-text { flex: 1; text-align: center; padding-right: 38px; }

/* 브랜드 색 — 공식 로고 이미지에서 뽑은 실제 값 */
.social-btn.s-naver  { background: #03A94D; color: #fff; }
.social-btn.s-kakao  { background: #FEE500; color: rgba(0,0,0,.85); }
.social-btn.s-google { background: #fff; color: #3C4043; border-color: #DADCE0; }

.social-btn:not(.soon):hover { filter: brightness(.96); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.social-btn:not(.soon):active { filter: brightness(.92); }

/* 키 등록 전 — 브랜드 색은 알아볼 수 있게 살짝만 흐리게 */
.social-btn.soon { opacity: .82; cursor: not-allowed; }
.social-btn .sb-soon {
    position: absolute; right: 14px;
    font-size: 11px; font-weight: 600;
    border: 1px solid currentColor; border-radius: 999px;
    padding: 2px 8px; opacity: .8;
}

.auth-terms { font-size: 11.5px; color: var(--text-light); line-height: 1.7; margin: 22px 0 0; }
.auth-terms a { color: var(--primary); }
.auth-help { font-size: 12.5px; color: var(--text-light); margin-top: 18px; }
.auth-help a { color: var(--primary); font-weight: 600; }

.callback-box {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px;
}
.callback-box code { font-size: 13px; word-break: break-all; flex: 1; min-width: 200px; }

/* 관리자 모드 안내 바 (사용자 화면에서 관리자로 로그인했을 때) */
.admin-mode-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #f59e0b; color: #1c1917;
    font-size: 12.5px; font-weight: 600;
    padding: 7px 16px;
}
.admin-mode-bar .amb-tag {
    background: rgba(0,0,0,.16); border-radius: 999px;
    padding: 2px 9px; font-weight: 800;
}
.admin-mode-bar a { color: #1c1917; text-decoration: underline; font-weight: 700; }
.admin-mode-bar a:last-child { margin-left: auto; }

.auth-admin { margin-top: 26px; font-size: 12px; }
.auth-admin a { color: var(--text-light); text-decoration: underline; }
.auth-admin a:hover { color: var(--primary); }

/* ================== 사이트 푸터 ================== */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--card);
    margin-top: 50px;
    padding: 26px 0 34px;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.foot-links a { font-size: 13px; color: var(--text-light); }
.foot-links a:hover { color: var(--primary); }
.foot-links a.strong { color: var(--text); font-weight: 700; }

.foot-biz { font-size: 12px; color: var(--text-light); line-height: 1.9; }
.foot-biz .sep { opacity: .35; margin: 0 2px; }
.foot-biz-empty a { color: var(--primary); font-weight: 600; margin-left: 4px; }

.foot-copy { font-size: 12px; color: var(--text-light); margin-top: 12px; opacity: .8; }
.foot-copy .sep { opacity: .35; margin: 0 4px; }

/* ================== 약관 · 방침 페이지 ================== */
.legal-wrap { max-width: 780px; margin: 0 auto; padding: 28px 0 60px; }
.legal-wrap h1 { font-size: 24px; margin: 0 0 4px; }
.legal-date { font-size: 12.5px; color: var(--text-light); margin: 0 0 26px; }
.legal-body {
    font-size: 14px; line-height: 1.95;
    white-space: normal; word-break: keep-all;
    color: var(--text);
}
.legal-biz {
    margin-top: 34px; padding: 20px;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
}
.legal-biz h3 { margin: 0 0 10px; font-size: 15px; }
.legal-biz table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.legal-biz th, .legal-biz td { padding: 8px 2px; border-bottom: 1px solid var(--border); text-align: left; }
.legal-biz th { color: var(--text-light); font-weight: 500; width: 160px; }

.legal-nav { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); }
.legal-nav a { font-size: 13px; color: var(--primary); font-weight: 600; }

/* ================== 기출문제 이용 순위 ================== */
.rank-wrap { margin: 26px 0 34px; }
.rank-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rank-title h3 { margin: 0; font-size: 17px; }
.rank-title span { font-size: 12px; color: var(--text-light); }

.rank-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .rank-cols { grid-template-columns: 1fr; } }

.rank-col {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 6px 10px;
}
.rank-head { display: flex; align-items: center; gap: 8px; padding: 0 12px 12px; }
.rank-kind {
    font-size: 11.5px; font-weight: 700;
    border-radius: 6px; padding: 3px 9px;
}
.rank-kind.k-sub { background: #dcfce7; color: #15803d; }
.rank-kind.k-obj { background: #dbeafe; color: #1d4ed8; }
.rank-type { font-size: 13px; color: var(--text-light); font-weight: 600; }

.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list li + li { border-top: 1px solid var(--border); }
.rank-list a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border-radius: 8px;
    font-size: 14px;
}
.rank-list a:hover { background: var(--bg); }
.rk-no {
    width: 18px; flex-shrink: 0; text-align: center;
    font-size: 14px; font-weight: 800; color: var(--text-light);
}
.rk-no.n1, .rk-no.n2, .rk-no.n3 { color: var(--primary); }
.rk-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; color: var(--primary);
}
.rank-list a:hover .rk-name { text-decoration: underline; }
.rk-cnt { flex-shrink: 0; font-size: 12px; color: var(--text-light); }
.rank-empty { padding: 26px 12px; text-align: center; font-size: 13px; color: var(--text-light); }

:root[data-theme="dark"] .rank-kind.k-sub { background: #10281a; color: #4ade80; }
:root[data-theme="dark"] .rank-kind.k-obj { background: #12203f; color: #93b4fd; }

/* 관리자 · 교재 관리 */
.book-group {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 0 0 14px;
    overflow: hidden;
}
.book-group .bg-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--bg-alt, rgba(127,127,127,0.08));
    border-bottom: 1px solid var(--border);
}
.book-group .bg-head strong { font-size: 14px; }
.book-group .bg-count { font-size: 12px; color: var(--text-light); }
.book-group table { margin: 0; }

/* 회원 탈퇴 */
.btn.danger {
    background: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
    color: #fff;
}
.btn.danger:hover { filter: brightness(0.93); }
.wd-wrap { max-width: 620px; margin: 34px auto 60px; }
.wd-title { margin: 0 0 6px; font-size: 22px; }
.wd-sub { color: var(--text-light); margin: 0 0 20px; }
.wd-list {
    list-style: none; padding: 0; margin: 0 0 22px;
    border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.wd-list li {
    padding: 14px 16px; font-size: 14px; line-height: 1.65;
    border-bottom: 1px solid var(--border);
}
.wd-list li:last-child { border-bottom: 0; }
.wd-dim { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-light); }
.wd-form {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 16px; background: var(--bg-alt, rgba(127,127,127,0.05));
}
.wd-agree { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; cursor: pointer; }
.wd-agree input { margin-top: 3px; }
.wd-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.wd-done { text-align: center; padding: 46px 20px; }
.wd-done h1 { margin: 10px 0 6px; font-size: 22px; }
.wd-done p { color: var(--text-light); margin: 0; }
.wd-icon { font-size: 44px; }
.wd-note {
    margin: 22px auto 0; max-width: 460px; text-align: left;
    padding: 14px 16px; border-radius: 10px; font-size: 13.5px; line-height: 1.7;
}
.wd-note.ok   { background: #f0fdf4; color: #15803d; }
.wd-note.warn { background: #fffbeb; color: #92400e; }
:root[data-theme="dark"] .wd-note.ok   { background: #10281a; color: #86efac; }
:root[data-theme="dark"] .wd-note.warn { background: #2a2210; color: #fcd34d; }

/* 오답노트 */
.wn-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin: 24px 0 16px;
}
.wn-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.wn-tab {
    font-size: 13px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--border); color: var(--text-light); text-decoration: none;
}
.wn-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.wn-count { font-size: 13px; color: var(--text-light); margin: 0 0 12px; }
.wn-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.wn-src { font-size: 12px; color: var(--text-light); }
.wn-times {
    font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
    background: #fee2e2; color: #b91c1c;
}
:root[data-theme="dark"] .wn-times { background: #3a1a1e; color: #fca5a5; }
.wn-pager { display: flex; gap: 6px; justify-content: center; margin: 22px 0; flex-wrap: wrap; }
.wn-pager a {
    min-width: 32px; text-align: center; padding: 6px 9px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-light); text-decoration: none;
}
.wn-pager a.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 마이페이지 오답노트 요약 */
.wn-summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px;
}
.wn-sum-num { font-size: 30px; font-weight: 700; line-height: 1.1; }
.wn-sum-num span { font-size: 14px; font-weight: 500; color: var(--text-light); margin-left: 4px; }
.wn-sum-desc { margin: 6px 0 0; font-size: 13px; color: var(--text-light); }
.wn-sum-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 최근 응시 합격/불합격 */
.pass-tag {
    display: inline-block; font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
}
.pass-tag.pass { background: #dcfce7; color: #15803d; }
.pass-tag.fail { background: #fee2e2; color: #b91c1c; }
:root[data-theme="dark"] .pass-tag.pass { background: #10281a; color: #86efac; }
:root[data-theme="dark"] .pass-tag.fail { background: #3a1a1e; color: #fca5a5; }

/* 문제 화면 분할 (1문제 / 5문제 / 전체) */
.exam-toolbar {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; margin-bottom: 12px;
}
.exam-toolbar-label { font-size: 12.5px; color: var(--text-light); }
.exam-size {
    display: inline-flex; border: 1px solid var(--border);
    border-radius: 999px; overflow: hidden;
}
.exam-size button {
    border: 0; background: transparent; cursor: pointer;
    padding: 6px 13px; font-size: 12.5px; color: var(--text-light);
    font-family: inherit;
}
.exam-size button + button { border-left: 1px solid var(--border); }
.exam-size button.on { background: var(--primary); color: #fff; }
.exam-pager {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin: 14px 0;
}
.exam-pager:empty { display: none; }
.exam-pager .btn { padding: 8px 16px; }
.exam-pager .btn[disabled] { opacity: .4; cursor: default; }
.exam-pager-info { font-size: 13px; color: var(--text-light); min-width: 58px; text-align: center; }
.qnum-grid a.viewing { outline: 2px solid var(--primary); outline-offset: -2px; }

/* 문제 번호판 — 데스크톱에선 항상 펼침, 모바일에선 접기 */
.qnum-box > summary {
    display: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 2px;
    list-style: none;
}
.qnum-box > summary::-webkit-details-marker { display: none; }
.qnum-box > summary::after { content: ' ▾'; color: var(--text-light); }
.qnum-box[open] > summary::after { content: ' ▴'; }

/* ── 모바일: 시험 화면 ───────────────────────────── */
@media (max-width: 720px) {
    .exam-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .exam-sidebar {
        position: sticky;
        top: 8px;
        z-index: 20;
        padding: 10px 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    }
    /* 아래 제출 바가 따로 있으니 사이드바 안 제출 버튼은 숨겨 높이를 줄인다 */
    .exam-sidebar > div:last-child { display: none; }
    .qnum-box > summary { display: block; }
    .qnum-box[open] .qnum-grid {
        grid-template-columns: repeat(8, 1fr);
        max-height: 132px;
        overflow-y: auto;
        margin-top: 6px;
    }
    .qnum-grid a { font-size: 11px; padding: 5px 0; }
    .timer { font-size: 17px; padding: 6px; margin-bottom: 8px; }

    .question-card { padding: 14px; }
    .exam-toolbar { justify-content: space-between; margin-bottom: 10px; }
    .exam-size button { padding: 6px 11px; }
    .exam-pager .btn { padding: 9px 14px; }
    .choice-label { padding: 12px 10px; }
    .choice-img { margin-left: 0; }
}

/* ── 모바일 좌측 메뉴 (햄버거 → 슬라이드 서랍) ───────── */
.rail-toggle { display: none; }
.rail-backdrop { display: none; }

@media (max-width: 720px) {
    body { padding-left: 0; }
    body.rail-locked { overflow: hidden; }

    .rail-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 38px;
        height: 38px;
        margin-right: 10px;
        padding: 0 8px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--card);
        cursor: pointer;
        flex-shrink: 0;
    }
    .rail-toggle span {
        display: block;
        height: 2px;
        background: var(--text);
        border-radius: 2px;
        transition: transform .18s ease, opacity .18s ease;
    }
    .rail-toggle.on span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .rail-toggle.on span:nth-child(2) { opacity: 0; }
    .rail-toggle.on span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .rail,
    .rail:hover {
        width: 264px;
        max-width: 82vw;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: none;
        overflow-y: auto;
    }
    .rail.open,
    .rail.open:hover { transform: none; box-shadow: 2px 0 24px rgba(0, 0, 0, .25); }
    .rail .rail-label { opacity: 1; }
    .rail .rail-sub { max-height: 320px; }

    .rail-backdrop.on {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 44;
    }

    .site-header .container { padding: 0 12px; }
    .site-header .logo { font-size: 16px; }
    .container { padding: 0 12px; }
}

/* ── 모바일: 고정(sticky) 사이드바가 본문을 덮지 않게 ───── */
@media (max-width: 720px) {
    .category-layout { grid-template-columns: 1fr; }
    .category-sidebar {
        position: static;
        top: auto;
        margin-bottom: 14px;
    }
}
@media (max-width: 780px) {
    .order-summary { position: static; top: auto; }
}

/* 관리자 좌측 메뉴 — 접이식 그룹 */
.anav-group { border-top: 1px solid var(--border); }
.anav-group:first-of-type { border-top: 0; }
.anav-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    padding: 11px 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    border-radius: 8px;
    user-select: none;
}
.anav-group > summary::-webkit-details-marker { display: none; }
.anav-group > summary::after {
    content: '';
    width: 6px; height: 6px;
    border-right: 1.6px solid var(--text-light);
    border-bottom: 1.6px solid var(--text-light);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
}
.anav-group[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.anav-group > summary:hover { background: var(--bg); }
.anav-group[open] > summary { color: var(--primary); }
.anav-items { padding: 0 0 8px 6px; }
.anav-shortcut { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }

/* 홈 검색 결과 — 관련 교재 */
.home-books { margin-top: 30px; }
.home-books .hb-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.home-books .hb-head h3 { margin: 0; }
.home-books .hb-more { font-size: 13px; color: var(--primary); font-weight: 600; }

/* 메인 히어로 — 검색창을 화면 1/3 지점쯤에 */
.hero-home {
    padding-top: clamp(70px, 22vh, 220px);
    padding-bottom: 34px;
}
@media (max-width: 720px) {
    .hero-home { padding-top: clamp(48px, 13vh, 120px); padding-bottom: 24px; }
}

/* 햄버거가 헤더 밖으로 나왔으므로 모바일에서 고정 배치 */
@media (max-width: 720px) {
    .rail-toggle {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 46;
        margin: 0;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
    }
    /* 상단바가 있는 페이지에서는 로고가 햄버거에 가리지 않게 */
    .site-header .container { padding-left: 58px; }
}

/* ================== 이용권(요금제) ================== */
.pass-wrap { max-width: 1000px; margin: 0 auto; padding: 20px 0 60px; }
.pass-head { text-align: center; margin-bottom: 32px; }
.pass-note {
    display: inline-block; font-size: 12px; color: var(--text-light);
    background: var(--bg-alt, rgba(127,127,127,.09));
    padding: 5px 13px; border-radius: 999px;
}
.pass-head h1 { font-size: 30px; margin: 16px 0 8px; letter-spacing: -.02em; }
.pass-head p { color: var(--text-light); margin: 0; font-size: 14.5px; }
.pass-mine {
    display: inline-block; margin-top: 14px; font-size: 13px;
    background: #eef2ff; color: var(--primary);
    padding: 7px 14px; border-radius: 999px;
}
:root[data-theme="dark"] .pass-mine { background: #23264a; color: #a5b4fc; }

.pass-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}
.pass-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px 22px;
}
.pass-card.featured { border: 2px solid var(--text); }
.pass-card.current { border-color: var(--primary); }
.pass-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--text); color: var(--card);
    font-size: 11.5px; font-weight: 700;
    padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.pass-name { font-size: 17px; font-weight: 800; }
.pass-tagline { margin: 6px 0 0; font-size: 12.5px; color: var(--text-light); line-height: 1.5; min-height: 34px; }
.pass-price { margin-top: 22px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.pass-price strong { font-size: 30px; letter-spacing: -.02em; }
.pass-price .won { font-size: 14px; }
.pass-price .unit { font-size: 12.5px; color: var(--text-light); margin-left: 4px; }
.pass-price-note { margin: 6px 0 0; font-size: 12px; color: var(--text-light); line-height: 1.5; }
.pass-feats { list-style: none; padding: 0; margin: 20px 0 0; flex: 1; }
.pass-feats li {
    position: relative; padding-left: 20px; margin-bottom: 10px;
    font-size: 13.5px; line-height: 1.5;
}
.pass-feats li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--primary); font-weight: 700;
}
.pass-cta { margin-top: 22px; }
.pass-cta .btn { width: 100%; text-align: center; }
.pass-cta .btn.disabled { opacity: .55; pointer-events: none; }
.pass-btn-dark { background: var(--text); border-color: var(--text); color: var(--card); }
.pass-btn-dark:hover { filter: brightness(1.15); }
.pass-foot { text-align: center; font-size: 12.5px; color: var(--text-light); margin: 22px 0 0; }
.pass-foot a { color: var(--primary); }

.pass-faq { margin-top: 56px; }
.pass-faq h2 { text-align: center; font-size: 20px; margin: 0 0 20px; }
.faq-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    margin-bottom: 10px;
}
.faq-item > summary {
    cursor: pointer; list-style: none;
    padding: 16px 18px; font-size: 14px; font-weight: 600;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: ''; flex-shrink: 0;
    width: 7px; height: 7px;
    border-right: 1.7px solid var(--text-light);
    border-bottom: 1.7px solid var(--text-light);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
}
.faq-item[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-body { padding: 0 18px 16px; font-size: 13.5px; color: var(--text-light); line-height: 1.75; }

@media (max-width: 860px) {
    .pass-tagline { min-height: 0; }
    .pass-head h1 { font-size: 24px; }
}

/* 관리자 입력 필드 */
.fld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.fld > span { color: var(--text-light); }
.fld input, .fld textarea, .fld select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    background: var(--card);
    color: var(--text);
}
.fld textarea { resize: vertical; line-height: 1.6; }

/* 업그레이드 안내 */
.pass-upgrade {
    margin-top: 16px;
    padding: 11px 13px;
    border-radius: 9px;
    background: #eef2ff;
    color: var(--primary);
    font-size: 12.5px;
    line-height: 1.65;
}
:root[data-theme="dark"] .pass-upgrade { background: #23264a; color: #a5b4fc; }
.pass-upgrade.pass-upgrade-off { background: #f4f5f7; color: #5b616e; }
.pass-upgrade.pass-upgrade-off strong { color: #33373f; }
:root[data-theme="dark"] .pass-upgrade.pass-upgrade-off { background: #2a2d35; color: #a9b0bd; }
:root[data-theme="dark"] .pass-upgrade.pass-upgrade-off strong { color: #e3e6ec; }

/* ── 상단바를 없앤 뒤의 여백/고정 위치 보정 ───────────── */
main.container { padding-top: 20px; }
.exam-sidebar,
.category-sidebar,
.admin-nav,
.order-summary { top: 16px; }

@media (max-width: 720px) {
    /* 좌측 상단 고정 햄버거에 본문이 가리지 않게 */
    main.container { padding-top: 58px; }
    .admin-mode-bar { padding-left: 56px; }
    .exam-sidebar { top: 8px; }
}

/* ── 좌측 레일: 메뉴가 길어도 로그인/로그아웃이 가리지 않게 ── */
.rail {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.rail::-webkit-scrollbar-track { background: transparent; }

/* 아래쪽 계정 영역은 항상 바닥에 고정 */
.rail-footer {
    position: sticky;
    bottom: 0;
    background: var(--card);
    z-index: 2;
    padding-bottom: 24px;   /* 브라우저 하단 상태표시줄에 가리지 않게 */
}
.rail-logo { position: sticky; top: 0; background: var(--card); z-index: 2; }

/* ================== 관리자 · 접속 통계 ================== */
.an-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.an-range { display: flex; gap: 4px; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.an-range a {
    padding: 6px 13px; font-size: 12.5px; color: var(--text-light);
}
.an-range a + a { border-left: 1px solid var(--border); }
.an-range a.on { background: var(--primary); color: #fff; font-weight: 600; }

.an-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 18px; margin-bottom: 16px;
    min-width: 0;
}
.an-card h3 { margin: 0 0 12px; font-size: 15px; }
.an-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .an-two { grid-template-columns: 1fr; } }

.an-table { font-size: 13px; }
.an-table td, .an-table th { vertical-align: middle; }
.an-sub { font-size: 11.5px; color: var(--text-light); margin-top: 2px; word-break: break-all; }
.an-bar { height: 4px; background: var(--bg); border-radius: 3px; margin-top: 5px; overflow: hidden; }
.an-bar i { display: block; height: 100%; background: var(--primary); opacity: .55; }
.an-low { color: var(--danger); font-weight: 700; }

.an-chart { display: flex; align-items: flex-end; gap: 3px; height: 130px; }
.an-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.an-col-bar { background: var(--primary); opacity: .6; border-radius: 3px 3px 0 0; min-height: 2px; }
.an-col span { font-size: 9.5px; color: var(--text-light); text-align: center; margin-top: 4px; white-space: nowrap; }
.an-col:hover .an-col-bar { opacity: 1; }

.an-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.an-filter select, .an-filter input {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; font-family: inherit; background: var(--card); color: var(--text);
}
.an-filter input { min-width: 200px; }

/* ── 관리자 기간 필터 ─────────────────────────── */
.af-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.af-presets { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.af-presets a { padding: 6px 12px; font-size: 12.5px; color: var(--text-light); white-space: nowrap; }
.af-presets a + a { border-left: 1px solid var(--border); }
.af-presets a.on { background: var(--primary); color: #fff; font-weight: 600; }
.af-custom { display: flex; align-items: center; gap: 6px; }
.af-custom input[type="date"] {
    padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 12.5px; font-family: inherit; background: var(--card); color: var(--text);
}
.af-custom span { color: var(--text-light); font-size: 12px; }
.af-custom .btn { padding: 6px 14px; font-size: 12.5px; }

/* ── 매출 통계 ───────────────────────────────── */
.rv-split-bar {
    display: flex; height: 14px; border-radius: 999px; overflow: hidden;
    background: var(--bg); margin-bottom: 10px;
}
.rv-split-bar i.book { background: #3b82f6; }
.rv-split-bar i.pass { background: #22c55e; }
.rv-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-light); }
.rv-legend b { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.rv-legend b.book { background: #3b82f6; }
.rv-legend b.pass { background: #22c55e; }
.rv-stack { display: flex; flex-direction: column; justify-content: flex-end; border-radius: 3px 3px 0 0; overflow: hidden; }
.rv-stack .book { background: #3b82f6; }
.rv-stack .pass { background: #22c55e; }

/* ================== 형광펜 · 메모 ================== */
mark.hl { background: transparent; color: inherit; padding: 1px 0; border-radius: 2px; }
mark.hl-y { background: #fef08a; }
mark.hl-g { background: #bbf7d0; }
mark.hl-p { background: #fbcfe8; }
:root[data-theme="dark"] mark.hl-y { background: #6b5f14; color: #fefce8; }
:root[data-theme="dark"] mark.hl-g { background: #14532d; color: #f0fdf4; }
:root[data-theme="dark"] mark.hl-p { background: #611c3c; color: #fdf2f8; }

.qn-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 14px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--card);
}
.qn-bar.locked { border-style: dashed; justify-content: center; padding: 10px 14px; }
.qn-lock { font-size: 12.5px; color: var(--text-light); }
.qn-lock a { color: var(--primary); font-weight: 600; }

.qn-colors { display: flex; gap: 6px; }
.qn-color {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer; padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.qn-color.y { background: #fef08a; }
.qn-color.g { background: #bbf7d0; }
.qn-color.p { background: #fbcfe8; }
.qn-color.erase {
    background: var(--card);
    box-shadow: inset 0 0 0 2px var(--text);
}
.qn-color.on { border-color: var(--text); }
.qn-sep { width: 1px; height: 18px; background: var(--border); }

.qn-btn {
    border: 0; background: transparent; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--text-light);
    padding: 4px 10px; border-radius: 999px;
}
.qn-btn:hover { background: var(--bg); }
.qn-btn.on { background: var(--primary); color: #fff; font-weight: 600; }
.qn-state { font-size: 11.5px; color: var(--text-light); margin-left: auto; }

.qn-memo-box { margin-top: 8px; }
.qn-memo-box textarea {
    width: 100%; min-height: 80px; resize: vertical;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
    font-family: inherit; font-size: 13.5px; line-height: 1.7;
    background: #fffdf5; color: var(--text);
}
:root[data-theme="dark"] .qn-memo-box textarea { background: #23201a; }
.qn-memo-box textarea:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
.qn-count { margin-top: 4px; text-align: right; font-size: 12px; color: var(--text-light); }
.qn-count.full { color: var(--danger); font-weight: 600; }

/* 형광펜 모드일 때 커서 */
.question-card.qn-penmode .hl-area { cursor: text; background: rgba(79,70,229,.03); }
.question-card.qn-penmode .choice-label,
.question-card.qn-penmode .qtext,
.question-card.qn-penmode .explain { cursor: text; }

/* ── 기출문제 / 예상문제 구분 ─────────────────── */
.qsrc {
    display: inline-block; vertical-align: middle;
    font-size: 11px; font-weight: 700; line-height: 1.4;
    padding: 2px 8px; border-radius: 999px; margin-left: 6px;
    white-space: nowrap;
}
.qsrc-original { background: #fef3c7; color: #b45309; }
.qsrc-past     { background: var(--bg); color: var(--text-light); border: 1px solid var(--border); }
:root[data-theme="dark"] .qsrc-original { background: #3d2f10; color: #fcd34d; }

.qsrc-notice {
    margin: 0 0 16px;
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
    line-height: 1.7;
}
:root[data-theme="dark"] .qsrc-notice { background: #2a2210; border-color: #59440f; color: #fcd34d; }

.qsrc-select {
    padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px;
    font-size: 12.5px; font-family: inherit; background: var(--card); color: var(--text);
    width: 100%;
}

/* ── 게시판 종목 구분 ─────────────────────────── */
.bc-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin: 0 0 14px;
}
.bc-tabs a {
    font-size: 12.5px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--border); color: var(--text-light);
    white-space: nowrap;
}
.bc-tabs a span { opacity: .65; margin-left: 3px; }
.bc-tabs a.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

.bc-tag {
    display: inline-block; vertical-align: middle;
    font-size: 11.5px; font-weight: 600;
    padding: 2px 8px; border-radius: 6px; margin-right: 5px;
    background: #eef2ff; color: var(--primary);
    white-space: nowrap;
}
:root[data-theme="dark"] .bc-tag { background: #23264a; color: #a5b4fc; }

/* 게시판 종목 2단 선택 */
.cert-pick { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
.cert-pick select:disabled { background: var(--bg); color: var(--text-light); cursor: not-allowed; }
@media (max-width: 560px) { .cert-pick { grid-template-columns: 1fr; } }

/* 통계 라벨 보조 텍스트 */
.sg-sub {
    font-size: 11.5px; color: var(--text-light); font-weight: 500;
    margin-left: 6px;
}
.subject-grade-label a { color: inherit; }
.subject-grade-label a:hover { color: var(--primary); }


/* ── 문제 난이도 · 정답률 ───────────────────────── */
.qd {
    display: inline-block; vertical-align: middle;
    font-size: 11px; font-weight: 700; line-height: 1.4;
    padding: 2px 8px; border-radius: 999px; margin-left: 6px;
    white-space: nowrap; cursor: help;
}
.qd b { font-weight: 800; }
.qd-easy   { background: #dcfce7; color: #15803d; }
.qd-normal { background: #dbeafe; color: #1d4ed8; }
.qd-hard   { background: #ffedd5; color: #c2410c; }
.qd-vhard  { background: #fee2e2; color: #b91c1c; }
:root[data-theme="dark"] .qd-easy   { background: #14301f; color: #86efac; }
:root[data-theme="dark"] .qd-normal { background: #16233f; color: #93c5fd; }
:root[data-theme="dark"] .qd-hard   { background: #3a2410; color: #fdba74; }
:root[data-theme="dark"] .qd-vhard  { background: #3b1616; color: #fca5a5; }

/* 회차 목록에 붙는 평균 정답률 */
.qd-round { font-size: 10.5px; padding: 1px 7px; }

/* 관리자 · 난이도 분포 막대 */
.qd-dist { display: flex; height: 22px; border-radius: 7px; overflow: hidden; margin: 10px 0 8px; background: var(--bg); }
.qd-dist span { display: block; height: 100%; }
.qd-dist .s-easy   { background: #4ade80; }
.qd-dist .s-normal { background: #60a5fa; }
.qd-dist .s-hard   { background: #fb923c; }
.qd-dist .s-vhard  { background: #f87171; }
.qd-dist .s-pending{ background: var(--border); }
.qd-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text-light); }
.qd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }


/* 무료 회원용 — 한 번에 보기 잠금 안내 */
.exam-lock-note {
    font-size: 12.5px;
    color: var(--text-light);
    white-space: nowrap;
}
.exam-lock-note a { color: var(--primary); font-weight: 700; }
.exam-lock-note a:hover { text-decoration: underline; }

/* ── 예상문제 이용 안내 (round_buy.php) ─────────── */
.rb-wrap { max-width: 1000px; margin: 0 auto 60px; }
.rb-head { text-align: center; padding: 28px 16px 22px; }
.rb-head h1 { margin: 12px 0 8px; font-size: 24px; line-height: 1.35; }
.rb-head p { margin: 0; color: var(--text-light); font-size: 14px; line-height: 1.8; }
.rb-grid { margin-top: 8px; }
.rb-back { display: flex; gap: 8px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* 이용권이 필요한 회차도 버튼은 다른 회차와 똑같이 '시작하기'.
   눌러야 결제 안내로 가는지 알 수 있으므로 별도 표시는 두지 않는다.
   (예상문제라는 사실은 회차 제목 옆 배지가 이미 알려준다) */


/* ── 활용 가이드 (guide.php) ─────────────────────── */
.gd-wrap { max-width: 880px; }
.gd-h2 {
    margin: 38px 0 14px; font-size: 19px;
    padding-bottom: 8px; border-bottom: 2px solid var(--border);
}
.gd-h3 { margin: 0 0 8px; font-size: 15.5px; }
.gd-wrap .question-card p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-light); }
.gd-wrap .question-card p strong { color: var(--text); }
/* .btn 은 제외 — 안 그러면 파란 버튼 위에 파란 글씨가 되어 안 보인다 */
.gd-wrap a:not(.btn) { color: var(--primary); font-weight: 600; }

.gd-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.gd-two > * { min-width: 0; margin: 0; }

.gd-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.gd-step {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 18px 16px; min-width: 0;
}
.gd-step > strong { display: block; margin: 10px 0 6px; font-size: 15px; }   /* 제목만 — 본문 안 strong 은 제외 */
.gd-step p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text-light); }
.gd-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: 13px; font-weight: 800;
}

.gd-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.gd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 680px; }
.gd-table th, .gd-table td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--border); }
.gd-table thead th { background: var(--bg); font-size: 14px; font-weight: 800; }
.gd-table thead th:first-child { text-align: left; }
.gd-table tbody tr:last-child td { border-bottom: none; }
.gd-table td.gd-feat, .gd-table th.gd-feat { text-align: left; width: 34%; }
.gd-price { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--primary); }
.gd-unit { font-weight: 500; color: var(--text-light); }
.gd-note { display: block; margin-top: 3px; font-size: 12px; color: var(--text-light); line-height: 1.6; }
.gd-o { color: var(--success); font-size: 15px; }
.gd-x { color: var(--border); font-size: 15px; }
.gd-foot { margin: 12px 0 0; font-size: 13px; color: var(--text-light); line-height: 1.8; }
.gd-tag {
    display: inline-block; vertical-align: middle; margin-left: 4px;
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: #eef2ff; color: var(--primary);
}
:root[data-theme="dark"] .gd-tag { background: #232a4d; color: #a5b4fc; }
.gd-cta { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }


/* ── 베이직 이상 전용 기능 안내 카드 ─────────────── */
.pass-lock {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--card); border: 1px dashed var(--border);
    border-radius: 12px; padding: 20px 18px; margin: 12px 0 6px;
}
.pass-lock .pl-icon { font-size: 22px; line-height: 1; }
.pass-lock .pl-body { flex: 1 1 260px; min-width: 0; }
.pass-lock .pl-body strong { display: block; font-size: 15px; margin-bottom: 5px; }
.pass-lock .pl-body p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text-light); }
.pass-lock .pl-body a { color: var(--primary); font-weight: 700; }
.pass-lock .btn { flex: none; }

.gd-tag-free { background: #dcfce7; color: #15803d; }
:root[data-theme="dark"] .gd-tag-free { background: #14301f; color: #86efac; }


/* ── 문제 정정 요청 ─────────────────────────────── */
.qrep-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.qrep-link {
    font-size: 12px; color: var(--text-light);
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--border); background: transparent;
    white-space: nowrap; line-height: 1.6;
}
.qrep-link:hover { color: var(--primary); border-color: var(--primary); }

.qrep-wrap { max-width: 720px; margin: 0 auto 60px; }
.qrep-h1 { margin: 24px 0 6px; font-size: 22px; }
.qrep-desc { margin: 0 0 20px; color: var(--text-light); font-size: 14px; line-height: 1.8; }
.qrep-q { background: var(--bg); }
.qrep-form { max-width: none; }
.qrep-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 4px; }
.qrep-reason {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 13.5px; font-weight: 500; cursor: pointer; margin: 0;
}
.qrep-reason.on { border-color: var(--primary); background: #eef2ff; color: var(--primary); font-weight: 700; }
:root[data-theme="dark"] .qrep-reason.on { background: #232a4d; }
.qrep-actions { display: flex; gap: 8px; margin-top: 18px; }

.qrep-done { text-align: center; padding: 50px 20px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.qrep-done-icon {
    width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
    background: var(--success); color: #fff; font-size: 27px;
    display: flex; align-items: center; justify-content: center;
}
.qrep-done h2 { margin: 0 0 8px; font-size: 19px; }
.qrep-done p { margin: 0; color: var(--text-light); font-size: 14px; line-height: 1.8; }
.qrep-done-btns { display: flex; gap: 8px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* 관리자 · 정정 요청 목록 */
.qr-item { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 16px; margin-bottom: 12px; }
.qr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.qr-reason { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #fee2e2; color: #b91c1c; }
:root[data-theme="dark"] .qr-reason { background: #3b1616; color: #fca5a5; }
.qr-where { font-size: 12.5px; color: var(--text-light); }
.qr-body { font-size: 14px; line-height: 1.8; white-space: pre-wrap; margin-bottom: 10px; }
.qr-q {
    background: var(--bg); border-radius: 8px; padding: 12px 14px;
    font-size: 13px; line-height: 1.8;
    max-height: 300px; overflow: auto;
}
.qr-q-text { font-weight: 700; margin-bottom: 8px; }
.qr-choice { padding: 2px 0; }
.qr-choice.ans { color: var(--success); font-weight: 700; }
.qr-exp { margin-top: 8px; color: var(--text-light); }
.qr-q img { max-width: 100%; height: auto; }
.qr-q table { border-collapse: collapse; font-size: 12px; }
.qr-q table td, .qr-q table th { border: 1px solid var(--border); padding: 4px 8px; }
.qr-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ── 관리자 · 문제 수정 화면 ────────────────────── */
.qe-reports { margin-bottom: 18px; }
.qe-reports h3 { font-size: 15px; margin: 0 0 10px; }
.qe-report {
    border: 1px solid var(--border); border-left: 3px solid var(--danger);
    border-radius: 10px; background: var(--card); padding: 12px 14px; margin-bottom: 8px;
}
.qe-report-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.qe-report-body { font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
.qe-status { margin-left: auto; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.qe-status.s-open { background: #fee2e2; color: #b91c1c; }
.qe-status.s-done { background: #dcfce7; color: #15803d; }
:root[data-theme="dark"] .qe-status.s-open { background: #3b1616; color: #fca5a5; }
:root[data-theme="dark"] .qe-status.s-done { background: #14301f; color: #86efac; }

.qe-form { max-width: 760px; }
.qe-form label { display: flex; align-items: center; gap: 10px; }
.qe-ans {
    display: inline-flex; align-items: center; gap: 5px; margin: 0;
    font-size: 12.5px; font-weight: 700; color: var(--text-light);
    padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); cursor: pointer;
}
.qe-ans:has(input:checked) { border-color: var(--success); color: var(--success); background: #f0fdf4; }
:root[data-theme="dark"] .qe-ans:has(input:checked) { background: #14301f; }
.qe-resolve { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--bg); }
.qe-resolve-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; margin: 0; }
.qe-actions { display: flex; gap: 8px; margin-top: 18px; }

/* 정정 요청 완료 화면 */
.qrep-back-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-light); }

/* ── 콘텐츠 보호 ─────────────────────────────── */
.protect-on .question-card,
.protect-on .qtext,
.protect-on .choice-label,
.protect-on .explain,
.protect-on .book-body,
.protect-on .book-read {
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
/* 형광펜은 글자를 끌어서 칠하는 기능이라 선택이 되어야 한다 (복사는 따로 막는다) */
.protect-on .hl-area {
    -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}
/* 형광펜을 켠 동안에는 카드 안 어디서든 드래그가 시작될 수 있어야 한다.
   (보기 칸은 글자 옆 빈 공간이 넓어서, 글자 위에서만 허용하면 잘 안 잡힌다.
    복사는 protect.js 가 따로 막는다) */
.protect-on .question-card.qn-penmode,
.protect-on .question-card.qn-penmode * {
    -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}
/* 글쓰기 칸은 예외 */
.protect-on input, .protect-on textarea, .protect-on [contenteditable="true"] {
    -webkit-user-select: text; user-select: text;
}
.protect-on img { -webkit-user-drag: none; user-drag: none; }

.protect-toast {
    position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 12px);
    background: rgba(17, 24, 39, .94); color: #fff;
    font-size: 13.5px; font-weight: 600; line-height: 1.5;
    padding: 11px 18px; border-radius: 999px;
    z-index: 9999; pointer-events: none;
    opacity: 0; transition: opacity .18s ease, transform .18s ease;
    max-width: calc(100vw - 32px); text-align: center;
}
.protect-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media print {
    /* 인쇄로 문제를 통째로 가져가는 것도 막는다.
       주문 내역·약관 같은 다른 페이지는 그대로 인쇄되어야 하므로 본문만 가린다. */
    .protect-on .question-card,
    .protect-on .book-body,
    .protect-on .book-read { display: none !important; }
    .protect-on .exam-layout::after {
        content: "문제 내용은 인쇄할 수 없습니다.";
        display: block; padding: 40px 0; text-align: center; font-size: 14px;
    }
}


/* ── 관리자 · 이용권 지급 관리 ─────────────────── */
.gr-user {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.gr-user strong { font-size: 15px; }
.gr-now { margin-left: auto; font-size: 13px; color: var(--text-light); }
.gr-now strong { color: var(--primary); }
.gr-add {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--border);
}
.gr-add .meta { font-size: 12.5px; color: var(--text-light); }
.gr-add input[type=number], .gr-add input[type=text], .gr-add select {
    padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px;
    font-family: inherit; font-size: 13.5px; background: var(--card); color: var(--text);
}
.an-table input[type="datetime-local"] {
    padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px;
    font-family: inherit; font-size: 13px; background: var(--card); color: var(--text);
    width: 100%;
}

/* ── 게시판 이미지 첨부 (붙여넣기 · 끌어다 놓기) ── */
.bp-count {
    float: right; font-weight: 600; font-size: 12.5px; color: var(--text-light);
}
.bp-zone {
    border: 1.5px dashed var(--border); border-radius: 10px;
    padding: 12px; background: #fbfbfd; transition: border-color .15s, background .15s;
}
:root[data-theme="dark"] .bp-zone { background: #1c1e26; }
.bp-zone.drag { border-color: var(--primary); background: #eef2ff; }
:root[data-theme="dark"] .bp-zone.drag { background: #23264a; }
.bp-zone input[type="file"] { margin-bottom: 6px; }
.bp-hint { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-light); }
.bp-hint strong { color: var(--primary); font-weight: 600; }

.bp-list { display: flex; flex-wrap: wrap; gap: 10px; }
.bp-zone.has-files .bp-list { margin-top: 12px; }
.bp-item {
    position: relative; width: 96px; height: 96px; border-radius: 8px;
    overflow: hidden; border: 1px solid var(--border); background: #fff;
}
:root[data-theme="dark"] .bp-item { background: #14161c; }
.bp-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(17, 24, 39, .72); color: #fff;
    font-size: 11px; text-align: center; padding: 2px 0;
}
.bp-del {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(17, 24, 39, .78); color: #fff;
    font-size: 15px; line-height: 22px; padding: 0;
}
.bp-del:hover { background: var(--danger); }

.bp-msg {
    margin-top: 10px; padding: 8px 11px; border-radius: 8px;
    background: #eef2ff; color: var(--primary);
    font-size: 12.5px; line-height: 1.6;
}
:root[data-theme="dark"] .bp-msg { background: #23264a; color: #a5b4fc; }

@media (max-width: 480px) {
    .bp-item { width: 78px; height: 78px; }
}

/* ── 본문에 넣은 이미지 ── */
.bi-strip {
    margin-top: 8px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: #fbfbfd;
}
:root[data-theme="dark"] .bi-strip { background: #1c1e26; }
.bi-head { font-size: 12.5px; font-weight: 600; color: var(--text-light); margin-bottom: 8px; }
.bi-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bi-item {
    position: relative; width: 72px; height: 72px; border-radius: 7px;
    overflow: hidden; border: 1px solid var(--border); background: #fff;
}
:root[data-theme="dark"] .bi-item { background: #14161c; }
.bi-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bi-wait {
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--text-light);
    background: repeating-linear-gradient(45deg, #f3f4f6 0 8px, #e9ebef 8px 16px);
}
:root[data-theme="dark"] .bi-wait { background: repeating-linear-gradient(45deg, #23262e 0 8px, #2b2f38 8px 16px); }
.bi-del {
    position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
    border: 0; border-radius: 50%; cursor: pointer; padding: 0;
    background: rgba(17, 24, 39, .78); color: #fff; font-size: 14px; line-height: 20px;
}
.bi-del:hover { background: var(--danger); }

.bi-msg {
    margin-top: 8px; padding: 8px 11px; border-radius: 8px;
    background: #eef2ff; color: var(--primary); font-size: 12.5px; line-height: 1.6;
}
.bi-msg.bad { background: #fef2f2; color: var(--danger); }
:root[data-theme="dark"] .bi-msg { background: #23264a; color: #a5b4fc; }
:root[data-theme="dark"] .bi-msg.bad { background: #33161a; color: #fca5a5; }

textarea.bi-drag { outline: 2px dashed var(--primary); outline-offset: -3px; }

/* 글에서 본문 이미지가 놓이는 자리 */
.post-body .post-inline { display: block; margin: 12px 0; }
.post-body .post-inline img {
    max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border);
}

/* ── 요금제: 가격 준비 중 · 한 종목 안내 ── */
.pass-soon {
    display: inline-block; font-size: 15px; font-weight: 700; color: var(--text-light);
    padding: 6px 0;
}
.pass-scope-note {
    margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-light);
}
.pass-scope-note strong { color: var(--primary); font-weight: 700; }

/* ── 결제: 과목 고르기 ── */
.scope-pick { max-width: 460px; margin: 10px auto 40px; text-align: center; }
.scope-head .scope-name { font-size: 19px; font-weight: 700; }
.scope-head p { margin: 8px 0 22px; font-size: 13.5px; color: var(--text-light); line-height: 1.7; }
.scope-head p strong { color: var(--primary); }
.scope-types { display: flex; flex-direction: column; gap: 12px; }
.scope-type {
    display: block; padding: 18px 16px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--card);
    font-size: 15px; font-weight: 600; color: var(--text);
    transition: border-color .15s, background .15s;
}
.scope-type:hover { border-color: var(--primary); background: #f5f6ff; color: var(--primary); }
:root[data-theme="dark"] .scope-type:hover { background: #23264a; }
.scope-foot { margin-top: 20px; font-size: 13px; }

/* ── 결제: 자격증 · 할인코드 패널 ── */
.scope-form { display: block; }
.sf-lead { margin: 0 0 18px; text-align: center; font-size: 13.5px; color: var(--text-light); line-height: 1.6; }
.sf-label {
    display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 600;
}
.sf-type {
    margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    background: #eef2ff; color: var(--primary); font-size: 11.5px; font-weight: 700;
}
:root[data-theme="dark"] .sf-type { background: #23264a; color: #a5b4fc; }
.sf-select {
    width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--card); color: var(--text); font-family: inherit; font-size: 14px;
}
.sf-empty, .sf-hint { margin: 6px 0 0; font-size: 12px; color: var(--text-light); line-height: 1.6; }
.sf-change { margin: 8px 0 0; font-size: 12.5px; }

.sf-coupon { display: flex; gap: 8px; }
.sf-coupon input {
    flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--border);
    border-radius: 9px; background: var(--card); color: var(--text);
    font-family: inherit; font-size: 14px;
}
.sf-coupon .btn { padding: 10px 18px; flex-shrink: 0; }
.sf-coupon-msg { margin: 7px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--primary); }
.sf-coupon-msg.bad { color: var(--danger); }

.sf-book-link {
    display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none;
    color: var(--primary); font-family: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer; text-align: left;
}
.sf-book-link:hover { text-decoration: underline; }

.sf-perks {
    list-style: none; margin: 18px 0 0; padding: 14px 16px;
    border-radius: 10px; background: var(--bg-alt, rgba(127,127,127,.06));
}
.sf-perks li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.9; }
.sf-perks li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; }

.sf-lines { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.sf-line { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; }
.sf-line.sale { color: var(--primary); }
.sf-line.total { font-size: 16px; margin: 12px 0 0; align-items: baseline; }
.sf-line.total strong { color: var(--primary); font-size: 18px; }

.sf-pay { width: 100%; margin-top: 16px; padding: 13px; font-size: 15px; }
.sf-pay[disabled] { opacity: .45; cursor: default; }

@media (max-width: 640px) {
    .sf-coupon { flex-wrap: wrap; }
    .sf-coupon .btn { width: 100%; }
}

/* 요금제 4장 — 2열 2줄, 화면이 좁아지면 1열 */
@media (max-width: 620px) {
    .pass-grid { grid-template-columns: 1fr; }
}

/* ── 실기 필답형 · 작업형 나눠 풀기 ── */
.part-pick { margin: 18px 0 4px; }
.part-pick-head { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.part-pick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.part-chip {
    flex: 1 1 130px; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    transition: border-color .15s, background .15s;
}
.part-chip strong { font-size: 14.5px; }
.part-chip span { font-size: 11.5px; color: var(--text-light); }
.part-chip:hover { border-color: var(--primary); }
.part-chip.on { border-color: var(--primary); background: #eef2ff; }
.part-chip.on strong { color: var(--primary); }
:root[data-theme="dark"] .part-chip.on { background: #23264a; }
.part-pick-note { margin: 8px 0 0; font-size: 12px; color: var(--text-light); }


/* 모의고사 문제 카드의 과목 표시 */
.qno .qsubject {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    border-radius: 999px; background: var(--bg-alt, rgba(127,127,127,.12));
    color: var(--text-light); font-size: 11px; font-weight: 600; vertical-align: middle;
}

/* ── 숨김 처리된 글 · 댓글 ─────────────────────
   지운 게 아니라 '남들에게만 안 보이는' 상태. 쓴 사람과 관리자에게만 이 표시가 보인다. */
.hidden-note {
    margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
    background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
    font-size: 13px; line-height: 1.7;
}
.hidden-note strong { font-weight: 700; }
.hidden-note.admin { background: #f3f4f6; border-color: var(--border); color: var(--text-light); }
.hidden-note.small { margin: 6px 0; padding: 7px 11px; font-size: 12.5px; }
:root[data-theme="dark"] .hidden-note { background: #3a2410; border-color: #7c4a17; color: #fdba74; }
:root[data-theme="dark"] .hidden-note.admin { background: #2a2d35; border-color: var(--border); color: var(--text-light); }

.hidden-chip {
    display: inline-block; margin-left: 4px; padding: 1px 7px;
    border-radius: 999px; background: #fff7ed; color: #9a3412;
    font-size: 11px; font-weight: 700; vertical-align: middle;
}
:root[data-theme="dark"] .hidden-chip { background: #3a2410; color: #fdba74; }
tr.row-hidden td { opacity: .6; }

/* ───────── 도로명주소 검색 (교재 주문) ───────── */
.addr-row { display: flex; gap: 8px; align-items: center; }
.addr-row input { max-width: 160px; }
.addr-btn { flex: none; white-space: nowrap; padding: 9px 14px; font-size: 14px; }
.addr-locked { background: var(--bg); cursor: default; }
.addr-hint { font-size: 12.5px; color: var(--text-light); margin: 6px 0 0; }

.addr-layer {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.addr-layer[hidden] { display: none; }
.addr-layer-box {
    background: var(--card, #fff); border-radius: 14px; overflow: hidden;
    width: 100%; max-width: 520px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    display: flex; flex-direction: column; max-height: 90vh;
}
.addr-layer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
    font-weight: 700; font-size: 15px;
}
.addr-layer-close {
    border: 0; background: none; cursor: pointer;
    font-size: 17px; line-height: 1; color: var(--text-light); padding: 4px 6px;
}
.addr-layer-close:hover { color: var(--text); }
/* 위젯이 안쪽 크기를 스스로 잡으므로 바깥 높이만 정해 준다 (높이가 0 이 되면 화면이 안 보인다) */
.addr-embed { height: 460px; }

@media (max-width: 480px) {
    .addr-row { flex-wrap: wrap; }
    .addr-row input { max-width: none; flex: 1 1 140px; }
    .addr-layer-box { max-height: 94vh; }
    .addr-embed { height: 400px; }
}

/* ───────── 자동결제 선택 (이용권 결제 화면) ───────── */
.sf-auto {
    display: flex; gap: 10px; align-items: flex-start;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 13px; margin: 14px 0 4px; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.sf-auto:hover { border-color: var(--primary); }
.sf-auto.on { border-color: var(--primary); background: rgba(79, 70, 229, .06); }
.sf-auto input { margin-top: 3px; flex: none; }
.sf-auto span { display: block; line-height: 1.5; }
.sf-auto b { font-size: 14px; }
.sf-auto em { display: block; font-style: normal; font-size: 13px; color: var(--primary); margin-top: 3px; }
.sf-auto small { display: block; font-size: 12px; color: var(--text-light); margin-top: 5px; line-height: 1.6; }

/* 마이페이지 자동결제 카드 */
.sub-box {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px; margin: 12px 0;
}
.sub-box.warn { border-color: #f59e0b; background: rgba(245, 158, 11, .06); }
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sub-title { font-weight: 700; font-size: 15px; }
.sub-tag {
    font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px;
    color: var(--primary); background: rgba(79, 70, 229, .12);
}
.sub-tag.off { color: #6b7280; background: #f3f4f6; }
.sub-tag.bad { color: #b91c1c; background: rgba(185, 28, 28, .12); }
.sub-rows { margin: 10px 0 0; font-size: 13.5px; line-height: 1.9; color: var(--text-light); }
.sub-rows b { color: var(--text); }


/* ══ 교재구매 목록 (ebook.php) ═══════════════════════════════ */
.bk-wrap { max-width: 1080px; margin: 0 auto; }
.bk-head { margin: 30px 0 22px; }
.bk-head h1 { margin: 0 0 8px; font-size: 26px; }
.bk-head p { margin: 0; color: var(--text-light); font-size: 13.5px; line-height: 1.75; }

.bk-search { position: relative; margin: 0 0 14px; }
.bk-search-ic {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 14px; opacity: .5; pointer-events: none;
}
.bk-search-input {
    width: 100%; box-sizing: border-box;
    padding: 13px 16px 13px 40px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--card); color: var(--text);
    font-size: 14px; font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-search-input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.bk-chips { margin: 0 0 18px; }

.bk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: 16px;
}
.bk-card {
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border); border-radius: 14px;
    overflow: hidden; text-decoration: none; color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bk-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: 0 10px 26px rgba(17,19,26,.10);
}
.bk-cover {
    background: linear-gradient(180deg, #f4f5f9, #e8eaf1);
    padding: 24px 0 26px;
    display: flex; align-items: center; justify-content: center;
}
:root[data-theme="dark"] .bk-cover { background: linear-gradient(180deg, #1b1e26, #14161c); }
.bk-cover img {
    width: 54%; max-width: 148px; height: auto;
    aspect-ratio: 1600 / 2264; object-fit: cover;
    border-radius: 4px; display: block;
    box-shadow: 0 8px 20px rgba(17,19,26,.26);
}
.bk-cover-ph {
    width: 54%; max-width: 148px; aspect-ratio: 1600 / 2264;
    border-radius: 4px; box-shadow: 0 8px 20px rgba(17,19,26,.26);
    background: linear-gradient(160deg, #4f46e5, #312e81);
    display: flex; align-items: center; justify-content: center;
    padding: 14px; box-sizing: border-box;
}
.bk-cover-ph span {
    color: #fff; font-size: 12px; font-weight: 700; line-height: 1.5;
    text-align: center; word-break: keep-all;
}

.bk-body { padding: 14px 15px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.bk-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.bk-cert { font-size: 11.5px; color: var(--text-light); }
.bk-card h3 {
    margin: 0 0 7px; font-size: 15px; line-height: 1.45;
    word-break: keep-all;
}
.bk-meta { margin: 0 0 4px; font-size: 12.5px; color: var(--text-light); }
.bk-price { margin: 0 0 12px; font-size: 12.5px; color: var(--text-light); }
.bk-price b { color: var(--text); font-size: 14px; font-weight: 800; }
.bk-more { margin-top: auto; font-size: 12.5px; font-weight: 700; color: var(--primary); }

.bk-none { margin-top: 10px; }

@media (max-width: 620px) {
    .bk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .bk-head h1 { font-size: 22px; }
    .bk-cover { padding: 18px 0 20px; }
    .bk-body { padding: 12px 12px 14px; }
    .bk-card h3 { font-size: 13.5px; }
}

/* ══ 광고 (애드센스) ═══════════════════════════════════════ */
.ad-box {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100px;
    padding: 14px 12px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
}
.ad-label {
    position: absolute; top: 5px; left: 10px;
    font-size: 10.5px; color: var(--text-light); letter-spacing: .04em;
}
.ad-box .adsbygoogle { display: block; width: 100%; }

/* 자격증 회차 목록 머리말 — 제목 옆에 광고 한 칸 */
.cat-head {
    display: flex; align-items: flex-start; gap: 20px;
    margin: 24px 0 0;
}
.cat-head-title { flex: 0 0 auto; }
.cat-head-title h1 { margin: 0; }
.cat-head-title p  { margin: 6px 0 0; }
@media (max-width: 900px) {
    .cat-head { flex-direction: column; gap: 14px; }
    .ad-box { width: 100%; box-sizing: border-box; }
}

/* ══ 문제 풀이 화면 광고 ════════════════════════════════════
   오른쪽 세로 한 칸(exam_side) + 제출 버튼 아래 가로 한 칸(exam_bottom).
   광고가 없는 회원(Basic 이상)에게는 PHP 쪽에서 칸 자체를 만들지 않는다. */
.exam-layout.exam-with-ad {
    grid-template-columns: 200px minmax(0, 1fr) 300px;
}
.exam-ads {
    position: sticky;
    top: 16px;
}
.exam-ads .ad-box {
    min-height: 600px;
    width: 100%;
    box-sizing: border-box;
}
/* 다음 버튼과 제출 버튼 사이. 둘 다 잘못 눌리지 않게 위아래로 넉넉히 띄운다 */
.exam-ad-bottom {
    margin: 26px 0 26px;
}
.exam-ad-bottom .ad-box {
    min-height: 120px;
    width: 100%;
    box-sizing: border-box;
}

/* 화면이 좁아지면 세로 광고는 본문 아래로 내려 가로로 눕는다.
   (1280px 미만에서는 세로 광고를 옆에 두면 문제 지문이 너무 좁아진다) */
@media (max-width: 1279px) {
    .exam-layout.exam-with-ad {
        grid-template-columns: 200px minmax(0, 1fr);
    }
    .exam-ads {
        position: static;
        grid-column: 1 / -1;
        margin-top: 8px;
    }
    .exam-ads .ad-box { min-height: 120px; }
}
@media (max-width: 720px) {
    .exam-layout.exam-with-ad { grid-template-columns: 1fr; }
}

/* ══ 관리자 · 회원 추가 폼 ═══════════════════════════════ */
.member-add {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    padding: 10px 14px;
    margin: 0 0 14px;
}
.member-add > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--primary);
    list-style: none;
}
.member-add > summary::-webkit-details-marker { display: none; }
.member-add[open] > summary { margin-bottom: 12px; }
.member-add-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-end;
}
.member-add-form .mf { display: flex; flex-direction: column; gap: 4px; }
.member-add-form .mf label {
    font-size: 12px;
    color: var(--text-light);
}
.member-add-form .mf .search-input { max-width: 200px; }
.member-add-form .mf-check {
    flex-direction: row;
    align-items: center;
    padding-bottom: 9px;
}
.member-add-form .mf-check label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
@media (max-width: 720px) {
    .member-add-form .mf { width: 100%; }
    .member-add-form .mf .search-input { max-width: 100%; }
}