/* =========================================================================
   IQ Test Online — Academic (2026-09 개편)
   심리검사 기관/학술지 인쇄물의 톤. 그라데이션·둥근 알약 버튼·유리 카드를 전부 걷어내고
   흰 종이 + 잉크 + 헤어라인 규칙선 + 세리프 제목으로 통일한다.

   style.css(Porcelain & Navy) 위에 얹는 덮개다. 레이아웃·기능은 style.css를 그대로 쓰고
   색/표면/타이포/모양만 바꾼다. base.html에서 이 링크 한 줄을 theme-classic.css로
   되돌리면 예전(보라 그라데이션) 화면으로 돌아간다.
   ========================================================================= */

:root {
    /* 종이: 페이지 바닥(가장 어두움) → 카드 표면(가장 밝음) */
    --ink-950: #eceef1;
    --ink-900: #ffffff;
    --ink-850: #ffffff;
    --ink-800: #f6f7f9;
    --ink-700: #eef0f3;
    --ink-600: #e2e5ea;

    /* 액센트: 옥스퍼드 블루 램프 (100이 가장 진함). 이름은 전역 참조 때문에 유지 */
    --gold-100: #0e2038;
    --gold-200: #14304f;
    --gold-300: #1c3f66;
    --gold-400: #24527f;
    --gold-500: #2d6094;
    --gold-600: #7d9bba;

    /* 요소는 단색. 그라데이션은 쓰지 않는다 */
    --gold-grad: #1c3f66;
    --gold-grad-hover: #0e2038;
    --gold-grad-soft: rgba(28, 63, 102, .06);

    --text: #12171f;
    --text-2: #3c4653;
    --muted: #6b7684;

    --line: rgba(18, 23, 31, .12);
    --line-2: rgba(18, 23, 31, .22);
    --line-gold: rgba(28, 63, 102, .28);
    --surface: #ffffff;
    --surface-2: #fbfcfd;

    --ok: #1b6b46;
    --warn: #8a5a08;
    --info: #1c3f66;
    --bad: #99231f;

    /* 인쇄물처럼. 떠 있는 그림자 대신 선으로 층을 만든다 */
    --shadow-1: none;
    --shadow-2: 0 1px 2px rgba(18, 23, 31, .06);
    --shadow-gold: none;

    --r-sm: 2px;
    --r-md: 3px;
    --r-lg: 3px;
    --r-pill: 3px;

    /* 세리프: 제목·수치. 본문은 산세리프로 둔다(다국어 가독성) */
    --serif: 'Iowan Old Style', 'Source Serif 4', 'Charter', Georgia,
             'Times New Roman', 'Apple SD Gothic Neo', 'Noto Serif KR', serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

    /* scorecard.js / main.js 가 읽는 차트 색. #rrggbb 형식 유지 */
    --chart-accent: #1c3f66;
    --chart-accent-deep: #0e2038;
    --chart-accent-fill: rgba(28, 63, 102, 0.16);
    --chart-grad-1: #1c3f66;
    --chart-grad-2: #24527f;
    --chart-grad-3: #4d7aa5;
    --chart-pct-top: #0e2038;
    --chart-pct-bottom: #dfe4ea;
}

/* -------------------------------------------------------------------------
   바탕: 방사형 그라데이션 제거, 평평한 종이
   ------------------------------------------------------------------------- */
html {
    background: var(--ink-950);
}

body {
    font-family: var(--sans);
    background: var(--ink-950);
    background-color: var(--ink-950);
    background-attachment: scroll;
    color: var(--text);
    line-height: 1.6;
    font-size: 16px;
}

body::before { display: none; }

/* 본문 기둥. 학술 문서처럼 한 폭으로 흐른다 */
main.container {
    max-width: 980px;
    margin-top: 0 !important;
    padding-top: 2rem;
    padding-bottom: 1rem;
}

