/* 1. 디자인 토큰: 시안의 색·글꼴·간격·모서리·그림자를 공유한다. */
:root {
 color-scheme:light; --font:'Noto Sans KR',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
 --font-serif:'Noto Serif KR','Nanum Myeongjo','Batang',serif;
 --bg:#F6F5F1; --card:#FFFFFF; --ink:#0E1726; --muted:#5A6577; --secondary:#3B4658; --line:#E2E7EF; --line-soft:#EEF1F5;
 --accent:#1A3A6B; --accent-ink:#FFFFFF; --chip:#E8EEF8; --banner:#1A3A6B; --banner-ink:#FFFFFF; --banner-muted:#D6E0F0;
 --purchase-button:#C2410C; --purchase-button-ink:#FFFFFF; --purchase-bg:#FFF6EF; --purchase-line:#F2CDB4; --purchase-badge:#FFE8D9; --purchase-ink:#9A3412;
 --good:#17803D; --good-bg:#E7F6EC; --good-ink:#145C30; --bad:#9B1C1C; --bad-bg:#FDECEC; --missing:#9A3412; --missing-bg:#FFF1E6; --warn:#7A4F00; --warn-bg:#FFF4D6; --star:#B7791F;
 --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
 --radius:8px; --radius-inner:6px; --radius-button:6px; --radius-tag:4px;
 --shadow:none; --shadow-nav:0 6px 24px rgba(14,23,38,.14); --page-width:1120px; --mobile-bar:66px;
}
/* 운영체제 설정을 따르지 않고 사용자가 고른 경우에만 어두운 화면을 적용한다. */
:root[data-theme="dark"] {
 color-scheme:dark; --bg:#14161B; --card:#18202D; --ink:#E6EAF0; --muted:#9AA5B5; --secondary:#C0CAD8; --line:#2A3445; --line-soft:#253043;
 --accent:#8FB3E8; --accent-ink:#0F1520; --chip:#24354F; --banner:#203A60; --banner-ink:#FFFFFF; --banner-muted:#D6E0F0;
 --purchase-button:#F28A4B; --purchase-button-ink:#24160D; --purchase-bg:#2A1E16; --purchase-line:#78513B; --purchase-badge:#493025; --purchase-ink:#FFB184;
 --good:#75D99B; --good-bg:#173626; --good-ink:#9BE6B6; --bad:#FFA5A5; --bad-bg:#412329; --missing:#FFC299; --missing-bg:#432D1E; --warn:#F3D487; --warn-bg:#3D321B; --star:#F3D487;
 --shadow:none;
}

/* 2. 공통 부품: 버튼·카드·배지·진행 막대·입력·표·초점 표시. */
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.7 var(--font); word-break:keep-all; overflow-wrap:anywhere; }
/* 본문 속 이동·정책 링크도 최소 44px 높이로 눌릴 수 있게 한다. */
a { display:inline-flex; align-items:center; min-height:44px; max-width:100%; color:var(--accent); text-underline-offset:3px; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; } button:disabled { cursor:default; }
h1,h2,h3,h4,p { margin-top:0; }
h1 { font-size:32px; line-height:1.4; letter-spacing:-.035em; font-weight:800; margin-bottom:12px; }
h2 { font-size:20px; line-height:1.5; font-weight:800; margin:24px 0 14px; }
h3 { font-size:17px; line-height:1.5; margin:16px 0 10px; } p { margin-bottom:12px; }
.muted { color:var(--muted); } .small { font-size:13px; }
.ui-icon { width:22px; height:22px; flex:0 0 22px; vertical-align:middle; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border:1px solid var(--accent); border-radius:var(--radius-button); background:var(--accent); color:var(--accent-ink); text-decoration:none; font-size:14px; font-weight:700; line-height:1.5; text-align:center; }
.btn.ghost { background:var(--card); color:var(--accent); border-color:var(--line); }
.btn:hover:not(:disabled) { border-color:var(--accent); text-decoration:underline; } .btn:disabled { opacity:.5; }
.btn.danger { color:var(--bad); border-color:var(--bad); background:transparent; }
.btn.icon-button { width:44px; padding:0; flex:0 0 44px; }
.card { min-width:0; padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); }
a.card { display:block; color:var(--ink); text-decoration:none; } a.card:hover { border-color:var(--accent); }
.card>:first-child { margin-top:0; } .card>:last-child { margin-bottom:0; }
.row,.section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.row>*,.section-heading>* { min-width:0; }
.list { display:flex; flex-direction:column; gap:12px; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.chip { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:var(--radius-tag); color:var(--accent); background:var(--chip); font-size:12px; font-weight:700; line-height:1.7; }
.chip.good { color:var(--good-ink); background:var(--good-bg); } .chip.bad { color:var(--bad); background:var(--bad-bg); }
.chip.missing { color:var(--missing); background:var(--missing-bg); } .chip.warn { color:var(--warn); background:var(--warn-bg); }
.badge-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.progress { height:5px; overflow:hidden; border-radius:2px; background:var(--chip); }
.progress>span { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.progress.good { background:var(--good-bg); } .progress.good>span { background:var(--good); }
.warnbox,.successbox { padding:12px 16px; margin:12px 0; border-radius:var(--radius-inner); color:var(--warn); background:var(--warn-bg); font-size:14px; }
.successbox { color:var(--good-ink); background:var(--good-bg); }
.ref { padding:14px 16px; margin:12px 0; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius-button); background:var(--bg); font-size:14px; white-space:pre-wrap; }
.ref a { display:inline-block; min-height:44px; padding:8px 0; font-weight:700; }
.passage { padding:16px; margin-bottom:16px; border:1px solid var(--line); border-radius:var(--radius-inner); background:var(--bg); white-space:pre-wrap; font-size:15px; }
.stem { font-weight:700; line-height:1.8; }
textarea { display:block; width:100%; min-height:260px; resize:vertical; padding:16px; border:1px solid var(--line); border-radius:var(--radius-inner); background:var(--card); color:var(--ink); }
input,select { max-width:100%; color:var(--ink); }
summary { min-height:44px; padding:10px 0; cursor:pointer; color:var(--accent); }
table { width:100%; border-collapse:collapse; font-size:14px; }
td,th { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; } th { background:var(--bg); }
.ptable { display:block; max-width:100%; overflow-x:auto; margin:8px 0; white-space:normal; }
.ptable td { border:1px solid var(--line); } .ptable tr:first-child td { background:var(--card); font-weight:700; }
.el { padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:14px; } .quote { color:var(--muted); margin:6px 0; }
:is(a,button,input,textarea,select,summary,[tabindex]):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:100; padding:12px 20px; background:var(--card); border-radius:var(--radius-button); } .skip-link:focus { top:8px; }

