:root {
    /* Brand colors (locked) */
    --y500:#FFDA00;
    --g900:#000000;
    --w:#FFFFFF;

    /* Gray (audit draft, not finalized) */
    --g50:#FAFAFA; --g100:#F5F5F5; --g200:#E5E5E5; --g300:#D4D4D4;
    --g400:#A3A3A3; --g500:#737373; --g600:#525252;
    --g700:#404040; --g800:#262626;

    /* Adopted typography families */
    --ds-font-cormorant: "Cormorant Garamond", "Times New Roman", serif;
    --ds-font-zen-mincho: "Zen Old Mincho", "Yu Mincho", "YuMincho", serif;
    --ds-font-noto-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    font-family: var(--ds-font-noto-jp);
    color: var(--g900);
    background: var(--w);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: oldstyle-nums;
  }
  /* Cormorant 数字スタイル切替ユーティリティ */
  .num-lining { font-variant-numeric: lining-nums; }
  .num-tabular { font-variant-numeric: tabular-nums; }
  .num-lining.num-tabular,
  .num-tabular.num-lining { font-variant-numeric: lining-nums tabular-nums; }

  /* ===== Page chrome ===== */
  .page {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 220px;
    min-height: 100vh;
  }
  @media (max-width: 1180px) {
    .page { grid-template-columns: 240px minmax(0, 1fr); }
    .toc { display: none; }
  }
  .page--no-toc { grid-template-columns: 240px minmax(0, 1fr); }
  .sidebar {
    background: var(--g50);
    border-right: 1px solid var(--g200);
    padding: 56px 24px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
  .brand-mark {
    font-family: var(--ds-font-cormorant);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
  }
  .brand-mark-sub {
    font-family: var(--ds-font-cormorant);
    font-weight: 400;
    font-style: italic;
    font-size: 13px;
    color: var(--g600);
    margin: 0 0 40px;
    letter-spacing: -0.01em;
  }
  .brand-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin: 0 0 12px;
  }
  .brand-logo {
    display: block;
    width: 132px;
    height: auto;
  }
  .brand-tagline {
    display: block;
    width: 168px;
    height: auto;
    margin-top: 12px;
  }
  .nav-h {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--g500);
    margin: 24px 0 8px;
  }
  .nav-ul { list-style: none; padding: 0; margin: 0; }
  .nav-ul li { position: relative; padding: 4px 0; }
  .nav-ul a {
    display: block;
    color: var(--g700);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.6;
    padding-left: 14px;
  }
  .nav-ul a:hover { color: var(--g900); }
  .nav-ul .active > a {
    color: var(--g900);
  }
  .nav-ul .active > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--g900);
    transform: translateY(-50%);
  }
  .nav-ul .status {
    display: inline-block;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 9px;
    padding: 1px 5px;
    margin-left: 6px;
    border-radius: 2px;
    vertical-align: middle;
    letter-spacing: 0.06em;
  }
  .status.done { background: var(--g900); color: var(--y500); }
  .status.partial { background: var(--y500); color: var(--g900); }
  .status.todo { background: transparent; color: var(--g500); border: 1px solid var(--g300); }

  .main { padding: 56px 64px 96px; max-width: 1100px; min-width: 0; }

  /* ===== Right TOC ===== */
  .toc {
    padding: 56px 24px 96px 28px;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
  }
  .toc-h {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--g500);
    margin: 0 0 12px;
  }
  .toc-ul { list-style: none; padding: 0; margin: 0; }
  .toc-ul li { padding: 0; margin: 0; }
  .toc-ul a {
    display: block;
    color: var(--g600);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.45;
    padding: 6px 10px;
  }
  .toc-ul a:hover { color: var(--g900); }
  .toc-ul a.active {
    color: var(--g900);
    background: var(--g100);
  }
  .toc-empty {
    color: var(--g400);
    font-size: 11px;
    line-height: 1.6;
    padding: 6px 10px;
    margin: 0;
  }

  /* ===== Headings ===== */
  .doc-h1 {
    font-family: var(--ds-font-cormorant);
    font-weight: 400;
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 8px;
  }
  .doc-h1-sub {
    font-family: var(--ds-font-cormorant);
    font-weight: 400;
    font-style: italic;
    font-size: 24px;
    color: var(--g600);
    letter-spacing: -0.02em;
    margin: 0 0 56px;
  }
  .h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--g500);
    margin: 64px 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--g200);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .h2-status {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 2px;
    letter-spacing: 0.08em;
  }
  .h2-status.done { background: var(--g900); color: var(--y500); }
  .h2-status.partial { background: var(--y500); color: var(--g900); }
  .h2-status.todo { background: transparent; color: var(--g500); border: 1px solid var(--g300); }

  .h3 {
    font-family: var(--ds-font-zen-mincho);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.02em;
    margin: 32px 0 16px;
  }

  .lead { color: var(--g600); font-size: 14px; line-height: 1.8; max-width: 720px; margin: 0 0 24px; }

  .overview {
    color: var(--g700);
    font-size: 15px;
    line-height: 1.9;
    max-width: 720px;
    margin: 0 0 48px;
    padding: 24px 28px;
    background: var(--g50);
  }
  .overview p { margin: 0; }

  /* ===== Color swatches ===== */
  .color-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }
  .swatch {
    border: 1px solid var(--g200);
    overflow: hidden;
  }
  .swatch-color {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    padding: 16px;
  }
  .swatch-name-on {
    font-size: 12px;
    font-family: ui-monospace, "SF Mono", monospace;
  }
  .swatch-meta {
    padding: 16px;
    background: var(--w);
    font-size: 12px;
    border-top: 1px solid var(--g200);
  }
  .swatch-meta .k { color: var(--g500); font-family: ui-monospace, "SF Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
  .swatch-meta .v { font-family: ui-monospace, "SF Mono", monospace; font-size: 12px; }
  .swatch-meta .row { display: flex; justify-content: space-between; padding: 3px 0; }
  .swatch-meta .lock { display: inline-block; margin-top: 6px; padding: 2px 6px; background: var(--g900); color: var(--y500); font-family: ui-monospace, "SF Mono", monospace; font-size: 10px; letter-spacing: 0.06em; }

  /* ===== Typography table ===== */
  .type-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 13px;
  }
  /* 4列テーブル (Token / Value / Preview / 用途) の列幅統一 */
  .type-table--4col { table-layout: fixed; }
  .type-table--4col th:nth-child(1),
  .type-table--4col td:nth-child(1) { width: 200px; }
  .type-table--4col th:nth-child(2),
  .type-table--4col td:nth-child(2) { width: 120px; }
  .type-table--4col th:nth-child(3),
  .type-table--4col td:nth-child(3) { width: 108px; }

  /* 5列テーブル (Token / 参照 / HEX / Preview / 用途) */
  .type-table--5col { table-layout: fixed; }
  .type-table--5col th:nth-child(1),
  .type-table--5col td:nth-child(1) { width: 200px; }
  .type-table--5col th:nth-child(2),
  .type-table--5col td:nth-child(2) { width: 110px; }
  .type-table--5col th:nth-child(3),
  .type-table--5col td:nth-child(3) { width: 110px; }
  .type-table--5col th:nth-child(4),
  .type-table--5col td:nth-child(4) { width: 88px; }

  /* 正方形の色プレビュー（テーブル内インライン用） */
  .sw-square { width: 56px; height: 56px; border: 1px solid var(--g200); display: inline-block; vertical-align: middle; position: relative; overflow: hidden; }
  .sw-square--noborder { border: 0; }

  /* WCAG コントラスト検証テーブル */
  .wcag-table { table-layout: fixed; }
  .wcag-table th:nth-child(1), .wcag-table td:nth-child(1) { width: 220px; }
  .wcag-table th:nth-child(2), .wcag-table td:nth-child(2) { width: 84px; }
  .wcag-table th:nth-child(3), .wcag-table td:nth-child(3),
  .wcag-table th:nth-child(4), .wcag-table td:nth-child(4),
  .wcag-table th:nth-child(5), .wcag-table td:nth-child(5) { width: 64px; text-align: center; }
  .wcag-prev {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    min-height: 60px;
    justify-content: center;
  }
  .wcag-prev-body {
    font-family: var(--ds-font-noto-jp);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }
  .wcag-prev-large {
    font-family: var(--ds-font-cormorant);
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .wcag-prev-badge {
    display: inline-block;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    background: #C00;
    color: #FFF;
    border-radius: 2px;
    text-transform: uppercase;
  }
  .wcag-prev-badge--info { background: var(--g700); color: var(--w); text-transform: none; letter-spacing: 0.04em; }

  /* 半透明 swatch 用：白背景に色を重ねる */
  .swatch-mini { width: 56px; height: 56px; border: 1px solid var(--g200); display: inline-block; vertical-align: middle; position: relative; overflow: hidden; }
  .swatch-mini--checkered::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(45deg, #ccc 25%, transparent 25%),
      linear-gradient(-45deg, #ccc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ccc 75%),
      linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  }
  .swatch-mini > .overlay { position: absolute; inset: 0; }
  .type-table th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--g500);
    padding: 12px 16px;
    background: var(--g50);
    border-bottom: 1px solid var(--g200);
    font-weight: 600;
  }
  .type-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--g200);
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .type-table .tok {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11px;
    color: var(--g800);
    background: var(--g50);
    padding: 2px 6px;
    border-radius: 2px;
  }
  .type-table .mono {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11px;
    color: var(--g700);
  }

  /* ===== Specimen ===== */
  .specimen {
    border: 1px solid var(--g200);
    padding: 32px 40px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    align-items: start;
  }
  .specimen-side {
    border-right: 1px solid var(--g200);
    padding-right: 24px;
  }
  .specimen-token {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10px;
    background: var(--g900);
    color: var(--y500);
    padding: 3px 7px;
    display: inline-block;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
  }
  .specimen-spec {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10px;
    color: var(--g500);
    line-height: 1.7;
    margin: 0;
  }
  .specimen-spec .k { color: var(--g700); font-weight: 600; }

  /* Adopted typography classes (must match tokens.json) */
  .t-brand-logo {
    font-family: var(--ds-font-cormorant); font-weight: 400; font-style: normal;
    font-size: 72px; line-height: 1.05; letter-spacing: -0.03em; margin: 0;
  }
  .t-display-h1 {
    font-family: var(--ds-font-cormorant); font-weight: 400; font-style: normal;
    font-size: 44px; line-height: 1.05; letter-spacing: -0.03em; margin: 0;
  }
  .t-display-h2 {
    font-family: var(--ds-font-cormorant); font-weight: 400; font-style: italic;
    font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; margin: 0;
  }
  .t-heading {
    font-family: var(--ds-font-zen-mincho); font-weight: 700;
    font-size: 28px; line-height: 1.5; letter-spacing: 0.02em; margin: 0;
  }
  .t-heading-h3 {
    font-family: var(--ds-font-zen-mincho); font-weight: 700;
    font-size: 22px; line-height: 1.5; letter-spacing: 0.02em; margin: 0;
  }
  .t-body-default {
    font-family: var(--ds-font-noto-jp); font-weight: 400;
    font-size: 15px; line-height: 1.9; letter-spacing: 0.04em; margin: 0;
  }
  .t-body-editorial {
    font-family: var(--ds-font-zen-mincho); font-weight: 400;
    font-size: 15px; line-height: 1.9; letter-spacing: 0.04em; margin: 0;
  }
  .t-caption {
    font-family: var(--ds-font-noto-jp); font-weight: 400;
    font-size: 12px; line-height: 1.5; letter-spacing: 0.04em; margin: 0; color: var(--g500);
  }

  /* ===== Font Type Specimen ===== */
  .type-specimen {
    border: 1px solid var(--g200);
    padding: 40px 48px;
    margin-bottom: 16px;
    background: var(--w);
  }
  .type-specimen-h {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--g200);
    margin-bottom: 32px;
  }
  .type-specimen-name {
    font-family: var(--ds-font-cormorant);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
  }
  .type-specimen-meta {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11px;
    color: var(--g500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 4px;
  }
  .type-specimen-role {
    font-family: var(--ds-font-noto-jp);
    font-size: 13px;
    color: var(--g700);
    margin: 0;
    line-height: 1.6;
  }
  .type-specimen-token {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10px;
    background: var(--g900);
    color: var(--y500);
    padding: 3px 7px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    align-self: start;
  }
  .type-specimen-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .type-specimen-gfonts {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g700);
    text-decoration: none;
    border-bottom: 1px solid var(--g300);
    padding-bottom: 1px;
    white-space: nowrap;
  }
  .type-specimen-gfonts:hover { color: var(--g900); border-bottom-color: var(--g900); }
  .type-specimen-body {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 48px;
    align-items: start;
  }
  .ts-glyph {
    border-right: 1px solid var(--g200);
    padding-right: 32px;
    text-align: center;
    line-height: 0.85;
    color: var(--g900);
    font-size: 240px;
  }
  .ts-glyph-meta {
    margin-top: 16px;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10px;
    color: var(--g500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
  }
  .ts-right { display: flex; flex-direction: column; gap: 28px; }
  .ts-block-label {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10px;
    color: var(--g500);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 10px;
  }
  .ts-charset-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dotted var(--g200);
  }
  .ts-charset-row:last-child { border-bottom: 0; }
  .ts-charset-key {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10px;
    color: var(--g500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ts-charset-val {
    color: var(--g900);
    line-height: 1.4;
    word-break: keep-all;
  }
  .ts-weight-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 24px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dotted var(--g200);
  }
  .ts-weight-row:last-child { border-bottom: 0; }
  .ts-weight-meta {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10px;
    color: var(--g500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
  }
  .ts-weight-meta strong { display: block; color: var(--g700); font-weight: 600; font-size: 11px; }
  .ts-weight-sample { color: var(--g900); line-height: 1.2; }
  .ts-size-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px dotted var(--g200);
  }
  .ts-size-row:last-child { border-bottom: 0; }
  .ts-size-meta {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 10px;
    color: var(--g500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: right;
  }
  .ts-size-sample { color: var(--g900); line-height: 1.1; }

  /* ===== Pending sections ===== */
  .pending {
    border: 1px dashed var(--g300);
    padding: 24px 32px;
    background: var(--g50);
    margin-bottom: 16px;
  }
  .pending-h { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
  .pending-p { font-size: 13px; color: var(--g600); line-height: 1.7; margin: 0; }
  .pending-link {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11px;
    color: var(--g700);
  }

  /* ===== Composed mini preview ===== */
  .composed {
    border: 1px solid var(--g200);
    padding: 64px 56px;
    margin-top: 16px;
  }
  .composed .c-logo { margin-bottom: 56px; }
  .composed .c-h1en { margin-bottom: 6px; }
  .composed .c-h2en { margin-bottom: 40px; color: var(--g600); }
  .composed .c-heading { margin-bottom: 24px; }
  .composed .c-body { max-width: 640px; margin-bottom: 24px; color: var(--g800); }
  .composed .c-editorial-label {
    font-family: ui-monospace, "SF Mono", monospace; font-size: 10px;
    color: var(--g500); letter-spacing: 0.12em; text-transform: uppercase;
    margin: 48px 0 16px;
  }
  .composed .c-editorial { max-width: 640px; color: var(--g800); }

  .footer { color: var(--g500); font-size: 11px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--g200); font-family: ui-monospace, "SF Mono", monospace; }

  /* Color セクション: プレビュー要素だけ縮小（文字サイズは維持） */
  .section-quarter .swatch-color { aspect-ratio: 4 / 3; }
  .section-quarter .sw-square { width: 28px; height: 28px; }
  .section-quarter .swatch-mini { width: 28px; height: 28px; }