/* ---- foundation.css ---- */
/* ============================================================
   foundation.css — web-foundation.md の箱システム（構造のみ）
   色・フォント・余白密度は themes/*.css が :root を上書きする。
   ロック済み。ブロック側からこのファイルを変更しない。
   ============================================================ */
:root {
  --color-border: color-mix(in srgb, var(--color-text-sub) 25%, var(--color-bg));

  --fs-hero:    clamp(32px, 5.47vw, 56px);
  --fs-h1:      clamp(28px, 5.47vw, 56px);
  --fs-h2:      clamp(20px, 3.91vw, 40px);
  --fs-h3:      clamp(16px, 3.13vw, 32px);
  --fs-body:    clamp(14px, 1.76vw, 18px);
  --fs-small:   clamp(13px, 1.56vw, 16px);
  --fs-caption: clamp(12px, 1.37vw, 14px);

  --sp-inner:   clamp(12px, 1.56vw, 16px);
  --max-width:  1024px;

  --radius-sm: clamp(2px, 0.39vw, 4px);
  --radius-md: clamp(4px, 0.78vw, 8px);
  --radius-lg: clamp(8px, 1.56vw, 16px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }

body {
  font-size: var(--fs-body);
  font-family: var(--font-ja), var(--font-body), sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h1, h2, h3, .section__title, .hero__title {
  font-family: var(--font-heading), var(--font-ja), sans-serif;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* === 箱システム === */
.section { width: 100%; padding: var(--sp-section) 0; overflow: hidden; }
.section--alt { background: var(--color-surface); }
.section--inverse { background: var(--color-text); color: var(--color-bg); }
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--container-pad); }

.section__header { text-align: center; margin-bottom: var(--sp-block); }
.section__title { font-size: var(--fs-h2); }
.section__lead { font-size: var(--fs-body); color: var(--color-text-sub); margin-top: var(--sp-inner); }
.section--inverse .section__lead { color: color-mix(in srgb, var(--color-bg) 70%, transparent); }
.eyebrow {
  display: inline-block; font-size: var(--fs-caption); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--sp-inner);
}
.section--inverse .eyebrow { color: color-mix(in srgb, var(--color-bg) 60%, transparent); }

/* === レイアウトプリミティブ === */
.grid--2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-gap); }
.grid--3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-gap); }
.grid--4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-gap); }
.grid--auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-gap); }

.flex-row { display: flex; gap: var(--sp-gap); align-items: center; }
.flex-row--reverse { display: flex; flex-direction: row-reverse; gap: var(--sp-gap); align-items: center; }
.flex-row > *, .flex-row--reverse > * { min-width: 0; }
.col-60 { flex: 0 0 60%; } .col-50 { flex: 0 0 50%; } .col-40 { flex: 0 0 40%; }
.col-grow { flex: 1 1 0%; min-width: 0; }

.zone { overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-gap); justify-content: flex-start; }
.align--top { justify-content: flex-start; } .align--center { justify-content: center; } .align--spread { justify-content: space-between; }

/* === 共通部品 === */
.btn {
  display: inline-block; padding: calc(var(--sp-inner) * 0.9) calc(var(--sp-inner) * 2);
  background: var(--color-accent); color: var(--btn-fg, var(--color-bg)); text-decoration: none;
  border-radius: var(--radius-sm); font-size: var(--fs-small); letter-spacing: 0.04em;
  border: 1px solid var(--color-accent); transition: opacity .2s ease; line-height: 1.5;
}
.btn:hover { opacity: .85; }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--color-text); opacity: 1; }
.section--inverse .btn { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); }
.section--inverse .btn--ghost { background: transparent; color: var(--color-bg); border-color: color-mix(in srgb, var(--color-bg) 40%, transparent); }
.btn-group { display: flex; gap: var(--sp-inner); flex-wrap: wrap; }

.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: calc(var(--sp-inner) * 2);
  display: flex; flex-direction: column; gap: var(--sp-inner);
}
.card__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.thumb  { aspect-ratio: 3 / 2; } .avatar { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; }

