/*
「시험지와 형광펜」 — docs/DESIGN_RULES.md v0.2 (2026-09-19 확정) 의 값을 옮긴 층.
mvp-theme.css 뒤에 읽혀 :root 토큰을 덮고, 개편한 화면(랜딩·홈·문항 상세·커뮤니티·교재)의
규칙을 둔다. 값은 이 파일과 규칙 문서에서만 정한다. 화면 코드는 변수만 쓴다.
*/

/* ===== A. primitive ===== */
:root {
  --c-ground: #f2f2ee; --c-paper: #ffffff; --c-paper-2: #f7f7f4;
  --c-ink: #1a1a18; --c-ink-2: #55554f; --c-ink-3: #7b7b73;
  --c-line: #e3e3dd; --c-line-2: #cfcfc7;
  --c-green: #0f5f3d; --c-green-2: #167a4d; --c-green-soft: #e4f1ea;
  --c-marker: #ffe66d; --c-marker-wash: rgba(255, 230, 109, 0.45);
  --c-red: #c8372d; --c-red-soft: #fbe9e7; --c-amber: #a86500; --c-amber-soft: #fbf1de;
  --e-float: 0 8px 24px rgba(26, 26, 24, 0.10);

  /* B. 글자 */
  --f-ui: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --f-exam: "Noto Serif KR", AppleMyungjo, Batang, "Nanum Myeongjo", serif;
  --t-display: 800 40px/1.2 var(--f-ui);
  --t-title: 700 28px/1.3 var(--f-ui);
  --t-heading: 700 20px/1.4 var(--f-ui);
  --t-subheading: 600 17px/1.5 var(--f-ui);
  --t-body: 400 16px/1.75 var(--f-ui);
  --t-body-strong: 600 16px/1.75 var(--f-ui);
  --t-meta: 400 13px/1.6 var(--f-ui);
  --t-label: 600 12px/1.4 var(--f-ui);
  --t-exam-stem: 600 19px/1.7 var(--f-exam);
  --t-exam-text: 400 17px/1.9 var(--f-exam);

  /* C. 여백  D. 라운드 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-full: 999px;

  /* semantic — 기존 이름을 유지하고 값만 primitive 로 */
  --mvp-bg: var(--c-ground);
  --mvp-bg-soft: var(--c-paper-2);
  --mvp-surface: var(--c-paper);
  --mvp-surface-raised: var(--c-paper);
  --mvp-surface-strong: var(--c-paper-2);
  --mvp-text: var(--c-ink);
  --mvp-muted: var(--c-ink-2);
  --mvp-subtle: var(--c-ink-3);
  --mvp-line: var(--c-line);
  --mvp-line-strong: var(--c-line-2);
  --mvp-brand: var(--c-green);
  --mvp-brand-strong: var(--c-green-2);
  --mvp-brand-soft: var(--c-green-soft);
  --mvp-warning: var(--c-amber);
  --mvp-danger: var(--c-red);
  --mvp-marker: var(--c-marker);
  --mvp-marker-wash: var(--c-marker-wash);
  --mvp-shadow: var(--e-float);
  --mvp-card-shadow: none;
}

:root[data-theme="dark"] {
  --c-ground: #121412; --c-paper: #1a1c1a; --c-paper-2: #20231f;
  --c-ink: #ecebe6; --c-ink-2: #b1b0a8; --c-ink-3: #8a8a82;
  --c-line: rgba(236, 235, 230, 0.12); --c-line-2: rgba(236, 235, 230, 0.22);
  --c-green: #5cc48f; --c-green-2: #7fd6a8; --c-green-soft: rgba(92, 196, 143, 0.14);
  --c-marker: #f2d75a; --c-marker-wash: rgba(242, 215, 90, 0.26);
  --c-red: #f2857a; --c-red-soft: rgba(242, 133, 122, 0.14);
  --c-amber: #fbbf24; --c-amber-soft: rgba(251, 191, 36, 0.16);
  --e-float: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ===== 바탕 ===== */
body.mvp-shell {
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.75;
}

/* 본문 링크는 초록이 아니라 밑줄. 클래스가 있는 링크(버튼·메뉴)는 각자 규칙을 따른다. */
.mvp-shell .site-main a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-line-2);
  text-underline-offset: 3px;
}
.mvp-shell .site-main a:not([class]):hover { text-decoration-color: currentColor; }

/* 시험지 글꼴을 쓰는 자리 */
.mvp-shell .exam-text, .mvp-shell .exam-stem { font-family: var(--f-exam); }

/* ===== 셸: 머리·본문 폭·발 ===== */
.mvp-shell .site-header {
  border-top: 0;
  background: var(--c-paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mvp-shell .header-inner {
  width: min(1120px, calc(100% - 48px));
  min-height: 64px;
  gap: var(--s-8);
}
.mvp-shell .desktop-nav { gap: var(--s-2); }
.mvp-shell .desktop-nav a,
.mvp-shell .header-actions > a,
.mvp-shell .header-actions .inline button {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  font: var(--t-body-strong);
  color: var(--c-ink-2);
}
.mvp-shell .desktop-nav a:hover,
.mvp-shell .header-actions > a:hover,
.mvp-shell .header-actions .inline button:hover { background: var(--c-paper-2); color: var(--c-ink); }
.mvp-shell .desktop-nav a[aria-current="page"] { color: var(--c-ink); font-weight: 600; }
.mvp-shell .desktop-nav a[aria-current="page"]::after { right: var(--s-3); left: var(--s-3); }

.mvp-shell .site-main { width: min(1120px, calc(100% - 48px)); padding: var(--s-12) 0 var(--s-16); }
.mvp-shell .site-main.account-main { width: min(720px, calc(100% - 48px)); }
.mvp-shell .site-footer { width: min(1120px, calc(100% - 48px)); font: var(--t-meta); }

/* ===== 버튼 위계 ===== */
.mvp-shell .button,
.mvp-shell .button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 10px var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: var(--c-green);
  color: #fff;
  font: var(--t-body-strong);
  line-height: 1.3;
  text-decoration: none;
  box-shadow: none;
}
.mvp-shell .button:hover { background: var(--c-green-2); color: #fff; }
:root[data-theme="dark"] .mvp-shell .button { color: #121412; }
.mvp-shell .button.button-secondary,
.mvp-shell .button-secondary {
  background: transparent;
  border-color: var(--c-ink);
  color: var(--c-ink);
}
.mvp-shell .button.button-secondary:hover { background: var(--c-paper-2); color: var(--c-ink); }
.mvp-shell .button.is-small { padding: var(--s-2) var(--s-3); font-size: 14px; }
.mvp-shell .button:focus-visible, .mvp-shell a:focus-visible, .mvp-shell button:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

/* ===== 공용 조각 ===== */
.mvp-shell .paper { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-2); padding: var(--s-6); }
.mvp-shell .paper-2 { background: var(--c-paper-2); border-radius: var(--r-2); padding: var(--s-4) var(--s-5); }
.mvp-shell .t-title { font: var(--t-title); letter-spacing: -0.01em; margin: 0; }
.mvp-shell .t-heading { font: var(--t-heading); margin: 0; }
.mvp-shell .t-subheading { font: var(--t-subheading); margin: 0; }
.mvp-shell .t-meta { font: var(--t-meta); color: var(--c-ink-3); margin: 0; }
.mvp-shell .t-label { font: var(--t-label); color: var(--c-ink-2); margin: 0; }
.mvp-shell .t-muted { color: var(--c-ink-2); }

.mvp-shell .chip {
  display: inline-block;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-1);
  background: var(--c-paper-2);
  color: var(--c-ink-2);
  font: var(--t-label);
  vertical-align: middle;
}
.mvp-shell .chip.is-green { background: var(--c-green-soft); color: var(--c-green); }
.mvp-shell .chip.is-amber { background: var(--c-amber-soft); color: var(--c-amber); }

/* 구분선 리스트 */
.mvp-shell .rows { margin: 0; padding: 0; list-style: none; }
.mvp-shell .rows > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--c-line);
}
.mvp-shell .rows > li:last-child { border-bottom: 1px solid var(--c-line); }
.mvp-shell .rows p { margin: 0; }
.mvp-shell .rows .arrow { color: var(--c-ink-3); flex: none; }
.mvp-shell .rows a.row-link { color: inherit; text-decoration: none; display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--s-4); }
.mvp-shell .rows a.row-link:hover .t-subheading { text-decoration: underline; text-underline-offset: 3px; }

