/* ─────────────────────────────────────────────────────────────────────────
 * tokens.css — 健康寿命PDCAポータル
 * Hallmark · genre: editorial · macrostructure-family: Almanac/Long Document/Workbench
 * theme: Linen (catalog) + Noto Serif/Sans JP + clinical
 * Source: design.md v1.2.0 (2026-05-21)
 *
 * 単一情報源。raw 値（#hex, hsl(), px, rem 数値）を直書きせず、必ず var() で参照する。
 *
 * v1.3.0 (第三波)：legacy adapter section を追加し、73 個別記事ページの旧 class 群
 * （.global-nav, .breadcrumb, .article-card, .course-item, .tier-card,
 *  .capability-card, .pattern-card, .ev-callout, .misconception, .antipattern 等）を
 * 新 visual language に強制マッピング。記事ページの <style> ブロックは温存し、CSS
 * cascade と !important で上書きすることで、HTML への侵襲を最小化する。
 * ──────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600;700&family=JetBrains+Mono:wght@400;500&display=optional");

:root {
  /* ─── Paper / surface (v1.3.1: 純白基調にユーザー判断で変更) ─── */
  --color-paper:      oklch(100% 0 0);          /* 純白 main bg */
  --color-paper-2:    oklch(98% 0.003 85);      /* surface（極淡 warm） */
  --color-paper-3:    oklch(95% 0.005 85);      /* hairline area（warm 灰） */

  /* ─── Ink (foreground) ─────────────────────────── */
  --color-ink:        oklch(22% 0.020 260);
  --color-ink-2:      oklch(45% 0.015 260);
  --color-ink-3:      oklch(60% 0.010 260);

  /* ─── Rule / accent ────────────────────────────── */
  --color-rule:       oklch(85% 0.005 260);
  --color-rule-2:     oklch(75% 0.008 260);
  --color-accent:      oklch(45% 0.13 240);   /* v1.1.0: clinical blue 寄り (250→240) */
  --color-accent-warm: oklch(55% 0.12 55);    /* v1.1.0: ornament / fleuron 用 warm accent */
  --color-accent-ink:  oklch(98% 0.008 85);
  --color-focus:       oklch(58% 0.18 240);

  /* ─── Tier semantic ────────────────────────────── */
  --color-tier-0:     oklch(60% 0.11 145);
  --color-tier-1:     oklch(55% 0.13 240);
  --color-tier-2:     oklch(55% 0.13 295);
  --color-tier-3:     oklch(55% 0.15 25);
  --color-tier-0-bg:  oklch(95% 0.04 145);
  --color-tier-1-bg:  oklch(95% 0.04 240);
  --color-tier-2-bg:  oklch(95% 0.04 295);
  --color-tier-3-bg:  oklch(95% 0.04 25);

  /* ─── Evidence label semantic tokens (v1.2.0 昇格、L1/L2 記事用) ─── */
  --color-ev-high:    oklch(45% 0.12 155);
  --color-ev-high-bg: oklch(95% 0.05 155);
  --color-ev-med:     oklch(45% 0.13 240);
  --color-ev-med-bg:  oklch(95% 0.04 240);
  --color-ev-low:     oklch(45% 0.13 50);
  --color-ev-low-bg:  oklch(95% 0.05 50);
  --color-ev-spec:    oklch(45% 0.13 305);
  --color-ev-spec-bg: oklch(95% 0.04 305);

  /* ─── Typography ───────────────────────────────── */
  --font-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  --font-body:    "Noto Sans JP",  "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* ─── Type scale ───────────────────────────────── */
  --text-display: clamp(2.2rem, 4.5vw, 3.4rem);
  --text-2xl:     1.6rem;
  --text-xl:      1.3rem;
  --text-lg:      1.15rem;
  --text-md:      1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.78rem;

  /* ─── Spacing (4pt) ────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* ─── Motion ───────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-short:   150ms;
  --dur-medium:  220ms;

  /* ─── Geometry ─────────────────────────────────── */
  --radius-card:    4px;
  --radius-pill:    9999px;
  --radius-input:   4px;
  --measure:        36rem;
  --max-width:      52rem;       /* 標準（記事ページ） */
  --max-width-wide: 64rem;       /* v1.4.0: 72rem→64rem (editorial reading flow 標準域 1024px) */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-short:  0ms;
    --dur-medium: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* v1.4.0 m4: focus-visible リング即時表示（gate 違反予防） */
