/* 自動生成: build_tokens.py — 直接編集しない。tokens.json を直して再生成する。
 * 参照UI: Stripe（ダッシュボード＋ドキュメント） https://dashboard.stripe.com/login / https://docs.stripe.com
 * 抽出日: 2026-08-09
 */
:root {

  /* border */
  --border-width-hairline: 1px;
  --border-width-thick: 2px;

  /* color */
  --color-accent-active: #82281E;
  --color-accent-default: #B3392A;
  --color-accent-hover: #9A3024;
  --color-accent-subtle: #FBEDE9;
  --color-bg-active: #EBEFF5;
  --color-bg-canvas: #FFFFFF;
  --color-bg-hover: #F4F7FA;
  --color-bg-raised: #FFFFFF;
  --color-bg-selected: #FBEDE9;
  --color-bg-sunken: #F4F7FA;
  --color-bg-surface: #FFFFFF;
  --color-border-default: #D4DEE9;
  --color-border-focus: #B3392A;
  --color-border-strong: #B8C2CF;
  --color-border-subtle: #E3E8EE;
  --color-busy-bg: #F4F7FA;
  --color-busy-bg-cont: #F7F9FC;
  --color-busy-border: #E3E8EE;
  --color-busy-ink: #8792A2;
  --color-busy-ink-strong: #697386;
  --color-fg-disabled: #A3ACBA;
  --color-fg-inverse: #FFFFFF;
  --color-fg-muted: #697386;
  --color-fg-on-accent: #FFFFFF;
  --color-fg-primary: #1A1F36;
  --color-fg-secondary: #414552;
  --color-heat-1: #EEF5F1;
  --color-heat-2: #DDEBE3;
  --color-heat-3: #C8DFD1;
  --color-heat-4: #AED0BC;
  --color-overlay-scrim: rgba(26,31,54,0.45);
  --color-state-danger: #A02617;
  --color-state-danger-bg: #FBEDE9;
  --color-state-danger-border: #E6C9C4;
  --color-state-info: #2F5D7D;
  --color-state-info-bg: #E9F0F5;
  --color-state-info-border: #C9DCE8;
  --color-state-success: #2F7D5E;
  --color-state-success-bg: #EAF3EF;
  --color-state-success-border: #BFDCCF;
  --color-state-success-hover: #276A4F;
  --color-state-warning: #A96A1F;
  --color-state-warning-bg: #FAF1E3;
  --color-state-warning-border: #EAD9BE;

  /* density */
  --density-control_height_lg: 48px;
  --density-control_height_md: 40px;
  --density-control_height_sm: 32px;
  --density-focus_ring: 2px;
  --density-page_max_width: 760px;
  --density-sidebar_width: 240px;
  --density-table_row_height: 48px;

  /* font */
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", "Meiryo", sans-serif;
  --font-leading-none: 1;
  --font-leading-normal: 1.7;
  --font-leading-relaxed: 1.9;
  --font-leading-snug: 1.6;
  --font-leading-tight: 1.4;
  --font-size-2xl: 26px;
  --font-size-3xl: 32px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-sm: 13px;
  --font-size-xl: 21px;
  --font-size-xs: 12px;
  --font-tracking-normal: 0.02em;
  --font-tracking-tight: 0em;
  --font-tracking-wide: 0.22em;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  /* motion */
  --motion-duration-fast: 120ms;
  --motion-duration-instant: 80ms;
  --motion-duration-normal: 200ms;
  --motion-duration-slow: 320ms;
  --motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

  /* radius */
  --radius-full: 9999px;
  --radius-lg: 8px;
  --radius-md: 6px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-xl: 10px;

  /* shadow */
  --shadow-lg: 0 12px 32px rgba(26,31,54,0.14);
  --shadow-md: 0 4px 12px rgba(26,31,54,0.10);
  --shadow-none: none;
  --shadow-sm: 0 0 4px rgba(26,31,54,0.10);

  /* space */
  --space-0: 0px;
  --space-05: 2px;
  --space-1: 4px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-2: 8px;
  --space-20: 80px;
  --space-24: 96px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}


*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-fg-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--font-leading-normal);
  letter-spacing: var(--font-tracking-normal);
  font-feature-settings: "palt" 1;
  overflow-wrap: anywhere;
  line-break: strict;
}

h1, h2, h3 { line-height: var(--font-leading-tight); margin: 0; }

/* 文章の中のリンクだけを色付き下線にする。
   部品として作ったリンク(ボタン・タブ・戻る・一覧の行)は各自で見た目を持つ。
   ここで一律に色を付けると、その手の画面が赤い下線だらけになる(shift 2026-08-15に2回やった)。
   除外を1つずつ足していくと必ず足し忘れるので、
   「class を持たないリンク＝文章の中のリンク」という決め方にしてある。
   部品を作るときは必ず class を付けること。 */
.page a:not([class]) {
  color: var(--color-accent-default);
  text-decoration: underline;
  text-underline-offset: var(--space-05);
}

/* 1つ前に戻る導線。どの下層画面にも置く(出口がホームだけだと戻り直しになる) */
.backlink {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
}
.backlink:hover { color: var(--color-fg-secondary); text-decoration: underline; }
.backlink:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
  outline-offset: var(--space-05);
}

.page {
  max-width: var(--density-page_max_width);
  margin: 0 auto;
  padding: var(--space-4);
}

/* 店側の管理画面(ログイン後)は一覧と表が主役。760px だと広い画面で左右が空きすぎる(2026-09-30 祐也さん「左右の無駄な余白をなくして」。
   キンタイ 2026-09-21 と同じ 1.6 倍)。スマホでは .page と同じ(幅いっぱい)。客の画面(/s /c /my)と法務ページは 760px のまま */
.page--wide {
  max-width: calc(var(--density-page_max_width) * 1.6);
}

/* ---------- ヘッダ・フッタ ---------- */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
}
.appbar__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.appbar__by {
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-fg-muted);
  white-space: nowrap;
}
.appbar__sub { font-size: var(--font-size-sm); color: var(--color-fg-muted); }
/* いま誰として見ているか。店名より本人の名前を目立たせる(shift 2026-08-17) */
.appbar__me { color: var(--color-fg-primary); font-weight: var(--font-weight-semibold); }
/* どの画面からでも1タップでホームへ(shift 2026-08-17)。
   以前は深い画面からホームまで3タップかかっていた */
.appbar__home {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--density-control_height_md);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-fg-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.appbar__home:hover { background: var(--color-bg-hover); }

.sitefoot {
  padding: var(--space-8) var(--space-4) var(--space-10);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-fg-disabled);
}
.sitefoot__links {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}
.sitefoot__links a { color: var(--color-fg-muted); text-decoration: none; }
.sitefoot__links a:hover { text-decoration: underline; }

/* ---------- 管理画面のタブ(キンタイから) ---------- */
.subnav {
  display: flex;
  gap: var(--space-1);
  background: var(--color-bg-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  margin-bottom: var(--space-5);
  /* タブが7つあるので、狭い画面では折り返さず横に流す(キンタイの4枚の法務タブと同じ) */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.subnav__item {
  flex: 1 0 auto;
  /* <button> のタブはブラウザ既定の枠と灰色が付くので消す(公式LINEのタブが太い枠のボタンに見えていた) */
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-secondary);
  text-decoration: none;
  /* タブ名は絶対に途中で折り返させない。
     幅375pxで1枠81pxしか取れず、キンタイでは2行に割れて高さが1.6倍になっていた */
  white-space: nowrap;
}
.subnav__item--on {
  background: var(--color-bg-surface);
  color: var(--color-fg-primary);
  box-shadow: var(--shadow-sm);
}
/* まだ作っていない画面のタブ。押せないことが見た目で分かるようにする
   (押せるように見えて何も起きない、を作らない) */
.subnav__item--soon {
  color: var(--color-fg-disabled);
  cursor: default;
}
.subnav__item:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
}

/* ---------- カード ---------- */
.card {
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card + .card { margin-top: var(--space-4); }
.card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}
.card__sub { font-size: var(--font-size-sm); color: var(--color-fg-muted); margin-bottom: var(--space-4); }
/* 最上段に置く「いちばん先にやること」のカード(Google未接続など)。枠の色で立たせる */
.card--attention { border-color: var(--color-accent-default); }