/* 탭 */
.mvp-shell .tabs { display: flex; gap: var(--s-6); border-bottom: 1px solid var(--c-line); margin: 0; padding: 0; list-style: none; }
.mvp-shell .tabs a {
  display: block;
  padding: var(--s-3) 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--c-ink-2);
  font: var(--t-body-strong);
  text-decoration: none;
}
.mvp-shell .tabs a[aria-current] { color: var(--c-ink); border-color: var(--c-green); }

/* 2단 골격: 본문 720 + 레일 360 / 목록 760 + 레일 320 */
.mvp-shell .two-col { display: grid; grid-template-columns: minmax(0, 720px) 360px; gap: var(--s-10); align-items: start; }
.mvp-shell .two-col.is-list { grid-template-columns: minmax(0, 760px) 320px; }
.mvp-shell .two-col > * { min-width: 0; }
.mvp-shell .rail { position: sticky; top: calc(64px + var(--s-6)); display: grid; gap: var(--s-4); }
.mvp-shell .section { margin-top: var(--s-12); }
.mvp-shell .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.mvp-shell .stack > * + * { margin-top: var(--s-4); }
.mvp-shell dl.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.mvp-shell dl.kv dt { font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell dl.kv dd { margin: 0; font: var(--t-body); }
.mvp-shell dl.kv dd b { font-weight: 700; }

/* ===== 시험지 (문항 원문·선지) ===== */
.mvp-shell .sheet { font: var(--t-exam-text); }
.mvp-shell .sheet-stem { font: var(--t-exam-stem); margin: 0 0 var(--s-3); }
.mvp-shell .sheet-choices { margin: 0; padding: 0; list-style: none; }
.mvp-shell .sheet-choices > li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: start;
  padding: var(--s-3) var(--s-2);
  border-top: 1px solid var(--c-line);
}
.mvp-shell .sheet-choices > li:last-child { border-bottom: 1px solid var(--c-line); }
.mvp-shell .sheet-choices .n { color: var(--c-ink-2); }
.mvp-shell .sheet-choices > li.is-correct { background: var(--c-marker-wash); }
.mvp-shell .sheet-choices > li.is-correct .n { color: var(--c-ink); font-weight: 600; }
.mvp-shell .sheet-choices .ans { font: var(--t-label); color: var(--c-ink); padding-top: 6px; white-space: nowrap; }

/* ===== 1. 랜딩 ===== */
.mvp-shell .site-main.paper-landing { padding-top: 0; }
.mvp-shell .paper-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-10);
  align-items: center;
  padding: var(--s-16) 0;
}
.mvp-shell .paper-hero-copy > * + * { margin-top: var(--s-4); }
.mvp-shell .paper-hero-copy h1 { font: var(--t-display); letter-spacing: -0.02em; margin: 0; }
.mvp-shell .paper-hero-copy .lede { max-width: 34em; color: var(--c-ink-2); margin: 0; }
.mvp-shell .paper-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.mvp-shell .paper-hero-copy .v2-dday { margin-top: var(--s-4); }
.mvp-shell .landing-question-preview { margin: 0; font: var(--t-exam-text); padding: var(--s-8); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-2); }
.mvp-shell .landing-question-preview .sheet-meta { display: flex; justify-content: space-between; gap: var(--s-4); margin: 0 0 var(--s-4); font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .landing-question-preview figcaption { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-top: var(--s-4); font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .landing-question-preview figcaption a { font: var(--t-body); color: var(--c-ink); }
.mvp-shell .paper-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.mvp-shell .paper-stats > div { padding: var(--s-5) var(--s-6); border-left: 1px solid var(--c-line); }
.mvp-shell .paper-stats > div:first-child { border-left: 0; padding-left: 0; }
.mvp-shell .paper-stats dt { font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .paper-stats dd { margin: 0; font: var(--t-title); }
.mvp-shell .landing-start-paths { margin: 0; padding: 0; list-style: none; }
.mvp-shell .landing-start-paths > li { display: flex; padding: var(--s-4) 0; border-top: 1px solid var(--c-line); }
.mvp-shell .landing-start-paths > li:last-child { border-bottom: 1px solid var(--c-line); }
.mvp-shell .landing-start-paths p { margin: 0; }
.mvp-shell .landing-start-paths a.row-link { color: inherit; text-decoration: none; display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--s-4); }
.mvp-shell .landing-start-paths a.row-link strong { font: var(--t-subheading); }
.mvp-shell .landing-start-paths .arrow { color: var(--c-ink-3); flex: none; }
.mvp-shell .paper-faq { max-width: 720px; }
.mvp-shell .paper-faq details { padding: var(--s-4) 0; border-top: 1px solid var(--c-line); }
.mvp-shell .paper-faq details:last-child { border-bottom: 1px solid var(--c-line); }
.mvp-shell .paper-faq summary { font: var(--t-body-strong); cursor: pointer; list-style: none; }
.mvp-shell .paper-faq summary::-webkit-details-marker { display: none; }
.mvp-shell .paper-faq details p { margin: var(--s-2) 0 0; color: var(--c-ink-2); }
.mvp-shell .paper-final {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-6);
  padding-top: var(--s-8);
  border-top: 1px solid var(--c-line);
}
.mvp-shell .paper-final h2 { font: var(--t-title); margin: 0; }

/* ===== 2. 홈 ===== */
.mvp-shell .home-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5) var(--s-8); align-items: center; }
.mvp-shell .home-lead .t-heading { margin: 0 0 var(--s-2); }
.mvp-shell .home-lead-copy p { margin: 0; }
.mvp-shell .home-primary-action { justify-self: end; white-space: nowrap; }
.mvp-shell .home-secondary-actions { grid-column: 1 / -1; }
.mvp-shell .home-secondary-actions > li:first-child { border-top-color: var(--c-line-2); }
.mvp-shell .home-timetable .rows > li { font: var(--t-meta); color: var(--c-ink-2); padding: var(--s-3) 0; }
.mvp-shell .home-timetable .rows b { color: var(--c-ink); margin-right: var(--s-1); }
.mvp-shell .home-timetable .t-label { margin: 0 0 var(--s-2); }
.mvp-shell .home-timetable .t-label + .rows { margin-bottom: var(--s-4); }

