/*
 * design-system.css — 習慣化アプリのデザインシステム（試作 v0.1）
 * ルールは DESIGN.md、見本は styleguide.html。
 * 使い方：<html data-theme="auto|light|dark" data-accent="beige|orange|green|blue|pink">
 * 色・余白・角丸は、必ず下のトークン（--*）を通して使う。
 */

/* ============================================================
   1. トークン（色以外）
   ============================================================ */
:root {
  /* 文字：本文は端末標準のゴシック、数字と見出しは丸ゴシック（iPhoneは ui-rounded） */
  --font-ui: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Noto Sans JP", sans-serif;

  --fs-xs: 0.75rem;   /* 12px 時刻・補足 */
  --fs-sm: 0.875rem;  /* 14px 名前・ラベル */
  --fs-md: 1rem;      /* 16px 本文・入力欄（16px未満だとiPhoneで入力時に拡大される） */
  --fs-lg: 1.1875rem; /* 19px 画面の見出し */
  --fs-xl: 1.5rem;    /* 24px */
  --fs-num: 2.25rem;  /* 36px 大きな数字（連続日数など） */
  --lh-body: 1.7;     /* 日本語は広めに */
  --lh-tight: 1.3;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* 角丸：役割ごとに変える（全部同じ角丸にしない） */
  --r-frame: 6px;    /* 写真・スタンプ（プリントのような小さな丸み） */
  --r-control: 12px; /* 入力欄・小さな部品 */
  --r-card: 16px;    /* カード */
  --r-pill: 999px;   /* ボタン・タブ・バナー */

  --tap: 2.75rem;    /* 44px タップできる部品の最小の高さ */
  --max-w: 30rem;    /* 480px アプリの幅 */
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* ============================================================
   2. テーマ（ライト／ダーク／自動）
   ============================================================ */
:root {
  color-scheme: light;
  --bg: #f6f7f8;
  --surface: #ffffff;
  --surface-2: #eef0f2;
  --line: #dfe2e6;
  --text: #1f2328;
  --text-2: #5c636b;
  --ok: #1f7a4d;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --scrim: rgba(20, 22, 24, 0.58); /* 写真の上の文字の下地 */

  /* カメラ画面：プレビューが主役なので、テーマにかかわらず暗い（ライト・ダークで同じ値） */
  --cam-bg: #0b0c0d;
  --cam-text: #f4f5f6;
  --cam-text-2: #b8bdc2;
  --cam-line: #6a7076;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121416;
    --surface: #1c1f22;
    --surface-2: #262a2e;
    --line: #33383d;
    --text: #eceff1;
    --text-2: #a7aeb5;
    --ok: #5fcf93;
    --danger: #ff8a80;
    --danger-soft: #3d2321;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121416;
  --surface: #1c1f22;
  --surface-2: #262a2e;
  --line: #33383d;
  --text: #eceff1;
  --text-2: #a7aeb5;
  --ok: #5fcf93;
  --danger: #ff8a80;
  --danger-soft: #3d2321;
}

/* ============================================================
   3. アクセント色（5色）
   fill  … ラベル付きの部品の塗り（この上には --accent-on の文字）
   on    … fill の上の文字
   edge  … fill の縁（明るい面の上で、形が見えるようにする線）
   text  … 文字・線・印として使う色（面の上で 4.5:1 以上）
   soft  … 薄い背景
   -l はライト、-d はダーク
   ============================================================ */
:root,
:root[data-accent="beige"],
.c-swatch[data-accent="beige"] {
  --a-fill-l: #e8cba6; --a-on-l: #2a2118; --a-edge-l: #c9a06b; --a-text-l: #8a5a22; --a-soft-l: #f5eadc;
  --a-fill-d: #e8cba6; --a-on-d: #2a2118; --a-edge-d: #e8cba6; --a-text-d: #e8cba6; --a-soft-d: #2e2922;
}
:root[data-accent="orange"],
.c-swatch[data-accent="orange"] {
  --a-fill-l: #f07f3c; --a-on-l: #2b1608; --a-edge-l: #d9631f; --a-text-l: #b0420c; --a-soft-l: #fce8da;
  --a-fill-d: #f07f3c; --a-on-d: #2b1608; --a-edge-d: #f07f3c; --a-text-d: #f4a06a; --a-soft-d: #36261b;
}
:root[data-accent="green"],
.c-swatch[data-accent="green"] {
  --a-fill-l: #5bb98c; --a-on-l: #0f2a1d; --a-edge-l: #3a9a6c; --a-text-l: #1f7a4d; --a-soft-l: #e0f3ea;
  --a-fill-d: #5bb98c; --a-on-d: #0f2a1d; --a-edge-d: #5bb98c; --a-text-d: #6fd1a2; --a-soft-d: #1d3128;
}
:root[data-accent="blue"],
.c-swatch[data-accent="blue"] {
  --a-fill-l: #5b9be0; --a-on-l: #0e2338; --a-edge-l: #3d7fc6; --a-text-l: #1f63b5; --a-soft-l: #e1edfa;
  --a-fill-d: #5b9be0; --a-on-d: #0e2338; --a-edge-d: #5b9be0; --a-text-d: #8dbbf0; --a-soft-d: #1c2b3d;
}
:root[data-accent="pink"],
.c-swatch[data-accent="pink"] {
  --a-fill-l: #f08aa8; --a-on-l: #3a0f1d; --a-edge-l: #d96a8c; --a-text-l: #b7325e; --a-soft-l: #fbe4eb;
  --a-fill-d: #f08aa8; --a-on-d: #3a0f1d; --a-edge-d: #f08aa8; --a-text-d: #f5a3bc; --a-soft-d: #3a2029;
}

/* 現在のテーマに合わせて、-l／-d のどちらかを --accent-* に割り当てる */
:root {
  --accent-fill: var(--a-fill-l);
  --accent-on: var(--a-on-l);
  --accent-edge: var(--a-edge-l);
  --accent-text: var(--a-text-l);
  --accent-soft: var(--a-soft-l);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-fill: var(--a-fill-d);
    --accent-on: var(--a-on-d);
    --accent-edge: var(--a-edge-d);
    --accent-text: var(--a-text-d);
    --accent-soft: var(--a-soft-d);
  }
}
:root[data-theme="dark"] {
  --accent-fill: var(--a-fill-d);
  --accent-on: var(--a-on-d);
  --accent-edge: var(--a-edge-d);
  --accent-text: var(--a-text-d);
  --accent-soft: var(--a-soft-d);
}