/* ---------- ボタン ---------- */
/* 【トークン名は _ 区切り】--density-control_height_lg であって -height- ではない。
   間違えても CSS は黙って無視するので、ボタンの最低高さが効かず、
   横に並べたときだけ高さが不揃いになって現れる(shift 2026-08-16に11か所まとめて直した)。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--density-control_height_lg);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-width-hairline) solid transparent;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-tight);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-duration-fast) var(--motion-easing-standard);
}
.btn:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
  outline-offset: var(--space-05);
}
.btn--primary { background: var(--color-accent-default); color: var(--color-fg-on-accent); }
.btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn--primary:active:not(:disabled) { background: var(--color-accent-active); }
.btn--secondary {
  background: var(--color-bg-surface);
  color: var(--color-fg-primary);
  border-color: var(--color-border-default);
}
.btn--secondary:hover:not(:disabled) { background: var(--color-bg-hover); }
.btn--ghost {
  background: transparent;
  color: var(--color-fg-secondary);
  min-height: var(--density-control_height_md);
  padding: var(--space-2) var(--space-3);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}
.btn--ghost:hover:not(:disabled) { background: var(--color-bg-hover); }
/* ボタンの大きさをそろえる(2026-10-20 「ボタンのデザインがいけてない」: 枠つきの大きい「開く」と文字だけの小さい「消す」が並んでちぐはぐだった)
   ・横に並ぶボタンは、文字だけのボタンも同じ高さ・同じ文字の大きさにする
   ・一覧の行の中のボタンは、全部ひとまわり小さい同じ大きさにする(行が太らない) */
.btnrow .btn--ghost { min-height: var(--density-control_height_lg); padding: var(--space-3) var(--space-4); font-size: var(--font-size-base); }
.list__row .btn, .list__row .btnrow .btn { width: auto; min-height: var(--density-control_height_md); padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.list__row .btnrow { gap: var(--space-2); flex-wrap: nowrap; }
.btn:disabled {
  background: var(--color-bg-sunken);
  color: var(--color-fg-disabled);
  border-color: var(--color-border-subtle);
  cursor: not-allowed;
}
.btn--line { background: var(--color-state-success); color: var(--color-fg-on-accent); }
.btn--line:hover:not(:disabled) { background: var(--color-state-success-hover); }
/* ボタンを縦に積んだときの間。

   【横に並べる器では、器の側で打ち消す】(shift 2026-08-17)
   以前は「並べる場所ごとに margin-top: 0 を書く」約束にしていたが、
   新しく器を作るたびに書き忘れる。横並びの器は全部 flex なので、
   **flex の子には最初から効かせない**。横に並べる器は .btnrow に統一する。 */
.btn + .btn { margin-top: var(--space-3); }
.btnrow > .btn + .btn { margin-top: 0; }

/* 横に並べるボタンの列。狭い画面では折り返す */
.btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.btnrow .btn { width: auto; flex: 0 0 auto; white-space: nowrap; margin-top: 0; }
/* 横に並べたボタンは中身の幅で揃える(以前は flex: 1 で余白を取り合い、
   「詳細」が行の真ん中に浮く・↑↓編集外す が2段に割れる、が全画面で起きていた) */
.btnrow form { margin: 0; }
/* 横並びの列に直接置いた入力欄は1行に並べる(.input の既定は width: 100% で、絞り込みの欄が縦に積み上がっていた) */
.btnrow > .input { width: auto; flex: 1 1 12em; min-width: 0; }
.btnrow > .input--narrow { flex: 0 1 22ch; }

/* 広い画面では、押せる幅と文の幅を人が読める範囲に収める */
@media (min-width: 768px) {
  form > .btn { width: auto; min-width: 18ch; }
}
/* 行の中・横並びの列に置いたフォームのボタンは小さいまま(18ch の最小幅で ↑↓編集外す が横に広がっていた) */
.btnrow form > .btn, .list__row form > .btn, .toolbar form > .btn, .dashhead form > .btn { min-width: 0; }

/* ---------- 入力 ---------- */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.field__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-fg-secondary); }
.field__req {
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent-default);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.field__hint { font-size: var(--font-size-sm); color: var(--color-fg-muted); }
.field__error { font-size: var(--font-size-sm); color: var(--color-state-danger); }
.input {
  width: 100%;
  min-height: var(--density-control_height_lg);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-fg-primary);
}
/* 評価シミュレーションの条件(2026-10-20: ★と数字が縦に割れていた) */
.simform { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
.simform .field { margin-bottom: 0; }
.simform__unit { display: flex; align-items: center; gap: var(--space-2); }
.simratio { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.simratio__item { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.simratio__star { font-weight: var(--font-weight-semibold); color: var(--color-state-warning); min-width: 2.2em; }
.table__row--empty td { color: var(--color-fg-muted); }
/* カードの下の小さな操作(返信不要にする等): 線で区切って、主な操作と見分ける */
.card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-width-hairline) solid var(--color-border-subtle); }
.card__foot .btn { width: auto; min-height: var(--density-control_height_md); padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); }
/* 投稿を作る: 種類に関係する欄だけ・ボタンが「なし」(値が空)か「電話」ならリンク先は出さない */
.pf:has(input[name="kind"][value="update"]:checked) .pf__ev,
.pf:not(:has(input[name="kind"][value="offer"]:checked)) .pf__offer { display: none; }
.pf:has(#pCta option[value=""]:checked) .pf__ctaurl,
.pf:has(#pCta option[value="CALL"]:checked) .pf__ctaurl { display: none; }
/* チェックを縦に並べる */
.stackchecks { display: flex; flex-direction: column; gap: var(--space-2); }
/* 開くと中身が出るボタン(招待する等)。三角の印は出さない */
.invitebox > summary { list-style: none; width: auto; display: inline-flex; }
.invitebox > summary::-webkit-details-marker { display: none; }
.invitebox[open] > summary { margin-bottom: var(--space-3); background: var(--color-bg-hover); }
/* お客さまのクーポン画面: 頭にお店のロゴ(無ければ頭文字)・番号に名前をつける(浮いた6文字が何か分からなかった — 2026-10-20) */
.appbar__brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.appbar__mark .sidenav__markimg { display: block; width: var(--density-control_height_sm); height: var(--density-control_height_sm); border-radius: var(--radius-md); }
.appbar__logo { width: var(--density-control_height_md); height: var(--density-control_height_md); flex: 0 0 auto; border-radius: var(--radius-md); object-fit: contain; background: var(--color-bg-surface); border: var(--border-width-hairline) solid var(--color-border-subtle); }
.appbar__logo--initial { display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent-default); border-color: transparent; color: var(--color-fg-on-accent); font-weight: var(--font-weight-bold); }
.cp-code { display: flex; justify-content: center; align-items: baseline; gap: var(--space-2); }
.cp-code__label { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
.cp-code__value { font-family: var(--font-family-mono); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); letter-spacing: var(--font-tracking-wide); }
/* 長い設定の保存ボタンは画面の下に浮かせる(いちばん下まで行かないと押せず、押し忘れた — 2026-10-20) */
.savebar { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); box-shadow: var(--shadow-md); }
.savebar__hint { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-sm); color: var(--color-fg-muted); }
.savebar .btn { width: auto; }
@media (max-width: 640px) { .savebar__hint { display: none; } .savebar .btn { width: 100%; } }
/* 素のままだった部品をアプリの見た目にそろえる(2026-10-20 全画面の部品の見直し)
   ・チェックと丸はお店の色(ブラウザの青だった)
   ・数字の欄の上下の小さな矢印は消す(押しにくく、見た目だけ増える)
   ・日付と時刻は明るい見た目に固定、文章の欄は縦にだけ伸ばせる・行間を読みやすく
   ・薄い例の文は同じ薄さに */
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent-default); width: var(--space-4); height: var(--space-4); margin: 0; flex: 0 0 auto; cursor: pointer; vertical-align: middle; }
.check { gap: var(--space-2); }
input[type="number"].input { -moz-appearance: textfield; appearance: textfield; }
input[type="number"].input::-webkit-outer-spin-button, input[type="number"].input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="date"].input, input[type="time"].input { color-scheme: light; accent-color: var(--color-accent-default); }
textarea.input { resize: vertical; line-height: var(--font-leading-normal); }
.input::placeholder { color: var(--color-fg-muted); opacity: 1; }
/* 選択欄(2026-10-20 「下矢印の位置も悪い」: ブラウザの素の矢印が右端に張りついていた)。矢印は自前で描き、右に余白をとる */
select.input {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23697386' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: var(--space-3) var(--space-3);
  cursor: pointer;
}
.input:focus-visible {
  outline: var(--density-focus_ring) solid var(--color-border-focus);
  outline-offset: var(--space-05);
  border-color: var(--color-border-focus);
}
.input--error { border-color: var(--color-state-danger); }
/* 入力欄が画面幅いっぱいに間延びしないようにする。幅は「入る文字数」で決める */
.input--narrow { max-width: 28ch; }
/* ファイルを選ぶ欄。ブラウザ既定の灰色ボタンを、アプリのボタンの見た目に寄せる */
.input[type="file"] { padding: var(--space-2); font-size: var(--font-size-sm); color: var(--color-fg-secondary); }
.input[type="file"]::file-selector-button { margin-right: var(--space-3); padding: var(--space-2) var(--space-4); border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-surface); color: var(--color-fg-primary); font-family: inherit; font-weight: var(--font-weight-medium); cursor: pointer; }