/* ===== 3. 문항 상세 ===== */
.mvp-shell .question-breadcrumb-inner { width: min(1120px, calc(100% - 48px)); min-height: 48px; }
.mvp-shell .question-detail-shell {
  grid-template-columns: minmax(0, 720px) 360px;
  width: min(1120px, calc(100% - 48px));
  gap: var(--s-10);
  padding-top: var(--s-12);
}
.mvp-shell .question-detail-page .question-heading { margin: 0 0 var(--s-4); }
.mvp-shell .question-detail-page .question-meta { display: block; font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .question-detail-page .question-kicker { font: var(--t-label); color: var(--c-ink-2); margin: 0; }
.mvp-shell .question-detail-page .question-heading .review-approved-badge { margin-left: var(--s-2); }
.mvp-shell .question-detail-page .question-stem,
.mvp-shell .question-detail-page h1.question-stem { font: var(--t-exam-stem); margin: 0 0 var(--s-3); padding: 0; border: 0; background: transparent; letter-spacing: 0; }
.mvp-shell .question-transcript-corrected { font: var(--t-meta); margin: 0 0 var(--s-4); }
.mvp-shell .answer-toggle { display: flex; gap: var(--s-6); margin: var(--s-4) 0 var(--s-2); padding: 0; border: 0; border-bottom: 1px solid var(--c-line); background: transparent; border-radius: 0; }
.mvp-shell .question-detail-page.is-enhanced .answer-toggle { display: flex; }
.mvp-shell .answer-toggle button {
  flex: none;
  padding: var(--s-3) 0;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--c-ink-2);
  font: var(--t-body-strong);
  box-shadow: none;
}
.mvp-shell .answer-toggle button[aria-pressed="true"] { background: transparent; color: var(--c-ink); border-color: var(--c-green); box-shadow: none; }
.mvp-shell .question-detail-page .question-choice-list { display: block; margin: 0; padding: 0; gap: 0; font: var(--t-exam-text); }
.mvp-shell .question-detail-page .question-choice-list li {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--c-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.mvp-shell .question-detail-page .question-choice-list li:last-child { border-bottom: 1px solid var(--c-line); }
.mvp-shell .question-choice-button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: start;
  width: 100%;
  padding: var(--s-3) var(--s-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  text-align: left;
  box-shadow: none;
}
.mvp-shell .question-detail-page .question-choice-list .choice-label { color: var(--c-ink-2); font: inherit; width: auto; height: auto; border: 0; background: transparent; border-radius: 0; display: block; }
.mvp-shell .question-detail-page .choice-text { font: inherit; }
/* 풀기 모드에서는 정답 표시가 없다 */
.mvp-shell .question-detail-page.is-enhanced[data-answer-mode="solve"] .question-choice-list li.is-answer { background: transparent; border-color: var(--c-line); }
/* 풀기 모드에서 고른 선지 */
.mvp-shell .question-detail-page.is-enhanced .question-choice-list li.is-selected { background: var(--c-green-soft); box-shadow: inset 3px 0 0 var(--c-green); border-color: var(--c-line); }
/* 정답 공개: 정답은 형광펜, 내가 고른 오답은 번호만 빨강. JS 가 없으면 항상 공개 상태다. */
.mvp-shell .question-detail-page .question-choice-list li.is-answer { background: transparent; border-color: var(--c-line); }
.mvp-shell .question-detail-page:not([data-answer-mode="solve"]) .question-choice-list li.is-answer { background: var(--c-marker-wash); box-shadow: none; }
.mvp-shell .question-detail-page:not([data-answer-mode="solve"]) .question-choice-list li.is-answer .choice-label { color: var(--c-ink); font-weight: 600; }
.mvp-shell .question-detail-page[data-answer-mode="answer"] .question-choice-list li.is-selected:not(.is-answer) { background: transparent; box-shadow: none; }
.mvp-shell .question-detail-page[data-answer-mode="answer"] .question-choice-list li.is-selected:not(.is-answer) .choice-label { color: var(--c-red); font-weight: 600; }
.mvp-shell .choice-correct-badge { font: var(--t-label); color: var(--c-ink); background: transparent; border: 0; padding: 6px 0 0; }
.mvp-shell .question-choice-result { font: var(--t-meta); margin: var(--s-3) 0 0; }
.mvp-shell .official-answer-box { margin-top: var(--s-4); padding: 0; border: 0; background: transparent; display: flex; gap: var(--s-3); align-items: baseline; font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .official-answer-box .official-answer-label { font: var(--t-body-strong); color: var(--c-ink); background: transparent; border: 0; width: auto; height: auto; padding: 0; }
.mvp-shell .official-answer-box strong { color: var(--c-ink-2); font-weight: 600; }
.mvp-shell .official-answer-box p { margin: 0; display: inline; }
.mvp-shell .question-commentary, .mvp-shell .commentary-locked { margin-top: var(--s-12); padding: 0; border: 0; background: transparent; box-shadow: none; }
.mvp-shell .commentary-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.mvp-shell .commentary-heading h2 { font: var(--t-heading); margin: 0; }
.mvp-shell .commentary-disclaimer { font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .commentary-panel-title { font: var(--t-subheading); margin: 0 0 var(--s-2); }
.mvp-shell .commentary-panel p { font: var(--t-body); color: var(--c-ink-2); }
.mvp-shell .commentary-tabs { gap: var(--s-6); border-bottom: 1px solid var(--c-line); padding: 0; background: transparent; border-radius: 0; }
.mvp-shell .commentary-tabs button { padding: var(--s-3) 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--c-ink-2); font: var(--t-body-strong); box-shadow: none; }
.mvp-shell .commentary-tabs button[aria-selected="true"] { color: var(--c-ink); border-color: var(--c-green); background: transparent; }
.mvp-shell .commentary-trap { background: var(--c-paper-2); border-radius: var(--r-2); padding: var(--s-4) var(--s-5); }
.mvp-shell .choice-note-card { border: 0; border-top: 1px solid var(--c-line); border-radius: 0; background: transparent; padding: var(--s-3) 0; box-shadow: none; }
.mvp-shell .choice-note-card.is-answer { background: var(--c-marker-wash); }
.mvp-shell .question-topics, .mvp-shell .question-similar, .mvp-shell .question-variant-teaser, .mvp-shell .question-difficulty { margin-top: var(--s-12); padding-top: 0; border-top: 0; }
.mvp-shell .question-topics h2, .mvp-shell .question-similar h2, .mvp-shell .question-difficulty h2 { font: var(--t-heading); margin: 0 0 var(--s-3); }
.mvp-shell .question-topics li a, .mvp-shell .question-topics li > span { padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r-1); background: var(--c-paper-2); font: var(--t-label); color: var(--c-ink-2); }
.mvp-shell .question-difficulty { padding: 0; border: 0; background: transparent; box-shadow: none; }
.mvp-shell .question-sibling-nav { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--c-line); }
.mvp-shell .question-sibling-nav a { border: 0; background: transparent; padding: 0; box-shadow: none; }
.mvp-shell .question-honesty-notice { margin-top: var(--s-8); padding: 0; border: 0; background: transparent; font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .question-honesty-notice strong { display: block; color: var(--c-ink-2); margin-bottom: var(--s-1); }
.mvp-shell .question-honesty-notice p { margin: 0; }
/* 레일 */
.mvp-shell .question-info-sidebar { padding: 0; border: 0; background: transparent; }
.mvp-shell .question-sticky-panel { top: calc(64px + var(--s-6)); display: grid; gap: var(--s-4); }
.mvp-shell .question-info-card, .mvp-shell .question-number-jump { margin: 0; padding: var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-2); background: var(--c-paper); box-shadow: none; }
.mvp-shell .question-number-jump { border-top: 1px solid var(--c-line); }
.mvp-shell .question-number-jump h2 { font: var(--t-label); color: var(--c-ink-2); margin: 0 0 var(--s-3); }
.mvp-shell .question-info-card h2 { font: var(--t-label); color: var(--c-ink-2); margin: 0 0 var(--s-3); }
.mvp-shell .question-number-grid { display: grid; grid-template-columns: repeat(auto-fill, 36px); gap: var(--s-2); }
.mvp-shell .question-number-grid a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-1);
  background: var(--c-paper);
  color: var(--c-ink-2);
  font: var(--t-label);
  text-decoration: none;
  box-shadow: none;
}
.mvp-shell .question-number-grid a.is-visited { background: var(--c-paper-2); color: var(--c-ink-3); }
.mvp-shell .question-number-grid a.is-current { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.mvp-shell .question-grid-legend { font: var(--t-meta); color: var(--c-ink-3); margin-top: var(--s-3); }
.mvp-shell .question-feedback-button { display: inline-flex; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-ink); border-radius: var(--r-2); background: transparent; color: var(--c-ink); font: 600 14px/1.3 var(--f-ui); text-decoration: none; justify-self: start; box-shadow: none; }