/* === レスポンシブ === */
@media (max-width: 1024px) {
  .grid--3col, .grid--4col { grid-template-columns: repeat(2, 1fr); }
  .grid--2col { grid-template-columns: 1fr; }
  .flex-row, .flex-row--reverse { flex-direction: column; }
  .col-60, .col-50, .col-40 { flex: none; width: 100%; }
}
@media (max-width: 767px) {
  .grid--3col, .grid--4col, .grid--auto { grid-template-columns: 1fr; }
  .section__header { text-align: left; }
  .btn { width: 100%; text-align: center; }
}
.hide-mobile { display: block; } .hide-desktop { display: none; }
@media (max-width: 767px) { .hide-mobile { display: none !important; } .hide-desktop { display: block !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---- themes/kinari.css ---- */
/* kinari — 生成りと明朝。相続・終活・地域の窓口・士業の「世話人×賢者」向け
   出どころ: 企業デザイン辞書/終活・葬祭/循環葬 RETURN TO NATURE（生成り×深緑×明朝）＋名鑑 02_色彩（法務・公共は紺/深緑・彩度を上げない・色数3以下）
   初出: 実家相続情報箱（2026-09-22） */

:root {
  --color-bg:       #F4F1EA;   /* 生成り */
  --color-surface:  #FFFDF9;   /* 紙 */
  --color-text:     #2A2A2A;   /* 墨（硬い黒を使わない） */
  --color-text-sub: #6B6A66;
  --color-accent:   #1F4D3A;   /* 深緑（主色・面と見出しの差し） */
  --color-accent-2: #B67628;   /* 土の茶（行動の記号だけ。面積2%） */
  --color-line:     #D9D4C8;   /* 罫線（帳面） */
  --font-heading: 'Shippori Mincho', serif;
  --font-body:    'Zen Kaku Gothic New', sans-serif;
  --font-ja:      'Zen Kaku Gothic New', sans-serif;
  --sp-section:    clamp(64px, 12.5vw, 128px);
  --sp-block:      clamp(32px, 6.25vw, 64px);
  --sp-gap:        clamp(16px, 3.13vw, 32px);
  --container-pad: clamp(20px, 3.91vw, 40px);
  --radius: 6px;                /* 世話人=柔らかいが、道具なので大きくしない */
  --fs-body: 1.125rem;          /* 本文18px（40〜60代・タップ48px以上） */
}
html { font-size: 100%; }
body { font-size: var(--fs-body); line-height: 1.85; }
h1, h2, h3, .section__title, .hero__title { font-family: var(--font-heading); font-weight: 600; letter-spacing: .06em; line-height: 1.5; }
/* ジャンプ率 1.6〜1.8（士業の帯） */
.hero__title { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }
h2, .section__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.btn, button { min-block-size: 56px; }

/* ---- ui/tokens.css ---- */
/* ============================================================
   ui/tokens.css — 部品層のトークン（アプリ密度）
   themes/*.css の --color-* / --font-* を元に、部品用の派生値を作る。
   マーケ用の clamp スケール（foundation）とは別に、コントロールは固定px。
   ============================================================ */
:root {
  /* 文字 */
  --ui-font: var(--font-ja), var(--font-body), system-ui, sans-serif;
  --ui-fs-xs: 11px; --ui-fs-sm: 12.5px; --ui-fs-md: 14px; --ui-fs-lg: 16px;
  --ui-lh: 1.45;

  /* 色（意味） */
  --ui-primary: var(--color-accent);
  --ui-on-primary: #fff;
  --ui-bg: var(--color-bg);
  --ui-surface: var(--color-surface);
  --ui-surface-2: color-mix(in srgb, var(--color-text) 4%, var(--color-surface));
  --ui-text: var(--color-text);
  --ui-text-sub: var(--color-text-sub);
  --ui-text-muted: color-mix(in srgb, var(--color-text-sub) 70%, var(--color-bg));
  --ui-border: color-mix(in srgb, var(--color-text) 12%, var(--color-bg));
  --ui-border-strong: color-mix(in srgb, var(--color-text) 24%, var(--color-bg));
  --ui-hover: color-mix(in srgb, var(--color-text) 5%, transparent);
  --ui-active: color-mix(in srgb, var(--color-text) 9%, transparent);
  --ui-success: #1E8E5A; --ui-warning: #B7791F; --ui-danger: #C53030; --ui-info: #2B6CB0;
  --ui-ring: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 28%, transparent);

  /* 寸法 */
  --ui-h-sm: 30px; --ui-h-md: 36px; --ui-h-lg: 42px;
  --ui-px-sm: 10px; --ui-px-md: 14px; --ui-px-lg: 18px;
  --ui-r-sm: 6px; --ui-r-md: 8px; --ui-r-lg: 12px; --ui-r-pill: 999px;
  --ui-gap: 8px;

  /* 影（1段か無し。Apple の流儀） */
  --ui-shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --ui-shadow-2: 0 6px 20px rgba(0,0,0,.10);
  --ui-shadow-3: 3px 5px 30px rgba(0,0,0,.18);

  /* 動き */
  --ui-ease: cubic-bezier(.2,.8,.2,1);
  --ui-t-fast: 120ms; --ui-t-base: 180ms;
}
.ui { font-family: var(--ui-font); font-size: var(--ui-fs-md); line-height: var(--ui-lh); color: var(--ui-text); }

/* ---- ui/button.css ---- */
/* ui/button.css — Button / IconButton
   .btn（foundation の定義を上書き）+ variant + size + state
   物差し: Apple（8px radius・単一アクセント・押下で scale）、emil（:active 必須・transition は個別指定） */
.btn {
  --_bg: var(--ui-primary); --_fg: var(--ui-on-primary); --_bd: var(--ui-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--ui-h-md); padding: 0 var(--ui-px-md); width: auto;
  font: 500 var(--ui-fs-md)/1 var(--ui-font); letter-spacing: 0; white-space: nowrap;
  color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--ui-r-md);
  cursor: pointer; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ui-t-fast) var(--ui-ease), border-color var(--ui-t-fast) var(--ui-ease),
              transform var(--ui-t-fast) var(--ui-ease), box-shadow var(--ui-t-fast) var(--ui-ease), opacity var(--ui-t-fast);
}
.btn:hover { opacity: 1; --_bg: color-mix(in srgb, var(--ui-primary) 88%, #000); --_bd: var(--_bg); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* variants */
.btn--secondary { --_bg: var(--ui-surface); --_fg: var(--ui-text); --_bd: var(--ui-border-strong); box-shadow: var(--ui-shadow-1); }
.btn--secondary:hover { --_bg: var(--ui-surface-2); --_bd: var(--ui-border-strong); }
.btn--ghost { --_bg: transparent; --_fg: var(--ui-text); --_bd: transparent; }
.btn--ghost:hover { --_bg: var(--ui-hover); --_bd: transparent; }
.btn--danger { --_bg: var(--ui-danger); --_fg: #fff; --_bd: var(--ui-danger); }
.btn--danger:hover { --_bg: color-mix(in srgb, var(--ui-danger) 88%, #000); --_bd: var(--_bg); }
.btn--link { --_bg: transparent; --_fg: var(--ui-primary); --_bd: transparent; padding: 0; height: auto; }
.btn--link:hover { --_bg: transparent; text-decoration: underline; text-underline-offset: .25em; }

/* sizes */
.btn--sm { height: var(--ui-h-sm); padding: 0 var(--ui-px-sm); font-size: var(--ui-fs-sm); border-radius: var(--ui-r-sm); }
.btn--lg { height: var(--ui-h-lg); padding: 0 var(--ui-px-lg); font-size: var(--ui-fs-lg); border-radius: var(--ui-r-lg); }
.btn--pill { border-radius: var(--ui-r-pill); }
.btn--block { width: 100%; }

/* icon button（正方形。aria-label 必須） */
.btn--icon { width: var(--ui-h-md); padding: 0; }
.btn--icon.btn--sm { width: var(--ui-h-sm); } .btn--icon.btn--lg { width: var(--ui-h-lg); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* loading */
.btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--_fg) 30%, transparent); border-top-color: var(--_fg);
  animation: ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* group */
.btn-group { display: inline-flex; gap: var(--ui-gap); flex-wrap: wrap; align-items: center; }
.btn-group--joined { gap: 0; }
.btn-group--joined .btn { border-radius: 0; margin-left: -1px; }
.btn-group--joined .btn:first-child { border-radius: var(--ui-r-md) 0 0 var(--ui-r-md); margin-left: 0; }
.btn-group--joined .btn:last-child { border-radius: 0 var(--ui-r-md) var(--ui-r-md) 0; }

@media (max-width: 767px) { .btn { width: auto; } }

/* ---- ui/input.css ---- */
/* ui/input.css — Field / Input / Textarea / Select / SearchInput
   構造: .field > .field__label + .input(.select/.textarea) + .field__help(.field__error)
   物差し: Apple search（11px radius・太めの薄枠）、フォーカスは ring で統一 */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: var(--ui-fs-sm); font-weight: 500; color: var(--ui-text); display: flex; gap: 6px; align-items: baseline; }
.field__label .req { color: var(--ui-danger); font-size: var(--ui-fs-xs); }
.field__label .opt { color: var(--ui-text-muted); font-weight: 400; font-size: var(--ui-fs-xs); }
.field__help { font-size: var(--ui-fs-xs); color: var(--ui-text-sub); }
.field__error { font-size: var(--ui-fs-xs); color: var(--ui-danger); display: none; }
.field.is-invalid .field__error { display: block; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--ui-danger); }
.field.is-invalid .input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 25%, transparent); }