/* -------------------------------------------------------------------------
   타이포그래피
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    text-shadow: none;
}

.display-1, .display-3 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.015em;
    -webkit-text-fill-color: currentColor;
    background: none;
}

.lead { font-size: 1rem; color: var(--text-2); }

a { text-underline-offset: 2px; }

/* 그라데이션 글자 전부 해제 */
.gold-text,
#iq-score,
.stats-number-large,
.stats-number-large.highlight-iq,
.result-item .score,
.legend-iq {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--gold-200) !important;
    font-family: var(--serif);
    font-variant-numeric: tabular-nums;
    text-shadow: none !important;
    filter: none !important;
}

/* 카드 밖 제목도 검정 잉크로 (예전 테마는 흰 글씨였다) */
.section-title,
.guidelines-title,
.recent-results-title,
.home-guides-title,
.percentile-title {
    color: var(--text) !important;
    text-shadow: none !important;
}

/* 학술 문서용 공통 조각 -------------------------------------------------- */
.eyebrow {
    font-family: var(--sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2rem 0;
}

/* -------------------------------------------------------------------------
   헤더
   ------------------------------------------------------------------------- */
.navbar {
    background: #ffffff !important;
    backdrop-filter: none;
    border-bottom: 1px solid var(--line-2);
    box-shadow: none;
    padding: .5rem 0;
}

.navbar .container { max-width: 980px; }

.navbar-brand { display: flex; align-items: center; gap: .625rem; }

/* 로고 이미지 안에 이미 워드마크가 들어 있어(그라데이션 물음표 + IQ TEST ONLINE)
   학술 톤과 맞지 않고 아래 텍스트 워드마크와도 겹친다. 글자만 남긴다. */
.navbar-brand .logo-img { display: none; }

.navbar-brand .brand-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-wordmark .bw-main {
    font-family: var(--serif);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text);
    text-transform: none;
}

.brand-wordmark .bw-sub {
    font-family: var(--sans);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.navbar-nav .nav-link {
    color: var(--text-2) !important;
    border-radius: 0;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .35rem .7rem !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--gold-200) !important;
    background: transparent;
    text-decoration: underline;
}

.navbar-nav .dropdown-toggle,
.navbar-nav .dropdown-toggle:hover,
.navbar-nav .dropdown-toggle:focus {
    background: transparent !important;
    border: 1px solid var(--line-2) !important;
    border-radius: 2px !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
}

.navbar-nav .dropdown-menu {
    border-radius: 2px;
    border: 1px solid var(--line-2);
    box-shadow: 0 2px 6px rgba(18, 23, 31, .10);
}

.navbar-nav .dropdown-item { border-radius: 0; font-size: .875rem; }

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:hover {
    background: var(--ink-700);
    color: var(--gold-200) !important;
}

.navbar-nav .dropdown-item.active,
.navbar-nav .dropdown-menu .dropdown-item.active {
    background: var(--ink-700);
    color: var(--gold-100) !important;
    font-weight: 600;
}

.navbar .btn-outline-light {
    border-color: var(--line-2);
    color: var(--text-2);
    border-radius: 2px;
}

.navbar .btn-outline-light:hover {
    background: var(--ink-700);
    color: var(--gold-200);
    border-color: var(--line-2);
}

.navbar-toggler {
    border: 1px solid var(--line-2);
    border-radius: 2px;
}

.navbar-toggler-icon {
    filter: invert(1) grayscale(100%) brightness(.35);
}

/* -------------------------------------------------------------------------
   버튼: 네모, 대문자 레터스페이싱, 그림자 없음
   ------------------------------------------------------------------------- */
.btn {
    border-radius: 2px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: none !important;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.btn:hover { transform: none !important; }

.btn-lg {
    font-size: .875rem;
    padding: .8rem 1.6rem;
}

.btn-primary,
.btn-primary:active {
    background: var(--gold-200);
    border: 1px solid var(--gold-200);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--gold-100);
    border-color: var(--gold-100);
    color: #fff;
}

