:root {
  color-scheme: light;
}

/* 회원 제품 셸: 시험 준비 책상의 선명한 구획과 잉크색 위계를 따른다. */
.mvp-shell .account-main {
  max-width: 980px;
}

.mvp-shell .lesson-body a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mvp-shell .lesson-body {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.mvp-shell .lesson-body pre {
  max-width: 100%;
  overflow-x: auto;
}

.mvp-shell .mypage-intro,
.mvp-shell .community-heading {
  position: relative;
  margin-bottom: 38px;
  padding: 12px 0 28px 22px;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .mypage-intro::before,
.mvp-shell .community-heading::before {
  position: absolute;
  top: 16px;
  bottom: 32px;
  left: 0;
  width: 3px;
  background: var(--mvp-brand);
  content: "";
}

.mvp-shell .community-kicker {
  margin: 0 0 8px;
  color: var(--mvp-brand);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.mvp-shell .mypage-intro h1,
.mvp-shell .community-heading h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.mvp-shell .mypage-lede,
.mvp-shell .community-lede {
  max-width: 620px;
  margin: 12px 0 0;
  color: var(--mvp-muted);
}

.mvp-shell .community-heading .community-write-button {
  position: absolute;
  right: 0;
  bottom: 28px;
}

.mvp-shell .mypage-section {
  margin: 44px 0 0;
}

.mvp-shell .mypage-section-heading,
.mvp-shell .community-section-heading {
  display: flex;
  margin-bottom: 14px;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.mvp-shell .mypage-section-heading > span {
  color: var(--mvp-brand);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.mvp-shell .mypage-section-heading h2,
.mvp-shell .community-section-heading h2 {
  margin: 0 auto 0 0;
  font-size: 22px;
  letter-spacing: -0.035em;
}

.mvp-shell .community-section-heading > span {
  color: var(--mvp-subtle);
  font-size: 13px;
}

.mvp-shell .mypage-action-list {
  border-top: 1px solid var(--mvp-line-strong);
}

.mvp-shell .mypage-action {
  display: grid;
  min-height: 78px;
  padding: 16px 10px;
  grid-template-columns: minmax(130px, 0.7fr) minmax(260px, 1.6fr) 32px;
  align-items: center;
  gap: 24px;
  color: var(--mvp-text);
  border-bottom: 1px solid var(--mvp-line);
  text-decoration: none;
  transition: background-color 140ms ease, padding 140ms ease;
}

.mvp-shell .mypage-action:hover {
  padding-inline: 16px;
  background: var(--mvp-bg-soft);
}

.mvp-shell .mypage-action span {
  color: var(--mvp-muted);
  font-size: 14px;
}

.mvp-shell .mypage-action i {
  color: var(--mvp-brand);
  font-size: 20px;
  font-style: normal;
  text-align: right;
}

/* 학습 현황 카드 — 마이페이지에서 가장 먼저 답해야 하는 질문은 "내가 어디까지 왔나"다. */
.mvp-shell .activity-optional-note {
  display: block;
  margin-top: 8px;
  font-size: 13px;
}

/* 세션에서 직접 쓴 정리를 되돌려 보여주는 자리. */
.mvp-shell .session-note {
  margin: 12px 0 0;
  padding: 12px 16px;
  background: var(--mvp-bg-soft);
  border-left: 3px solid var(--mvp-brand);
  border-radius: 0 10px 10px 0;
}

.mvp-shell .session-note span {
  font-size: 12px;
  font-weight: 700;
}

.mvp-shell .session-note p {
  margin: 4px 0 0;
}

/* 학습계획 — 다음 한 걸음이 먼저 오고, 나머지 Day 는 접어 둔다. */
.mvp-shell .plan-next {
  margin: 22px 0 30px;
}

.mvp-shell .plan-next-label {
  display: block;
  margin-bottom: 8px;
  color: var(--mvp-brand);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.mvp-shell .plan-next-card {
  display: block;
  border-color: var(--mvp-brand);
}

.mvp-shell .plan-next-card strong {
  font-size: 18px;
}

.mvp-shell .plan-next-card .muted {
  display: block;
  margin-top: 4px;
}

.mvp-shell .plan-day {
  margin: 14px 0;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .plan-day > summary {
  display: flex;
  padding: 12px 2px;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}

.mvp-shell .plan-day > summary::-webkit-details-marker {
  display: none;
}

.mvp-shell .plan-day > summary b {
  font-size: 16px;
}

.mvp-shell .plan-day[open] > summary {
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .mypage-status {
  margin: 0 0 44px;
  padding: 26px 28px;
  background: var(--mvp-bg-soft);
  border: 1px solid var(--mvp-line);
  border-radius: 20px;
}

.mvp-shell .mypage-status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.mvp-shell .mypage-status-head h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.035em;
}

.mvp-shell .mypage-status-meta {
  margin: 6px 0 0;
  color: var(--mvp-muted);
  font-size: 14px;
}

.mvp-shell .mypage-plan-tag {
  padding: 6px 12px;
  color: var(--mvp-brand);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.mvp-shell .mypage-progress {
  margin-top: 22px;
}

.mvp-shell .mypage-progress-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.mvp-shell .mypage-progress-line strong {
  font-size: 30px;
  letter-spacing: -0.04em;
}

.mvp-shell .mypage-progress-line span {
  color: var(--mvp-muted);
  font-size: 14px;
}

.mvp-shell .mypage-progress-track {
  margin-top: 10px;
  height: 8px;
  background: var(--mvp-line);
  border-radius: 999px;
  overflow: hidden;
}

.mvp-shell .mypage-progress-track > span {
  display: block;
  height: 100%;
  background: var(--mvp-brand);
  border-radius: 999px;
}

.mvp-shell .mypage-stats {
  display: grid;
  margin: 22px 0 0;
  padding-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 16px;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .mypage-stats dt {
  color: var(--mvp-muted);
  font-size: 13px;
}

.mvp-shell .mypage-stats dd {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mvp-shell .mypage-status-empty {
  margin: 20px 0 0;
  color: var(--mvp-muted);
}

.mvp-shell .mypage-status-action {
  display: inline-block;
  margin-top: 20px;
}

.mvp-shell .mypage-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px;
  align-items: start;
}

/* 2열 안에서는 섹션이 위쪽에 나란히 붙어야 한다 — 기본 여백을 두면 열이 어긋난다. */
.mvp-shell .mypage-columns > .mypage-section {
  margin-top: 0;
}

/* 2열 안에서는 한 줄에 라벨·설명·화살표를 나란히 놓을 폭이 없다. 설명을 아래로
   내리고 화살표만 오른쪽에 세운다 — 좁은 화면에서 쓰던 배치와 같다. */
.mvp-shell .mypage-columns .mypage-action {
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 4px 12px;
}

.mvp-shell .mypage-columns .mypage-action strong,
.mvp-shell .mypage-columns .mypage-action span {
  grid-column: 1;
}

.mvp-shell .mypage-columns .mypage-action i {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.mvp-shell .mypage-section-link {
  color: var(--mvp-brand);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.mvp-shell .mypage-activity-title {
  display: flex;
  margin: 0 0 8px;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
}

.mvp-shell .mypage-activity-title em {
  color: var(--mvp-brand);
  font-style: normal;
  font-weight: 800;
}

.mvp-shell .mypage-activity > .mypage-history-list + .mypage-activity-title {
  margin-top: 28px;
}

@media (max-width: 900px) {
  .mvp-shell .mypage-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
}

.mvp-shell .mypage-history-list,
.mvp-shell .community-post-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--mvp-line-strong);
  list-style: none;
}

.mvp-shell .mypage-history-list li {
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .mypage-history-list li > a {
  display: flex;
  min-height: 82px;
  padding: 15px 4px;
  flex-direction: column;
  justify-content: center;
  color: var(--mvp-text);
  text-decoration: none;
}

.mvp-shell .mypage-history-list span,
.mvp-shell .mypage-history-list time {
  color: var(--mvp-muted);
  font-size: 13px;
}

.mvp-shell .mypage-empty {
  display: flex;
  min-height: 150px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: var(--mvp-muted);
  background: var(--mvp-bg-soft);
}

.mvp-shell .mypage-empty a {
  margin-top: 10px;
  font-weight: 800;
}

.mvp-shell .mypage-account-links {
  margin-top: 54px;
  padding-top: 22px;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .mypage-account-links h2 {
  margin: 0 0 12px;
  color: var(--mvp-muted);
  font-size: 14px;
}

.mvp-shell .mypage-account-links nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.mvp-shell .mypage-account-links a {
  min-height: 44px;
  padding: 10px 0;
  color: var(--mvp-muted);
  font-size: 14px;
}

.mvp-shell .mypage-account-links .danger-link {
  color: var(--mvp-danger);
}

.mvp-shell .community-write-button,
.mvp-shell .member-primary-action {
  display: inline-flex;
  min-height: 44px;
  padding: 0 18px;
  align-items: center;
  justify-content: center;
  color: var(--mvp-surface);
  background: var(--mvp-brand);
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
}

.mvp-shell .community-tabs {
  overflow-x: auto;
  border-bottom: 1px solid var(--mvp-line);
  scrollbar-width: none;
}

.mvp-shell .community-tabs ul {
  display: flex;
  min-width: max-content;
  margin: 0;
  padding: 0;
  gap: 26px;
  list-style: none;
}

.mvp-shell .community-tabs a {
  display: block;
  min-height: 44px;
  padding: 10px 2px 11px;
  color: var(--mvp-muted);
  border-bottom: 2px solid transparent;
  font-weight: 750;
  text-decoration: none;
}

.mvp-shell .community-tabs a[aria-current="page"] {
  color: var(--mvp-text);
  border-color: var(--mvp-brand);
}

.mvp-shell .community-search {
  display: grid;
  margin: 22px 0 36px;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.mvp-shell .community-search label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.mvp-shell .community-search input {
  min-height: 46px;
}

.mvp-shell .community-search button,
.mvp-shell .community-editor button {
  min-height: 44px;
}

.mvp-shell .community-post-item {
  display: grid;
  min-height: 78px;
  padding: 14px 4px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .community-post-item > a {
  color: var(--mvp-text);
  font-size: 16px;
  font-weight: 760;
  text-decoration: none;
}

.mvp-shell .community-post-item > span {
  color: var(--mvp-subtle);
  font-size: 12px;
  white-space: nowrap;
}

.mvp-shell .community-post-item b {
  color: var(--mvp-brand);
}

.mvp-shell .community-empty {
  padding: 54px 24px;
  text-align: center;
  background: var(--mvp-bg-soft);
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .community-pagination {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.mvp-shell .community-pagination a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-weight: 750;
}

.mvp-shell .community-rules {
  margin-top: 46px;
  padding: 22px 24px;
  background: var(--mvp-bg-soft);
  border-left: 3px solid var(--mvp-line-strong);
}

.mvp-shell .community-rules h2 {
  margin-top: 0;
  font-size: 16px;
}

.mvp-shell .community-disclaimer {
  color: var(--mvp-subtle);
  font-size: 12px;
}

.mvp-shell .community-form-heading,
.mvp-shell .community-editor {
  width: min(720px, 100%);
  margin-inline: auto;
}

.mvp-shell .community-form-heading {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .community-editor {
  padding: 26px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .community-form-actions {
  display: flex;
  margin-top: 28px;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.mvp-shell :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mvp-brand) 46%, transparent);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .mvp-shell .mypage-intro,
  .mvp-shell .community-heading {
    margin-bottom: 28px;
    padding-left: 16px;
  }

  .mvp-shell .community-heading {
    padding-bottom: 84px;
  }

  .mvp-shell .community-heading .community-write-button {
    right: auto;
    bottom: 24px;
    left: 16px;
  }

  .mvp-shell .mypage-action {
    padding: 16px 4px;
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 4px 12px;
  }

  .mvp-shell .mypage-action span {
    grid-column: 1;
  }

  .mvp-shell .mypage-action i {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .mvp-shell .community-post-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .mvp-shell .community-post-item > span {
    white-space: normal;
  }

  .mvp-shell .community-editor {
    padding: 18px 14px;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --mvp-bg: #090b10;
  --mvp-bg-soft: #0d1118;
  --mvp-surface: #121720;
  --mvp-surface-raised: #171e29;
  --mvp-surface-strong: #1c2532;
  --mvp-text: #f5f7fa;
  --mvp-muted: #9aa6b6;
  --mvp-subtle: #8b97ab;
  --mvp-line: rgba(163, 177, 198, 0.14);
  --mvp-line-strong: rgba(163, 177, 198, 0.24);
  --mvp-brand: #4ade80;
  --mvp-brand-strong: #22c55e;
  --mvp-brand-soft: rgba(74, 222, 128, 0.12);
  --mvp-warning: #fbbf24;
  --mvp-danger: #fb7185;
  --mvp-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --mvp-card-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

html {
  scroll-behavior: smooth;
}

body.mvp-shell {
  min-height: 100vh;
  margin: 0;
  color: var(--mvp-text);
  background: var(--mvp-bg);
  font-family:
    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* 한글은 낱말 안에서 끊으면 안 된다. 브라우저 기본값은 글자 단위로 쪼갠다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
  transition: color 180ms ease, background-color 180ms ease;
}

/* 제목은 줄 길이를 고르게. 마지막 줄에 한 낱말만 떨어지는 것을 막는다. */
.mvp-shell h1,
.mvp-shell h2,
.mvp-shell h3,
.mvp-shell .stage-title,
.mvp-shell .landing-hero-copy h1,
.mvp-shell .v2-hero-copy h1 {
  text-wrap: balance;
}

/* 두 문장 이상인 본문은 문장이 각각 블록이다. 줄바꿈이 문장 경계에서 먼저 일어나
   앞줄 끝에 다음 문장의 첫 낱말이 붙는 모양이 사라진다. CSS 만으로는 문장을 알 수
   없어 `{% copy %}` 가 문장별로 감싼다(operations/korean_text.py). */
.mvp-shell .ko-s {
  display: block;
}

/* 인라인으로 흘러야 하는 자리에서는 문장 블록을 끈다 — 배지·버튼·표 안 라벨 등. */
.mvp-shell button .ko-s,
.mvp-shell .button .ko-s,
.mvp-shell summary .ko-s,
.mvp-shell th .ko-s,
.mvp-shell .landing-outline-badge .ko-s,
.mvp-shell .landing-soon-badge .ko-s,
.mvp-shell .landing-warn-badge .ko-s,
.mvp-shell .landing-status .ko-s,
.mvp-shell .hub-badge .ko-s,
.mvp-shell .v2-tool .ko-s,
.mvp-shell .wiki-level-tag .ko-s,
.mvp-shell .wiki-reviewed-badge .ko-s,
.mvp-shell .wiki-draft-badge .ko-s,
.mvp-shell .badge .ko-s {
  display: inline;
}

:root[data-theme="dark"] body.mvp-shell {
  background:
    radial-gradient(circle at 80% -10%, rgba(74, 222, 128, 0.11), transparent 31rem),
    radial-gradient(circle at -10% 32%, rgba(139, 156, 248, 0.08), transparent 26rem),
    var(--mvp-bg);
}

.mvp-shell *,
.mvp-shell *::before,
.mvp-shell *::after {
  box-sizing: border-box;
}

/* 브라우저 기본 [hidden] 은 display:none 한 줄이라 우리 컴포넌트 규칙이 그냥 이긴다.
   스크립트가 hidden 으로 감춘 요소가 그대로 보이게 되므로 여기서 못을 박는다. */
.mvp-shell [hidden] {
  display: none !important;
}

.mvp-shell a {
  color: var(--mvp-brand);
  text-underline-offset: 3px;
}

.mvp-shell .site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  width: 100%;
  border-top: 3px solid var(--mvp-brand);
  border-bottom: 1px solid var(--mvp-line);
  background: color-mix(in srgb, var(--mvp-bg) 84%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.mvp-shell .header-inner {
  display: flex;
  width: min(1180px, calc(100% - 40px));
  min-height: 74px;
  margin: auto;
  padding: 0;
  align-items: center;
  gap: 24px;
  border: 0;
}

.mvp-shell .brand-lockup {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  color: var(--mvp-text);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.mvp-shell .brand-label {
  display: inline-flex;
  white-space: nowrap;
}

/* 워드마크 `ssy.` — 주소(ssy.kr)와 같은 글자다. 상자에 가두지 않는다. */
.mvp-shell .brand-mark {
  color: var(--mvp-text);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 1;
}

.mvp-shell .brand-mark i {
  color: var(--mvp-brand);
  font-style: normal;
}

.mvp-shell .desktop-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mvp-shell .desktop-nav a,
.mvp-shell .header-actions > a,
.mvp-shell .header-actions .inline button {
  padding: 9px 11px;
  position: relative;
  color: var(--mvp-muted);
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 720;
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
}

.mvp-shell .desktop-nav a:hover,
.mvp-shell .header-actions > a:hover,
.mvp-shell .header-actions .inline button:hover {
  color: var(--mvp-text);
  background: var(--mvp-surface-raised);
}

.mvp-shell .desktop-nav a[aria-current="page"] {
  color: var(--mvp-text);
  font-weight: 850;
}

.mvp-shell .desktop-nav a[aria-current="page"]::after {
  position: absolute;
  right: 11px;
  bottom: -1px;
  left: 11px;
  height: 2px;
  background: var(--mvp-brand);
  border-radius: 2px 2px 0 0;
  content: "";
}

.mvp-shell .header-actions {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 4px;
}

/* 테마 전환과 앱 설치는 푸터 끝에 있다. 본문을 읽는 데 끼어들지 않도록
   테두리 없는 글자 단추로 두고, 링크와 같은 크기를 쓴다. */
.mvp-shell .footer-utilities {
  display: flex;
  margin-top: 26px;
  align-items: center;
  gap: 18px;
}

.mvp-shell .footer-utilities button {
  display: inline-flex;
  padding: 0;
  align-items: center;
  gap: 7px;
  color: var(--mvp-muted);
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mvp-shell .footer-utilities button:hover {
  color: var(--mvp-text);
}

.mvp-shell .theme-icon::before {
  content: "☀";
  font-size: 17px;
}

:root[data-theme="dark"] .mvp-shell .theme-icon::before {
  content: "◐";
}

.mvp-shell .site-main {
  width: min(1080px, calc(100% - 40px));
  min-height: calc(100vh - 260px);
  margin: auto;
  padding: 54px 0 96px;
}

.mvp-shell .site-main.account-main {
  width: min(700px, calc(100% - 40px));
}

.mvp-shell .site-footer {
  width: min(1080px, calc(100% - 40px));
  margin: auto;
  padding: 40px 0 54px;
  color: var(--mvp-subtle);
  border-top: 1px solid var(--mvp-line);
  font-size: 13px;
}

.mvp-shell .footer-brand {
  display: block;
  margin-bottom: 7px;
  color: var(--mvp-muted);
  font-weight: 800;
}

.mvp-shell .footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 1fr);
  gap: 24px;
}

.mvp-shell .footer-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mvp-shell .footer-column strong {
  margin-bottom: 3px;
  color: var(--mvp-text);
  font-size: 13px;
}

.mvp-shell .footer-column p,
.mvp-shell .footer-column a {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 13px;
  text-decoration: none;
}

.mvp-shell .footer-column a:hover {
  color: var(--mvp-brand);
}

.mvp-shell .footer-attribution {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell h1,
.mvp-shell h2,
.mvp-shell h3,
.mvp-shell h4 {
  color: var(--mvp-text);
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.mvp-shell h1 {
  margin: 14px 0 18px;
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1.06;
}

.mvp-shell h2 {
  margin: 58px 0 14px;
  font-size: clamp(25px, 3vw, 32px);
  line-height: 1.22;
}

.mvp-shell h3 {
  margin: 12px 0 7px;
  font-size: 20px;
  line-height: 1.35;
}

.mvp-shell h4 {
  margin: 28px 0 8px;
  font-size: 17px;
}

.mvp-shell .muted,
.mvp-shell .helptext {
  color: var(--mvp-muted);
}

.mvp-shell .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--mvp-brand);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mvp-shell .eyebrow::before {
  width: 7px;
  height: 7px;
  background: var(--mvp-brand);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--mvp-brand-soft);
  content: "";
}

/* 라이트는 중립 회색 + 초록 하나가 팔레트 전부다. 다크에서 쓰던 보라 기운 그라디언트는
   흰 배경 위에서 브랜드 밖 색으로 읽히므로 평평한 표면으로 둔다 (사양서 §1). */
.mvp-shell .hero {
  position: relative;
  min-height: 330px;
  padding: clamp(30px, 5vw, 58px);
  overflow: hidden;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 26px;
  box-shadow: var(--mvp-shadow);
}

:root[data-theme="dark"] .mvp-shell .hero {
  background:
    linear-gradient(125deg, rgba(74, 222, 128, 0.1), transparent 46%),
    linear-gradient(310deg, rgba(139, 156, 248, 0.13), transparent 48%),
    var(--mvp-surface);
}

:root[data-theme="dark"] .mvp-shell .hero::after {
  position: absolute;
  top: -90px;
  right: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.16), transparent 68%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.mvp-shell .hero-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.mvp-shell .hero-copy > p {
  max-width: 690px;
  margin: 0;
  color: var(--mvp-muted);
  font-size: clamp(15px, 2vw, 18px);
}

.mvp-shell .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.mvp-shell .button,
/* 세그먼트 토글·해설 탭·목록 필터는 이 채워진 기본 버튼 모양을 쓰지 않는다.
   :not(.inline button) 때문에 이 규칙의 특정도가 높아 뒤에 오는 자기 규칙을
   이겨버린다. 셀렉터에서 아예 제외한다. */
.mvp-shell
  button:not(.theme-toggle):not(.install-button):not(.inline button):not([data-answer-toggle]):not(
    [data-commentary-tab]
  ):not([data-list-filter]):not([data-list-view]):not([data-prediction-tab]):not(
    [data-assessment-clear]
  ):not([data-question-choice]):not([data-plain-button]) {
  display: inline-flex;
  width: auto;
  min-height: 44px;
  padding: 11px 17px;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--mvp-brand);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.mvp-shell .button-secondary {
  color: var(--mvp-muted);
  background: transparent;
  border: 1px solid var(--mvp-line-strong);
  box-shadow: none;
}

.mvp-shell .trust-strip {
  display: grid;
  /* 카드가 4장이면 한 줄 4칸. 검증 실패로 카드가 빠져도 마지막 줄에 한 장만 남지 않는다. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.mvp-shell .trust-item {
  padding: 18px 20px;
  background: color-mix(in srgb, var(--mvp-surface) 88%, transparent);
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
}

.mvp-shell .trust-item strong {
  display: block;
  margin-bottom: 3px;
  color: var(--mvp-text);
  font-size: 17px;
}

.mvp-shell .trust-item span {
  color: var(--mvp-muted);
  font-size: 13px;
}

.mvp-shell .section-heading {
  display: flex;
  margin-top: 58px;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.mvp-shell .section-heading h2 {
  margin: 0;
}

.mvp-shell .section-heading p {
  max-width: 560px;
  margin: 0;
  color: var(--mvp-muted);
  font-size: 14px;
}

.mvp-shell .feature-grid,
.mvp-shell .year-grid,
.mvp-shell .metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.mvp-shell .year-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mvp-shell .card {
  display: block;
  margin: 12px 0;
  padding: 22px;
  color: var(--mvp-text);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 18px;
  box-shadow: var(--mvp-card-shadow);
  text-decoration: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.mvp-shell a.card:hover {
  background: var(--mvp-surface-raised);
  border-color: color-mix(in srgb, var(--mvp-brand) 42%, var(--mvp-line));
  transform: translateY(-2px);
}

.mvp-shell .feature-grid .card,
.mvp-shell .year-grid .card,
.mvp-shell .metric-grid .card {
  height: 100%;
  margin: 0;
}

.mvp-shell .feature-card {
  position: relative;
  min-height: 210px;
  padding: 27px;
  overflow: hidden;
}

.mvp-shell .feature-card::after {
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: var(--mvp-subtle);
  font-size: 22px;
  content: "↗";
}

.mvp-shell .feature-card-primary {
  background:
    linear-gradient(135deg, rgba(74, 222, 128, 0.13), transparent 58%),
    var(--mvp-surface);
}

.mvp-shell .feature-card p,
.mvp-shell .card p {
  color: var(--mvp-muted);
}

.mvp-shell .card-kicker {
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 배지 5종 (사양서 §1). 기본은 중립이고, 초록은 실제로 좋은 소식일 때만 쓴다 —
   판정 출처나 문항 번호 같은 사실 라벨까지 초록으로 칠하면 강조가 의미를 잃는다.
   액센트는 초록 하나뿐이다. 다크 팔레트에서 넘어온 보라 액센트 토큰은 걷어냈다. */
.mvp-shell .badge {
  display: inline-flex;
  min-height: 27px;
  padding: 4px 10px;
  align-items: center;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.mvp-shell .badge-accent {
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  border-color: color-mix(in srgb, var(--mvp-brand) 22%, transparent);
}

.mvp-shell .badge-warn {
  color: var(--mvp-warning);
  background: color-mix(in srgb, var(--mvp-warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--mvp-warning) 26%, transparent);
}

.mvp-shell .badge-outline {
  color: var(--mvp-muted);
  background: transparent;
  border-color: var(--mvp-line-strong);
}

.mvp-shell .badge-solid {
  color: #ffffff;
  background: var(--mvp-text);
  border-color: var(--mvp-text);
}

.mvp-shell .notice {
  margin: 22px 0;
  padding: 19px 21px;
  color: var(--mvp-text);
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-left: 3px solid var(--mvp-brand);
  border-radius: 15px;
}

.mvp-shell .source {
  margin-top: 18px;
  padding: 18px 20px;
  color: var(--mvp-muted);
  background: color-mix(in srgb, var(--mvp-surface-raised) 72%, transparent);
  border: 1px solid var(--mvp-line);
  border-radius: 14px;
  font-size: 14px;
}

.mvp-shell .source a {
  overflow-wrap: anywhere;
}

.mvp-shell .question-block {
  margin: 18px 0 32px;
  padding: clamp(22px, 4vw, 34px);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 20px;
  box-shadow: var(--mvp-card-shadow);
}

.mvp-shell .question-block li {
  margin: 5px 0;
}

.mvp-shell .answer-body {
  padding: 17px 19px;
  overflow-x: auto;
  /* 본문은 Markdown 을 렌더한 블록이다. pre-wrap 을 두면 마크업 사이의 줄바꿈까지
     그대로 살아나 문단 사이가 비정상적으로 벌어진다. */
  white-space: normal;
  /* 예시 답안에는 수식·영문처럼 끊을 자리가 없는 긴 토큰이 섞인다. 그대로 두면 부모를 밀어
     페이지 전체가 가로로 넘친다. 다만 `anywhere` 는 최소 너비 계산까지 바꿔 표 칸을 한 글자
     폭으로 눌러 버린다. 넘칠 때만 낱말 안에서 끊고, 그래도 넘치면 이 상자만 스크롤한다. */
  overflow-wrap: break-word;
  background: var(--mvp-bg-soft);
  border: 1px solid var(--mvp-line);
  border-radius: 14px;
}

.mvp-shell .answer-body > :first-child {
  margin-top: 0;
}

.mvp-shell .answer-body > :last-child {
  margin-bottom: 0;
}

/* 해설 본문의 표. 금액 칸에도 계산 과정이 함께 들어와 숫자만 있는 칸이 아니므로
   왼쪽 정렬로 둔다. */
.mvp-shell .answer-body table {
  width: 100%;
  /* 좁은 화면에서 칸을 짜부라뜨리는 대신 감싸는 `.table-scroll` 이 가로로 스크롤되게 한다. */
  min-width: 460px;
  margin: 14px 0;
  border-collapse: collapse;
  font-size: 0.94em;
}

.mvp-shell .answer-body th,
.mvp-shell .answer-body td {
  padding: 7px 10px;
  border: 1px solid var(--mvp-line);
  text-align: left;
  vertical-align: top;
}

.mvp-shell .answer-body thead th {
  background: var(--mvp-surface);
  font-weight: 600;
}

.mvp-shell .answer-body blockquote {
  margin: 14px 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--mvp-line);
  color: var(--mvp-muted);
}

.mvp-shell .choices {
  padding: 0;
  list-style: none;
}

.mvp-shell .choice {
  margin: 10px 0;
  padding: 15px 17px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 13px;
}

.mvp-shell .choice.answer {
  background: var(--mvp-brand-soft);
  border-color: var(--mvp-brand);
}

.mvp-shell .subject-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 30px;
}

.mvp-shell .subject-nav a {
  padding: 8px 12px;
  color: var(--mvp-muted);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
}

.mvp-shell .subject-nav a:hover {
  color: var(--mvp-text);
  border-color: var(--mvp-brand);
}

.mvp-shell .share-row {
  display: flex;
  flex-wrap: wrap;
  margin: 24px 0;
  align-items: center;
  gap: 11px;
}

.mvp-shell .progress {
  width: 100%;
  height: 9px;
  overflow: hidden;
  background: var(--mvp-surface-strong);
  border-radius: 999px;
}

.mvp-shell .progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--mvp-brand-strong), var(--mvp-brand));
}

/* 폼 옆에 "계정을 만들면" 을 세운다. 좁아지면 폼이 먼저 오도록 세로로 쌓는다. */
.mvp-shell .auth-shell {
  display: grid;
  max-width: 940px;
  margin: 20px auto 0;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas:
    'heading reasons'
    'card reasons';
  align-content: start;
  gap: 0 40px;
}

.mvp-shell .auth-heading {
  grid-area: heading;
}

.mvp-shell .auth-card {
  grid-area: card;
}

.mvp-shell .auth-reasons {
  grid-area: reasons;
  align-self: start;
  padding: 22px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 14px;
}

.mvp-shell .auth-reasons h2 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 800;
}

.mvp-shell .auth-reasons ol {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 15px;
  list-style: none;
  counter-reset: reason;
}

.mvp-shell .auth-reasons li {
  display: grid;
  gap: 4px;
}

.mvp-shell .auth-reasons strong {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mvp-shell .auth-reasons strong::before {
  counter-increment: reason;
  margin-right: 6px;
  color: var(--mvp-brand);
  content: counter(reason);
}

.mvp-shell .auth-reasons span {
  font-size: 12.5px;
  line-height: 1.55;
}

/* 마지막 항목은 가입 이유가 아니라 "가입하지 않아도 된다" 는 안내다. 번호를 붙이지 않는다. */
.mvp-shell .auth-reasons li.is-note {
  padding-top: 15px;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .auth-reasons li.is-note strong::before {
  content: none;
}

@media (max-width: 860px) {
  .mvp-shell .auth-shell {
    max-width: 580px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'heading'
      'card'
      'reasons';
    gap: 0;
  }

  .mvp-shell .auth-reasons {
    margin-top: 26px;
  }
}

/* 오른쪽에 "계정을 만들면" 이 붙는 두 단 배치라 제목을 가운데 두면 축이 어긋난다.
   한 단으로 접히는 좁은 화면에서만 가운데로 되돌린다. */
.mvp-shell .auth-heading {
  margin-bottom: 28px;
}

.mvp-shell .auth-heading h1 {
  font-size: clamp(30px, 5vw, 44px);
}

@media (max-width: 860px) {
  .mvp-shell .auth-heading {
    text-align: center;
  }

  .mvp-shell .auth-heading h1 {
    font-size: clamp(34px, 7vw, 52px);
  }
}

.mvp-shell .auth-card {
  padding: clamp(24px, 5vw, 36px);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 22px;
  box-shadow: var(--mvp-shadow);
}

.mvp-shell form p {
  margin: 18px 0;
}

.mvp-shell label {
  display: block;
  margin-bottom: 7px;
  color: var(--mvp-text);
  font-size: 14px;
  font-weight: 760;
}

.mvp-shell input,
.mvp-shell select,
.mvp-shell textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  color: var(--mvp-text);
  background: var(--mvp-bg-soft);
  border: 1px solid var(--mvp-line-strong);
  border-radius: 12px;
  outline: 0;
  font: inherit;
}

.mvp-shell input:focus,
.mvp-shell select:focus,
.mvp-shell textarea:focus {
  border-color: var(--mvp-brand);
  box-shadow: 0 0 0 3px var(--mvp-brand-soft);
}

.mvp-shell input[type="checkbox"],
.mvp-shell input[type="radio"] {
  width: auto;
  min-height: auto;
  margin-right: 7px;
  accent-color: var(--mvp-brand-strong);
}

.mvp-shell .signup-consent-docs {
  margin: 4px 0 18px;
  font-size: 13px;
  line-height: 1.9;
}

.mvp-shell .signup-consent-docs .muted {
  font-size: 12px;
}

/* 비밀번호 보기 토글 — 스크립트가 없으면 이 상자도 생기지 않는다. */
.mvp-shell .password-field {
  position: relative;
}

.mvp-shell .password-field input {
  padding-right: 74px;
}

.mvp-shell .password-reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  min-height: 34px;
  padding: 0 12px;
  color: var(--mvp-muted);
  background: transparent;
  border: 1px solid var(--mvp-line-strong);
  border-radius: 9px;
  font-size: 13px;
  transform: translateY(-50%);
}

.mvp-shell .password-reveal:hover {
  color: var(--mvp-text);
  background: var(--mvp-bg-soft);
}

/* 폼 한 벌의 공통 배치. templates/forms/_fields.html 과 짝이다. */
.mvp-shell .form-field {
  margin: 18px 0;
}

.mvp-shell .form-field-check {
  margin: 14px 0;
}

/* 체크박스는 제 라벨 안에 들어간다 — 라벨이 block 이라 그냥 두면 아래 줄로 떨어져
   어느 항목의 체크박스인지 알 수 없게 된다. */
.mvp-shell .form-check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.55;
  cursor: pointer;
}

.mvp-shell .form-check input[type="checkbox"] {
  margin-top: 3px;
  margin-right: 0;
  flex: none;
}

.mvp-shell .form-help {
  margin: 7px 0 0;
  color: var(--mvp-muted);
  font-size: 13px;
  line-height: 1.6;
}

.mvp-shell .form-error {
  margin: 7px 0 0;
  color: var(--mvp-danger);
  font-size: 13px;
  line-height: 1.6;
}

.mvp-shell .form-field.is-invalid input,
.mvp-shell .form-field.is-invalid select,
.mvp-shell .form-field.is-invalid textarea {
  border-color: var(--mvp-danger);
}

.mvp-shell .form-errors {
  margin-bottom: 18px;
}

.mvp-shell .auth-card button[type="submit"] {
  width: 100%;
  margin-top: 5px;
}

.mvp-shell .auth-switch {
  margin-top: 22px;
  color: var(--mvp-muted);
  text-align: center;
  font-size: 14px;
}

.mvp-shell .messages {
  padding: 0;
  list-style: none;
}

.mvp-shell .messages li {
  padding: 13px 15px;
  color: var(--mvp-text);
  background: var(--mvp-brand-soft);
  border: 1px solid color-mix(in srgb, var(--mvp-brand) 20%, transparent);
  border-radius: 12px;
}

.mvp-shell .errorlist {
  padding-left: 20px;
  color: var(--mvp-danger);
  font-size: 13px;
}

.mvp-shell hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .mobile-primary-nav {
  display: none;
}

@media (max-width: 820px) {
  .mvp-shell .header-inner {
    width: calc(100% - 28px);
    min-height: 60px;
  }

  /* 좁은 화면에서는 메뉴가 아래 막대로 내려간다. 머리에는 계정 하나만 남는다. */
  .mvp-shell .desktop-nav,
  .mvp-shell .header-actions .inline {
    display: none;
  }

  .mvp-shell .header-actions {
    gap: 8px;
  }

  .mvp-shell .header-actions > a {
    padding: 8px 12px;
    font-size: 13px;
  }

  .mvp-shell .site-main,
  .mvp-shell .site-main.account-main {
    width: calc(100% - 28px);
    padding: 28px 0 112px;
  }

  .mvp-shell .site-footer {
    width: calc(100% - 28px);
    padding-bottom: 116px;
  }

  .mvp-shell .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }

  .mvp-shell .hero {
    min-height: 0;
    padding: 30px 25px 32px;
    border-radius: 21px;
  }

  .mvp-shell .hero h1 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .mvp-shell .trust-strip,
  .mvp-shell .feature-grid,
  .mvp-shell .metric-grid {
    grid-template-columns: 1fr;
  }

  .mvp-shell .year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mvp-shell .section-heading {
    display: block;
  }

  .mvp-shell .section-heading p {
    margin-top: 8px;
  }

  .mvp-shell .mobile-primary-nav {
    position: fixed;
    z-index: 60;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    overflow: visible;
    background: color-mix(in srgb, var(--mvp-surface) 92%, transparent);
    border: 1px solid var(--mvp-line-strong);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mvp-shell .mobile-primary-nav > a,
  .mvp-shell .mobile-more-nav > summary {
    min-width: 0;
    padding: 10px 2px 9px;
    color: var(--mvp-subtle);
    text-align: center;
    text-decoration: none;
    font-size: 10px;
    font-weight: 760;
    cursor: pointer;
    list-style: none;
  }

  .mvp-shell .mobile-more-nav > summary::-webkit-details-marker {
    display: none;
  }

  .mvp-shell .mobile-primary-nav > a::before,
  .mvp-shell .mobile-more-nav > summary::before {
    display: block;
    margin-bottom: 1px;
    font-size: 17px;
    line-height: 1.2;
  }

  /* 아이콘은 탭 위치가 아니라 탭이 무엇인지로 고른다. 탭 수가 바뀌어도 어긋나지 않는다. */
  .mvp-shell .mobile-primary-nav a[data-nav-key="home"]::before {
    content: "⌂";
  }

  .mvp-shell .mobile-primary-nav a[data-nav-key="learning"]::before {
    content: "▤";
  }

  .mvp-shell .mobile-primary-nav a[data-nav-key="textbooks"]::before {
    content: "▤";
  }

  .mvp-shell .mobile-primary-nav a[data-nav-key="comics"]::before {
    content: "▦";
  }

  .mvp-shell .mobile-primary-nav a[data-nav-key="questions"]::before {
    content: "▣";
  }

  .mvp-shell .mobile-primary-nav a[data-nav-key="community"]::before {
    content: "◎";
  }

  .mvp-shell .mobile-primary-nav a[data-nav-key="account"]::before {
    content: "●";
  }

  .mvp-shell .mobile-primary-nav a[data-nav-key="error_notebook"]::before {
    content: "✓";
  }

  .mvp-shell .mobile-more-nav > summary::before {
    content: "•••";
    letter-spacing: -0.1em;
  }

  .mvp-shell .mobile-more-nav {
    position: relative;
    min-width: 0;
  }

  .mvp-shell .mobile-more-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: grid;
    width: min(240px, calc(100vw - 28px));
    padding: 8px;
    gap: 2px;
    background: var(--mvp-surface);
    border: 1px solid var(--mvp-line-strong);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
  }

  .mvp-shell .mobile-more-panel a {
    padding: 11px 12px;
    color: var(--mvp-text);
    border-radius: 9px;
    text-align: left;
    text-decoration: none;
    font-size: 13px;
    font-weight: 720;
  }

  .mvp-shell .mobile-more-panel a[aria-current="page"] {
    color: var(--mvp-brand);
    background: var(--mvp-brand-soft);
  }

  .mvp-shell .mobile-primary-nav a[aria-current="page"] {
    color: var(--mvp-brand);
    background: var(--mvp-brand-soft);
  }
}

@media (max-width: 460px) {
  .mvp-shell .brand-label {
    display: inline;
  }

  .mvp-shell .year-grid {
    grid-template-columns: 1fr;
  }

  .mvp-shell h1 {
    font-size: 35px;
  }

  .mvp-shell h2 {
    margin-top: 46px;
  }

  .mvp-shell .card,
  .mvp-shell .feature-card {
    padding: 20px;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .mvp-shell *,
  .mvp-shell *::before,
  .mvp-shell *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ── 백지복습 2.0 · 빈칸 맞추기 ─────────────────────────────────── */

.mvp-shell .recall-library,
.mvp-shell .cloze-page {
  width: min(1040px, calc(100% - 40px));
}

.mvp-shell .recall-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: end;
  gap: 48px;
  padding: 34px 0 30px;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .recall-heading-split h1 {
  margin: 8px 0 0;
  font-size: clamp(36px, 5vw, 62px);
  letter-spacing: -0.065em;
}

.mvp-shell .practice-mode-switch {
  display: grid;
  margin: 28px 0 54px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--mvp-line);
  border-radius: 20px;
  overflow: hidden;
}

.mvp-shell .practice-mode-switch a {
  display: grid;
  position: relative;
  min-height: 128px;
  padding: 24px 28px;
  color: var(--mvp-text);
  text-decoration: none;
}

.mvp-shell .practice-mode-switch a + a {
  border-left: 1px solid var(--mvp-line);
}

.mvp-shell .practice-mode-switch a::after {
  position: absolute;
  right: 24px;
  bottom: 24px;
  content: "↗";
  color: var(--mvp-muted);
  font-size: 20px;
}

.mvp-shell .practice-mode-switch a.is-current {
  background: var(--mvp-text);
  color: var(--mvp-surface);
}

.mvp-shell .practice-mode-switch a.is-current::after,
.mvp-shell .practice-mode-switch a.is-current small,
.mvp-shell .practice-mode-switch a.is-current span {
  color: color-mix(in srgb, var(--mvp-surface) 70%, transparent);
}

.mvp-shell .practice-mode-switch span,
.mvp-shell .practice-mode-switch small {
  color: var(--mvp-muted);
  font-size: 12px;
}

.mvp-shell .practice-mode-switch strong {
  margin: 5px 0;
  font-size: 23px;
  letter-spacing: -0.035em;
}

.mvp-shell .recall-library-note {
  margin: -34px 0 34px;
  color: var(--mvp-muted);
  font-size: 12px;
}

.mvp-shell .recall-index {
  border-top: 2px solid var(--mvp-text);
}

.mvp-shell .recall-index-section {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .recall-index-label {
  padding: 26px 20px 26px 0;
}

.mvp-shell .recall-index-label span {
  color: var(--mvp-brand);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.mvp-shell .recall-index-label h2 {
  margin: 8px 0 0;
  font-size: 21px;
}

.mvp-shell .recall-topic-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--mvp-line);
}

.mvp-shell .recall-topic-list li {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .recall-topic-list li:last-child {
  border-bottom: 0;
}

.mvp-shell .recall-topic-list li > a:first-child {
  display: grid;
  padding: 22px 24px;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 18px;
  color: var(--mvp-text);
  text-decoration: none;
}

.mvp-shell .recall-topic-list li > a:first-child:hover .recall-topic-name {
  color: var(--mvp-brand);
}

.mvp-shell .recall-topic-name {
  font-size: 16px;
  font-weight: 750;
}

.mvp-shell .recall-topic-history,
.mvp-shell .recall-history-link {
  color: var(--mvp-muted);
  font-size: 12px;
}

.mvp-shell .recall-history-link {
  padding-right: 20px;
  white-space: nowrap;
}

.mvp-shell .blank-topic-header {
  max-width: 760px;
  margin: 22px auto 28px;
  text-align: center;
}

.mvp-shell .blank-topic-header > span {
  color: var(--mvp-brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.mvp-shell .blank-topic-header h1 {
  margin: 10px 0 8px;
  font-size: clamp(36px, 6vw, 58px);
  letter-spacing: -0.06em;
}

.mvp-shell .blank-topic-header p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 14px;
}

.mvp-shell .blank-sheet {
  padding: 24px 34px 30px;
  background: #fffefa;
  border: 1px solid #dedbd1;
  border-radius: 3px;
  box-shadow: 0 24px 70px rgb(26 30 28 / 10%);
}

.mvp-shell .blank-sheet-meta {
  display: flex;
  padding-bottom: 14px;
  justify-content: space-between;
  color: #7f817c;
  border-bottom: 1px solid #d9d6cc;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mvp-shell .blank-sheet .recall-answer-input {
  min-height: 480px;
  padding: 28px 4px;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgb(42 52 48 / 8%) 32px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #202521;
  font-size: 16px;
  line-height: 2;
}

.mvp-shell .blank-sheet .recall-answer-input:focus {
  box-shadow: none;
}

.mvp-shell .blank-sheet .recall-write-actions {
  justify-content: space-between;
}

.mvp-shell .blank-sheet .recall-write-actions p {
  color: #747872;
}

.mvp-shell .recall-result-header {
  display: flex;
  margin-bottom: 34px;
  padding: 28px 0 32px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .recall-result-header h1 {
  margin: 8px 0 0;
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -0.055em;
}

.mvp-shell .coverage-meter {
  display: grid;
  width: 150px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--mvp-bg) 81%, transparent 82% 99%), conic-gradient(var(--mvp-brand) var(--coverage), var(--mvp-line) 0);
}

.mvp-shell .coverage-meter strong {
  font-size: 38px;
  letter-spacing: -0.06em;
}

.mvp-shell .coverage-meter strong small {
  font-size: 16px;
}

.mvp-shell .coverage-meter > span {
  color: var(--mvp-muted);
  font-size: 11px;
}

.mvp-shell .recall-feedback-lead {
  max-width: 680px;
  margin: 0 0 32px;
}

.mvp-shell .recall-feedback-lead h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.mvp-shell .recall-feedback-lead p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 13px;
}

.mvp-shell .recall-feedback-columns {
  display: grid;
  margin-bottom: 34px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
  overflow: hidden;
}

.mvp-shell .recall-feedback-section {
  padding: 26px;
}

.mvp-shell .recall-feedback-section + .recall-feedback-section {
  border-left: 1px solid var(--mvp-line);
}

.mvp-shell .feedback-kicker {
  display: block;
  margin-bottom: 18px;
  color: var(--mvp-brand);
  font-size: 12px;
  font-weight: 850;
}

.mvp-shell .recall-feedback-section.is-gap .feedback-kicker {
  color: var(--mvp-danger);
}

.mvp-shell .recall-feedback-section ol {
  margin: 0;
  padding-left: 20px;
}

.mvp-shell .recall-feedback-section li {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.65;
}

.mvp-shell .recall-feedback-section blockquote {
  margin: 6px 0 0;
  color: var(--mvp-muted);
  font-size: 12.5px;
}

.mvp-shell .recall-reference {
  display: grid;
  margin-bottom: 42px;
  padding: 30px;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 34px;
  background: var(--mvp-text);
  color: var(--mvp-surface);
  border-radius: 18px;
}

.mvp-shell .recall-reference h2 {
  margin: 8px 0 0;
  font-size: 20px;
}

.mvp-shell .recall-reference ol {
  margin: 0;
  padding-left: 22px;
}

.mvp-shell .recall-reference li {
  padding: 0 0 13px 4px;
  color: color-mix(in srgb, var(--mvp-surface) 86%, transparent);
  font-size: 14px;
  line-height: 1.65;
}

.mvp-shell .recall-answer-compact {
  margin-top: 32px;
}

.mvp-shell .recall-result-actions {
  display: flex;
  margin-top: 24px;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.mvp-shell .recall-grade-unavailable {
  padding: 62px 24px;
  text-align: center;
  border: 1px solid var(--mvp-line);
  border-radius: 18px;
}

.mvp-shell .recall-grade-unavailable > span {
  color: var(--mvp-brand);
  font-size: 34px;
}

.mvp-shell .recall-grade-unavailable h1 {
  margin: 12px 0 8px;
}

.mvp-shell .recall-grade-unavailable p {
  margin: 0 auto;
  max-width: 54ch;
  color: var(--mvp-muted);
}

.mvp-shell .cloze-index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--mvp-text);
}

.mvp-shell .cloze-index li {
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .cloze-index a {
  display: grid;
  padding: 24px 8px;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 18px;
  color: var(--mvp-text);
  text-decoration: none;
}

.mvp-shell .cloze-index a > span:first-child {
  color: var(--mvp-brand);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.mvp-shell .cloze-index small {
  display: block;
  margin-bottom: 5px;
  color: var(--mvp-muted);
}

.mvp-shell .cloze-index strong {
  font-size: 16px;
}

.mvp-shell .cloze-index mark {
  margin: 0 4px;
  padding: 2px 9px;
  background: var(--mvp-brand-soft);
  color: var(--mvp-brand);
  border-radius: 5px;
}

.mvp-shell .cloze-pagination {
  display: grid;
  padding: 20px 4px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  color: var(--mvp-muted);
  font-size: 12px;
}

.mvp-shell .cloze-pagination a:last-child {
  justify-self: end;
}

.mvp-shell .cloze-solve-page > header {
  margin: 38px 0 24px;
}

.mvp-shell .cloze-solve-page > header h1 {
  margin: 8px 0;
  font-size: 38px;
}

.mvp-shell .cloze-solve-page > header p {
  color: var(--mvp-muted);
}

.mvp-shell .cloze-paper {
  padding: 58px 48px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 18px;
  box-shadow: var(--mvp-card-shadow);
}

.mvp-shell .cloze-sentence {
  margin: 0 0 38px;
  font-size: clamp(20px, 3vw, 29px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: -0.035em;
}

.mvp-shell .cloze-sentence input {
  width: min(230px, 50vw);
  padding: 4px 10px 6px;
  background: var(--mvp-brand-soft);
  border: 0;
  border-bottom: 2px solid var(--mvp-brand);
  color: var(--mvp-text);
  font: inherit;
  text-align: center;
}

.mvp-shell .cloze-result-mark {
  margin: 42px 0 30px;
  padding: 54px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-top: 5px solid var(--mvp-brand);
  border-radius: 4px 4px 18px 18px;
}

.mvp-shell .cloze-result-mark.is-wrong {
  border-top-color: var(--mvp-danger);
}

.mvp-shell .cloze-result-mark > span {
  color: var(--mvp-brand);
  font-size: 12px;
  font-weight: 850;
}

.mvp-shell .cloze-result-mark h1 {
  margin: 10px 0 28px;
  font-size: 36px;
}

.mvp-shell .cloze-result-mark p {
  font-size: 20px;
  line-height: 1.75;
}

.mvp-shell .cloze-result-mark p strong {
  color: var(--mvp-brand);
  box-shadow: inset 0 -0.45em var(--mvp-brand-soft);
}

@media (max-width: 720px) {
  .mvp-shell .recall-heading-split,
  .mvp-shell .recall-index-section,
  .mvp-shell .recall-reference,
  .mvp-shell .recall-feedback-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .mvp-shell .recall-heading-split {
    gap: 16px;
  }

  .mvp-shell .practice-mode-switch {
    grid-template-columns: minmax(0, 1fr);
  }

  .mvp-shell .practice-mode-switch a + a {
    border-top: 1px solid var(--mvp-line);
    border-left: 0;
  }

  .mvp-shell .recall-index-label {
    padding: 24px 0 12px;
  }

  .mvp-shell .recall-topic-list {
    border-left: 0;
  }

  .mvp-shell .recall-topic-list li > a:first-child {
    padding-left: 0;
    grid-template-columns: minmax(0, 1fr) 20px;
  }

  .mvp-shell .recall-topic-history {
    display: none;
  }

  .mvp-shell .blank-sheet {
    padding: 18px 20px 24px;
  }

  .mvp-shell .blank-sheet .recall-answer-input {
    min-height: 420px;
  }

  .mvp-shell .recall-result-header {
    align-items: flex-start;
  }

  .mvp-shell .coverage-meter {
    width: 108px;
  }

  .mvp-shell .coverage-meter strong {
    font-size: 28px;
  }

  .mvp-shell .recall-feedback-section + .recall-feedback-section {
    border-top: 1px solid var(--mvp-line);
    border-left: 0;
  }

  .mvp-shell .cloze-paper,
  .mvp-shell .cloze-result-mark {
    padding: 34px 24px;
  }
}

/* ---------------------------------------------------------------------------
   Wireframe v1: public landing and prediction tabs
   --------------------------------------------------------------------------- */

.mvp-shell .prediction-tabs {
  display: inline-flex;
  margin: 0 0 20px;
  padding: 4px;
  gap: 3px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 10px;
}

.mvp-shell .prediction-tabs a {
  padding: 8px 12px;
  color: var(--mvp-muted);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
}

.mvp-shell .prediction-tabs a[aria-current="page"] {
  color: var(--mvp-text);
  background: var(--mvp-surface);
  box-shadow: 0 1px 3px rgba(24, 24, 27, 0.08);
}

.mvp-shell .landing-hero {
  display: grid;
  /* 가로 여백은 .site-main 이 이미 잡는다. 여기서 또 주면 두 단이 좁아진다. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 520px;
  padding: 28px 0 76px;
  align-items: center;
  gap: 56px;
}

.mvp-shell .landing-hero-copy h1 {
  margin: 18px 0 20px;
  font-size: clamp(42px, 4.4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 1.1;
}

.mvp-shell .landing-hero-copy > p {
  max-width: 555px;
  margin: 0;
  color: var(--mvp-muted);
  font-size: 17px;
  line-height: 1.7;
}

.mvp-shell .landing-outline-badge {
  display: inline-flex;
  padding: 5px 10px;
  color: var(--mvp-muted);
  border: 1px solid var(--mvp-line-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 760;
}

.mvp-shell .landing-hero-note {
  display: block;
  margin-top: 12px;
  color: var(--mvp-subtle);
  font-size: 12.5px;
}

.mvp-shell .landing-subject-shortcuts {
  margin-top: 30px;
}

.mvp-shell .landing-subject-shortcuts > span {
  display: block;
  margin-bottom: 10px;
  color: var(--mvp-muted);
  font-size: 12.5px;
  font-weight: 760;
}

.mvp-shell .landing-subject-shortcuts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mvp-shell .landing-subject-shortcuts .button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

.mvp-shell .question-preview-figure {
  position: relative;
  width: min(100%, 465px);
  margin: 0 0 0 auto;
}

.mvp-shell .question-preview-back {
  position: absolute;
  z-index: -1;
  inset: 22px -13px -15px 20px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
  transform: rotate(2.2deg);
}

.mvp-shell .question-preview-card {
  padding: 24px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transform: rotate(-0.6deg);
}

.mvp-shell .question-preview-meta {
  display: flex;
  color: var(--mvp-subtle);
  font-size: 12px;
  gap: 7px;
}

.mvp-shell .question-preview-meta strong {
  color: var(--mvp-muted);
}

.mvp-shell .question-preview-line {
  margin: 17px 0 13px;
  color: var(--mvp-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

.mvp-shell .question-preview-choices {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mvp-shell .question-preview-choices li {
  display: flex;
  margin-top: 7px;
  padding: 9px 10px;
  align-items: flex-start;
  color: var(--mvp-muted);
  border: 1px solid var(--mvp-line);
  border-radius: 8px;
  font-size: 12px;
  gap: 8px;
  line-height: 1.45;
}

.mvp-shell .question-preview-choices b {
  flex: none;
  /* 선지 번호는 이 목업의 요지다. 옅은 회색 12px 로는 원문자가 뭉개져 읽히지 않는다. */
  width: 14px;
  color: var(--mvp-muted);
  font-size: 14px;
  line-height: 1.25;
}

.mvp-shell .question-preview-choices .is-highlighted {
  color: var(--mvp-text);
  background: var(--mvp-brand-soft);
  border-color: var(--mvp-brand);
}

.mvp-shell .question-preview-choices .is-highlighted b {
  color: var(--mvp-brand);
}

.mvp-shell .question-preview-more {
  display: none;
}

.mvp-shell .question-preview-note {
  display: grid;
  margin-top: 14px;
  padding: 12px;
  background: var(--mvp-surface-raised);
  border-radius: 9px;
  font-size: 12px;
  gap: 2px;
}

.mvp-shell .question-preview-note strong {
  color: var(--mvp-text);
}

.mvp-shell .question-preview-note span {
  color: var(--mvp-muted);
}

.mvp-shell .question-preview-figure figcaption {
  margin-top: 17px;
  color: var(--mvp-subtle);
  text-align: center;
  font-size: 12px;
}

.mvp-shell .landing-stat-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0 0 88px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
}

.mvp-shell .landing-stat {
  min-width: 0;
  padding: 23px 24px;
}

.mvp-shell .landing-stat + .landing-stat {
  border-left: 1px solid var(--mvp-line);
}

.mvp-shell .landing-stat strong {
  display: block;
  color: var(--mvp-text);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
}

.mvp-shell .landing-stat small {
  margin-left: 3px;
  color: var(--mvp-muted);
  font-size: 20px;
  font-weight: 700;
}

.mvp-shell .landing-stat span {
  display: block;
  margin-top: 9px;
  color: var(--mvp-subtle);
  font-size: 12.5px;
}

.mvp-shell .landing-section,
.mvp-shell .landing-prediction-section,
.mvp-shell .landing-faq-section,
.mvp-shell .landing-final-cta {
  margin-top: 88px;
}

.mvp-shell .landing-section-heading {
  margin-bottom: 24px;
}

.mvp-shell .landing-section-heading h2,
.mvp-shell .landing-prediction-copy h2,
.mvp-shell .landing-faq-section h2 {
  margin: 9px 0 8px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.25;
}

.mvp-shell .landing-section-heading p,
.mvp-shell .landing-prediction-copy p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 15px;
}

.mvp-shell .landing-eyebrow {
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.mvp-shell .landing-open-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.mvp-shell .landing-open-card {
  display: block;
  min-height: 232px;
  padding: 20px;
  color: var(--mvp-text);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
  text-decoration: none;
}

.mvp-shell .landing-open-card:hover {
  border-color: var(--mvp-brand);
}

.mvp-shell .landing-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border-radius: 8px;
  font-size: 17px;
  font-weight: 800;
}

.mvp-shell .landing-status,
.mvp-shell .landing-warn-badge,
.mvp-shell .landing-soon-badge {
  display: inline-flex;
  margin-left: 8px;
  padding: 4px 8px;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.mvp-shell .landing-status {
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
}

.mvp-shell .landing-open-card h3 {
  margin: 20px 0 6px;
  font-size: 17px;
}

.mvp-shell .landing-open-card p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 13px;
  line-height: 1.55;
}

.mvp-shell .landing-card-link {
  display: block;
  margin-top: 20px;
  color: var(--mvp-brand);
  font-size: 13px;
  font-weight: 800;
}

.mvp-shell .landing-prediction-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  padding: 32px 0;
  align-items: center;
  gap: 56px;
}

.mvp-shell .landing-prediction-copy > .button {
  margin-top: 24px;
}

.mvp-shell .landing-score-card {
  padding: 28px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
  box-shadow: var(--mvp-card-shadow);
}

.mvp-shell .landing-score-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  color: var(--mvp-muted);
  font-size: 13px;
  font-weight: 760;
  gap: 10px;
}

.mvp-shell .landing-warn-badge {
  margin-left: 0;
  color: var(--mvp-warning);
  background: color-mix(in srgb, var(--mvp-warning) 13%, transparent);
}

.mvp-shell .landing-score {
  display: flex;
  margin: 18px 0 25px;
  align-items: baseline;
  gap: 8px;
}

.mvp-shell .landing-score strong {
  color: var(--mvp-text);
  font-size: 52px;
  letter-spacing: -0.07em;
  line-height: 1;
}

.mvp-shell .landing-score span {
  color: var(--mvp-muted);
  font-size: 15px;
}

.mvp-shell .landing-score-bars > div {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-top: 14px;
  color: var(--mvp-muted);
  font-size: 12px;
  gap: 5px 12px;
}

.mvp-shell .landing-score-bars i {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  background: var(--mvp-surface-strong);
  border-radius: 999px;
}

.mvp-shell .landing-score-bars b {
  display: block;
  height: 100%;
  background: var(--mvp-brand);
  border-radius: inherit;
}

/* 학습 허브의 공개량 — 랜딩과 같은 집계를 작은 크기로 보여준다. */
.mvp-shell .hub-inventory {
  display: flex;
  margin: 22px 0 0;
  flex-wrap: wrap;
  gap: 28px;
}

.mvp-shell .hub-inventory dt {
  color: var(--mvp-muted);
  font-size: 13px;
}

.mvp-shell .hub-inventory dd {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* 보유량 띠 — "다 갖췄다"를 숫자로 말하는 자리. 값은 뷰가 세어서 넘긴다. */
.mvp-shell .landing-inventory {
  margin-top: 88px;
}

.mvp-shell .landing-inventory-stats {
  display: grid;
  margin: 28px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  border-top: 1px solid var(--mvp-line-strong);
}

.mvp-shell .landing-inventory-stats > div {
  padding-top: 22px;
}

.mvp-shell .landing-inventory-stats dt {
  color: var(--mvp-muted);
  font-size: 14px;
}

.mvp-shell .landing-inventory-stats dd {
  margin: 6px 0 0;
  color: var(--mvp-text);
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 850;
  letter-spacing: -0.05em;
  line-height: 1;
}

.mvp-shell .landing-strengths-section,
.mvp-shell .landing-faq-section {
  margin-inline: calc(50% - 50vw);
  padding: 88px max(calc((100vw - 1160px) / 2), 24px);
  background: var(--mvp-surface-raised);
}

.mvp-shell .landing-strengths-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.mvp-shell .landing-strengths-grid article {
  padding: 22px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .landing-strengths-grid h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.mvp-shell .landing-strengths-grid p,
.mvp-shell .landing-promises-grid p,
.mvp-shell .landing-roadmap-grid p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 13px;
  line-height: 1.6;
}








.mvp-shell .landing-promises-grid,
.mvp-shell .landing-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.mvp-shell .landing-promises-grid article,
.mvp-shell .landing-roadmap-grid article {
  padding: 20px;
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .landing-promises-grid article > span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.mvp-shell .landing-promises-grid h3,
.mvp-shell .landing-roadmap-grid h3 {
  margin: 16px 0 7px;
  font-size: 17px;
}

.mvp-shell .landing-roadmap-grid article {
  background: var(--mvp-surface-raised);
  border-style: dashed;
}

.mvp-shell .landing-soon-badge {
  margin: 0;
  color: var(--mvp-muted);
  background: transparent;
  border: 1px dashed var(--mvp-line-strong);
}

.mvp-shell .landing-faq-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: start;
  gap: 56px;
}

.mvp-shell .landing-faq-section h2 {
  margin: 0;
  font-size: 32px;
}

.mvp-shell .landing-faq-list details {
  border-top: 1px solid var(--mvp-line-strong);
}

.mvp-shell .landing-faq-list details:last-child {
  border-bottom: 1px solid var(--mvp-line-strong);
}

.mvp-shell .landing-faq-list summary {
  display: flex;
  padding: 20px 0;
  align-items: center;
  justify-content: space-between;
  color: var(--mvp-text);
  cursor: pointer;
  font-size: 15px;
  font-weight: 740;
  list-style: none;
  gap: 16px;
}

.mvp-shell .landing-faq-list summary::-webkit-details-marker {
  display: none;
}

.mvp-shell .landing-faq-list summary span {
  color: var(--mvp-subtle);
  font-size: 22px;
  font-weight: 400;
}

.mvp-shell .landing-faq-list details[open] summary span {
  transform: rotate(45deg);
}

.mvp-shell .landing-faq-list p {
  margin: -4px 0 20px;
  color: var(--mvp-muted);
  font-size: 14px;
}

.mvp-shell .landing-final-cta {
  margin-top: 56px;
  padding: 58px 20px 24px;
  text-align: center;
}

.mvp-shell .landing-final-cta h2 {
  margin: 0;
  color: var(--mvp-text);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1.2;
}

.mvp-shell .landing-final-cta h2 span {
  color: var(--mvp-muted);
}

.mvp-shell .landing-final-cta .hero-actions {
  justify-content: center;
}

@media (max-width: 820px) {
  .mvp-shell .landing-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 32px 0 24px;
    gap: 38px;
  }

  .mvp-shell .landing-hero-copy h1 {
    margin: 16px 0;
    font-size: 30px;
  }

  .mvp-shell .landing-hero-copy > p {
    font-size: 15px;
  }

  .mvp-shell .landing-hero .hero-actions {
    display: block;
    margin-top: 22px;
  }

  .mvp-shell .landing-hero .hero-actions .button {
    width: 100%;
  }

  .mvp-shell .landing-hero .hero-actions .button-secondary {
    display: none;
  }

  .mvp-shell .landing-subject-shortcuts {
    display: none;
  }

  .mvp-shell .question-preview-figure {
    width: calc(100% - 8px);
    margin: 0 auto;
  }

  .mvp-shell .question-preview-card {
    padding: 19px;
  }

  .mvp-shell .question-preview-choices li:nth-child(n + 4) {
    display: none;
  }

  .mvp-shell .question-preview-more {
    display: block;
    margin-top: 9px;
    color: var(--mvp-subtle);
    font-size: 12px;
  }

  .mvp-shell .question-preview-note {
    margin-top: 11px;
  }

  .mvp-shell .landing-stat-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 42px;
  }

  .mvp-shell .landing-stat {
    padding: 19px 15px;
  }

  .mvp-shell .landing-stat + .landing-stat {
    border-left: 0;
  }

  .mvp-shell .landing-stat:nth-child(even) {
    border-left: 1px solid var(--mvp-line);
  }

  .mvp-shell .landing-stat:nth-child(n + 3) {
    border-top: 1px solid var(--mvp-line);
  }

  .mvp-shell .landing-stat strong {
    font-size: 30px;
  }

  .mvp-shell .landing-stat small {
    font-size: 16px;
  }

  .mvp-shell .landing-section,
  .mvp-shell .landing-prediction-section,
    .mvp-shell .landing-faq-section,
  .mvp-shell .landing-final-cta {
    margin-top: 52px;
  }

  .mvp-shell .landing-open-grid {
    display: grid;
    grid-auto-columns: minmax(260px, 82vw);
    grid-auto-flow: column;
    grid-template-columns: none;
    padding: 0 14px 8px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .mvp-shell .landing-open-card {
    min-height: 208px;
    scroll-snap-align: start;
  }

  .mvp-shell .landing-prediction-section,
    .mvp-shell .landing-faq-section {
    display: block;
    padding: 0;
  }

  .mvp-shell .landing-score-card,
    .mvp-shell .landing-faq-list {
    margin-top: 26px;
  }

  .mvp-shell .landing-strengths-section,
  .mvp-shell .landing-faq-section {
    margin-right: -14px;
    margin-left: -14px;
    padding: 32px 14px;
  }

  .mvp-shell .landing-strengths-grid {
    grid-template-columns: 1fr;
  }

  .mvp-shell .landing-strengths-grid article {
    padding: 18px;
  }

  .mvp-shell .landing-desktop-only {
    display: none;
  }

  .mvp-shell .landing-final-cta {
    padding: 28px 0 8px;
  }

  .mvp-shell .landing-final-cta .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Platform shell: stage hubs, roadmap previews, coming-soon slots
   --------------------------------------------------------------------------- */

.mvp-shell .hero-phase {
  display: inline-flex;
  margin-top: 26px;
  padding: 7px 13px;
  align-items: center;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.mvp-shell .stage-hero {
  margin-top: 34px;
}

.mvp-shell .stage-title {
  margin: 12px 0 14px;
  font-size: clamp(31px, 5vw, 48px);
  line-height: 1.12;
}

.mvp-shell .stage-hero > p {
  max-width: 640px;
  margin: 0;
  color: var(--mvp-muted);
  font-size: clamp(15px, 2vw, 17px);
}

.mvp-shell .hub-grid,
.mvp-shell .roadmap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.mvp-shell .learning-start-paths {
  display: grid;
  margin: 34px 0 44px;
  padding: 30px;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: 34px 48px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
}

.mvp-shell .learning-start-paths header h2 {
  margin: 8px 0 10px;
  font-size: 25px;
}

.mvp-shell .learning-start-paths header p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 14px;
}

.mvp-shell .learning-start-paths > div {
  border-top: 1px solid var(--mvp-line-strong);
}

.mvp-shell .learning-start-paths > div > a {
  display: grid;
  padding: 15px 2px;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  color: var(--mvp-text);
  border-bottom: 1px solid var(--mvp-line);
  text-decoration: none;
}

.mvp-shell .learning-start-paths > div > a:hover,
.mvp-shell .learning-start-paths > div > a:focus-visible {
  background: var(--mvp-brand-soft);
}

.mvp-shell .learning-start-paths > div span {
  color: var(--mvp-muted);
  font-size: 13px;
}

.mvp-shell .learning-start-paths > div i {
  color: var(--mvp-brand);
  font-style: normal;
}

.mvp-shell .learning-start-paths .learning-resume {
  grid-column: 2;
  justify-self: start;
}

.mvp-shell .roadmap-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 20px;
}

.mvp-shell .hub-grid .card,
.mvp-shell .roadmap-grid .card {
  height: 100%;
  margin: 0;
}

.mvp-shell .badge-soon {
  color: var(--mvp-muted);
  background: transparent;
  border-color: var(--mvp-line-strong);
  border-style: dashed;
}

.mvp-shell .hub-card-static {
  cursor: default;
  opacity: 0.82;
}

.mvp-shell .roadmap-points {
  max-width: 640px;
  margin: 18px 0 30px;
  padding-left: 21px;
}

.mvp-shell .roadmap-points li {
  margin: 9px 0;
}

@media (max-width: 820px) {
  .mvp-shell .roadmap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .mvp-shell .learning-start-paths {
    padding: 22px 18px;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .mvp-shell .learning-start-paths > div > a {
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 4px 10px;
  }

  .mvp-shell .learning-start-paths > div span {
    grid-column: 1;
  }

  .mvp-shell .learning-start-paths > div i {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .mvp-shell .learning-start-paths .learning-resume {
    grid-column: 1;
  }
}

@media (max-width: 460px) {
  .mvp-shell .hub-grid,
  .mvp-shell .roadmap-grid {
    grid-template-columns: 1fr;
  }
}

/* First-stage transcription preview & community */

.mvp-shell .question-list-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.mvp-shell .question-list-grid .card {
  height: 100%;
  margin: 0;
  padding: 16px;
}

.mvp-shell .question-list-card p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 6px 0 0;
  font-size: 13px;
}

.mvp-shell .question-stem {
  margin: 18px 0;
  font-size: 16.5px;
  line-height: 1.75;
  white-space: pre-line;
}

.mvp-shell .choice-list {
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.mvp-shell .choice-list li {
  margin: 8px 0;
  padding: 11px 14px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .choice-list .choice-answer {
  background: var(--mvp-brand-soft);
  border-color: color-mix(in srgb, var(--mvp-brand) 45%, var(--mvp-line));
}

.mvp-shell .choice-label {
  margin-right: 6px;
  color: var(--mvp-brand);
  font-weight: 800;
}

.mvp-shell .answer-box {
  margin: 20px 0;
  padding: 16px 18px;
  background: var(--mvp-brand-soft);
  border: 1px solid color-mix(in srgb, var(--mvp-brand) 35%, transparent);
  border-radius: 14px;
}

.mvp-shell .community-row {
  display: flex;
  gap: 6px;
  flex-direction: column;
}

.mvp-shell .community-body,
.mvp-shell .community-comment {
  line-height: 1.75;
}

.mvp-shell .community-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.mvp-shell .community-form input,
.mvp-shell .community-form textarea,
.mvp-shell .community-comment + form textarea,
.mvp-shell form textarea {
  width: 100%;
  padding: 12px;
  color: var(--mvp-text);
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line-strong);
  border-radius: 12px;
  font: inherit;
}

@media (max-width: 820px) {
  .mvp-shell .question-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .mvp-shell .question-list-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 데이터 테이블 · 판정 칩 · 접기 (예측/해설 공용) --- */
.mvp-shell .table-scroll {
  overflow-x: auto;
  margin: 14px 0 6px;
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}

.mvp-shell table.data-table th,
.mvp-shell table.data-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--mvp-line);
  vertical-align: top;
}

.mvp-shell table.data-table thead th {
  font-size: 12px;
  font-weight: 800;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  white-space: nowrap;
}

.mvp-shell table.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.mvp-shell .cell-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--mvp-muted);
}

.mvp-shell .chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid transparent;
}

.mvp-shell .chip-exact {
  color: #067647;
  background: color-mix(in srgb, #12b76a 14%, transparent);
  border-color: color-mix(in srgb, #12b76a 30%, transparent);
}

.mvp-shell .chip-approx {
  color: #b54708;
  background: color-mix(in srgb, #f79009 14%, transparent);
  border-color: color-mix(in srgb, #f79009 30%, transparent);
}

.mvp-shell .chip-miss {
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border-color: var(--mvp-line-strong);
}

.mvp-shell details.fold {
  margin: 10px 0;
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
  background: var(--mvp-surface-raised);
}

.mvp-shell details.fold > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 14px;
  list-style: none;
}

.mvp-shell details.fold > summary::-webkit-details-marker {
  display: none;
}

.mvp-shell details.fold > summary::before {
  content: "▸ ";
  color: var(--mvp-brand);
}

.mvp-shell details.fold[open] > summary::before {
  content: "▾ ";
}

.mvp-shell details.fold .fold-body {
  padding: 0 16px 14px;
}

.mvp-shell .subject-result {
  margin: 18px 0 26px;
}

@media (max-width: 620px) {
  .mvp-shell .subject-result .table-scroll {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .mvp-shell .subject-result table.data-table {
    display: block;
    min-width: 0;
  }

  .mvp-shell .subject-result table.data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .mvp-shell .subject-result table.data-table tbody {
    display: grid;
    gap: 12px;
  }

  .mvp-shell .subject-result table.data-table tr {
    display: grid;
    padding: 4px 14px;
    background: var(--mvp-surface-raised);
    border: 1px solid var(--mvp-line);
    border-radius: 12px;
  }

  .mvp-shell .subject-result table.data-table td {
    display: grid;
    padding: 10px 0;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    border-bottom: 1px solid var(--mvp-line);
    white-space: normal;
  }

  .mvp-shell .subject-result table.data-table td::before {
    content: attr(data-label);
    color: var(--mvp-muted);
    font-size: 11px;
    font-weight: 800;
  }

  .mvp-shell .subject-result table.data-table tbody tr:last-child td:not(:last-child) {
    border-bottom: 1px solid var(--mvp-line);
  }
}

.mvp-shell .subject-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.mvp-shell .subject-result-head h3 {
  margin: 0;
}

.mvp-shell .commentary-block {
  margin: 16px 0;
  padding: 18px 20px;
  border: 1px solid var(--mvp-line);
  border-left: 3px solid var(--mvp-brand);
  border-radius: 12px;
  background: var(--mvp-surface-raised);
}

.mvp-shell .commentary-block h3 {
  margin-top: 0;
}

.mvp-shell .choice-notes {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}

.mvp-shell .choice-notes li {
  padding: 10px 12px;
  border: 1px solid var(--mvp-line);
  border-radius: 10px;
}

.mvp-shell .choice-notes li.is-answer {
  border-color: color-mix(in srgb, #12b76a 40%, transparent);
  background: color-mix(in srgb, #12b76a 7%, transparent);
}

.mvp-shell .choice-notes .choice-label {
  font-weight: 800;
  margin-right: 6px;
}

/* --- 커뮤니티 게시판 탭·신고 --- */
.mvp-shell .board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.mvp-shell .board-tab {
  padding: 6px 14px;
  border: 1px solid var(--mvp-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
}

.mvp-shell .board-tab-active {
  color: var(--mvp-brand);
  border-color: color-mix(in srgb, var(--mvp-brand) 40%, transparent);
  background: var(--mvp-brand-soft);
}

.mvp-shell .inline-report {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 4px;
}

.mvp-shell .inline-report input {
  flex: 1;
  min-width: 180px;
}

.mvp-shell .link-button {
  background: none;
  border: none;
  padding: 0;
  margin-left: 8px;
  color: var(--mvp-muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Wireframe v1 W02: first-stage question detail
   --------------------------------------------------------------------------- */

.mvp-shell .site-main.question-detail-main {
  width: 100%;
  padding: 0 0 96px;
}

.mvp-shell .question-detail-page {
  min-width: 0;
}

.mvp-shell .question-breadcrumb-strip {
  border-bottom: 1px solid var(--mvp-line);
  background: var(--mvp-bg);
}

.mvp-shell .question-breadcrumb-inner {
  display: flex;
  width: min(1400px, calc(100% - 40px));
  min-height: 60px;
  margin: auto;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.mvp-shell .question-breadcrumbs {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 9px;
  list-style: none;
  color: var(--mvp-subtle);
  font-size: 13px;
}

.mvp-shell .question-breadcrumbs li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.mvp-shell .question-breadcrumbs li:not(:last-child)::after {
  content: "›";
  color: var(--mvp-line-strong);
}

.mvp-shell .question-breadcrumbs a {
  overflow: hidden;
  color: var(--mvp-muted);
  text-decoration: none;
  text-overflow: ellipsis;
}

.mvp-shell .question-breadcrumbs strong {
  color: var(--mvp-text);
}

.mvp-shell .question-position {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  color: var(--mvp-muted);
  font-size: 12px;
}

.mvp-shell .question-position strong {
  min-width: 42px;
  color: var(--mvp-text);
  text-align: right;
}

.mvp-shell .question-progress-track {
  display: block;
  width: 200px;
  height: 6px;
  overflow: hidden;
  background: var(--mvp-surface-strong);
  border-radius: 999px;
}

.mvp-shell .question-progress-track > span {
  display: block;
  width: var(--question-progress);
  height: 100%;
  background: var(--mvp-brand);
  border-radius: inherit;
}

.mvp-shell .question-detail-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  width: min(1400px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 34px;
  align-items: start;
  gap: clamp(24px, 2.2vw, 32px);
}

.mvp-shell .question-sticky-panel {
  position: sticky;
  top: 96px;
}

.mvp-shell .question-grid-sidebar h2,
.mvp-shell .question-info-card h2 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mvp-shell .question-number-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.mvp-shell .question-number-grid a {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  color: var(--mvp-muted);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 720;
  text-decoration: none;
}

.mvp-shell .question-number-grid a:hover,
.mvp-shell .question-number-grid a:focus-visible {
  color: var(--mvp-brand);
  border-color: var(--mvp-brand);
}

.mvp-shell .question-number-grid a.is-visited {
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  border-color: transparent;
}

.mvp-shell .question-number-grid a.is-current {
  color: #ffffff;
  background: var(--mvp-text);
  border-color: var(--mvp-text);
}

.mvp-shell .question-grid-legend {
  display: flex;
  margin-top: 15px;
  align-items: center;
  gap: 16px;
  color: var(--mvp-subtle);
  font-size: 11px;
}

.mvp-shell .question-grid-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mvp-shell .question-grid-legend i {
  width: 11px;
  height: 11px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 3px;
}

.mvp-shell .question-grid-legend i.is-visited {
  background: var(--mvp-brand-soft);
  border-color: transparent;
}

.mvp-shell .question-content {
  width: 100%;
  max-width: 780px;
  min-width: 0;
  justify-self: center;
}

.mvp-shell .question-heading {
  margin-bottom: 24px;
}

.mvp-shell .question-meta {
  display: flex;
  min-height: 26px;
  margin-bottom: 6px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--mvp-muted);
  font-size: 12.5px;
  font-weight: 650;
}

.mvp-shell .review-approved-badge,
.mvp-shell .commentary-disclaimer,
.mvp-shell .choice-correct-badge,
.mvp-shell .choice-note-answer {
  display: inline-flex;
  flex: none;
  align-items: center;
  border-radius: 999px;
  white-space: nowrap;
}

.mvp-shell .review-approved-badge {
  padding: 4px 9px;
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  font-size: 11px;
  font-weight: 800;
}

.mvp-shell .question-heading h1 {
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.mvp-shell .question-transcript-notice {
  margin: 0 0 22px;
}

.mvp-shell .question-transcript-corrected {
  margin: 0 0 18px;
  font-size: 13px;
}

.mvp-shell .question-detail-page .question-stem {
  margin: 0 0 26px;
  color: var(--mvp-text);
  font-size: 17px;
  font-weight: 610;
  line-height: 1.78;
  white-space: pre-line;
}

.mvp-shell .answer-toggle {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 22px;
  padding: 4px;
  gap: 4px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 10px;
}

.mvp-shell .question-detail-page.is-enhanced .answer-toggle {
  display: grid;
}

.mvp-shell .answer-toggle button {
  min-height: 40px;
  padding: 8px 12px;
  color: var(--mvp-muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 760;
}

.mvp-shell .answer-toggle button[aria-pressed="true"] {
  color: var(--mvp-text);
  background: var(--mvp-surface);
  box-shadow: 0 1px 4px rgba(24, 24, 27, 0.09);
}

.mvp-shell .question-detail-page.is-enhanced[data-answer-mode="solve"] .answer-mode-only {
  display: none !important;
}

.mvp-shell .question-detail-page .question-choice-list {
  display: grid;
  margin: 0 0 28px;
  gap: 10px;
}

.mvp-shell .question-detail-page .question-choice-list li {
  position: relative;
  min-height: 56px;
  margin: 0;
  padding: 0;
  color: var(--mvp-text);
  background: var(--mvp-surface);
  border: 1.5px solid var(--mvp-line-strong);
  border-radius: 10px;
  line-height: 1.65;
}

.mvp-shell .question-choice-button {
  display: grid;
  width: 100%;
  min-height: 54px;
  padding: 14px 15px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.mvp-shell .question-choice-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mvp-brand) 42%, transparent);
  outline-offset: 3px;
}

.mvp-shell .question-detail-page.is-enhanced .question-choice-list li.is-selected {
  border-width: 2px;
  border-color: var(--mvp-brand);
}

.mvp-shell .question-detail-page.is-enhanced.has-wrong-choice
  .question-choice-list li.is-selected:not(.is-answer) {
  border-color: var(--mvp-danger);
}

.mvp-shell .question-choice-result {
  min-height: 26px;
  margin: -14px 0 26px;
  color: var(--mvp-muted);
  font-size: 13px;
  font-weight: 700;
}

.mvp-shell .question-detail-page .question-choice-list li.is-answer {
  background: var(--mvp-brand-soft);
  border-color: var(--mvp-brand);
}

.mvp-shell
  .question-detail-page.is-enhanced[data-answer-mode="solve"]
  .question-choice-list
  li.is-answer {
  background: var(--mvp-surface);
  border-color: var(--mvp-line-strong);
}

.mvp-shell .question-detail-page .question-choice-list .choice-label {
  margin: 0 6px 0 0;
  color: var(--mvp-text);
  font-size: 17px;
}

.mvp-shell .question-detail-page .choice-text {
  min-width: 0;
  white-space: pre-line;
}

.mvp-shell .choice-correct-badge,
.mvp-shell .choice-note-answer {
  padding: 2px 7px;
  color: var(--mvp-brand);
  background: var(--mvp-surface);
  border: 1px solid color-mix(in srgb, var(--mvp-brand) 30%, transparent);
  font-size: 10px;
  font-weight: 800;
}

.mvp-shell .official-answer-box {
  display: flex;
  margin: 0 0 32px;
  padding: 18px;
  align-items: center;
  gap: 16px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .official-answer-label {
  display: grid;
  width: 58px;
  min-width: 58px;
  min-height: 58px;
  padding: 6px;
  place-items: center;
  color: #ffffff;
  background: var(--mvp-brand);
  border-radius: 8px;
  font-size: 19px;
  font-weight: 800;
  text-align: center;
}

.mvp-shell .official-answer-box > div {
  min-width: 0;
}

.mvp-shell .official-answer-box strong {
  margin-right: 7px;
  color: var(--mvp-text);
  font-size: 15px;
}

.mvp-shell .official-answer-box p {
  margin: 4px 0 0;
  color: var(--mvp-subtle);
  font-size: 12px;
}

.mvp-shell .question-commentary {
  margin-top: 34px;
}

.mvp-shell .commentary-heading {
  display: flex;
  margin-bottom: 18px;
  align-items: center;
  gap: 10px;
}

.mvp-shell .commentary-heading h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.025em;
}

.mvp-shell .commentary-disclaimer {
  padding: 3px 8px;
  color: var(--mvp-muted);
  border: 1px solid var(--mvp-line-strong);
  font-size: 10px;
  font-weight: 760;
}

.mvp-shell .commentary-tabs {
  display: none;
  overflow-x: auto;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .question-detail-page.is-enhanced .commentary-tabs {
  display: flex;
}

.mvp-shell .commentary-tabs button {
  position: relative;
  flex: none;
  padding: 10px 13px;
  color: var(--mvp-subtle);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 760;
}

.mvp-shell .commentary-tabs button[aria-selected="true"] {
  color: var(--mvp-text);
}

.mvp-shell .commentary-tabs button[aria-selected="true"]::after {
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  content: "";
  background: var(--mvp-brand);
}

.mvp-shell .commentary-panel {
  padding: 18px 0;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .commentary-panel:first-of-type {
  border-top: 0;
}

.mvp-shell .question-detail-page.is-enhanced .commentary-panel {
  padding-top: 0;
  border-top: 0;
}

.mvp-shell .question-detail-page.is-enhanced .commentary-panel-title {
  display: none;
}

.mvp-shell .commentary-panel-title {
  margin: 0 0 10px;
  font-size: 16px;
}

.mvp-shell .commentary-panel > p,
.mvp-shell .commentary-accordion-body > p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 14.5px;
  line-height: 1.75;
}

.mvp-shell .choice-note-cards {
  display: grid;
  gap: 10px;
}

.mvp-shell .choice-note-card {
  display: grid;
  padding: 15px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 10px;
}

.mvp-shell .choice-note-card.is-answer {
  background: var(--mvp-brand-soft);
  border-color: color-mix(in srgb, var(--mvp-brand) 45%, var(--mvp-line));
}

.mvp-shell .choice-note-number {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
}

.mvp-shell .choice-note-card.is-answer .choice-note-number {
  color: #ffffff;
  background: var(--mvp-brand);
}

.mvp-shell .choice-note-card h4 {
  display: flex;
  margin: 1px 0 6px;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.mvp-shell .choice-note-card p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 13.5px;
  line-height: 1.65;
}

.mvp-shell .commentary-basis-list {
  margin: 0;
  padding-left: 20px;
  color: var(--mvp-muted);
  font-size: 14px;
  line-height: 1.7;
}

.mvp-shell .commentary-mobile {
  display: none;
}

.mvp-shell .commentary-unavailable {
  margin: 30px 0;
  padding: 18px;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 10px;
  font-size: 14px;
}

.mvp-shell .question-sibling-nav {
  display: grid;
  margin: 44px 0 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mvp-shell .question-sibling-nav a {
  display: flex;
  min-height: 76px;
  padding: 15px 17px;
  flex-direction: column;
  justify-content: center;
  color: var(--mvp-muted);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
  text-decoration: none;
}

.mvp-shell .question-sibling-nav a:hover {
  border-color: var(--mvp-brand);
}

.mvp-shell .question-sibling-nav a.is-next {
  grid-column: 2;
  text-align: right;
}

.mvp-shell .question-sibling-nav span {
  margin-bottom: 3px;
  color: var(--mvp-subtle);
  font-size: 11px;
}

.mvp-shell .question-sibling-nav strong {
  color: var(--mvp-text);
  font-size: 14px;
}

.mvp-shell .question-honesty-notice {
  padding: 18px 20px;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.7;
}

.mvp-shell .question-wiki-links {
  padding: 18px 20px;
  background: var(--mvp-surface-raised);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.7;
}

.mvp-shell .question-wiki-links strong {
  display: block;
  margin-bottom: 6px;
  color: var(--mvp-text);
}

.mvp-shell .question-wiki-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mvp-shell .question-wiki-links li + li {
  margin-top: 4px;
}

.mvp-shell .question-honesty-notice strong {
  color: var(--mvp-text);
}

.mvp-shell .question-honesty-notice p {
  margin: 4px 0 0;
}

.mvp-shell .question-info-card {
  padding: 20px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .question-info-card dl {
  margin: 0;
}

.mvp-shell .question-info-card dl > div {
  display: grid;
  padding: 12px 0;
  grid-template-columns: 76px minmax(0, 1fr);
  border-top: 1px solid var(--mvp-line);
  gap: 10px;
}

.mvp-shell .question-info-card dt {
  color: var(--mvp-subtle);
  font-size: 12px;
}

.mvp-shell .question-info-card dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--mvp-text);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.6;
}

/* 근거는 한 덩어리로 붙여 놓으면 사이드바에서 벽처럼 보인다. 항목별로 끊는다. */
.mvp-shell .question-basis-list {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 7px;
  list-style: none;
}

.mvp-shell .question-basis-list li {
  padding-left: 10px;
  color: var(--mvp-muted);
  border-left: 2px solid var(--mvp-line-strong);
  font-weight: 600;
}

.mvp-shell .question-feedback-button {
  display: block;
  margin-top: 10px;
  padding: 11px 14px;
  color: var(--mvp-muted);
  border: 1px solid var(--mvp-line-strong);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 760;
  text-align: center;
  text-decoration: none;
}

.mvp-shell .question-feedback-button:hover {
  color: var(--mvp-brand);
  border-color: var(--mvp-brand);
}

/* 체감 난이도: 상=danger, 중=warning, 하=brand */
.mvp-shell .tone-hard {
  --tone: var(--mvp-danger);
}
.mvp-shell .tone-medium {
  --tone: var(--mvp-warning);
}
.mvp-shell .tone-easy {
  --tone: var(--mvp-brand);
}

/* 사이드바 미니 게이지 */
.mvp-shell .difficulty-mini {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 8px;
  margin-bottom: 8px;
  gap: 2px;
  border-radius: 999px;
}

.mvp-shell .difficulty-mini-seg {
  width: var(--seg, 0%);
  background: var(--tone, var(--mvp-line-strong));
  border-radius: 999px;
}

.mvp-shell .difficulty-mini-legend {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 4px 12px;
  list-style: none;
  font-size: 12px;
  font-weight: 650;
}

.mvp-shell .difficulty-mini-legend li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--mvp-muted);
}

.mvp-shell .difficulty-mini-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--tone, var(--mvp-line-strong));
}

.mvp-shell .difficulty-jump {
  display: inline-block;
  margin-top: 8px;
  color: var(--mvp-brand);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.mvp-shell .difficulty-jump:hover {
  text-decoration: underline;
}

/* 본문 섹션 */
.mvp-shell .question-difficulty {
  margin-top: 32px;
  padding: 24px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 14px;
  scroll-margin-top: 80px;
}

.mvp-shell .difficulty-heading h2 {
  margin: 0;
  font-size: 18px;
}

.mvp-shell .difficulty-heading p {
  margin: 4px 0 0;
  font-size: 13px;
}

.mvp-shell .difficulty-distribution {
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mvp-shell .difficulty-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.mvp-shell .difficulty-row-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--tone, var(--mvp-text));
  text-align: center;
}

.mvp-shell .difficulty-track {
  height: 10px;
  background: var(--mvp-surface-strong);
  border-radius: 999px;
  overflow: hidden;
}

.mvp-shell .difficulty-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--tone, var(--mvp-line-strong));
  border-radius: 999px;
}

.mvp-shell .difficulty-row-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mvp-muted);
  white-space: nowrap;
}

.mvp-shell .difficulty-row-count em {
  font-style: normal;
  color: var(--mvp-subtle);
}

.mvp-shell .difficulty-total,
.mvp-shell .difficulty-empty {
  margin: 2px 0 0;
  font-size: 12.5px;
}

/* 작성 폼 */
.mvp-shell .difficulty-form {
  padding-top: 18px;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .difficulty-choices {
  margin: 0;
  padding: 0;
  border: 0;
}

.mvp-shell .difficulty-choices legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--mvp-text);
}

.mvp-shell .difficulty-choice-row {
  display: flex;
  gap: 8px;
}

.mvp-shell .difficulty-choice {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.mvp-shell .difficulty-choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.mvp-shell .difficulty-choice span {
  display: block;
  padding: 11px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 750;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border: 1.5px solid var(--mvp-line);
  border-radius: 10px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.mvp-shell .difficulty-choice:hover span {
  border-color: var(--mvp-line-strong);
}

.mvp-shell .difficulty-choice input:checked + span {
  color: var(--tone, var(--mvp-brand));
  border-color: var(--tone, var(--mvp-brand));
  background: color-mix(in srgb, var(--tone, var(--mvp-brand)) 12%, transparent);
}

.mvp-shell .difficulty-choice input:focus-visible + span {
  outline: 2px solid var(--mvp-brand);
  outline-offset: 2px;
}

.mvp-shell .difficulty-comment-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.mvp-shell .difficulty-comment-input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  color: var(--mvp-text);
  background: var(--mvp-bg);
  border: 1px solid var(--mvp-line-strong);
  border-radius: 9px;
  font: inherit;
  font-size: 14px;
}

.mvp-shell .difficulty-comment-input:focus {
  outline: none;
  border-color: var(--mvp-brand);
}

.mvp-shell .difficulty-comment-row .button {
  flex-shrink: 0;
  white-space: nowrap;
}

.mvp-shell .difficulty-error {
  margin: 10px 0 0;
  color: var(--mvp-danger);
  font-size: 12.5px;
  font-weight: 650;
}

.mvp-shell .difficulty-guest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-top: 1px solid var(--mvp-line);
  background: var(--mvp-surface-raised);
  border-radius: 0 0 12px 12px;
}

.mvp-shell .difficulty-guest p {
  margin: 0;
  font-size: 13px;
}

/* 한줄평 목록 */
.mvp-shell .difficulty-comments {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .difficulty-comments h3 {
  margin: 0 0 12px;
  font-size: 14px;
}

.mvp-shell .difficulty-comments ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mvp-shell .difficulty-comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 10px;
}

.mvp-shell .difficulty-comment.is-mine {
  border-color: color-mix(in srgb, var(--mvp-brand) 45%, var(--mvp-line));
  background: var(--mvp-brand-soft);
}

.mvp-shell .difficulty-badge {
  align-self: start;
  min-width: 30px;
  padding: 3px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--tone, var(--mvp-text));
  background: color-mix(in srgb, var(--tone, var(--mvp-line-strong)) 14%, transparent);
  border-radius: 6px;
}

.mvp-shell .difficulty-comment-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mvp-text);
  overflow-wrap: anywhere;
}

.mvp-shell .difficulty-comment-meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--mvp-subtle);
}

.mvp-shell .difficulty-mine-badge {
  color: var(--mvp-brand);
  font-weight: 700;
}

@media (max-width: 560px) {
  .mvp-shell .difficulty-comment-row {
    flex-direction: column;
  }
  .mvp-shell .difficulty-comment-row .button {
    width: 100%;
  }
}

.mvp-shell .question-mobile-top,
.mvp-shell .question-mobile-nav {
  display: none;
}

@media (max-width: 1079px) {
  .mvp-shell .question-detail-shell {
    display: block;
  }

  .mvp-shell .question-grid-sidebar,
  .mvp-shell .question-info-sidebar {
    display: none;
  }
}

@media (max-width: 820px) {
  .question-detail-body .site-header,
  .question-detail-body .site-footer,
  .question-detail-body .mobile-primary-nav,
  .mvp-shell .question-breadcrumb-strip {
    display: none;
  }

  .mvp-shell .site-main.question-detail-main {
    padding: 0 0 124px;
  }

  .mvp-shell .question-mobile-top {
    position: sticky;
    z-index: 55;
    top: 0;
    display: block;
    background: color-mix(in srgb, var(--mvp-bg) 94%, transparent);
    border-bottom: 1px solid var(--mvp-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mvp-shell .question-mobile-top-row {
    display: grid;
    min-height: 54px;
    padding: 0 14px;
    grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
    align-items: center;
    gap: 8px;
  }

  .mvp-shell .question-mobile-top-row > a {
    color: var(--mvp-text);
    font-size: 31px;
    line-height: 1;
    text-decoration: none;
  }

  .mvp-shell .question-mobile-top-row > strong {
    font-size: 13px;
    text-align: center;
  }

  .mvp-shell .question-mobile-top-row .review-approved-badge {
    justify-self: end;
    padding: 3px 6px;
    font-size: 9px;
  }

  .mvp-shell .question-scroll-progress {
    display: block;
    width: 100%;
    height: 3px;
    overflow: hidden;
    background: var(--mvp-surface-strong);
  }

  .mvp-shell .question-scroll-progress > span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--mvp-brand);
    transform-origin: left center;
  }

  .mvp-shell .question-detail-shell {
    width: 100%;
    padding: 0 14px;
  }

  .mvp-shell .question-content {
    max-width: none;
    padding-top: 25px;
  }

  .mvp-shell .question-heading {
    margin-bottom: 20px;
  }

  .mvp-shell .question-meta {
    min-height: 0;
    margin-bottom: 9px;
    font-size: 11.5px;
  }

  .mvp-shell .question-meta .review-approved-badge {
    display: none;
  }

  .mvp-shell .question-heading h1 {
    font-size: 30px;
  }

  .mvp-shell .question-detail-page .question-stem {
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 1.72;
  }

  .mvp-shell .answer-toggle {
    margin-bottom: 18px;
  }

  .mvp-shell .answer-toggle button {
    min-height: 42px;
    padding-right: 6px;
    padding-left: 6px;
    font-size: 12px;
  }

  .mvp-shell .question-detail-page .question-choice-list {
    margin-bottom: 24px;
    gap: 8px;
  }

  .mvp-shell .question-detail-page .question-choice-list li {
    min-height: 52px;
    padding: 0;
    font-size: 14px;
  }

  .mvp-shell .official-answer-box {
    margin-bottom: 28px;
    padding: 15px;
  }

  .mvp-shell .official-answer-label {
    width: 52px;
    min-width: 52px;
    min-height: 52px;
    font-size: 17px;
  }

  .mvp-shell .commentary-heading {
    align-items: flex-start;
  }

  .mvp-shell .commentary-heading h2 {
    font-size: 18px;
  }

  .mvp-shell .commentary-desktop {
    display: none;
  }

  .mvp-shell .commentary-mobile {
    display: block;
  }

  .mvp-shell .commentary-mobile details {
    border-top: 1px solid var(--mvp-line);
  }

  .mvp-shell .commentary-mobile details:last-child {
    border-bottom: 1px solid var(--mvp-line);
  }

  .mvp-shell .commentary-mobile summary {
    position: relative;
    padding: 15px 28px 15px 2px;
    cursor: pointer;
    color: var(--mvp-text);
    font-size: 13px;
    font-weight: 800;
    list-style: none;
  }

  .mvp-shell .commentary-mobile summary::-webkit-details-marker {
    display: none;
  }

  .mvp-shell .commentary-mobile summary::after {
    position: absolute;
    top: 14px;
    right: 4px;
    content: "+";
    color: var(--mvp-subtle);
    font-size: 17px;
    font-weight: 500;
  }

  .mvp-shell .commentary-mobile details[open] summary::after {
    content: "−";
  }

  .mvp-shell .commentary-accordion-body {
    padding: 0 2px 17px;
  }

  .mvp-shell .commentary-accordion-body.choice-note-cards {
    display: grid;
  }

  .mvp-shell .choice-note-card {
    padding: 13px;
  }

  .mvp-shell .question-sibling-nav {
    display: none;
  }

  .mvp-shell .question-honesty-notice {
    margin-top: 34px;
    padding: 16px;
  }

  .mvp-shell .question-mobile-nav {
    position: fixed;
    z-index: 59;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    display: grid;
    min-height: 54px;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    background: color-mix(in srgb, var(--mvp-surface) 94%, transparent);
    border: 1px solid var(--mvp-line-strong);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .mvp-shell .question-mobile-nav > a,
  .mvp-shell .question-mobile-nav > .is-disabled {
    display: grid;
    height: 100%;
    place-items: center;
    color: var(--mvp-text);
    font-size: 27px;
    line-height: 1;
    text-decoration: none;
  }

  .mvp-shell .question-mobile-nav > .is-disabled {
    color: var(--mvp-line-strong);
  }

  .mvp-shell .question-mobile-nav > div {
    display: grid;
    padding: 9px 14px;
    justify-items: center;
    gap: 6px;
  }

  .mvp-shell .question-mobile-nav strong {
    color: var(--mvp-muted);
    font-size: 11px;
  }

  .mvp-shell .question-mobile-nav .question-progress-track {
    width: min(200px, 45vw);
    height: 4px;
  }
}

/* ── W03 과목별 문항 목록 ──────────────────────────────────────────── */

.mvp-shell .subject-list-page {
  padding: 6px 0 64px;
}

.mvp-shell .subject-list-breadcrumbs ol {
  display: flex;
  margin: 0 0 20px;
  padding: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  color: var(--mvp-subtle);
  font-size: 12.5px;
}

.mvp-shell .subject-list-breadcrumbs li + li::before {
  margin-right: 8px;
  color: var(--mvp-line-strong);
  content: '\203a';
}

.mvp-shell .subject-list-breadcrumbs a {
  color: var(--mvp-muted);
  text-decoration: none;
}

.mvp-shell .subject-list-breadcrumbs a:hover,
.mvp-shell .subject-list-breadcrumbs a:focus-visible {
  color: var(--mvp-brand);
}

.mvp-shell .subject-list-heading h1 {
  margin: 8px 0 10px;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mvp-shell .subject-list-heading p {
  margin: 0;
  max-width: 58ch;
}

.mvp-shell .subject-list-stats {
  display: flex;
  margin: 22px 0 0;
  flex-wrap: wrap;
  gap: 10px;
}

.mvp-shell .subject-list-stats > div {
  padding: 12px 20px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .subject-list-stats dt {
  color: var(--mvp-subtle);
  font-size: 11.5px;
  font-weight: 700;
}

.mvp-shell .subject-list-stats dd {
  margin: 3px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mvp-shell .subject-list-toolbar {
  display: flex;
  margin: 30px 0 18px;
  padding-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--mvp-line);
}

/* 필터와 보기 전환은 스크립트로만 동작한다. JS 가 없으면 죽은 컨트롤을 보여주지 않고
   목록 전체를 그대로 둔다. */
.mvp-shell .subject-list-page:not(.is-enhanced) .subject-list-toolbar {
  display: none;
}

.mvp-shell .subject-list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mvp-shell .subject-list-filters button {
  display: inline-flex;
  padding: 8px 15px;
  align-items: center;
  gap: 7px;
  color: var(--mvp-muted);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mvp-shell .subject-list-filters button b {
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 800;
}

.mvp-shell .subject-list-filters button:hover,
.mvp-shell .subject-list-filters button:focus-visible {
  color: var(--mvp-text);
  border-color: var(--mvp-line-strong);
}

.mvp-shell .subject-list-filters button[aria-pressed='true'] {
  color: #ffffff;
  background: var(--mvp-text);
  border-color: var(--mvp-text);
}

.mvp-shell .subject-list-filters button[aria-pressed='true'] b {
  color: rgba(255, 255, 255, 0.72);
}

.mvp-shell .subject-list-views {
  display: flex;
  padding: 3px;
  gap: 2px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 10px;
}

.mvp-shell .subject-list-views button {
  padding: 6px 14px;
  color: var(--mvp-muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mvp-shell .subject-list-views button[aria-pressed='true'] {
  color: var(--mvp-text);
  background: var(--mvp-surface);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.09);
}

.mvp-shell .subject-question-board {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.mvp-shell .subject-question-board > li > a {
  position: relative;
  display: flex;
  padding: 14px 16px;
  align-items: flex-start;
  gap: 14px;
  color: inherit;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
  text-decoration: none;
}

.mvp-shell .subject-question-board > li > a:hover,
.mvp-shell .subject-question-board > li > a:focus-visible {
  background: var(--mvp-surface-raised);
  border-color: var(--mvp-line-strong);
}

.mvp-shell .question-item-number {
  flex: none;
  min-width: 32px;
  padding-top: 2px;
  color: var(--mvp-subtle);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.mvp-shell .subject-question-board > li[data-visited='1'] .question-item-number {
  color: var(--mvp-brand);
}

.mvp-shell .question-item-body {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.mvp-shell .question-item-head {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mvp-shell .question-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mvp-shell .question-item-tags:empty {
  display: none;
}

/* 격자 보기 — 지문을 접고 번호만 남긴다. */
.mvp-shell .subject-question-board[data-view='grid'] {
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 7px;
}

.mvp-shell .subject-question-board[data-view='grid'] > li > a {
  display: grid;
  padding: 0;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 9px;
}

.mvp-shell .subject-question-board[data-view='grid'] .question-item-body {
  display: none;
}

.mvp-shell .subject-question-board[data-view='grid'] .question-item-number {
  min-width: 0;
  padding-top: 0;
  color: var(--mvp-text);
  font-size: 15px;
}

.mvp-shell
  .subject-question-board[data-view='grid']
  > li[data-visited='1']
  > a {
  background: var(--mvp-brand-soft);
  border-color: transparent;
}

/* 격자에서는 배지를 접으므로 해설 유무를 점으로 남긴다. */
.mvp-shell
  .subject-question-board[data-view='grid']
  > li[data-has-commentary='1']
  > a::after {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 5px;
  height: 5px;
  background: var(--mvp-brand);
  border-radius: 50%;
  content: '';
}

.mvp-shell .subject-list-empty {
  margin: 28px 0 0;
  padding: 30px;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border: 1px dashed var(--mvp-line-strong);
  border-radius: 12px;
  text-align: center;
}

.mvp-shell .subject-list-note {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--mvp-line);
  font-size: 13px;
}

@media (max-width: 820px) {
  .mvp-shell .subject-list-toolbar {
    margin-top: 24px;
    align-items: stretch;
    flex-direction: column;
  }

  .mvp-shell .subject-list-views {
    align-self: flex-start;
  }

  .mvp-shell .subject-list-stats > div {
    padding: 10px 16px;
  }

  .mvp-shell .subject-list-stats dd {
    font-size: 19px;
  }
}

/* ── W05 예측 대조 시각화 ──────────────────────────────────────────── */

.mvp-shell .prediction-scoreboard {
  display: grid;
  margin: 26px 0 30px;
  padding: 28px;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 32px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
}

.mvp-shell .prediction-headline .badge {
  min-height: 32px;
  padding: 6px 14px;
  color: var(--mvp-text);
  border-color: var(--mvp-line-strong);
  font-size: 14px;
}

.mvp-shell .prediction-figure {
  display: block;
  margin: 16px 0 0;
  color: var(--mvp-brand);
  font-size: clamp(46px, 6vw, 66px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}

.mvp-shell .prediction-figure span {
  margin-left: 3px;
  font-size: 0.42em;
  letter-spacing: 0;
}

.mvp-shell .prediction-figure-label {
  margin: 9px 0 12px;
  font-size: 14px;
  font-weight: 700;
}

.mvp-shell .prediction-headline p.muted {
  margin: 0;
  font-size: 13.5px;
}

.mvp-shell .prediction-legend {
  display: grid;
  margin: 20px 0 0;
  padding: 0;
  gap: 8px;
  list-style: none;
  color: var(--mvp-muted);
  font-size: 12.5px;
}

.mvp-shell .prediction-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mvp-shell .prediction-legend i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.mvp-shell .prediction-legend i.is-exact {
  background: var(--mvp-brand);
}

.mvp-shell .prediction-legend i.is-approx {
  background: var(--mvp-warning);
}

.mvp-shell .prediction-legend i.is-miss {
  background: var(--mvp-line-strong);
}

.mvp-shell .prediction-legend i.is-gap {
  background: var(--mvp-surface-strong);
  border: 1px solid var(--mvp-line-strong);
}

.mvp-shell .prediction-bars {
  display: grid;
  padding: 22px;
  align-content: start;
  gap: 14px;
  background: var(--mvp-surface-raised);
  border-radius: 13px;
}

.mvp-shell .prediction-bars h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

.mvp-shell .prediction-bar-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}

.mvp-shell .prediction-bar-name {
  color: var(--mvp-muted);
  font-weight: 700;
}

.mvp-shell .prediction-bar-track {
  display: flex;
  overflow: hidden;
  height: 10px;
  background: var(--mvp-surface-strong);
  border-radius: 999px;
}

.mvp-shell .prediction-bar-exact {
  background: var(--mvp-brand);
}

.mvp-shell .prediction-bar-approx {
  background: var(--mvp-warning);
}

.mvp-shell .prediction-bar-value {
  color: var(--mvp-text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .prediction-bar-value .muted {
  font-weight: 600;
}

.mvp-shell .prediction-bars-note,
.mvp-shell .prediction-review-note {
  margin: 4px 0 0;
  font-size: 12px;
}

.mvp-shell .prediction-review-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--mvp-line);
}

/* 과목 탭 — 스크립트가 붙기 전에는 모든 과목 표가 세로로 이어진다. */
.mvp-shell .prediction-subject-tabs {
  display: none;
}

.mvp-shell .prediction-subject-tabs.is-enhanced {
  display: flex;
  margin: 0 0 18px;
  padding-bottom: 2px;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 4px;
  border-bottom: 1px solid var(--mvp-line);
  scrollbar-width: none;
}

.mvp-shell .prediction-subject-tabs button {
  padding: 11px 16px;
  flex: none;
  color: var(--mvp-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.mvp-shell .prediction-subject-tabs button[aria-selected='true'] {
  color: var(--mvp-text);
  border-bottom-color: var(--mvp-brand);
}

@media (max-width: 820px) {
  .mvp-shell .prediction-scoreboard {
    padding: 22px;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .mvp-shell .prediction-bar-row {
    grid-template-columns: 78px minmax(0, 1fr) auto;
    gap: 9px;
    font-size: 12px;
  }
}

/* ── W07 커뮤니티 게시판 ───────────────────────────────────────────── */

.mvp-shell .button-ghost {
  color: var(--mvp-muted);
  background: transparent;
  border: 1px solid var(--mvp-line-strong);
  box-shadow: none;
}

.mvp-shell .board-page {
  padding: 6px 0 60px;
}

.mvp-shell .board-heading {
  display: flex;
  margin-bottom: 26px;
  padding-bottom: 22px;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .board-heading h1 {
  margin: 8px 0 8px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mvp-shell .board-heading p {
  margin: 0;
}

.mvp-shell .board-shell {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 236px;
  align-items: start;
  gap: 26px;
}

.mvp-shell .board-sidebar h2,
.mvp-shell .board-rail-card h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
}

.mvp-shell .board-sidebar {
  position: sticky;
  top: 96px;
}

.mvp-shell .board-category-list {
  display: grid;
  gap: 1px;
}

.mvp-shell .board-category {
  padding: 8px 11px;
  color: var(--mvp-muted);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.mvp-shell .board-category:hover,
.mvp-shell .board-category:focus-visible {
  color: var(--mvp-text);
  background: var(--mvp-surface-raised);
}

.mvp-shell .board-category.is-active {
  color: var(--mvp-text);
  background: var(--mvp-surface-strong);
}

.mvp-shell .board-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.mvp-shell .board-row {
  display: grid;
  padding: 15px 17px;
  gap: 9px;
  color: inherit;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
  text-decoration: none;
}

.mvp-shell .board-row:hover,
.mvp-shell .board-row:focus-visible {
  background: var(--mvp-surface-raised);
  border-color: var(--mvp-line-strong);
}

.mvp-shell .board-row-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.mvp-shell .board-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  color: var(--mvp-subtle);
  font-size: 12px;
}

.mvp-shell .board-row-comments {
  color: var(--mvp-muted);
  font-weight: 700;
}

.mvp-shell .board-empty {
  padding: 46px 30px;
  background: var(--mvp-surface);
  border: 1px dashed var(--mvp-line-strong);
  border-radius: 14px;
  text-align: center;
}

.mvp-shell .board-empty h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mvp-shell .board-empty p {
  margin: 0 auto 20px;
  max-width: 42ch;
}

.mvp-shell .board-rules {
  display: grid;
  margin: 30px 0 0;
  padding: 26px 0 0;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  list-style: none;
  border-top: 1px solid var(--mvp-line);
  text-align: left;
}

.mvp-shell .board-rules li {
  display: grid;
  padding: 15px 16px;
  gap: 6px;
  background: var(--mvp-surface-raised);
  border-radius: 11px;
  font-size: 12.5px;
}

.mvp-shell .board-rules strong {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mvp-shell .board-rail {
  position: sticky;
  top: 96px;
}

.mvp-shell .board-rail-card {
  display: grid;
  padding: 20px;
  justify-items: start;
  gap: 10px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 14px;
}

.mvp-shell .board-rail-card h2 {
  margin: 4px 0 0;
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.mvp-shell .board-rail-card p {
  margin: 0;
  font-size: 12.5px;
}

.mvp-shell .board-rail-card .button {
  width: 100%;
  margin-top: 4px;
}

.mvp-shell .board-rail-link {
  color: var(--mvp-muted);
  font-size: 12.5px;
  font-weight: 700;
}

.mvp-shell .board-disclaimer {
  margin: 34px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--mvp-line);
  font-size: 12.5px;
}

@media (max-width: 1079px) {
  .mvp-shell .board-shell {
    grid-template-columns: 168px minmax(0, 1fr);
  }

  /* 좁아지면 오른쪽 레일은 목록 아래로 내려보낸다. 사이드바보다 목록이 먼저다. */
  .mvp-shell .board-rail {
    position: static;
    grid-column: 2;
  }
}

@media (max-width: 820px) {
  .mvp-shell .board-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .mvp-shell .board-sidebar {
    position: static;
    /* 가로 스크롤 칩 목록이 그리드 칸을 밀어내지 못하게 한다. min-width 를 풀지 않으면
       칩 10개의 고유 너비가 그대로 페이지 폭이 되어 화면이 옆으로 밀린다. */
    min-width: 0;
  }

  .mvp-shell .board-sidebar h2 {
    display: none;
  }

  /* 카테고리 10개는 모바일에서 가로로 밀어서 고른다. */
  .mvp-shell .board-category-list {
    display: flex;
    overflow-x: auto;
    padding-bottom: 3px;
    flex-wrap: nowrap;
    gap: 6px;
    scrollbar-width: none;
  }

  .mvp-shell .board-category-list::-webkit-scrollbar {
    display: none;
  }

  .mvp-shell .board-category {
    flex: none;
    border: 1px solid var(--mvp-line);
    border-radius: 999px;
    white-space: nowrap;
  }

  .mvp-shell .board-category.is-active {
    color: #ffffff;
    background: var(--mvp-text);
    border-color: var(--mvp-text);
  }

  .mvp-shell .board-rail {
    grid-column: 1;
  }

  .mvp-shell .board-empty {
    padding: 34px 20px;
  }
}

.mvp-shell .board-rules-panel {
  margin-top: 18px;
}

.mvp-shell .board-rules-panel h2 {
  margin: 0;
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 800;
}

.mvp-shell .board-rules-panel .board-rules {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

/* ── 운영 · 문구 편집 ──────────────────────────────────────────────── */

.mvp-shell .copy-editor {
  padding-bottom: 60px;
}

.mvp-shell .copy-editor-heading h1 {
  margin: 8px 0 8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mvp-shell .copy-editor-heading p {
  margin: 0;
}

/* 화면이 10개라 한 줄에 안 들어간다. 넓은 화면에서는 접어서 전부 보이게 하고,
   좁은 화면에서만 가로로 민다 — 잘린 탭은 있는 줄도 모르게 된다. */
.mvp-shell .copy-screen-tabs {
  display: flex;
  margin: 24px 0 20px;
  flex-wrap: wrap;
  gap: 4px 2px;
  border-bottom: 1px solid var(--mvp-line);
}

@media (max-width: 640px) {
  .mvp-shell .copy-screen-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .mvp-shell .copy-screen-tab {
    flex: none;
  }
}

.mvp-shell .copy-screen-tab {
  padding: 11px 16px;
  flex: none;
  color: var(--mvp-muted);
  border-bottom: 2px solid transparent;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.mvp-shell .copy-screen-tab.is-active {
  color: var(--mvp-text);
  border-bottom-color: var(--mvp-brand);
}

.mvp-shell .copy-editor-flash {
  margin: 0 0 16px;
  padding: 12px 16px;
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
}

.mvp-shell .copy-editor-errors {
  margin-bottom: 16px;
  color: var(--mvp-danger);
  font-size: 13px;
}

.mvp-shell .copy-editor-form {
  display: grid;
  gap: 10px;
}

.mvp-shell .copy-row {
  display: grid;
  padding: 15px 17px;
  gap: 9px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .copy-row.is-locked {
  background: var(--mvp-surface-raised);
  border-style: dashed;
}

.mvp-shell .copy-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 13.5px;
}

.mvp-shell .copy-row-head code {
  color: var(--mvp-subtle);
  font-size: 11.5px;
}

.mvp-shell .copy-row input[type="text"],
.mvp-shell .copy-row textarea {
  width: 100%;
  padding: 10px 12px;
  color: var(--mvp-text);
  background: var(--mvp-bg);
  border: 1px solid var(--mvp-line-strong);
  border-radius: 9px;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
}

.mvp-shell .copy-row textarea {
  resize: vertical;
}

.mvp-shell .copy-locked-value {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 14px;
  line-height: 1.6;
}

.mvp-shell .copy-locked-note,
.mvp-shell .copy-field-error {
  margin: 0;
  font-size: 12px;
}

.mvp-shell .copy-locked-note {
  color: var(--mvp-subtle);
}

.mvp-shell .copy-field-error {
  color: var(--mvp-danger);
  font-weight: 700;
}

.mvp-shell .copy-editor-actions {
  display: flex;
  margin-top: 14px;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.mvp-shell .copy-editor-actions .muted {
  flex: 1 1 280px;
  font-size: 12px;
}

.mvp-shell .copy-history {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .copy-history h2 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
}

.mvp-shell .copy-history ol {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.mvp-shell .copy-history li {
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.mvp-shell .copy-history-meta {
  color: var(--mvp-subtle);
  font-size: 11.5px;
}

.mvp-shell .copy-history-value {
  color: var(--mvp-muted);
}

/* ── W04 2차 자체 해설 ─────────────────────────────────────────────── */

.mvp-shell .commentary-paper-notice {
  margin-top: 22px;
}

.mvp-shell .question-block-head {
  display: flex;
  margin-bottom: 22px;
  padding-bottom: 18px;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .question-block-head h3 {
  width: 100%;
  margin: 6px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 다섯 단계를 번호로 세운다. 문항마다 항목이 몇 개인지 눈으로 세지 않아도 된다. */
.mvp-shell .commentary-step {
  display: grid;
  padding: 20px 0;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 16px;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .question-block {
  content-visibility: auto;
  contain-intrinsic-size: auto 1080px;
}

.mvp-shell .commentary-step:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.mvp-shell .commentary-step-index {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.mvp-shell .commentary-step > div {
  min-width: 0;
}

.mvp-shell .commentary-step h4 {
  margin: 3px 0 10px;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mvp-shell .commentary-step > div > :last-child {
  margin-bottom: 0;
}

.mvp-shell .commentary-step-hint {
  margin: -4px 0 12px;
  font-size: 12.5px;
}

.mvp-shell .commentary-fold {
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--mvp-surface-raised);
  border-radius: 11px;
}

.mvp-shell .commentary-fold summary {
  color: var(--mvp-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mvp-shell .commentary-fold[open] summary {
  margin-bottom: 10px;
}

.mvp-shell .commentary-fold .answer-body {
  background: var(--mvp-surface);
}

.mvp-shell .answer-checklist {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 6px;
  list-style: none;
  counter-reset: outline;
}

.mvp-shell .answer-checklist li {
  margin: 0;
  padding: 11px 14px;
  background: var(--mvp-surface-raised);
  border: 1px solid transparent;
  border-radius: 11px;
}

.mvp-shell .answer-checklist li.is-checked {
  background: var(--mvp-brand-soft);
}

.mvp-shell .answer-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
}

.mvp-shell .answer-checklist input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 3px 0 0;
  accent-color: var(--mvp-brand);
}

.mvp-shell .answer-checklist li.is-checked span {
  color: var(--mvp-muted);
}

/* 스크립트가 없으면 체크박스는 눌러도 남지 않는다. 목차는 그대로 읽히게 두고 상자만 뺀다. */
.mvp-shell .answer-checklist:not(.is-enhanced) input {
  display: none;
}

.mvp-shell .answer-checklist:not(.is-enhanced) {
  counter-reset: outline;
}

.mvp-shell .answer-checklist:not(.is-enhanced) label::before {
  counter-increment: outline;
  color: var(--mvp-subtle);
  content: counter(outline) '.';
  font-weight: 800;
}

/* ── W09 1차 허브 · 진행률과 과목 카드 ─────────────────────────────── */

.mvp-shell .hub-progress {
  display: flex;
  margin: 26px 0 6px;
  padding: 20px 24px;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
}

.mvp-shell .hub-progress-figure {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 4px;
}

.mvp-shell .hub-progress-figure strong {
  color: var(--mvp-brand);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.mvp-shell .hub-progress-figure span {
  color: var(--mvp-subtle);
  font-size: 14px;
  font-weight: 700;
}

.mvp-shell .hub-progress-body {
  flex: 1 1 240px;
  min-width: 0;
}

.mvp-shell .hub-progress-body h2 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mvp-shell .hub-progress-body p {
  margin: 0 0 10px;
  font-size: 12.5px;
}

.mvp-shell .hub-progress-track {
  display: block;
  overflow: hidden;
  height: 8px;
  background: var(--mvp-surface-strong);
  border-radius: 999px;
}

.mvp-shell .hub-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--mvp-brand);
  border-radius: inherit;
}

.mvp-shell .hub-subject-grid {
  display: grid;
  margin-bottom: 34px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.mvp-shell .hub-subject-card {
  display: grid;
  padding: 20px;
  gap: 10px;
  color: inherit;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 14px;
  text-decoration: none;
}

.mvp-shell .hub-subject-card:hover,
.mvp-shell .hub-subject-card:focus-visible {
  border-color: var(--mvp-brand);
}

.mvp-shell .hub-subject-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mvp-shell .hub-subject-card p {
  margin: -4px 0 0;
  font-size: 12.5px;
}

/* 한 문항도 안 본 과목에 빈 막대를 그리면 진행률이 아니라 장식으로 읽힌다. */
.mvp-shell .hub-subject-card:not(.has-progress) .hub-subject-meter {
  display: none;
}

.mvp-shell .hub-subject-meter {
  display: block;
  overflow: hidden;
  height: 5px;
  background: var(--mvp-surface-strong);
  border-radius: 999px;
}

.mvp-shell .hub-subject-meter > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--mvp-brand);
  border-radius: inherit;
}

.mvp-shell .hub-subject-status {
  color: var(--mvp-subtle);
  font-size: 11.5px;
  font-weight: 700;
}

@media (max-width: 820px) {
  .mvp-shell .hub-progress {
    padding: 18px;
    gap: 16px;
  }

  .mvp-shell .hub-progress-figure strong {
    font-size: 32px;
  }
}

/* ── W10 준비 중 안내 ──────────────────────────────────────────────── */

.mvp-shell .roadmap-page {
  max-width: 640px;
  margin: 24px auto 60px;
  text-align: center;
}

.mvp-shell .roadmap-page h1 {
  margin: 16px 0 10px;
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mvp-shell .roadmap-tagline {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--mvp-muted);
}

.mvp-shell .roadmap-notice {
  margin: 28px 0;
  text-align: left;
}

.mvp-shell .roadmap-plan-title {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 800;
}

.mvp-shell .roadmap-steps {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
  text-align: left;
}

.mvp-shell .roadmap-steps li {
  display: grid;
  padding: 16px 18px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .roadmap-steps li > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border-radius: 50%;
  font-size: 11.5px;
  font-weight: 800;
}

.mvp-shell .roadmap-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.mvp-shell .roadmap-actions {
  justify-content: center;
  margin-top: 30px;
}

.mvp-shell .roadmap-foot {
  margin-top: 16px;
  font-size: 12.5px;
}

/* ── W13 오류 제보 ─────────────────────────────────────────────────── */

.mvp-shell .support-page {
  max-width: 620px;
  margin: 24px auto 60px;
}

.mvp-shell .support-page h1 {
  margin: 10px 0 10px;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mvp-shell .support-page > p {
  margin: 0 0 24px;
}

.mvp-shell .support-form {
  padding: 24px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
}

.mvp-shell .support-promise {
  display: grid;
  margin: 22px 0 0;
  padding: 18px 20px;
  gap: 6px;
  background: var(--mvp-surface-raised);
  border-radius: 13px;
}

.mvp-shell .support-promise strong {
  font-size: 13.5px;
  font-weight: 800;
}

.mvp-shell .support-promise span {
  color: var(--mvp-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ── W08 게시글 상세 ──────────────────────────────────────────────── */

.mvp-shell .post-page {
  max-width: 720px;
  margin: 6px auto 0;
}

.mvp-shell .post-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--mvp-line-strong);
  font-size: 12.5px;
}

.mvp-shell .post-breadcrumbs a {
  color: var(--mvp-muted);
  text-decoration: none;
}

.mvp-shell .post-breadcrumbs a:hover {
  color: var(--mvp-brand);
}

.mvp-shell .post-heading {
  margin: 14px 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .post-heading h1 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.35;
}

.mvp-shell .post-heading p {
  margin: 0;
  font-size: 12.5px;
}

.mvp-shell .post-body {
  font-size: 15.5px;
  line-height: 1.8;
}

.mvp-shell .post-comments {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .post-comments h2 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 800;
}

.mvp-shell .post-comment {
  padding: 15px 0;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .post-comment:first-of-type {
  border-top: 0;
}

.mvp-shell .post-comment-head {
  display: flex;
  margin-bottom: 7px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--mvp-subtle);
  font-size: 12px;
}

.mvp-shell .post-comment p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
}

.mvp-shell .post-comments-empty {
  padding: 26px 0;
  text-align: center;
}

.mvp-shell .post-comment-form,
.mvp-shell .post-comment-guest {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--mvp-line);
}

/* 넓은 화면에서는 댓글 입력이 바로 아래에 보이므로 고정 진입점이 필요 없다. */
.mvp-shell .post-comment-jump {
  display: none;
}

@media (max-width: 820px) {
  .mvp-shell .post-comment-jump {
    position: fixed;
    right: 16px;
    /* 하단 탭바(고정, 약 66px + 여백) 를 가리지 않게 그 위에 띄운다. */
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 78px);
    z-index: 30;
    display: inline-flex;
    padding: 11px 18px;
    align-items: center;
    color: #ffffff;
    background: var(--mvp-text);
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(24, 24, 27, 0.24);
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
  }

  .mvp-shell .post-page {
    padding-bottom: 20px;
  }
}

.mvp-shell .board-rail-note {
  padding-top: 10px;
  border-top: 1px solid var(--mvp-line);
  font-size: 11.5px;
}

/* ── W04 문항 목차 ─────────────────────────────────────────────────── */

.mvp-shell .commentary-index {
  margin: 18px 0 30px;
  padding: 18px 22px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 14px;
}

.mvp-shell .commentary-index summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.mvp-shell .commentary-index summary b {
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 700;
}

.mvp-shell .commentary-index-body {
  display: grid;
  margin-top: 18px;
  padding-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px 26px;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .commentary-index-body h3 {
  margin: 0 0 9px;
  font-size: 12.5px;
  font-weight: 800;
}

.mvp-shell .commentary-index-body h3 a {
  color: var(--mvp-muted);
  text-decoration: none;
}

.mvp-shell .commentary-index-body h3 a:hover {
  color: var(--mvp-brand);
}

.mvp-shell .commentary-index-body ol {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 2px;
  list-style: none;
}

.mvp-shell .commentary-index-body li a {
  display: grid;
  padding: 6px 8px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  color: var(--mvp-text);
  border-radius: 7px;
  font-size: 13px;
  text-decoration: none;
}

.mvp-shell .commentary-index-body li a:hover,
.mvp-shell .commentary-index-body li a:focus-visible {
  background: var(--mvp-surface-raised);
}

.mvp-shell .commentary-index-body li b {
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 800;
}

/* 목차는 한 줄 요약이다. 제목이 길어도 줄바꿈으로 늘어나지 않게 자른다. */
.mvp-shell .commentary-index-body li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mvp-shell .commentary-index-body li.is-empty {
  padding: 6px 8px;
  color: var(--mvp-subtle);
  font-size: 12.5px;
}

@media (max-width: 820px) {
  /* 세로로 아주 긴 화면이라 모바일에서는 목차를 접어 둔다. */
  .mvp-shell .commentary-index {
    padding: 15px 18px;
  }

  .mvp-shell .commentary-index-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* ── 기출문제 진입 화면 ───────────────────────────────────────────── */

.mvp-shell .question-index-grid {
  display: grid;
  margin: 8px 0 30px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.mvp-shell .question-index-card {
  display: grid;
  padding: 26px;
  align-content: start;
  gap: 8px;
  color: inherit;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
  text-decoration: none;
}

.mvp-shell .question-index-card:hover,
.mvp-shell .question-index-card:focus-visible {
  border-color: var(--mvp-brand);
}

.mvp-shell .question-index-mark {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  place-items: center;
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  border-radius: 11px;
  font-size: 17px;
  font-weight: 800;
}

.mvp-shell .question-index-card h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mvp-shell .question-index-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.mvp-shell .question-index-meta {
  margin-top: 4px;
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 800;
}

/* ── 예측 인자 ─────────────────────────────────────────────────────── */

.mvp-shell .prediction-inputs {
  margin: 26px 0 4px;
  padding: 26px 28px;
  background: var(--mvp-surface-raised);
  border-radius: 16px;
}

.mvp-shell .prediction-inputs-head h2 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mvp-shell .prediction-inputs-head p {
  margin: 0 0 20px;
  font-size: 13.5px;
}

.mvp-shell .prediction-inputs ol {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  list-style: none;
  counter-reset: factor;
}

.mvp-shell .prediction-inputs li {
  display: grid;
  padding: 16px 18px;
  gap: 6px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .prediction-inputs strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mvp-shell .prediction-inputs strong::before {
  counter-increment: factor;
  margin-right: 7px;
  color: var(--mvp-brand);
  content: counter(factor);
  font-size: 12px;
}

.mvp-shell .prediction-inputs span {
  font-size: 12.5px;
  line-height: 1.6;
}

/* ── 랜딩 히어로 · 서비스 범위 지도 ────────────────────────────────── */

.mvp-shell .landing-scope {
  align-self: center;
  padding: 26px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 18px;
}

.mvp-shell .landing-scope ol {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  counter-reset: scope;
}

.mvp-shell .landing-scope li {
  display: grid;
  padding: 13px 15px;
  gap: 3px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 11px;
}

/* 준비 중은 점선으로 눕혀 둔다. 열린 것과 구분되지 않으면 없는 걸 파는 그림이 된다. */
.mvp-shell .landing-scope li:not(.is-open) {
  background: transparent;
  border-style: dashed;
  opacity: 0.72;
}

.mvp-shell .landing-scope li b {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mvp-shell .landing-scope li span {
  color: var(--mvp-subtle);
  font-size: 11px;
  font-weight: 700;
}

.mvp-shell .landing-scope li.is-open span {
  color: var(--mvp-brand);
}

.mvp-shell .landing-scope > p {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .mvp-shell .landing-scope {
    padding: 20px;
  }

  .mvp-shell .landing-scope li {
    padding: 11px 13px;
  }
}

/* ── 교재 안내 ─────────────────────────────────────────────────────── */

.mvp-shell .textbook-page {
  max-width: 660px;
  margin: 24px auto 60px;
}

.mvp-shell .textbook-page h1 {
  margin: 16px 0 20px;
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mvp-shell .textbook-promise {
  margin: 0;
  padding: 24px 26px;
  background: var(--mvp-brand-soft);
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: -0.02em;
}

.mvp-shell .textbook-promise-note {
  margin: 10px 2px 0;
  font-size: 12px;
}

.mvp-shell .textbook-notice,
.mvp-shell .textbook-plan-title {
  margin-top: 30px;
}

.mvp-shell .textbook-plan-title {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 800;
}

/* ── 소개 ─────────────────────────────────────────────────────────── */

.mvp-shell .about-page {
  max-width: 720px;
  margin: 20px auto 60px;
}

.mvp-shell .about-heading h1 {
  margin: 10px 0 14px;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.3;
}

.mvp-shell .about-heading p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 15.5px;
  line-height: 1.75;
}

.mvp-shell .about-section-title {
  margin: 44px 0 16px;
  font-size: 14px;
  font-weight: 800;
}

.mvp-shell .about-principles {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
  counter-reset: principle;
}

.mvp-shell .about-principles li {
  display: grid;
  padding: 18px 20px;
  gap: 5px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .about-principles strong {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mvp-shell .about-principles strong::before {
  counter-increment: principle;
  margin-right: 8px;
  color: var(--mvp-brand);
  content: counter(principle);
  font-size: 12.5px;
}

.mvp-shell .about-principles span {
  font-size: 13.5px;
  line-height: 1.65;
}

.mvp-shell .about-scope-note {
  margin: -6px 0 14px;
  font-size: 13px;
}

.mvp-shell .about-scope ol {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.mvp-shell .about-contact {
  margin-top: 40px;
}

@media (max-width: 460px) {
  /* 헤더에 로고·테마·로그인·가입이 모두 들어가면 버튼 글자가 두 줄로 깨진다.
     워드마크만 남긴다 — 이름을 줄여도 읽히라고 만든 마크다. */
  .mvp-shell .brand-label {
    display: none;
  }

  .mvp-shell .brand-mark {
    font-size: 24px;
  }
}

/* ── 모의고사 응시·채점 ────────────────────────────────────────────── */

/* 화면에서는 감추되 낭독기에는 남긴다. 잔여시간을 눈으로는 숫자로, 귀로는 말로 준다. */
.mvp-shell .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mvp-shell .assessment-page {
  width: min(1020px, calc(100% - 40px));
  margin: 0 auto;
  padding: 38px 0 64px;
}

.mvp-shell .assessment-back {
  margin: 0 0 18px;
  font-size: 13px;
}

.mvp-shell .assessment-heading {
  margin-bottom: 26px;
}

.mvp-shell .assessment-heading h1 {
  margin: 8px 0 10px;
}

.mvp-shell .assessment-heading > p {
  max-width: 62ch;
  margin: 0;
  color: var(--mvp-muted);
  font-size: 14.5px;
}

.mvp-shell .assessment-detail-badges {
  margin: 10px 0 0;
}

.mvp-shell .assessment-internal-notice {
  border-left-color: var(--mvp-warning);
}

.mvp-shell .assessment-internal-notice p {
  margin: 6px 0 0;
  color: var(--mvp-muted);
  font-size: 13.5px;
}

.mvp-shell .assessment-error {
  border-left-color: var(--mvp-danger);
}

.mvp-shell .assessment-internal-badge {
  color: var(--mvp-warning);
  border-color: color-mix(in srgb, var(--mvp-warning) 45%, transparent);
}

.mvp-shell .assessment-form-grid {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  list-style: none;
}

.mvp-shell .assessment-form-card {
  display: flex;
  padding: 22px 23px;
  flex-direction: column;
  gap: 16px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
  box-shadow: var(--mvp-card-shadow);
}

.mvp-shell .assessment-form-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.mvp-shell .assessment-form-card-head h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.mvp-shell .assessment-form-card-head h2 a {
  color: var(--mvp-text);
  text-decoration: none;
}

.mvp-shell .assessment-form-card-head h2 a:hover {
  color: var(--mvp-brand);
}

.mvp-shell .assessment-form-facts {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mvp-shell .assessment-form-facts dt {
  color: var(--mvp-subtle);
  font-size: 11.5px;
  font-weight: 700;
}

.mvp-shell .assessment-form-facts dd {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.mvp-shell .assessment-form-card-foot {
  display: flex;
  margin-top: auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mvp-shell .assessment-closed-note,
.mvp-shell .assessment-empty {
  font-size: 13px;
}

.mvp-shell .assessment-detail-facts {
  max-width: 460px;
  margin-bottom: 24px;
}

.mvp-shell .assessment-rules ul {
  display: grid;
  margin: 0;
  padding-left: 20px;
  gap: 7px;
  color: var(--mvp-muted);
  font-size: 13.5px;
}

.mvp-shell .assessment-sections {
  margin-top: 30px;
}

.mvp-shell .assessment-detail-actions {
  display: flex;
  margin-top: 32px;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mvp-shell .assessment-detail-actions p {
  margin: 0;
  font-size: 13px;
}

/* ── 응시 화면 ─────────────────────────────────────────────────────── */

.mvp-shell .assessment-sit {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding-bottom: 70px;
}

/* 시간과 진행 상황은 어디까지 스크롤해도 보여야 한다. 헤더 바로 아래에 붙인다. */
.mvp-shell .assessment-sit-bar {
  position: sticky;
  z-index: 40;
  top: 64px;
  display: flex;
  margin-bottom: 8px;
  padding: 14px 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--mvp-bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .assessment-sit-identity {
  display: grid;
  gap: 2px;
}

.mvp-shell .assessment-sit-identity strong {
  font-size: 15px;
  font-weight: 820;
  letter-spacing: -0.02em;
}

.mvp-shell .assessment-sit-meters {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
}

.mvp-shell .assessment-timer,
.mvp-shell .assessment-progress {
  display: grid;
  gap: 1px;
  justify-items: end;
}

.mvp-shell .assessment-timer-label,
.mvp-shell .assessment-progress-label {
  color: var(--mvp-subtle);
  font-size: 11px;
  font-weight: 700;
}

.mvp-shell .assessment-timer-value {
  font-size: 25px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.mvp-shell .assessment-progress strong {
  font-size: 16px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .assessment-timer-end {
  color: var(--mvp-subtle);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .assessment-timer.is-urgent .assessment-timer-value {
  color: var(--mvp-danger);
}

.mvp-shell .assessment-timer.is-expired .assessment-timer-value {
  color: var(--mvp-subtle);
  text-decoration: line-through;
}

.mvp-shell .assessment-autosave {
  margin: 0;
  color: var(--mvp-subtle);
  font-size: 12px;
}

.mvp-shell .assessment-autosave[data-state="saving"] {
  color: var(--mvp-muted);
}

.mvp-shell .assessment-autosave[data-state="saved"] {
  color: var(--mvp-brand);
}

.mvp-shell .assessment-autosave[data-state="failed"],
.mvp-shell .assessment-autosave[data-state="expired"] {
  color: var(--mvp-danger);
}

.mvp-shell .assessment-expired {
  border-left-color: var(--mvp-danger);
}

.mvp-shell .assessment-sit-shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  padding-top: 22px;
  align-items: start;
  gap: clamp(20px, 2.4vw, 34px);
}

.mvp-shell .assessment-grid-sidebar .question-sticky-panel {
  top: 168px;
}

.mvp-shell .assessment-number-grid a.is-answered {
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  border-color: transparent;
}

.mvp-shell .assessment-grid-legend i.is-answered {
  background: var(--mvp-brand-soft);
  border-color: transparent;
}

.mvp-shell .assessment-section + .assessment-section {
  margin-top: 34px;
}

.mvp-shell .assessment-section-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--mvp-subtle);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mvp-shell .assessment-item-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 14px;
  list-style: none;
}

.mvp-shell .assessment-item {
  padding: 22px 24px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-left: 3px solid transparent;
  border-radius: 15px;
  scroll-margin-top: 170px;
}

/* 답한 문항은 왼쪽 선으로 표시한다. 배경을 칠하면 선지 대비가 흐려진다. */
.mvp-shell .assessment-item.is-answered {
  border-left-color: var(--mvp-brand);
}

.mvp-shell .assessment-item-head {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mvp-shell .assessment-item-number {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: var(--mvp-text);
  background: var(--mvp-surface-strong);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .assessment-item-points {
  color: var(--mvp-subtle);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .assessment-item-prompt {
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 1.75;
}

.mvp-shell .assessment-choices {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  border: 0;
}

.mvp-shell .assessment-choice {
  display: flex;
  padding: 12px 14px;
  align-items: start;
  gap: 11px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 11px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.6;
}

.mvp-shell .assessment-choice:hover {
  border-color: var(--mvp-line-strong);
}

/* 포커스 링은 라디오가 아니라 선지 상자에 준다. 키보드만으로도 어디에 있는지 보여야 한다. */
.mvp-shell .assessment-choice:focus-within {
  border-color: var(--mvp-brand);
  box-shadow: 0 0 0 3px var(--mvp-brand-soft);
}

.mvp-shell .assessment-choice:has(input:checked) {
  background: var(--mvp-brand-soft);
  border-color: var(--mvp-brand);
}

.mvp-shell .assessment-choice input[type="radio"] {
  margin: 3px 0 0;
  flex: none;
  accent-color: var(--mvp-brand);
}

.mvp-shell .assessment-choice input[type="radio"]:disabled {
  cursor: not-allowed;
}

.mvp-shell .assessment-choice-key {
  flex: none;
  color: var(--mvp-subtle);
  font-size: 12.5px;
  font-weight: 800;
}

/* 선지 상자가 label 이라 기본 굵기(760)를 물려받는다. 선지 문장은 읽는 글이지
   양식 이름표가 아니므로 본문 굵기로 되돌린다. */
.mvp-shell .assessment-choice-text {
  font-weight: 450;
}

.mvp-shell .assessment-choice:has(input:checked) .assessment-choice-key {
  color: var(--mvp-brand);
}

/* 문항마다 반복되는 보조 동작이라 선지보다 조용해야 한다. 위의 기본 버튼 규칙에서
   빼 두었으므로(셀렉터의 :not) 여기서 모양을 처음부터 정한다. */
.mvp-shell .assessment-clear {
  display: inline-flex;
  margin-top: 10px;
  padding: 4px 2px;
  background: none;
  border: 0;
  color: var(--mvp-subtle);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mvp-shell .assessment-clear:hover {
  color: var(--mvp-text);
}

.mvp-shell .assessment-submit {
  margin-top: 34px;
}

.mvp-shell .assessment-submit-panel {
  padding: 18px 22px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 15px;
}

.mvp-shell .assessment-submit-panel > summary {
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mvp-shell .assessment-submit-body {
  display: grid;
  margin-top: 16px;
  gap: 12px;
  justify-items: start;
}

.mvp-shell .assessment-submit-body p {
  margin: 0;
  font-size: 13.5px;
}

.mvp-shell .assessment-submit-warning {
  color: var(--mvp-danger);
  font-weight: 700;
}

.mvp-shell .assessment-submit-confirm {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
}

.mvp-shell .assessment-submit-confirm input {
  accent-color: var(--mvp-brand);
}

/* ── 채점 결과 ─────────────────────────────────────────────────────── */

.mvp-shell .assessment-score-card {
  display: flex;
  padding: 26px 28px;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 18px;
  box-shadow: var(--mvp-card-shadow);
}

.mvp-shell .assessment-score-figure {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.mvp-shell .assessment-score-figure > span:first-child {
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 700;
}

.mvp-shell .assessment-score-figure strong {
  font-size: 42px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.mvp-shell .assessment-score-total {
  color: var(--mvp-subtle);
  font-size: 17px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .assessment-score-facts {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  gap: 16px;
  text-align: right;
}

.mvp-shell .assessment-score-facts dt {
  color: var(--mvp-subtle);
  font-size: 11.5px;
  font-weight: 700;
}

.mvp-shell .assessment-score-facts dd {
  margin: 3px 0 0;
  font-size: 19px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .assessment-score-history {
  margin-top: 22px;
}

.mvp-shell .assessment-score-history h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.mvp-shell .assessment-score-history-list {
  display: grid;
  margin: 0 0 10px;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.mvp-shell .assessment-score-history-list li {
  display: flex;
  padding: 12px 16px;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--mvp-bg);
  border: 1px solid var(--mvp-line);
  border-radius: 11px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .assessment-score-history-list li .muted {
  margin-left: auto;
  font-size: 12.5px;
}

.mvp-shell .assessment-cohort {
  margin-top: 22px;
}

.mvp-shell .assessment-cohort h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.mvp-shell .assessment-cohort-figure {
  display: flex;
  margin: 0 0 6px;
  align-items: baseline;
  gap: 9px;
}

.mvp-shell .assessment-cohort-figure-label {
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 700;
}

.mvp-shell .assessment-cohort-figure strong {
  font-size: 28px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.mvp-shell .assessment-cohort p {
  font-size: 13px;
}

.mvp-shell .assessment-cohort-meta {
  font-variant-numeric: tabular-nums;
}

.mvp-shell .assessment-section-scores {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 14px;
  list-style: none;
}

.mvp-shell .assessment-section-score-head {
  display: flex;
  margin-bottom: 7px;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .assessment-weak {
  margin-top: 30px;
}

.mvp-shell .assessment-weak-list {
  display: grid;
  margin: 0 0 10px;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.mvp-shell .assessment-weak-list li {
  display: flex;
  padding: 13px 17px;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 11px;
  font-size: 14px;
}

.mvp-shell .assessment-weak-list span {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .assessment-items {
  margin-top: 30px;
}

.mvp-shell .assessment-item-table {
  font-variant-numeric: tabular-nums;
}

.mvp-shell .assessment-item-table tr.is-wrong th,
.mvp-shell .assessment-item-table tr.is-omitted th {
  color: var(--mvp-danger);
}

.mvp-shell .assessment-result-actions {
  margin-top: 30px;
}

.mvp-shell .assessment-honesty {
  margin-top: 34px;
}

@media (max-width: 1079px) {
  /* 응시 중에는 문항 격자가 곧 이동 수단이다. 감추지 않고 위로 눕힌다. */
  .mvp-shell .assessment-sit-shell {
    display: block;
  }

  .mvp-shell .assessment-grid-sidebar {
    display: block;
    margin-bottom: 22px;
  }

  .mvp-shell .assessment-grid-sidebar .question-sticky-panel {
    position: static;
  }

  .mvp-shell .assessment-number-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .mvp-shell .assessment-page,
  .mvp-shell .assessment-sit {
    width: calc(100% - 28px);
  }

  .mvp-shell .assessment-sit-bar {
    top: 56px;
    gap: 12px;
  }

  .mvp-shell .assessment-sit-meters {
    width: 100%;
    justify-content: space-between;
  }

  .mvp-shell .assessment-number-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .mvp-shell .assessment-score-facts {
    text-align: left;
  }
}

/* ── 백지복습 ──────────────────────────────────────────────────────── */

.mvp-shell .recall-page {
  width: min(880px, calc(100% - 40px));
  margin: 0 auto;
  padding: 38px 0 64px;
}

.mvp-shell .recall-back {
  margin: 0 0 18px;
  font-size: 13px;
}

.mvp-shell .recall-heading {
  margin-bottom: 26px;
}

.mvp-shell .recall-heading h1 {
  margin: 8px 0 10px;
}

.mvp-shell .recall-heading > p {
  max-width: 62ch;
  margin: 0;
  color: var(--mvp-muted);
  font-size: 14.5px;
}

/* 프롬프트 문장이 곧 제목이다. 표제보다 읽는 글에 가깝게 둔다. */
.mvp-shell .recall-prompt-text {
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.mvp-shell .recall-internal-notice {
  border-left-color: var(--mvp-warning);
}

.mvp-shell .recall-internal-notice p {
  margin: 6px 0 0;
  color: var(--mvp-muted);
  font-size: 13.5px;
}

.mvp-shell .recall-error {
  border-left-color: var(--mvp-danger);
}

.mvp-shell .recall-due {
  margin-bottom: 30px;
}

.mvp-shell .recall-due h2 {
  margin: 0 0 14px;
  font-size: 15px;
}

.mvp-shell .recall-card-grid {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
  gap: 10px;
  list-style: none;
}

.mvp-shell .recall-card {
  display: flex;
  padding: 21px 22px;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 16px;
  box-shadow: var(--mvp-card-shadow);
}

.mvp-shell .recall-subject {
  margin-top: 30px;
}

.mvp-shell .recall-subject > h2 {
  margin: 0 0 10px;
  font-size: 15px;
}

.mvp-shell .recall-card-copy {
  min-width: 0;
  flex: 1;
}

.mvp-shell .recall-card-copy h3 {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.55;
}

.mvp-shell .recall-card-topic {
  margin: 0;
  color: var(--mvp-brand);
  font-size: 11.5px;
  font-weight: 800;
}

.mvp-shell .recall-card.is-due {
  align-items: stretch;
  flex-direction: column;
  border-color: color-mix(in srgb, var(--mvp-warning) 45%, transparent);
}

.mvp-shell .recall-card.is-resolved {
  opacity: 0.82;
}

.mvp-shell .recall-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.mvp-shell .recall-card-head h3 {
  margin: 0;
  font-size: 15.5px;
  letter-spacing: -0.02em;
}

.mvp-shell .recall-card-prompt {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.mvp-shell .recall-card-meta {
  margin: 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .recall-card-foot {
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mvp-shell .recall-empty {
  font-size: 13px;
}

/* ── 작성(백지) ────────────────────────────────────────────────────── */

.mvp-shell .recall-answer-input {
  width: 100%;
  min-height: 320px;
  padding: 20px 22px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 15px;
  font: inherit;
  font-size: 15px;
  line-height: 1.8;
  resize: vertical;
}

.mvp-shell .recall-answer-input:focus {
  border-color: var(--mvp-brand);
  box-shadow: 0 0 0 3px var(--mvp-brand-soft);
  outline: none;
}

.mvp-shell .recall-draft-note {
  margin: 8px 0 0;
  font-size: 12.5px;
}

.mvp-shell .recall-write-meter {
  display: flex;
  margin-top: 10px;
  padding: 10px 2px;
  align-items: center;
  gap: 18px;
  color: var(--mvp-muted);
  border-bottom: 1px solid var(--mvp-line);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .recall-write-meter .muted {
  margin-left: auto;
}

.mvp-shell .recall-write-actions {
  display: flex;
  margin-top: 18px;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mvp-shell .recall-write-actions p {
  margin: 0;
  font-size: 13px;
}

/* ── 평가·복기 ─────────────────────────────────────────────────────── */

.mvp-shell .recall-answer {
  margin-bottom: 30px;
}

.mvp-shell .recall-answer-head {
  display: flex;
  margin-bottom: 12px;
  align-items: baseline;
  gap: 12px;
}

.mvp-shell .recall-answer-head h2 {
  margin: 0;
  font-size: 15px;
}

.mvp-shell .recall-answer-head .muted {
  font-size: 12.5px;
}

/* 원문 답안은 편집이 아니라 열람 대상임이 모양에서 드러나야 한다. */
.mvp-shell .recall-answer-body {
  padding: 20px 22px;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 15px;
  font-size: 14.5px;
  line-height: 1.8;
  white-space: normal;
}

.mvp-shell .recall-rubric h2 {
  margin: 0 0 10px;
  font-size: 15px;
}

.mvp-shell .recall-instruction {
  margin: 0 0 6px;
  font-size: 13.5px;
}

.mvp-shell .recall-ai-disclaimer {
  margin: 0 0 18px;
  font-size: 12.5px;
}

.mvp-shell .recall-point-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 14px;
  list-style: none;
}

.mvp-shell .recall-point {
  padding: 20px 22px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-left: 3px solid transparent;
  border-radius: 15px;
}

.mvp-shell .recall-point.is-recalled {
  border-left-color: var(--mvp-brand);
}

.mvp-shell .recall-point.is-missed {
  border-left-color: var(--mvp-danger);
}

.mvp-shell .recall-point-head {
  display: flex;
  align-items: start;
  gap: 13px;
}

.mvp-shell .recall-point-number {
  display: grid;
  width: 26px;
  height: 26px;
  flex: none;
  place-items: center;
  color: var(--mvp-text);
  background: var(--mvp-surface-strong);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.mvp-shell .recall-point-text {
  margin: 1px 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
}

.mvp-shell .recall-point-keywords {
  display: flex;
  margin: 0;
  gap: 6px;
  flex-wrap: wrap;
}

.mvp-shell .recall-assists {
  display: grid;
  margin: 14px 0 0;
  gap: 9px;
}

.mvp-shell .recall-assist {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.mvp-shell .recall-assist dt {
  flex: none;
  color: var(--mvp-subtle);
  font-size: 11.5px;
  font-weight: 700;
}

.mvp-shell .recall-assist dd {
  display: flex;
  margin: 0;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.mvp-shell .recall-assist-found {
  color: var(--mvp-brand);
  border-color: color-mix(in srgb, var(--mvp-brand) 45%, transparent);
}

.mvp-shell .recall-assist-missed {
  color: var(--mvp-danger);
  border-color: color-mix(in srgb, var(--mvp-danger) 40%, transparent);
}

.mvp-shell .recall-assist-incorrect,
.mvp-shell .recall-verdict-incorrect {
  color: var(--mvp-danger);
  background: color-mix(in srgb, var(--mvp-danger) 8%, var(--mvp-surface));
  border-color: color-mix(in srgb, var(--mvp-danger) 55%, transparent);
}

.mvp-shell .recall-ai-quote {
  display: grid;
  width: 100%;
  margin: 4px 0 0;
  padding: 10px 14px;
  gap: 2px;
  background: var(--mvp-surface-raised);
  border-left: 2px solid var(--mvp-line-strong);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.mvp-shell .recall-ai-quote .muted {
  font-size: 11.5px;
}

.mvp-shell .recall-self-eval {
  display: flex;
  margin: 16px 0 0;
  padding: 0;
  gap: 9px;
  border: 0;
}

.mvp-shell .recall-self-choice {
  display: inline-flex;
  padding: 9px 15px;
  align-items: center;
  gap: 8px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
}

.mvp-shell .recall-self-choice:focus-within {
  border-color: var(--mvp-brand);
  box-shadow: 0 0 0 3px var(--mvp-brand-soft);
}

.mvp-shell .recall-self-choice:has(input:checked) {
  color: var(--mvp-brand-strong);
  background: var(--mvp-brand-soft);
  border-color: var(--mvp-brand);
}

.mvp-shell .recall-self-choice.is-missed:has(input:checked) {
  color: var(--mvp-danger);
  background: color-mix(in srgb, var(--mvp-danger) 10%, transparent);
  border-color: var(--mvp-danger);
}

.mvp-shell .recall-self-choice.is-incorrect:has(input:checked) {
  color: var(--mvp-danger);
  background: color-mix(in srgb, var(--mvp-danger) 16%, transparent);
  border-color: var(--mvp-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mvp-danger) 14%, transparent);
}

.mvp-shell .recall-self-choice input[type="radio"] {
  margin: 0;
  accent-color: var(--mvp-brand);
}

.mvp-shell .recall-self-verdict {
  margin: 14px 0 0;
}

.mvp-shell .recall-confirm {
  display: grid;
  margin-top: 24px;
  padding: 18px 22px;
  gap: 12px;
  justify-items: start;
  background: var(--mvp-surface-raised);
  border: 1px solid var(--mvp-line);
  border-radius: 15px;
}

.mvp-shell .recall-confirm-warning {
  margin: 0;
  color: var(--mvp-danger);
  font-size: 13.5px;
  font-weight: 700;
}

.mvp-shell .recall-missed {
  margin-top: 30px;
}

.mvp-shell .recall-missed h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.mvp-shell .recall-missed-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.mvp-shell .recall-missed-list li {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-left: 3px solid var(--mvp-danger);
  border-radius: 11px;
  font-size: 14px;
}

.mvp-shell .recall-schedule {
  margin-top: 24px;
}

@media (max-width: 720px) {
  .mvp-shell .recall-page {
    width: calc(100% - 28px);
  }

  .mvp-shell .recall-self-eval {
    flex-direction: column;
    align-items: stretch;
  }

  .mvp-shell .recall-self-choice {
    justify-content: center;
  }
}

/* ── v2 셸: 학습 허브와 홈 ────────────────────────────────────────────────
   랜딩의 카드 언어(surface + line + 12px radius)를 그대로 쓰되, 허브는 카드가
   더 많고 낮으므로 높이를 줄인다. 열린 것과 준비 중인 것은 색이 아니라
   테두리 형태로도 구분한다 — 색만으로 구분하면 접근성 기준에 걸린다. */

.mvp-shell .hub-page {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 40px 0 72px;
}

.mvp-shell .hub-head {
  margin-bottom: 28px;
}

.mvp-shell .hub-head h1 {
  margin: 10px 0 8px;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.mvp-shell .hub-head p {
  max-width: 62ch;
  margin: 0;
  color: var(--mvp-muted);
  font-size: 15px;
  line-height: 1.65;
}

.mvp-shell .hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}

.mvp-shell .hub-card {
  display: flex;
  min-height: 148px;
  padding: 18px;
  flex-direction: column;
  color: var(--mvp-text);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
  text-decoration: none;
}

.mvp-shell .hub-card:hover {
  border-color: var(--mvp-brand);
}

.mvp-shell .hub-card.is-soon,
.mvp-shell .hub-panel.is-pending {
  background: transparent;
  border-style: dashed;
}

.mvp-shell .hub-card.is-soon:hover {
  border-color: var(--mvp-line-strong);
}

.mvp-shell .hub-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 800;
}

.mvp-shell .hub-card.is-soon .hub-icon {
  background: color-mix(in srgb, var(--mvp-surface-raised) 60%, transparent);
}

.mvp-shell .hub-card-title {
  display: flex;
  margin: 16px 0 5px;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
}

.mvp-shell .hub-card p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 13px;
  line-height: 1.55;
}

.mvp-shell .hub-badge {
  display: inline-flex;
  padding: 3px 8px;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.mvp-shell .hub-badge.is-live {
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
}

.mvp-shell .hub-badge.is-soon {
  color: var(--mvp-subtle);
  background: transparent;
  border: 1px solid var(--mvp-line-strong);
}

/* 홈 ─ 아직 채워지지 않은 블록이 대부분이다. 비어 있음을 숨기지 않고
   "여기에 무엇이 올 것인가"를 밝혀 둔다. */

.mvp-shell .hub-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  margin-bottom: 32px;
  gap: 14px;
}

.mvp-shell .hub-panel {
  padding: 18px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .hub-panel h2 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
}

.mvp-shell .hub-panel p {
  margin: 0;
  color: var(--mvp-subtle);
  font-size: 13px;
  line-height: 1.55;
}

.mvp-shell .hub-section-heading {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 800;
}

@media (max-width: 720px) {
  .mvp-shell .hub-page {
    width: calc(100% - 28px);
    padding: 26px 0 96px;
  }

  .mvp-shell .hub-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .mvp-shell .hub-card {
    min-height: 126px;
    padding: 15px;
  }

  .mvp-shell .hub-card-title {
    margin-top: 13px;
    font-size: 15px;
  }
}

/* ══ 랜딩 v2 (2026-08-06) ═══════════════════════════════════════════
   구성: 히어로 + 세무위키 미리보기 → 과목별 천장 표 → 학습 흐름
   → 지금 열려 있는 것 → 시험장 밖 → 만드는 방식 → FAQ → CTA
   기존 landing-* 토큰(버튼·배지·FAQ)은 그대로 쓰고 배치만 새로 짠다. */

.mvp-shell .v2-section {
  padding: 68px 0;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .v2-section-head {
  max-width: 62ch;
  margin-bottom: 28px;
}

.mvp-shell .v2-section-head h2 {
  margin: 9px 0 10px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.25;
  text-wrap: balance;
}

.mvp-shell .v2-section-head p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 15.5px;
  line-height: 1.7;
}

.mvp-shell .v2-note {
  margin: 18px 0 0;
  color: var(--mvp-subtle);
  font-size: 13px;
}

/* 도구 이름표. 열린 것과 준비 중인 것을 이름 옆에서 바로 가른다. */
.mvp-shell .v2-tool {
  display: inline-flex;
  margin: 12px 6px 0 0;
  padding: 3px 9px;
  color: var(--mvp-subtle);
  border: 1px solid var(--mvp-line-strong);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
}

.mvp-shell .v2-tool.is-open {
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  border-color: transparent;
}

/* ── 히어로 ───────────────────────────────────────────────────────── */

.mvp-shell .v2-hero {
  display: grid;
  padding: 30px 0 72px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: center;
  gap: 52px;
}

.mvp-shell .v2-hero-copy h1 {
  margin: 18px 0 18px;
  font-size: clamp(40px, 4.3vw, 54px);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 1.08;
}

.mvp-shell .v2-hero-copy > p {
  max-width: 46ch;
  margin: 0;
  color: var(--mvp-muted);
  font-size: 17px;
  line-height: 1.7;
}

/* ── 시험 D-day ────────────────────────────────────────────────────
   가장 자주 확인하는 숫자다. 히어로 안에서 눈에 띄되 제목을 이기지는 않는다. */

.mvp-shell .v2-dday {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
}

.mvp-shell .v2-dday-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
  background: var(--mvp-bg-soft);
}

.mvp-shell .v2-dday-item dt {
  color: var(--mvp-muted);
  font-size: 12px;
  font-weight: 600;
}

.mvp-shell .v2-dday-item dd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.mvp-shell .v2-dday-item dd b {
  color: var(--mvp-brand-strong);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.mvp-shell .v2-dday-item dd span {
  color: var(--mvp-muted);
  font-size: 12px;
}

/* 확정 여부는 색이 아니라 날짜 옆의 "(예상)" 글자가 말한다 — 색은 못 읽는 사람이
   있고, 숫자 자체는 확정이든 예상이든 이용자가 보러 오는 것이다. */

/* ── 세무위키 미리보기 ─────────────────────────────────────────────── */

.mvp-shell .v2-wiki-peek {
  margin: 0;
}

.mvp-shell .v2-wiki-peek figcaption {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  gap: 8px;
  color: var(--mvp-subtle);
  font-size: 12.5px;
  font-weight: 800;
}

.mvp-shell .v2-wiki-frame {
  display: grid;
  overflow: hidden;
  grid-template-columns: 104px minmax(0, 1fr);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line-strong);
  border-radius: 14px;
  box-shadow: var(--mvp-card-shadow);
}

.mvp-shell .v2-wiki-rail {
  display: grid;
  padding: 16px 10px;
  align-content: start;
  gap: 2px;
  background: var(--mvp-surface-raised);
  border-right: 1px solid var(--mvp-line);
}

.mvp-shell .v2-wiki-rail span {
  padding: 7px 9px;
  color: var(--mvp-subtle);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 720;
}

.mvp-shell .v2-wiki-rail .is-on {
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  font-weight: 850;
}

.mvp-shell .v2-wiki-doc {
  padding: 18px 20px 22px;
}

.mvp-shell .v2-wiki-crumb {
  margin: 0;
  color: var(--mvp-subtle);
  font-size: 11.5px;
  font-weight: 700;
}

.mvp-shell .v2-wiki-doc h3 {
  margin: 6px 0 14px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mvp-shell .v2-wiki-steps {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 7px;
  list-style: none;
}

.mvp-shell .v2-wiki-steps li {
  display: grid;
  padding: 9px 11px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  border: 1px solid var(--mvp-line);
  border-radius: 9px;
  font-size: 12.5px;
}

.mvp-shell .v2-wiki-steps b {
  color: var(--mvp-subtle);
  font-size: 11.5px;
  font-weight: 850;
}

.mvp-shell .v2-wiki-steps span {
  color: var(--mvp-muted);
  line-height: 1.5;
}

.mvp-shell .v2-wiki-steps .is-read {
  background: var(--mvp-surface-raised);
}

.mvp-shell .v2-wiki-steps .is-read b {
  color: var(--mvp-brand);
}

/* 천장. 여기서 끊긴다는 것을 점선으로 보인다. */
.mvp-shell .v2-wiki-steps .is-cap {
  border-style: dashed;
}

.mvp-shell .v2-wiki-steps .is-cap span {
  color: var(--mvp-subtle);
}

/* ── 과목별 천장 표 ───────────────────────────────────────────────── */

.mvp-shell .v2-matrix-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.mvp-shell .v2-matrix {
  min-width: 460px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.mvp-shell .v2-matrix caption {
  margin-bottom: 10px;
  color: var(--mvp-subtle);
  text-align: left;
  font-size: 12.5px;
}

.mvp-shell .v2-matrix th,
.mvp-shell .v2-matrix td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .v2-matrix thead th {
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.mvp-shell .v2-matrix thead th:first-child,
.mvp-shell .v2-matrix tbody th {
  min-width: 88px;
  text-align: left;
}

.mvp-shell .v2-matrix tbody th {
  color: var(--mvp-muted);
  font-weight: 720;
}

.mvp-shell .v2-matrix tr.is-core th {
  color: var(--mvp-text);
  font-weight: 850;
}

.mvp-shell .v2-matrix td {
  text-align: center;
}

/* 칸은 시각 신호이고, 안의 글자는 화면낭독기용이다. */
.mvp-shell .v2-matrix td i {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mvp-shell .v2-matrix td::after {
  display: inline-block;
  width: 18px;
  height: 6px;
  background: var(--mvp-line-strong);
  border-radius: 999px;
  opacity: 0.45;
  content: "";
}

.mvp-shell .v2-matrix td.is-filled::after {
  background: var(--mvp-brand);
  opacity: 1;
}

.mvp-shell .v2-matrix tr.is-core td.is-filled::after {
  height: 8px;
}

/* ── 학습 흐름 ────────────────────────────────────────────────────── */

.mvp-shell .v2-loop-grid {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  counter-reset: loop;
}

.mvp-shell .v2-loop-grid li {
  padding: 20px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
  counter-increment: loop;
}

.mvp-shell .v2-loop-grid li::before {
  display: grid;
  width: 25px;
  height: 25px;
  margin-bottom: 13px;
  place-items: center;
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  content: counter(loop);
}

.mvp-shell .v2-loop-grid b {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 800;
}

.mvp-shell .v2-loop-grid p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ── 지금 열려 있는 것 ────────────────────────────────────────────── */

.mvp-shell .v2-open-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px;
}

.mvp-shell .v2-open-card {
  display: block;
  padding: 22px 20px;
  color: var(--mvp-text);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
  text-decoration: none;
}

.mvp-shell .v2-open-card:hover,
.mvp-shell .v2-open-card:focus-visible {
  border-color: var(--mvp-brand);
}

.mvp-shell .v2-open-figure {
  display: block;
  color: var(--mvp-brand);
  font-size: 30px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.mvp-shell .v2-open-figure em {
  margin-left: 3px;
  color: var(--mvp-muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 720;
  letter-spacing: 0;
}

.mvp-shell .v2-open-card b {
  display: block;
  margin: 14px 0 5px;
  font-size: 15.5px;
  font-weight: 800;
}

.mvp-shell .v2-open-card p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 13px;
  line-height: 1.55;
}

.mvp-shell .v2-open-card .landing-warn-badge {
  margin: 8px 0 0;
}

/* ── 시험장 밖 · 만드는 방식 ──────────────────────────────────────── */

.mvp-shell .v2-after-grid,
.mvp-shell .v2-trust-grid {
  display: grid;
  gap: 14px;
}

.mvp-shell .v2-after-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mvp-shell .v2-trust-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mvp-shell .v2-after-grid article,
.mvp-shell .v2-trust-grid article {
  padding: 20px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
}

.mvp-shell .v2-after-grid b,
.mvp-shell .v2-trust-grid b {
  display: block;
  margin-bottom: 6px;
  font-size: 15.5px;
  font-weight: 800;
}

.mvp-shell .v2-after-grid p,
.mvp-shell .v2-trust-grid p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ── 좁은 화면 ────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .mvp-shell .v2-hero {
    padding: 16px 0 48px;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .mvp-shell .v2-loop-grid,
  .mvp-shell .v2-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mvp-shell .v2-after-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .mvp-shell .v2-section {
    padding: 44px 0;
  }

  .mvp-shell .v2-loop-grid,
  .mvp-shell .v2-trust-grid,
  .mvp-shell .v2-open-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  /* 좁을 때는 번호를 위가 아니라 옆에 둔다. 카드가 길쭉해지지 않는다. */
  .mvp-shell .v2-loop-grid li {
    display: grid;
    padding: 15px;
    grid-template-columns: 25px minmax(0, 1fr);
    column-gap: 12px;
  }

  .mvp-shell .v2-loop-grid li::before {
    margin-bottom: 0;
    grid-row: span 3;
  }

  .mvp-shell .v2-wiki-frame {
    grid-template-columns: minmax(0, 1fr);
  }

  .mvp-shell .v2-wiki-rail {
    display: flex;
    overflow-x: auto;
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--mvp-line);
  }

  .mvp-shell .v2-wiki-rail span {
    white-space: nowrap;
  }
}

/* ══ 세무위키 (v0.5) ═════════════════════════════════════════════════
   과목 목록 → 논점 문서 목록 → 문서 읽기. 레벨 구간은 문서 안에서 접힌다.
   과목마다 천장이 다르고, 천장 이후는 빈칸이 아니라 "여기까지"로 읽혀야 한다. */

.mvp-shell .wiki-page {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 40px 0 80px;
}

/* ── 과목 목록 ────────────────────────────────────────────────────── */

.mvp-shell .wiki-learning-map,
.mvp-shell .wiki-subject-path {
  display: grid;
  gap: 0;
}

.mvp-shell .wiki-path-intro {
  margin-bottom: 32px;
  padding: 18px 0 18px 20px;
  border-left: 3px solid var(--mvp-brand);
}

.mvp-shell .wiki-path-intro strong {
  color: var(--mvp-brand);
  font-size: 14px;
}

.mvp-shell .wiki-path-intro p,
.mvp-shell .wiki-path-stage header p {
  margin: 5px 0 0;
  color: var(--mvp-muted);
  font-size: 13px;
}

.mvp-shell .wiki-path-stage {
  position: relative;
  padding: 0 0 42px 54px;
}

.mvp-shell .wiki-path-stage:not(:last-child)::before {
  position: absolute;
  top: 36px;
  bottom: 0;
  left: 17px;
  width: 1px;
  background: var(--mvp-line-strong);
  content: "";
}

.mvp-shell .wiki-path-stage > header {
  display: flex;
  margin-bottom: 18px;
  align-items: flex-start;
  gap: 18px;
}

.mvp-shell .wiki-path-marker {
  position: absolute;
  left: 0;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--mvp-surface);
  background: var(--mvp-brand);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 850;
}

.mvp-shell .wiki-path-stage h2 {
  margin: 2px 0 0;
  font-size: 21px;
  letter-spacing: -0.035em;
}

.mvp-shell .wiki-path-tree {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 7px;
  list-style: none;
}

.mvp-shell .wiki-path-tree.is-nested {
  margin: 7px 0 3px 18px;
  padding-left: 18px;
  border-left: 1px solid var(--mvp-line-strong);
}

.mvp-shell .wiki-tree-link,
.mvp-shell .wiki-tree-group {
  display: flex;
  min-height: 46px;
  padding: 11px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--mvp-text);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 740;
  text-decoration: none;
}

.mvp-shell .wiki-tree-link:hover,
.mvp-shell .wiki-tree-link:focus-visible {
  border-color: var(--mvp-brand);
  box-shadow: 0 3px 12px rgb(29 92 75 / 8%);
}

.mvp-shell .wiki-tree-link small {
  flex: none;
  color: var(--mvp-brand);
  font-size: 11px;
  font-weight: 800;
}

.mvp-shell .wiki-tree-link.is-pending {
  color: var(--mvp-muted);
  background: transparent;
  border-style: dashed;
}

.mvp-shell .wiki-tree-link.is-pending small {
  color: var(--mvp-subtle);
}

.mvp-shell .wiki-tree-group {
  min-height: auto;
  padding: 8px 2px 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 850;
}

.mvp-shell .wiki-path-stage.is-subject {
  padding-bottom: 34px;
}

/* ── 코스 목차 ────────────────────────────────────────────────────── */
/* 단계 마커가 없는 화면이므로 학습지도의 54px 들여쓰기를 쓰지 않는다. */

.mvp-shell .wiki-course-outline {
  margin-top: 8px;
}

.mvp-shell .wiki-course-outline h2 {
  margin: 0 0 14px;
  color: var(--mvp-subtle);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* 순서대로 읽는 목록이므로 몇 번째인지 보인다. */
.mvp-shell .wiki-course-outline > .wiki-path-tree {
  counter-reset: wiki-course-step;
}

.mvp-shell .wiki-course-outline > .wiki-path-tree > .wiki-tree-node {
  counter-increment: wiki-course-step;
}

.mvp-shell .wiki-course-outline > .wiki-path-tree > .wiki-tree-node
  > .wiki-tree-link::before,
.mvp-shell .wiki-course-outline > .wiki-path-tree > .wiki-tree-node
  > .wiki-tree-group::before {
  margin-right: 10px;
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  content: counter(wiki-course-step);
}

.mvp-shell .wiki-course-outline > .wiki-path-tree > .wiki-tree-node
  > .wiki-tree-link > span:first-child {
  flex: 1;
}

/* ── 코스 고르기 (인덱스) ─────────────────────────────────────────── */
/* 인덱스는 고르는 화면이다. 논점 133개를 여기서 펼치면 아무도 읽지 못한다. */

.mvp-shell .wiki-course-board {
  display: grid;
  gap: 40px;
}

.mvp-shell .wiki-course-stage > header {
  display: flex;
  margin-bottom: 18px;
  align-items: flex-start;
  gap: 14px;
}

.mvp-shell .wiki-course-stage h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mvp-shell .wiki-course-stage > header p {
  margin: 4px 0 0;
  color: var(--mvp-subtle);
  font-size: 14px;
}

.mvp-shell .wiki-course-grid {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
  list-style: none;
}

.mvp-shell .wiki-course-card {
  display: flex;
  height: 100%;
  padding: 18px 20px;
  flex-direction: column;
  gap: 6px;
  color: var(--mvp-text);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
  text-decoration: none;
}

.mvp-shell .wiki-course-card:hover,
.mvp-shell .wiki-course-card:focus-visible {
  border-color: var(--mvp-brand);
}

.mvp-shell .wiki-course-card.is-empty {
  background: transparent;
  border-style: dashed;
  cursor: default;
}

.mvp-shell .wiki-course-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mvp-shell .wiki-course-meta {
  color: var(--mvp-subtle);
  font-size: 13px;
}

.mvp-shell .wiki-course-go {
  margin-top: auto;
  padding-top: 12px;
  color: var(--mvp-brand);
  font-size: 12px;
  font-weight: 700;
}

.mvp-shell .wiki-course-overview {
  margin-top: 10px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .mvp-shell .wiki-course-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* 좁은 화면에서는 카드 전체가 링크다. 안내 문구 한 줄을 더 두지 않는다. */
  .mvp-shell .wiki-course-card {
    padding: 14px 16px;
  }

  .mvp-shell .wiki-course-go {
    display: none;
  }
}

.mvp-shell .wiki-subject-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.mvp-shell .wiki-subject-card {
  display: flex;
  padding: 20px 22px;
  flex-direction: column;
  color: var(--mvp-text);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
  text-decoration: none;
}

.mvp-shell .wiki-subject-card:hover,
.mvp-shell .wiki-subject-card:focus-visible {
  border-color: var(--mvp-brand);
}

/* 아직 문서가 없는 과목. 링크가 아니라 상태 표시다. */
.mvp-shell .wiki-subject-card.is-empty {
  background: transparent;
  border-style: dashed;
  cursor: default;
}

.mvp-shell .wiki-subject-card.is-empty:hover {
  border-color: var(--mvp-line-strong);
}

.mvp-shell .wiki-subject-name {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
}

.mvp-shell .wiki-subject-card.is-core .wiki-subject-name {
  font-weight: 850;
}

/* 과목이 다루는 단계 구간. 채우지 않는 것이 기능이므로 끝을 분명히 보인다. */
.mvp-shell .wiki-range {
  display: flex;
  margin-top: auto;
  padding-top: 12px;
  align-items: center;
  gap: 3px;
}

.mvp-shell .wiki-range span {
  flex: 1;
  height: 5px;
  background: var(--mvp-line-strong);
  border-radius: 999px;
  opacity: 0.4;
}

.mvp-shell .wiki-range span.is-covered {
  background: var(--mvp-brand);
  opacity: 1;
}

.mvp-shell .wiki-range-label {
  margin-top: 8px;
  color: var(--mvp-subtle);
  font-size: 12px;
}

/* ── 논점 문서 목록 ───────────────────────────────────────────────── */

.mvp-shell .wiki-doc-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.mvp-shell .wiki-doc-list a,
.mvp-shell .wiki-doc-list .is-unpublished {
  display: flex;
  padding: 14px 16px;
  align-items: baseline;
  gap: 10px;
  color: var(--mvp-text);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 10px;
  text-decoration: none;
}

.mvp-shell .wiki-doc-list a:hover,
.mvp-shell .wiki-doc-list a:focus-visible {
  border-color: var(--mvp-brand);
}

.mvp-shell .wiki-doc-list .is-unpublished {
  color: var(--mvp-subtle);
  background: transparent;
  border-style: dashed;
}

.mvp-shell .wiki-doc-title {
  flex: 1;
  font-size: 15px;
  font-weight: 720;
}

.mvp-shell .wiki-doc-levels {
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 700;
}

/* ── 문서 읽기 ────────────────────────────────────────────────────── */

.mvp-shell .wiki-doc {
  width: min(760px, 100%);
}

.mvp-shell .wiki-doc-head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .wiki-doc-head h1 {
  margin: 8px 0 10px;
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.mvp-shell .wiki-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 700;
}

.mvp-shell .wiki-breadcrumb a {
  color: var(--mvp-muted);
  text-decoration: none;
}

.mvp-shell .wiki-breadcrumb a:hover,
.mvp-shell .wiki-breadcrumb a:focus-visible {
  color: var(--mvp-brand);
  text-decoration: underline;
}

.mvp-shell .wiki-kind-badge {
  display: inline-flex;
  margin-left: 10px;
  padding: 4px 9px;
  vertical-align: middle;
  color: var(--mvp-muted);
  background: var(--mvp-surface-raised);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.mvp-shell .wiki-adjacent {
  display: grid;
  margin-top: 34px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mvp-shell .wiki-adjacent a {
  display: flex;
  min-height: 76px;
  padding: 14px 16px;
  flex-direction: column;
  justify-content: center;
  color: var(--mvp-text);
  border: 1px solid var(--mvp-line);
  border-radius: 10px;
  text-decoration: none;
}

.mvp-shell .wiki-adjacent a:hover,
.mvp-shell .wiki-adjacent a:focus-visible {
  border-color: var(--mvp-brand);
}

.mvp-shell .wiki-adjacent .is-next {
  grid-column: 2;
  text-align: right;
}

.mvp-shell .wiki-adjacent small {
  margin-bottom: 5px;
  color: var(--mvp-subtle);
  font-size: 11px;
  font-weight: 700;
}

.mvp-shell .wiki-adjacent span {
  font-size: 14px;
  font-weight: 800;
}

/* 기준일과 근거 조문. 근거가 없으면 없다고 보여야 한다. */
.mvp-shell .wiki-basis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--mvp-muted);
  font-size: 13px;
}

.mvp-shell .wiki-basis code {
  padding: 2px 7px;
  background: var(--mvp-surface-raised);
  border-radius: 5px;
  font-size: 12px;
}

.mvp-shell .wiki-basis .is-missing {
  color: var(--mvp-warning);
}

/* 검수 완료한 문서에만 양성 배지. 미검수는 배지가 없을 뿐 문구를 도배하지 않는다. */
.mvp-shell .wiki-reviewed-badge {
  display: inline-flex;
  padding: 3px 9px;
  align-items: center;
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.mvp-shell .wiki-draft-badge {
  display: inline-flex;
  padding: 3px 9px;
  align-items: center;
  color: var(--mvp-warning);
  border: 1px solid var(--mvp-warning);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

/* ── 레벨 구간 ────────────────────────────────────────────────────── */

.mvp-shell .wiki-section {
  margin: 22px 0;
  border: 1px solid var(--mvp-line);
  border-left: 3px solid var(--mvp-brand);
  border-radius: 12px;
  overflow: hidden;
}

.mvp-shell .wiki-section > summary {
  display: flex;
  padding: 14px 18px;
  align-items: center;
  gap: 10px;
  background: var(--mvp-surface-raised);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.mvp-shell .wiki-section > summary::-webkit-details-marker {
  display: none;
}

.mvp-shell .wiki-section > summary::after {
  margin-left: auto;
  color: var(--mvp-subtle);
  font-size: 13px;
  font-weight: 700;
  content: "펼치기";
}

.mvp-shell .wiki-section[open] > summary::after {
  content: "접기";
}

.mvp-shell .wiki-level-tag {
  padding: 3px 9px;
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
}

.mvp-shell .wiki-section-body {
  padding: 4px 18px 20px;
  line-height: 1.75;
}

.mvp-shell .wiki-section-body h3 {
  margin: 24px 0 10px;
  font-size: 17px;
  font-weight: 800;
}

.mvp-shell .wiki-section-body p {
  margin: 12px 0;
}

.mvp-shell .wiki-section-body ul,
.mvp-shell .wiki-section-body ol {
  margin: 12px 0;
  padding-left: 24px;
}

.mvp-shell .wiki-section-body li {
  margin: 5px 0;
}

/* 천장. 빈칸이 아니라 "여기까지"로 읽혀야 한다 — 미완성으로 보이면 안 된다. */
.mvp-shell .wiki-ceiling {
  display: flex;
  margin: 22px 0 0;
  padding: 16px 18px;
  align-items: center;
  gap: 10px;
  color: var(--mvp-subtle);
  border: 1px dashed var(--mvp-line-strong);
  border-radius: 12px;
  font-size: 13px;
}

.mvp-shell .wiki-ceiling b {
  color: var(--mvp-muted);
  font-weight: 800;
}

.mvp-shell .wiki-recall-action {
  margin: 20px 0 28px;
}

.mvp-shell .wiki-recall-action .button {
  min-width: 190px;
  justify-content: center;
}

.mvp-shell .recall-wiki-link {
  margin: 20px 0 0;
  font-size: 13px;
}

/* 훈련층 기출 연결. 아직 비어 있고, 비어 있음을 감추지 않는다. */
.mvp-shell .wiki-drill-empty {
  margin: 12px 0 0;
  color: var(--mvp-subtle);
  font-size: 13px;
}

@media (max-width: 720px) {
  .mvp-shell .wiki-page {
    width: calc(100% - 28px);
    padding: 26px 0 96px;
  }

  .mvp-shell .wiki-subject-grid {
    grid-template-columns: 1fr;
  }

  .mvp-shell .wiki-path-stage {
    padding: 0 0 34px 42px;
  }

  .mvp-shell .wiki-path-stage:not(:last-child)::before {
    left: 14px;
  }

  .mvp-shell .wiki-path-marker {
    width: 30px;
    height: 30px;
  }

  .mvp-shell .wiki-path-tree.is-nested {
    margin-left: 8px;
    padding-left: 10px;
  }

  .mvp-shell .wiki-tree-link,
  .mvp-shell .wiki-tree-group {
    word-break: keep-all;
  }

  .mvp-shell .wiki-adjacent {
    grid-template-columns: 1fr;
  }

  .mvp-shell .wiki-adjacent .is-next {
    grid-column: 1;
  }

  .mvp-shell .wiki-section > summary,
  .mvp-shell .wiki-section-body {
    padding-left: 15px;
    padding-right: 15px;
  }

  .mvp-shell .recall-write-meter {
    align-items: flex-start;
    gap: 6px 14px;
    flex-wrap: wrap;
  }

  .mvp-shell .recall-write-meter .muted {
    width: 100%;
    margin-left: 0;
  }

  .mvp-shell .recall-card {
    align-items: stretch;
    flex-direction: column;
  }

  .mvp-shell .recall-card-foot {
    margin-left: 0;
  }
}

/* 페이지별 읽기 폭은 공통 셸의 기본 폭 뒤에서 명시적으로 확정한다. */

.mvp-shell .wiki-private-note {
  padding: 16px 18px;
  background: color-mix(in srgb, var(--mvp-brand) 4%, var(--mvp-surface));
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .wiki-private-note-head,
.mvp-shell .wiki-note-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mvp-shell .wiki-private-note h3 {
  margin: 0;
  font-size: 13px;
}

.mvp-shell .wiki-note-status,
.mvp-shell .wiki-note-error {
  color: var(--mvp-warning);
  font-size: 12px;
  font-weight: 700;
}

.mvp-shell .wiki-note-marks {
  display: flex;
  margin: 12px 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
}

.mvp-shell .wiki-note-marks label {
  padding: 7px 10px;
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.mvp-shell .wiki-private-note textarea {
  width: 100%;
  min-height: 88px;
  padding: 12px;
  resize: vertical;
  color: var(--mvp-text);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line-strong);
  border-radius: 10px;
  font: inherit;
  line-height: 1.6;
}

.mvp-shell .wiki-note-actions {
  margin-top: 10px;
  justify-content: flex-end;
}

.mvp-shell .wiki-note-delete {
  margin-top: 8px;
  padding: 0;
  color: var(--mvp-muted);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.mvp-shell .wiki-notes-main {
  max-width: 860px;
}

.mvp-shell .wiki-notes-heading h1 {
  margin: 8px 0 10px;
  font-size: clamp(28px, 4vw, 42px);
}

.mvp-shell .wiki-notes-list {
  display: grid;
  margin: 28px 0 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.mvp-shell .wiki-note-card a {
  display: block;
  padding: 18px 20px;
  color: var(--mvp-text);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line);
  border-radius: 12px;
  box-shadow: var(--mvp-card-shadow);
  text-decoration: none;
}

.mvp-shell .wiki-note-path {
  color: var(--mvp-brand);
  font-size: 11px;
  font-weight: 800;
}

.mvp-shell .wiki-note-card h2 {
  margin: 5px 0 8px;
  font-size: 17px;
}

.mvp-shell .wiki-note-card p {
  margin: 12px 0;
  white-space: pre-wrap;
}

.mvp-shell .wiki-note-card-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mvp-shell .wiki-note-card-marks b {
  padding: 3px 7px;
  color: var(--mvp-muted);
  background: var(--mvp-surface-2);
  border-radius: 999px;
  font-size: 11px;
}

.mvp-shell .wiki-note-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--mvp-muted);
  font-size: 11px;
}

.mvp-shell .wiki-note-card-foot strong {
  color: var(--mvp-warning);
}

.mvp-shell .wiki-notes-empty {
  margin-top: 28px;
}
.mvp-shell .site-main.mypage-main,
.mvp-shell .site-main.community-main {
  width: min(920px, calc(100% - 40px));
}

@media (max-width: 600px) {
  .mvp-shell .site-main.mypage-main,
  .mvp-shell .site-main.community-main {
    width: calc(100% - 28px);
  }

  .mvp-shell .brand-label {
    display: none !important;
  }

  .mvp-shell .header-inner {
    gap: 10px;
  }
}

/* 기출 자산 중심 랜딩 */
.mvp-shell .landing-question-preview { margin: 0; }
.mvp-shell .landing-question-preview figcaption { margin-bottom: 10px; color: var(--mvp-subtle); font-size: 12px; font-weight: 800; }
.mvp-shell .landing-question-sheet { position: relative; overflow: hidden; padding: 25px 26px 22px 32px; background: var(--mvp-surface); border: 1px solid var(--mvp-line-strong); border-radius: 14px; box-shadow: var(--mvp-card-shadow); }
.mvp-shell .landing-question-sheet::before { position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--mvp-brand); content: ""; }
.mvp-shell .landing-question-meta { display: flex; padding-bottom: 14px; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--mvp-subtle); border-bottom: 1px solid var(--mvp-line); font-size: 12px; }
.mvp-shell .landing-question-meta b { color: var(--mvp-text); font-size: 13px; }
.mvp-shell .landing-question-stem { display: grid; margin: 22px 0 18px; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 15px; font-weight: 750; line-height: 1.6; }
.mvp-shell .landing-question-stem span { color: var(--mvp-brand); }
.mvp-shell .landing-choice-list { display: grid; margin: 0; padding: 0; gap: 8px; list-style: none; }
.mvp-shell .landing-choice-list li { display: grid; padding: 12px 13px; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; background: var(--mvp-surface-raised); border: 1px solid var(--mvp-line); border-radius: 8px; }
.mvp-shell .landing-choice-list li > span, .mvp-shell .landing-question-sheet > a { color: var(--mvp-brand); font-weight: 800; }
.mvp-shell .landing-choice-list p { margin: 0; color: var(--mvp-muted); font-size: 12.5px; line-height: 1.55; }
.mvp-shell .landing-choice-list b { display: block; margin-bottom: 2px; color: var(--mvp-text); font-size: 12px; }
.mvp-shell .landing-question-sheet > a { display: inline-block; margin-top: 17px; font-size: 13px; text-decoration: none; }
.mvp-shell .landing-live-assets { padding: 62px 0 70px; border-top: 1px solid var(--mvp-line); }
.mvp-shell .landing-asset-list, .mvp-shell .landing-trust-list { border-top: 1px solid var(--mvp-line-strong); }
.mvp-shell .landing-asset-list > a { display: grid; padding: 21px 2px; grid-template-columns: 48px minmax(0, 1fr) 24px; align-items: center; gap: 16px; color: var(--mvp-text); border-bottom: 1px solid var(--mvp-line); text-decoration: none; }
.mvp-shell .landing-asset-list > a:hover, .mvp-shell .landing-asset-list > a:focus-visible { background: var(--mvp-bg-soft); }
.mvp-shell .landing-asset-number { color: var(--mvp-brand); font-size: 12px; font-weight: 850; }
.mvp-shell .landing-asset-list b, .mvp-shell .landing-asset-list small { display: block; }
.mvp-shell .landing-asset-list b { margin-bottom: 4px; font-size: 17px; letter-spacing: -0.025em; }
.mvp-shell .landing-asset-list small { color: var(--mvp-muted); font-size: 13px; line-height: 1.55; }
.mvp-shell .landing-asset-list i { color: var(--mvp-brand); font-style: normal; font-size: 18px; }
.mvp-shell .landing-trust-list article { display: grid; padding: 20px 2px; grid-template-columns: minmax(180px, .38fr) minmax(0, 1fr); gap: 28px; border-bottom: 1px solid var(--mvp-line); }
.mvp-shell .landing-trust-list b { font-size: 15px; }
.mvp-shell .landing-trust-list p { margin: 0; color: var(--mvp-muted); font-size: 13.5px; line-height: 1.65; }
@media (max-width: 620px) {
  .mvp-shell .v2-hero-copy,
  .mvp-shell .landing-question-preview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .mvp-shell .v2-hero-copy h1 {
    font-size: 34px;
    letter-spacing: -0.065em;
  }
  .mvp-shell .v2-hero-copy > p {
    max-width: 32ch;
  }
  .mvp-shell .landing-question-sheet { padding: 20px 18px 18px 23px; }
  .mvp-shell .v2-dday { display: grid; grid-template-columns: minmax(0, 1fr); }
  .mvp-shell .landing-question-meta { align-items: flex-start; flex-direction: column; gap: 3px; }
  .mvp-shell .landing-live-assets { padding: 44px 0; }
  .mvp-shell .landing-asset-list > a { grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 10px; }
  .mvp-shell .landing-trust-list article { grid-template-columns: minmax(0, 1fr); gap: 7px; }
}

/* ══ 스튜디오 시안: 근거를 따라가는 학습 화면 (2026-08-21) ═══════
   허들링의 넓은 호흡과 큰 문장을 빌리되, 세무 학습의 고유한 장치인
   문항 번호·판정·근거선을 화면의 시각 문법으로 삼는다. */

body.mvp-shell.studio-shell {
  --mvp-bg: #ffffff;
  --mvp-bg-soft: #f4f7fb;
  --mvp-surface: #ffffff;
  --mvp-surface-raised: #f4f7fb;
  --mvp-surface-strong: #e9eff7;
  --mvp-text: #142033;
  --mvp-muted: #526077;
  --mvp-subtle: #5c6a7d;
  --mvp-line: #dfe5ee;
  --mvp-line-strong: #cbd5e2;
  --mvp-brand: #16834f;
  --mvp-brand-strong: #0f6c40;
  --mvp-brand-soft: rgba(22, 131, 79, 0.1);
  --mvp-shadow: 0 34px 90px rgba(20, 32, 51, 0.13);
  --mvp-card-shadow: 0 18px 48px rgba(20, 32, 51, 0.09);
}

:root[data-theme="dark"] body.mvp-shell.studio-shell {
  --mvp-bg: #0b1220;
  --mvp-bg-soft: #111b2d;
  --mvp-surface: #121d30;
  --mvp-surface-raised: #17243a;
  --mvp-surface-strong: #1d2c45;
  --mvp-text: #f3f7fd;
  --mvp-muted: #a8b5c8;
  --mvp-subtle: #93a2ba;
  --mvp-line: rgba(183, 198, 220, 0.16);
  --mvp-line-strong: rgba(183, 198, 220, 0.28);
  --mvp-brand: #4ade80;
  --mvp-brand-strong: #86efac;
  --mvp-brand-soft: rgba(74, 222, 128, 0.13);
  background: var(--mvp-bg);
}

.studio-shell .site-header {
  background: color-mix(in srgb, var(--mvp-bg) 92%, transparent);
  backdrop-filter: blur(18px);
}

.studio-shell .brand-mark i {
  color: var(--mvp-brand);
}

.studio-shell .site-main.studio-landing,
.studio-shell .site-main.studio-wiki-index,
.studio-shell .site-main.studio-wiki-subject,
.studio-shell .site-main.studio-wiki-document {
  width: min(1160px, calc(100% - 48px));
}

.studio-shell .button {
  min-height: 48px;
  padding-inline: 22px;
  border-radius: 10px;
}

.studio-shell .studio-section-label,
.studio-shell .landing-path-label,
.studio-shell .wiki-path-intro > span {
  color: var(--mvp-brand);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 홈: 큰 문장 뒤에 실제 학습 화면이 따라오는 단일 축 */
.studio-shell .studio-landing .v2-hero {
  display: grid;
  padding: 58px 0 104px;
  grid-template-columns: minmax(0, 1fr);
  gap: 68px;
}

.studio-shell .studio-landing .v2-hero-copy {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 880px;
  margin: 0 auto;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.studio-shell .studio-landing .landing-outline-badge {
  padding: 7px 12px;
  color: var(--mvp-brand-strong);
  background: var(--mvp-brand-soft);
  border: 0;
  border-radius: 999px;
  letter-spacing: 0;
}

.studio-shell .studio-landing .v2-hero-copy h1 {
  width: 100%;
  min-width: 0;
  max-width: 820px;
  margin: 28px 0 22px;
  font-size: clamp(48px, 6.2vw, 74px);
  font-weight: 830;
  letter-spacing: -0.075em;
  line-height: 1.07;
}

.studio-shell .studio-landing .v2-hero-copy > p {
  width: 100%;
  min-width: 0;
  max-width: 620px;
  color: var(--mvp-muted);
  font-size: 18px;
  line-height: 1.8;
}

.studio-shell .studio-landing .hero-actions,
.studio-shell .studio-landing .v2-dday {
  justify-content: center;
}

.studio-shell .studio-landing .landing-hero-note {
  color: var(--mvp-subtle);
}

.studio-shell .studio-landing .v2-dday {
  margin-top: 28px;
}

.studio-shell .studio-landing .v2-dday-item {
  min-width: 164px;
  padding: 12px 16px;
  background: transparent;
  border-radius: 9px;
  text-align: left;
}

.studio-shell .studio-landing .landing-question-preview {
  width: min(900px, 100%);
  margin: 0 auto;
}

.studio-shell .studio-landing .landing-question-preview figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.04em;
}

.studio-shell .studio-landing .landing-question-preview figcaption span {
  color: var(--mvp-brand);
}

.studio-shell .studio-landing .landing-question-sheet {
  padding: 34px 40px 30px 48px;
  border-color: var(--mvp-line);
  border-radius: 22px;
  box-shadow: var(--mvp-shadow);
}

.studio-shell .studio-landing .landing-question-sheet::before {
  width: 6px;
  background: var(--mvp-brand);
}

.studio-shell .studio-landing .landing-question-stem {
  margin-block: 30px 22px;
  font-size: 18px;
}

.studio-shell .studio-landing .landing-choice-list {
  gap: 10px;
}

.studio-shell .studio-landing .landing-choice-list li {
  padding: 16px 18px;
  background: transparent;
  border-radius: 10px;
}

.studio-shell .studio-landing .landing-choice-list li.is-checked {
  background: var(--mvp-brand-soft);
  border-color: color-mix(in srgb, var(--mvp-brand) 28%, var(--mvp-line));
}

.studio-shell .studio-landing .landing-choice-list p {
  font-size: 14px;
}

/* 한 번만 강하게 쓰는 어두운 시작점 섹션 */
.studio-shell .landing-start-paths {
  display: grid;
  margin: 0 calc((1160px - 100vw) / 2);
  padding: 92px max(calc((100vw - 1160px) / 2), 40px);
  grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: 86px;
  color: #f7faff;
  background: #142033;
}

.studio-shell .landing-start-paths header > span {
  color: #86efac;
  font-size: 12px;
  font-weight: 800;
}

.studio-shell .landing-start-paths h2 {
  margin: 18px 0 0;
  color: inherit;
  font-size: clamp(34px, 4vw, 50px);
  letter-spacing: -0.06em;
  line-height: 1.2;
}

.studio-shell .landing-start-path-list {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.studio-shell .landing-start-path-list a {
  display: grid;
  min-height: 164px;
  padding: 28px 4px;
  grid-template-columns: 124px minmax(0, 1fr) 34px;
  align-items: start;
  gap: 24px;
  color: #f7faff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  text-decoration: none;
}

.studio-shell .landing-start-path-list a:hover,
.studio-shell .landing-start-path-list a:focus-visible {
  padding-inline: 12px;
  background: rgba(74, 222, 128, 0.1);
}

.studio-shell .landing-start-path-list .landing-path-label {
  color: #86efac;
  letter-spacing: 0;
}

.studio-shell .landing-start-path-list strong {
  font-size: clamp(19px, 2.2vw, 27px);
  letter-spacing: -0.035em;
  line-height: 1.45;
}

.studio-shell .landing-start-path-list i {
  color: #86efac;
  font-size: 24px;
  font-style: normal;
  text-align: right;
}

.studio-shell .studio-landing .landing-live-assets,
.studio-shell .studio-landing .v2-trust {
  padding-block: 104px;
}

.studio-shell .studio-landing .v2-section-head {
  max-width: 720px;
  margin-bottom: 44px;
}

.studio-shell .studio-landing .v2-section-head h2 {
  margin-top: 14px;
  font-size: clamp(34px, 4vw, 48px);
}

.studio-shell .studio-landing .landing-asset-list > a {
  min-height: 104px;
  padding: 25px 8px;
  grid-template-columns: 62px minmax(0, 1fr) 34px;
}

.studio-shell .studio-landing .landing-asset-list b {
  font-size: 20px;
}

.studio-shell .studio-landing .landing-trust-list article {
  min-height: 116px;
  padding: 28px 8px;
  grid-template-columns: minmax(220px, 0.46fr) minmax(0, 1fr);
}

.studio-shell .studio-landing .landing-trust-list b {
  font-size: 18px;
}

.studio-shell .studio-landing .landing-faq-section {
  margin-top: 0;
  background: var(--mvp-bg-soft);
}

/* 세무위키: 과목 카드가 아니라 교재의 차례처럼 읽힌다. */
.studio-shell .studio-wiki-index {
  padding-top: 70px;
}

.studio-shell .studio-wiki-index .wiki-path-intro {
  display: grid;
  margin-bottom: 72px;
  padding: 0;
  grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1fr);
  gap: 10px 72px;
  border: 0;
}

.studio-shell .studio-wiki-index .wiki-path-intro > span {
  grid-column: 1;
}

.studio-shell .studio-wiki-index .wiki-path-intro strong {
  grid-column: 1;
  color: var(--mvp-text);
  font-size: 28px;
  letter-spacing: -0.04em;
}

.studio-shell .studio-wiki-index .wiki-path-intro p {
  margin: 22px 0 0;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 15px;
}

.studio-shell .studio-wiki-index .wiki-path-stage {
  display: grid;
  padding: 46px 0 60px;
  grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1fr);
  gap: 72px;
  border-top: 1px solid var(--mvp-line-strong);
}

.studio-shell .studio-wiki-index .wiki-path-stage:not(:last-child)::before {
  display: none;
}

.studio-shell .studio-wiki-index .wiki-path-stage > header {
  position: sticky;
  top: 98px;
  margin: 0;
  align-self: start;
  gap: 18px;
}

.studio-shell .studio-wiki-index .wiki-path-marker {
  position: static;
  width: 30px;
  height: 30px;
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.studio-shell .studio-wiki-index .wiki-path-stage h2 {
  margin-top: 0;
  font-size: 24px;
}

.studio-shell .studio-wiki-index .wiki-path-stage header p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.65;
}

.studio-shell .studio-wiki-index .wiki-path-tree {
  gap: 0;
  border-top: 1px solid var(--mvp-line);
}

.studio-shell .studio-wiki-index .wiki-path-tree.is-nested {
  margin-top: 0;
  padding-left: 18px;
  border-top: 0;
  border-left-color: var(--mvp-brand);
}

.studio-shell .studio-wiki-index .wiki-tree-link {
  min-height: 58px;
  padding: 15px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--mvp-line);
  border-radius: 0;
  font-size: 15px;
}

.studio-shell .studio-wiki-index .wiki-tree-link:hover,
.studio-shell .studio-wiki-index .wiki-tree-link:focus-visible {
  padding-inline: 12px;
  background: var(--mvp-bg-soft);
  box-shadow: none;
}

.studio-shell .studio-wiki-index .wiki-tree-link.is-pending {
  opacity: 0.62;
  border-bottom-style: dashed;
}

.studio-shell .studio-wiki-index .wiki-tree-group {
  padding: 24px 2px 12px;
  font-size: 17px;
}

.studio-shell .studio-wiki-index > .v2-note {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--mvp-bg-soft);
  border-left: 3px solid var(--mvp-brand);
}

@media (max-width: 820px) {
  .studio-shell .site-main.studio-landing,
  .studio-shell .site-main.studio-wiki-index {
    width: min(100% - 32px, 680px);
  }

  .studio-shell .studio-landing .v2-hero {
    padding: 32px 0 72px;
    gap: 46px;
  }

  .studio-shell .studio-landing .v2-hero-copy h1 {
    font-size: clamp(42px, 10vw, 62px);
  }

  .studio-shell .landing-start-paths {
    margin-inline: calc((100% - 100vw) / 2);
    padding: 70px max(calc((100vw - 680px) / 2), 24px);
    grid-template-columns: minmax(0, 1fr);
    gap: 46px;
  }

  .studio-shell .studio-wiki-index .wiki-path-stage,
  .studio-shell .studio-wiki-index .wiki-path-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .studio-shell .studio-wiki-index .wiki-path-intro p {
    margin-top: 0;
    grid-column: 1;
    grid-row: auto;
  }

  .studio-shell .studio-wiki-index .wiki-path-stage > header {
    position: static;
  }
}

@media (max-width: 560px) {
  .studio-shell .site-main.studio-landing,
  .studio-shell .site-main.studio-wiki-index {
    width: calc(100% - 28px);
    padding-top: 34px;
  }

  .studio-shell .studio-landing .v2-hero-copy h1 {
    margin-block: 22px 18px;
    font-size: 36px;
    line-height: 1.12;
    text-wrap: pretty;
  }

  .studio-shell .studio-landing .v2-hero-copy > p {
    font-size: 15.5px;
  }

  .studio-shell .studio-landing .hero-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .studio-shell .studio-landing .hero-actions .button {
    justify-content: center;
  }

  .studio-shell .studio-landing .landing-question-sheet {
    padding: 24px 18px 22px 24px;
    border-radius: 16px;
  }

  .studio-shell .studio-landing .landing-question-preview figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .studio-shell .landing-start-paths {
    padding-block: 56px;
  }

  .studio-shell .landing-start-path-list a {
    min-height: 0;
    padding-block: 24px;
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 12px;
  }

  .studio-shell .landing-start-path-list .landing-path-label {
    grid-column: 1 / -1;
  }

  .studio-shell .landing-start-path-list strong {
    font-size: 20px;
  }

  .studio-shell .studio-landing .landing-live-assets,
  .studio-shell .studio-landing .v2-trust {
    padding-block: 72px;
  }

  .studio-shell .studio-landing .landing-trust-list article {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-shell .studio-wiki-index .wiki-path-stage {
    padding-block: 34px 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-shell .landing-start-path-list a,
  .studio-shell .studio-wiki-index .wiki-tree-link {
    transition: none;
  }
}

/* 세무위키 과목: 범위를 먼저 보고 차례를 따라간다. */
.studio-shell .studio-wiki-subject {
  padding-top: 70px;
}

.studio-shell .wiki-subject-studio-head {
  display: grid;
  margin-bottom: 92px;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.72fr);
  align-items: end;
  gap: 96px;
}

.studio-shell .wiki-subject-title-block h1 {
  margin: 16px 0 18px;
  font-size: clamp(52px, 6vw, 76px);
  font-weight: 830;
  letter-spacing: -0.075em;
  line-height: 1.06;
}

.studio-shell .wiki-subject-title-block > p {
  max-width: 460px;
  margin: 0;
  color: var(--mvp-muted);
  font-size: 16px;
  line-height: 1.75;
}

.studio-shell .wiki-subject-range-panel {
  padding: 28px 30px;
  background: var(--mvp-bg-soft);
  border-left: 4px solid var(--mvp-brand);
}

.studio-shell .wiki-subject-range-panel > span {
  color: var(--mvp-brand);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.studio-shell .wiki-subject-range-panel > strong {
  display: block;
  margin-top: 12px;
  font-size: 18px;
  letter-spacing: -0.025em;
}

.studio-shell .wiki-subject-range-panel .wiki-range {
  margin-top: 24px;
  padding-top: 0;
}

.studio-shell .wiki-subject-range-panel > p {
  margin: 12px 0 0;
  color: var(--mvp-muted);
  font-size: 12px;
}

.studio-shell .studio-wiki-subject .wiki-path-stage {
  display: grid;
  padding: 46px 0 60px;
  grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1fr);
  gap: 72px;
  border-top: 1px solid var(--mvp-line-strong);
}

.studio-shell .studio-wiki-subject .wiki-path-stage:not(:last-child)::before {
  display: none;
}

.studio-shell .studio-wiki-subject .wiki-path-stage > header {
  position: sticky;
  top: 98px;
  margin: 0;
  align-self: start;
  gap: 18px;
}

.studio-shell .studio-wiki-subject .wiki-path-marker {
  position: static;
  width: 30px;
  height: 30px;
  color: var(--mvp-brand);
  background: var(--mvp-brand-soft);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.studio-shell .studio-wiki-subject .wiki-path-stage h2 {
  margin-top: 0;
  font-size: 24px;
}

.studio-shell .studio-wiki-subject .wiki-path-stage header p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.65;
}

.studio-shell .studio-wiki-subject .wiki-path-tree {
  gap: 0;
  border-top: 1px solid var(--mvp-line);
}

.studio-shell .studio-wiki-subject .wiki-path-tree.is-nested {
  margin-top: 0;
  padding-left: 18px;
  border-top: 0;
  border-left-color: var(--mvp-brand);
}

.studio-shell .studio-wiki-subject .wiki-tree-link {
  min-height: 58px;
  padding: 15px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--mvp-line);
  border-radius: 0;
  font-size: 15px;
}

.studio-shell .studio-wiki-subject .wiki-tree-link:hover,
.studio-shell .studio-wiki-subject .wiki-tree-link:focus-visible {
  padding-inline: 12px;
  background: var(--mvp-bg-soft);
  box-shadow: none;
}

.studio-shell .studio-wiki-subject .wiki-tree-link.is-pending {
  opacity: 0.62;
  border-bottom-style: dashed;
}

.studio-shell .studio-wiki-subject .wiki-tree-group {
  padding: 24px 2px 12px;
  font-size: 17px;
}

/* 세무위키 문서: 검증 정보와 본문을 분리한 디지털 교재. */
.studio-shell .studio-wiki-document {
  padding-top: 54px;
}

.studio-shell .wiki-reading-layout {
  display: grid;
  grid-template-columns: 188px minmax(0, 800px);
  align-items: start;
  justify-content: center;
  gap: 72px;
}

.studio-shell .studio-wiki-document .wiki-doc {
  min-width: 0;
  width: 100%;
}

.studio-shell .studio-wiki-document .wiki-doc-head {
  padding: 8px 0 44px;
  border-bottom-color: var(--mvp-line-strong);
}

.studio-shell .studio-wiki-document .wiki-doc-head h1 {
  margin: 20px 0 24px;
  font-size: clamp(40px, 5vw, 58px);
  font-weight: 830;
  letter-spacing: -0.065em;
  line-height: 1.14;
}

.studio-shell .studio-wiki-document .wiki-breadcrumb {
  color: var(--mvp-subtle);
  font-size: 11px;
}

.studio-shell .studio-wiki-document .wiki-basis {
  gap: 8px 10px;
  font-size: 12px;
  line-height: 1.6;
}

.studio-shell .studio-wiki-document .wiki-basis code {
  padding: 4px 8px;
  color: var(--mvp-muted);
  background: var(--mvp-bg-soft);
  border-radius: 5px;
}

.studio-shell .studio-wiki-document .wiki-section {
  margin: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--mvp-line-strong);
  border-left: 0;
  border-radius: 0;
}

.studio-shell .studio-wiki-document .wiki-section > summary {
  min-height: 86px;
  padding: 24px 2px;
  background: transparent;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.studio-shell .studio-wiki-document .wiki-section > summary::after {
  font-size: 11px;
}

.studio-shell .studio-wiki-document .wiki-section[open] > summary {
  color: var(--mvp-brand-strong);
}

.studio-shell .studio-wiki-document .wiki-level-tag {
  flex: none;
  padding: 4px 8px;
  border-radius: 6px;
}

.studio-shell .studio-wiki-document .wiki-section-body {
  padding: 0 2px 42px 34px;
  color: var(--mvp-text);
  font-size: 16px;
  line-height: 1.9;
  border-left: 3px solid var(--mvp-brand);
}

.studio-shell .studio-wiki-document .wiki-section-body > :first-child {
  margin-top: 0;
}

.studio-shell .studio-wiki-document .wiki-section-body h3 {
  margin-top: 34px;
  font-size: 20px;
  letter-spacing: -0.025em;
}

.studio-shell .studio-wiki-document .wiki-ceiling {
  margin-top: 38px;
  padding: 20px 22px;
  background: var(--mvp-bg-soft);
  border: 0;
  border-left: 3px solid var(--mvp-brand);
  border-radius: 0;
}

.studio-shell .studio-wiki-document .wiki-drill-empty {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--mvp-line);
}

/* 이 논점으로 풀 기출. 읽다가 바로 문제로 건너뛰는 통로라 눈에 걸려야 한다. */
.studio-shell .studio-wiki-document .wiki-drill-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 8px;
}

.studio-shell .studio-wiki-document .wiki-drill-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.studio-shell .studio-wiki-document .wiki-drill-list a {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--mvp-line);
  border-radius: 10px;
  color: var(--mvp-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.studio-shell .studio-wiki-document .wiki-drill-list a:hover {
  border-color: var(--mvp-brand);
  color: var(--mvp-brand);
}

.studio-shell .studio-wiki-document .wiki-drill-aside {
  flex: 0 0 auto;
  color: var(--mvp-subtle);
  font-size: 12px;
}

.studio-shell .studio-wiki-document .wiki-adjacent {
  margin-top: 56px;
  gap: 0;
  border-top: 1px solid var(--mvp-line-strong);
  border-bottom: 1px solid var(--mvp-line-strong);
}

.studio-shell .studio-wiki-document .wiki-adjacent a {
  min-height: 112px;
  padding: 22px 4px;
  border: 0;
  border-radius: 0;
}

.studio-shell .studio-wiki-document .wiki-adjacent a + a {
  border-left: 1px solid var(--mvp-line);
}

@media (max-width: 900px) {
  .studio-shell .site-main.studio-wiki-subject,
  .studio-shell .site-main.studio-wiki-document {
    width: min(100% - 32px, 720px);
  }

  .studio-shell .wiki-subject-studio-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  .studio-shell .studio-wiki-subject .wiki-path-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .studio-shell .studio-wiki-subject .wiki-path-stage > header {
    position: static;
  }

  .studio-shell .wiki-reading-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
  }

}

@media (max-width: 560px) {
  .studio-shell .site-main.studio-wiki-subject,
  .studio-shell .site-main.studio-wiki-document {
    width: calc(100% - 28px);
    padding-top: 34px;
  }

  .studio-shell .wiki-subject-studio-head {
    margin-bottom: 64px;
  }

  .studio-shell .wiki-subject-title-block h1 {
    font-size: 48px;
  }

  .studio-shell .wiki-subject-range-panel {
    padding: 24px 20px;
  }

  .studio-shell .studio-wiki-subject .wiki-path-stage {
    padding-block: 34px 46px;
  }

  .studio-shell .studio-wiki-document .wiki-doc-head h1 {
    font-size: 38px;
  }

  .studio-shell .studio-wiki-document .wiki-section > summary {
    min-height: 76px;
    padding-block: 20px;
    align-items: flex-start;
    font-size: 17px;
  }

  .studio-shell .studio-wiki-document .wiki-section-body {
    padding: 0 0 34px 18px;
    font-size: 15px;
  }

  .studio-shell .studio-wiki-document .wiki-adjacent {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-shell .studio-wiki-document .wiki-adjacent .is-next {
    grid-column: 1;
  }

  .studio-shell .studio-wiki-document .wiki-adjacent a + a {
    border-top: 1px solid var(--mvp-line);
    border-left: 0;
  }
}

/* 세무위키 검색·완독: 단계형 학습선에 엇은 색인과 눈금만 더한다. */
.studio-shell .wiki-search-entry {
  max-width: 780px;
  margin: -34px 0 72px;
}

.studio-shell .wiki-search-entry > label {
  display: block;
  margin-bottom: 10px;
  color: var(--mvp-brand);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.studio-shell .wiki-search-entry > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 2px solid var(--mvp-text);
}

.studio-shell .wiki-search-entry input {
  min-width: 0;
  min-height: 52px;
  padding: 8px 4px;
  color: var(--mvp-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.studio-shell .wiki-search-entry input:focus {
  outline: 0;
}

.studio-shell .wiki-search-entry > div:focus-within {
  border-bottom-color: var(--mvp-brand);
  box-shadow: 0 3px 0 var(--mvp-brand-soft);
}

.studio-shell .wiki-search-entry button {
  min-width: 64px;
  min-height: 52px;
  padding: 0 4px 0 18px;
  color: var(--mvp-brand-strong);
  background: transparent;
  border: 0;
  font-weight: 820;
  cursor: pointer;
}

.studio-shell .wiki-search-entry button:focus-visible,
.studio-shell .wiki-completion-form button:focus-visible,
.studio-shell .wiki-completion-check > a:focus-visible {
  outline: 3px solid var(--mvp-brand-soft);
  outline-offset: 3px;
}

.studio-shell .wiki-completion-form {
  margin-left: auto;
}

.studio-shell .wiki-completion-form button,
.studio-shell .wiki-completion-check > a {
  min-height: 44px;
  padding: 0 17px;
  color: var(--mvp-brand-strong);
  background: var(--mvp-brand-soft);
  border: 1px solid color-mix(in srgb, var(--mvp-brand) 50%, var(--mvp-line));
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.studio-shell .wiki-completion-check {
  display: grid;
  margin: 30px 0 38px;
  padding: 24px 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  border-top: 2px solid var(--mvp-text);
  border-bottom: 1px solid var(--mvp-line-strong);
}

.studio-shell .wiki-completion-check span {
  color: var(--mvp-brand);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.studio-shell .wiki-completion-check h2 {
  margin: 6px 0 5px;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.studio-shell .wiki-completion-check p {
  margin: 0;
  color: var(--mvp-muted);
  font-size: 12px;
}

.studio-shell .wiki-completion-check > a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.studio-shell .studio-wiki-search {
  width: min(100% - 48px, 980px);
  padding-top: 62px;
}

.studio-shell .wiki-search-head {
  padding-bottom: 50px;
  border-bottom: 2px solid var(--mvp-text);
}

.studio-shell .wiki-search-head .wiki-breadcrumb {
  margin-bottom: 42px;
  color: var(--mvp-subtle);
  font-size: 12px;
}

.studio-shell .wiki-search-head .wiki-breadcrumb span {
  margin-left: 8px;
}

.studio-shell .wiki-search-head h1 {
  max-width: 700px;
  margin: 14px 0 56px;
  font-size: clamp(44px, 6vw, 70px);
  font-weight: 830;
  letter-spacing: -0.07em;
  line-height: 1.08;
  text-wrap: balance;
}

.studio-shell .wiki-search-head .wiki-search-entry {
  margin: 0;
}

.studio-shell .wiki-search-results {
  max-width: 780px;
  margin: 0 0 100px auto;
  padding-top: 38px;
}

.studio-shell .wiki-search-results > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--mvp-line-strong);
}

.studio-shell .wiki-search-results h2 {
  margin: 0 0 18px;
  font-size: 22px;
  letter-spacing: -0.035em;
}

.studio-shell .wiki-search-results > p {
  color: var(--mvp-muted);
}

.studio-shell .wiki-search-results > header span {
  color: var(--mvp-subtle);
  font-size: 11px;
}

.studio-shell .wiki-search-results ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-shell .wiki-search-results li {
  border-bottom: 1px solid var(--mvp-line-strong);
}

.studio-shell .wiki-search-results a {
  position: relative;
  display: block;
  min-height: 118px;
  padding: 24px 56px 24px 2px;
  color: var(--mvp-text);
  text-decoration: none;
}

.studio-shell .wiki-search-results a > span {
  color: var(--mvp-brand);
  font-size: 10px;
  font-weight: 820;
}

.studio-shell .wiki-search-results a > strong {
  display: block;
  margin-top: 7px;
  font-size: 20px;
  letter-spacing: -0.025em;
}

.studio-shell .wiki-search-results a > p {
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--mvp-muted);
  font-size: 12px;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-shell .wiki-search-results a > b {
  position: absolute;
  top: 50%;
  right: 8px;
  color: var(--mvp-brand);
  transform: translateY(-50%);
  transition: transform 160ms ease;
}

.studio-shell .wiki-search-results a:hover > b,
.studio-shell .wiki-search-results a:focus-visible > b {
  transform: translate(5px, -50%);
}

.studio-shell .wiki-search-results a:focus-visible {
  outline: 3px solid var(--mvp-brand-soft);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .studio-shell .wiki-search-entry {
    margin-top: -22px;
    margin-bottom: 56px;
  }

  .studio-shell .wiki-completion-form {
    width: 100%;
    margin-left: 0;
  }

  .studio-shell .wiki-completion-form button {
    width: 100%;
  }

  .studio-shell .wiki-completion-check {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-shell .wiki-completion-check > a {
    justify-content: center;
  }

  .studio-shell .studio-wiki-search {
    width: calc(100% - 28px);
    padding-top: 34px;
  }

  .studio-shell .wiki-search-head h1 {
    margin-bottom: 44px;
    font-size: 44px;
  }

  .studio-shell .wiki-search-results {
    margin-left: 0;
  }

  .studio-shell .wiki-search-results a > p {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-shell .wiki-search-results a > b {
    transition: none;
  }
}

/* ══ 교재 화면 (2026-09-12) ═══════════════════════════════════════════
   세무위키를 책처럼 읽는다: 차례 → 장. 메뉴는 한 줄이고 장식은 번호와 괘선뿐이다.
   번호는 읽는 순서 그 자체라서 붙는다 — 순서가 없는 목록에는 붙이지 않는다. */

.studio-shell .site-main.textbook-page {
  width: min(760px, calc(100% - 48px));
  padding-top: 56px;
}

.studio-shell .site-main.studio-wiki-document.textbook-page {
  width: min(1120px, calc(100% - 48px));
}

.studio-shell .textbook-page .wiki-breadcrumb {
  margin-bottom: 18px;
}

.textbook-head {
  margin-bottom: 44px;
}

.textbook-head h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 4.6vw, 44px);
  font-weight: 830;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.textbook-head > p {
  max-width: 36em;
  margin: 0;
  color: var(--mvp-muted);
  font-size: 17px;
  line-height: 1.75;
}

.textbook-segment {
  margin-left: 10px;
  color: var(--mvp-muted);
  font-size: 0.55em;
  font-weight: 720;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.studio-shell .textbook-head .wiki-search-entry {
  max-width: 560px;
  margin: 30px 0 0;
}

.textbook-meta {
  display: flex;
  margin: 14px 0 0;
  flex-wrap: wrap;
  gap: 6px 26px;
}

.textbook-meta > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.textbook-meta dt {
  color: var(--mvp-subtle);
  font-size: 13px;
  font-weight: 700;
}

.textbook-meta dd {
  margin: 0;
  color: var(--mvp-text);
  font-size: 14px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.textbook-start,
.textbook-resume {
  display: flex;
  margin: 26px 0 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.textbook-start span,
.textbook-resume span {
  color: var(--mvp-muted);
  font-size: 14px;
}

.textbook-resume {
  margin-top: 30px;
}

/* 권 나누기: 재무회계 한 과목이 네 권이다. */
.textbook-segments {
  display: flex;
  margin: 0 0 30px;
  flex-wrap: wrap;
  gap: 6px;
}

.textbook-segments a {
  padding: 8px 14px;
  color: var(--mvp-muted);
  border: 1px solid var(--mvp-line-strong);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 750;
  text-decoration: none;
}

.textbook-segments a:hover {
  color: var(--mvp-text);
}

.textbook-segments a[aria-current="page"] {
  color: var(--mvp-surface);
  background: var(--mvp-text);
  border-color: var(--mvp-text);
}

/* 차례 */
.textbook-contents-head {
  display: flex;
  padding-bottom: 14px;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--mvp-text);
}

.textbook-contents-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 820;
  letter-spacing: -0.01em;
}

.textbook-contents-head span {
  color: var(--mvp-subtle);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.textbook-part {
  margin-top: 36px;
}

.textbook-part h3 {
  display: flex;
  margin: 0 0 6px;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  font-weight: 800;
}

.textbook-part h3 small {
  color: var(--mvp-brand);
  font-size: 12px;
  font-weight: 850;
}

.textbook-toc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.textbook-toc li {
  border-bottom: 1px solid var(--mvp-line);
}

.textbook-toc a {
  display: grid;
  padding: 15px 4px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  color: var(--mvp-text);
  text-decoration: none;
}

.textbook-toc a:hover span,
.textbook-toc a:focus-visible span {
  color: var(--mvp-brand-strong);
}

.textbook-toc b {
  color: var(--mvp-subtle);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.textbook-toc span {
  font-size: 16.5px;
  font-weight: 720;
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.textbook-toc span em {
  margin-left: 8px;
  color: var(--mvp-warning);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.textbook-toc small {
  color: var(--mvp-subtle);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.textbook-toc li.is-done b {
  color: var(--mvp-brand);
}

.textbook-toc li.is-done b::after {
  content: " ✓";
}

.textbook-toc li.is-stale small::before {
  color: var(--mvp-warning);
  content: "다시 확인 · ";
}

.textbook-note {
  margin: 40px 0 0;
  color: var(--mvp-subtle);
  font-size: 13px;
}

.textbook-empty {
  padding: 40px 0;
  border-top: 1px solid var(--mvp-line);
}

.textbook-empty strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
}

/* 문서 읽기: 왼쪽 차례 + 본문 한 단 */
.studio-shell .wiki-reading-layout.textbook-reading {
  grid-template-columns: 220px minmax(0, 720px);
  justify-content: center;
  gap: 64px;
}

.textbook-rail {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 110px);
  padding-right: 8px;
  overflow: auto;
}

.textbook-rail-head {
  display: block;
  padding: 0 0 12px 12px;
  color: var(--mvp-text);
  border-bottom: 2px solid var(--mvp-text);
  font-size: 14px;
  font-weight: 820;
  text-decoration: none;
}

.textbook-rail-toc {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.textbook-rail-toc a {
  display: grid;
  padding: 8px 12px;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  color: var(--mvp-muted);
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.45;
  text-decoration: none;
}

.textbook-rail-toc b {
  color: var(--mvp-subtle);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.textbook-rail-toc a:hover {
  color: var(--mvp-text);
}

.textbook-rail-toc li.is-current a {
  color: var(--mvp-text);
  background: var(--mvp-brand-soft);
  border-left-color: var(--mvp-brand);
  font-weight: 800;
}

.textbook-rail-toc li.is-done b {
  color: var(--mvp-brand);
}

.textbook-toc-jump {
  display: none;
}

.textbook-section {
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--mvp-line);
}

.textbook-section > h2 {
  display: flex;
  margin: 0 0 6px;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 820;
  letter-spacing: -0.025em;
}

.studio-shell .textbook-section .wiki-section-body {
  min-width: 0;
  padding: 0;
  overflow-wrap: break-word;
  font-size: 16.5px;
  line-height: 1.8;
}

.studio-shell .textbook-section .wiki-section-body > :first-child {
  margin-top: 10px;
}

/* 본문에 끊을 자리가 없는 긴 줄이 있으면 문서 전체가 가로로 밀려 모바일에서 오른쪽이
   잘린다. 코드 블록은 낱말을 임의로 접지 않고 상자 안에서만 스크롤되게 한다. */
.studio-shell .textbook-section .wiki-section-body pre {
  max-width: 100%;
  overflow-x: auto;
}

/* 필기는 본문 아래 접힌 채로 둔다 — 읽는 흐름을 끊지 않는다. */
.textbook-section .wiki-private-note {
  margin: 18px 0 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--mvp-line);
  border-radius: 10px;
}

.textbook-section .wiki-private-note > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 800;
  list-style: none;
}

.textbook-section .wiki-private-note > summary::-webkit-details-marker {
  display: none;
}

.textbook-section .wiki-private-note[open] > summary {
  border-bottom: 1px solid var(--mvp-line);
}

.textbook-section .wiki-note-saved {
  margin-left: 8px;
  color: var(--mvp-brand);
  font-size: 12px;
}

.textbook-section .wiki-private-note > :not(summary) {
  margin-right: 14px;
  margin-left: 14px;
}

.textbook-section .wiki-private-note > form:last-child {
  margin-bottom: 14px;
}

@media (max-width: 900px) {
  .studio-shell .wiki-reading-layout.textbook-reading {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .textbook-rail {
    position: static;
    max-height: none;
    margin-top: 8px;
    padding-top: 28px;
    order: 2;
    border-top: 1px solid var(--mvp-line);
  }

  .textbook-toc-jump {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--mvp-brand-strong);
    font-size: 13px;
    font-weight: 780;
    text-decoration: none;
  }
}

@media (max-width: 820px) {
  .mvp-shell .mobile-primary-nav a[data-nav-key="wiki"]::before {
    content: "▤";
  }
}

@media (max-width: 560px) {
  .studio-shell .site-main.textbook-page,
  .studio-shell .site-main.studio-wiki-document.textbook-page {
    width: calc(100% - 28px);
    padding-top: 34px;
  }

  .textbook-toc a {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 4px 10px;
  }

  .textbook-toc small {
    grid-column: 2;
    white-space: normal;
  }

  .textbook-segment {
    display: block;
    margin: 6px 0 0;
  }
}
/* 학습만화: 작은 카드 격자 대신 제목과 설명을 읽는 세로형 자료 목록. */
.mvp-shell .comics-intro,
.mvp-shell .comic-reader {
  width: min(100%, 960px);
  margin-inline: auto;
}

.mvp-shell .comics-intro {
  padding: clamp(44px, 7vw, 84px) 0 28px;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .comics-intro h1,
.mvp-shell .comic-reader h1 {
  margin: 8px 0 14px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -.045em;
}

.mvp-shell .comics-filter {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.4fr) auto;
  gap: 12px;
  width: min(100%, 960px);
  margin: 28px auto 8px;
  align-items: end;
}

.mvp-shell .comics-filter label {
  display: grid;
  gap: 7px;
  color: var(--mvp-muted);
  font-size: .82rem;
  font-weight: 700;
}

.mvp-shell .comics-filter input,
.mvp-shell .comics-filter select,
.mvp-shell .comics-filter button {
  min-height: 46px;
  border: 1px solid var(--mvp-line);
  border-radius: 3px;
  background: var(--mvp-surface);
  color: var(--mvp-ink);
  padding: 0 14px;
}

.mvp-shell .comics-filter button {
  border-color: var(--mvp-text);
  background: var(--mvp-text);
  color: var(--mvp-surface);
  font-weight: 800;
  cursor: pointer;
}

.mvp-shell .comics-result-count,
.mvp-shell .comics-notice,
.mvp-shell .comics-pagination {
  width: min(100%, 960px);
  margin-inline: auto;
}

.mvp-shell .comics-result-count {
  margin-top: 26px;
  color: var(--mvp-muted);
  font-size: .86rem;
  font-weight: 700;
}

.mvp-shell .comics-list {
  width: min(100%, 960px);
  margin: 0 auto;
  border-top: 1px solid var(--mvp-line);
}

.mvp-shell .comic-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 18px 4px;
  border-bottom: 1px solid var(--mvp-line);
  color: inherit;
  text-decoration: none;
}

.mvp-shell .comic-row img {
  width: 104px;
  height: 156px;
  border-radius: 2px;
  object-fit: cover;
  background: var(--mvp-bg-soft);
}

.mvp-shell .comic-row span { display: grid; gap: 8px; min-width: 0; }
.mvp-shell .comic-row small { color: var(--mvp-brand); font-weight: 800; }
.mvp-shell .comic-row strong { font-size: 1.25rem; letter-spacing: -.025em; }
.mvp-shell .comic-row em { color: var(--mvp-muted); font-style: normal; line-height: 1.65; }
.mvp-shell .comic-row:hover strong { text-decoration: underline; text-underline-offset: 5px; }

.mvp-shell .comics-pagination,
.mvp-shell .comic-reader-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 28px 0;
}

.mvp-shell .comics-notice {
  padding: 20px 0 56px;
  color: var(--mvp-muted);
  border-top: 1px solid var(--mvp-line);
  font-size: .86rem;
}

.mvp-shell .comic-reader { padding: clamp(38px, 6vw, 72px) 0; }
.mvp-shell .comic-reader > header { max-width: 760px; margin: 0 auto 30px; }
.mvp-shell .comic-reader figure { margin: 0 auto; width: min(100%, 760px); }
.mvp-shell .comic-reader figure img { display: block; width: 100%; height: auto; background: var(--mvp-bg-soft); box-shadow: 0 14px 50px rgba(17, 24, 39, .1); }
.mvp-shell .comic-reader figcaption { margin-top: 10px; color: var(--mvp-muted); font-size: .78rem; text-align: center; }
.mvp-shell .comic-summary { width: min(100%, 760px); margin: 34px auto 0; border-top: 2px solid var(--mvp-text); }
.mvp-shell .comic-summary section { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--mvp-line); }
.mvp-shell .comic-summary h2 { margin: 0; font-size: .9rem; }
.mvp-shell .comic-summary p { margin: 0; line-height: 1.75; }
.mvp-shell .comic-reader-nav { width: min(100%, 760px); margin: 18px auto 0; }

@media (max-width: 700px) {
  .mvp-shell .comics-filter { grid-template-columns: 1fr; }
  .mvp-shell .comic-row { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
  .mvp-shell .comic-row img { width: 84px; height: 126px; }
  .mvp-shell .comic-row em { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .mvp-shell .comic-summary section { grid-template-columns: 1fr; gap: 8px; }
}

/* 편집형 교재: 데스크톱은 독립 스크롤 목차와 한 면 너비의 본문을 유지한다. */
.mvp-shell .textbook-library {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) 0 clamp(44px, 7vw, 84px);
}

/* 서가에 온 사람은 책을 고르러 왔다. 표가 첫 화면 안에 들어오도록 머리말을
   짧게 둔다 — 제목이 화면을 다 먹으면 정작 고를 것이 아래로 밀린다. */
.mvp-shell .textbook-library > header {
  max-width: 640px;
  margin-bottom: 30px;
}

.mvp-shell .textbook-library h1 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -.04em;
}

.mvp-shell .textbook-library > header p { margin: 0 0 12px; color: var(--mvp-muted); }

.mvp-shell .textbook-shelf { counter-reset: textbook-row; border-top: 2px solid var(--mvp-text); }
.mvp-shell .textbook-shelf article {
  display: grid;
  grid-template-columns: 42px minmax(150px, .68fr) minmax(280px, 1.5fr) 150px auto;
  gap: 20px;
  align-items: center;
  padding: 29px 4px;
  border-bottom: 1px solid var(--mvp-line);
}
.mvp-shell .textbook-shelf article > * { margin: 0; }
.mvp-shell .textbook-shelf article > b { color: var(--mvp-subtle); font-size: .78rem; font-variant-numeric: tabular-nums; }
.mvp-shell .textbook-shelf article > h2 { font-size: 1.18rem; letter-spacing: -.025em; }
.mvp-shell .textbook-shelf article > p { color: var(--mvp-muted); line-height: 1.65; word-break: keep-all; text-wrap: pretty; }
.mvp-shell .textbook-shelf article > small { color: var(--mvp-muted); }
.mvp-shell .textbook-shelf article > a { color: var(--mvp-text); font-weight: 800; text-underline-offset: 5px; white-space: nowrap; }

.mvp-shell .textbook-main { max-width: none; padding: 0; background: var(--mvp-bg-soft); }
.mvp-shell .textbook-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: calc(100vh - 72px);
}
.mvp-shell .textbook-toc {
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 34px 24px 60px;
  border-right: 1px solid var(--mvp-line);
  background: var(--mvp-bg-soft);
}
.mvp-shell .textbook-toc > div { padding: 0 10px 24px; }
.mvp-shell .toc-close { display: none; }
.mvp-shell .textbook-toc > div h2 { margin: 0 0 10px; font-size: 1.15rem; }
/* 서가로 돌아가는 링크. 차례 항목과 헷갈리지 않게 작고 조용히 둔다. */
.mvp-shell .textbook-toc > div a {
  color: var(--mvp-muted);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.mvp-shell .textbook-toc > div a:hover { color: var(--mvp-text); text-decoration: underline; }
.mvp-shell .textbook-toc ol { list-style: none; margin: 0; padding: 0; }
.mvp-shell .textbook-toc li { border-top: 1px solid var(--mvp-line); }
.mvp-shell .textbook-toc li a { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 14px 10px; color: var(--mvp-muted); text-decoration: none; line-height: 1.45; }
.mvp-shell .textbook-toc li.current { border-left: 3px solid var(--mvp-brand); background: var(--mvp-surface); }
.mvp-shell .textbook-toc li.current a { color: var(--mvp-text); font-weight: 800; }
.mvp-shell .textbook-toc li span { color: var(--mvp-subtle); font-variant-numeric: tabular-nums; }
.mvp-shell .textbook-toc li.current > .toc-sections {
  margin: -2px 10px 12px 52px;
  border-left: 1px solid var(--mvp-line-strong);
}
.mvp-shell .textbook-toc li.current > .toc-sections li { border: 0; }
.mvp-shell .textbook-toc li.current > .toc-sections a {
  display: block;
  padding: 7px 0 7px 13px;
  color: var(--mvp-muted);
  font-size: .79rem;
  font-weight: 650;
  line-height: 1.45;
}
.mvp-shell .textbook-toc li.current > .toc-sections a:hover,
.mvp-shell .textbook-toc li.current > .toc-sections a:focus-visible {
  color: var(--mvp-brand);
}
.mvp-shell .textbook-page {
  width: min(100% - 48px, 850px);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) clamp(36px, 6vw, 72px);
  background: var(--mvp-surface);
  box-shadow: 0 0 0 1px var(--mvp-line);
  word-break: keep-all;
}
.mvp-shell .textbook-page > header { padding-bottom: 38px; border-bottom: 2px solid var(--mvp-text); }
.mvp-shell .textbook-page > header p { color: var(--mvp-brand); font-weight: 800; }
.mvp-shell .textbook-page > header p span { color: var(--mvp-subtle); font-size: .78em; font-variant-numeric: tabular-nums; }
/* 넓은 화면에서는 왼쪽 차례가 책 이름을 이미 들고 있다. 같은 말을 두 번 쓰지
   않도록 본문 머리의 책 이름은 차례가 접히는 좁은 화면에서만 보여준다. */
.mvp-shell .reader-book-name { display: none; }
.mvp-shell .reader-book-name + span { margin-left: 0; }
.mvp-shell .textbook-page h1 { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.15; letter-spacing: -.045em; }
.mvp-shell .textbook-page section { padding: 42px 0 18px; }
.mvp-shell .textbook-page section > h2 { margin: 0 0 25px; font-size: 1.45rem; letter-spacing: -.03em; }
.mvp-shell .textbook-copy { color: var(--mvp-text); font-size: 1.04rem; line-height: 1.92; overflow-wrap: break-word; text-wrap: pretty; }
.mvp-shell .textbook-copy p { margin: 0 0 1.15em; }
.mvp-shell .textbook-copy h3 { margin: 2.4em 0 .8em; font-size: 1.22rem; line-height: 1.45; letter-spacing: -.025em; }
.mvp-shell .textbook-copy h4 { margin: 2em 0 .7em; font-size: 1.06rem; line-height: 1.5; }
.mvp-shell .textbook-copy h5,
.mvp-shell .textbook-copy h6 { margin: 1.7em 0 .65em; font-size: .98rem; line-height: 1.5; }
.mvp-shell .textbook-copy ul,
.mvp-shell .textbook-copy ol { margin: .25em 0 1.35em; padding-left: 1.45em; }
.mvp-shell .textbook-copy li { margin: .38em 0; padding-left: .25em; }
.mvp-shell .textbook-copy strong { font-weight: 820; }
.mvp-shell .textbook-copy code { padding: .1em .3em; border: 1px solid var(--mvp-line); border-radius: 2px; background: var(--mvp-bg-soft); font-family: inherit; font-size: .9em; }
.mvp-shell .textbook-copy blockquote { margin: 1.7em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--mvp-brand); color: var(--mvp-muted); }
.mvp-shell .textbook-copy blockquote p { margin: 0; }
.mvp-shell .textbook-copy hr { height: 1px; margin: 2.4em 0; border: 0; background: var(--mvp-line); }
.mvp-shell .textbook-copy a { color: var(--mvp-brand-strong); text-underline-offset: 4px; }
.mvp-shell .textbook-copy .law-reference { display: inline-block; padding: 1px 5px; border: 1px solid var(--mvp-line-strong); color: var(--mvp-muted); font-size: .78em; font-weight: 750; line-height: 1.5; vertical-align: .08em; }
.mvp-shell .textbook-copy .table-scroll { max-width: 100%; margin: 1.75em 0 2em; overflow-x: auto; border-top: 2px solid var(--mvp-text); border-bottom: 1px solid var(--mvp-line-strong); }
.mvp-shell .textbook-copy table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9rem; line-height: 1.6; word-break: normal; }
.mvp-shell .textbook-copy th,
.mvp-shell .textbook-copy td { padding: 11px 13px; border-bottom: 1px solid var(--mvp-line); text-align: left; vertical-align: top; }
.mvp-shell .textbook-copy th { background: var(--mvp-bg-soft); font-weight: 800; }
.mvp-shell .textbook-copy tbody tr:last-child td { border-bottom: 0; }
.mvp-shell .textbook-figure { margin: 2em auto 2.4em; }
.mvp-shell .textbook-figure img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--mvp-line); background: #fff; }
.mvp-shell .textbook-figure figcaption { margin-top: 9px; color: var(--mvp-subtle); font-size: .76rem; line-height: 1.5; text-align: center; }
.mvp-shell .textbook-private-actions { display: flex; gap: 12px; align-items: start; margin-top: 24px; }
.mvp-shell .textbook-private-actions button,
.mvp-shell .textbook-private-actions summary,
.mvp-shell .textbook-complete button { border: 1px solid var(--mvp-line-strong); border-radius: 3px; background: var(--mvp-surface); color: var(--mvp-text); padding: 9px 12px; font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer; }
.mvp-shell .textbook-private-actions details { flex: 1; }
.mvp-shell .textbook-private-actions details form { display: grid; gap: 9px; margin-top: 9px; }
.mvp-shell .textbook-private-actions textarea { width: 100%; border: 1px solid var(--mvp-line); padding: 12px; font: inherit; line-height: 1.6; }
.mvp-shell .textbook-complete { margin: 46px 0 0; padding: 24px 0; border-top: 1px solid var(--mvp-line); text-align: right; }
.mvp-shell .textbook-complete button { border-color: var(--mvp-brand); background: var(--mvp-brand); color: white; }
.mvp-shell .textbook-chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--mvp-line); }
.mvp-shell .textbook-chapter-nav a { display: grid; gap: 5px; color: var(--mvp-text); font-weight: 750; line-height: 1.45; text-decoration: none; }
.mvp-shell .textbook-chapter-nav a:last-child { text-align: right; }
.mvp-shell .textbook-chapter-nav small { color: var(--mvp-subtle); font-size: .72rem; font-weight: 700; }
.mvp-shell .mobile-toc-button { display: none; }

@media (max-width: 860px) {
  .mvp-shell .textbook-shelf article { grid-template-columns: 34px 1fr auto; gap: 8px 12px; align-items: baseline; }
  .mvp-shell .textbook-shelf article > b { grid-row: 1 / span 4; }
  .mvp-shell .textbook-shelf article > p,
  .mvp-shell .textbook-shelf article > small { grid-column: 2 / -1; }
  .mvp-shell .textbook-shelf article > a { grid-column: 3; grid-row: 1; }
  .mvp-shell .textbook-layout { display: block; }
  .mvp-shell .textbook-toc { display: none; }
  /* 차례가 접히면 책 이름을 볼 곳이 여기뿐이다. */
  .mvp-shell .reader-book-name { display: inline; }
  .mvp-shell .reader-book-name + span { margin-left: 8px; }
  .mvp-shell .textbook-toc:target {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: block;
    width: 100%;
    height: 100dvh;
    max-height: none;
    padding: 28px 22px 60px;
    border: 0;
    background: var(--mvp-bg-soft);
  }
  .mvp-shell .textbook-toc:target .toc-close {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    margin: -10px -2px 18px;
    padding: 10px 12px;
    background: var(--mvp-bg-soft);
    font-weight: 800;
    text-align: right;
  }
  .mvp-shell .textbook-page { box-sizing: border-box; width: 100%; padding: 46px 19px 72px; box-shadow: none; }
  .mvp-shell .mobile-toc-button { display: inline-flex; margin-bottom: 30px; font-weight: 800; }
}

@media (max-width: 520px) {
  .mvp-shell .textbook-library > header br { display: none; }
  .mvp-shell .textbook-shelf article { grid-template-columns: 28px minmax(0, 1fr); }
  .mvp-shell .textbook-shelf article > b { grid-row: 1 / span 5; }
  .mvp-shell .textbook-shelf article > p,
  .mvp-shell .textbook-shelf article > small,
  .mvp-shell .textbook-shelf article > a { grid-column: 2; grid-row: auto; }
  .mvp-shell .textbook-copy { font-size: 1rem; line-height: 1.85; }
  .mvp-shell .textbook-chapter-nav { gap: 18px; }
}

/* 화면에서는 감추고 스크린리더에만 읽히는 글. 표의 caption 처럼 눈으로 보면
   군더더기지만 귀로 들을 때는 있어야 하는 자리에 쓴다. */
.mvp-shell .sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 교재 목록: 과목 × 1·2차 표 ─────────────────────────────────────
   줄글로 늘어놓으면 "이게 1차 과목인가 2차 과목인가"를 매번 읽어야 한다. 표로
   두면 눈이 한 번에 answers 한다 — 버튼이 놓인 칸이 곧 그 시험에 나온다는 뜻이다. */
.mvp-shell .textbook-matrix {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.mvp-shell .textbook-matrix thead th {
  padding: 0 14px 12px;
  color: var(--mvp-muted);
  border-bottom: 2px solid var(--mvp-text);
  text-align: left;
  vertical-align: bottom;
}

.mvp-shell .textbook-matrix thead th:first-child { width: 30%; }

.mvp-shell .textbook-matrix thead b {
  display: block;
  color: var(--mvp-text);
  font-size: 1.05rem;
}

.mvp-shell .textbook-matrix thead small {
  color: var(--mvp-subtle);
  font-size: .76rem;
  font-weight: 700;
}

.mvp-shell .textbook-matrix tbody th {
  padding: 16px 14px;
  border-bottom: 1px solid var(--mvp-line);
  text-align: left;
  vertical-align: middle;
}

.mvp-shell .textbook-matrix tbody th a {
  color: var(--mvp-text);
  font-size: 1.02rem;
  font-weight: 850;
  text-decoration: none;
}

.mvp-shell .textbook-matrix tbody th a:hover { text-decoration: underline; }

.mvp-shell .textbook-matrix tbody th small {
  display: block;
  margin-top: 3px;
  color: var(--mvp-subtle);
  font-size: .76rem;
  font-weight: 700;
}

.mvp-shell .textbook-matrix td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--mvp-line);
  vertical-align: middle;
}

.mvp-shell .matrix-cell {
  display: block;
  padding: 10px 13px;
  color: var(--mvp-text);
  background: var(--mvp-surface);
  border: 1px solid var(--mvp-line-strong);
  border-radius: 9px;
  text-decoration: none;
}

.mvp-shell .matrix-cell:hover { border-color: var(--mvp-brand); }
.mvp-shell .matrix-cell b { display: block; font-size: .88rem; font-weight: 800; }
.mvp-shell .matrix-cell span { color: var(--mvp-brand); font-size: .76rem; font-weight: 800; }
.mvp-shell .matrix-blank { color: var(--mvp-line-strong); }

.mvp-shell .exam-rule { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--mvp-line); }
.mvp-shell .exam-rule dl { display: grid; gap: 10px; margin: 0 0 12px; }
.mvp-shell .exam-rule div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; }
.mvp-shell .exam-rule dt { color: var(--mvp-text); font-weight: 850; }
.mvp-shell .exam-rule dd { margin: 0; color: var(--mvp-muted); }
.mvp-shell .exam-rule p { color: var(--mvp-subtle); font-size: .8rem; }

/* ── 과목 개요: 교재를 펴기 전에 보는 화면 ───────────────────────── */
.mvp-shell .textbook-overview {
  width: min(100%, 820px);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 0;
}

.mvp-shell .textbook-overview > header { margin-bottom: 40px; }
.mvp-shell .textbook-overview h1 { margin: 0 0 12px; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.045em; }
.mvp-shell .textbook-overview > header p { margin: 0; color: var(--mvp-muted); font-size: 1.05rem; }
.mvp-shell .textbook-overview h2 { margin: 0 0 18px; font-size: 1.15rem; }

.mvp-shell .overview-exam { padding-top: 24px; border-top: 2px solid var(--mvp-text); }
.mvp-shell .overview-exam-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--mvp-line);
}

.mvp-shell .overview-exam-where b { display: block; color: var(--mvp-brand); font-size: .8rem; font-weight: 850; }
.mvp-shell .overview-exam-where strong { display: block; margin: 2px 0 4px; font-size: 1.05rem; }
.mvp-shell .overview-exam-where small { color: var(--mvp-subtle); font-size: .78rem; font-weight: 700; }
.mvp-shell .overview-clock { margin: 6px 0 0; color: var(--mvp-muted); font-size: .8rem; }
.mvp-shell .overview-scope-label { margin: 0 0 8px; color: var(--mvp-subtle); font-size: .8rem; font-weight: 700; }
.mvp-shell .overview-scope { margin: 0 0 12px; padding-left: 18px; color: var(--mvp-text); }
.mvp-shell .overview-scope li { margin-bottom: 4px; }
.mvp-shell .overview-pass { margin: 0; color: var(--mvp-muted); font-size: .9rem; }

.mvp-shell .overview-plan { margin-top: 44px; }
.mvp-shell .overview-chapters { margin: 0 0 24px; padding: 0; list-style: none; }
.mvp-shell .overview-chapters li { border-bottom: 1px solid var(--mvp-line); }
.mvp-shell .overview-chapters a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 2px;
  color: var(--mvp-text);
  text-decoration: none;
}

.mvp-shell .overview-chapters a:hover { color: var(--mvp-brand); }
.mvp-shell .overview-chapters span { color: var(--mvp-subtle); font-variant-numeric: tabular-nums; }
.mvp-shell .overview-basis { margin-top: 40px; color: var(--mvp-subtle); font-size: .8rem; }

@media (max-width: 860px) {
  .mvp-shell .textbook-matrix thead small { display: none; }
  .mvp-shell .textbook-matrix thead th:first-child { width: 38%; }
  .mvp-shell .textbook-matrix td { padding: 8px 6px; }
  .mvp-shell .textbook-matrix tbody th { padding: 14px 6px 14px 0; }
  .mvp-shell .matrix-cell { padding: 8px 9px; }
  .mvp-shell .matrix-cell b { font-size: .78rem; }
  .mvp-shell .matrix-cell span { font-size: .7rem; }
  .mvp-shell .overview-exam-row { grid-template-columns: 1fr; gap: 10px; }
  .mvp-shell .exam-rule div { grid-template-columns: 1fr; gap: 2px; }
}

/* ── 홈의 시험 한눈에 ────────────────────────────────────────────────
   세무사 시험을 준비하는 자리이므로 시험 자체가 먼저 온다. 값은 전부 시행령을
   옮긴 동결 파일에서 오고, 화면은 읽어서 늘어놓기만 한다. */
.mvp-shell .home-exam { margin: 40px 0; padding-top: 26px; border-top: 2px solid var(--mvp-text); }
.mvp-shell .home-exam h2 { margin: 0 0 18px; font-size: 1.15rem; }

.mvp-shell .home-exam-dday {
  display: flex;
  margin: 0 0 24px;
  padding: 0;
  flex-wrap: wrap;
  gap: 26px;
  list-style: none;
}

.mvp-shell .home-exam-dday li { display: flex; align-items: baseline; gap: 9px; }
.mvp-shell .home-exam-dday b { color: var(--mvp-muted); font-size: .85rem; font-weight: 700; }
.mvp-shell .home-exam-dday strong { color: var(--mvp-brand); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.mvp-shell .home-exam-dday small { color: var(--mvp-subtle); font-size: .78rem; }

.mvp-shell .home-exam-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mvp-shell .home-exam-stages article { padding-top: 16px; border-top: 1px solid var(--mvp-line); }
.mvp-shell .home-exam-stages h3 { display: flex; margin: 0 0 10px; align-items: baseline; gap: 9px; font-size: 1rem; }
.mvp-shell .home-exam-stages h3 small { color: var(--mvp-subtle); font-size: .76rem; font-weight: 700; }
.mvp-shell .home-exam-sessions { margin: 0 0 12px; padding: 0; list-style: none; }
.mvp-shell .home-exam-sessions li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 44px;
  gap: 10px;
  padding: 6px 0;
  align-items: baseline;
  border-bottom: 1px solid var(--mvp-line);
  font-size: .9rem;
}

.mvp-shell .home-exam-sessions b { color: var(--mvp-subtle); font-size: .8rem; font-weight: 700; }
.mvp-shell .home-exam-sessions small { color: var(--mvp-muted); font-size: .8rem; font-variant-numeric: tabular-nums; text-align: right; }
.mvp-shell .home-exam-stages p { margin: 0; color: var(--mvp-muted); font-size: .84rem; }
.mvp-shell .home-exam-basis { margin-top: 20px; color: var(--mvp-subtle); font-size: .78rem; }

@media (max-width: 860px) {
  .mvp-shell .home-exam-stages { grid-template-columns: 1fr; }
  .mvp-shell .home-exam-dday { gap: 16px; }
}