/* 3. 공통 틀: 상단 메뉴, 본문 경로, 모바일 하단 메뉴. */
.top { position:sticky; top:0; z-index:30; background:var(--card); border-bottom:1px solid var(--line); }
.top-inner { display:flex; align-items:center; gap:20px; max-width:var(--page-width); min-height:72px; padding:8px 24px; margin:auto; }
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; min-height:44px; color:var(--ink); font-size:19px; font-weight:800; text-decoration:none; }
.desktop-nav { display:flex; gap:4px; flex:1; }
.desktop-nav a { display:inline-flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--radius-button); color:var(--secondary); font-size:14px; text-decoration:none; }
.desktop-nav a[aria-current] { color:var(--accent); background:var(--chip); font-weight:700; }
.top-actions { display:flex; align-items:center; gap:8px; margin-left:auto; } .account-link { white-space:nowrap; }
.mobile-location,.mobile-nav,.mobile-theme { display:none; }
.crumb { max-width:var(--page-width); margin:20px auto 0; padding:0 24px; color:var(--muted); font-size:13px; } .crumb:empty { display:none; }
.crumb a { display:inline-flex; min-height:44px; align-items:center; }
main { max-width:var(--page-width); min-width:0; padding:24px 24px 48px; margin:0 auto; }
main[data-screen="q1"] { max-width:880px; }
main[data-screen="q2"],main[data-screen="cloze"],main[data-screen="account"],main[data-screen="policy"] { max-width:960px; }
main[data-screen="buy"] { max-width:720px; }
.foot { max-width:var(--page-width); padding:24px; margin:16px auto 40px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.footer-tools { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .footer-tools .btn { font-size:12px; font-weight:500; }
.storage-status,.account-notice { max-width:1072px; margin:16px auto 0; }
#q1-section,#q2-section,#review-shortcuts,#exam-purchases,#home-exams,#out { scroll-margin-top:92px; }

/* 4. 홈: 큰 소개, 가입 선물 띠, 시험 카드 격자. */
.home-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:36px; padding:20px 0 36px; }
.home-hero h1 { font-family:var(--font-serif); font-weight:700; font-size:40px; line-height:1.35; letter-spacing:-1px; margin-bottom:16px; }
.home-intro>p:not(.home-statistics) { max-width:760px; color:var(--secondary); font-size:18px; }
.signup-banner { border:1px solid var(--line); border-left:3px solid var(--accent); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:20px 24px; margin-bottom:32px; border-radius:var(--radius); background:var(--card); color:var(--ink); }
.signup-banner h2 { margin:0 0 4px; font-size:18px; } .signup-banner p { margin:0; font-size:14px; color:var(--secondary); }
.signup-banner .btn { min-height:48px; color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.home-exams>h2 { margin:0 0 16px; font-size:22px; }
/* 시험이 많아져도 기존 칩·카드 색을 쓰고, 가로 넘침은 분야 칩 줄 안에서만 스크롤한다. */
.exam-group-chips { display:flex; gap:8px; max-width:100%; min-width:0; overflow-x:auto; padding:4px 3px 12px; margin-bottom:12px; overscroll-behavior-x:contain; }
.exam-group-chip { flex:0 0 auto; justify-content:center; min-width:44px; min-height:44px; padding:10px 16px; border:1px solid var(--line); background:var(--card); font-size:14px; white-space:nowrap; }
.exam-group-chip[aria-pressed="true"] { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.exam-group-chip:hover { border-color:var(--accent); }
.exam-search { margin-bottom:12px; }
.exam-search label { display:block; margin-bottom:8px; font-size:14px; font-weight:700; }
.exam-search input { display:block; width:100%; min-width:0; min-height:48px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-button); background:var(--card); color:var(--ink); font-size:16px; }
.exam-search input::placeholder { color:var(--muted); opacity:1; font-size:13px; }
.exam-search p { margin:6px 0 0; }
.exam-group + .exam-group { margin-top:28px; }
.exam-group>h3 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 14px; font-size:18px; }
/* 분야 제목 아래의 카드 제목 단계만 조정하고 원래 크기·모양은 유지한다. */
.exam-card { display:flex !important; flex-direction:column; padding:22px; } .exam-card h4 { margin:0; font-size:22px; font-weight:800; line-height:1.5; }
.exam-card .row>span { font-size:28px; color:var(--muted); } .exam-card>p { margin:10px 0 14px; font-size:14px; }
.exam-card .badge-row { margin-top:auto; }

/* 5. 시험: 학습 현황, 과목 선택 및 연도별 카드. */
.exam-heading { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.exam-heading p { margin:0; font-size:14px; } .exam-heading>a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.exam-overview { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,2fr); gap:24px; margin-bottom:24px; }
.learning-card h2 { margin:0 0 20px; font-size:18px; }
.study-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:12px 0; color:var(--muted); font-size:13px; }
.study-stats>div { min-width:0; } .study-stats span { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px; }
.study-stats b { color:var(--accent); font-size:20px; font-variant-numeric:tabular-nums; } .study-stats>div:last-child b { color:var(--good); }
.study-stats small { display:block; margin-top:6px; font-size:12px; }
.learning-card .study-stats { grid-template-columns:minmax(0,1fr); margin:0 0 20px; gap:22px; }
.learning-card .study-stats b { font-size:26px; } .learning-card .progress { height:5px; }
.review-shortcuts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:20px 0; }
.review-shortcuts button { min-height:82px; padding:12px; border:0; border-radius:var(--radius-inner); background:var(--bad-bg); color:var(--bad); text-align:left; }
.review-shortcuts button:last-child { background:var(--warn-bg); color:var(--warn); }
.review-shortcuts span,.review-shortcuts b { display:block; } .review-shortcuts span { font-size:13px; } .review-shortcuts b { font-size:20px; }
.question-library { margin:24px 0; } .section-heading h2 { margin:0; }
.subject-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; } .subject-tabs .btn { border-radius:var(--radius-button); }
.subject { margin-top:20px; } .subject h3 { margin:0 0 8px; } .subject>.study-stats { max-width:580px; margin-bottom:20px; }
.years { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.year-card { padding:16px; border-radius:var(--radius); box-shadow:none; }
.year-title { display:block; min-height:44px; color:var(--ink); text-decoration:none; } .year-title b { font-size:19px; } .year-title span { display:block; }
.year-card>.chip { margin:6px 0; }
.year-card .study-stats { grid-template-columns:1fr; gap:6px; margin:12px 0; } .year-card .study-stats b { font-size:13px; } .year-card .study-stats small { font-size:11px; }
.year-card .study-stats>div:last-child .progress,.year-card .study-stats>div:last-child small { display:none; }
.year-card .study-stats span { margin-bottom:4px; } .year-card .progress { height:6px; }
.year-actions { display:flex; flex-direction:column; gap:6px; } .year-actions .btn { padding:8px 6px; font-size:11px; }
.year-actions .year-start { border-color:var(--accent); font-size:14px; }
.secondary-exam { margin-top:24px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card); }
.secondary-banner { padding:24px; background:var(--banner); color:var(--banner-ink); }
.secondary-banner h2 { margin:0 0 6px; } .secondary-banner p { margin:0; color:var(--banner-muted); font-size:14px; }
.secondary-exam .list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; }
.secondary-exam a.card { padding:16px; box-shadow:none; }

/* 연도 묶음은 기존 카드·칩·진행 막대를 쓰고, 기본 summary의 키보드 동작을 유지한다. */
.exam-view-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.exam-view-tabs .btn { border-radius:var(--radius-button); }
.exam-year-groups { display:flex; flex-direction:column; gap:12px; min-width:0; }
.secondary-exam>.exam-year-groups { padding:16px; }
.year-group { min-width:0; border:1px solid var(--line); border-radius:var(--radius-inner); background:var(--card); }
.year-group>summary { display:grid; grid-template-columns:16px minmax(0,1fr); align-items:center; gap:8px 12px; min-height:56px; padding:14px 16px; list-style:none; color:var(--ink); }
.year-group>summary::-webkit-details-marker { display:none; }
.year-group>summary::before { content:'›'; color:var(--accent); font-size:24px; line-height:1; text-align:center; }
.year-group[open]>summary::before { transform:rotate(90deg); }
.year-group[open]>summary { border-bottom:1px solid var(--line); }
.year-group-title { min-width:0; font-weight:700; }
.year-group-title .small { font-weight:400; }
.year-group>summary>.study-stats { grid-column:2; min-width:0; width:100%; max-width:580px; gap:16px; margin:4px 0 0; }
.year-group>summary .study-stats b { font-size:17px; }
.year-group-body { min-width:0; padding:16px; }
.q2-subject+.q2-subject { margin-top:24px; }
.q2-subject h3 { margin:0 0 12px; }
.q2-problems { display:flex; flex-direction:column; gap:10px; }
.q2-problem { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; padding:16px; box-shadow:none; }
.q2-problem-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex:0 1 180px; min-width:0; }
.q2-question-links { display:flex; flex:1 1 260px; flex-wrap:wrap; gap:8px; min-width:0; }
/* 회장님 11/1 결정: 물음의 무료·학습권 배지가 좁은 화면에서도 줄바꿈되게 한다. */
.q2-question-links .btn { max-width:100%; flex-wrap:wrap; }