/* 色見本（c-swatch）は、data-accent を持つ要素の中だけ、その色を --accent-fill / --accent-edge に割り当てる（:root の値は、子に引き継がれてしまうため、ここで割り当て直す） */
.c-swatch {
  --accent-fill: var(--a-fill-l);
  --accent-edge: var(--a-edge-l);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-swatch {
    --accent-fill: var(--a-fill-d);
    --accent-edge: var(--a-edge-d);
  }
}
:root[data-theme="dark"] .c-swatch {
  --accent-fill: var(--a-fill-d);
  --accent-edge: var(--a-edge-d);
}

/* ============================================================
   4. 基本の要素
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-md) / var(--lh-body) var(--font-ui);
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-num);
  line-height: var(--lh-tight);
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0; }
a { color: var(--accent-text); }
img { max-inline-size: 100%; }

:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
}

/* ============================================================
   5. 画面の枠
   ============================================================ */
.c-app {
  position: relative;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--max-w);
  min-block-size: 100vh;
  min-block-size: 100dvh;
  margin-inline: auto;
  background: var(--bg);
}
.c-app__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}
.c-app__main { flex: 1; padding: var(--sp-2) var(--sp-4); }
.c-app__foot { padding: var(--sp-2) var(--sp-4) var(--sp-3); }