.input, .select, .textarea {
  width: 100%; height: var(--ui-h-md); padding: 0 12px;
  font: 400 var(--ui-fs-md)/1.4 var(--ui-font); color: var(--ui-text);
  background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r-md);
  transition: border-color var(--ui-t-fast) var(--ui-ease), box-shadow var(--ui-t-fast) var(--ui-ease), background-color var(--ui-t-fast);
  appearance: none; -webkit-appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--ui-text-muted); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--ui-text) 40%, var(--ui-bg)); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--ui-primary); box-shadow: var(--ui-ring); }
.input[disabled], .select[disabled], .textarea[disabled] { background: var(--ui-surface-2); color: var(--ui-text-muted); cursor: not-allowed; }
.input[readonly] { background: var(--ui-surface-2); }
.input--sm { height: var(--ui-h-sm); font-size: var(--ui-fs-sm); padding: 0 10px; border-radius: var(--ui-r-sm); }
.input--lg { height: var(--ui-h-lg); font-size: var(--ui-fs-lg); padding: 0 14px; }

.textarea { height: auto; min-height: calc(var(--ui-h-md) * 2.6); padding: 9px 12px; resize: vertical; }

.select {
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* 装飾つき入力（先頭アイコン・末尾ボタン） */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .input { padding-left: 36px; }
.input-wrap__icon { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--ui-text-muted); pointer-events: none; }
.input-wrap__icon svg { width: 100%; height: 100%; }
.input-wrap--trailing > .input { padding-left: 12px; padding-right: 36px; }
.input-wrap--trailing .input-wrap__icon { left: auto; right: 11px; }
.input--search { border-radius: var(--ui-r-pill); background: var(--ui-surface-2); border-color: transparent; }
.input--search:focus-visible { background: var(--ui-surface); }

