/* Fairway / 配色と土台のスタイル（統合役の持ち物）。モバイルファースト。
   色は実測済みの値（WCAG 2.1）。比率のコメントは Warm Ivory の地の上での実測値（別の地のときは明記）。
   守ること:
   - --muted-rose / --rose-brand (#D9718B) と --sage (#7E947C) は装飾・境界・選択状態だけに使う。
     この2色を背景にして白系の文字を載せない（3.14:1 / 3.27:1 で足りない）。
   - 白文字を載せてよいのは --action / --rose-action (#BD4F6F, 4.65:1) と --sage-dark / --sage-d (#5F765E, 4.95:1) だけ。
   - --action を本文サイズの文字色・リンク色にしない（4.36:1）。本文は --ink ＋下線。
     ローズの字が要るところ（選択中の札・タブ）は --rose-ink (#9A4A5F) を使う（地で 5.60:1、--rose-soft の上で 5.19:1）。

   F31A（2026-09-26）: Claude Artifact 版 1789828455-0cc6（design-reference/）の :root の値と部品を、
   上の決まりを破らない形で写した。**決まりと食い違う箇所は決まりを採った**（下の「食い違いの一覧」）。
   - 部品の名前が既存の画面の名前とぶつかるもの（.btn・.card・.note・.h1・.h2・.check・.crop）は、
     **Artifact に合わせた画面の根（class="screen"）の中だけ**で Artifact の見た目になる。
     根の外（まだ作り直していない画面）は、今までの見た目のまま。
   - ぶつからないもの（.hd・.in・.chip・.tag・.pcard・.feat など）は、どこでも使える。
   食い違いの一覧（Artifact → ここ）:
   1. .btn.sage の地 #7E947C に白字 → 地を --sage-d (#5F765E)
   2. .st.sg の地 #7E947C に白字 → 地を --sage-d
   3. .h2 の中のボタン（すべて見る）の字が Action Rose 12px → --ink ＋下線
   4. .seg の選択中の字が Action Rose 13.5px → --rose-ink の太字（F31C。地 5.60:1。F31B までは --ink だった。下の線は Action Rose のまま。線は字ではない）
   5. 下部タブの選択中の字が Action Rose 10px → --rose-ink
   6. .chip.on・.tag・.btn.soft・.pillseg の選択中の字が Action Rose（--rose-soft の地で 4.05:1）→ --rose-ink（5.19:1）
   7. .btn.line の字が Action Rose → --rose-ink（枠は Action Rose のまま）
   8. .ok の字が Action Rose → --rose-ink
   9. .tag.sg・.chip.sg.on・.note.sg の字が --sage-d（--sage-soft の地で 4.27:1）→ --ink
   10. フォーカスの輪が #D9718B（地で 2.95:1。部品の境界は 3:1 が要る）→ Action Rose（4.36:1）
   11. gold 系（初期ビルドから外す有料の機能だけに使われていた色）は値だけ持ち、部品を写さない
   12. --line の値が Artifact（#EFE7DF）と今まで（#E3DAD1）で違う → Artifact の値にし、今までの入力欄の枠は --line2 にした
   13. .check .bx（同意などの印の箱）の枠が --line2（白の地で 1.36:1。部品の境界は 3:1 が要る）→ --line-ui（#8E857E。白 3.62:1・地 3.39:1・--ivory2 3.17:1）
       （F31B 統合。形・大きさ・角丸・印を付けたときの Action Rose の地と白い印は Artifact のまま） */