/* ===== 4. 커뮤니티 ===== */
.mvp-shell .site-main.community-main { width: min(1120px, calc(100% - 48px)); }
.mvp-shell .community-heading { display: block; }
.mvp-shell .community-heading h1 { font: var(--t-title); margin: 0; }
.mvp-shell .community-lede { margin: var(--s-2) 0 var(--s-6); color: var(--c-ink-2); }
.mvp-shell .community-write-button {
  display: inline-flex; justify-content: center; align-items: center;
  padding: 10px var(--s-4); border-radius: var(--r-2);
  background: var(--c-green); color: #fff; font: var(--t-body-strong); line-height: 1.3; text-decoration: none; box-shadow: none; border: 0;
}
.mvp-shell .community-write-button:hover { background: var(--c-green-2); color: #fff; }
:root[data-theme="dark"] .mvp-shell .community-write-button { color: #121412; }
.mvp-shell .rail .community-write-button { width: 100%; }
.mvp-shell .community-tabs { margin: 0; }
.mvp-shell .community-tabs ul { display: flex; gap: var(--s-6); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--c-line); }
.mvp-shell .community-tabs a { display: block; padding: var(--s-3) 0; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--c-ink-2); font: var(--t-body-strong); text-decoration: none; background: transparent; border-radius: 0; }
.mvp-shell .community-tabs a[aria-current="page"] { color: var(--c-ink); border-color: var(--c-green); background: transparent; }
.mvp-shell .community-search { display: flex; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-2); background: var(--c-paper); }
.mvp-shell .community-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mvp-shell .community-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: var(--t-body); color: inherit; padding: var(--s-1) 0; }
.mvp-shell .community-search button { padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r-1); background: transparent; color: var(--c-ink-2); font: 600 14px/1.3 var(--f-ui); }
.mvp-shell .community-posts { margin: 0; }
.mvp-shell .community-section-heading { display: none; }
.mvp-shell .community-post-list { margin: 0; padding: 0; list-style: none; }
.mvp-shell .community-post-item { display: block; padding: var(--s-4) 0; border-top: 1px solid var(--c-line); }
.mvp-shell .community-post-item:last-child { border-bottom: 1px solid var(--c-line); }
.mvp-shell .community-post-item > a { display: block; color: var(--c-ink); font: var(--t-subheading); text-decoration: none; }
.mvp-shell .community-post-item > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mvp-shell .community-post-item .chip { margin-right: var(--s-1); }
.mvp-shell .community-post-meta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-1) 0 0; font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .community-empty { display: block; padding: var(--s-8); margin-top: var(--s-6); border: 0; border-radius: var(--r-2); background: var(--c-paper-2); text-align: center; }
.mvp-shell .community-empty h3 { font: var(--t-subheading); margin: 0 0 var(--s-2); }
.mvp-shell .community-empty p { margin: 0 0 var(--s-3); color: var(--c-ink-2); }
.mvp-shell .community-empty .community-write-button { background: transparent; color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.mvp-shell .community-pagination { display: flex; gap: var(--s-4); justify-content: center; margin-top: var(--s-6); font: var(--t-meta); }
.mvp-shell .community-rules { margin: 0; padding: var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-2); background: var(--c-paper); }
.mvp-shell .community-rules h2 { font: var(--t-subheading); margin: 0 0 var(--s-2); }
.mvp-shell .community-rules p, .mvp-shell .community-rules li { font: var(--t-meta); color: var(--c-ink-2); }
.mvp-shell .community-disclaimer { margin: var(--s-6) 0 0; font: var(--t-meta); color: var(--c-ink-3); }