*:focus-visible {
  transition: outline-color 0ms !important;
}

/* ─── Reset (light, editorial-leaning) ──────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html, body {
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.85;
  color: var(--color-ink);
  background: var(--color-paper);
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-width: 0;
}

/* skip-to-content link (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-2xs) var(--space-sm);
  text-decoration: none;
  z-index: 9999;
}
.skip-link:focus-visible {
  left: var(--space-sm);
  top: var(--space-sm);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* focus-visible 規範 — 全インタラクティブ要素に適用 */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 本文リンクは underline 必須 (color のみで区別しない) */
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.05em;
  transition: color var(--dur-short) var(--ease-out);
}
a:hover {
  color: var(--color-ink);
}

/* Display / body fonts */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
  min-width: 0;
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ─── Figure / Image (v1.1.0) ────────────────────────────────────────── */

figure {
  margin: 0;
}
figure img,
figure[data-placeholder] {
  display: block;
  width: 100%;
  border: 1px solid var(--color-rule-2);
  background: var(--color-paper-2);
  object-fit: cover;
}
figure[data-placeholder] {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 14px,
      color-mix(in oklch, var(--color-rule), transparent 50%) 14px,
      color-mix(in oklch, var(--color-rule), transparent 50%) 15px
    ),
    var(--color-paper-2);
  color: var(--color-ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
figure[data-placeholder]::after {
  content: attr(data-placeholder);
  background: var(--color-paper);
  padding: var(--space-3xs) var(--space-xs);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
}
figcaption {
  margin-top: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  line-height: 1.6;
}

/* ─── Ornaments (v1.1.0) ─────────────────────────────────────────────── */

.ornament {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
}
.ornament svg { display: block; }

.ornament-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-rule-2);
  margin: var(--space-2xl) 0;
}
.ornament-divider::before,
.ornament-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.ornament-divider svg {
  flex-shrink: 0;
  color: var(--color-accent-warm);
}

/* ─── Pill button (v1.1.0 — clinical CTA) ────────────────────────────── */

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-ink);
  transition: background var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.btn-pill:hover {
  background: var(--color-accent);
  color: var(--color-paper);
  border-color: var(--color-accent);
}
.btn-pill.outline {
  background: transparent;
  color: var(--color-ink);
}
.btn-pill.outline:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}
.btn-pill svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-short) var(--ease-out);
}
.btn-pill:hover svg { transform: translateX(2px); }

/* ═══════════════════════════════════════════════════════════════════════════
 * Legacy adapter (v1.3.0 第三波) — 旧 HTML 73 ページの class 群を新 visual
 * language に強制マッピングする。各 HTML の <style> ブロックは温存。
 * !important を使用するのは適切な cascade 上書きのため必要悪。完全な structural
 * rewrite は第四波以降で扱う。
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Global nav (旧 navy header → sticky pill nav) ──────────────────── */
.global-nav {
  position: sticky !important;
  top: 0;
  z-index: 100;
  background: var(--color-paper) !important; /* v1.4.0 m1: color-mix fallback for old Safari */
  background: color-mix(in oklch, var(--color-paper), transparent 6%) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-rule) !important;
}
.global-nav .nav-inner {
  max-width: var(--max-width-wide) !important;
  padding: var(--space-xs) var(--space-lg) !important;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.global-nav .nav-logo {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--text-md) !important;
  color: var(--color-ink) !important;
  background: transparent !important;
  padding: var(--space-2xs) 0 !important;
  margin-right: var(--space-md) !important;
}
.global-nav .nav-logo:hover { color: var(--color-accent) !important; }
.global-nav .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-left: auto;
}
.global-nav .nav-links a {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-ink-2) !important;
  background: transparent !important;
  padding: var(--space-2xs) var(--space-sm) !important;
  border-bottom: 2px solid transparent !important;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out) !important;
}
.global-nav .nav-links a:hover {
  color: var(--color-ink) !important;
  background: transparent !important;
}
.global-nav .nav-links a[aria-current="page"] {
  color: var(--color-ink) !important;
  background: transparent !important;
  border-bottom-color: var(--color-accent) !important;
}