.btn-success {
    background: var(--ok);
    border: 1px solid var(--ok);
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus {
    background: #145436;
    border-color: #145436;
}

.btn-secondary {
    background: #ffffff;
    border: 1px solid var(--line-2);
    color: var(--text-2) !important;
}

.btn-secondary:hover {
    background: var(--ink-700);
    color: var(--text) !important;
}

.btn.language-btn {
    border-radius: 2px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.btn.language-btn:hover,
.btn.language-btn.active,
.language-btn:hover,
.language-btn.active {
    background: var(--gold-200);
    border-color: var(--gold-200);
    color: #fff;
}

.language-btn:hover i,
.language-btn.active i { color: #fff; }

/* -------------------------------------------------------------------------
   표면: 카드가 아니라 "문서 블록"
   ------------------------------------------------------------------------- */
.hero-section,
.feature-card,
.assessment-card,
.result-card,
.metric-card,
.recent-results,
.iq-percentile-card,
.stats-card,
#question-container,
#loading,
#submit-container {
    background: #ffffff !important;
    border: 1px solid var(--line-2) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.hero-section::before,
.hero-section::after,
.feature-card::before {
    display: none !important;
}

/* 진행 막대의 바탕선. 이게 없으면 채워진 2px 조각만 덩그러니 떠 보인다 */
#question-container::before {
    height: 2px;
    border-radius: 0;
    background: var(--ink-600);
}

.feature-card:hover,
.metric-card:hover,
.result-item:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line-2);
}

.feature-icon {
    color: var(--gold-200);
    background: var(--ink-700);
    border-color: var(--line);
    border-radius: 2px;
}

/* 통계 배너: 흰 글씨/유리 효과 해제 */
.stats-card .stats-number-large,
.stats-card .stats-label,
.stats-card .stats-question span {
    color: var(--text);
    text-shadow: none;
}

.stats-card .stats-number-large { color: var(--gold-200) !important; }
.stats-card .stats-question { border-top-color: var(--line); }

/* 안내 목록: 그라데이션 위 흰 글씨였던 것을 문서 톤으로 */
.guideline-list .guideline-item {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--text-2);
    font-weight: 400;
}

.guideline-list .guideline-item:hover {
    background: var(--ink-800);
    border-color: var(--line-2);
}

.guideline-list .guideline-item i {
    color: var(--gold-300) !important;
    filter: none;
}

.home-fold { border-color: var(--line); }
.home-fold-summary { color: var(--text-2); }
.home-fold-summary:hover { color: var(--gold-200); }

/* 최근 결과 */
.result-item {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 2px;
}

.result-item .score { color: var(--gold-200) !important; }

/* 분포 카드: 절 제목과 겹치는 내부 제목·캡션은 숨기고, 범례는 표처럼 눕힌다 */
.doc-section .iq-percentile-card { border: 0 !important; padding: 0; }
.doc-section .percentile-title,
.doc-section .percentile-stat-caption { display: none; }

.percentile-chart-wrap {
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: #ffffff;
    padding: .75rem;
}

.percentile-legend {
    margin-top: 1rem;
    border-top: 1px solid var(--line-2);
}

.percentile-legend-item {
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    padding: .5rem .25rem;
    font-size: .875rem;
}

.percentile-legend-item:hover { background: var(--ink-800); }

.legend-swatch { border-radius: 1px; }
.legend-iq { font-size: .875rem; }
.legend-label { color: var(--text-2); }
.legend-pct { color: var(--muted); font-family: var(--mono); font-size: .75rem; }

/* -------------------------------------------------------------------------
   응시 화면
   ------------------------------------------------------------------------- */
.card-header {
    background: #ffffff;
    border-bottom: 1px solid var(--line-2);
}

.card-header h3 {
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--text);
}

.card-header h3 i,
.card-header i { color: var(--muted); }

#timer,
#progress {
    border-radius: 2px !important;
    font-family: var(--mono) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600 !important;
    letter-spacing: .04em;
    box-shadow: none !important;
    border: 1px solid var(--line-2) !important;
}

#timer {
    background: #ffffff !important;
    color: var(--text) !important;
}

#timer.text-danger,
#timer.is-warning {
    color: var(--bad) !important;
    border-color: var(--bad) !important;
}

#progress {
    background: #ffffff !important;
    color: var(--text-2) !important;
}