/* ---------- 案内・注意 ---------- */
/* 【前のものとくっつかないようにする】(shift 2026-08-17 祐也さんの指摘)
   .notice が自前の余白を持たないと、置く側が毎回 style で足す形になり、
   足し忘れるとボタンのすぐ下に張り付いて1つの塊に見える。
   置く側の注意力に頼らず、既定で間を空ける。 */
.notice {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  background: var(--color-bg-sunken);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-snug);
}
.notice + .notice, .card + .notice, .notice + .card, .btnrow + .notice, .section + .notice { margin-top: var(--space-4); }
.notice__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.notice--warning {
  background: var(--color-state-warning-bg);
  border-color: var(--color-state-warning-border);
  color: var(--color-state-warning);
}
.notice--danger {
  background: var(--color-state-danger-bg);
  border-color: var(--color-state-danger-border);
  color: var(--color-state-danger);
}
.notice--info {
  background: var(--color-state-info-bg);
  border-color: var(--color-state-info-border);
  color: var(--color-state-info);
}
.notice--success {
  background: var(--color-state-success-bg);
  border-color: var(--color-state-success-border);
  color: var(--color-state-success);
}

/* ---------- 相手・用件のサマリー(型A: 常に見えている) ---------- */
.summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-sunken);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.summary__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--density-control_height_lg);
  height: var(--density-control_height_lg);
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent-default);
  font-weight: var(--font-weight-semibold);
}
.summary__name { font-weight: var(--font-weight-semibold); }
.summary__meta { font-size: var(--font-size-sm); color: var(--color-fg-muted); }

/* ---------- 一覧(今日やること・口コミ等) ---------- */
.list { display: grid; gap: var(--space-2); }
.list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--density-table_row_height);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.list__main { font-weight: var(--font-weight-medium); }
/* 行の左(文)は残りの幅を取り、右(ボタン・数)は中身の幅のまま。ボタンは2段に割らない */
.list__row > :first-child { flex: 1 1 auto; min-width: 0; }
.list__row > .btn, .list__row > form, .list__row > .btnrow, .list__row > .list__num { flex: 0 0 auto; }
.list__row > .btn, .list__row > form .btn { width: auto; }
.list__row > .btnrow { flex-wrap: nowrap; }
@media (max-width: 640px) { .list__row { flex-wrap: wrap; } .list__row > .btnrow { flex-wrap: wrap; } }
/* スマホ: 行の右端の「›」は折り返して左下に落ちる(2026-10-20 全画面の見直し)。行全体が押せるので出さない */
@media (max-width: 640px) { .list__row > .list__num:last-child { display: none; } }
/* shift から移植した画面(ops-page 等)が使う旧名。見た目は .list__main と同じ */
.list__date { font-weight: var(--font-weight-medium); }
.list__sub { font-size: var(--font-size-sm); color: var(--color-fg-muted); }
.list__num {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* ---------- バッジ ---------- */
.badge {
  display: inline-block;
  padding: var(--space-05) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border: var(--border-width-hairline) solid transparent;
}
.badge--info { background: var(--color-state-info-bg); color: var(--color-state-info); border-color: var(--color-state-info-border); }
/* 色の意味を持たない札(投稿の「最新情報」など)。枠だけで、文字だけに見えないように */
.badge--neutral { background: var(--color-bg-sunken); color: var(--color-fg-secondary); border-color: var(--color-border-subtle); }
.badge--warning { background: var(--color-state-warning-bg); color: var(--color-state-warning); border-color: var(--color-state-warning-border); }
/* 赤バッジ(Google接続の失効・同期失敗)。DESIGN §4「失効は画面の赤バッジ」 */
.badge--danger { background: var(--color-state-danger-bg); color: var(--color-state-danger); border-color: var(--color-state-danger-border); }
.badge--done { background: var(--color-state-success-bg); color: var(--color-state-success); border-color: var(--color-state-success-border); }
.badge--accent { background: var(--color-accent-subtle); color: var(--color-accent-default); }
/* shift から移植した画面(ops-page / settings-page)が使う旧名。意味は「人の手で付けた・未確認」 */
.badge--manual { background: var(--color-accent-subtle); color: var(--color-accent-default); }

/* ---------- チェックボックス付きの1行(設定の通知ON/OFFなど) ---------- */
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--density-control_height_md);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
/* 縦に積んだ選択肢は詰める(1つ48pxの間隔で、3択がカード1枚ぶんの高さになっていた) */
.field > .check { min-height: var(--density-control_height_sm); }
.field > .check + .check { margin-top: calc(-1 * var(--space-2)); }

/* 切り替え(状態の絞り込み・期間など)。管理画面のタブと同じ見た目の小型版 */
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); background: var(--color-bg-sunken); border-radius: var(--radius-md); }
.seg__item { padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-fg-secondary); text-decoration: none; white-space: nowrap; }
.seg__item:hover { color: var(--color-fg-primary); }
.seg__item--on { background: var(--color-bg-surface); color: var(--color-fg-primary); box-shadow: var(--shadow-sm); }
.seg__count { margin-left: var(--space-1); font-variant-numeric: tabular-nums; color: var(--color-fg-muted); }
/* 小さな絞り込み(星・言語など)。押されているものだけ枠を付ける */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.chips__label { font-size: var(--font-size-xs); color: var(--color-fg-muted); margin-right: var(--space-1); }
.chip { padding: var(--space-1) var(--space-3); border: var(--border-width-hairline) solid transparent; border-radius: var(--radius-full); font-size: var(--font-size-sm); color: var(--color-fg-secondary); text-decoration: none; white-space: nowrap; }
.chip:hover { background: var(--color-bg-hover); }
.chip--on { border-color: var(--color-border-default); background: var(--color-bg-surface); color: var(--color-fg-primary); font-weight: var(--font-weight-medium); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }

/* ---------- 状態のチップ(運営コンソールのヘルス等。shift の .fill/.fillchip) ---------- */
.fill { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.fillchip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  background: var(--color-bg-sunken);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
.fillchip--short { background: var(--color-state-danger-bg); border-color: var(--color-state-danger-border); color: var(--color-state-danger); }
.fillchip--ok { background: var(--color-state-success-bg); border-color: var(--color-state-success-border); color: var(--color-state-success); }
.fillchip--over { background: var(--color-state-warning-bg); border-color: var(--color-state-warning-border); color: var(--color-state-warning); }
.fillchip__name { font-weight: var(--font-weight-medium); margin-right: var(--space-2); }

/* ---------- 空状態 ---------- */
.empty {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-fg-muted);
}
.empty__title { font-weight: var(--font-weight-semibold); color: var(--color-fg-secondary); margin-bottom: var(--space-2); }
.empty__body { font-size: var(--font-size-sm); margin-bottom: var(--space-5); }

/* ---------- 招待リンクなど、コピーして渡す文字列 ---------- */
.invitelink {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-surface);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  word-break: break-all;
  color: var(--color-fg-primary);
}

/* ---------- 保存メッセージ(画面の下に浮かせる) ----------
   画面いちばん上に出していた時は、下の方で作業していると目に入らなかった(shift 2026-08-16の点検) */