/* 横並びフォーム行 */
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .form-row, .form-row--3 { grid-template-columns: 1fr; } }
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-actions { display: flex; gap: var(--ui-gap); justify-content: flex-end; padding-top: 8px; }

/* ---- ui/choice.css ---- */
/* ui/choice.css — Checkbox / Radio / Switch
   ネイティブ input を appearance:none で描き直す。状態は :checked / :disabled / :focus-visible */
.choice { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--ui-fs-md); line-height: 1.4; }
.choice__text { display: flex; flex-direction: column; gap: 2px; }
.choice__sub { font-size: var(--ui-fs-xs); color: var(--ui-text-sub); }
.choice:has(input:disabled) { cursor: not-allowed; color: var(--ui-text-muted); }

.checkbox, .radio {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; margin-top: .15em;
  width: 18px; height: 18px; background: var(--ui-surface); border: 1.5px solid var(--ui-border-strong);
  border-radius: 5px; display: grid; place-content: center; cursor: inherit;
  transition: background-color var(--ui-t-fast) var(--ui-ease), border-color var(--ui-t-fast) var(--ui-ease), box-shadow var(--ui-t-fast);
}
.radio { border-radius: 50%; }
.checkbox:hover, .radio:hover { border-color: color-mix(in srgb, var(--ui-text) 45%, var(--ui-bg)); }
.checkbox:focus-visible, .radio:focus-visible, .switch:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.checkbox:checked, .radio:checked { background: var(--ui-primary); border-color: var(--ui-primary); }
.checkbox::before {
  content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--ui-t-fast) var(--ui-ease);
  background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.checkbox:checked::before { transform: scale(1); }
.checkbox:indeterminate { background: var(--ui-primary); border-color: var(--ui-primary); }
.checkbox:indeterminate::before { transform: scale(1); clip-path: none; height: 2px; width: 10px; border-radius: 1px; }
.radio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--ui-t-fast) var(--ui-ease); }
.radio:checked::before { transform: scale(1); }
.checkbox:disabled, .radio:disabled { background: var(--ui-surface-2); border-color: var(--ui-border); }
.checkbox:disabled:checked, .radio:disabled:checked { background: var(--ui-border-strong); border-color: var(--ui-border-strong); }