/* 진행 막대는 그 자체가 채움(폭이 %로 늘어난다). 트랙은 카드 상단 선으로 대신한다 */
#progress-bar {
    border-radius: 0;
    height: 2px;
    background: var(--gold-200);
    box-shadow: none;
}

/* 문제 도판: 회색 판 대신 흰 종이 + 헤어라인 */
#question-image-container {
    background: #ffffff;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    box-shadow: none;
}

.question-image,
.option-image { border-radius: 2px; }

.option-btn.btn-outline-primary {
    border-radius: 2px;
    border: 1px solid var(--line-2);
    background: #ffffff;
    color: var(--text-2);
}

.option-btn::before { display: none !important; }

.option-btn.btn-outline-primary:hover {
    border-color: var(--gold-300);
    background: var(--ink-800);
}

.option-btn.btn-primary {
    background: #ffffff;
    border: 2px solid var(--gold-200);
    color: var(--text);
    box-shadow: none;
}

.spinner-border { border-width: 2px; }

/* 모달 */
.modal-content,
.iq-modal-panel {
    background: #ffffff;
    border-radius: 3px;
    border: 1px solid var(--line-2);
}

.iq-modal-panel::before { display: none; }

.iq-modal-icon {
    border-radius: 2px;
    background: var(--ink-700);
    color: var(--gold-200);
    border: 1px solid var(--line);
}

.iq-modal-title { font-family: var(--serif); }

.iq-modal-btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .06em; }
.iq-modal-btn-primary { background: var(--gold-200); border-color: var(--gold-200); }
.iq-modal-btn-primary:hover { background: var(--gold-100); }

.alert { border-radius: 2px; }

/* -------------------------------------------------------------------------
   푸터
   ------------------------------------------------------------------------- */
footer {
    background: #ffffff;
    backdrop-filter: none;
    border-top: 1px solid var(--line-2);
    margin-top: 3rem;
    padding: 1.75rem 0;
}

footer p,
.footer-links a {
    color: var(--muted);
    font-size: .8125rem;
}

.footer-links a:hover,
.footer-links a:focus { color: var(--gold-200); }

.home-guides-all,
.home-guides-all:hover { color: var(--gold-200); }

/* =========================================================================
   홈 = 검사지 1면
   "문항을 먼저, 설명은 그 아래" 구조를 위한 새 조각들.
   ========================================================================= */
.doc {
    background: #ffffff;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    padding: 0;
}

/* 표제부: 한 줄 머리글 + 제목 + 제원. 여기까지가 문항 위에 놓이는 전부다 */
.doc-masthead {
    padding: 1.25rem 1.75rem 1rem;
    border-bottom: 1px solid var(--line-2);
}

.doc-masthead .eyebrow { display: block; margin-bottom: .5rem; }

.doc-title {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 .5rem;
    color: var(--text);
}

.doc-meta {
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .75rem;
}

.doc-meta > span { display: inline-flex; align-items: center; gap: .4rem; }
.doc-meta > span + span::before { content: '·'; margin-right: .75rem; color: var(--line-2); }
.doc-meta .num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2); }

/* 문항 블록 ------------------------------------------------------------- */
.item {
    padding: 1.5rem 1.75rem 1.75rem;
}

.item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .625rem;
    margin-bottom: 1.125rem;
    border-bottom: 1px solid var(--line);
}

.item-no {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text);
}

.item-domain {
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--muted);
    text-align: right;
}

.item-stem {
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--text);
    margin: 0 0 1.125rem;
}

.item-body {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 1.75rem;
    align-items: start;
}

.item-figure {
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: #ffffff;
    padding: .875rem;
}

.item-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.item-figure figcaption,
.item-caption {
    margin-top: .625rem;
    padding-top: .5rem;
    border-top: 1px solid var(--line);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
}

.item-answer .eyebrow { display: block; margin-bottom: .75rem; }