/* ===== 5. 교재 ===== */
.mvp-shell .textbook-library header h1, .mvp-shell .textbook-overview header h1 { font: var(--t-title); margin: 0; }
.mvp-shell .textbook-library header p, .mvp-shell .textbook-overview header p { margin: var(--s-2) 0 var(--s-6); color: var(--c-ink-2); }
.mvp-shell .textbook-library header > a { font: var(--t-body); }
.mvp-shell .textbook-matrix-wrap { padding: 0 var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-2); background: var(--c-paper); overflow-x: auto; }
.mvp-shell table.textbook-matrix { width: 100%; border-collapse: collapse; margin: 0; }
.mvp-shell table.textbook-matrix th { font: var(--t-label); color: var(--c-ink-2); text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line-2); background: transparent; }
.mvp-shell table.textbook-matrix th small { display: inline; margin-left: var(--s-1); font-weight: 400; color: var(--c-ink-3); }
.mvp-shell table.textbook-matrix tbody th { font: var(--t-subheading); color: var(--c-ink); padding: var(--s-4); border-bottom: 1px solid var(--c-line); }
.mvp-shell table.textbook-matrix tbody th a { color: inherit; text-decoration: none; }
.mvp-shell table.textbook-matrix tbody th small { display: block; font: var(--t-meta); color: var(--c-ink-3); margin: 0; }
.mvp-shell table.textbook-matrix td { padding: var(--s-4); border-bottom: 1px solid var(--c-line); vertical-align: top; }
.mvp-shell table.textbook-matrix tr:last-child th, .mvp-shell table.textbook-matrix tr:last-child td { border-bottom: 0; }
.mvp-shell .matrix-cell { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); padding: 0; border: 0; background: transparent; border-radius: 0; text-decoration: none; color: var(--c-ink); box-shadow: none; }
.mvp-shell .matrix-cell b { font: var(--t-body-strong); text-decoration: underline; text-decoration-color: var(--c-line-2); text-underline-offset: 3px; }
.mvp-shell .matrix-cell:hover b { text-decoration-color: currentColor; }
.mvp-shell .matrix-cell span { font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .matrix-blank { color: var(--c-ink-3); }
.mvp-shell .exam-rule { margin-top: var(--s-6); padding: 0; border: 0; background: transparent; font: var(--t-meta); color: var(--c-ink-2); }
.mvp-shell .exam-rule dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); margin: 0 0 var(--s-2); }
.mvp-shell .exam-rule dl > div { display: contents; }
.mvp-shell .exam-rule dt { color: var(--c-ink-3); }
.mvp-shell .exam-rule dd { margin: 0; }
.mvp-shell .textbook-overview .overview-exam h2, .mvp-shell .textbook-overview .overview-plan h2 { font: var(--t-heading); margin: 0 0 var(--s-3); }
.mvp-shell .overview-exam, .mvp-shell .overview-plan { margin-top: var(--s-12); padding: 0; border: 0; background: transparent; }
.mvp-shell .overview-exam-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-6); padding: var(--s-4) 0; border-top: 1px solid var(--c-line); }
.mvp-shell .overview-exam-row:last-of-type { border-bottom: 1px solid var(--c-line); }
.mvp-shell .overview-exam-where b { display: inline-block; font: var(--t-label); color: var(--c-ink-2); margin-bottom: var(--s-1); }
.mvp-shell .overview-exam-where strong { display: block; font: var(--t-subheading); }
.mvp-shell .overview-exam-where small, .mvp-shell .overview-clock { display: block; font: var(--t-meta); color: var(--c-ink-3); margin: 0; }
.mvp-shell .overview-scope-label { font: var(--t-meta); color: var(--c-ink-3); margin: 0 0 var(--s-1); }
.mvp-shell .overview-scope { margin: 0; padding-left: 1.2em; color: var(--c-ink-2); }
.mvp-shell .overview-pass { margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--c-ink-2); }
.mvp-shell .overview-plan > p { font: var(--t-meta); color: var(--c-ink-3); margin: 0 0 var(--s-2); }
.mvp-shell .overview-chapters { margin: 0; padding: 0; list-style: none; }
.mvp-shell .overview-chapters li { border-top: 1px solid var(--c-line); }
.mvp-shell .overview-chapters li:last-child { border-bottom: 1px solid var(--c-line); }
.mvp-shell .overview-chapters a { display: flex; gap: var(--s-3); padding: var(--s-3) 0; color: var(--c-ink); text-decoration: none; }
.mvp-shell .overview-chapters a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mvp-shell .overview-chapters a span { font: var(--t-meta); color: var(--c-ink-3); min-width: 2em; }
.mvp-shell .overview-basis { margin: var(--s-8) 0 0; font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .overview-profile { margin-top: var(--s-12); padding: 0; border: 0; background: transparent; }
.mvp-shell .overview-profile h2 { font: var(--t-heading); margin: 0 0 var(--s-2); }
.mvp-shell .overview-profile-lede { margin: 0 0 var(--s-4); color: var(--c-ink-2); }
.mvp-shell .overview-profile-grid { display: grid; margin: 0; border-top: 1px solid var(--c-line); }
.mvp-shell .overview-profile-grid > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--s-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); }
.mvp-shell .overview-profile-grid dt { font: var(--t-label); color: var(--c-ink-2); }
.mvp-shell .overview-profile-grid dd { margin: 0; }
.mvp-shell .overview-profile-grid dd b { display: block; font-weight: 700; margin-bottom: var(--s-1); }
.mvp-shell .overview-profile-grid dd span { display: block; color: var(--c-ink-2); }
.mvp-shell .overview-cautions { margin: 0; padding-left: 1.2em; color: var(--c-ink-2); }
.mvp-shell .overview-cautions li + li { margin-top: var(--s-1); }
.mvp-shell .overview-profile-review { margin: var(--s-3) 0 0; font: var(--t-meta); color: var(--c-ink-3); }
/* 교재 본문 상자 — 출제 포인트·시험 주의사항·비교 포인트·확인문제. 「시험지와 형광펜」: 색면 대신 선과 라벨 */
.mvp-shell .textbook-copy .textbook-callout { margin: 1.8em 0; padding: var(--s-4) var(--s-5); border: 1px solid var(--c-line-2); border-left: 3px solid var(--c-green); border-radius: var(--r-2); background: var(--c-paper); }
.mvp-shell .textbook-copy .textbook-callout > :last-child { margin-bottom: 0; }
.mvp-shell .textbook-copy .textbook-callout-label { margin: 0 0 var(--s-2); font: var(--t-label); color: var(--c-green); letter-spacing: .01em; }
.mvp-shell .textbook-copy .textbook-callout.is-caution { border-left-color: var(--c-ink); }
.mvp-shell .textbook-copy .textbook-callout.is-caution .textbook-callout-label { color: var(--c-ink); }
.mvp-shell .textbook-copy .textbook-callout.is-compare { border-left-color: var(--c-line-2); background: var(--c-paper-2); }
.mvp-shell .textbook-copy .textbook-callout.is-compare .textbook-callout-label { color: var(--c-ink-2); }
.mvp-shell .textbook-copy .textbook-callout.is-check { border-left-color: var(--c-green); border-style: dashed; }
.mvp-shell .textbook-copy .textbook-callout.is-check ol { padding-left: 1.4em; }
.mvp-shell .textbook-copy .textbook-callout.is-check li + li { margin-top: var(--s-3); }
.mvp-shell .textbook-copy .textbook-callout p { margin: 0 0 .6em; }
.mvp-shell .textbook-copy .textbook-callout table { min-width: 0; font-size: .86rem; }
.mvp-shell .textbook-copy .textbook-callout .table-scroll { margin: 0 0 .6em; }
.mvp-shell table.textbook-matrix tbody th .matrix-tagline { margin: var(--s-1) 0 0; font: var(--t-meta); font-weight: 400; color: var(--c-ink-2); max-width: 28em; }
.mvp-shell .matrix-cell small { display: block; font: var(--t-meta); color: var(--c-ink-3); }