:root {
  /* --- 今までの名前（既存の画面が使う。値は変えていない。--line だけ Artifact の値へ） --- */
  --bg: #FBF7F2;          /* Warm Ivory / 地 */
  --bg-soft: #F5EFE8;     /* Soft Ivory / 面 */
  --ink: #34302D;         /* 文字 12.25:1 */
  --ink-weak: #6B635D;    /* 補助の文字 5.52:1 */
  --line: #EFE7DF;        /* 罫（Artifact の --line） */
  --action: #BD4F6F;      /* Action Rose / 白文字の主要 CTA 4.65:1 */
  --sage-dark: #5F765E;   /* Sage Dark / 白文字の Sage ボタン 4.95:1・地の上の文字 4.64:1 */
  --muted-rose: #D9718B;  /* 装飾・選択状態。白系の文字を載せない */
  --sage: #7E947C;        /* 装飾・境界。白系の文字を載せない */
  --on-action: #FFFFFF;   /* --action と --sage-dark の上にだけ置く文字色 */
  --radius: 12px;
  --gap: 16px;

  /* --- Artifact 版 1789828455-0cc6 の :root（同じ値） --- */
  --ivory: #FBF7F2;
  --ivory2: #F5EFE8;
  --card: #FFFFFF;
  --rose-brand: #D9718B;  /* 装飾・選択状態・淡い背景。白系の文字を載せない */
  --rose-action: #BD4F6F; /* 白い字を載せる主要 CTA。本文サイズの字の色にしない */
  --rose-soft: #FCEBEF;
  --rose-line: #F3CBD4;
  --rose-ink: #9A4A5F;    /* Artifact の .note.rs の字。ローズの字が要るところに使う（地 5.60:1・白 5.97:1・--rose-soft 5.19:1） */
  --sage-d: #5F765E;
  --sage-soft: #EAF0E7;
  --sage-line: #CBD8C8;
  --gold: #BF9C5F;        /* 有料の機能だけに使われていた色（初期ビルドでは使わない） */
  --gold-soft: #F7F0E1;
  --gold-line: #E6D5B0;
  --sub: #675F58;         /* 補助の字 5.87:1（白 6.26:1・--ivory2 5.48:1） */
  --dim: #766E67;         /* 薄い字 4.69:1（白 5.00:1）。--ivory2・--rose-soft の地の上に置かない（4.4:1 を切る） */
  --line2: #E5DBD1;
  --line-ui: #8E857E;     /* 押せる部品の境界（食い違い13。白 3.62:1・地 3.39:1・--ivory2 3.17:1）。字に使わない */
  --err: #A8435D;        /* 入力の誤りの字 5.43:1 */
  --desk: #F1E9E1;        /* 広い画面で外枠の外に見える地 */
  --shadow: 0 2px 12px rgba(90, 65, 50, .07);

  /* 書体（app/fonts/ の自前の woff2。外の書体配信を読みに行かない） */
  --ui: "Quicksand", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --hand: "Zen Kurenaido", "Klee One", "Hiragino Maru Gothic ProN", cursive;

  /* 字の大きさと行間（Artifact の値） */
  --fs-body: 14px;
  --lh-body: 1.7;
  --fs-h1: 21px;
  --lh-h1: 1.55;
  --fs-h2: 15px;
  --fs-lead: 13px;
  --lh-lead: 1.9;
  --fs-cap: 11.5px;
  --fs-btn: 15px;
  --fs-tab: 10px;

  /* 角丸（Artifact の値） */
  --r-frame: 34px;
  --r-card: 18px;
  --r-pcard: 16px;
  --r-in: 14px;
  --r-btn: 26px;
  --r-chip: 19px;
  --r-sheet: 24px;

  /* 高さ */
  --hd-h: 52px;
  --btn-h: 52px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* 外枠（Artifact の .frame）。body は縦に並べ、外枠の中の #view だけが縦に流れる。 */
body {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; color: inherit; }

/* フォーカスの輪は Action Rose（食い違い10）。 */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.app {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  padding-top: env(safe-area-inset-top, 0px);
}

/* 作り直していない画面の上に出す、ブランドの見出し（今までの .head）。
   Artifact に合わせた画面（根が .screen）は自分の見出し（.hd）を持つので隠す。 */
.head {
  flex: none;
  padding: 14px var(--gap) 10px;
  border-bottom: 1px solid var(--line);
}

.app.own-hd > .head { display: none; }

.brand {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#view {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
  /* 長いパスや URL の語で横にはみ出さない（F31A 最後のまとめ。`shots:staging` が #view のはみ出しを数えるようになって見つかった）。 */
  overflow-wrap: break-word;
  /* F31B 統合: 画面の根と版の表示（#foot）を縦に並べ、根が残りの高さを埋める。
     それまでは根（.screen）が min-height:100% で #view の高さをまるごと取り、その後ろに #foot が付くので、
     **中身が短い画面でも #foot の高さぶん（約 50px）必ず縦に流れていた**（高さの二重計上）。 */
  display: flex;
  flex-direction: column;
}

/* 画面の根（#view の直下の最初の要素）は残りの高さを埋め、縮まない。版の表示は縮まない。 */
#view > :first-child { flex: 1 0 auto; }
#view > .foot { flex: none; }
/* Artifact に合わせた画面（根が .screen。外枠に .own-hd）では版の表示を出さない（F31B 統合）。
   Artifact の外枠に版の行は無く、出すと下に留まる CTA（.dock）や会話の入力の帯の下に版の行が見えてしまう。
   要素は DOM に残す（作り直していない画面では今までどおり末尾に出る。ステージングでは帯が版と commit を出す）。 */
.app.own-hd #view > .foot { display: none; }

/* 作り直していない画面の余白（今までの .app と .view の余白）。 */
.view.legacy {
  padding: var(--gap) var(--gap) 32px;
}

/* 下部タブ（Artifact の #tabs）。中身は app/core/shell.js が作る。行き先の無いタブは置かない。 */
#tabs {
  flex: none;
  display: grid;
  grid-template-columns: repeat(var(--tab-count, 5), 1fr);
  background: #FFFFFF;
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 9;
}

#tabs[hidden],
.app.kb #tabs { display: none; }

#tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 4px 0;
  position: relative;
  color: var(--dim);
  font-size: var(--fs-tab);
  line-height: 1.4;
  text-decoration: none;
}

#tabs svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 選択中（食い違い5: 字は --rose-ink。白の地で 5.97:1） */
#tabs a.on {
  color: var(--rose-ink);
  font-weight: 700;
}

#tabs a.on svg { fill: var(--rose-soft); }

/* 未読の数。地は Action Rose、字は白（4.65:1）。 */
#tabs .n {
  position: absolute;
  top: 0;
  left: calc(50% + 6px);
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--action);
  color: var(--on-action);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
}

/* 読み上げだけに渡す文（画面には出さない）。 */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 版の表示。#view の末尾（画面の根の後ろ）に置かれる（作り直していない画面だけ。Artifact に合わせた画面では出さない）。
   F31B 統合: 短い画面で縦に流れる元にならないよう、上下の余白を詰めた（12px／24px → 6px／10px。字は 11px。--ink-weak は地で 5.52:1）。 */
.foot {
  width: 100%;
  padding: 6px 18px 10px;
  color: var(--ink-weak);
  font-size: 11px;
  line-height: 1.6;
}

/* ==========================================================================
   今までの部品（作り直していない画面が使う。見た目は変えていない）
   ========================================================================== */

.card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap);
}

.h1 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.5;
}

.note {
  margin: 0;
  color: var(--ink-weak);
  font-size: 14px;
}

a {
  color: var(--ink);
  text-decoration: underline;
}

.btn {
  display: inline-block;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.btn.primary {
  background: var(--action);
  color: var(--on-action);
}

.btn.sage {
  background: var(--sage-dark);
  color: var(--on-action);
}

/* 装飾の2色は、地の上の罫と面だけ。文字色は --ink のまま変えない。 */
.selected {
  border-color: var(--muted-rose);
}

.sage-line {
  border-color: var(--sage);
}

/* --- F1（登録・同意）で足した部品 -------------------------------------- */

.h2 {
  margin: 20px 0 8px;
  font-size: 16px;
  line-height: 1.5;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--gap);
}

