/* ═══════════════════════════════════════════════════════════════════════ 시험지 조판 단일 소스 — 변호사시험 선택형 (bar-seltaek) 앱(byunhosa_final_v1.html)과 SEO 문제 페이지(_work/gen_seo_page.py)가 이 파일 하나를 공유한다. bar-seltaek 조판은 여기서만 정의한다 — 다른 곳에서 다시 정의하면 두 화면이 어긋난다. 값의 출처: 2026-07-25 실제 앱 화면(형사 7회 문25) computed style 실측 (_work/probe_app_desktop.json). 변경 시 _work/paper_parity_diff.py 로 앱 baseline과 대조해 0 diff 확인 후 커밋. 앱 인터랙션 상태(선택·오답·놓친 선지)도 여기 포함 — 이 파일이 마지막에 로드되어 기존 규칙을 덮으므로, 상태 색을 빼면 앱에서 표시가 사라진다. ═══════════════════════════════════════════════════════════════════════ */ /* ── 지면 폭·밀도 (선택형 문제가 떠 있을 때만) ───────────────────────── */ #screen-study:has(.bar-seltaek-mode) { zoom: .74; /* PC 밀도 보정 */ --study-paper-width: min(605px, calc(100vw - 52px)); } @media (min-width: 900px) { #screen-study:has(.bar-seltaek-mode) { --study-paper-width: min(1010px, calc(100vw - 72px)); } } @media (min-width: 1100px) { #screen-study:has(.bar-seltaek-mode) { --study-paper-width: min(1010px, calc(100vw - 100px)); } } @media (max-width: 767px) { /* 모바일에서 74%로 줄이면 칼럼이 좁아져 줄바꿈이 심해짐 → 원상복구 */ #screen-study:has(.bar-seltaek-mode) { zoom: 1; --study-paper-width: calc(100vw - 56px); } } /* 시험지를 얹는 카드 표면 */ #screen-study:has(.bar-seltaek-mode) .study-question-card { box-sizing: border-box !important; width: calc(var(--study-paper-width) + 56px) !important; max-width: calc(100vw - 20px) !important; margin: 14px auto 0 !important; padding: 26px 28px !important; background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; box-shadow: 0 6px 22px rgba(15, 23, 42, .06) !important; color: var(--text) !important; overflow-x: clip; } @media (max-width: 767px) { #screen-study:has(.bar-seltaek-mode) .study-question-card { padding: 20px 16px !important; border-radius: 12px !important; border-width: .8px !important; } } @media (max-width: 400px) { #screen-study:has(.bar-seltaek-mode) .study-question-card { padding: 18px 12px !important; } } /* !important = 이 파일이 앱의 흩어진 !important 규칙(구 22444행대 max-width:100% 등)을 이기기 위한 것. 단일 소스가 최종 권위라는 뜻이며, 임의로 떼면 조판이 무너진다. */ #screen-study .study-paper-box.bar-seltaek-mode, #screen-study .study-paper-box.bar-seltaek-mode + #choicesArea { width: var(--study-paper-width) !important; max-width: var(--study-paper-width) !important; margin-left: auto !important; margin-right: auto !important; } #screen-study .study-paper-box.bar-seltaek-mode { display: block; padding: 0; margin: 0 auto; /* 발문↔선지 사이 여백 없음 */ background: transparent; border: 0; border-radius: 0; box-shadow: none; } #screen-study .study-paper-box.bar-seltaek-mode + #choicesArea { margin-top: 0; } /* ── 앱 밖(랜딩 카드·정적 페이지)에서 같은 조판을 쓰는 스코프 ────────── 아래 조판 규칙은 전부 `.bar-seltaek-paper` 로도 걸린다. 마크업만 앱과 같게 만들면 — .prob-text > .bar-seltaek-qnum + .bar-seltaek-qbody .choices > .choice-row > .choice-num + .choice-txt — 폰트·자간·행간·격자는 여기서 온다. 랜딩