/* 記事を縦に読む（追補23-48 §4 の11）。色は shared/tokens.css の3色（紺・空色・オレンジ）だけを使う */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg-light); color: var(--text-body); font-family: var(--font-base); font-size: 16px; line-height: var(--lh-ui); -webkit-text-size-adjust: 100%; }
a { color: var(--navy); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 8px 14px; background: var(--navy); color: #fff; }
.skip-link:focus { left: 8px; top: 8px; }
.fd-wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }
.fd-main { padding: 8px 0 40px; }
.fd-crumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 12px 0 0; font-size: 12px; color: var(--text-muted); }
.fd-crumb li + li::before { content: "›"; margin-right: 6px; color: var(--border-strong); }
.fd-crumb a { color: var(--text-muted); }
.fd-head { padding: 14px 0 10px; }
.fd-title { margin: 0 0 8px; color: var(--navy); font-size: var(--fs-h1-sp); font-weight: var(--fw-h1); line-height: var(--lh-h1); }
.fd-lead { margin: 0 0 12px; font-size: 14.5px; line-height: 1.8; }
.fd-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-tab { padding: 7px 14px; border: 1px solid var(--navy); border-radius: 999px; background: #fff; color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.fd-tab[aria-pressed="true"] { background: var(--navy); color: #fff; }
.fd-stack { height: min(640px, calc(100svh - 140px)); min-height: 380px; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain;
  border-radius: var(--radius-lg); background: var(--navy); }
.fd-card { min-height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: 28px 22px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.fd-card--cover { background: linear-gradient(180deg, var(--navy) 0, var(--navy-dark) 100%); }
.fd-kicker { margin: 0; font-size: 13px; font-weight: 700; color: var(--sky-line); font-variant-numeric: tabular-nums; }
.fd-cover-title { margin: 0; font-size: 22px; line-height: 1.55; }
.fd-hint { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .75); }
.fd-q { margin: 0; font-size: 22px; line-height: 1.5; color: #fff; }
.fd-a { margin: 0; font-size: 16.5px; line-height: 1.9; color: rgba(255, 255, 255, .92); }
.fd-more { align-self: flex-start; color: var(--sky-line); font-weight: 700; }
.fd-end-text { margin: 0; font-size: 16px; }
.fd-card--end .btn-go { align-self: flex-start; }
.fd-empty { margin: 0; padding: 24px; color: #fff; }
.fd-empty a { color: var(--sky-line); }
@media (min-width: 640px) { .fd-title { font-size: var(--fs-h1); } .fd-card { padding: 40px 44px; } .fd-q { font-size: 26px; } }