.item-options {
    display: grid;
    /* 답안은 2열 격자. 답안지처럼 보이고, 보기 그림도 그만큼 커진다 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.item-option {
    display: block;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: #ffffff;
    padding: .5rem .5rem .375rem;
    text-decoration: none;
    transition: border-color .12s ease, background-color .12s ease;
}

.item-option:hover,
.item-option:focus-visible {
    border-color: var(--gold-200);
    background: var(--ink-800);
    outline: none;
}

.item-option:hover .item-option-key,
.item-option:focus-visible .item-option-key {
    color: var(--gold-200);
    border-color: var(--gold-300);
}

.item-option img {
    display: block;
    width: 100%;
    /* 보기 그림 원본 비율이 제각각(Q1_A3 400x346 등)이라 정사각 칸에 맞춘다 */
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.item-option-key {
    display: block;
    margin-top: .375rem;
    padding-top: .3rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--muted);
    text-align: center;
}

.item-note {
    margin: 1.25rem 0 0;
    padding-top: .875rem;
    border-top: 1px solid var(--line);
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--text-2);
}

.item-note .item-note-mark {
    font-family: var(--serif);
    font-style: italic;
    color: var(--muted);
    margin-right: .35rem;
}

/* 이어보기 배너 / 대체 진입 */
.doc-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.75rem;
    border-bottom: 1px solid var(--line-2);
    background: var(--ink-800);
    text-decoration: none;
    color: var(--text);
    font-size: .875rem;
}

.doc-notice:hover { background: var(--ink-700); color: var(--gold-100); }

.doc-notice .eyebrow { color: var(--gold-200); }

/* 절(節) 제목: 번호를 붙여 학술 문서처럼 */
.doc-section { margin-top: 2.5rem; }

.doc-section > .doc-section-head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding-bottom: .5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--line-2);
}

.doc-section-no {
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--muted);
    white-space: nowrap;
}

.doc-section-title {
    font-family: var(--serif);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

.doc-section-note {
    margin-left: auto;
    font-size: .75rem;
    color: var(--muted);
    text-align: right;
}

/* 제원표 */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.spec-table th,
.spec-table td {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.spec-table th {
    width: 38%;
    font-weight: 600;
    color: var(--text-2);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.spec-table td { color: var(--text); }
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* 최근 응시 기록: 카드가 아니라 기록지 */
.log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    border-top: 1px solid var(--line-2);
}

.log-table td {
    padding: .5rem .5rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    white-space: nowrap;
}

.log-table tr:hover td { background: var(--ink-800); }

.log-no {
    width: 3.5rem;
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--muted);
}

.log-name {
    color: var(--text-2);
    width: 55%;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-flag {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border: 1px solid var(--line);
    margin-right: .5rem;
    vertical-align: -1px;
}

.log-score {
    font-family: var(--serif);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--gold-200);
    text-align: right;
    width: 4rem;
}

.log-time {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--muted);
    text-align: right;
}

/* 문서 하단 응시 유도 */
.doc-cta {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.doc-cta-text { font-size: .875rem; color: var(--text-2); margin: 0; }
.doc-cta-text strong { color: var(--text); font-family: var(--serif); }

/* -------------------------------------------------------------------------
   모바일
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* 첫 화면 = 문항. 표제부가 화면을 먹지 않도록 최대한 눕힌다 */
    main.container { padding-top: .875rem; }

    .navbar { padding: .3rem 0; }
    .brand-wordmark .bw-main { font-size: .9375rem; }

    .doc-masthead { padding: .875rem 1rem .75rem; }
    .doc-masthead .eyebrow { font-size: .625rem; margin-bottom: .35rem; }
    .doc-title { font-size: 1.125rem; line-height: 1.3; margin-bottom: .4rem; }

    .doc-meta {
        flex-direction: column;
        gap: .15rem;
        font-size: .75rem;
    }
    .doc-meta > span + span::before { content: none; }
    .doc-meta .num { font-size: .6875rem; }

    .item { padding: 1rem 1rem 1.25rem; }
    .item-head { padding-bottom: .5rem; margin-bottom: .75rem; }
    .item-stem { font-size: .9375rem; margin-bottom: .875rem; }
    .item-figure { padding: .5rem; }
    .item-figure figcaption { margin-top: .4rem; padding-top: .35rem; }
    .item-answer .eyebrow { margin-bottom: .5rem; }
    .item-note { margin-top: .875rem; padding-top: .625rem; font-size: .75rem; }
    .item-body { grid-template-columns: minmax(0, 1fr); gap: 1.125rem; }
    .item-head { flex-direction: column; gap: .25rem; }
    .item-domain { text-align: left; }
    .item-options { gap: .5rem; }
    .item-option { padding: .35rem .35rem .25rem; }
    .doc-notice { padding: .625rem 1.125rem; }
    .doc-cta { flex-direction: column; align-items: stretch; text-align: left; }
    .doc-section-note { margin-left: 0; width: 100%; text-align: left; }
    .log-table { font-size: .8125rem; }
    .log-no { display: none; }
    .log-time { font-size: .6875rem; }
    .doc-section > .doc-section-head { flex-wrap: wrap; }
}