.toast {
  position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  /* 【余白のトークンを幅に使わない】(shift 2026-08-17)。ここは読める行長で決める */
  z-index: 20; margin: 0 auto; max-width: min(34rem, 100%);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-fg-primary); color: var(--color-bg-surface);
  font-size: var(--font-size-sm); line-height: var(--font-leading-snug);
  box-shadow: var(--shadow-md);
  animation: toastout 8s forwards;
}
@keyframes toastout {
  0%, 85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(var(--space-2)); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---------- 法務ページの本文 ---------- */
.legal h2 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}
.legal p { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); line-height: var(--font-leading-relaxed); }
.legal ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); font-size: var(--font-size-sm); line-height: var(--font-leading-normal); }
.legal li { margin-bottom: var(--space-1); }

/* 記録の一覧(運営コンソールの監査ログ)。1件ずつ箱にすると50件で画面が長すぎる — 1つの箱に細い線で並べる */
.loglist { background: var(--color-bg-surface); border: var(--border-width-hairline) solid var(--color-border-subtle); border-radius: var(--radius-md); }
.loglist__row { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); }
.loglist__row + .loglist__row { border-top: var(--border-width-hairline) solid var(--color-border-subtle); }
.loglist__at { flex: 0 0 auto; color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.loglist__what { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .loglist__row { flex-direction: column; gap: 0; } }

/* ---------- 見出し・区切り ---------- */
.pagehead { margin-bottom: var(--space-5); }
.pagehead__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.pagehead__sub { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-fg-muted); }
.section + .section { margin-top: var(--space-6); }
.section__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-secondary);
  margin-bottom: var(--space-3);
}
.stack { display: grid; gap: var(--space-3); }
.muted { color: var(--color-fg-muted); }
.center { text-align: center; }
/* クーポン画面(/c/)の景品画像。客・スタッフが店先で見る小さな画面に収める */
.coupon__img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* LINEのクーポンのカードの見え方(coupon-app-page linePreview)。色は店の accent を --lc で受ける */
.lcard { --lc: var(--color-accent-default); width: 100%; max-width: 320px; margin-top: var(--space-3); border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-bg-surface); }
.lcard__hero { display: block; width: 100%; aspect-ratio: 20 / 13; object-fit: cover; }
.lcard__head { background: var(--lc); color: var(--color-fg-on-accent); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); padding: var(--space-3) var(--space-4); white-space: pre; }
.lcard__body { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.lcard__name { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lcard__desc { font-size: var(--font-size-sm); color: var(--color-fg-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lcard__row { display: flex; gap: var(--space-3); padding-top: var(--space-3); margin-top: var(--space-2); border-top: var(--border-width-hairline) solid var(--color-border-subtle); font-size: var(--font-size-sm); }
.lcard__label { color: var(--color-fg-muted); min-width: 3em; }
.lcard__value { font-weight: var(--font-weight-semibold); }
.lcard__note { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
.lcard__foot { padding: 0 var(--space-3) var(--space-3); }
.lcard__btn { display: block; text-align: center; background: var(--lc); color: var(--color-fg-on-accent); border-radius: var(--radius-md); padding: var(--space-3); font-weight: var(--font-weight-semibold); }
.lcard__btn--sub { margin-top: var(--space-2); background: var(--color-bg-sunken); color: var(--color-fg-primary); }

/* 評価(report-page)。成績の字は色でなく大きさと枠で読ませる(色弱でも読める) */
.grade {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2em; height: 2em; padding: 0 var(--space-2);
  border: var(--border-width-hairline) solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono); font-weight: var(--font-weight-semibold); font-size: var(--font-size-base);
  background: var(--color-bg-surface); color: var(--color-fg-default);
}
.grade--good { background: var(--color-state-success-bg); color: var(--color-state-success); border-color: var(--color-state-success-border); }
.grade--mid { background: var(--color-state-warning-bg); color: var(--color-state-warning); border-color: var(--color-state-warning-border); }
.grade--low { background: var(--color-state-danger-bg); color: var(--color-state-danger); border-color: var(--color-state-danger-border); }
.grade--big { min-width: 2.2em; height: 2.2em; font-size: var(--font-size-2xl); }
.evalhead { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.evalhead__score { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.axes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.axes__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-2); border: var(--border-width-hairline) solid var(--color-border-subtle); border-radius: var(--radius-md); }
.axes__label { font-size: var(--font-size-sm); color: var(--color-fg-muted); white-space: nowrap; }
.axes__score { font-family: var(--font-family-mono); font-size: var(--font-size-sm); }
@media (max-width: 900px) { .axes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .axes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evalsum { white-space: normal; padding: var(--space-3); background: var(--color-bg-canvas); border-radius: var(--radius-md); }
.bars { display: flex; align-items: flex-end; gap: var(--space-1); height: 120px; margin-bottom: var(--space-1); }
.bars__col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.bars__bar { width: 100%; background: var(--color-accent-default); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.bars__axis { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-fg-muted); margin-bottom: var(--space-3); }
.prebox { white-space: pre-wrap; font-family: var(--font-family-mono); font-size: var(--font-size-xs); background: var(--color-bg-sunken); border: var(--border-width-hairline) solid var(--color-border-subtle); border-radius: var(--radius-md); padding: var(--space-3); margin: var(--space-2) 0 0; }
.tablewrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.table th, .table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); white-space: nowrap; vertical-align: top; }
.table th { color: var(--color-fg-muted); font-weight: var(--font-weight-medium); }
.simgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.simgrid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hoursday { padding: var(--space-3) 0; border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); }
.hoursday__name { min-width: 4.5em; margin: 0; }
.menuitem { padding: var(--space-2) 0; border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); }
@media (max-width: 640px) { .simgrid { grid-template-columns: 1fr; } }
.simcard { align-items: flex-start; text-align: left; padding: var(--space-3); }
.evalaxis { margin-top: var(--space-4); }
.evalaxis__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.evalaxis__name { font-weight: var(--font-weight-semibold); }
.todo { padding-left: 1.4em; margin: 0; }
.todo li + li { margin-top: var(--space-2); }
/* ダッシュボード(公式LINEのホーム)。数字は大きく、説明は小さく */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card .kpis { margin-bottom: 0; }
.card .kpi { background: var(--color-bg-canvas); border-color: var(--color-border-subtle); padding: var(--space-3) var(--space-4); }
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--color-border-default); }
.kpi__delta { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.kpi__delta--up { color: var(--color-state-success); }
.kpi__delta--down { color: var(--color-state-danger); }
/* 星の内訳などの横棒 */
.hbars { display: grid; gap: var(--space-2); }
.hbar { display: grid; grid-template-columns: 3em minmax(0, 1fr) 4em; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); }
.hbar__track { height: var(--space-2); background: var(--color-bg-sunken); border-radius: var(--radius-full); overflow: hidden; }
.hbar__fill { height: 100%; background: var(--color-accent-default); border-radius: var(--radius-full); }
.hbar__num { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-fg-secondary); }
.kpi { background: var(--color-bg-surface); border: var(--border-width-hairline) solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.kpi__label { font-size: var(--font-size-sm); color: var(--color-fg-muted); }
.kpi__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--font-leading-tight); font-variant-numeric: tabular-nums; }
.kpi__unit { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-fg-muted); margin-left: var(--space-1); }
.kpi__sub { font-size: var(--font-size-xs); color: var(--color-fg-muted); margin: 0; }
@media (max-width: 760px) { .kpis, .kpis--3, .kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* スマホ: 数字のタイルが画面の半分を取っていた。詰めて、補足の文は1行で切る */
@media (max-width: 640px) { .kpis { gap: var(--space-2); } .kpi { padding: var(--space-3); } .kpi__value { font-size: var(--font-size-xl); } .kpi__label { font-size: var(--font-size-xs); } .kpi__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.dash2 { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.dash2 > .card { margin-top: 0; }
@media (max-width: 760px) { .dash2 { grid-template-columns: 1fr; } }
.dashhead { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.dashhead .card__title { margin-bottom: 0; }
/* 見出しの横・道具の列に置くボタンは中身の幅(.btn の既定は width: 100% なので、置き場所の側で打ち消す) */
.dashhead > .btn, .toolbar > .btn, .dashhead > form .btn, .toolbar > form .btn { width: auto; flex: 0 0 auto; }
.ratio { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.ratio__num { font-size: var(--font-size-3xl); }
.ratio__msg { font-size: var(--font-size-sm); margin: var(--space-4) 0 var(--space-1); }
.meter { position: relative; height: var(--space-3); background: var(--color-bg-sunken); border-radius: var(--radius-full); }
.meter--thin { height: var(--space-1); margin-top: var(--space-2); }
.meter__fill { height: 100%; background: var(--color-accent-default); border-radius: var(--radius-full); }
.meter__fill--under { background: var(--color-state-info); }
.meter__fill--over { background: var(--color-state-warning); }
.meter__fill--on { background: var(--color-state-success); }
.meter__mark { position: absolute; top: calc(-1 * var(--space-1)); bottom: calc(-1 * var(--space-1)); width: var(--border-width-thick); background: var(--color-fg-primary); }
.meter__scale { position: relative; display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-fg-muted); margin-top: var(--space-2); }
.meter__target { position: absolute; transform: translateX(-50%); color: var(--color-fg-primary); font-weight: var(--font-weight-medium); white-space: nowrap; }
.status { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); }
.status:first-child { padding-top: 0; }
.status:last-child { border-bottom: 0; padding-bottom: 0; }
.status__dot { flex: none; width: var(--space-2); height: var(--space-2); margin-top: var(--space-2); border-radius: var(--radius-full); background: var(--color-fg-disabled); }
.status__dot--ok { background: var(--color-state-success); }
.status__dot--ng { background: var(--color-state-warning); }
.status__label { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
.status__value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
/* 月ごとの縦棒(数と月の名前つき)。.bars は数の無い細かい日別用 */
.vbars { display: flex; align-items: stretch; gap: var(--space-2); height: 180px; }
.vbars__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.vbars__track { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; }
.vbars__bar { width: 100%; background: var(--color-accent-default); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.vbars__val { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.vbars__label { font-size: var(--font-size-xs); color: var(--color-fg-muted); white-space: nowrap; }
/* 一覧の行の右に置く小さな数字(配った・使われた など) */
.rowstat { display: flex; gap: var(--space-5); flex: 0 0 auto; }
.rowstat__item { display: flex; flex-direction: column; align-items: flex-end; }
.rowstat__num { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; line-height: var(--font-leading-tight); }
.rowstat__label { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
@media (max-width: 640px) { .rowstat { gap: var(--space-3); } }
/* 作り方を選ぶ折りたたみ(投稿・設問の追加など)。開いたものだけフォームが見える */
.maker { border: var(--border-width-hairline) solid var(--color-border-subtle); border-radius: var(--radius-md); padding: 0 var(--space-4); }
.maker + .maker { margin-top: var(--space-2); }
.maker > summary { cursor: pointer; padding: var(--space-4) 0; font-weight: var(--font-weight-semibold); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.maker[open] > summary { border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); margin-bottom: var(--space-4); }
.maker[open] { padding-bottom: var(--space-4); }
.maker__hint { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); color: var(--color-fg-muted); }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
@media (max-width: 640px) { .formgrid { grid-template-columns: 1fr; } }
/* 長い画面の目次(見出しへ飛ぶ)。上に貼り付いて、どこにいても飛べる */
.jumpnav { position: sticky; top: 0; z-index: 2; display: flex; gap: var(--space-1); overflow-x: auto; margin: 0 0 var(--space-4); padding: var(--space-2) 0; background: var(--color-bg-canvas); border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); }
.jumpnav a { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size-sm); color: var(--color-fg-secondary); text-decoration: none; white-space: nowrap; }
.jumpnav a:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }
.card[id] { scroll-margin-top: var(--space-16); }
.okitems { margin-top: var(--space-2); }
.okitems summary { cursor: pointer; font-size: var(--font-size-sm); color: var(--color-fg-secondary); padding: var(--space-2) 0; }
.okitems .list { margin-top: var(--space-2); }
/* 項目名と値の2列(基本情報など)。1項目1カードにしない */
.deflist { display: grid; grid-template-columns: 8em minmax(0, 1fr); margin: 0; }
.deflist dt, .deflist dd { margin: 0; padding: var(--space-3) 0; border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); }
.deflist dt { font-size: var(--font-size-sm); color: var(--color-fg-muted); }
.deflist dd { font-weight: var(--font-weight-medium); min-width: 0; }
@media (max-width: 640px) { .deflist { grid-template-columns: 1fr; } .deflist dt { border-bottom: 0; padding-bottom: 0; } }
.hours { border-collapse: collapse; font-weight: var(--font-weight-medium); }
.hours th { text-align: left; padding: 0 var(--space-4) var(--space-1) 0; font-weight: var(--font-weight-medium); color: var(--color-fg-muted); }
.hours td { padding: 0 0 var(--space-1); font-variant-numeric: tabular-nums; }
/* ---------- 店側の外枠: 左メニュー＋本文(2026-10-01 祐也さん「左にメニューがあった方がわかりやすい」) ---------- */
.shell { display: grid; grid-template-columns: var(--density-sidebar_width) minmax(0, 1fr); min-height: 100vh; }
.shell__main { min-width: 0; display: flex; flex-direction: column; }
.shell__main > .page { flex: 1 0 auto; width: 100%; padding: var(--space-6) var(--space-8); }
.sidenav { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-3); background: var(--color-bg-surface); border-right: var(--border-width-hairline) solid var(--color-border-subtle); }
.sidenav__brand { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); color: var(--color-fg-primary); text-decoration: none; }
.sidenav__mark { display: inline-flex; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-accent-default); flex: none; }
.sidenav__markimg { display: block; width: 100%; height: 100%; }
.sidenav__brand > span:last-child { display: flex; flex-direction: column; line-height: var(--font-leading-tight); }
.sidenav__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.sidenav__by { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
.sidenav__store { margin: 0 var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-subtle); }
.sidenav__storename { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.sidenav__me { font-size: var(--font-size-xs); color: var(--color-fg-secondary); margin-top: var(--space-05); }
.sidenav__nav { display: flex; flex-direction: column; gap: var(--space-3); }
.sidenav__group { display: flex; flex-direction: column; gap: var(--space-05); }
.sidenav__grouplabel { padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-fg-muted); }
.sidenav__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-fg-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; white-space: nowrap; }
.sidenav__item:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }
.sidenav__item--on { background: var(--color-accent-subtle); color: var(--color-accent-default); font-weight: var(--font-weight-semibold); }
.sidenav__item--soon { color: var(--color-fg-disabled); cursor: default; }
.sidenav__icon { flex: none; }
.sidenav__art { margin-top: auto; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-bg-sunken); text-align: center; }
.sidenav__art .illust { width: 100%; height: auto; }
.sidenav__art p { margin: var(--space-2) 0 0; font-size: var(--font-size-xs); color: var(--color-fg-secondary); line-height: var(--font-leading-normal); }
/* 見出しの右に画面ごとのイラスト */
.pagehead--art { position: relative; min-height: 96px; padding-right: calc(160px + var(--space-5)); }
.pagehead__art { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 160px; }
.pagehead__art .illust { display: block; width: 100%; height: auto; }
.sidenav__art .illust { display: block; width: 72%; margin: 0 auto; }
/* スマホ・狭い画面: 左メニューは上の横並びの帯にする(店名と絵は隠す) */
@media (max-width: 900px) {
  .shell { display: block; }
  .sidenav { position: sticky; top: 0; z-index: 3; height: auto; flex-direction: row; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-right: 0; border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); overflow-x: auto; }
  .sidenav__brand .sidenav__by, .sidenav__brand > span:last-child, .sidenav__store, .sidenav__art, .sidenav__grouplabel { display: none; }
  .sidenav__nav, .sidenav__group { flex-direction: row; gap: var(--space-1); }
  .sidenav__item { flex-direction: column; gap: var(--space-05); padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); }
  .shell__main > .page { padding: var(--space-4); }
  .pagehead--art { padding-right: calc(96px + var(--space-2)); min-height: 80px; }
  .pagehead__art { width: 96px; }
  /* 上の帯(左メニューの代わり)の下に目次を貼り付ける(同じ top: 0 だと帯に隠れる) */
  .jumpnav { top: var(--space-16); }
}
@media print { .sidenav { display: none !important; } .shell { display: block; } }