/* 6. 구매 공통: 상품과 구매 동작에 주황색을 사용한다. */
.purchase-panel { min-width:0; padding:24px; border:1px solid var(--purchase-line); border-radius:var(--radius); background:var(--purchase-bg); }
.purchase-heading { margin-bottom:16px; } .purchase-heading h2 { display:flex; align-items:center; gap:10px; margin:0; font-size:20px; }
.purchase-heading p { color:var(--secondary); font-size:13px; margin:6px 0 0; }
.purchase-icon { width:26px; height:26px; flex:0 0 26px; color:var(--purchase-button); }
.purchase-products { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.exam-pass-section { min-width:0; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.exam-pass-section h3 { color:var(--accent); font-size:15px; margin:0 0 12px; }
.purchase-benefits { padding:0; margin:0 0 16px; list-style:none; font-size:13px; color:var(--secondary); }
.purchase-benefits li { position:relative; padding-left:20px; margin:6px 0; } .purchase-benefits li::before { content:'–'; position:absolute; left:0; color:var(--muted); }
.product-price { font-size:32px; line-height:1.3; letter-spacing:-.04em; font-weight:800; color:var(--ink); margin:0; font-variant-numeric:tabular-nums; }
.product-conditions { color:var(--secondary); font-size:14px; margin:8px 0 16px; }
.btn.purchase-primary { min-height:48px; color:var(--purchase-button-ink); background:var(--purchase-button); border-color:var(--purchase-button); }
.btn.purchase-primary:hover:not(:disabled) { border-color:var(--purchase-ink); } .whole-pass .purchase-primary { width:100%; }
/* 회장님 11/1 가격 규칙: 1차·2차 가격을 별도 줄에 두고 긴 과목명도 작은 화면에서 줄바꿈한다. */
.study-pass-offers { display:grid; gap:10px; }
.study-pass-offer { display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--line-soft); }
.study-pass-offer>div { flex:1; min-width:0; font-size:14px; overflow-wrap:anywhere; }
.study-pass-terms { display:block; margin-top:4px; color:var(--secondary); font-size:13px; }
.study-pass-terms b { color:var(--ink); font-size:18px; font-variant-numeric:tabular-nums; }
.study-pass-offer .btn { flex-shrink:0; padding:10px 12px; font-size:13px; }
.pass-status-name { display:block; margin-top:4px; font-size:12px; overflow-wrap:anywhere; }
.pass-status,.purchase-signup { padding:10px 14px; margin:0 0 16px; border-radius:var(--radius-button); color:var(--good-ink); background:var(--good-bg); font-size:13px; }
.purchase-signup { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:16px 0 0; } .purchase-signup p { flex:1 1 200px; margin:0; }
.subject-purchases { border-top:1px solid var(--line-soft); margin-top:14px; font-size:13px; } .subject-purchases summary { color:var(--secondary); }
.subject-purchase { display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--line-soft); }
.subject-purchase>span { flex:1; min-width:0; } .subject-purchase small { display:block; color:var(--muted); }
.subject-purchase .btn { color:var(--purchase-ink); border-color:var(--purchase-line); font-size:12px; }
.q2-buy-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }
.q2-offer { display:flex; flex-direction:column; min-width:0; padding:12px 10px; border:1px solid var(--line); border-radius:var(--radius-inner); background:var(--card); }
.q2-offer.is-best-value { border-color:var(--purchase-line); background:var(--purchase-bg); }
.offer-badge-slot { min-height:28px; margin-bottom:4px; }
.offer-badge,.purchase-badge { display:inline-flex; padding:3px 7px; border-radius:var(--radius-button); color:var(--purchase-ink); background:var(--purchase-badge); font-size:10px; font-weight:700; }
.q2-offer h4 { font-size:14px; margin:0 0 10px; } .q2-offer .product-price { font-size:22px; }
.offer-unit { color:var(--purchase-ink); font-size:12px; margin:6px 0; } .offer-period { color:var(--muted); font-size:11px; margin:0 0 12px; }
.q2-offer .purchase-primary { width:100%; padding:8px 4px; margin-top:auto; font-size:13px; }
.buy-product { margin-bottom:18px; } .purchase-eyebrow { display:flex; align-items:center; gap:8px; }
.buy-product h1 { font-size:24px; } .buy-product .product-price { font-size:40px; }
.buy-product .purchase-benefits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:20px 0; }
.buy-product .purchase-benefits li { padding:12px 12px 12px 32px; margin:0; border-radius:var(--radius-button); background:var(--card); }
.buy-product .purchase-benefits li::before { left:12px; top:12px; }
#purchase-notes h2 { margin:0 0 12px; font-size:17px; }
.buy-page #purchase-notes .purchase-notes { margin:0; padding:0; border:0; list-style:none; }
.buy-page #purchase-notes .purchase-notes li { position:relative; padding-left:24px; }
.buy-page #purchase-notes .purchase-notes li::before { content:'ⓘ'; position:absolute; left:0; color:var(--accent); }
.buy-page #login-panel { margin-top:18px; } .checkout { margin:18px 0; } .checkout h2 { margin-top:0; }
.checkout #payment-method,.checkout #agreement { color-scheme:light; background:#FFF; border-radius:var(--radius-button); }
.checkout .account-actions .btn { flex:1 1 100px; } .checkout .account-actions #pay-now { flex:3 1 220px; min-height:56px; font-size:18px; }
#purchase-status:empty { display:none; } .trial-purchase-note { padding:10px 12px; border-radius:var(--radius-button); background:var(--chip); }

