/* 과평 형식 견본 — 제작: Codex(OpenAI), 2026-10-08.
 * 색·글자·터치 크기는 확정 토큰만 참조. 공개 CSS에 없는 토큰은 템플릿 계약 참조.
 * 입력·라디오·카드: shadcn 의미 구조를 네이티브 HTML로 표현(정적 견본).
 * 객관식은 site-static/template.html의 기존 fieldset·label 마크업 재사용.
 */
.fx-page { background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading); }
.fx-page *, .fx-page *::before, .fx-page *::after { box-sizing: border-box; }
.fx-page a { color: var(--link); }
.fx-main { width: 100%; max-width: var(--content-max); margin-inline: auto; padding: var(--touch-pad); }
.fx-page .site-head { position: static; height: auto; background: var(--card); border-color: var(--border); flex-wrap: wrap; padding: var(--touch-pad); }
.fx-page .site-logo { color: var(--primary); font-size: var(--text-base); }
.fx-page .page-title { color: var(--foreground); font-size: var(--text-2xl); line-height: 1.35; }
.fx-page .section-title { color: var(--foreground); font-size: var(--text-xl); margin-block: 1.5em .6em; }
.fx-page .page-lead { color: var(--muted-foreground); font-size: var(--text-base); }
.fx-page .crumbs-list { font-size: var(--text-meta); color: var(--muted-foreground); margin-block: 1em; }
.fx-page .crumbs-item::before { content: none; }
.fx-page .crumbs-sep { color: var(--muted-foreground); }
.fx-page .site-foot { background: var(--background); color: var(--muted-foreground); border-color: var(--border); font-size: var(--text-meta); }
.fx-question, .fx-unit-card { min-width: 0; margin-block: 1em; padding: var(--touch-pad); border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--card-foreground); }
.fx-question .q-stem, .fx-ox legend { font-size: var(--text-stem); line-height: var(--leading); color: var(--card-foreground); overflow-wrap: anywhere; }
.fx-question .q-header, .fx-meta { font-size: var(--text-meta); color: var(--muted-foreground); }
.fx-question .q-num-chip { color: var(--primary); background: var(--muted); font-size: var(--text-meta); }
.fx-question fieldset { min-inline-size: 0; border: 0; padding: 0; margin-block: 1em; }
.fx-question legend { padding: 0; margin-bottom: .5em; }
/* 숨김 객관식 legend의 1px 폭을 보존해 공통 sr-only와 겹치지 않게 한다. */
.fx-question legend:not(.sr-only) { width: 100%; }
.fx-choices, .fx-control { display: flex; flex-wrap: wrap; gap: .75em; align-items: center; }
.fx-choice, .fx-question .opt { display: flex; gap: .75em; align-items: center; min-height: var(--touch-min); padding: var(--touch-pad); border: 1px solid var(--input); border-radius: var(--radius); background: var(--card); color: var(--card-foreground); font-size: var(--text-base); cursor: pointer; }
.fx-choice:has(:checked), .fx-question .opt:has(:checked) { background: var(--accent); color: var(--accent-foreground); border-color: var(--ring); }
.fx-question input[type="radio"] { accent-color: var(--primary); width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.fx-input { min-width: 0; width: 100%; max-width: 24em; min-height: var(--touch-min); font: inherit; font-size: var(--text-base); padding: var(--touch-pad); border: 1px solid var(--input); border-radius: var(--radius); background: var(--card); color: var(--card-foreground); }
.fx-input--symbol { width: 4em; }
.fx-control { flex-wrap: nowrap; }
.fx-unit { flex-shrink: 0; font-size: var(--text-base); color: var(--muted-foreground); }
.fx-page input:focus-visible, .fx-page summary:focus-visible, .fx-page a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.fx-match { container-type: inline-size; }
.fx-match-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1em; }
/* D-29: 문항 폭 기준 문턱은 이 한 곳에서만 정의. */
@container (min-width: 48em) { .fx-match-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.fx-match-list { margin: 0; padding: 0; list-style: none; }
.fx-match-row { display: flex; align-items: center; gap: .75em; margin-block: .75em; font-size: var(--text-base); }
.fx-match-row label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fx-right-item { margin-block: .75em; padding: var(--touch-pad); background: var(--muted); border-radius: var(--radius); font-size: var(--text-base); overflow-wrap: anywhere; }
.fx-list-title { font-size: var(--text-base); margin-block: 0 .5em; }
.fx-explanation { font-size: var(--text-expl); }
.fx-explanation .cbt-explanation { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.fx-explanation .exp-toggle { min-height: var(--touch-min); font-size: var(--text-expl); color: var(--link); padding: var(--touch-pad); }
.fx-explanation .exp-body { font-size: var(--text-expl); color: var(--card-foreground); line-height: var(--leading); padding: var(--touch-pad); }
.fx-explanation .exp-answer-badge { color: var(--correct-foreground); background: var(--correct); border-color: var(--correct); font-size: var(--text-meta); }
.fx-table { width: 100%; border-collapse: collapse; font-size: var(--text-expl); }
.fx-table th, .fx-table td { text-align: left; padding: .5em; border: 1px solid var(--border); overflow-wrap: anywhere; }
.fx-theory { font-size: var(--text-base); }
.fx-theory table { display: block; max-width: 100%; overflow-x: auto; }
.fx-banner { border-inline-start: .25em solid var(--primary); padding: var(--touch-pad); background: var(--muted); font-size: var(--text-base); }
.fx-unit-list { list-style: none; padding: 0; }
.fx-unit-list .fx-unit-card a { display: block; /* 공용 components.css 의 body :is(a[href]) inline-flex 를 이기게 한 단 높임(10-15) */ min-height: var(--touch-min); padding-block: .5em; }
/* DD-27 확정 견본의 ad-slot 구조·높이·48px 간격 재사용. 공개 CSS의 옛 250/90 높이는 이 범위에서만 보정. */
.fx-ad { position: relative; display: block; width: 100%; min-height: var(--ad-h-rect); margin: 48px auto; border: 0; border-radius: 0; background: var(--ad-bg); contain: layout; }
.fx-ad[data-variant="rect"] { max-width: 300px; }
.fx-ad[data-variant="band"] { max-width: 728px; min-height: var(--ad-h-band); }
.fx-ad [data-slot="ad-slot-label"] { position: absolute; top: .5em; left: .5em; color: var(--muted-foreground); font-size: var(--text-meta); }
.fx-next { display: block; min-height: var(--touch-min); padding: var(--touch-pad); }

/* 선잇기 단독 견본은 넓은 문항도 검수할 수 있는 폭을 제공. 문턱은 컨테이너 한 곳만. */
.fx-main--wide { max-width: 64em; }
.fx-question .opt span { font-size: var(--text-base); color: var(--card-foreground); }

/* G-1·G-2(2026-10-30) 문항-해설 묶음: 해설 다층 화살 + «다음 문항으로» 안내.
 * 기본층(정답·한 줄·풀이)은 항상 보이고 긴 풀이는 details.exp-more 에 접는다.
 * 토큰만 쓴다 — 새 색 없음(D-011), 흰 글자 올라가는 면 없음(대비 규칙 무관). */
.fx-explanation .exp-oneliner { color: var(--card-foreground); }
.fx-explanation .exp-main { margin-block: .25em; }
.fx-explanation .exp-main p + p, .fx-explanation .exp-step p + p { margin-block: .5em; }
.fx-explanation details.exp-more { margin-block: .75em; }
.fx-explanation details.exp-more > summary { min-height: var(--touch-min); display: flex; align-items: center; color: var(--link); font-size: var(--text-expl); cursor: pointer; }
.fx-explanation .exp-more-body { padding-block: .25em; }
.fx-explanation .exp-step + .exp-step { margin-block: .75em; }
.fx-explanation .exp-step-title { font-size: var(--text-expl); font-weight: 600; color: var(--foreground); margin-block: .35em .2em; }
.fx-question { scroll-margin-top: 1em; }
.fx-exp-controls { margin: .25em 0 1em; }
.fx-exp-all { min-height: var(--touch-min); padding: var(--touch-pad); border: 1px solid var(--input); border-radius: var(--radius); background: var(--card); color: var(--card-foreground); font: inherit; font-size: var(--text-base); cursor: pointer; }
.exp-nav { margin-block: .75em 0; }
.exp-nav-link { font-size: var(--text-meta); }
/* G-5(2026-10-30) 이론 h3 — 문단과 구분되게(크기·굵기·여백만, 토큰 안에서). */
.fx-theory h3 { font-size: var(--text-lg); font-weight: 600; color: var(--foreground); line-height: 1.4; margin-block: 1.25em .4em; }