/* ============================================================
   6. 部品
   ============================================================ */

/* --- ボタン --- */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: var(--tap);
  padding-inline: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text);
  font: 700 var(--fs-md) / 1 var(--font-ui);
  text-decoration: none;
  cursor: pointer;
}
.c-button--primary {
  background: var(--accent-fill);
  border-color: var(--accent-edge);
  color: var(--accent-on);
}
.c-button--quiet {
  background: transparent;
  color: var(--text);
}
.c-button--danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.c-button--block { inline-size: 100%; }
.c-button--camera {
  min-block-size: 3.25rem;
  font-size: var(--fs-lg);
}
.c-button[disabled],
.c-button[aria-disabled="true"] {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text-2);
  cursor: default;
}

/* --- カード --- */
.c-card {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.c-card__title { margin-block-end: var(--sp-2); }
/* 取り返しのつかない操作（アカウントの削除）のカード。ほかのカードと、枠の色で分ける */
.c-card--danger { border-color: var(--danger); }

/* --- 切り替えタブ（写真／リスト／メッセージ） --- */
.c-segmented {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.c-segmented__item {
  flex: 1;
  display: grid;
  place-items: center;
  min-block-size: var(--tap);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.c-segmented__item[aria-current="page"] {
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* --- 選択肢（ラジオ・チェックボックス）：ラベル全体が、44px以上のタップ領域 --- */
.c-choices {
  display: grid;
  gap: var(--sp-2);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.c-choices__legend {
  padding: 0;
  margin-block-end: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.c-choice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--tap);
  padding-inline: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  cursor: pointer;
}
.c-choice:has(.c-choice__input:checked) {
  border-color: var(--accent-text);
  background: var(--accent-soft);
}
.c-choice__input {
  flex: none;
  inline-size: var(--sp-5);
  block-size: var(--sp-5);
  margin: 0;
  accent-color: var(--accent-text);
}
.c-choice__text { flex: 1; }

/* --- 色見本（アクセント色の選択肢に添える丸。data-accent を付けて、その色を見せる） --- */
.c-swatch {
  flex: none;
  inline-size: var(--sp-5);
  block-size: var(--sp-5);
  border: 2px solid var(--accent-edge);
  border-radius: 50%;
  background: var(--accent-fill);
}

/* --- 今日のまとめ（人数・連続日数） --- */
.c-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-control);
  background: var(--accent-soft);
}
.c-summary__item { font-size: var(--fs-sm); color: var(--text-2); }
.c-summary__num {
  margin-inline: var(--sp-1);
  color: var(--text);
  font: 700 var(--fs-num) / 1 var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* --- お知らせ（あと◯人／全員達成） --- */
.c-banner {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: center;
}
.c-banner--done {
  background: var(--accent-fill);
  color: var(--accent-on);
  font-weight: 700;
}
/* 文章が長いとき（操作の結果・説明・エラー）：丸ではなく、角丸の面で、左揃え */
.c-banner--note,
.c-banner--error {
  padding-block: var(--sp-3);
  border-radius: var(--r-control);
  text-align: start;
}
.c-banner--error {
  background: var(--danger-soft);
  color: var(--danger);
}

/* --- 入力欄 --- */
.c-field { display: grid; gap: var(--sp-1); margin-block-end: var(--sp-4); }
.c-field__label { font-size: var(--fs-sm); font-weight: 700; }
.c-field__hint { font-size: var(--fs-xs); color: var(--text-2); }
.c-field__error { font-size: var(--fs-sm); color: var(--danger); }
.c-input {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
  font: var(--fs-md) / var(--lh-tight) var(--font-ui);
}
.c-input[aria-invalid="true"] { border-color: var(--danger); }

/* --- 写真型：写真のマス --- */
.c-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.c-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-frame);
  background: var(--surface-2);
}
.c-tile__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.c-tile__label {
  position: absolute;
  inset-inline-start: var(--sp-2);
  inset-block-end: var(--sp-2);
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--scrim);
  color: #ffffff;
  font-size: var(--fs-xs);
}
.c-tile--empty {
  display: grid;
  place-content: center;
  gap: var(--sp-1);
  border: 2px dashed var(--line);
  background: transparent;
  color: var(--text-2);
  text-align: center;
}
.c-tile--empty-me {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

/* --- リスト型：1人1行 --- */
.c-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 3.5rem;
  border-block-end: 1px solid var(--line);
}
.c-row__name { flex: 1; }
.c-row__time {
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.c-row__pending { color: var(--accent-text); font-size: var(--fs-sm); }
.c-row__thumb {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--r-frame);
  object-fit: cover;
}