.field label {
  font-size: 14px;
  color: var(--ink-weak);
}

.field input {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
}

/* 同意の項目。初期状態は未チェック（HTML 側で checked を付けない）。 */
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
}

.check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 5px 0 0;
  accent-color: var(--action);
}

/* --- F1.1（R2）で足した部品 ---------------------------------------------
   同意の1項目と、その項目が対象とする文書のリンク。
   リンクは label の外（.item-note）に置く。label の中に入れると、
   リンクを押した操作がチェックの切り替えになってしまうため。 */

.consent-item {
  margin: 0 0 var(--gap);
}

.consent-item .check {
  margin: 0 0 6px;
}

.item-note {
  margin: 0 0 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line2);
}

.item-docs {
  margin: 2px 0 0;
  padding-left: 20px;
}

/* 注意書き。--action は罫にだけ使う（本文サイズの文字色にしない）。文字は --ink のまま。 */
.alert {
  margin: 0 0 var(--gap);
  padding: 10px 12px;
  border-left: 3px solid var(--action);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
}

.links {
  margin: 0 0 var(--gap);
  padding-left: 20px;
}

.links li {
  margin: 4px 0;
}

a.btn {
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* F31A: 部品の display の規則（.ph-note・写真の枠の img など）に負けないよう、!important にした（Artifact と同じ扱い）。 */
[hidden] {
  display: none !important;
}

/* --- F2（公開プロフィールと写真の器）で足した部品 ------------------------
   --muted-rose と --sage は罫と面だけ。白系の文字を載せない。 */

/* label が無い項目（見出しだけの欄）。見た目を .field label にそろえる。 */
.label-like {
  font-size: 14px;
  color: var(--ink-weak);
}

.field select,
.field textarea {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
}

/* 選択不能の欄（選択肢が未決のもの）。押せないことが見て分かるようにする。 */
.field select:disabled {
  background: var(--bg-soft);
  color: var(--ink-weak);
  cursor: not-allowed;
}

.field input[type="range"] {
  width: 100%;
  min-height: 48px;
  accent-color: var(--action);
}

/* 切り取り枠。枠線は装飾なので --muted-rose を使う（文字は載せない）。 */
.crop {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--muted-rose);
  border-radius: var(--radius);
  background: var(--bg-soft);
  touch-action: none;
  cursor: grab;
}

/* 写真の表示（F22）。枠線は罫の色で、白系の文字を載せる面ではない。
   幅は枠に収め、縦横比を保って切り取る（顔が伸びない）。 */
.photo-box {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.photo {
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

/* 一覧の中の小さい丸（さがす）。 */
.photo.thumb {
  width: 56px;
  height: 56px;
  max-width: 56px;
  border-radius: 50%;
}

.prev-row {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
}

.prev-row > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.prev-circle {
  width: 96px;
  height: 96px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-soft);
}

.prev-card {
  width: 120px;
  height: 120px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- F4（いいね・相互成立・1対1会話）で足した部品 ------------------------
   --muted-rose と --sage は罫と面だけ。白系の文字を載せない。 */

/* 未読の印。**罫の色だけ**を --muted-rose にし、文字は --ink のまま。 */
.badge {
  display: inline-block;
  padding: 0 8px;
  border: 1px solid var(--muted-rose);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.8;
}

.msg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 var(--gap);
}

/* 1通。相手の発言は地の面、自分の発言は右寄せ。**どちらも文字は --ink。** */
.msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 85%;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.msg.mine {
  align-self: flex-end;
  border-color: var(--muted-rose);
  background: var(--bg);
}

/* --- F14（再同意の画面）で足した部品 -------------------------------------
   罫は --line、面は --bg-soft、文字は --ink のまま。
   版を並べて見せる小さな表（#/consent）。狭い画面でも横に溢れないよう、文字を1段落とす。 */
.table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--gap);
  font-size: 14px;
}