/* ===== 반응형 ===== */
@media (max-width: 1024px) {
  .mvp-shell .two-col, .mvp-shell .two-col.is-list { grid-template-columns: 1fr; }
  .mvp-shell .rail { position: static; }
  .mvp-shell .paper-hero { grid-template-columns: 1fr; }
  .mvp-shell .question-detail-shell { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .mvp-shell .header-inner, .mvp-shell .site-main, .mvp-shell .site-footer, .mvp-shell .question-breadcrumb-inner { width: calc(100% - 32px); }
  .mvp-shell .site-main { padding-top: var(--s-6); }
  .mvp-shell .paper-hero { padding: var(--s-8) 0; gap: var(--s-8); }
  .mvp-shell .paper-hero-copy h1 { font-size: 32px; }
  .mvp-shell .landing-question-preview { padding: var(--s-5); }
  .mvp-shell .paper-stats { grid-template-columns: 1fr; }
  .mvp-shell .paper-stats > div { border-left: 0; padding: var(--s-3) 0; border-top: 1px solid var(--c-line); }
  .mvp-shell .paper-final { flex-direction: column; align-items: flex-start; }
  .mvp-shell .home-lead { grid-template-columns: 1fr; gap: var(--s-4); }
  .mvp-shell .home-primary-action { justify-self: start; }
  .mvp-shell .question-breadcrumbs li:not(:nth-last-child(-n+2)) { display: none; }
  .mvp-shell .question-detail-shell { padding-top: var(--s-6); gap: var(--s-8); }
  .mvp-shell .overview-exam-row { grid-template-columns: 1fr; }
  .mvp-shell .overview-profile-grid > div { grid-template-columns: 1fr; gap: var(--s-2); }
  /* 좁은 화면에서는 표 첫 열이 좁아 한 줄 설명이 한 단어씩 떨어진다. 설명은 개요 화면에 있으니 표에서는 감춘다. */
  .mvp-shell table.textbook-matrix tbody th .matrix-tagline { display: none; }
}

/* ===== 커뮤니티: 옛 규칙 덮기 ===== */
.mvp-shell .community-heading { position: static; margin: 0; padding: 0; border: 0; background: transparent; }
.mvp-shell .community-heading::before { display: none; }
.mvp-shell .community-search button[type="submit"] { min-height: 0; padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r-1); background: transparent; color: var(--c-ink-2); font: 600 14px/1.3 var(--f-ui); box-shadow: none; }
.mvp-shell .community-search input[type="search"], .mvp-shell .community-search input[type="text"] { min-height: 0; padding: var(--s-1) 0; border: 0; background: transparent; box-shadow: none; font: var(--t-body); }
.mvp-shell .community-rules { margin: 0; padding: var(--s-5) var(--s-6); }
.mvp-shell .community-rules h2 { font: var(--t-subheading); margin: 0 0 var(--s-2); padding: 0; border: 0; }
.mvp-shell .community-rules ol, .mvp-shell .community-rules ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.mvp-shell .community-rules li { padding: 0; margin: 0; border: 0; }
.mvp-shell .community-rules li b, .mvp-shell .community-rules li strong { display: block; font: var(--t-body-strong); color: var(--c-ink); }
.mvp-shell .community-rules li p { margin: 0; }
/* 공용 테마의 button:not(...) 사슬은 특정도가 높아 보통 규칙으로는 못 이긴다. 검색은 보조 행동이다. */
.mvp-shell .community-search button[type="submit"] { background: transparent !important; color: var(--c-ink-2) !important; border: 0 !important; box-shadow: none !important; padding: var(--s-1) var(--s-2) !important; min-height: 0 !important; }
.mvp-shell .home-timetable .home-pass-rule { margin: var(--s-2) 0 var(--s-4); }
.mvp-shell .section-head > a { font: var(--t-meta); color: var(--c-ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* 교재 목록 표 머리: 옛 규칙이 "제1차"를 블록·큰 글자로 띄워 "과목"과 어긋난다. 한 줄 라벨로 맞춘다. */
.mvp-shell .textbook-matrix thead th { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line-2); vertical-align: baseline; font: var(--t-label); color: var(--c-ink-2); }
.mvp-shell .textbook-matrix thead b { display: inline; font: var(--t-label); color: var(--c-ink); }
.mvp-shell .textbook-matrix thead small { display: inline; margin-left: var(--s-1); font: var(--t-meta); font-size: 12px; color: var(--c-ink-3); }

/* ===== 커뮤니티 소메뉴 · 출제 주제 제안 · 주제 예측 (2026-09-26) =====
참고: 디맨드 PC 커뮤니티(판 목록 + 인기 Top 상자), 당근 모임 랭킹(순위 숫자 + 우측 점수),
퍼플렉시티 좋아요·싫어요(아이콘 쌍, 누른 쪽만 칠함). 소메뉴는 판 탭(밑줄)과 층이 달라야
해서 종이 안 면 위의 분절 버튼으로 그린다. 형광펜은 "시험 전에 칠해 둔 주제가 실제로 나왔다"는
적중 표시에만 쓴다 — 정답 공개와 같은 뜻이다. */
.mvp-shell .community-sections { display: inline-flex; gap: var(--s-1); margin: 0 0 var(--s-6); padding: var(--s-1); border-radius: var(--r-2); background: var(--c-paper-2); border: 1px solid var(--c-line); }
.mvp-shell .community-sections a { padding: var(--s-2) var(--s-4); border-radius: var(--r-1); color: var(--c-ink-2); font: var(--t-body-strong); font-size: 15px; text-decoration: none; }
.mvp-shell .community-sections a:hover { color: var(--c-ink); }
.mvp-shell .community-sections a[aria-current="page"] { background: var(--c-paper); color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-line-2); }
.mvp-shell .topic-exam-label { margin: 0 0 var(--s-1); font: var(--t-label); color: var(--c-ink-3); letter-spacing: 0.02em; }