/* --- メッセージ型：投稿が流れる --- */
.c-chat {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
}
.c-chat__date {
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.c-msg { display: flex; gap: var(--sp-2); align-items: flex-start; }
.c-msg--mine { flex-direction: row-reverse; }
.c-msg__avatar {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.c-msg__meta { color: var(--text-2); font-size: var(--fs-xs); }
.c-msg--mine .c-msg__meta { text-align: end; }
.c-msg__photo {
  display: block;
  inline-size: 10rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-frame);
  object-fit: cover;
}
.c-msg__text {
  display: inline-block;
  margin-block-start: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
}
.c-msg__react { margin-block-start: var(--sp-1); }

/* --- 判子（今日の投稿が済んだ印）。この画面でいちばん目立たせる部品 --- */
.c-hanko {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  aspect-ratio: 1;
  border: 2px solid var(--accent-text);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-text);
  font: 700 var(--fs-sm) / 1 var(--font-num);
  transform: rotate(-8deg);
}
.c-hanko::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid currentcolor;
  border-radius: 50%;
  opacity: 0.45;
}
.c-hanko--press { animation: hanko-press 0.35s var(--ease-out); }
@keyframes hanko-press {
  from { opacity: 0; transform: rotate(-8deg) scale(1.6); }
  to { opacity: 1; transform: rotate(-8deg) scale(1); }
}
/* 写真のマスの上の判子の置き場所。基本の .c-hanko（position: relative）より後ろに書く（同じ詳細度では、あとが勝つため） */
.c-tile__stamp {
  position: absolute;
  inset-inline-end: var(--sp-2);
  inset-block-start: var(--sp-2);
}

/* --- スタンプ --- */
.c-stamps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.c-stamp {
  display: grid;
  gap: var(--sp-1);
  justify-items: center;
  text-align: center;
  font-size: var(--fs-xs);
}
.c-stamp__img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.c-stamp--locked .c-stamp__img {
  filter: grayscale(1);
  opacity: 0.3;
}
.c-stamp--locked { color: var(--text-2); }
/* 画像がまだないスタンプの仮表示（絵文字の箱。画像を置くと、同じ場所に <img class="c-stamp__img"> が出る） */
.c-stamp__ph {
  display: grid;
  place-items: center;
  border-radius: var(--r-frame);
  background: var(--surface-2);
  font-size: var(--fs-num);
  line-height: 1;
}

/* --- ガチャの結果（引いたばかりのスタンプを、大きく見せる。c-card と一緒に使う） --- */
.c-reveal {
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  text-align: center;
  animation: reveal-pop 0.5s var(--ease-out);
}
.c-reveal__lead { color: var(--text-2); font-size: var(--fs-sm); }
.c-reveal__img {
  inline-size: 60%;
  aspect-ratio: 1;
  object-fit: contain;
}
.c-reveal__name { font: 700 var(--fs-xl) / var(--lh-tight) var(--font-num); }
@keyframes reveal-pop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* --- トースト（操作の結果） --- */
.c-toast {
  position: fixed;
  inset-inline: var(--sp-4);
  inset-block-end: calc(var(--sp-7) + env(safe-area-inset-bottom));
  max-inline-size: calc(var(--max-w) - var(--sp-6));
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  font-size: var(--fs-sm);
  text-align: center;
}