/* ---------- ホームのダッシュボード(2026-10-01「もっとワクワクさせて」) ---------- */
/* いちばん上の帯。お店の色で塗って、この28日の成績を1文で言い切る */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; margin-bottom: var(--space-4); padding: var(--space-6) var(--space-8); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-accent-default), var(--color-accent-active)); color: var(--color-fg-on-accent); }
.hero__eyebrow { font-size: var(--font-size-sm); opacity: 0.85; margin-bottom: var(--space-2); }
.hero__headline { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--font-leading-tight); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.hero__headline strong { font-size: var(--font-size-3xl); font-variant-numeric: tabular-nums; }
.hero__sub { margin: var(--space-3) 0 0; font-size: var(--font-size-sm); opacity: 0.95; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.hero__side { display: grid; gap: var(--space-3); }
.hero__stat { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg-surface); color: var(--color-fg-primary); text-decoration: none; min-width: 15em; }
.hero__stat > span:last-child { display: flex; flex-direction: column; }
.hero__grade { display: inline-flex; align-items: center; justify-content: center; width: var(--space-16); height: var(--space-16); border-radius: var(--radius-full); background: var(--color-state-success-bg); color: var(--color-state-success); font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); }
.hero__statlabel { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
.hero__statvalue { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; padding: var(--space-5); } .hero__stat { min-width: 0; } }
/* 増減の札 */
.chg { display: inline-flex; align-items: center; gap: var(--space-05); padding: var(--space-05) var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); background: var(--color-bg-sunken); color: var(--color-fg-muted); white-space: nowrap; }
.chg--up { background: var(--color-state-success-bg); color: var(--color-state-success); }
.chg--down { background: var(--color-state-danger-bg); color: var(--color-state-danger); }
/* タイルの推移線 */
.spark { display: block; width: 100%; height: var(--space-8); margin-top: var(--space-2); }
.spark polyline { stroke: var(--color-fg-disabled); }
.spark circle { fill: var(--color-accent-default); }
/* 目標の輪 */
.ring__track { stroke: var(--color-bg-sunken); }
.ring__fill { stroke: var(--color-accent-default); }
.ring__text { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); fill: var(--color-fg-primary); }
/* 月ごとの棒(いちばん新しいそろった月だけ濃い・途中の月は淡い) */
.mchart { display: flex; align-items: stretch; gap: var(--space-1); height: 220px; }
.mchart__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.mchart__track { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; }
.mchart__bar { width: 100%; background: var(--color-accent-subtle); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.mchart__bar--on { background: var(--color-accent-default); }
.mchart__bar--partial { background: var(--color-bg-sunken); border: var(--border-width-hairline) dashed var(--color-border-default); border-bottom: 0; }
/* すぐにできること(よく使う操作への近道) */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.quick__item { display: flex; flex-direction: column; gap: var(--space-05); padding: var(--space-3); border: var(--border-width-hairline) solid var(--color-border-subtle); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.quick__item:hover { border-color: var(--color-accent-default); background: var(--color-accent-subtle); }
.quick__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.mchart__val { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; min-height: 1.4em; white-space: nowrap; }
.mchart__label { font-size: var(--font-size-xs); color: var(--color-fg-muted); text-align: center; line-height: var(--font-leading-tight); white-space: nowrap; }
/* スマホでは月の名前を1つおきに(13本ぶんの名前が入りきらない) */
@media (max-width: 640px) { .mchart__col:nth-child(even) .mchart__label { visibility: hidden; } .mchart__val { font-size: 0; } }
.dash3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.dash3 > .card { margin-top: 0; display: flex; flex-direction: column; }
.dash3 > .card > .btn { margin-top: auto; align-self: flex-start; width: auto; }
@media (max-width: 960px) { .dash3 { grid-template-columns: 1fr; } }
.hbar--wide { grid-template-columns: minmax(0, 6em) minmax(0, 1fr) auto; }
.hbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar__delta { margin-left: var(--space-1); padding: 0 var(--space-1); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
/* マップの順位 */
.ranks { display: grid; gap: var(--space-2); }
.ranks__row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); }
.ranks__kw { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rankb { display: inline-flex; align-items: baseline; gap: var(--space-05); padding: var(--space-05) var(--space-2); border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.rankb small { font-size: var(--font-size-xs); }
.rankb--top { background: var(--color-state-success-bg); color: var(--color-state-success); font-size: var(--font-size-lg); }
.rankb--mid { background: var(--color-state-info-bg); color: var(--color-state-info); }
.rankb--low { background: var(--color-state-warning-bg); color: var(--color-state-warning); }
.rankb--out { background: var(--color-bg-sunken); color: var(--color-fg-muted); font-size: var(--font-size-xs); }
/* 最近の口コミ */
.revmini { display: grid; gap: var(--space-2); }
.revmini__item { display: block; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-canvas); color: inherit; text-decoration: none; }
.revmini__item:hover { background: var(--color-bg-hover); }
.revmini__head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
.revmini__stars { color: var(--color-state-warning); letter-spacing: 0; }
/* 口コミの星(一覧・詳細): 金色の塗り＋薄い残り */
.stars { color: var(--color-state-warning); letter-spacing: 0; }
.stars__off { color: var(--color-border-default); }
.revmini__off { color: var(--color-border-default); }
.revmini__name { font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.revmini__text { margin: var(--space-1) 0; font-size: var(--font-size-sm); color: var(--color-fg-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 評価の軸 */
.axisrows { display: grid; gap: var(--space-3); }
.axisrow { display: grid; grid-template-columns: auto 6em minmax(0, 1fr) 2.5em; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
.axisrow__grade { display: inline-flex; align-items: center; justify-content: center; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs); }
.axisrow__grade--good { background: var(--color-state-success-bg); color: var(--color-state-success); }
.axisrow__grade--mid { background: var(--color-state-warning-bg); color: var(--color-state-warning); }
.axisrow__grade--low { background: var(--color-state-danger-bg); color: var(--color-state-danger); }
/* お店からの発信 */
.minis { display: grid; gap: var(--space-2); }
.mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "sub value"; align-items: center; gap: 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-canvas); color: inherit; text-decoration: none; }
.mini:hover { background: var(--color-bg-hover); }
.mini__label { grid-area: label; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.mini > .kpi__sub { grid-area: sub; }
.mini__value { grid-area: value; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini__value small { font-size: var(--font-size-xs); color: var(--color-fg-muted); margin-left: var(--space-1); font-weight: var(--font-weight-medium); }

/* 口コミ評価シミュレーション。結論の文 → 3パターン → グラフ の順で読ませる */
.simhero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.simhero .kpi { border: 0; padding: 0; }
.simhero__answer { margin: var(--space-4) 0 0; padding: var(--space-4); background: var(--color-bg-canvas); border-radius: var(--radius-md); line-height: var(--font-leading-normal); }
.simpats { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.simpat { background: var(--color-bg-surface); border: var(--border-width-hairline) solid var(--color-border-subtle); border-top: var(--border-width-thick) solid var(--color-fg-disabled); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.simpat--ok { border-top-color: var(--color-state-success); }
.simpat--ng { border-top-color: var(--color-state-warning); }
.simpat__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.simpat__name { font-weight: var(--font-weight-semibold); }
.simpat__value { margin-top: var(--space-2); }
@media (max-width: 640px) { .simhero { grid-template-columns: 1fr; } }
.chart { display: block; width: 100%; height: auto; }
.chart__axis { stroke: var(--color-border-default); }
.chart__target { stroke: var(--color-state-success); }
.chart__label { fill: var(--color-fg-muted); font-size: var(--font-size-xs); }
.chart__label--target { fill: var(--color-state-success); font-weight: var(--font-weight-semibold); }
.chart__line--ideal { stroke: var(--color-accent-default); }
.chart__line--current { stroke: var(--color-fg-muted); }
.chart__line--trial { stroke: var(--color-state-warning); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--color-fg-secondary); }
.legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend__sw { width: var(--space-4); height: var(--space-1); border-radius: var(--radius-full); background: var(--color-fg-muted); }
.legend__sw--ideal { background: var(--color-accent-default); }
.legend__sw--trial { background: var(--color-state-warning); }
.legend__sw--target { background: var(--color-state-success); }
.simtable { margin-top: var(--space-4); }
.simtable summary { cursor: pointer; font-size: var(--font-size-sm); color: var(--color-fg-secondary); }
@media print {
  .appbar, .sitefoot, .subnav, .noprint { display: none !important; }
  .page { max-width: none; padding: 0; }
  .card { break-inside: avoid; border-color: var(--color-border-default); }
}
/* ---------- AIアシスタント(2026-10-11・本家 CARAVAN「AIに相談」と同じ形) ---------- */
.as { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.as__side { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: var(--border-width-hairline) solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.as__search { width: 100%; }
.as__threads { display: flex; flex-direction: column; gap: var(--space-05); max-height: 60vh; overflow-y: auto; }
.as__thread { display: block; width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-fg-secondary); font: inherit; font-size: var(--font-size-sm); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as__thread:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }
.as__thread--on { background: var(--color-accent-subtle); color: var(--color-accent-default); font-weight: var(--font-weight-semibold); }
.as__empty { font-size: var(--font-size-xs); color: var(--color-fg-muted); padding: var(--space-2) var(--space-3); }
.as__main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4); border: var(--border-width-hairline) solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.as__head { display: flex; align-items: center; gap: var(--space-3); }
.as__headimg { width: var(--space-12); height: var(--space-12); flex: none; }
.as__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); background: linear-gradient(90deg, var(--color-accent-default), var(--color-accent-active)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as__lead { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
.as__log { display: flex; flex-direction: column; gap: var(--space-3); min-height: 12rem; }
.as__row { display: flex; gap: var(--space-2); align-items: flex-start; }
.as__row--me { justify-content: flex-end; }
.as__avatar { width: var(--space-10); height: var(--space-10); flex: none; border-radius: var(--radius-full); background: var(--color-bg-sunken); }
.as__avatar--blank { visibility: hidden; }
.as__bubble { max-width: 46rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg-sunken); font-size: var(--font-size-sm); line-height: var(--font-leading-relaxed); white-space: pre-wrap; }
.as__row--me .as__bubble { background: var(--color-fg-primary); color: var(--color-fg-inverse); }
.as__items { display: grid; gap: var(--space-2); margin-top: var(--space-3); white-space: normal; }
.as__item { padding: var(--space-3); border: var(--border-width-hairline) solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.as__itemtitle { font-weight: var(--font-weight-semibold); }
.as__itembody { margin-top: var(--space-1); color: var(--color-fg-secondary); }
.as__itemlink { display: inline-block; margin-top: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-accent-default); text-decoration: none; }
.as__itemlink:hover { text-decoration: underline; }
.as__note { margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--color-fg-muted); }
.as__wait { display: flex; align-items: center; gap: var(--space-3); }
.as__waitimg { width: var(--space-16); height: var(--space-16); }
.as__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.as__chip { padding: var(--space-1) var(--space-3); border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-full); background: var(--color-bg-surface); color: var(--color-fg-secondary); font: inherit; font-size: var(--font-size-sm); cursor: pointer; }
.as__chip:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }
.as__chip--main { border-color: var(--color-accent-default); color: var(--color-accent-default); font-weight: var(--font-weight-semibold); }
.as__more > summary { cursor: pointer; font-size: var(--font-size-sm); color: var(--color-fg-muted); margin-bottom: var(--space-2); }
.as__form { display: flex; flex-direction: column; gap: var(--space-2); }
.as__input { width: 100%; min-height: 5rem; resize: vertical; }
.as__formrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.as__count { font-size: var(--font-size-xs); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 送るボタンは中身の幅(横並びの器で伸ばさない) */
.as__formrow .btn { flex: 0 0 auto; width: auto; min-width: 0; padding-left: var(--space-8); padding-right: var(--space-8); }
.as__usage { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
.as__privacy { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
.as__privacy > summary { cursor: pointer; }
.as__privacy p { margin: var(--space-2) 0 0; }
@media (max-width: 900px) {
  .as { grid-template-columns: 1fr; }
  .as__threads { max-height: 12rem; }
  /* スマホはやりとりを先に、会話の一覧は下に */
  .as__side { order: 2; }
}
/* クーポンの型のフォーム: 選んだ配り方に関係する欄だけ出す(2026-10-14。合言葉の欄は「紹介の合言葉」のときだけ) */
form:has(input[name="distribution"][value="referral"]:not(:checked)) .tform__referral { display: none; }
form:has(input[name="distribution"][value="referral"]:not(:checked)):has(input[name="distribution"][value="link"]:not(:checked)):has(input[name="distribution"][value="relay"]:not(:checked)) .tform__reply,
form:has(input[name="distribution"][value="referral"]:not(:checked)):has(input[name="distribution"][value="link"]:not(:checked)) .tform__asker { display: none; }
.tform__chooser { margin-top: var(--space-3); }
form:has(input[name="no_expiry"]:checked) .tform__days { display: none; }
.check__name { white-space: nowrap; }
/* クーポンの型: くわしい設定の折りたたみ(2026-10-18)。初めての人は名前・内容・配り方だけで作れる */
.tform__adv { margin: var(--space-4) 0; border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.tform__advsum { display: block; padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: var(--font-weight-semibold); list-style: none; }
.tform__advsum::-webkit-details-marker { display: none; }
.tform__advsum::before { content: '+'; margin-right: var(--space-2); color: var(--color-fg-muted); }
.tform__adv[open] > .tform__advsum::before { content: '−'; }
.tform__advsum .field__hint { display: block; margin-top: var(--space-1); font-weight: var(--font-weight-normal); }
.tform__advbody { padding: 0 var(--space-4) var(--space-2); border-top: var(--border-width-hairline) solid var(--color-border-subtle); }
/* 挿絵つきの選択肢カード(2026-10-19「他もこのスタイルにして」): 配り方・招待券のタイミング・使える回数・紹介者の聞き方 */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.pick { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); cursor: pointer; }
.pick:has(input:checked) { border-color: var(--color-accent-default); background: var(--color-accent-subtle); }
.pick__img { flex: 0 0 auto; width: var(--space-24); height: var(--space-24); }
.pick__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.pick .check { min-height: 0; align-items: flex-start; }
.pick .check__name { white-space: normal; }
.pick--withextra { flex-direction: column; gap: var(--space-2); }
/* 口コミの自動送信: 選んだタイミングの入力だけ出す */
.tw__delay, .tw__time { margin-top: var(--space-2); }
.tw__custom { display: inline-flex; align-items: center; gap: var(--space-2); }
.tw__custom[hidden] { display: none; }
form:has(input[name="auto_timing"][value="delay"]:not(:checked)) .tw__delay,
form:has(input[name="auto_timing"][value="time"]:not(:checked)) .tw__time { display: none; }
.pick__label { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.pick__more { width: auto; align-self: flex-end; min-height: var(--density-control_height_sm); padding-top: var(--space-1); padding-bottom: var(--space-1); }
/* リレー: 最初の人への配り方2つの見比べ(2026-10-20) */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.compare__item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); color: inherit; text-decoration: none; }
.compare__item:hover { background: var(--color-bg-hover); }
.compare__img { flex: 0 0 auto; width: var(--space-24); height: var(--space-24); }
.compare__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.compare__title { font-weight: var(--font-weight-semibold); }
.compare__form { margin: var(--space-2) 0 var(--space-1); }
.compare__form .input:not(.input--count) { flex: 1 1 12rem; min-width: 0; }
.compare__form .btn { width: auto; }
/* 公式LINE: テスト送信の宛先を登録する(LINEで送る＋QR・2026-10-20) */
.tt__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.tt__send .btn { width: auto; }
/* 配ったクーポンの取り消し: 押したときだけ理由の欄を開く(どの行にも入力欄が並んで重かった — 2026-10-20) */
.voidbox { position: relative; }
.voidbox > summary { list-style: none; cursor: pointer; }
.voidbox > summary::-webkit-details-marker { display: none; }
.voidbox[open] > summary { background: var(--color-bg-hover); }
.voidbox__form { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 5; display: flex; gap: var(--space-2); width: min(24rem, 80vw); padding: var(--space-3); border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); box-shadow: var(--shadow-md); }
.voidbox__form .input { flex: 1 1 auto; min-width: 0; }
.voidbox__form .btn { width: auto; }
/* タグを作る行: 名前は伸びる・色は札の見本から選ぶ(選択欄に色の名前だけだと分からなかった — 2026-10-20) */
.tagnew { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-sunken); }
.tagnew__name { flex: 1 1 14rem; min-width: 0; background-color: var(--color-bg-surface); }
.tagnew .btn { width: auto; }
.tagcolors { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tagcolor { position: relative; cursor: pointer; }
.tagcolor input { position: absolute; opacity: 0; pointer-events: none; }
.tagcolor .badge { padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); }
.tagcolor:has(input:checked) .badge { outline: var(--density-focus_ring) solid var(--color-border-focus); outline-offset: var(--space-05); }
.tagcolor:has(input:focus-visible) .badge { outline: var(--density-focus_ring) solid var(--color-border-focus); }
.taglist__color { width: auto; min-width: 7rem; }
/* 一覧の行の中の選択欄は、行の中のボタンと同じ高さ */
.list__row select.input { min-height: var(--density-control_height_md); padding-top: var(--space-1); padding-bottom: var(--space-1); font-size: var(--font-size-sm); }
/* 画像を選ぶ欄(2026-10-20): ブラウザの素の「ファイルを選択」をやめ、ほかのボタンと同じ見た目に */
input[type="file"].input { padding: var(--space-2); background: var(--color-bg-surface); font-size: var(--font-size-sm); color: var(--color-fg-secondary); }
input[type="file"]::file-selector-button { margin-right: var(--space-3); padding: var(--space-2) var(--space-4); border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); color: var(--color-fg-primary); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--color-bg-hover); }
/* 絞り込みの帯(2026-10-20 「AI感がある」: 同じ幅の選択欄と検索欄が並ぶだけだった)
   検索は虫めがねつきで伸びる・選択は名前つきで中身の幅・端に書き出し */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2); margin-bottom: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-sunken); }