/* 게시판 레일의 주제 순위 상자 */
.mvp-shell .topic-rank-box { padding: var(--s-5) var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-2); background: var(--c-paper); }
.mvp-shell .topic-rank-box header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.mvp-shell .topic-rank-box h2 { margin: 0; font: var(--t-subheading); }
.mvp-shell .topic-rank-box .meta { font: var(--t-meta); color: var(--c-ink-3); margin: 0 0 var(--s-3); }
.mvp-shell .topic-rank-box header .meta { margin: 0; }
.mvp-shell .topic-rank-box ol { margin: 0 0 var(--s-3); padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.mvp-shell .topic-rank-box li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--s-2); align-items: baseline; font-size: 15px; }
.mvp-shell .topic-rank-no { font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.mvp-shell .topic-rank-box li a { overflow: hidden; color: var(--c-ink); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.mvp-shell .topic-rank-box li a:hover { text-decoration: underline; }
.mvp-shell .topic-rank-score { font: var(--t-meta); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.mvp-shell .topic-rank-more { font: var(--t-meta); color: var(--c-ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* 과목 거르개 — 2차·1차 두 줄 */
.mvp-shell .topic-filters { display: grid; gap: var(--s-2); margin: 0 0 var(--s-6); }
.mvp-shell .topic-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.mvp-shell .topic-filter-stage { width: 32px; font: var(--t-label); color: var(--c-ink-3); }
.mvp-shell .topic-filters a { padding: var(--s-1) var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-full); background: var(--c-paper); color: var(--c-ink-2); font: 500 14px/1.5 var(--f-ui); text-decoration: none; }
.mvp-shell .topic-filters a:hover { border-color: var(--c-line-2); color: var(--c-ink); }
.mvp-shell .topic-filters a[aria-current="page"] { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-paper); }
.mvp-shell .topic-filters .topic-filter-all { justify-self: start; }

.mvp-shell .topic-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-ink); }
.mvp-shell .topic-list-head p { margin: 0; font: var(--t-meta); color: var(--c-ink-2); }
.mvp-shell .topic-list-head strong { color: var(--c-ink); font-weight: 700; }
.mvp-shell .topic-sort { display: flex; gap: var(--s-3); }
.mvp-shell .topic-sort a { font: var(--t-meta); color: var(--c-ink-3); text-decoration: none; }
.mvp-shell .topic-sort a[aria-current="page"] { color: var(--c-ink); font-weight: 700; }

/* 제안 목록 — 순위 · 본문 · 투표 세 칸 */
.mvp-shell .topic-list { margin: 0; padding: 0; list-style: none; }
.mvp-shell .topic-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--c-line); scroll-margin-top: 96px; }
.mvp-shell .topic-item:target { background: linear-gradient(90deg, var(--c-paper-2), transparent); }
.mvp-shell .topic-rank { font: 800 22px/1.3 var(--f-ui); color: var(--c-ink-3); font-variant-numeric: tabular-nums; text-align: center; }
.mvp-shell .topic-item.is-leading .topic-rank { color: var(--c-ink); }
.mvp-shell .topic-rank.is-muted { color: var(--c-line-2); }
.mvp-shell .topic-subject { margin: 0 0 var(--s-1); }
.mvp-shell .topic-title { margin: 0; font: var(--t-subheading); font-size: 18px; color: var(--c-ink); text-wrap: balance; }
.mvp-shell .topic-reason { margin: var(--s-2) 0 0; color: var(--c-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mvp-shell .topic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .topic-mine { color: var(--c-green); font-weight: 600; }
.mvp-shell .topic-report { display: inline-block; }
.mvp-shell .topic-report[open] { display: block; flex-basis: 100%; }
.mvp-shell .topic-report summary { cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.mvp-shell .topic-report summary::-webkit-details-marker { display: none; }
.mvp-shell .topic-report form { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.mvp-shell .topic-report input { min-width: 0; padding: var(--s-1) var(--s-2); border: 1px solid var(--c-line-2); border-radius: var(--r-1); background: var(--c-paper); font: var(--t-meta); color: var(--c-ink); }
.mvp-shell .topic-report button { padding: var(--s-1) var(--s-3); border: 1px solid var(--c-red); border-radius: var(--r-1); background: transparent; color: var(--c-red); font: var(--t-label); }
.mvp-shell .topic-vote { display: flex; flex-direction: column; gap: var(--s-2); align-self: start; }
.mvp-shell .topic-vote form { margin: 0; }
.mvp-shell .vote-button { font: inherit; text-align: left; }
.mvp-shell .vote-button { display: grid; grid-template-columns: 16px auto; grid-template-areas: "icon count" "label label"; align-items: center; justify-items: start; column-gap: var(--s-2); width: 76px; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-2); background: var(--c-paper); color: var(--c-ink-2); cursor: pointer; }
.mvp-shell .vote-button svg { grid-area: icon; }
.mvp-shell .vote-count { grid-area: count; font: 700 16px/1.2 var(--f-ui); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.mvp-shell .vote-label { grid-area: label; font: var(--t-label); font-weight: 500; color: var(--c-ink-3); }
.mvp-shell .vote-button:hover:not(:disabled) { border-color: var(--c-line-2); color: var(--c-ink); }
.mvp-shell .vote-button.is-up[aria-pressed="true"] { border-color: var(--c-green); background: var(--c-green-soft); color: var(--c-green); }
.mvp-shell .vote-button.is-up[aria-pressed="true"] .vote-count, .mvp-shell .vote-button.is-up[aria-pressed="true"] .vote-label { color: var(--c-green); }
.mvp-shell .vote-button.is-down[aria-pressed="true"] { border-color: var(--c-ink-2); background: var(--c-paper-2); color: var(--c-ink); }
.mvp-shell .vote-button:disabled { cursor: default; opacity: 0.6; }
.mvp-shell .vote-button:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }

/* 레일 — 주제 올리기 */
.mvp-shell .topic-compose { padding: var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-2); background: var(--c-paper); }
.mvp-shell .topic-compose h2 { margin: 0 0 var(--s-4); font: var(--t-subheading); }
.mvp-shell .topic-compose .community-form { display: grid; gap: var(--s-3); margin: 0; padding: 0; border: 0; background: transparent; }
.mvp-shell .topic-compose .form-field { margin: 0; }
.mvp-shell .topic-compose .form-field label { font: var(--t-label); color: var(--c-ink-2); }
.mvp-shell .topic-compose select, .mvp-shell .topic-compose input[type="text"], .mvp-shell .topic-compose textarea { width: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line-2); border-radius: var(--r-1); background: var(--c-paper); font: var(--t-body); font-size: 15px; color: var(--c-ink); box-sizing: border-box; }
.mvp-shell .topic-compose .form-check { display: flex; align-items: center; gap: var(--s-2); font: var(--t-meta); color: var(--c-ink-2); }
.mvp-shell .topic-compose .form-check input { width: 16px; height: 16px; margin: 0; }
.mvp-shell .topic-compose .community-write-button { width: 100%; border: 0; cursor: pointer; }
.mvp-shell .topic-lab-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-5) var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-2); background: var(--c-paper); color: var(--c-ink); text-decoration: none; }
.mvp-shell .topic-lab-link b { font: var(--t-subheading); }
.mvp-shell .topic-lab-link span { grid-column: 1; font: var(--t-meta); color: var(--c-ink-2); }
.mvp-shell .topic-lab-link i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; color: var(--c-ink-3); }
.mvp-shell .topic-lab-link:hover { border-color: var(--c-line-2); }