/* 모의고사는 기존 색·카드·칩을 공유하고, 선택 표시를 채점 결과 색과 구분한다. */
.mock-catalog { margin:24px 0; }
.mock-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:16px; margin-top:16px; }
.mock-catalog-card { border-top:4px solid var(--accent); }
.mock-catalog-card h3 { font-size:21px; }
.mock-promise { padding:12px; border-radius:var(--radius-button); background:var(--chip); color:var(--accent); font-size:14px; }
.mock-intro { max-width:800px; margin:0 auto; }
.mock-intro h1 { margin-top:16px; }
.mock-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.mock-facts>div { padding:16px; border-radius:var(--radius-inner); background:var(--bg); }
.mock-facts span,.mock-facts strong { display:block; }
.mock-facts span { color:var(--muted); font-size:13px; }
.mock-facts strong { font-size:26px; color:var(--accent); }
.mock-rule { font-weight:700; }
.mock-last { margin-top:20px; }
.mock-title { font-size:24px; }
/* 상단 메뉴 아래에 시간·진도·제출을 붙여 긴 보기나 번호판에서도 시간을 확인하게 한다. */
.mock-toolbar { position:sticky; top:73px; z-index:26; display:flex; align-items:center; gap:20px; padding:12px 16px; margin:16px 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); }
.mock-clock { display:flex; flex-direction:column; min-width:94px; line-height:1.4; }
.mock-clock strong { font-size:28px; font-variant-numeric:tabular-nums; color:var(--accent); }
.mock-clock.is-urgent { color:var(--bad); background:var(--bad-bg); border-radius:8px; padding:4px 8px; }
.mock-clock.is-urgent strong { color:var(--bad); }
.mock-progress { flex:1; min-width:0; font-size:13px; }
.mock-progress .progress { margin-top:8px; }
.mock-toolbar>.btn { flex-shrink:0; }
.mock-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; grid-template-areas:"question map"; gap:20px; align-items:start; }
.mock-question-area { grid-area:question; min-width:0; }
.mock-map { grid-area:map; min-width:0; border:1px solid var(--line); border-radius:var(--radius-inner); background:var(--card); }
.mock-map summary { padding:14px; font-weight:700; }
.mock-map summary span { display:block; font-weight:400; }
.mock-map-body { max-height:65vh; overflow-y:auto; padding:4px 14px 16px; }
.mock-map-body section+section { margin-top:18px; }
.mock-subject { width:100%; margin-bottom:12px; padding:8px; font-size:12px; }
.mock-number-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:6px; }
.mock-number { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:6px; border:1px solid var(--line); border-radius:var(--radius-button); background:var(--card); color:var(--ink); font-size:13px; }
.mock-number.is-answered { border-color:var(--accent); color:var(--accent); background:var(--chip); font-weight:700; }
.mock-number[aria-current] { outline:2px solid var(--accent); outline-offset:1px; }
.mock-subject-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.mock-subject-tabs .btn { font-size:12px; border-radius:var(--radius-button); }
.opt.mock-selected { border:2px solid var(--accent); background:var(--chip); }
.opt.mock-selected .option-number { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.option-result.mock-choice-label { color:var(--accent); }
.mock-question-actions { margin:14px 0; }
.mock-question-nav { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; margin:16px 0; }
.mock-question-nav>span { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.mock-question-nav .btn { min-height:48px; }
.mock-confirm { margin:16px 0; border-color:var(--warn); background:var(--warn-bg); }
#mock-question,#mock-confirm,#mock-review { scroll-margin-top:184px; }
/* 결과는 과락을 별도로 드러내고, 80개 번호도 작은 화면에서 여러 줄로 접는다. */
.mock-result-summary { text-align:center; }
.mock-result-summary>p:first-child { margin-bottom:0; color:var(--muted); }
.mock-score { font-size:64px; font-weight:800; line-height:1.4; color:var(--accent); font-variant-numeric:tabular-nums; }
.mock-score>span { margin-left:6px; font-size:22px; }
.mock-verdict { font-size:22px; margin:12px 0; padding:6px 24px; }
.mock-subject-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; margin:20px 0; }
.mock-subject-results h2 { font-size:18px; }
.mock-subject-results strong { font-size:24px; }
.mock-subject-results .progress { margin-top:16px; }
.mock-result-numbers { display:flex; flex-wrap:wrap; gap:8px; }
.mock-result-numbers .btn { min-width:48px; padding:8px 10px; }
.mock-result-actions { justify-content:flex-start; margin:24px 0; }
.mock-review-map { margin:16px 0; }
.mock-review-map .mock-number-grid { padding:4px; }
.explanation-basis { display:block; margin-top:6px; }
#mock-disclaimer { margin-top:16px; }
@media (max-width:960px) {
 .mock-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"map" "question"; }
 .mock-map-body { max-height:50vh; }
}
/* 375px에서도 제출 버튼과 번호판을 44px 이상 유지하며 기존 모바일 메뉴와 겹치지 않게 한다. */
@media (max-width:600px) {
 .mock-intro { padding:20px 16px; }
 .mock-title { font-size:20px; }
 .mock-toolbar { top:63px; gap:10px; padding:10px; }
 .mock-toolbar>.btn { padding:10px; font-size:12px; }
 .mock-clock { min-width:72px; }
 .mock-clock strong { font-size:23px; }
 .mock-clock .small,.mock-progress { font-size:11px; }
 .mock-facts { gap:10px; }
 .mock-facts>div { padding:12px; }
 .mock-subject-tabs .btn { padding:8px 10px; }
 .mock-question-actions { gap:8px; }
 .mock-question-actions>.small { font-size:11px; }
 .mock-result-list { padding:20px 16px; }
 .mock-result-numbers { gap:6px; }
 #mock-question,#mock-confirm,#mock-review { scroll-margin-top:162px; }
}