/* Switch（iOS の比率 51×31 を 40×24 に縮めた形） */
.switch {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; position: relative; cursor: inherit;
  width: 40px; height: 24px; border-radius: 999px; background: var(--ui-border-strong); border: none;
  transition: background-color var(--ui-t-base) var(--ui-ease);
}
.switch::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--ui-t-base) var(--ui-ease);
}
.switch:checked { background: var(--ui-success); }
.switch:checked::before { transform: translateX(16px); }
.switch:disabled { opacity: .5; }
.switch--primary:checked { background: var(--ui-primary); }
.choice--switch { align-items: center; }

/* 縦積み・横並び */
.choice-group { display: flex; flex-direction: column; gap: 10px; }
.choice-group--inline { flex-direction: row; flex-wrap: wrap; gap: 16px; }

/* ---- ui/badge.css ---- */
/* ui/badge.css — Badge / Chip / Avatar / Tag
   物差し: Pinterest（暖色の薄いウォッシュ地・16px radius）、Linear（ドット＋テキストの status） */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  font: 500 var(--ui-fs-xs)/1 var(--ui-font); letter-spacing: .01em; border-radius: var(--ui-r-sm);
  color: var(--ui-text-sub); background: var(--ui-surface-2); border: 1px solid transparent; white-space: nowrap;
}
.badge--pill { border-radius: var(--ui-r-pill); }
.badge--outline { background: transparent; border-color: var(--ui-border-strong); }
.badge--primary { color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 12%, var(--ui-surface)); }
.badge--success { color: var(--ui-success); background: color-mix(in srgb, var(--ui-success) 12%, var(--ui-surface)); }
.badge--warning { color: var(--ui-warning); background: color-mix(in srgb, var(--ui-warning) 14%, var(--ui-surface)); }
.badge--danger  { color: var(--ui-danger);  background: color-mix(in srgb, var(--ui-danger)  10%, var(--ui-surface)); }
.badge--info    { color: var(--ui-info);    background: color-mix(in srgb, var(--ui-info)    12%, var(--ui-surface)); }
.badge--solid { color: var(--ui-bg); background: var(--ui-text); }   /* 地とテキストを反転。ダーク地でも潰れん */
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge--count { min-width: 20px; height: 20px; padding: 0 6px; justify-content: center; border-radius: var(--ui-r-pill); color: #fff; background: var(--ui-danger); font-weight: 600; }

/* Chip（選択・フィルタ。button か label で使う） */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  font: 500 var(--ui-fs-sm)/1 var(--ui-font); color: var(--ui-text); background: var(--ui-surface-2);
  border: 1px solid transparent; border-radius: var(--ui-r-pill); cursor: pointer; user-select: none;
  transition: background-color var(--ui-t-fast) var(--ui-ease), border-color var(--ui-t-fast), transform var(--ui-t-fast) var(--ui-ease);
}
.chip:hover { background: color-mix(in srgb, var(--ui-text) 9%, var(--ui-surface)); }
.chip:active { transform: scale(.97); }
.chip:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.chip.is-selected, .chip[aria-pressed="true"] { color: var(--ui-on-primary); background: var(--ui-text); }
.chip--outline { background: transparent; border-color: var(--ui-border-strong); }
.chip__remove { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; margin-right: -4px; opacity: .6; }
.chip__remove:hover { opacity: 1; background: rgba(0,0,0,.1); }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* Avatar */
.avatar {
  --_s: 36px; width: var(--_s); height: var(--_s); flex: none; border-radius: 50%; overflow: hidden;
  display: inline-grid; place-items: center; background: color-mix(in srgb, var(--ui-primary) 18%, var(--ui-surface));
  color: var(--ui-primary); font: 600 calc(var(--_s) * .38)/1 var(--ui-font); letter-spacing: .02em; aspect-ratio: 1;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xs { --_s: 24px; } .avatar--sm { --_s: 28px; } .avatar--lg { --_s: 48px; } .avatar--xl { --_s: 64px; }
.avatar--square { border-radius: var(--ui-r-md); }
.avatar-wrap { position: relative; display: inline-block; }
.avatar-wrap__status { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-success); box-shadow: 0 0 0 2px var(--ui-surface); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--ui-surface); }
.avatar-stack .avatar + .avatar { margin-left: -10px; }

/* ---- ui/glass.css ---- */
/* ui/glass.css — Liquid Glass surface（Apple 2025 の "浮く層" の型）
   使う場所: ナビ・タブバー・シート・FAB・トースト。コンテンツ本体には掛けない（全部盛り禁止）。
   構造: 磨り（blur+saturate）＋ 縁の光（inset 上辺ハイライト）＋ 薄い外影 ＋ 上から下への微かな艶。
   物差し: apple.md nav = rgba(0,0,0,.8) + saturate(180%) blur(20px)。iOS 26 Liquid Glass = 高い透過＋屈折縁。 */