/* 주제 예측 */
.mvp-shell .prediction-tabs { display: flex; gap: var(--s-4); margin: 0 0 var(--s-6); padding: 0; border: 0; background: transparent; }
.mvp-shell .prediction-tabs a { padding: 0 0 var(--s-1); border-radius: 0; border-bottom: 2px solid transparent; color: var(--c-ink-3); font: var(--t-body-strong); font-size: 15px; background: transparent; box-shadow: none; }
.mvp-shell .prediction-tabs a[aria-current="page"] { color: var(--c-ink); border-color: var(--c-green); background: transparent; box-shadow: none; }
.mvp-shell .prediction-head { max-width: 720px; margin: 0 0 var(--s-8); }
.mvp-shell .prediction-head h1 { margin: 0; font: var(--t-title); text-wrap: balance; }
.mvp-shell .prediction-head .community-lede { margin-bottom: 0; }
.mvp-shell .prediction-scoreboard { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-10); margin: 0 0 var(--s-12); padding: var(--s-8); border-radius: var(--r-3); box-shadow: none; }
.mvp-shell .prediction-figure { margin: var(--s-4) 0 0; color: var(--c-ink); font: 800 64px/1 var(--f-ui); letter-spacing: -0.04em; }
.mvp-shell .prediction-figure-label { margin: var(--s-2) 0 var(--s-3); font: var(--t-body-strong); }
.mvp-shell .prediction-headline .meta { margin: 0; font: var(--t-meta); color: var(--c-ink-2); }
.mvp-shell .prediction-bars { padding: 0; gap: var(--s-3); background: transparent; border-radius: 0; }
.mvp-shell .prediction-bars h2 { margin: 0 0 var(--s-1); font: var(--t-label); color: var(--c-ink-3); }
.mvp-shell .prediction-bars .meta { margin: 0; font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .prediction-bar-row { grid-template-columns: 88px minmax(0, 1fr) 76px; font: var(--t-meta); }
.mvp-shell .prediction-bar-name { color: var(--c-ink); font-weight: 600; }
.mvp-shell .prediction-bar-track { height: 12px; border-radius: var(--r-1); background: var(--c-paper-2); }
.mvp-shell .prediction-bar-exact { background: var(--c-green); }
.mvp-shell .prediction-bar-approx { background: var(--c-amber); opacity: 0.55; }
.mvp-shell .prediction-bar-value { text-align: right; }
.mvp-shell .prediction-bar-value span { color: var(--c-ink-3); font-weight: 400; }
.mvp-shell .prediction-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--c-ink-2); }
.mvp-shell .prediction-legend i { border-radius: 2px; }
.mvp-shell .prediction-legend i.is-exact { background: var(--c-green); }
.mvp-shell .prediction-legend i.is-approx { background: var(--c-amber); opacity: 0.55; }
.mvp-shell .prediction-review-note { padding-top: var(--s-4); font: var(--t-meta); color: var(--c-ink-3); }
.mvp-shell .prediction-topics { margin: 0 0 var(--s-12); }
.mvp-shell .prediction-topics > h2, .mvp-shell .prediction-method > h2 { margin: 0; font: var(--t-heading); }
.mvp-shell .prediction-topics > .meta, .mvp-shell .prediction-method > .meta { margin: var(--s-1) 0 var(--s-5); font: var(--t-meta); color: var(--c-ink-2); max-width: 720px; }
.mvp-shell .prediction-subject-tabs.is-enhanced { gap: var(--s-6); margin: 0 0 var(--s-5); padding: 0; border-bottom: 1px solid var(--c-line); }
.mvp-shell .prediction-subject-tabs button { padding: var(--s-3) 0; margin-bottom: -1px; color: var(--c-ink-2); font: var(--t-body-strong); border-radius: 0; }
.mvp-shell .prediction-subject-tabs button[aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-green); background: transparent; }
.mvp-shell .subject-result { margin: 0; }
.mvp-shell .subject-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.mvp-shell .subject-result-head h3 { margin: 0 var(--s-2) 0 0; font: var(--t-heading); }
.mvp-shell .subject-result > .meta { margin: var(--s-1) 0 var(--s-5); font: var(--t-meta); color: var(--c-ink-2); }
.mvp-shell .predicted-laws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.mvp-shell .predicted-laws.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mvp-shell .predicted-law { padding: var(--s-5) var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-2); background: var(--c-paper); }
.mvp-shell .predicted-law h4 { margin: 0 0 var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-line); font: var(--t-subheading); }
.mvp-shell .predicted-law ol, .mvp-shell .predicted-law ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.mvp-shell .predicted-topic { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-2); padding: var(--s-1) var(--s-2); margin: 0 calc(-1 * var(--s-2)); border-radius: var(--r-1); }
.mvp-shell .predicted-rank { font: 700 14px/1.75 var(--f-ui); color: var(--c-ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.mvp-shell .predicted-label { display: grid; }
.mvp-shell .predicted-name { font: var(--t-body); font-size: 15px; line-height: 1.6; color: var(--c-ink-2); }
.mvp-shell .predicted-topic.is-hit { background: var(--c-marker-wash); }
.mvp-shell .predicted-topic.is-hit .predicted-rank, .mvp-shell .predicted-topic.is-hit .predicted-name { color: var(--c-ink); font-weight: 700; }
.mvp-shell .predicted-hit { font: var(--t-meta); font-weight: 600; color: var(--c-ink); }
.mvp-shell .predicted-outside { margin: var(--s-3) 0 var(--s-1); font: var(--t-label); color: var(--c-ink-3); }
.mvp-shell .prediction-table-fold { margin-top: var(--s-5); }
.mvp-shell .prediction-table tr.is-hit td { background: var(--c-marker-wash); }
.mvp-shell .verdict { font: var(--t-label); white-space: nowrap; }
.mvp-shell .verdict.is-exact { color: var(--c-ink); }
.mvp-shell .verdict.is-approx { color: var(--c-amber); }
.mvp-shell .verdict.is-miss, .mvp-shell .verdict.is-gap { color: var(--c-ink-3); }
.mvp-shell .prediction-method { margin: 0 0 var(--s-12); }
.mvp-shell .prediction-method ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin: 0 0 var(--s-5); padding: 0; list-style: none; counter-reset: method; }
.mvp-shell .prediction-method li { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: 2px solid var(--c-ink); counter-increment: method; }
.mvp-shell .prediction-method li strong { font: var(--t-body-strong); }
.mvp-shell .prediction-method li strong::before { content: counter(method) " "; color: var(--c-ink-3); }
.mvp-shell .prediction-method li span { font: var(--t-meta); color: var(--c-ink-2); }
.mvp-shell .prediction-next-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }

@media (max-width: 1024px) {
  .mvp-shell .prediction-method ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mvp-shell .community-sections { display: flex; width: 100%; box-sizing: border-box; }
  .mvp-shell .community-sections a { flex: 1; padding: var(--s-2) var(--s-1); text-align: center; font-size: 14px; white-space: nowrap; }
  .mvp-shell .topic-item { grid-template-columns: 28px minmax(0, 1fr); }
  .mvp-shell .topic-rank { font-size: 18px; }
  .mvp-shell .topic-vote { grid-column: 2; flex-direction: row; }
  .mvp-shell .vote-button { grid-template-columns: 16px auto auto; grid-template-areas: "icon label count"; width: auto; padding: var(--s-1) var(--s-3); }
  .mvp-shell .topic-filter-group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mvp-shell .topic-filters a { flex: none; }
  .mvp-shell .topic-filter-stage { flex: none; }
  .mvp-shell .prediction-scoreboard { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-6); }
  .mvp-shell .prediction-figure { font-size: 52px; }
  .mvp-shell .prediction-legend { grid-template-columns: 1fr; }
  .mvp-shell .predicted-laws, .mvp-shell .predicted-laws.is-3 { grid-template-columns: 1fr; }
  .mvp-shell .prediction-method ol, .mvp-shell .prediction-next-links { grid-template-columns: 1fr; }
}