/* 해설 글, 계산 사례, 작성·검수 표시, 사이트 메뉴. 디자인 토큰은 tokens.css 의 :root 에서 정의하고 여기서는 var(--이름)으로만 쓴다. */

.article, .cases { margin-top: var(--space-6); }
.article h2, .cases h2 { margin-top: var(--space-5); }
.article h3 { margin-top: var(--space-5); }
.case { margin: 0 0 var(--space-4); padding: var(--space-4); background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); }
.case h3 { margin-top: 0; }
/* 사례 결과: 좁은 화면에서는 이름 아래에 값을 쌓고(설명이 긴 값이 이름 칸을 짓누르지 않게), 넓은 화면에서는 두 열로 나란히 놓는다. */
.case dl { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
.case dd { text-align: left; margin-bottom: var(--space-2); }
@media (min-width: 40rem) {
  .case dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .case dd { margin-bottom: 0; }
}
.byline { margin: var(--space-6) 0 0; color: var(--muted); font-size: var(--font-sm); }
.todo { padding: 0 var(--space-1); background: var(--warn-bg); color: var(--warn-text); font-weight: 700; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); max-width: none; margin: var(--space-4) 0 0; padding: 0; list-style: none; font-size: var(--font-sm); }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--tap-size); }

/* 표(연도별 규정, 기준금리): 좁은 화면에서는 행마다 카드 한 장으로 쌓고(칸 이름은 data-label), 넓은 화면(48rem~)에서는 보통 표로 되돌린다. */
.table-wrap { position: relative; }
.table-wrap thead { position: absolute; width: var(--border-width); height: var(--border-width); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.table-wrap table, .table-wrap tbody, .table-wrap caption { display: block; }
.table-wrap tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); padding: var(--space-4); background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); }
.table-wrap th, .table-wrap td { padding: 0; border-bottom: 0; }
.table-wrap tbody th { grid-column: 1 / -1; font-size: var(--font-md); }
.table-wrap td { font-size: var(--font-sm); font-weight: 600; }
.table-wrap td::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--font-xs); font-weight: 400; }
.table-wrap .cell-wide { grid-column: 1 / -1; font-weight: 400; }
.table-wrap .cell-heading { margin-top: var(--space-2); color: var(--muted); font-weight: 700; }
@media (min-width: 48rem) {
  .table-wrap table { display: table; }
  .table-wrap caption { display: table-caption; }
  .table-wrap thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .table-wrap tbody { display: table-row-group; }
  .table-wrap tr { display: table-row; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
  .table-wrap th, .table-wrap td { padding: var(--space-2); border-bottom: var(--border-width) solid var(--border); }
  .table-wrap tbody th { font-size: inherit; }
  .table-wrap td { font-size: inherit; font-weight: 400; }
  .table-wrap td::before { content: none; }
  .table-wrap .cell-heading { margin-top: 0; }
}

/* 홈 화면: 큰 제목과 파스텔 카드 줄. 큰 둥근 카드를 쓰고 좁은 화면에서는 옆으로 넘겨 본다. */
main.wide { max-width: var(--wide-width); }
.hero, .section-title, .card, .page-hero { word-break: keep-all; overflow-wrap: break-word; } /* 한글을 글자 중간이 아니라 단어 단위로 줄바꿈 */
.hero { padding: var(--space-8) 0 var(--space-6); text-align: center; }
.hero h1 { margin: 0 0 var(--space-4); font-size: var(--font-hero); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.accent { color: var(--brand-mint); }
.hero p { max-width: var(--reading-width); margin: 0 auto; color: var(--muted); font-size: var(--font-lg); }
.section-title { margin: var(--space-7) 0 var(--space-5); color: var(--muted); font-size: var(--font-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.section-title strong { color: var(--text); }
.cards { display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-column); gap: var(--space-4); max-width: none; margin: 0; padding: 0 0 var(--space-4); overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; }
.cards > li { display: flex; scroll-snap-align: center; }
.card { position: relative; display: flex; flex: 1; flex-direction: column; min-height: var(--card-height); padding: var(--space-6) var(--space-6) 0; overflow: hidden; border-radius: var(--radius-xl); color: var(--ink); text-decoration: none; }
.card-mint, .tint-mint { background: var(--card-mint); }
.card-blue, .tint-blue { background: var(--card-blue); }
.card-lilac, .tint-lilac { background: var(--card-lilac); }
.card-label { color: var(--ink-muted); font-size: var(--font-xs); font-weight: 700; }
.card-title { margin-top: var(--space-1); font-size: var(--font-card-title); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.card-text { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--font-sm); }
.card-art { width: 100%; height: auto; margin-top: auto; padding-bottom: var(--space-7); }
.card-go { position: absolute; right: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; justify-content: center; width: var(--tap-size); height: var(--tap-size); border-radius: var(--radius-pill); background: var(--go-bg); color: var(--go-ink); font-size: var(--font-xl); }
.card:focus-visible { outline: var(--space-1) solid var(--accent); outline-offset: var(--space-1); }
@media (prefers-reduced-motion: no-preference) {
  .card-art { transition: transform 0.25s ease; }
  .card:hover .card-art { transform: scale(1.04); }
}
@media (min-width: 48rem) {
  .cards { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .hero h1 { font-size: var(--font-hero-lg); }
}

/* 홈의 가이드 목록(글 이름 + 한 줄 설명). 좁은 화면은 한 줄에 하나, 넓은 화면은 두 칸이다. */
.guide-list { display: grid; gap: var(--space-3); max-width: none; margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.guide-list a { display: block; padding: var(--space-4); background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); color: var(--text); text-decoration: none; }
.guide-list a:hover, .guide-list a:focus-visible { border-color: var(--accent); }
.guide-name { display: block; font-weight: 700; word-break: keep-all; }
.guide-summary { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--font-sm); word-break: keep-all; }
@media (min-width: 48rem) {
  .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 해설 글 페이지: 본문 아래 관련 글 목록은 읽기 폭을 따른다. */
.guide, .related h2 { word-break: keep-all; overflow-wrap: break-word; }
.related { margin-top: var(--space-6); }

/* 계산기 페이지 상단 배너: 파스텔 배경에 제목과 설명, 오른쪽에 그림 */
.page-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-5); padding: var(--space-6); border-radius: var(--radius-xl); color: var(--ink); }
.page-hero-text { flex: 1 1 var(--hero-text-min); }
.page-hero h1 { margin: 0 0 var(--space-2); font-size: var(--font-xxl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.page-hero p { max-width: none; margin: 0; color: var(--ink-muted); }
.page-hero-art { flex: none; width: var(--page-art-width); max-width: 100%; height: auto; }