/* ─── Breadcrumb (旧 surface bg → mono breadcrumb) ──────────────────── */
.breadcrumb {
  background: var(--color-paper-2) !important;
  border-bottom: 1px solid var(--color-rule) !important;
  padding: 0 !important;
}
.breadcrumb ol {
  max-width: var(--max-width-wide) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-ink-3) !important;
  letter-spacing: 0.02em;
  padding: var(--space-2xs) var(--space-lg) !important;
  gap: var(--space-2xs);
}
.breadcrumb li + li::before { content: "›"; color: var(--color-rule-2) !important; margin-right: var(--space-3xs) !important; }
.breadcrumb a { color: var(--color-ink-2) !important; text-decoration: none !important; }
.breadcrumb a:hover { color: var(--color-accent) !important; text-decoration: none !important; }
.breadcrumb [aria-current="page"] { color: var(--color-ink) !important; }

/* ─── Article container (v1.3.2: コンテナ強制拡張を撤回。HTML 内 <style> の
 *   max-width 定義を尊重し、article 系本文ページは 52rem 程度に収まる) ── */
article {
  max-width: var(--max-width) !important;       /* 52rem 本文ページ */
  margin: 0 auto;
}
/* main の max-width は touch しない（hub は HTML 側で wide、旧 article ページは
 * HTML 側 :root で max-width: 800px を維持） */
.page-hero,
.page-hero-inner {
  background: transparent !important;
  color: var(--color-ink) !important;
}
.page-hero { padding: var(--space-2xl) var(--space-lg) var(--space-xl) !important; }

/* ─── Page label / title / desc (旧 hub hero) ──────────────────────── */
.page-label, .article-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2xs);
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: var(--color-paper) !important;
  background: var(--color-accent) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px var(--space-xs) !important;
  margin-bottom: var(--space-md) !important;
  text-transform: uppercase;
}
.page-title, h1 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  border: 0 !important;
  padding: 0 !important;
}
article h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem) !important;
  margin-bottom: var(--space-md) !important;
}
.page-desc {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  color: var(--color-ink-2) !important;
  line-height: 1.7 !important;
  margin-bottom: var(--space-lg) !important;
}

/* ─── Headings inside articles (旧 navy h2 → serif h2) ──────────────── */
article h2 {
  font-family: var(--font-display) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  border-left: 0 !important;
  padding-left: 0 !important;
  padding-top: var(--space-md) !important;
  border-top: 1px solid var(--color-rule) !important;
  margin: var(--space-2xl) 0 var(--space-md) !important;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
article h3 {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  margin: var(--space-xl) 0 var(--space-sm) !important;
  position: relative;
  padding-left: var(--space-sm) !important;
}
article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.4em;
  width: 3px;
  background: var(--color-accent);
}

/* ─── Site hero (旧 navy gradient → editorial typography only) ───────── */
.site-hero, .page-hero {
  background: transparent !important;
  color: var(--color-ink) !important;
  text-align: left !important;
}
.hero-title {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  text-shadow: none !important;
}
.hero-tagline, .hero-lede {
  color: var(--color-ink-2) !important;
  font-family: var(--font-display) !important;
}

/* ─── Article cards / course / tier / pattern / capability (旧 cards → entry) ─── */
.article-card,
.course-item,
.tier-card,
.pattern-card,
.capability-card {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-rule) !important;
  border-radius: 0 !important;
  padding: var(--space-md) var(--space-md) !important;
  margin: 0 calc(var(--space-md) * -1) !important;
  position: relative;
  transition: background var(--dur-short) var(--ease-out) !important;
  text-decoration: none !important;
}
.article-card::before,
.course-item::before,
.tier-card::before,
.pattern-card::before,
.capability-card::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 70%;
  background: var(--color-accent);
  transition: transform var(--dur-medium) var(--ease-out);
}
.article-card:hover,
.course-item:hover,
.tier-card:hover,
.pattern-card:hover,
.capability-card:hover {
  background: var(--color-paper-2) !important;
  box-shadow: none !important;
}
.article-card:hover::before,
.course-item:hover::before,
.tier-card:hover::before,
.pattern-card:hover::before,
.capability-card:hover::before {
  transform: translateY(-50%) scaleY(1);
}
.card-title, .cat-title, .cap-title, .tier-title, .course-title, .pattern-card .card-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  line-height: 1.45 !important;
  margin-bottom: var(--space-2xs) !important;
}
.card-desc, .cat-desc, .cap-hook, .tier-desc, .course-desc, .pattern-card .card-desc {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-ink-2) !important;
  line-height: 1.75 !important;
  max-width: var(--measure);
}
.article-card:hover .card-title,
.article-card:hover .cat-title,
.tier-card:hover .tier-title,
.course-item:hover .course-title,
.capability-card:hover .cap-title,
.pattern-card:hover .card-title { color: var(--color-accent) !important; }