.filterbar__search { position: relative; flex: 1 1 14rem; min-width: 0; }
.filterbar__search .input { width: 100%; padding-left: var(--space-8); background-color: var(--color-bg-surface); }
.filterbar__icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-fg-muted); pointer-events: none; }
.filterbar__sel { display: inline-flex; align-items: center; gap: var(--space-2); }
.filterbar__sel .input { width: auto; min-width: 9rem; background-color: var(--color-bg-surface); }
.filterbar__label { font-size: var(--font-size-sm); color: var(--color-fg-secondary); white-space: nowrap; }
.filterbar .check { min-height: 0; white-space: nowrap; }
.filterbar__end { margin-left: auto; width: auto; }
.bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bulkbar__label { font-size: var(--font-size-sm); color: var(--color-fg-secondary); }
.bulkbar .input { width: auto; min-width: 9rem; }
.bulkbar .btn { width: auto; }
/* マイクーポンのタブ(2026-10-20) */
.mycp { display: flex; gap: var(--space-4); align-items: flex-start; }
.mycp__img { flex: 0 0 auto; width: calc(var(--space-24) * 1.25); height: calc(var(--space-24) * 1.25); }
.mycp__body { min-width: 0; }
/* 作った直後の「次にやること」 */
.nextstep__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.nextstep__item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: var(--border-width-hairline) solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-canvas); }
.nextstep__item .btn { width: auto; align-self: flex-start; }
.nextstep__item .field__hint { margin: 0; flex: 1 1 auto; }
.nextstep__title { font-weight: var(--font-weight-semibold); }
/* 配り方の説明(挿絵つき)。native dialog。幅は読める行長で決める(余白のトークンを幅に使わない) */
.howto { width: min(36rem, calc(100% - var(--space-8))); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-bg-surface); color: var(--color-fg-primary); box-shadow: var(--shadow-lg); }
.howto::backdrop { background: var(--color-overlay-scrim); }
.howto__body { padding: var(--space-5); }
.howto__img { display: block; width: min(100%, calc(var(--space-24) * 3)); height: auto; margin: 0 auto var(--space-3); }
.howto__title { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--font-leading-snug); }
.howto__steps { margin: 0 0 var(--space-3); padding-left: var(--space-5); font-size: var(--font-size-sm); line-height: var(--font-leading-normal); }
.howto__steps li { margin: var(--space-1) 0; }
.howto__fit { margin: 0 0 var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-sunken); font-size: var(--font-size-sm); color: var(--color-fg-secondary); }
.howto__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.howto__actions .btn { width: auto; }
.invitelink__copy { width: auto; min-width: 0; margin-bottom: var(--space-2); }
/* 使える回数(0032): 手で1枚ずつは1回だけなので欄ごと隠す・回数の欄は「回数を決める」のときだけ・1人あたりの枚数は「1回だけ」のときだけ */
form:has(input[name="distribution"][value="manual"]:checked) .tform__userule { display: none; }
.tform__period { margin-top: var(--space-2); }
/* 「1か月 に 1 回まで」: 中身に合わせた幅(広い欄が2つ並ぶと間延びする — 2026-10-19) */
.tform__periodrow { flex-wrap: nowrap; align-items: center; }
.btnrow > .input--period { flex: 0 0 auto; width: 11ch; }
.btnrow > .input--count { flex: 0 0 auto; width: 6ch; text-align: center; }
/* 数字の欄はどこに置いても中身の幅(2026-10-20: 行の外だと横いっぱいに伸びていた) */
.input.input--count { flex: 0 0 auto; width: 8ch; text-align: center; }
.simform__unit .field__hint { white-space: nowrap; }
form:has(input[name="use_rule"][value="periodic"]:not(:checked)) .tform__period { display: none; }
form:has(input[name="use_rule"][value="once"]:not(:checked)):not(:has(input[name="distribution"][value="manual"]:checked)) .tform__limit { display: none; }
form:has(input[name="ask_referrer"][type="checkbox"]:not(:checked)) .tform__chooser { display: none; }
form:has(input[name="referrer_input"][value="choice"]:not(:checked)) .tform__choices { display: none; }
form:has(input[name="distribution"][value="referral"]:not(:checked)):has(input[name="distribution"][value="link"]:not(:checked)):has(input[name="distribution"][value="relay"]:not(:checked)) .tform__flow { display: none; }
/* リレー(0037・2026-10-14 リレークーポン): 枚数とお礼の欄はリレーのときだけ。リレーは1回だけ・1人1枚・紹介者を聞かないので、その欄は隠す。
   合言葉の案内文(reply)もリレーには無い(公式LINEの返事が無い — 2026-10-18 招待券方式) */