/* 7. 1차 문제: 큰 보기, 해설 탭, 경고와 아래 고정 이동 바. */
.question-heading { display:flex; align-items:center; gap:14px; }
.question-heading>div { flex:1; min-width:0; } .question-heading p { margin:0; } .question-heading h1 { margin:2px 0 0; font-size:20px; }
.star-button { flex:0 0 44px; width:44px; padding:0; font-size:26px; color:var(--star) !important; }
.star-button.is-starred { border-color:var(--star); background:var(--warn-bg); }
.question-progress { display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--accent); font-size:14px; }
.question-progress .progress { flex:1; } .question-progress b { white-space:nowrap; }
.study-filters { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; } .study-filters .btn { padding:8px 12px; border-radius:var(--radius-button); font-size:12px; }
.question-stats { margin:0 0 16px; font-size:13px; } .question-card { padding:28px; }
.question-number { margin-bottom:8px; } .solve-date { font-size:12px; margin-bottom:16px; }
.question-card .stem { margin:0 0 20px; font-size:20px; }
.options { display:flex; flex-direction:column; gap:10px; }
.opt { display:flex; align-items:flex-start; gap:14px; width:100%; min-height:60px; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius-inner); background:var(--card); color:var(--ink); text-align:left; line-height:1.7; }
.opt:not(:disabled):hover { border-color:var(--accent); background:var(--bg); }
.option-number { display:inline-flex; align-items:center; justify-content:center; flex:0 0 30px; height:30px; border:1px solid var(--muted); border-radius:50%; color:var(--secondary); font-size:14px; font-weight:700; }
.option-text { flex:1; min-width:0; white-space:pre-wrap; }
.option-result { align-self:center; flex:0 0 auto; color:var(--good-ink); font-size:12px; font-weight:700; }
.opt.right { border:2px solid var(--good); background:var(--good-bg); } .opt.wrong { border:2px solid var(--bad); background:var(--bad-bg); }
.opt.right .option-number { background:var(--good); color:var(--card); border-color:var(--good); }
.opt.wrong .option-number { background:var(--bad); color:var(--card); border-color:var(--bad); } .opt.wrong .option-result { color:var(--bad); }
.answer-result { margin:16px 0; font-size:14px; }
.explanation-card { padding:0; margin:20px 0; overflow:hidden; }
.explanation-tabs { display:flex; gap:4px; padding:8px 12px 0; border-bottom:1px solid var(--line); }
.explanation-tabs button { min-height:48px; padding:8px 16px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); font-size:14px; }
.explanation-tabs button[aria-selected="true"] { border-bottom-color:var(--accent); color:var(--accent); font-weight:700; }
.explanation-body { padding:24px 28px; }
.key-point { padding:16px; margin-bottom:20px; border-radius:var(--radius-inner); background:var(--bg); }
.key-point h2 { margin:0 0 6px; color:var(--accent); font-size:14px; } .key-point p { margin:0; }
.explanation-item { display:flex; align-items:flex-start; gap:12px; margin:14px 0; font-size:15px; }
.explanation-item>.chip { flex-shrink:0; } .explanation-item>div { min-width:0; } .explanation-item a { display:inline-block; min-height:44px; padding:8px 0; }
.locked-explanation { text-align:center; margin:20px 0; padding:28px; }
.locked-explanation>.ui-icon { width:32px; height:32px; color:var(--muted); }
.locked-explanation h2 { margin:10px 0; } .locked-explanation .account-actions { justify-content:center; }
.question-nav { position:fixed; z-index:25; bottom:16px; left:50%; transform:translateX(-50%); width:min(832px,calc(100% - 48px)); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow-nav); }
.question-nav .btn { min-height:50px; } .question-nav a { background:var(--chip); border-color:var(--chip); }
body[data-screen="q1"] { padding-bottom:94px; }
.jump { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.jump a { display:inline-flex; align-items:center; justify-content:center; gap:2px; min-width:44px; min-height:44px; padding:6px; border:1px solid var(--line); border-radius:var(--radius-button); background:var(--card); color:var(--ink); text-decoration:none; font-size:13px; }
.jump a.ok { background:var(--good-bg); border-color:var(--good); } .jump a.no { background:var(--bad-bg); border-color:var(--bad); }
.jump a.ok::after { content:'✓'; font-size:10px; } .jump a.no::after { content:'×'; font-size:12px; }
.jump a.cur { outline:2px solid var(--accent); outline-offset:1px; } .jump-star { color:var(--star); font-size:11px; }
.empty-state { margin:20px 0; }

/* 8. 2차 답안·채점: 원형 점수, 판정 목록, 내 답안과 고친 문장. */
/* 회장님 11/1 결정: 만점 답안·잠금 안내를 독립 카드로 두고 긴 답안·결과가 화면을 넘지 않게 한다. */
.q2-study-materials { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin-bottom:20px; }
.q2-study-locked { margin-bottom:20px; }
.sample-card>h2,.law-card>h2 { margin-top:0; }
.full-score-sample { border-color:var(--good); }
.sample-card .passage { overflow-wrap:anywhere; }
.sample-card [data-sample-grade] { max-width:100%; white-space:normal; }
.sample-result:empty { display:none; }
.sample-result:not(:empty) { margin-top:16px; }
.sample-result .grade-summary,.sample-result .rubric-item { padding:16px; }
.subject-purchase-group h4 { margin:16px 0 6px; font-size:14px; }
.answer-card .evaluation-note { margin:16px 0 10px; }
.answer-card .quota-box { margin-bottom:16px; }
.q2-heading { margin-bottom:20px; } .q2-heading h1 { font-size:26px; }
.essay-question,.answer-card { margin-bottom:20px; } .answer-card>h2,.essay-question>h2 { margin-top:0; }
.answer-card [data-s] { display:inline-flex; align-items:center; min-height:44px; }
.answer-meta { flex-wrap:wrap; margin:8px 0; } .answer-limit { color:var(--bad); font-weight:700; } textarea[aria-invalid="true"] { border-color:var(--bad); }
.answer-card #go { width:100%; min-height:52px; font-size:16px; } #answer-privacy { margin:12px 0 8px; }
.quota-box { padding:12px 16px; border-radius:var(--radius-inner); background:var(--chip); font-size:14px; }
.quota-line { display:flex; align-items:center; flex-wrap:wrap; gap:10px; } .quota-line>span { flex:1 1 200px; }
.quota-box p { margin:12px 0 0; } .quota-more { display:inline-flex; align-items:center; min-height:44px; font-size:13px; }
.quota-box:has(.purchase-compact) { padding:0; background:transparent; }
.purchase-compact { padding:20px; } .purchase-compact .purchase-heading h2 { font-size:18px; }
.grade-summary { display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding:28px; margin:24px 0 20px; }
.score-ring { display:flex; align-items:center; justify-content:center; flex:0 0 140px; width:140px; height:140px; border-radius:50%; background:conic-gradient(var(--accent) var(--score),var(--chip) 0); }
.score-ring>div { display:flex; align-items:center; justify-content:center; flex-direction:column; width:108px; height:108px; border-radius:50%; background:var(--card); }
.score-ring strong { font-size:36px; line-height:1.2; font-weight:800; } .score-ring span { color:var(--muted); font-size:14px; }
.grade-summary-text { flex:1 1 300px; min-width:0; } .grade-summary-text h2 { margin:0 0 10px; font-size:22px; }
.grade-summary-text .ai-notice { margin:14px 0 6px; } .grade-summary-text>p:last-child { margin:0; }
.verdict-count { display:inline-flex; align-items:center; gap:4px; font-size:13px; }
.rubric { padding:0; overflow:hidden; } .rubric>h2 { margin:0; padding:20px 24px; border-bottom:1px solid var(--line); font-size:18px; }
.rubric-item { padding:20px 24px; border-bottom:1px solid var(--line-soft); } .rubric-item:last-child { border:0; }
.rubric-item h3 { flex:1 1 200px; margin:0; font-size:16px; } .rubric-item .row>strong { color:var(--accent); } .rubric-item>p { margin:8px 0 14px; }
.grade-element { display:flex; align-items:flex-start; gap:12px; padding:12px; margin-top:8px; border-radius:var(--radius-button); background:var(--bg); font-size:14px; }
.grade-element>.chip { flex-shrink:0; } .grade-element>div { min-width:0; } .grade-element p { margin:6px 0 0; }
.fix-card { margin-bottom:12px; padding:20px; } .rewrite { padding:14px; border-radius:var(--radius-button); color:var(--good-ink); background:var(--good-bg); }
.blank { min-height:44px; width:7.5em; max-width:100%; padding:6px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); }
.blank.ok { border-color:var(--good); background:var(--good-bg); } .blank.no { border-color:var(--bad); background:var(--bad-bg); }