:root {
  --glass-blur: 20px;
  --glass-sat: 180%;
  --glass-bg: color-mix(in srgb, var(--ui-surface) 62%, transparent);
  --glass-tint: transparent;
  --glass-edge: rgba(255,255,255,.55);      /* 上辺のハイライト */
  --glass-edge-dark: rgba(0,0,0,.08);       /* 下辺の締め */
  --glass-shadow: 0 8px 32px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06);
  --glass-radius: 20px;
}
.glass {
  position: relative; isolation: isolate;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 40%),   /* 艶 */
    var(--glass-tint),
    var(--glass-bg);
  -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  border-radius: var(--glass-radius);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),          /* 屈折した上縁 */
    inset 0 -1px 0 var(--glass-edge-dark),
    inset 1px 0 0 rgba(255,255,255,.18), inset -1px 0 0 rgba(255,255,255,.18),
    var(--glass-shadow);
  border: 1px solid color-mix(in srgb, #fff 35%, transparent);
}
/* 光の縁（specular）。左上から差す。装飾なので pointer-events 無し */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  mix-blend-mode: soft-light;
}
.glass--dark {
  --glass-bg: rgba(20, 20, 24, .62);
  --glass-edge: rgba(255,255,255,.22); --glass-edge-dark: rgba(0,0,0,.35);
  color: #fff; border-color: rgba(255,255,255,.14);
}
.glass--dark::before { background: radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.18), transparent 55%); }
.glass--tint { --glass-tint: color-mix(in srgb, var(--ui-primary) 14%, transparent); }
.glass--strong { --glass-blur: 32px; --glass-bg: color-mix(in srgb, var(--ui-surface) 78%, transparent); }
.glass--clear  { --glass-blur: 14px; --glass-bg: color-mix(in srgb, var(--ui-surface) 38%, transparent); }
.glass--pill { --glass-radius: 999px; }