/* card badges (公開中 / 準備中 / Pattern) */
.card-badge, .course-badge {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: var(--space-3xs) var(--space-xs) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--color-tier-0-bg) !important;
  color: var(--color-tier-0) !important;
  border: 0 !important;
  white-space: nowrap;
}
.card-badge.soon, .badge-soon { background: var(--color-tier-1-bg) !important; color: var(--color-tier-1) !important; }
.card-badge.pending, .badge-pending { background: var(--color-paper-3) !important; color: var(--color-ink-3) !important; }
.article-card.pattern { border-left: 0 !important; }

/* tier badges */
.tier-badge, .badge-t0, .badge-t1, .badge-t2, .badge-t3 {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: var(--space-3xs) var(--space-xs) !important;
  border-radius: var(--radius-pill) !important;
  border: 0 !important;
  background: var(--color-tier-0-bg) !important;
  color: var(--color-tier-0) !important;
}
.tier1 .tier-badge, .badge-t1 { background: var(--color-tier-1-bg) !important; color: var(--color-tier-1) !important; }
.tier2 .tier-badge, .badge-t2 { background: var(--color-tier-2-bg) !important; color: var(--color-tier-2) !important; }
.tier3 .tier-badge, .badge-t3 { background: var(--color-tier-3-bg) !important; color: var(--color-tier-3) !important; }

/* ─── Section labels (eyebrow) ──────────────────────────────────────── */
.section-label, .cat-label {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: var(--color-ink-2) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: var(--space-2xs) !important;
  text-transform: uppercase;
}
.section-title:not(.hero-title) {
  font-family: var(--font-display) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  margin-bottom: var(--space-sm) !important;
}
.section-desc {
  font-family: var(--font-body) !important;
  font-size: var(--text-md) !important;
  color: var(--color-ink-2) !important;
  line-height: 1.8 !important;
  margin-bottom: var(--space-lg) !important;
}
.section-link {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  color: var(--color-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
}
.section-link:hover { color: var(--color-ink) !important; }
.topic-section-header {
  border-bottom: 1px solid var(--color-rule) !important;
  padding-bottom: var(--space-md) !important;
  margin-bottom: var(--space-md) !important;
}
.topic-section-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
}
.topic-section-desc {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-ink-2) !important;
}

/* ─── TL;DR (旧 light green → editorial card) ───────────────────────── */
.tldr {
  background: var(--color-paper-2) !important;
  border: 1px solid var(--color-rule) !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: 0 !important;
  padding: var(--space-md) var(--space-lg) !important;
  margin-bottom: var(--space-xl) !important;
}
.tldr-title {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--color-ink) !important;
  text-transform: uppercase !important;
  margin-bottom: var(--space-sm) !important;
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-rule);
}
.tldr ul { padding-left: var(--space-md) !important; margin: 0 !important; }
.tldr li { font-size: var(--text-sm); color: var(--color-ink); line-height: 1.85; margin-bottom: var(--space-2xs); }
.tldr li::marker { color: var(--color-accent); }

/* ─── F6 / Disclaimer (旧 yellow caution → clinical band) ───────────── */
.f6-note, .disclaimer {
  background: var(--color-paper-3) !important;
  border: 0 !important;
  border-left: 3px solid var(--color-tier-3) !important;
  border-radius: 0 !important;
  padding: var(--space-sm) var(--space-md) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-ink-2) !important;
  line-height: 1.75 !important;
  margin-bottom: var(--space-xl) !important;
}
.f6-note strong, .disclaimer strong { color: var(--color-ink) !important; }