.table th,
.table td {
  border: 1px solid var(--line2);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.table thead th,
.table tr:first-child th {
  background: var(--bg-soft);
  color: var(--ink);
}

/* ==========================================================================
   F31A: Artifact の部品（名前が既存とぶつからないもの。どこでも使える）
   値は Artifact 版 1789828455-0cc6 と同じ。色だけ上の決まりに合わせた（食い違いの番号を添える）。
   ========================================================================== */

/* Artifact に合わせた画面の根。字の大きさと行間を Artifact にそろえる。 */
.screen {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* 高さは #view の直下の規則（flex: 1 0 auto）が残りを埋める。min-height:100% は置かない（F31B 統合: 二重計上の元）。 */
}

.pad { padding: 16px 18px 28px; }

/* ---- ヘッダー ---- */
.hd {
  position: sticky;
  top: 0;
  z-index: 8;
  height: var(--hd-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 247, 242, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hd .t { font-size: 15.5px; font-weight: 500; letter-spacing: .06em; }

.hd .l,
.hd .r {
  position: absolute;
  top: 0;
  height: var(--hd-h);
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0 12px;
  color: var(--ink);
  text-decoration: none;
}

.hd .l { left: 2px; }
.hd .r { right: 2px; }

.hd svg,
.ic {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 見出しの鈴の上の数（今までの .badge の罫の形を打ち消す）。地は Action Rose、字は白（4.65:1）。 */
.hd .badge {
  position: absolute;
  top: 11px;
  right: 9px;
  min-width: 16px;
  height: 16px;
  border: 0;
  border-radius: 8px;
  background: var(--action);
  color: var(--on-action);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
}

.hdlogo { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.hdlogo img { height: 26px; display: block; }
.hdlogo svg { width: 54px; height: 13px; margin-bottom: -5px; stroke: none; }

/* ---- ロゴ（旗と曲線は SVG、字は app/assets/logo.png） ---- */
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.logo .fl { display: block; width: 78%; margin: 0 0 -7% 6%; }
.logo img { display: block; width: 100%; }
.logo .sub {
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
  margin: -7% 0 0 8%;
  font-size: .215em;
  white-space: nowrap;
}

/* ---- 文字 ---- */
.lead { font-size: var(--fs-lead); color: var(--sub); line-height: var(--lh-lead); margin: 8px 0 0; }
.cap { font-size: var(--fs-cap); color: var(--dim); line-height: 1.7; }
.hand { font-family: var(--hand); font-weight: 400; letter-spacing: .06em; }
.lbl { display: block; font-size: 12px; color: var(--sub); margin: 16px 0 6px; letter-spacing: .04em; }
.en { font-family: "Quicksand", sans-serif; letter-spacing: .06em; }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; }
.center { text-align: center; }

.btns { display: flex; gap: 10px; margin-top: 18px; }
.btns .btn { flex: 1; }

.dock {
  position: sticky;
  bottom: 0;
  z-index: 6;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(rgba(251, 247, 242, 0), var(--bg) 26%);
}

.dock .btns { margin-top: 0; }

/* ---- 入力 ---- */
.in,
select.in,
textarea.in {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line2);
  border-radius: var(--r-in);
  background: #FFFFFF;
  color: var(--ink);
  padding: 0 15px;
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

textarea.in { padding: 13px 15px; line-height: 1.8; min-height: 104px; resize: none; }
.in:focus { border-color: var(--rose-brand); }
.in.err { border-color: var(--action); }
.ferr { font-size: 12px; color: var(--err); margin-top: 5px; line-height: 1.6; }

.selw { position: relative; }
.selw::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--dim);
  border-bottom: 1.6px solid var(--dim);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  height: 38px;
  padding: 0 17px;
  border-radius: var(--r-chip);
  border: 1px solid var(--line2);
  background: #FFFFFF;
  color: var(--sub);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 食い違い6: 選択中の字は --rose-ink（--rose-soft の地で 5.19:1） */
.chip.on { background: var(--rose-soft); border-color: var(--rose-line); color: var(--rose-ink); font-weight: 700; }
/* 食い違い9: sage の選択中の字は --ink（--sage-d は --sage-soft の地で 4.27:1） */
.chip.sg.on { background: var(--sage-soft); border-color: var(--sage-line); color: var(--ink); }

.tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 13px;
  background: var(--rose-soft);
  color: var(--rose-ink);
  font-size: var(--fs-cap);
}

.tag.sg { background: var(--sage-soft); color: var(--ink); }
.tag.ln { background: #FFFFFF; border: 1px solid var(--line2); color: var(--sub); }

.radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line2);
  border-radius: var(--r-in);
  background: #FFFFFF;
  margin-top: 8px;
  cursor: pointer;
}

.radio .o {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio.on { border-color: var(--rose-brand); }
.radio.on .o { border-color: var(--rose-brand); }
.radio.on .o::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rose-brand); }

.prog { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; flex: 1; }
.prog i { display: block; height: 100%; background: var(--sage); border-radius: 2px; }

/* 段の帯（Artifact 1789828455-0cc6 の 277〜278行 `.pipe`・`.pipel` の写し。F34 のグッズの企画の進み具合と Hub の進捗カード）。
   Sage は装飾の塗りで、文字を載せない。目印の字は --dim（Warm Ivory の地で 4.69:1）。 */
.pipe { display: flex; gap: 3px; margin-top: 10px; }
.pipe i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.pipe i.on { background: var(--sage); }
.pipel { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); margin-top: 5px; }

/* 2つまみの幅（年齢の絞り込み）。**上限の値は画面が決める。年齢の上限を置かない決まりに従う。** */
.dual { position: relative; height: 34px; margin: 4px 6px 0; }
.dual .trk { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 2px; background: var(--line); }
.dual .fil { position: absolute; top: 15px; height: 4px; border-radius: 2px; background: var(--rose-brand); }
.dual input {
  position: absolute;
  left: -6px;
  right: -6px;
  width: calc(100% + 12px);
  top: 6px;
  margin: 0;
  height: 22px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.dual input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--rose-brand);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.dual input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--rose-brand);
}

/* ---- 面・一覧 ---- */
.box { background: #FFFFFF; border-radius: 16px; border: 1px solid var(--line); padding: 4px 16px; }

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--sub); flex: none; }
.kv .v { font-weight: 500; text-align: right; }

.li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 2px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  font-size: 14px;
}
.li:last-child { border-bottom: none; }
.li .ic { color: var(--sub); flex: none; width: 20px; height: 20px; }
.li small { display: block; font-size: var(--fs-cap); color: var(--dim); line-height: 1.5; }