/* 9. 계정·관리: 프로필, 티켓 모양 이용권, 결제 목록과 표. */
.account-page h2 { margin-top:0; } .account-page p { margin:8px 0; }
.account-section { margin:28px 0; } .account-section>h2 { margin-bottom:14px; }
.account-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0; } .account-actions>* { min-width:0; max-width:100%; }
#login-panel { scroll-margin-top:100px; }
.dev-login { margin-top:18px; padding-top:12px; border-top:1px solid var(--line); }
.dev-login input { width:200px; min-width:0; min-height:44px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
.signup-gift { padding:12px 16px; border-radius:var(--radius-button); color:var(--good-ink); background:var(--good-bg); font-size:14px; }
.signup-gift a { display:inline-flex; align-items:center; min-height:44px; }
.pass-ticket { border-left:5px solid var(--accent); position:relative; }
.ticket-label { display:flex; align-items:center; gap:8px; padding-bottom:12px; margin-bottom:14px; border-bottom:1px dashed var(--line); color:var(--accent); font-size:13px; font-weight:700; }
.ticket-label .purchase-icon { color:var(--accent); } .pass-ticket h3 { margin:0; } .pass-ticket .progress { margin-top:16px; }
.order-card h3 { margin:0; } .pass-expiry { flex-shrink:0; }
.admin-stats { display:flex; flex-wrap:wrap; gap:8px 20px; padding:16px; border-radius:var(--radius-inner); background:var(--chip); }
.admin-table { table-layout:fixed; } .admin-table caption { padding:16px 0; font-weight:700; text-align:left; }
.admin-table td,.admin-table th { padding:12px 8px; } .admin-table .account-actions { margin:0; }

/* 10. 반응형: 모바일 상단을 간소화하고 두 고정 바가 겹치지 않게 한다. */
@media (min-width:1180px) {
 .exam-overview { grid-template-columns:minmax(230px,.65fr) minmax(0,2fr); gap:20px; }
 .exam-overview .purchase-panel { padding:20px; }
 .purchase-products { grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:12px; }
 .exam-pass-section { padding:16px 12px; } .exam-overview .q2-offer { padding:10px 6px; }
 .exam-overview .q2-offer .product-price { font-size:18px; } .exam-overview .offer-badge { font-size:9px; padding:2px 4px; }
}
@media (max-width:960px) {
 .top-inner { gap:12px; flex-wrap:wrap; } .desktop-nav a { padding:8px; font-size:13px; }
 .exam-overview { grid-template-columns:minmax(0,1fr); }
 .learning-card .study-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
 body { font-size:15px; padding-bottom:calc(var(--mobile-bar) + env(safe-area-inset-bottom)); }
 body[data-screen="q1"] { padding-bottom:calc(var(--mobile-bar) + 82px + env(safe-area-inset-bottom)); }
 .top-inner { min-height:62px; padding:8px 16px; flex-wrap:nowrap; gap:12px; }
 .brand { font-size:17px; gap:8px; } .brand svg { width:28px; height:28px; }
 .desktop-nav,.top-actions { display:none; }
 .mobile-location { display:block; margin-left:auto; text-align:right; font-size:12px; color:var(--muted); }
 .mobile-nav { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:40; min-height:var(--mobile-bar); padding:6px 4px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--card); }
 .mobile-nav a { display:flex; flex:1 1 0; min-width:0; align-items:center; justify-content:center; flex-direction:column; gap:2px; min-height:48px; border-radius:var(--radius-button); color:var(--muted); font-size:11px; text-decoration:none; }
 .mobile-nav a[aria-current] { color:var(--accent); background:var(--chip); font-weight:700; } .mobile-theme { display:inline-flex; }
 main { padding:16px 16px 32px; } .crumb { margin-top:12px; padding:0 16px; font-size:12px; }
 .foot { padding:20px 16px; margin-bottom:0; } .storage-status,.account-notice { margin:12px 16px 0; }
 h1 { font-size:26px; } h2 { font-size:19px; }
 .home-hero { padding:10px 0 24px; } .home-hero h1 { font-size:28px; } .home-intro>p:not(.home-statistics) { font-size:15px; }
 .signup-banner { padding:20px; gap:16px; } .signup-banner h2 { font-size:17px; } .signup-banner .btn { width:100%; }
 /* 모바일에서도 분야 아래의 시험 카드는 기존 한 열 크기를 유지한다. */
 .grid { grid-template-columns:minmax(0,1fr); } .exam-card h4 { font-size:21px; }
 .exam-heading { gap:8px; margin-bottom:18px; } .exam-overview { gap:16px; }
 .card,.purchase-panel { padding:20px; } .learning-card .study-stats { gap:14px; }
 .question-library { padding:16px; } .subject-tabs { gap:6px; } .subject-tabs .btn { padding:8px 12px; font-size:13px; }
 .years { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .year-card { padding:12px; }
 .year-title b { font-size:18px; } .year-actions .btn { font-size:11px; } .year-actions .year-start { font-size:13px; }
 .subject>.study-stats { gap:12px; } .study-stats b { font-size:18px; }
 .purchase-panel { padding:18px 14px; } .exam-pass-section { padding:16px; }
 .q2-buy-options { grid-template-columns:minmax(0,1fr); gap:12px; } .q2-offer { padding:16px; } .q2-offer .product-price { font-size:28px; }
 .offer-badge-slot { min-height:0; } .offer-badge-slot:empty { display:none; } .offer-badge { font-size:11px; }
 .buy-product .purchase-benefits { grid-template-columns:minmax(0,1fr); } .purchase-signup .btn { width:100%; }
 .secondary-exam .list { grid-template-columns:minmax(0,1fr); } .secondary-banner { padding:20px; }
 /* 휴대폰에서는 과목 카드를 한 줄에 하나씩, 2차 물음은 버튼 단위로 줄바꿈한다. */
 .year-subjects { grid-template-columns:minmax(0,1fr); }
 .year-group>summary { padding:12px; gap:8px; }
 .year-group>summary>.study-stats { grid-column:1 / -1; gap:10px; }
 .year-group-body { padding:12px; }
 .q2-problem { padding:12px; gap:10px; }
 .q2-problem-title,.q2-question-links { flex-basis:100%; }
 .q2-question-links .btn { padding:8px 10px; font-size:13px; }
 .question-heading { gap:10px; } .question-heading h1 { font-size:18px; } .question-heading p { font-size:11px; }
 .question-card { padding:18px 14px; } .question-card .stem { font-size:17px; }
 .study-filters .btn { padding:8px 10px; font-size:11px; }
 .opt { gap:10px; padding:12px; font-size:14px; flex-wrap:wrap; } .option-number { flex-basis:26px; height:26px; font-size:13px; }
 .option-text { flex-basis:calc(100% - 40px); } .option-result { margin-left:36px; }
 .explanation-card { padding:0; } .explanation-body { padding:18px 16px; } .explanation-item { flex-wrap:wrap; gap:8px; font-size:14px; }
 .explanation-tabs button { padding:8px 12px; font-size:13px; }
 .question-nav { bottom:calc(var(--mobile-bar) + env(safe-area-inset-bottom)); width:100%; padding:10px 16px; gap:8px; border-radius:0; border-left:0; border-right:0; }
 .question-nav .btn { min-height:48px; padding:8px; }
 .q2-heading h1 { font-size:22px; } .grade-summary { padding:24px 20px; gap:20px; }
 .grade-summary-text { flex-basis:100%; } .score-ring { margin:0 auto; }
 .rubric { padding:0; } .rubric>h2,.rubric-item { padding:18px 16px; } .grade-element { flex-wrap:wrap; gap:8px; }
 .checkout { padding:16px 8px; } .dev-login input { flex:1 1 140px; } .account-actions .btn { flex-grow:1; }
 .admin-table,.admin-table tbody,.admin-table caption { display:block; }
 .admin-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .admin-table tr { display:block; padding:12px; margin-bottom:12px; border:1px solid var(--line); border-radius:var(--radius-inner); background:var(--card); }
 .admin-table td { display:block; padding:8px 0; border:0; }
 .admin-table td::before { content:attr(data-label); display:block; color:var(--muted); font-size:12px; }
}
@media (max-width:360px) { .years,.learning-card .study-stats { grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }

/* 시안 배치: 시험 선택·이어 풀기·실제 기록·하단 이용권을 연결한다(11/7). */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.exam-switch { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:0; min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius-button); background:var(--bg); color:var(--ink); font-size:14px; font-weight:700; text-decoration:none; }
.exam-switch>span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exam-switch>span:last-child { flex-shrink:0; color:var(--muted); }
.top-inner { gap:16px; min-height:64px; }
.desktop-nav { min-width:0; }
.desktop-nav a { white-space:nowrap; }
.exam-picker-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:16px; }
.exam-picker-heading h2 { margin:0; font-size:22px; }
.exam-picker-heading .exam-search { flex:0 1 360px; min-width:0; margin:0; }
.exam-group-chips { flex-wrap:wrap; overflow:visible; }
.exam-card { align-items:stretch; padding:18px 20px; }
.exam-card h4 { font-size:19px; }
.exam-card>p { font-size:13px; }
.exam-overview { grid-template-columns:minmax(0,2fr) minmax(280px,1fr); align-items:stretch; gap:24px; }
.exam-entitlements { margin:-8px 0 24px; }
.exam-entitlements .pass-status { display:inline-block; margin:0 8px 8px 0; }
.exam-entitlements .pass-status-name { display:inline; margin-left:8px; }
.continue-card { display:flex; flex-direction:column; gap:16px; min-width:0; padding:28px; border-radius:var(--radius); background:var(--banner); color:var(--banner-ink); }
.continue-card h2 { margin:0; font-size:15px; color:var(--banner-muted); }
.continue-card h3 { margin:0; font-size:26px; font-weight:800; line-height:1.5; }
.continue-card p { margin:-6px 0 0; color:var(--banner-muted); font-size:15px; }
.continue-card .progress { height:5px; background:#FFFFFF30; }
.continue-card .progress>span { background:#FFF; }
.continue-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; }
.continue-actions .btn { min-height:52px; padding:12px 22px; border-color:#FFF; background:#FFF; color:#1A3A6B; font-size:15px; }
.continue-actions .btn.ghost { border-color:#FFFFFF90; background:transparent; color:#FFF; }
.continue-card :is(a,button):focus-visible { outline-color:#FFF; }
.learning-card .study-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:16px; }
.learning-card .study-stats span { flex-direction:column; gap:0; }
.learning-card .study-stats .progress { height:6px; }
.learning-card .study-stats>div:first-child b { color:var(--accent); }
.learning-card .review-shortcuts { margin:16px 0; }
.learning-card>p { font-size:12px; }
.review-shortcuts:empty { margin:0; }
.review-shortcuts button:only-child { grid-column:1 / -1; }
.review-shortcuts button[data-review="wrong"] { background:var(--bad-bg); color:var(--bad); }
.review-shortcuts button[data-review="starred"] { background:var(--warn-bg); color:var(--warn); }
.set-tile { min-width:0; }
a.year-card { display:flex; flex-direction:column; align-items:stretch; gap:8px; height:100%; padding:14px 16px; }
.set-tile:has(.year-actions)>.year-card { height:auto; }
.year-card .year-title { min-height:0; }
.year-card .year-title b { font-size:18px; }
.year-card>.chip { align-self:flex-start; margin:0; font-size:11px; }
.year-card .progress { height:6px; margin-top:4px; }
.year-card-footer { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.year-card-footer strong { color:var(--accent); font-size:14px; }
.set-tile .year-actions { gap:0; padding:4px 8px; }
.set-tile .year-actions a { min-height:44px; font-size:12px; }
.exam-purchases { margin-top:28px; }
.exam-purchases .purchase-products { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:16px; }
.exam-purchases .q2-offer { padding:12px 8px; }
.exam-purchases .q2-offer .product-price { font-size:21px; }
.exam-purchases .offer-badge { font-size:10px; }
.review-library,#review-library { scroll-margin-top:92px; }
.question-progress { padding:4px 0 12px; }
.buy-product .purchase-benefits { display:flex; flex-direction:column; }
.buy-product .purchase-benefits li { min-height:44px; }
.purchase-benefits li.separate-benefit::before { content:'–'; color:var(--muted); }
@media (max-width:960px) {
 .top-inner { gap:10px; }
 .exam-switch { max-width:240px; }
 .exam-overview { grid-template-columns:minmax(0,1fr); gap:16px; }
 .exam-purchases .purchase-products { grid-template-columns:minmax(0,1fr); }
 .learning-card .study-stats span { flex-direction:row; }
}
@media (min-width:601px) and (max-width:960px) {
 .desktop-nav { flex-basis:100%; order:3; }
 .desktop-nav a { flex:1; justify-content:center; }
 #q1-section,#q2-section,#review-shortcuts,#exam-purchases,#home-exams,#out,#review-library { scroll-margin-top:140px; }
}
@media (max-width:600px) {
 .top-inner { flex-wrap:nowrap; }
 .exam-switch { flex:0 1 auto; max-width:calc(100% - 130px); margin-left:auto; padding:8px 12px; font-size:13px; }
 .exam-picker-heading { align-items:stretch; gap:12px; }
 .exam-picker-heading .exam-search { flex-basis:100%; }
 .exam-picker-heading h2 { font-size:21px; }
 .exam-group-chips { flex-wrap:nowrap; overflow-x:auto; }
 .continue-card { padding:22px 20px; gap:14px; }
 .continue-card h3 { font-size:22px; }
 .continue-actions .btn { flex:1 1 180px; padding:12px 16px; }
 .exam-entitlements { margin-bottom:16px; }
 .exam-entitlements .pass-status { display:block; margin-right:0; }
 .exam-purchases .q2-buy-options { grid-template-columns:minmax(0,1fr); }
 .exam-purchases .q2-offer .product-price { font-size:28px; }
 .mobile-nav { height:calc(var(--mobile-bar) + env(safe-area-inset-bottom)); min-height:0; }
 .question-nav { bottom:calc(var(--mobile-bar) + env(safe-area-inset-bottom)); }
 body[data-screen="q1"] { padding-bottom:calc(var(--mobile-bar) + 90px + env(safe-area-inset-bottom)); }
 .question-card { scroll-margin-bottom:calc(var(--mobile-bar) + 90px + env(safe-area-inset-bottom)); }
}

/* 11/7 시험지 느낌: 문제의 명조와 조작부의 고딕을 나눈다. */
.brand { font:700 24px/1.5 var(--font-serif); letter-spacing:-.05em; }
.brand-why { color:var(--accent); }
.exam-heading h1 { font-family:var(--font-serif); font-weight:700; }
.stem,.option-text,.passage,.ref { font-family:var(--font-serif); line-height:1.8; }
.opt { line-height:1.8; box-shadow:none; }
.option-number,.option-result { font-family:var(--font); }
.option-number { background:transparent; }
.exam-group-chip,.exam-switch { border-radius:var(--radius-button); }
.learning-card>.learning-empty { margin:0; color:var(--secondary); font-size:15px; line-height:1.8; }
/* 확인된 숫자만 세로선으로 나누고, 작은 화면에서는 줄을 접는다. */
.home-intro { min-width:0; }
.home-statistics { display:flex; flex-wrap:wrap; gap:8px 0; margin:24px 0 0; color:var(--secondary); font-size:13px; }
.home-statistics>span { display:inline-flex; align-items:baseline; gap:4px; padding-right:12px; margin-right:12px; border-right:1px solid var(--line); }
.home-statistics>span:last-child { margin-right:0; padding-right:0; border-right:0; }
.home-statistics b { color:var(--ink); font-variant-numeric:tabular-nums; }
.home-preview { min-width:0; padding:24px; border:1px solid var(--line); border-top:2px solid var(--accent); border-radius:var(--radius-inner); background:var(--card); }
.preview-label { margin:0 0 8px; color:var(--muted); font-size:12px; }
.home-preview h2 { margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid var(--line); color:var(--secondary); font:500 13px/1.7 var(--font); }
.preview-stem { margin-bottom:16px; font:700 18px/1.8 var(--font-serif); }
.preview-options { display:flex; flex-direction:column; gap:7px; padding:0; margin:0 0 20px; list-style:none; font:400 15px/1.8 var(--font-serif); }
.preview-options li { display:flex; align-items:baseline; gap:8px; }
.preview-options li>span:nth-child(2) { flex:1; min-width:0; }
.preview-options li>span:first-child { flex:0 0 auto; }
.preview-correct { color:var(--good-ink); font-weight:700; }
.preview-correct small { flex:0 0 auto; padding:1px 6px; border:1px solid var(--good); border-radius:var(--radius-tag); font:700 11px/1.7 var(--font); }
.preview-explanation { padding-top:16px; border-top:1px solid var(--line); font:400 14px/1.8 var(--font-serif); }
.preview-explanation p { margin:0 0 12px; }
.preview-explanation .preview-reference { margin-bottom:0; color:var(--secondary); font-size:13px; }
/* 주 링크와 복습 링크를 나눠 링크 중첩 없이 기존 기능을 유지한다. */
.past-paper-list { min-width:0; border-top:1px solid var(--line); }
.past-paper-entry { min-width:0; border-bottom:1px solid var(--line); }
.past-paper-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,.6fr) minmax(0,auto); align-items:center; gap:12px 20px; width:100%; min-height:64px; padding:12px 8px; color:var(--ink); text-decoration:none; }
.past-paper-row:hover { background:var(--bg); }
.past-paper-title { min-width:0; }
.past-paper-title b { font-size:15px; }
.past-paper-title>span { display:block; font-size:12px; }
.past-paper-progress { display:flex; align-items:center; gap:12px; min-width:0; }
.past-paper-progress>.progress { flex:1; min-width:32px; }
.past-paper-progress>span { flex-shrink:0; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.past-paper-state { display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:0; }
.past-paper-state>strong { color:var(--accent); font-size:14px; }
.past-paper-state .chip { max-width:100%; padding:2px 6px; font-size:11px; }
.past-paper-state .ui-icon { width:13px; height:13px; flex-basis:13px; }
.past-paper-reviews { display:flex; flex-wrap:wrap; gap:0 20px; padding:0 8px; font-size:12px; }
:is(a,button) { transition:color .15s,background-color .15s,border-color .15s; }
@media (max-width:960px) {
 .home-hero { grid-template-columns:minmax(0,1fr); gap:28px; }
 .home-preview { max-width:680px; }
}
@media (max-width:600px) {
 .brand { font-size:22px; }
 .home-hero { padding:10px 0 24px; gap:24px; }
 .home-hero h1 { font-size:28px; line-height:1.5; }
 .home-preview { padding:20px 16px; }
 .home-statistics { margin-top:20px; font-size:12px; }
 .home-statistics>span { padding-right:10px; margin-right:10px; }
 .preview-stem { font-size:17px; }
 .past-paper-row { grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:10px 12px; min-height:80px; padding:12px 4px; }
 .past-paper-title b { font-size:14px; }
 .past-paper-state { grid-column:2; grid-row:1; max-width:140px; }
 .past-paper-state .chip { font-size:10px; }
 .past-paper-progress { grid-column:1 / -1; grid-row:2; }
 .past-paper-reviews { padding:0 4px; }
 .opt { font-size:15px; }
}

/* 11. 약관·환불·계약서: 기존 안내와 인쇄 구조를 공통 토큰으로 유지한다. */
/* 약관·환불·탈퇴 */
.policy-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 8px 0 12px; }
.policy-links a { display: inline-flex; align-items: center; min-height: 44px; }
.policy-links a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.foot .policy-links { font-size: 13px; }
.business-info { overflow-wrap: anywhere; }
.business-info > span { display: inline; }
.business-info > span:not(:last-of-type)::after { content: ' · '; white-space: pre-wrap; }
.business-info .btn { min-height: 44px; padding: 5px 8px; font-size: 12px; }
.policy-page { overflow-wrap: anywhere; }
.policy-page .account-actions .btn { min-height: 44px; }
.policy-body { line-height: 1.85; }
.policy-body > :first-child { margin-top: 0; }
.policy-body > :last-child { margin-bottom: 0; }
.policy-body h2, .policy-body h3, .policy-body h4 { line-height: 1.5; }
.policy-body ul, .policy-body ol { padding-left: 24px; }
.policy-body li + li { margin-top: 6px; }
/* 11/8 네이버 검수 준비: 로고·문구를 가운데 정렬하고 다크 모드·호버에서도 각 회사 색을 유지한다. */
.login-buttons .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; flex: 1 1 200px; font-weight: 600; }
.login-buttons .login-logo { width: 18px; height: 18px; flex: 0 0 18px; }
.login-buttons a.btn.login-kakao { background: #FEE500; color: rgba(0,0,0,.85); border-color: #FEE500; }
/* 흰 글자는 대비가 낮지만 네이버 검수를 위해 공식 버튼 가이드의 흰 글자·흰 N 로고를 따른다. */
.login-buttons a.btn.login-naver { background: #03C75A; color: #fff; border-color: #03C75A; }
.login-buttons a.btn.login-google { background: #fff; color: #1F1F1F; border-color: #747775; }
.login-buttons a.btn.login-apple { background: #000; color: #fff; border-color: #000; }
.purchase-consent { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 12px; margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.purchase-consent input { flex: 0 0 20px; width: 20px; height: 20px; margin: 4px 0 0; accent-color: var(--accent); cursor: pointer; }
.purchase-consent span { min-width: 0; overflow-wrap: anywhere; }
.account-delete { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); }
button.btn.ghost.danger { color: var(--bad); border-color: var(--bad); }
.order-card .chip { white-space: normal; overflow-wrap: anywhere; }
.refund-request { border: 1px solid var(--warn); }
.refund-request p { margin: 6px 0 0; }
.purchase-notes { padding: 12px 12px 12px 30px; margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; overflow-wrap: anywhere; }
.purchase-notes li + li { margin-top: 8px; }
.ai-notice { margin: 0 0 10px; overflow-wrap: anywhere; }
.order-contract { margin-top: 12px; border-top: 1px solid var(--line); }
.order-contract > summary { min-height: 44px; padding: 10px 0; }
.order-contract > summary:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.contract-content { padding-top: 10px; overflow-wrap: anywhere; }
.contract-content h4 { margin: 18px 0 6px; font-size: 14px; }
.contract-fields { margin: 0; font-size: 13px; }
.contract-fields > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.contract-fields dt { color: var(--muted); }
.contract-fields dd { margin: 0; min-width: 0; white-space: pre-wrap; }
.contract-refund { padding-left: 20px; }
.contract-refund li + li { margin-top: 6px; }
.admin-extend { margin-bottom: 20px; }
.admin-extend label { display: block; min-width: 0; font-size: 14px; }
.admin-extend input:not([type="checkbox"]), .admin-extend select { display: block; width: 100%; min-width: 0; min-height: 44px; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; }
.extend-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.admin-extend .extend-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin-top: 12px; padding: 8px 0; cursor: pointer; }
.extend-check input { flex: 0 0 20px; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); }
#contract-print { display: none; }
@media (max-width: 480px) {
  .foot .policy-links { gap: 0 5px; }
  .policy-body { padding: 14px 12px; }
  .business-info > span { display: block; }
  .business-info > span::after { content: none !important; }
  .login-buttons .btn { flex-basis: 100%; }
  .contract-fields > div, .extend-fields { grid-template-columns: minmax(0, 1fr); }
}

/* 인쇄·PDF 저장에는 선택한 주문의 계약 내용만 담는다. */
@media print {
  body.printing-contract { --ink: #000; --muted: #444; --line: #ccc; --accent: #000; --card: #fff; background: #fff; color: #000; font-size: 11pt; }
  body.printing-contract > :not(#contract-print) { display: none !important; }
  body.printing-contract #contract-print { display: block; }
  #contract-print .contract-content { padding: 0; }
  #contract-print h3 { margin: 0 0 12pt; font-size: 16pt; }
  #contract-print h4 { break-after: avoid; }
  #contract-print .contract-fields > div { grid-template-columns: 100pt minmax(0, 1fr); break-inside: avoid; }
  #contract-print .contract-fields, #contract-print .small { font-size: 10pt; }
  #contract-print .policy-links { display: block; }
  #contract-print .policy-links a { display: block; min-height: 0; margin: 4pt 0; }
  #contract-print .policy-links a::after { content: ' (' attr(href) ')'; font-size: 9pt; overflow-wrap: anywhere; }
}