/* ─── Misconception (旧 amber → tier-3 clinical box) ────────────────── */
.misconception {
  background: var(--color-tier-3-bg) !important;
  border: 1px solid var(--color-tier-3) !important;
  border-left: 4px solid var(--color-tier-3) !important;
  border-radius: 0 !important;
  padding: var(--space-sm) var(--space-md) !important;
  margin: var(--space-lg) 0 !important;
  max-width: var(--measure);
}
.misconception-title {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--color-tier-3) !important;
  text-transform: uppercase !important;
  margin-bottom: var(--space-2xs) !important;
}
.misconception p {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-ink) !important;
  line-height: 1.8 !important;
}

/* ─── Anti-pattern (旧 red → editorial warning box) ─────────────────── */
.antipattern {
  background: var(--color-paper-2) !important;
  border: 1px solid var(--color-rule) !important;
  border-left: 4px solid var(--color-tier-3) !important;
  border-radius: 0 !important;
  padding: var(--space-md) var(--space-lg) !important;
  margin: var(--space-md) 0 !important;
  max-width: var(--measure);
}
.antipattern h3 {
  font-family: var(--font-display) !important;
  font-size: var(--text-md) !important;
  color: var(--color-ink) !important;
  padding-left: 0 !important;
  margin: 0 0 var(--space-2xs) !important;
}
.antipattern h3::before { display: none !important; }
.antipattern p {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-ink-2) !important;
  line-height: 1.85 !important;
}

/* ─── Evidence callouts (旧 colored bars → semantic OKLCH) ──────────── */
.ev-callout {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.75 !important;
  padding: var(--space-2xs) var(--space-sm) !important;
  border-left: 3px solid var(--color-ev-high) !important;
  background: var(--color-ev-high-bg) !important;
  color: var(--color-ev-high) !important;
  border-radius: 0 !important;
  margin: var(--space-2xs) 0 var(--space-md) !important;
}
.ev-callout-med { border-left-color: var(--color-ev-med) !important; background: var(--color-ev-med-bg) !important; color: var(--color-ev-med) !important; }
.ev-callout-low { border-left-color: var(--color-ev-low) !important; background: var(--color-ev-low-bg) !important; color: var(--color-ev-low) !important; }
.ev-callout-spec { border-left-color: var(--color-ev-spec) !important; background: var(--color-ev-spec-bg) !important; color: var(--color-ev-spec) !important; }
.ev-callout a { color: inherit !important; text-decoration: underline !important; }

/* ─── Evidence labels (旧 colored chips → mono pills) ───────────────── */
.label {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 2px var(--space-2xs) !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  background: var(--color-paper) !important;
  vertical-align: middle;
  margin-right: var(--space-2xs);
  white-space: nowrap;
}
.label-high { color: var(--color-ev-high) !important; background: var(--color-ev-high-bg) !important; }
.label-med  { color: var(--color-ev-med) !important;  background: var(--color-ev-med-bg) !important; }
.label-low  { color: var(--color-ev-low) !important;  background: var(--color-ev-low-bg) !important; }
.label-spec { color: var(--color-ev-spec) !important; background: var(--color-ev-spec-bg) !important; }

/* ─── Tables (旧 box → clinical data sheet) ────────────────────────── */
article table, .table-wrap table {
  border-collapse: collapse !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  background: var(--color-paper) !important;
}
.table-wrap { border: 1px solid var(--color-rule) !important; }
article th {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: var(--color-paper-2) !important;
  color: var(--color-ink) !important;
  border-bottom: 2px solid var(--color-ink) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding: var(--space-2xs) var(--space-sm) !important;
  text-align: left;
}
article td {
  font-family: var(--font-body) !important;
  border-bottom: 1px solid var(--color-rule) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding: var(--space-2xs) var(--space-sm) !important;
  line-height: 1.7;
  vertical-align: top;
}
article tr:nth-child(even) td { background: transparent !important; }

/* ─── Lists / paragraphs (v1.4.0 M3: selector を main > p, main p に拡張して
 *   旧 main 直下の本文も editorial typography に揃える) ────────────── */