form:has(input[name="distribution"][value="relay"]:not(:checked)) .tform__relay { display: none; }
form:has(input[name="distribution"][value="relay"]:checked) .tform__reply,
form:has(input[name="distribution"][value="relay"]:checked) .tform__limit { display: none; }
.tform__invites { margin-top: var(--space-2); }

/* 印刷用のQR(2026-10-18 招待券方式 → 10-19 置き場所ごと): QR の絵と設定 */
.seedrow { padding-top: var(--space-4); border-top: var(--border-width-hairline) solid var(--color-border-subtle); }
.seedrow__stat { margin: var(--space-2) 0 0; }
.seedrow__more { margin-top: var(--space-3); }
.seedrow__more > summary { cursor: pointer; font-size: var(--font-size-sm); color: var(--color-fg-secondary); }
.seedrow__more > form, .seedrow__more > .btnrow { margin-top: var(--space-3); }
.capform .check { display: flex; align-items: center; gap: var(--space-2); }
.capform .check .input--count { flex: 0 0 auto; width: 7ch; text-align: center; }
.capform .check { white-space: nowrap; }
.capform:has(input[value="unlimited"]:checked) .capform__limited .input { visibility: hidden; }
.seedrow__name { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.qrbox { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; margin-top: var(--space-3); }
.qrbox__img { width: calc(var(--space-24) * 2); height: calc(var(--space-24) * 2); flex: 0 0 auto; border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.qrbox__img svg { display: block; width: 100%; height: 100%; }
.qrbox__body { flex: 1 1 16rem; min-width: 0; }
.ticket__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.flow__note { margin: 0; text-align: center; }
/* リレーの広がり: 贈られた人を1段ずつ字下げ */
.relay__row--d1 { padding-left: var(--space-4); }
.relay__row--d2 { padding-left: var(--space-8); }
.relay__row--d3 { padding-left: var(--space-12); }
.relay__row--d4 { padding-left: var(--space-16); }
.relay__row--d5 { padding-left: var(--space-20); }
.relay__row--d6 { padding-left: var(--space-24); }
/* LINEでの流れ(見本)。左=公式LINE・右=お客さま */
.flow { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg-sunken); }
.flow__row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); max-width: 85%; }
.flow__row--me { align-self: flex-end; align-items: flex-end; }
.flow__who { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
.flow__bubble { padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--color-bg-surface); border: var(--border-width-hairline) solid var(--color-border-subtle); font-size: var(--font-size-sm); white-space: pre-wrap; }
.flow__row--me .flow__bubble { background: var(--color-state-success-bg); border-color: var(--color-state-success-border); }
.flow__buttons { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.flow__button { padding: var(--space-1) var(--space-3); border: var(--border-width-hairline) solid var(--color-accent-default); border-radius: var(--radius-full); background: var(--color-bg-surface); color: var(--color-accent-default); font-size: var(--font-size-xs); }