/* =========================================================================
   응시 화면 안정화 (2026-09-26)

   문항을 넘길 때마다 그림 칸 높이가 그림 비율대로 달라져서(모바일은 height:auto였다)
   페이지 전체 높이가 문항마다 오르내렸다. 그 상태로 아래를 보고 있으면 스크롤이 튀고,
   그림이 지워졌다 다시 그려지는 순간과 겹쳐 "새로고침된 것처럼" 보였다.
   여기서는 뼈대(그림 칸·보기 칸·버튼 줄)의 높이를 고정해서 20문항 내내 움직이지 않게 한다.
   ========================================================================= */

/* 위쪽 내용이 바뀔 때 브라우저가 스크롤을 자동 보정하며 흔드는 것을 막는다 */
#question-container,
#options-container,
#question-image-container { overflow-anchor: none; }

/* 그림 칸: 화면 크기로만 정해지고 그림 비율에는 영향받지 않는다 */
#question-image-container {
    height: clamp(260px, 40vh, 350px) !important;
    min-height: 0 !important;
    margin-bottom: 1.25rem;
    contain: layout paint;
}

.question-image {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}

/* 보기 칸: 3개든 6개든 늘 두 줄 자리를 잡아둔다 */
#options-container {
    min-height: calc(var(--option-size) * 2 + 12px);
    align-content: start;
    margin-bottom: 1.25rem;
}

/* 아래 이동 버튼 줄도 문구 길이에 따라 높이가 바뀌지 않게 */
#question-container > .d-flex.justify-content-between {
    min-height: 46px;
    align-items: center;
}

/* 배지 폭이 "1/20"과 "10/20"에서 달라지며 머리글이 흔들리던 것 */
#timer { min-width: 5.5rem; text-align: center; }
#progress { min-width: 8.5rem; text-align: center; }

/* 아직 못 받은 그림으로 넘어갈 때. 빈 칸 대신 앞 그림을 흐리게 두고 기다린다 */
.question-image.is-swapping,
.option-image.is-swapping {
    opacity: .28;
    transition: opacity .12s ease;
}

@media (max-width: 767.98px) {
    /* style.css의 모바일 규칙이 height:auto !important 라 여기서 다시 고정한다 */
    #question-image-container {
        height: min(38vh, 300px) !important;
        min-height: 0 !important;
        margin-bottom: 1rem;
    }
    .question-image { max-height: 100% !important; }
    #options-container { --option-size: min(30vw, 130px) !important; margin-bottom: 1rem; }
    #timer { min-width: 5rem; }
    #progress { min-width: 7.5rem; }
}

@media (max-width: 575.98px) {
    #question-image-container { height: min(36vh, 260px) !important; }
    #options-container { --option-size: min(31vw, 118px) !important; }
}

/* 머리글을 한 줄로. 제목 아래 배지 줄이 따로 있어 100px 가까이 먹었고,
   그만큼 보기와 이동 버튼이 화면 밖으로 밀려나 매번 스크롤해야 했다. */
.assessment-card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1.25rem;
    flex-wrap: nowrap;
}

.assessment-card > .card-header h3 { font-size: 1.05rem; white-space: nowrap; }