article p, main > p, main p {
  font-family: var(--font-body) !important;
  font-size: var(--text-md) !important;
  line-height: 1.95 !important;
  color: var(--color-ink) !important;
  margin-bottom: var(--space-md) !important;
}
article ul, article ol, main > ul, main > ol, main ul, main ol {
  padding-left: var(--space-md);
  line-height: 1.95;
}
article li { font-family: var(--font-body); margin-bottom: var(--space-2xs); }
article ul li::marker { color: var(--color-accent); }
article ol li::marker { color: var(--color-ink-3); font-family: var(--font-mono); font-weight: 500; }

/* ─── Code (旧 various → mono) ─────────────────────────────────────── */
article code, article kbd, article pre, article samp {
  font-family: var(--font-mono) !important;
  font-size: 0.92em !important;
  color: var(--color-ink);
}

/* ─── HR (旧 thick → hairline) ─────────────────────────────────────── */
article hr {
  border: 0 !important;
  border-top: 1px solid var(--color-rule) !important;
  margin: var(--space-2xl) 0 !important;
}

/* ─── Related articles (旧 surface → grid) ─────────────────────────── */
.related-articles {
  border-top: 2px solid var(--color-ink) !important;
  margin-top: var(--space-2xl) !important;
  padding-top: var(--space-xl) !important;
}
.related-title {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--color-ink-2) !important;
  text-transform: uppercase !important;
  margin-bottom: var(--space-md) !important;
  border: 0 !important;
}
.related-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1px !important;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}
.related-card {
  background: var(--color-paper) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: var(--space-md) !important;
  position: relative;
  transition: background var(--dur-short) var(--ease-out) !important;
}
.related-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--color-accent);
  transition: width var(--dur-medium) var(--ease-out);
}
.related-card:hover { background: var(--color-paper-2) !important; }
.related-card:hover::before { width: 3px; }
.related-label, .related-card .related-label {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  color: var(--color-ink-3) !important;
  text-transform: uppercase !important;
  margin-bottom: var(--space-2xs) !important;
}
.related-card-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-md) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  line-height: 1.4 !important;
}
.related-card:hover .related-card-title { color: var(--color-accent) !important; }

/* ─── Site footer (旧 thin border → fleuron statement) ──────────────── */
.site-footer {
  margin-top: var(--space-2xl) !important;
  background: var(--color-paper-2) !important;
  border-top: 1px solid var(--color-rule) !important;
  padding: var(--space-xl) var(--space-lg) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-ink-3) !important;
  letter-spacing: 0.04em !important;
  text-align: center;
}
.site-footer p {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ─── Layer diagram / flow diagrams (旧 mono box → keep) ────────────── */
.layer-diagram, .pdca-flow {
  font-family: var(--font-mono) !important;
  background: var(--color-paper-2) !important;
  border: 1px solid var(--color-rule) !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: 0 !important;
  padding: var(--space-md) var(--space-lg) !important;
  color: var(--color-ink) !important;
}

/* ─── Capability card variants (旧 PDCA color → uniform editorial) ──── */
.cap-card-plan, .cap-card-check, .cap-card-act, .cap-card-do {
  border-left: 0 !important;
}
.cap-card-plan .cap-num,
.cap-card-check .cap-num,
.cap-card-act .cap-num,
.cap-card-do .cap-num {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: var(--space-2xs) !important;
}
.cap-cta {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-accent) !important;
  font-weight: 700;
}

/* ─── AI banner (旧 purple gradient → editorial accent band) ────────── */
.ai-banner {
  background: var(--color-paper-2) !important;
  border: 1px solid var(--color-rule) !important;
  border-left: 3px solid var(--color-accent-warm) !important;
  border-radius: 0 !important;
  padding: var(--space-md) var(--space-lg) !important;
}
.ai-banner-num {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  color: var(--color-accent-warm) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.ai-banner-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
}
.ai-banner-desc {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-ink-2) !important;
  line-height: 1.85 !important;
}
.ai-banner-icon { display: none !important; }

/* ─── PDCA tags (旧 colored pills → uniform pill) ───────────────────── */
.pdca-cap-tag {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-ink) !important;
  background: var(--color-paper) !important;
  border: 1px solid var(--color-rule) !important;
  border-radius: var(--radius-pill) !important;
  padding: var(--space-3xs) var(--space-sm) !important;
  text-decoration: none !important;
  transition: background var(--dur-short) var(--ease-out) !important;
}
.pdca-cap-tag:hover {
  background: var(--color-ink) !important;
  color: var(--color-paper) !important;
  border-color: var(--color-ink) !important;
}