/* --- カメラ画面（全画面の dialog。プレビューと、シャッター） --- */
.c-camera {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100vh;
  block-size: 100dvh;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cam-bg);
  color: var(--cam-text);
}
.c-camera[open] {
  display: flex;
  flex-direction: column;
}
.c-camera__stage {
  position: relative;
  flex: 1;
  min-block-size: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.c-camera__video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain; /* 写るもの全体が見える（保存される写真と同じ範囲） */
  background: var(--cam-bg);
}
.c-camera__video--mirror { transform: scaleX(-1); } /* 自撮りのプレビューだけ。保存する写真は反転しない */
.c-camera__notice {
  position: absolute;
  inset-inline: var(--sp-4);
  inset-block-start: max(var(--sp-4), env(safe-area-inset-top));
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
}
.c-camera__status {
  padding-inline: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--scrim);
  color: var(--cam-text);
  font-size: var(--fs-sm);
}
.c-camera__status:empty { display: none; }
.c-camera__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) max(var(--sp-4), env(safe-area-inset-bottom));
}
.c-camera__button {
  justify-self: start;
  min-block-size: var(--tap);
  min-inline-size: var(--tap);
  padding-inline: var(--sp-4);
  border: 1px solid var(--cam-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cam-text);
  font: 700 var(--fs-sm) / 1 var(--font-ui);
  cursor: pointer;
}
.c-camera__button--end { justify-self: end; }
.c-camera__shutter {
  inline-size: calc(var(--tap) * 1.75);
  block-size: calc(var(--tap) * 1.75);
  padding: 0;
  border: var(--sp-1) solid var(--cam-text);
  border-radius: 50%;
  background: var(--cam-text);
  box-shadow: inset 0 0 0 var(--sp-1) var(--cam-bg); /* 白い丸のまわりの、黒い輪 */
  cursor: pointer;
}
.c-camera__shutter[disabled] {
  border-color: var(--cam-text-2);
  background: var(--cam-text-2);
  cursor: default;
}
.c-camera__button:focus-visible,
.c-camera__shutter:focus-visible { outline-color: var(--cam-text); }

/* --- ホーム画面に追加の案内（iPhone の Safari だけ。hidden を外して出す） --- */
.c-install__steps {
  margin-block: var(--sp-2);
  padding-inline-start: var(--sp-5);
}
.c-install__note {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.c-install__actions {
  display: flex;
  justify-content: flex-end;
  margin-block-start: var(--sp-2);
}

/* --- 下のメニュー --- */
.c-nav {
  display: flex;
  justify-content: space-around;
  padding: var(--sp-2) 0 max(var(--sp-3), env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--line);
  background: var(--surface);
}
.c-nav__item {
  display: grid;
  place-items: center;
  min-inline-size: var(--tap);
  min-block-size: var(--tap);
  color: var(--text-2);
  font-size: var(--fs-xs);
  text-decoration: none;
}
.c-nav__item[aria-current="page"] {
  color: var(--accent-text);
  font-weight: 700;
}

/* ============================================================
   7. ユーティリティ（最小限）
   ============================================================ */
.u-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.u-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.u-muted { color: var(--text-2); }
.u-stack > * + * { margin-block-start: var(--sp-4); }
/* 先頭の hidden の要素（アプリ内ブラウザの案内）の次には、余白を足さない。案内を出す（hidden を外す）と、上の規則で空く。2番目以降の hidden の次は、空いたまま */
.u-stack > [hidden]:first-child + * { margin-block-start: 0; }

/* ============================================================
   8. 動きを減らす設定の尊重
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .c-hanko--press { animation: none; }
  .c-reveal { animation: none; }
}