/* 部品化 */
.glass-nav { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 12px 0 18px; }
.glass-nav__brand { font-weight: 600; letter-spacing: -.01em; margin-right: auto; }
.glass-nav .btn--ghost:hover { --_bg: rgba(255,255,255,.35); }
.glass--dark .btn--ghost { --_fg: #fff; } .glass--dark .btn--ghost:hover { --_bg: rgba(255,255,255,.12); }

.glass-tabbar { display: inline-flex; padding: 4px; gap: 2px; --glass-radius: 999px; }
.glass-tabbar__item {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px;
  font: 500 var(--ui-fs-sm)/1 var(--ui-font); color: inherit; opacity: .7; text-decoration: none; cursor: pointer; border: 0; background: transparent;
  transition: background-color var(--ui-t-base) var(--ui-ease), opacity var(--ui-t-fast), transform var(--ui-t-fast) var(--ui-ease);
}
.glass-tabbar__item:hover { opacity: 1; }
.glass-tabbar__item:active { transform: scale(.96); }
.glass-tabbar__item.is-active, .glass-tabbar__item[aria-selected="true"] {
  opacity: 1; background: rgba(255,255,255,.75); box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
.glass--dark .glass-tabbar__item.is-active { background: rgba(255,255,255,.18); color: #fff; }

.glass-fab { width: 56px; height: 56px; --glass-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0; color: inherit;
  transition: transform var(--ui-t-fast) var(--ui-ease); }
.glass-fab:active { transform: scale(.94); }
.glass-fab svg { width: 22px; height: 22px; }

.glass-sheet { padding: 20px; --glass-radius: 24px; }
.glass-toast { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; --glass-radius: 14px; font-size: var(--ui-fs-sm); }

/* デモ用: ガラスを浮かせる背景（写真の代わり） */
.glass-stage {
  position: relative; overflow: hidden; border-radius: var(--ui-r-lg); padding: 28px; min-height: 260px;
  background:
    radial-gradient(60% 60% at 20% 20%, color-mix(in srgb, var(--ui-primary) 55%, #fff), transparent 70%),
    radial-gradient(50% 50% at 85% 30%, #F2C4A0, transparent 70%),
    radial-gradient(60% 50% at 60% 90%, #9EC8B8, transparent 70%),
    linear-gradient(160deg, #E9EDF2, #CDD5DF);
}
.glass-stage--dark { background:
    radial-gradient(60% 60% at 20% 20%, color-mix(in srgb, var(--ui-primary) 60%, #000), transparent 70%),
    radial-gradient(50% 50% at 85% 30%, #6A3E5C, transparent 70%),
    radial-gradient(60% 50% at 60% 90%, #1F4E5F, transparent 70%),
    linear-gradient(160deg, #15171C, #0B0C10); color: #fff; }
.glass-stage__grid { position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 28px 28px; }

/* 透過を減らす設定・非対応環境では不透明にフォールバック */
@media (prefers-reduced-transparency: reduce) { .glass { -webkit-backdrop-filter: none; backdrop-filter: none; --glass-bg: var(--ui-surface); } .glass--dark { --glass-bg: #1a1a1e; } }
@supports not (backdrop-filter: blur(1px)) { .glass { --glass-bg: color-mix(in srgb, var(--ui-surface) 92%, transparent); } }

/* ---- ui/finish.css ---- */
/* ============================================================
   ui/finish.css — 仕上げ層（既定値に倒れんための語彙を現物で持つ）
   狙い: AI 出力が「全部中くらい」（400-600 weight / 16px / 1px #ddd / 8px 角丸 / .1 の影）に
         倒れるのを、クラスで逆側へ引っ張る。ルールは文章で持たず、ここに置く。
   物差し: OFFAIR ボード（Barlow Condensed 181px / −5.8px 字間 / 9px キッカー）、Vercel（hairline）、
           Linear（粒子）、Apple iOS 26（Liquid Glass の縁光）
   使い方: foundation → theme → palette → ui → language の後に読む（build.mjs が ui の最後に足す）
   ============================================================ */
:root {
  /* ヘアライン: 1px #ddd の代わり。文字色の薄いアルファで地に馴染ませる */
  --hairline-w: 1px;
  --hairline-c: color-mix(in srgb, var(--color-text) 14%, transparent);
  --hairline-c-strong: color-mix(in srgb, var(--color-text) 28%, transparent);
  --hairline: var(--hairline-w) solid var(--hairline-c);
  /* 粒子 */
  --grain-opacity: .06;
  /* 極端なジャンプ率のための表示用サイズ */
  --fs-display: clamp(64px, 12vw, 176px);
  --fs-display-sm: clamp(44px, 7.6vw, 104px);
  --fs-micro: 10px;
  --tracking-display: -0.045em;
  --tracking-micro: .14em;
}
@media (min-resolution: 2dppx) { :root { --hairline-w: 0.5px; } }

/* ---------- 罫線 ---------- */
.hairline    { border: var(--hairline); }
.hairline-t  { border-top: var(--hairline); }
.hairline-b  { border-bottom: var(--hairline); }
.hairline-x > * + * { border-left: var(--hairline); }
.hairline-y > * + * { border-top: var(--hairline); }
.hairline--strong { --hairline-c: var(--hairline-c-strong); }

/* ラベル付き罫線: 「01 / THE FREQUENCY SYSTEM ······ BUILT TO FEEL SOMETHING.」 */
.rule { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-micro); color: var(--color-text-sub); }
.rule::after { content: ""; flex: 1; border-top: var(--hairline); }
.rule > .rule__r { margin-left: auto; }
.rule--both::before { content: ""; flex: 1; border-top: var(--hairline); }

/* ---------- 文字（ジャンプ率） ---------- */
.display { font-size: var(--fs-display); line-height: .92; letter-spacing: var(--tracking-display); font-weight: 800; text-wrap: balance; font-kerning: normal; font-optical-sizing: auto; }
.display--sm { font-size: var(--fs-display-sm); line-height: .96; letter-spacing: -0.035em; }
.display--light { font-weight: 300; letter-spacing: -0.03em; }
.display--upper { text-transform: uppercase; letter-spacing: -0.02em; }
.display .accent { color: var(--color-accent); }
.micro { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-micro); line-height: 1.4; text-transform: uppercase; letter-spacing: var(--tracking-micro); color: var(--color-text-sub); }
.micro--num::before { content: attr(data-num) " / "; color: var(--color-accent); }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-micro); color: var(--color-text-sub); }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.lead-tight { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.45; letter-spacing: -0.01em; max-width: 34em; }
.tabular { font-variant-numeric: tabular-nums; }
.on-dark { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- 粒子・面の質感 ---------- */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}
.grain--strong { --grain-opacity: .12; }
.grain--soft   { --grain-opacity: .035; }

/* 写真の扱い: object-fit 前提。dim / vignette / tint で世界観に寄せる */
.img { display: block; width: 100%; height: 100%; object-fit: cover; }
.figure { position: relative; overflow: hidden; margin: 0; isolation: isolate; }
.figure > .img { transition: transform 900ms cubic-bezier(.2,.8,.2,1); }
.figure--zoom:hover > .img { transform: scale(1.03); }
.figure--dim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); pointer-events: none; }
.figure--vignette::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 120px rgba(0,0,0,.35); }
.figure--tint::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); mix-blend-mode: multiply; opacity: .35; pointer-events: none; }
.figure__cap { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff; }

/* メッシュ地: 紫青グラデに倒れんよう、accent と地色だけで作る */
.mesh { background:
  radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--color-accent) 28%, var(--color-bg)), transparent 70%),
  radial-gradient(45% 45% at 85% 20%, color-mix(in srgb, var(--color-text) 8%, var(--color-bg)), transparent 70%),
  radial-gradient(55% 45% at 60% 95%, color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)), transparent 70%),
  var(--color-bg); }

/* ---------- Liquid Glass の質感を上げる ---------- */
/* 縁光（specular）＋屈折の内側グラデ＋下地の流れ。.glass に足す。浮く層だけに使う（本文カード禁止は据え置き） */
.glass--liquid {
  --glass-blur: 24px; --glass-sat: 200%;
  background:
    linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 32%, rgba(255,255,255,0) 50%, rgba(255,255,255,.10) 78%, rgba(255,255,255,.26) 100%),
    var(--glass-tint), var(--glass-bg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(0,0,0,.10),
    inset 1px 0 0 rgba(255,255,255,.28), inset -1px 0 0 rgba(255,255,255,.28),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 1px 1px rgba(0,0,0,.05), 0 12px 40px rgba(0,0,0,.14);
}
.glass--liquid.glass--dark { box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.45),
    inset 1px 0 0 rgba(255,255,255,.10), inset -1px 0 0 rgba(255,255,255,.10),
    0 1px 1px rgba(0,0,0,.2), 0 16px 48px rgba(0,0,0,.45); }
.glass--liquid::before { background:
    radial-gradient(90% 60% at 8% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 55%),
    radial-gradient(70% 50% at 100% 100%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%); mix-blend-mode: soft-light; }

/* ガラスのボタン: 縁光つき。ナビやヒーロー上の CTA に */
.btn--glass {
  --_bg: color-mix(in srgb, var(--ui-surface, #fff) 40%, transparent);
  --_fg: var(--ui-text, currentColor); --_bd: rgba(255,255,255,.4);
  background: linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,0) 50%), var(--_bg);
  color: var(--_fg); border: 1px solid var(--_bd); border-radius: var(--ui-r-pill, 999px);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.12);
  transition: background-color 160ms, box-shadow 160ms, transform 120ms cubic-bezier(.2,.8,.2,1);
}
.btn--glass:hover { --_bg: color-mix(in srgb, var(--ui-surface, #fff) 58%, transparent); opacity: 1; }
.btn--glass:active { transform: scale(.97); }
.btn--glass.btn--dark, .on-dark .btn--glass { --_bg: rgba(20,20,24,.45); --_fg: #fff; --_bd: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35); }

/* ---------- 面と動き ---------- */
.lift { transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms; }
.lift:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 40px -12px rgba(0,0,0,.22); }
.edge { box-shadow: inset 0 0 0 var(--hairline-w) var(--hairline-c); border: 0; }        /* 枠線を内側に置く（レイアウトを動かさん） */
.edge--inner-light { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 var(--hairline-w) var(--hairline-c); }
.tile { border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.tile--dark { background: #0B0B0D; color: #F2F2F2; }

/* reduced motion / transparency */
@media (prefers-reduced-motion: reduce) { .lift, .figure > .img, .btn--glass { transition: none; } .figure--zoom:hover > .img { transform: none; } }
@media (prefers-reduced-transparency: reduce) { .btn--glass { -webkit-backdrop-filter: none; backdrop-filter: none; --_bg: var(--ui-surface, #fff); } }

/* ---------- 端末の安全域 ---------- */
/* SP の固定/上部ヘッダーに付ける。Dynamic Island / ノッチの下まで空ける。実機は env() が効き、撮影（Playwright）は 54px が効く */
@media (max-width: 767px) { .safe-top { padding-top: max(0px, env(safe-area-inset-top, 0px), 54px); } }