/* ─── Flow steps (case-studies tier flow) ───────────────────────────── */
.flow-section { background: var(--color-paper-2) !important; border: 1px solid var(--color-rule) !important; padding: var(--space-md) !important; }
.flow-step {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  padding: var(--space-3xs) var(--space-sm) !important;
  border: 1px solid var(--color-rule) !important;
  background: var(--color-paper) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--color-ink-2) !important;
}
.flow-step.active { background: var(--color-ink) !important; color: var(--color-paper) !important; border-color: var(--color-ink) !important; font-weight: 700; }
.flow-arrow { font-family: var(--font-mono) !important; color: var(--color-ink-3) !important; }

/* ─── Page principle (旧 warning → editorial) ───────────────────────── */
.page-principle {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  background: var(--color-paper-3) !important;
  border-left: 3px solid var(--color-ink-3) !important;
  padding: var(--space-sm) var(--space-md) !important;
  color: var(--color-ink-2) !important;
  margin-bottom: var(--space-xl) !important;
}
.page-principle strong { color: var(--color-ink) !important; }

/* ─── Checklist (旧 □ marker → keep) ────────────────────────────────── */
.checklist li::before { color: var(--color-accent) !important; }

/* ─── Card examples (patterns) ─────────────────────────────────────── */
.card-examples, .pattern-examples {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-ink-3) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.65 !important;
}
.card-examples strong, .pattern-examples strong {
  font-family: var(--font-body) !important;
  color: var(--color-ink) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 0.9em;
  margin-right: var(--space-2xs);
}

/* ─── Misconception-style boxes (legacy) ────────────────────────────── */
.warning-box, .caution-box {
  background: var(--color-paper-3) !important;
  border: 0 !important;
  border-left: 3px solid var(--color-tier-3) !important;
  padding: var(--space-sm) var(--space-md) !important;
  margin: var(--space-md) 0 !important;
}

/* ─── Generic links inside legacy articles ─────────────────────────── */
article a, .breadcrumb a, .related-card a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.05em;
}

/* ─── Mobile nav (v1.3.3: スマフォでロゴとナビが大きすぎる問題を解消) ─── */
@media (max-width: 720px) {
  .global-nav .nav-inner {
    padding: var(--space-3xs) var(--space-sm) !important;
    gap: var(--space-2xs) !important;
  }
  .global-nav .nav-logo {
    font-size: var(--text-sm) !important;
    margin-right: 0 !important;
    padding: var(--space-3xs) 0 !important;
    line-height: 1.3 !important;
  }
  .global-nav .nav-logo .mark {
    width: 16px !important;
    height: 16px !important;
  }
  .global-nav .nav-links {
    width: 100% !important;
    margin-left: 0 !important;
    gap: 0 !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  .global-nav .nav-links a {
    font-size: var(--text-xs) !important;
    padding: var(--space-3xs) var(--space-2xs) !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 380px) {
  .global-nav .nav-logo .mark {
    display: none !important;
  }
  .global-nav .nav-logo {
    font-size: var(--text-xs) !important;
  }
  .global-nav .nav-links a {
    padding: var(--space-3xs) var(--space-3xs) !important;
  }
}

/* v1.4.0 M6: モバイル touch target ≥ 44px（WCAG 2.5.5） ──────────────── */
@media (max-width: 720px) {
  .toc-card,
  .tier-link,
  .tier-card,
  .entry,
  .pdca-cap,
  .article-card,
  .course-item,
  .pattern-card,
  .capability-card,
  .related-card,
  .index-row,
  .cap-item,
  .btn-pill,
  .global-nav .nav-links a {
    min-height: 44px;
  }
}

/* v1.4.0 M1: nav scope hint ─────────────────────────────────────────── */
.nav-scope {
  display: inline-block;
  margin-left: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  vertical-align: 0.05em;
}
@media (max-width: 540px) {
  .nav-scope { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Legacy adapter end
 * ═══════════════════════════════════════════════════════════════════════════ */