.go { flex: none; width: 16px; height: 16px; stroke: var(--dim); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.li .go { margin-left: auto; }

.empty { text-align: center; color: var(--dim); font-size: 13px; padding: 44px 20px; line-height: 2; }

.seg {
  display: flex;
  gap: 22px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: var(--hd-h);
  z-index: 7;
  background: var(--bg);
}
.seg::-webkit-scrollbar { display: none; }
.seg button,
.seg a {
  flex: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 11px 0 10px;
  color: var(--dim);
  font-size: 13.5px;
  text-decoration: none;
}
/* 食い違い4: 選択中の字は --rose-ink の太字（F31C。Action Rose は本文サイズの字に使わない決まりなので、Artifact の色そのものではない）。
   下の線は Action Rose（線は字ではない） */
.seg .on { color: var(--rose-ink); font-weight: 700; border-bottom-color: var(--action); }

.pillseg { display: flex; background: var(--ivory2); border-radius: 20px; padding: 3px; margin: 0 18px; }
.pillseg button,
.pillseg a {
  flex: 1;
  height: 34px;
  border: none;
  border-radius: 17px;
  background: none;
  color: var(--sub);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* 食い違い6 */
.pillseg .on { background: #FFFFFF; color: var(--rose-ink); font-weight: 700; box-shadow: 0 1px 4px rgba(90, 65, 50, .1); }

.hs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 18px 6px;
  margin: 0 -18px;
  scroll-snap-type: x proximity;
}
.hs::-webkit-scrollbar { display: none; }
.hs > * { flex: none; scroll-snap-align: start; }

/* ---- 人 ---- */
.av { flex: none; position: relative; border-radius: 50%; overflow: hidden; background: var(--rose-soft); display: block; width: 48px; height: 48px; }
.av img,
.av svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.av.s { width: 34px; height: 34px; }
.av.l { width: 64px; height: 64px; }
.av.xl { width: 104px; height: 104px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pcard {
  background: #FFFFFF;
  border-radius: var(--r-pcard);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  position: relative;
  color: var(--ink);
  text-decoration: none;
  display: block;
}
.pcard .ph { aspect-ratio: 1 / 1.08; background: var(--rose-soft); position: relative; overflow: hidden; }
.pcard .ph > img,
.pcard .ph > svg { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 18%; }
.pcard .tx { padding: 9px 12px 12px; }

.nm { font-size: 15px; font-weight: 700; letter-spacing: .03em; }
.nm small { font-weight: 400; font-size: 12.5px; color: var(--sub); margin-left: 5px; }

.meta { font-size: var(--fs-cap); color: var(--sub); display: flex; align-items: center; gap: 4px; line-height: 1.6; }
.meta svg { width: 12px; height: 12px; stroke: var(--rose-brand); fill: none; stroke-width: 1.8; flex: none; stroke-linecap: round; stroke-linejoin: round; }

.heart {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  padding: 0;
}
.heart svg { width: 17px; height: 17px; stroke: var(--rose-brand); fill: none; stroke-width: 1.9; stroke-linejoin: round; }
.heart.on svg { fill: var(--rose-brand); }

.feat { border-radius: 20px; overflow: hidden; background: #FFFFFF; box-shadow: var(--shadow); cursor: pointer; display: block; color: var(--ink); text-decoration: none; }
.feat .ph { aspect-ratio: 1 / 1.02; position: relative; overflow: hidden; background: var(--rose-soft); }
.feat .ph > img,
.feat .ph > svg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.feat .heart { width: 42px; height: 42px; right: 14px; bottom: 14px; }
.feat .heart svg { width: 20px; height: 20px; }
.feat .tx { padding: 12px 16px 14px; }

/* 写真の枠（.pfh・.pcard .ph・.feat .ph・.av）の中の注記（写真なし・読み込み失敗）。枠の真ん中に置く。
   字は --sub（--rose-soft の地で 5.45:1。--dim はその地に置かない決まり）。小さい枠は .s。F31A 最後のまとめで画面の style から上げた。 */
.ph-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  color: var(--sub);
  font-size: 12px;
  line-height: 1.6;
}
.ph-note.s { font-size: 10.5px; padding: 8px; }

/* ボタン（CTA）の字の前に置く小さいアイコン（Artifact のいいね・メッセージのボタンの形）。色はボタンの字の色に従う。 */
.cta-ic { flex: none; width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cta-ic.fill { fill: currentColor; }

/* ---- プロフィール詳細 ---- */
.pfh { position: relative; aspect-ratio: 1 / 1.04; background: var(--rose-soft); overflow: hidden; }
.pfh > img,
.pfh > svg { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 10%; }

.fab {
  position: absolute;
  top: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  padding: 0;
  z-index: 3;
  color: var(--ink);
}
.fab.l { left: 14px; }
.fab.r { right: 14px; }
.fab svg { width: 19px; height: 19px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pfb { background: var(--bg); border-radius: var(--r-sheet) var(--r-sheet) 0 0; margin-top: -22px; position: relative; padding: 20px 18px 8px; }

.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.gal > div { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--sage-soft); }
.gal img,
.gal svg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 募集のカード ---- */
.ecard { background: #FFFFFF; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; margin-top: 14px; display: block; color: var(--ink); text-decoration: none; }
.ecard .ph { height: 132px; position: relative; overflow: hidden; background: var(--sage-soft); }
.ecard .ph > img,
.ecard .ph > svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecard .tx { padding: 12px 16px 14px; }
.ecard .dt { font: 700 14px/1.4 "Quicksand", "Zen Maru Gothic", sans-serif; letter-spacing: .03em; }
.ecard .tt { font-size: 15px; font-weight: 700; margin-top: 1px; letter-spacing: .03em; }

/* 写真の上の状態の札。地は Action Rose か Sage Dark で、字は白（食い違い2）。 */
.st {
  position: absolute;
  left: 12px;
  top: 12px;
  height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  background: var(--action);
  color: var(--on-action);
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  letter-spacing: .06em;
}
.st.sg { background: var(--sage-dark); }
.st.inl { position: static; }

.mini { width: 212px; background: #FFFFFF; border-radius: var(--r-pcard); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; display: block; color: var(--ink); text-decoration: none; }
.mini .ph { height: 96px; position: relative; overflow: hidden; background: var(--sage-soft); }
.mini .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini .tx { padding: 9px 12px 11px; }
.mini .tt { font-size: 13px; font-weight: 700; line-height: 1.5; }

/* 食い違い8 */
.ok { font-size: var(--fs-cap); color: var(--rose-ink); font-weight: 500; }
.wait { font-size: var(--fs-cap); color: var(--dim); }

/* ---- 商品のカードと分類の選択（F32。完全版の愛用アイテムの画面〈C11〉が使う。MVP の画面は使わない） ----
   出所: Claude Artifact 版 1789828455-0cc6（design-reference/）の .prod（267〜272行）と .catg（273〜276行）の値。
   価格の段（.prod .yen）と絵の上の大文字の印（.prod .pr）は写していない（価格を出さない。区分の明示は共通部品 pickDisclosure の
   .note と .badge で文字の段に出す）。.catg button.on の字は Artifact の --rose-d ではなく --rose-ink（食い違い6 と同じ扱い。
   --rose-soft の地で 5.19:1）。罫の --rose は装飾（字ではない）。 */
.prod { background: #FFFFFF; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); position: relative; }
.prod .ph { aspect-ratio: 1; background: var(--ivory2); display: flex; align-items: center; justify-content: center; }
.prod .ph svg { width: 70%; height: 70%; }
.prod .tx { padding: 9px 12px 12px; font-size: 12.5px; line-height: 1.5; }
.catg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.catg button { background: #FFFFFF; border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 2px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--sub); }
.catg button svg { width: 42px; height: 42px; }
.catg button.on { border-color: var(--rose-brand); background: var(--rose-soft); color: var(--rose-ink); font-weight: 700; }
.prod .tx .btn.sm { width: 100%; padding: 0 8px; white-space: nowrap; }  /* 2列の文字の段（375 で約 140px）に「商品ページを見る」を1行で収める（F32 の仕上げ） */
/* 区分の選択などの丸（本物の input type="radio"。Artifact の .o には置き換えない。キーボードのフォーカスの輪を既定のまま保つため）。
   丸の色だけを Artifact のローズへ（ブラウザ既定の青は Artifact と違う）。印の色で字ではない。F32 の仕上げ。 */
.radio input[type=radio] { accent-color: var(--rose-action); }

/* ---- お知らせの行 ---- */
.nt { display: flex; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--ink); text-decoration: none; }
.nt .o { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--rose-soft); display: flex; align-items: center; justify-content: center; }
.nt .o svg { width: 20px; height: 20px; stroke: var(--rose-brand); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nt .o.sg { background: var(--sage-soft); }
.nt .o.sg svg { stroke: var(--sage-d); }
.nt b { font-size: 13.5px; font-weight: 700; display: block; line-height: 1.55; }
.nt p { margin: 2px 0 0; font-size: 12px; color: var(--sub); line-height: 1.6; }
.nt time { font: 500 10.5px "Quicksand", sans-serif; color: var(--dim); }
/* 押せる行（a.nt・button.nt。完全版のお知らせの一覧〈F36b〉）: 行全体を押す。button の既定の枠・地・中央寄せを消し、`.nt` の罫と余白をそのまま使う。
   フォーカスの輪は上の button:focus-visible・a:focus-visible のまま。 */
.nt.nt-row { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font: inherit; color: var(--ink); margin: 0; }
.nt.nt-still { cursor: default; }
/* 見出しの段（文と未読の点を横に並べる。F36b）: Artifact の `.nt.new b:after` は点を文の中に置くので、長い文だと点が2行目の頭へ落ちる。
   点を文の外の独立の要素にし、文は縮んで折り返し（flex: 0 1 auto）、点は縮まない（flex: none）。短い文では点が文のすぐ後ろ、
   長い文では1行目の高さの右に留まる（Artifact の見た目に最も近い形）。 */
.nt .nt-hd { display: flex; align-items: flex-start; gap: 6px; }
.nt .nt-hd > b { flex: 0 1 auto; min-width: 0; }
/* 既読の文は普通の太さ（太字と点は未読だけ。F36b）。大きさと行の高さは `.nt b` と同じ。 */
.nt .nt-hd > .nt-rd { display: block; flex: 0 1 auto; min-width: 0; font-size: 13.5px; font-weight: 400; line-height: 1.55; }
/* 未読の点（字ではないが意味のある印なので、地の上で 3:1 を超える Action Rose。Artifact の #D9718B は地の上で 2.95:1）。
   1行目（13.5px × 1.55 ≒ 21px）の中ほどにそろえる。 */
.nt .nt-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--action); margin-top: 8px; }

/* ---- 写真を選ぶ丸 ---- */
.avpick { position: relative; width: 112px; height: 112px; margin: 8px auto 0; cursor: pointer; display: block; }
.avpick .av { width: 112px; height: 112px; }
.avpick .cam {
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--action);
  border: 2.5px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avpick .cam svg { width: 15px; height: 15px; stroke: #FFFFFF; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- スプラッシュ（入口）。大きさは外枠の幅（cqw）に比例する ---- */
.spl { position: absolute; inset: 0; overflow: hidden; background: #FEFAF7; }
.spl .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 0; }
.spl .spi {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(6.5cqw + env(safe-area-inset-top, 0px)) 0 calc(3.6cqw + env(safe-area-inset-bottom, 0px));
}
.spl .hl {
  font-family: var(--hand);
  font-size: 6.1cqw;
  line-height: 1.5;
  color: var(--ink);
  transform: rotate(-11deg);
  transform-origin: 0 100%;
  margin: 11cqw 0 0 6.5cqw;
  letter-spacing: .14em;
  white-space: nowrap;
}
.spl .hl span { display: block; }
.spl .hl span:nth-child(2) { margin-left: 5.8cqw; }
.spl .hl span:nth-child(3) { margin-left: 9.5cqw; }
.spl .sb { font-size: 3.5cqw; line-height: 1.85; letter-spacing: .14em; margin: 3.4cqw 0 0 8.4cqw; color: var(--ink); }
.spl .logo { width: 42cqw; margin: 5cqw 0 0 10.5cqw; font-size: 19cqw; }
.spl .ft {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 6cqw;
  text-align: center;
  font-size: 3.3cqw;
  line-height: 1.5;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--ink);
}
.spl .ft .o {
  width: 13.6cqw;
  height: 13.6cqw;
  border-radius: 50%;
  background: rgba(255, 253, 252, .95);
  margin: 0 auto 1.6cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(120, 80, 70, .08);
}
.spl .ft svg { width: 6.4cqw; height: 6.4cqw; fill: var(--rose-brand); }
.spl .dots { display: flex; justify-content: center; gap: 2cqw; margin: 3.4cqw 0 3cqw; }
.spl .dots i { width: 2cqw; height: 2cqw; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.spl .dots i.on { background: var(--rose-brand); }
.spl .cta { padding: 0 16cqw; }
.spl .cta .btn { height: 11cqw; min-height: 0; border-radius: 5.5cqw; font-size: 3.9cqw; }
.spl .cta .btn.line { height: 8.4cqw; font-size: 3.4cqw; margin-top: 2.4cqw; border-width: 1.5px; }
.spl .tg {
  font-family: var(--hand);
  font-size: 4.1cqw;
  line-height: 1.6;
  color: var(--sub);
  margin: 2.6cqw 0 0 38cqw;
  letter-spacing: .08em;
  transform: rotate(-3deg);
}
.spl .tg span { display: block; }
.spl .tg span:nth-child(2) { margin-left: 5cqw; }

/* ---- 下から出るシート（Artifact の #sheet・.sheet・.grip。F31B 統合で共通の部品にした） ----
   中身は app/core/shell.js の openSheet() が作る（role="dialog"・aria-modal・Esc で閉じる・Tab は中で回る・閉じたら元の場所へ戻る）。
   #sheet は外枠（#app）の中に置くので、広い画面でも外枠の角丸の内側に出る。空のときは出さない。 */
#sheet:empty { display: none; }
#sheet {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(52, 48, 45, .34);
  display: flex;
  align-items: flex-end;
  animation: sheet-fd .18s;
}
@keyframes sheet-fd { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  width: 100%;
  max-height: 90%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border-radius: 26px 26px 0 0;
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  animation: sheet-up .24s cubic-bezier(.2, .8, .2, 1);
  /* F31C: 中身がシートの高さ（90%）を超えたときだけ流れる（overflow-y: auto）。流れるときのスクロールバーは細く淡く
     （広い画面の既定の灰色の太いバーと上下の矢印を出さない）。中身が短ければバーは出ない。 */
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}
/* 開いたシートの箱には、開いたときにフォーカスが移る（shell.js の openSheet）。箱そのものには輪を出さない
   （中の部品の輪は上の :focus-visible のまま）。Artifact の写しはこの指定を持たず、キーボードや関数で開くと
   ブラウザ既定の輪（outline: auto）が箱の外周に出る。マウスで押して開くと出ない（F31C で確かめた）。 */
.sheet:focus { outline: none; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet .grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line2); margin: 0 auto 16px; }

/* ==========================================================================
   F31A: Artifact の部品のうち、名前が既存とぶつかるもの。**.screen の中だけ**で Artifact の見た目になる。
   ========================================================================== */

.screen .h1 { font-size: var(--fs-h1); font-weight: 500; line-height: var(--lh-h1); letter-spacing: .03em; margin: 0; text-wrap: balance; }

.screen .h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-body);
  letter-spacing: .04em;
  margin: 26px 0 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
/* 食い違い3: 「すべて見る」は --ink ＋下線（Action Rose の字にしない） */
.screen .h2 button,
.screen .h2 a {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
}

.screen .btn {
  width: 100%;
  height: var(--btn-h);
  min-height: 0;
  padding: 0 20px;
  border: none;
  border-radius: var(--r-btn);
  background: var(--action);
  color: var(--on-action);
  font-size: var(--fs-btn);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(189, 79, 111, .26);
  transition: transform .12s, background .12s;
}
.screen .btn:active { transform: scale(.985); background: #A94562; }
.screen .btn:disabled { opacity: .42; box-shadow: none; cursor: default; }
.screen .btn.primary { background: var(--action); color: var(--on-action); }
/* 食い違い7: 字は --rose-ink、枠は Action Rose */
.screen .btn.line { background: rgba(255, 255, 255, .86); color: var(--rose-ink); border: 1.5px solid var(--action); box-shadow: none; }
/* 食い違い6 */
.screen .btn.soft { background: var(--rose-soft); color: var(--rose-ink); box-shadow: none; }
.screen .btn.ghost { background: none; color: var(--sub); box-shadow: none; font-weight: 500; font-size: 13px; height: 44px; }
/* 食い違い1: 白字の Sage のボタンは Sage Dark の地 */
.screen .btn.sage { background: var(--sage-dark); color: var(--on-action); box-shadow: 0 6px 16px rgba(95, 118, 94, .28); }
.screen .btn.sm { height: 40px; font-size: 13px; width: auto; padding: 0 20px; border-radius: 20px; letter-spacing: .04em; }
.screen .btn .chev { position: absolute; right: 20px; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.screen .card { background: #FFFFFF; border: 0; border-radius: var(--r-card); padding: 0; box-shadow: var(--shadow); overflow: hidden; }

.screen .note { background: var(--ivory2); border-radius: var(--r-in); padding: 13px 15px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.85; color: var(--sub); }
.screen .note.rs { background: var(--rose-soft); color: var(--rose-ink); }
/* 食い違い9 */
.screen .note.sg { background: var(--sage-soft); color: var(--ink); }
.screen .note b { color: var(--ink); }

/* 同意などの印（Artifact の .check と .bx の見た目）。
   **実際の入力は input type="checkbox" のまま置き、見た目だけを箱に差し替える**（F31B 統合）:
   - 事前に印を付けない（checked を付けるかどうかは画面が決める。CSS は状態を作らない）。
   - input そのものが箱なので、Tab で届き、Space で切り替わり、読み上げは「チェックボックス」とその状態を読む。
     label の for と id の結び付き（文字を押しても切り替わる）も今までどおり。
   - 箱の枠は --line-ui（食い違い13）。印を付けたら地は Action Rose、印は白（4.65:1）。フォーカスの輪は共通の規則（Action Rose）。 */
.screen .check { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 9px 0; border: 0; border-radius: 0; background: none; font-size: 13px; line-height: 1.7; cursor: pointer; }
.screen .check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 21px;
  height: 21px;
  margin: 1px 0 0;
  border: 1.5px solid var(--line-ui);
  border-radius: 6px;
  background: #FFFFFF no-repeat center / 13px 13px;
  cursor: pointer;
}
.screen .check input[type="checkbox"]:checked {
  border-color: var(--action);
  background-color: var(--action);
  /* 白い印（Artifact の P.check と同じ線。stroke-width 2.6）。固定の文字列だけで、利用者の値を入れない。 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7.4' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.screen .check input[type="checkbox"]:disabled { opacity: .5; cursor: default; }
/* 強制カラー（Windows のハイコントラスト）では、ブラウザの印に戻す（地の色と背景の絵が消えて印が見えなくなるため）。 */
@media (forced-colors: active) {
  .screen .check input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; }
}

.screen .crop { position: relative; width: 100%; max-width: none; aspect-ratio: 1; border: 0; border-radius: 16px; overflow: hidden; background: #2B2724; touch-action: none; margin-top: 12px; cursor: grab; user-select: none; }

/* ==========================================================================
   広い画面（Artifact と同じ 640px から外枠を浮かせる）
   ========================================================================== */
@media (min-width: 640px) {
  body { padding: 16px 0; }
  .app {
    max-height: 900px;
    border-radius: var(--r-frame);
    box-shadow: 0 18px 50px rgba(90, 65, 50, .18);
    border: 1px solid var(--line2);
  }
}

/* PC 幅でも1行が伸び切らない（外枠の最大幅を保つ。f20 P2-3）。 */
@media (min-width: 700px) {
  .app { max-width: 430px; }
}

/* F37（2026-09-28・統合役）: コンペ管理6段（K1）の主催者の画面の行・組・表。Artifact の `.prow`・`.grp`・`.tbl`・`.todo` の値。
   実装係の画面が style 属性で持っていた値をここへ上げた（依頼の §16-3）。色は既存の変数だけで、
   白い字を --sage・--muted-rose に載せない。選んだ行（--rose-soft の地）の字は --ink（--dim を載せない）。 */
.screen .prow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.screen .prow:last-child { border-bottom: none; }
.screen button.prow { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.screen button.prow[aria-pressed="true"] { background: var(--rose-soft); border-radius: 12px; color: var(--ink); }
.screen .grp { background: #FFFFFF; border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); margin-top: 10px; }
.screen .grp .grp-no { font-weight: 700; font-size: 12px; color: var(--sage-d); letter-spacing: .1em; }
.screen .tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.screen .tbl th { font-size: 10.5px; color: var(--dim); font-weight: 500; letter-spacing: .1em; padding: 8px 6px; text-align: left; }
.screen .tbl td { padding: 11px 6px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.screen .tbl-box { padding: 4px 10px; overflow-x: auto; }
.screen .rank-in { width: 5.5em; min-height: 40px; padding: 6px 10px; }
.screen .check.todo.on .grow { color: var(--dim); text-decoration: line-through; }
/* F37b（2026-09-28・実装係。撮影確認 P3 #1・#3・#4・#9。編集長の指示でこの節の中だけ）。色は既存の変数だけ。
   - #1 段の切り替え（.seg）と下の題のあいだの余白。.screen .h1 の margin が 0 なので、余白は段の側に置く。
   - #3 TODO の印を Artifact の .todo .bx と同じ丸に。完了は Sage Dark の地に白い印（4.95:1）。--sage（#7E947C）に白を載せない。
     未完了の枠は --line-ui のまま（部品の境界 3:1。食い違い13）。終えた印は押せないが、薄くしない（白い印の比を落とさない）。
   - #4 組のカードの縦の余白を詰める（行・ボタンの高さ。写真・平均スコア・時刻は足さない。判断5・判断3）。
   - #9 会員の1件の「あなたの組」「あなたの順位」の見出しと値。 */
.screen .seg.stage-seg { position: static; margin: 0 -18px 20px; }
.screen .check.todo input[type="checkbox"] { width: 20px; height: 20px; border-radius: 50%; background-size: 12px 12px; }
.screen .check.todo input[type="checkbox"]:checked { border-color: var(--sage-d); background-color: var(--sage-d); }
.screen .check.todo input[type="checkbox"]:checked:disabled { opacity: 1; }
.screen .grp > .row { min-height: 32px; }
.screen .grp .prow { padding: 5px 0; gap: 8px; }
.screen .grp .btn.sm { height: 32px; padding: 0 14px; font-size: 12.5px; border-radius: 16px; }
.screen .grp .btn.sm.mt8 { margin-top: 6px; }
.screen .comp-mine-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.screen .comp-mine-item:last-child { border-bottom: none; }
.screen .comp-mine-h { margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--sub); letter-spacing: .04em; }
.screen .comp-mine-v { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.screen .comp-mine-none { margin: 0; font-size: 14px; color: var(--ink); }