.assessment-card > .card-header > .d-flex {
    margin-top: 0 !important;
    gap: .5rem;
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    /* 좁은 화면에서는 제목을 빼고 계기(시간·진행)만 남긴다 */
    .assessment-card > .card-header h3 { display: none; }
    .assessment-card > .card-header {
        padding: .55rem .9rem;
        justify-content: space-between;
    }
    .assessment-card > .card-header > .d-flex { flex: 1 1 auto; }
    main.container { padding-top: .75rem; }
}

/* 첫 그림이 붙기 전 스피너 자리. 이 칸이 짧으면 문항이 들어오는 순간 카드가
   갑자기 커지면서 화면이 한 번 크게 밀린다(첫 로드의 레이아웃 점프). */
.assessment-card #loading {
    min-height: calc(clamp(260px, 40vh, 350px) + 46px + 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .assessment-card #loading {
        min-height: calc(min(38vh, 300px) + (min(30vw, 130px) * 2 + 12px) + 46px + 3.5rem);
    }
}

/* =========================================================================
   화면 전환 표시 (static/js/loading.js)
   느린 이동(홈→응시: 엣지에 따라 4~5초)에서 "눌린 건가?" 싶어 다시 누르거나
   나가버리는 것을 막는다. 문서 톤에 맞춰 얇은 선과 회전 원 하나로만.
   ========================================================================= */
.iq-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    background: rgba(246, 247, 249, .78);
}

.iq-loading.is-on { display: block; }

/* 상단 진행선 (부정형). 진행률을 아는 척하지 않고 움직이기만 한다 */
.iq-loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ink-600);
    overflow: hidden;
}

.iq-loading-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 28%;
    background: var(--gold-200);
    animation: iq-loading-sweep 1.1s ease-in-out infinite;
}

@keyframes iq-loading-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(460%); }
}

.iq-loading-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.25rem;
    background: #ffffff;
    border: 1px solid var(--line-2);
    border-radius: 3px;
}

.iq-loading-spinner,
#loading .spinner-border {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid var(--ink-600);
    border-top-color: var(--gold-200);
    border-radius: 50%;
    animation: iq-spin .8s linear infinite;
    /* 부트스트랩 spinner-border의 기본 모양을 덮어쓴다 */
    background: none;
    color: inherit;
}

@keyframes iq-spin { to { transform: rotate(360deg); } }

.iq-loading-text {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-2);
}

/* 응시 화면의 첫 로딩 */
#loading .spinner-border {
    width: 28px !important;
    height: 28px !important;
    border-width: 2px !important;
    margin-bottom: 1rem;
}

#loading p {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* 문항 그림을 아직 못 받았을 때: 흐려진 앞 그림 위에 작은 회전 원 */
#question-image-container { position: relative; }

#question-image-container.is-waiting::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid var(--ink-600);
    border-top-color: var(--gold-200);
    border-radius: 50%;
    animation: iq-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .iq-loading-bar::after,
    .iq-loading-spinner,
    #loading .spinner-border,
    #question-image-container.is-waiting::after { animation-duration: 2.4s; }
}

/* 인라인 SVG 아이콘(폰트어썸을 대신한다). 글자 색을 그대로 따른다 */
.ico {
    display: inline-block;
    vertical-align: -.12em;
    fill: none;
    stroke: currentColor;
    flex: none;
}

.navbar .ico,
.modal-title .ico,
.language-btn .ico { margin-right: .4rem; }

/* 제출 화면: 답한 문항 수와 잠금 사유 */
.submit-count {
    font-family: var(--mono);
    font-size: .8125rem;
    letter-spacing: .04em;
    color: var(--text-2);
    margin-bottom: .5rem;
}

.submit-guard {
    max-width: 30rem;
    margin: 0 auto 1.25rem;
    padding: .75rem .9rem;
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--warn);
    border-radius: 2px;
    background: var(--ink-800);
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--text-2);
}

#submit-btn:disabled,
#submit-btn[disabled] {
    background: var(--ink-700) !important;
    border-color: var(--line-2) !important;
    color: var(--muted) !important;
    cursor: not-allowed;
}

#guard-modal .iq-modal-icon { color: var(--warn); }