/* Hallmark · macrostructure: Narrative Workflow · theme: 処理券と受付票 · nav/footer: in-app back bar / source list per architecture */
/* Hallmark · custom theme: 処理券と受付票 · palette: paper, ink, green action, signal frame */
:root {
  /* 紙と墨 */
  --paper: oklch(97.6% 0.008 95);
  --paper-2: oklch(94.6% 0.012 95);
  --paper-3: oklch(90.5% 0.014 95);
  --ink: oklch(25% 0.02 160);
  --ink-2: oklch(43% 0.018 160);
  --line: oklch(85% 0.012 120);
  --line-strong: oklch(62% 0.016 150);
  /* 主操作（次へ進む） */
  --go: oklch(40% 0.085 162);
  --go-press: oklch(34% 0.08 162);
  --go-tint: oklch(93.5% 0.03 162);
  --on-go: oklch(98% 0.008 95);
  /* 枠（写真の上だけで使う） */
  --signal: oklch(87% 0.165 96);
  --signal-tint: oklch(87% 0.165 96 / 0.24);
  --on-signal: oklch(24% 0.03 96);
  --frame-edge: oklch(18% 0.01 160 / 0.55);
  --frame-other: oklch(97% 0.006 250);
  --frame-other-tint: oklch(97% 0.006 250 / 0.22);
  /* 粗大ごみ以外（別の出し方） */
  --other-ink: oklch(42% 0.11 255);
  --other-tint: oklch(94.5% 0.022 255);
  /* 写真の台 */
  --stage: oklch(19% 0.012 160);
  --stage-ink: oklch(93% 0.01 95);
  --stage-ink-2: oklch(78% 0.01 95);
  --scrim: oklch(12% 0.01 160 / 0.22);
  --focus: oklch(56% 0.17 250);
  --font-display: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --font-num: var(--font-body);
  /* 文字サイズ（1.25比、5段） */
  --t-meta: 0.8125rem;   /* 13 */
  --t-body: 1rem;        /* 16 */
  --t-lead: 1.25rem;     /* 20 */
  --t-head: 1.5625rem;   /* 25 */
  --t-display: 1.9375rem;/* 31 */
  /* 間隔 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  /* 角 */
  --r-s: 6px; --r-m: 10px; --r-l: 16px; --r-chip: 22px;
  /* 動き */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-micro: 120ms; --d-short: 240ms; --d-long: 420ms;
  /* Wao（写真→枠）。前回の検出実測（初回は初期化）が300ms以内: 走査なし */
  --wao-photo: 120ms;
  --wao-dim: 200ms;
  --wao-start: 120ms;
  --wao-sweep: 1200ms;   /* 前回実測300ms超またはモデル待ち: 走査帯の1往復 */
  --wao-box: 240ms;
  --wao-stagger: 80ms;
  --wao-label: 160ms;
  --wao-label-lag: 100ms;
  /* 重なり */
  --z-photo: 1; --z-box: 2; --z-label: 3; --z-sheet: 4; --z-bar: 5;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: "palt" 0;
  font-synthesis: none;
}
button, input { font: inherit; color: inherit; }
/* a の既定（UA の青・下線）を残さない。文中リンクは主操作の緑、ボタン型の a は各クラスで上書き */
a { color: var(--go); text-underline-offset: 3px; }
[hidden] { display: none !important; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ───────── アプリ共通 ───────── */
.app { display: flex; flex-direction: column; width: min(100%, 480px); min-height: 100svh; height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--paper); }
.bar {
  flex: none; height: 48px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s2); position: relative; z-index: var(--z-bar);
}
.bar--dark { background: var(--stage); color: var(--stage-ink); }
.bar__btn {
  min-height: 44px; min-width: 44px; padding: 0 var(--s2); display: inline-flex; align-items: center; gap: var(--s1);
  background: transparent; border: 0; font-size: var(--t-body); font-weight: 700; white-space: nowrap;
  color: inherit; text-decoration: none;
}
.btn {
  min-height: 52px; width: 100%; border-radius: var(--r-m); border: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-body); white-space: nowrap;
  transition: background-color var(--d-micro) var(--ease-out), transform var(--d-micro) var(--ease-out);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn--go { background: var(--go); color: var(--on-go); }
.btn--go:active { background: var(--go-press); }
.btn--line { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--shoot { min-height: 64px; font-size: var(--t-lead); }
.btn--shoot svg.i { width: 26px; height: 26px; }
.btn[disabled] { background: var(--paper-3); color: var(--ink-2); box-shadow: none; cursor: default; transform: none; }
.btn__sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--t-meta); line-height: 1.2; white-space: normal; text-align: center; }
.btn[disabled] .btn__sub { color: var(--ink); }
.btn--two { flex-direction: column; gap: 2px; padding: var(--s1) var(--s2); }
.btn__main { display: inline-flex; align-items: center; gap: var(--s2); }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.link { color: var(--go); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; gap: var(--s1); }

/* ───────── トップ ───────── */
.top { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: var(--s3) var(--s4) var(--s4); gap: var(--s4); }
.top__mast { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.wordmark { font-family: var(--font-display); font-weight: 900; font-size: var(--t-body); letter-spacing: 0.02em; margin: 0; white-space: nowrap; }
.top__area { font-size: var(--t-meta); color: var(--ink-2); white-space: nowrap; }
.sample { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--stage); }
.top h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--t-head); line-height: 1.32; margin: 0; letter-spacing: 0.01em; }
.top__privacy { margin: 0; font-size: var(--t-meta); color: var(--ink-2); line-height: 1.6; }
.top__spacer { flex: 1 1 auto; min-height: 0; }
.top__actions { display: grid; gap: var(--s2); }
.file-actions { position: relative; }
.file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.file-actions:focus-within .btn, .btn-row:focus-within .btn { outline: 3px solid var(--focus); outline-offset: 2px; }
.saved { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s1) var(--s1) var(--s1) var(--s4); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper-2); }
.saved p { margin: 0; font-size: var(--t-meta); color: var(--ink-2); }
.saved b { font-size: var(--t-body); color: var(--ink); margin-left: var(--s1); }
/* 「変える」の押せる幅を左右に広げ、枠線から文字を離す（文字から枠まで左と同じ16px） */
.saved .link { padding: 0 var(--s3); }
.camhelp { border-top: 1px solid var(--line); padding-top: var(--s3); }
.camhelp p { margin: 0 0 var(--s1); font-size: var(--t-meta); }
.camhelp b { font-size: var(--t-body); display: block; margin-bottom: 2px; }
.camhelp details { font-size: var(--t-meta); color: var(--ink-2); }
.camhelp summary { min-height: 44px; display: flex; align-items: center; color: var(--go); font-weight: 700; cursor: pointer; }

/* ───────── 写真の台と枠 ───────── */
.stage { flex: 1 1 auto; min-height: 0; background: var(--stage); container-type: size; display: grid; place-items: center; position: relative; }
.photo {
  --ar: 0.75;
  position: relative;
  width: min(calc(100cqw - 24px), calc((100cqh - 24px) * var(--ar)));
  aspect-ratio: var(--ar);
  z-index: var(--z-photo);
}
.sample .photo { width: 100%; }
.photo--sample { --ar: 2.86; background: var(--paper-2); }
.sample { background: var(--paper-2); border: 1px solid var(--line); }
.sample .photo::after { display: none; }
.sample .photo__img { stroke: var(--ink-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.photo__img, .photo > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 2px; }
.photo::after { content: ""; position: absolute; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; }
.photo.has-boxes::after { opacity: 1; }
.scan {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0;
  transition: opacity var(--d-micro) var(--ease-out), display var(--d-micro) var(--ease-out);
  transition-behavior: allow-discrete;
}
.scan::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%;
  background: linear-gradient(to bottom, transparent 0, var(--signal-tint) calc(100% - 2px), var(--signal) calc(100% - 2px));
  transform: translateY(-100%);
}
.photo.is-whole { outline: 3px solid var(--signal); outline-offset: 3px; }

.box {
  position: absolute;
  left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: calc(var(--bw) * 100%); height: calc(var(--bh) * 100%);
  padding: 0; background: transparent; border: 0;
  z-index: var(--z-box);
}
/* 小さい枠でも当たり判定は44px角 */
.box::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.box__edge {
  position: absolute; inset: 0; border-radius: var(--r-s);
  border: 2px solid var(--signal);
  box-shadow: 0 0 0 1px var(--frame-edge), inset 0 0 0 1px var(--frame-edge);
  transition: background-color var(--d-micro) var(--ease-out), border-width var(--d-micro) var(--ease-out);
}
.box--other .box__edge { border: 2px dashed var(--frame-other); }
.box__label {
  position: absolute; left: -2px; bottom: 100%; margin-bottom: 4px;
  background: var(--signal); color: var(--on-signal);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-meta); line-height: 1;
  padding: 5px 8px; border-radius: 4px; white-space: nowrap; z-index: var(--z-label);
  box-shadow: 0 0 0 1px var(--frame-edge);
}
.box--end .box__label { left: auto; right: -2px; }
/* 写真の枠: 札の位置は JS が決める（札どうし・札と別の枠が重ならず、自分の枠の辺に接する） */
.box.is-placed .box__label { left: var(--lx, 0px); top: var(--ly, 0px); right: auto; bottom: auto; margin: 0; }
.box--in .box__label { bottom: auto; top: 4px; left: 4px; margin: 0; }
.box--other .box__label { background: var(--frame-other); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.box__check {
  position: absolute; right: 5px; bottom: 5px; width: 26px; height: 26px; border-radius: var(--r-s);
  background: var(--go); color: var(--on-go); display: grid; place-items: center;
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--d-micro) var(--ease-out), transform 160ms var(--ease-out);
}
.box__check svg.i { width: 16px; height: 16px; stroke-width: 2.5; }
.box.is-on .box__edge { border-width: 3px; background: var(--signal-tint); }
.box--other.is-on .box__edge { background: var(--frame-other-tint); }
.box.is-on .box__check { opacity: 1; transform: none; }
.box.is-active .box__edge { border-width: 3px; }

/* Wao（温間）: 写真→枠→札→一言。走査帯は出ない。is-play で再生 */
.photo.is-play .photo__img { animation: wao-photo var(--wao-photo) var(--ease-out) both; }
.photo.is-play.has-boxes::after { animation: wao-dim var(--wao-dim) var(--ease-out) both; animation-delay: var(--wao-start); }
.photo.is-play .box { animation: wao-box var(--wao-box) var(--ease-out) both; animation-delay: calc(var(--wao-start) + var(--i, 0) * var(--wao-stagger)); }
.photo.is-play .box__label { animation: wao-label var(--wao-label) var(--ease-out) both; animation-delay: calc(var(--wao-start) + var(--i, 0) * var(--wao-stagger) + var(--wao-label-lag)); }
/* モデル待ち中または前回実測300ms超: 走査帯をdetect前に表示し、結果後に消して枠 */
.photo.is-wait .scan { opacity: 1; }
.photo.is-wait .scan::before { animation: wao-sweep var(--wao-sweep) var(--ease-in-out) infinite alternate; }
@keyframes wao-photo { from { opacity: 0; } to { opacity: 1; } }
@keyframes wao-sweep { from { transform: translateY(-100%); } to { transform: translateY(455%); } }
@keyframes wao-dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes wao-box { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes wao-label { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sheet__status.is-play { animation: wao-label 200ms var(--ease-out) both; animation-delay: var(--status-at, 800ms); }
/* 一言が出る時刻＝最後の札が出そろった時刻（3枠 540ms、1枠 380ms、0枠は写真が出た 120ms） */
[data-at="n"] { --status-at: calc(var(--wao-start) + 2 * var(--wao-stagger) + var(--wao-label-lag) + var(--wao-label)); }
[data-at="one"] { --status-at: calc(var(--wao-start) + var(--wao-label-lag) + var(--wao-label)); }
[data-at="zero"] { --status-at: var(--wao-photo); }
.i0 { --i: 0; } .i1 { --i: 1; } .i2 { --i: 2; }
.pick.is-play { animation: wao-label 200ms var(--ease-out) both; animation-delay: calc(var(--wao-start) + var(--i, 0) * var(--wao-stagger) + var(--wao-label-lag)); }

.photo-screen { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; background: var(--stage); position: relative; }
.photo-screen[hidden] { display: none; }
.photo-screen > .bar { flex: none; }
.photo-screen > .stage { flex: 1 1 auto; min-height: 0; }
.photo-sheet { max-height: 48%; }
.photo-sheet__head { padding-bottom: var(--s1); }
.photo-sheet__body { overscroll-behavior-y: contain; }
.photo-sheet__timing { margin: var(--s1) 0 0; font-family: var(--font-num); font-size: var(--t-meta); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.photo-sheet__actions { flex: none; display: grid; gap: var(--s2); padding: 0 var(--s4) var(--s2); }
.photo-sheet__actions:empty { display: none; }
.photo-sheet__foot { padding-top: var(--s1); }
.photo-picklist { list-style: none; margin: 0; padding: 0; }
.photo-picklist > li { border-bottom: 1px solid var(--line); }
.photo-picklist .pick { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.photo-picklist .pick__thumb { object-fit: cover; }
.photo-picklist .pick.is-on .pick__name { color: var(--go); }
.photo-picklist .pick__name, .photo-picklist .pick__meta { min-width: 0; overflow-wrap: anywhere; }
.photo-chipset { padding: 0 0 var(--s3) 56px; }
/* チップは品目名と同じ左端に揃える（.chips 自身の字下げと二重にしない） */
.photo-chipset > .chips { padding: 0; }
.photo-chipset > .photo-sheet__message { margin-top: var(--s3); }
.photo-chipset > .photo-sheet__message + .photo-chipset__next { margin-top: var(--s2); }
.photo-chipset > .chips + .photo-chipset__next { margin-top: var(--s3); }
.photo-chipset--flush { padding-left: 0; }
.photo-chipset__next { width: calc(100% + 56px); margin-left: -56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
.photo-chipset__next--single { grid-template-columns: minmax(0, 1fr); }
.photo-sheet__actions .btn-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.photo-sheet__actions .btn--two { min-width: 0; }
.photo-sheet__actions .btn__sub { white-space: nowrap; }
.photo-sheet__message { margin: 0; font-size: var(--t-meta); color: var(--ink-2); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .photo.is-play .box, .photo.is-play .box__label, .pick.is-play, .sheet__status.is-play { animation: wao-photo 150ms linear both; animation-delay: 0ms; }
  .photo.is-play.has-boxes::after { animation: none; }
  .scan { transition: none; }
  .photo.is-wait .scan::before { animation-duration: 2400ms; }
  .sample .photo.is-play .photo__img, .sample .photo.is-play .box, .sample .photo.is-play .box__label { animation: none; }
}

/* ───────── 下部シート ───────── */
.sheet {
  flex: none; max-height: 48%; display: flex; flex-direction: column;
  background: var(--paper); border-radius: var(--r-l) var(--r-l) 0 0; margin-top: calc(var(--r-l) * -1);
  position: relative; z-index: var(--z-sheet);
}
.sheet--tall { max-height: 78%; }
.sheet__head { flex: none; padding: var(--s4) var(--s4) var(--s2); }
.sheet__status { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lead); line-height: 1.35; margin: 0; }
.sheet__sub { margin: var(--s1) 0 0; font-size: var(--t-meta); color: var(--ink-2); }
.sheet__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 var(--s4); }
.sheet__foot { flex: none; padding: var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); display: grid; gap: var(--s2); background: var(--paper); }
.sheet__titlebar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.sheet__titlebar h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lead); margin: 0; }

.picks { list-style: none; margin: 0; padding: 0; }
.picks > li { border-bottom: 1px solid var(--line); }
.pick {
  width: 100%; min-height: 60px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--s3);
  padding: var(--s2) 0; background: transparent; border: 0; text-align: left;
}
.pick__thumb { width: 44px; height: 44px; border-radius: var(--r-s); overflow: hidden; display: block; background: var(--stage); }
.pick__thumb svg { width: 100%; height: 100%; display: block; }
.pick__name { display: block; font-weight: 700; line-height: 1.35; }
.pick__meta { display: block; font-size: var(--t-meta); color: var(--ink-2); line-height: 1.4; }
.pick__meta--other { color: var(--other-ink); font-weight: 700; }
/* 1対1の行: 押すと選択だけ。右端手前に「違う品目」リンク1つ（常時表示、行高を動かさない） */
.pickrow { position: relative; }
.pickrow .pick > span:nth-child(2) { padding-right: 64px; }
.pick__alt {
  position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
  min-height: 44px; padding: 0 var(--s2); font-size: var(--t-meta); display: inline-flex; align-items: center;
  color: var(--go); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; white-space: nowrap;
}
/* 複数選べるチェック: 押せる範囲は44px角、見た目は右端に寄せた角丸の四角 */
.tick { width: 44px; height: 44px; display: grid; place-items: center end; color: transparent; }
.tick::before { content: ""; grid-area: 1 / 1; width: 26px; height: 26px; border-radius: var(--r-s); background: var(--paper); box-shadow: inset 0 0 0 2px var(--line-strong); }
.tick svg.i { grid-area: 1 / 1; width: 16px; height: 16px; margin-right: 5px; stroke-width: 2.5; position: relative; }
.is-on > .tick, .pick.is-on .tick, .row.is-on .tick { color: var(--on-go); }
.is-on > .tick::before, .pick.is-on .tick::before, .row.is-on .tick::before { background: var(--go); box-shadow: none; }
.pick__more { border-bottom: 0 !important; padding-top: var(--s3); }
.chips-q { width: 100%; margin: 0; font-size: var(--t-meta); color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 0 var(--s3) 56px; }
.chips--flush { padding-left: 0; }
.chip {
  min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-chip); border: 0;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font-size: var(--t-body); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s1);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.chip--none { color: var(--ink-2); }
/* チップの下の2列ボタン: サムネ分の字下げ（56px）を戻して全幅で2列にする（320で下段が折れない） */
.chips-next { width: calc(100% + 56px); margin-left: -56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
.btn--small { min-height: 52px; font-size: var(--t-meta); }

/* 一覧から選ぶ */
.listgroup { margin: 0; padding: 0; list-style: none; }
.listgroup__h { font-size: var(--t-meta); font-weight: 700; color: var(--ink-2); padding: var(--s3) 0 var(--s1); margin: 0; position: sticky; top: 0; background: var(--paper); }
.row {
  width: 100%; min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) 44px; align-items: center; gap: var(--s2);
  border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; padding: var(--s1) 0;
}
.row__tag { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-meta); color: var(--other-ink); font-weight: 700; white-space: nowrap; }
/* 一覧の行: 選ぶと右のチェックが個数（− N ＋）に替わる。−で0になったら選択解除 */
.listgroup > li { position: relative; }
.row.is-on { padding-right: 132px; }
.row.is-on .tick { display: none; }
.qty { display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); align-items: center; gap: 2px; }
.listgroup > li.is-on .qty { display: inline-flex; }
.qty__btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-radius: var(--r-m); border: 0; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: var(--t-lead); font-weight: 700; display: grid; place-items: center; }
.qty__btn:active { background: var(--paper-3); }
.qty__n { min-width: 36px; text-align: center; font-weight: 700; font-size: var(--t-lead); }
/* 一覧シートの頭に置く枠の文脈（「違う品目」「どれでもない」から来たとき） */
.ctx { display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); align-items: center; padding: var(--s2) 0 var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s1); }
.ctx[hidden] { display: none; }
.ctx__thumb { width: 44px; height: 44px; border-radius: var(--r-s); overflow: hidden; background: var(--stage); box-shadow: 0 0 0 2px var(--signal); }
.ctx__thumb svg { width: 100%; height: 100%; display: block; }
.ctx p { margin: 0; font-size: var(--t-meta); color: var(--ink-2); }
.ctx b { display: block; font-size: var(--t-body); color: var(--ink); }
.ctx .btn { grid-column: 1 / -1; }
/* 写真なしの全画面一覧（トップ「品目から選ぶ」と結果「選び直す」の行き先） */
.list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: var(--paper); }
.list__head { flex: none; padding: var(--s1) var(--s4) var(--s2); }
.list__head h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--t-head); margin: 0; line-height: 1.3; }
.list__head p { margin: 2px 0 0; font-size: var(--t-meta); color: var(--ink-2); }
.list__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 var(--s4); }
.list__foot { flex: none; padding: var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); display: grid; gap: var(--s2); background: var(--paper); border-top: 1px solid var(--line); }
.search {
  display: flex; align-items: center; gap: var(--s2); min-height: 52px; padding: 0 var(--s3);
  border-radius: var(--r-m); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink);
}
.search input { border: 0; outline: 0; background: transparent; font-size: var(--t-body); min-height: 48px; flex: 1; min-width: 0; }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--focus); }

/* ───────── 区市町村 ───────── */
.muni { background: var(--paper); }
.muni__head { flex: none; padding: var(--s2) var(--s4) var(--s2); }
.muni__head h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--t-head); margin: 0; line-height: 1.3; }
.muni__head p { margin: 2px 0 0; font-size: var(--t-meta); color: var(--ink-2); }
.jump { display: flex; gap: var(--s2); overflow-x: auto; padding: var(--s2) var(--s4); flex: none; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.jump .chip { font-size: var(--t-meta); min-height: 36px; padding: 0 var(--s3); position: relative; }
.jump .chip::after { content: ""; position: absolute; inset: -4px 0; }
.muni__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 var(--s4) var(--s4); }
.muni__body--end { display: flex; flex-direction: column; padding-bottom: var(--s3); }
.muni__body--end > :first-child { flex: none; margin-top: auto; }
.muni__head--top { padding-top: var(--s4); }
.muni__group h2 { font-size: var(--t-meta); color: var(--ink-2); margin: var(--s4) 0 var(--s2); font-weight: 700; }
.muni__region { border-bottom: 1px solid var(--line); padding-bottom: var(--s2); }
.muni__region > summary, .pub-prefecture > summary { min-height: 44px; display: flex; align-items: center; gap: var(--s2); cursor: pointer; font-weight: 700; color: var(--go); list-style: none; white-space: nowrap; }
.muni__region > summary::-webkit-details-marker, .pub-prefecture > summary::-webkit-details-marker { display: none; }
.muni__region > summary::before, .pub-prefecture > summary::before { content: '＋'; }
.muni__region[open] > summary::before, .pub-prefecture[open] > summary::before { content: '−'; }
.muni__region > summary:active, .pub-prefecture > summary:active { background: var(--paper-2); }
.source-note { margin: var(--s3) 0 0; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.6; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.place {
  min-height: 48px; border: 0; border-radius: var(--r-m); background: var(--paper-2);
  font-size: var(--t-body); font-weight: 700; padding: 0 var(--s1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.place:active { background: var(--paper-3); }
.hits { list-style: none; margin: 0; padding: 0; }
.hit { width: 100%; min-height: 56px; border: 0; border-bottom: 1px solid var(--line); background: transparent; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); padding: 0 var(--s1); text-align: left; }
.hit b { font-size: var(--t-body); white-space: nowrap; }
.hit span { font-size: var(--t-meta); color: var(--ink-2); white-space: nowrap; }
.muni__foot { flex: none; padding: var(--s2) var(--s4) var(--s3); background: var(--paper); border-top: 1px solid var(--line); }
.empty { padding: var(--s5) var(--s1); }
.empty b { display: block; font-size: var(--t-body); margin-bottom: var(--s1); }
.empty p { margin: 0; font-size: var(--t-meta); color: var(--ink-2); }

/* ───────── 結果 ───────── */
.res { background: var(--paper); }
.res__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
.res__head { padding: var(--s1) var(--s4) var(--s4); border-bottom: 1px solid var(--line); }
.res__where { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2); }
.res__where > div { min-width: 0; }
.res__where p { margin: 0; font-size: var(--t-meta); color: var(--ink-2); }
.res__where h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--t-display); line-height: 1.15; margin: 0; }
.res__change {
  flex: none; min-height: 44px; min-width: 72px; padding: 0 var(--s4); display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-m); border: 0; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--paper);
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--t-body); line-height: 1.2; white-space: nowrap;
  transition: background-color var(--d-micro) var(--ease-out);
}
.res__change:active { background: var(--paper-2); }
.sort { margin: var(--s3) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s3); font-size: var(--t-meta); }
.sort dt { color: var(--ink-2); white-space: nowrap; }
.sort dd { min-width: 0; margin: 0; font-weight: 700; font-size: var(--t-body); line-height: 1.45; overflow-wrap: anywhere; }
.sort dd.is-other { color: var(--other-ink); }
.sort dd.is-route { color: var(--other-ink); }
.step { padding: var(--s5) var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.step > h2 { display: flex; align-items: baseline; gap: var(--s2); font-family: var(--font-display); font-weight: 900; font-size: var(--t-lead); line-height: 1.3; margin: 0 0 var(--s4); }
.step > h2 .n { font-family: var(--font-num); font-weight: 700; font-size: var(--t-body); width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); display: inline-grid; place-items: center; flex: none; transform: translateY(-2px); }
.prose { margin: 0; line-height: 1.7; }
.prose--gap { margin-bottom: var(--s3); }
.step__actions { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.step__actions > .lead { margin-bottom: 0; }
.prose + .facts { margin-top: var(--s4); }
.apply__district-list { list-style: none; margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-m); background: var(--paper-2); }
.apply__district-list[hidden] { display: none; }
.apply__district-list li + li { border-top: 1px solid var(--line); }
.apply__district-list a { min-height: 44px; display: inline-flex; align-items: center; padding: var(--s2) 0; color: var(--go); font-weight: 700; }
.apply__district-name { margin: 0; padding-top: var(--s2); font-size: var(--t-meta); line-height: 1.5; overflow-wrap: anywhere; }
.apply__district-toggle { padding: 0 var(--s2); font-size: var(--t-meta); }
.facts { margin: 0; display: grid; gap: var(--s3); }
.facts > div { display: grid; gap: 2px; }
.facts dt { font-size: var(--t-meta); color: var(--ink-2); font-weight: 700; }
.facts dd { margin: 0; line-height: 1.65; }
.facts a[href^="tel:"] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: var(--s1); }
.facts dd.small { font-size: var(--t-meta); color: var(--ink-2); line-height: 1.7; }
.lead {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--s2); align-items: start;
  padding: var(--s3); border-radius: var(--r-m); background: var(--go-tint); margin-bottom: var(--s3);
}
.lead svg.i { margin-top: 3px; color: var(--go); }
.lead b { display: block; font-size: var(--t-meta); color: var(--ink-2); }
.lead p { margin: 0; font-weight: 700; }

.fees { list-style: none; margin: 0 0 var(--s3); padding: 0; border-top: 1px solid var(--line); }
.fee { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.fee__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.fee__name { font-weight: 700; }
.fee__yen { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--t-lead); white-space: nowrap; }
.fee__yen--text { font-family: var(--font-body); font-size: var(--t-body); }
.fee__yen small { font-family: var(--font-body); font-size: var(--t-meta); font-weight: 400; margin-left: 2px; }
.fee__cond { margin: 2px 0 0; font-size: var(--t-meta); color: var(--ink-2); }
.fee__ask { margin: var(--s2) 0 0; font-size: var(--t-meta); color: var(--ink); font-weight: 700; }
.fee__count { font-weight: 400; color: var(--ink-2); margin-left: var(--s1); }
.fee__conditional-price { display: inline-flex; align-items: baseline; gap: var(--s2); flex: none; }
.fee__flag { padding: 2px var(--s2); border-radius: var(--r-s); background: var(--other-tint); color: var(--other-ink); font-size: var(--t-meta); font-weight: 700; white-space: nowrap; }
.fee__unverified { flex: none; font-size: var(--t-meta); font-weight: 700; text-align: right; }
.fee__alternatives { list-style: none; margin: var(--s2) 0 0; padding: var(--s2) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s2); }
.fee__alternatives li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s2); font-size: var(--t-meta); }
.fee__alternatives .fee__yen { font-size: var(--t-body); }
.fee__choice-action { margin-top: var(--s1); font-size: var(--t-meta); }
.fee__fallback { display: grid; gap: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--line); margin-bottom: var(--s3); }
.fee__fallback > b { font-size: var(--t-meta); }
.fee__fallback .fee__miss { margin: 0; }
.lead--top { margin-bottom: var(--s3); }
.lead--top + .fees { border-top: 1px solid var(--line); }
.away__link { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; color: var(--go); font-weight: 700; }
.away__guide-item { margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--t-body); }
.away__steps { margin: var(--s2) 0 0; padding-left: 1.4em; line-height: 1.65; }
.away__steps li { padding: var(--s1) 0; }
.away__steps p { margin: 0; }
.away__steps .away__link { display: flex; }
.fee__miss { margin: var(--s1) 0 0; font-size: var(--t-meta); }
.fee__miss a { color: var(--go); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.tiers { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s1); }
.tier {
  width: 100%; min-height: 48px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3); border-radius: var(--r-m); border: 0; background: var(--paper-2); text-align: left;
}
.tier__dot { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); }
.tier__label { font-size: var(--t-body); line-height: 1.4; }
.tier__yen { font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier[aria-pressed="true"] { background: var(--go-tint); box-shadow: inset 0 0 0 1.5px var(--go); }
.tier[aria-pressed="true"] .tier__dot { box-shadow: inset 0 0 0 6px var(--go); }
.total { display: grid; gap: var(--s2); padding: var(--s3) 0 var(--s4); }
.total__line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.total__line b { font-size: var(--t-body); }
.total__yen { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--t-head); white-space: nowrap; }
.total__yen small { font-family: var(--font-body); font-size: var(--t-body); font-weight: 700; margin-left: 2px; }
.total__conditional { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); margin: 0; padding-top: var(--s2); border-top: 1px solid var(--line); font-size: var(--t-meta); }
.total__conditional span { min-width: 0; overflow-wrap: anywhere; }
.total__conditional b { color: var(--other-ink); }
.total__note { margin: 0; font-size: var(--t-meta); color: var(--ink-2); }

.away { padding: var(--s5) var(--s4); border-bottom: 1px solid var(--line); background: var(--other-tint); }
.away > h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--t-lead); margin: 0 0 var(--s3); line-height: 1.35; }
.away > h2:has(+ p) { margin-bottom: var(--s1); }
.away > p { margin: 0 0 var(--s3); font-size: var(--t-meta); color: var(--ink-2); }
.away--plain { background: var(--paper); }
.away__item { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.away__item h3 { font-size: var(--t-body); margin: 0 0 2px; display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.away__item h3 span { font-size: var(--t-meta); color: var(--other-ink); }
.away__item ol { margin: var(--s1) 0 0; padding-left: 1.4em; font-size: var(--t-body); line-height: 1.65; }
.away__item p { margin: var(--s1) 0 0; line-height: 1.65; }

.later { padding: var(--s5) var(--s4); border-bottom: 1px solid var(--line); }
.later > h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--t-lead); margin: 0 0 var(--s4); }
.later__share { margin-bottom: var(--s5); }
.later__share--last { margin-bottom: 0; }
.later--solo { border-bottom: 0; }
.later__share p { margin: var(--s2) 0 0; font-size: var(--t-meta); color: var(--ink-2); }
.later__share p:empty { margin: 0; }
.cal label { display: block; font-weight: 700; margin-bottom: var(--s1); }
.cal__hint { margin: 0 0 var(--s2); font-size: var(--t-meta); color: var(--ink-2); }
.cal input[type="date"] { width: 100%; min-height: 52px; font-size: var(--t-body); padding: 0 var(--s3); border-radius: var(--r-m); border: 0; box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--paper); font-family: var(--font-num); }
.cal__preview { margin: var(--s3) 0 0; padding: var(--s3); border-radius: var(--r-m); background: var(--paper-2); font-size: var(--t-meta); line-height: 1.7; }
.cal__preview b { display: block; font-size: var(--t-body); }
.cal__preview p { margin: var(--s1) 0 0; white-space: pre-line; }
.cal__preview[hidden] { display: none; }
.cal .btn-row .btn { font-size: var(--t-meta); }
.cal .btn-row .btn__sub { font-size: 12px; }
.cal__actions { display: grid; gap: var(--s4); margin-top: var(--s4); }
.cal__actions .btn[aria-disabled="true"] { background: var(--paper-3); color: var(--ink-2); box-shadow: none; cursor: default; }
.cal__method-note { margin: var(--s2) 0 0; font-size: var(--t-meta); color: var(--ink-2); }
.share__address { width: 100%; min-height: 52px; margin-top: var(--s2); padding: 0 var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--paper); }
.res__report { padding: 0 var(--s4) var(--s4); }

.src { padding: var(--s4) var(--s4) var(--s6); font-size: var(--t-meta); color: var(--ink-2); }
.src h2 { font-size: var(--t-meta); margin: 0 0 var(--s1); color: var(--ink); }
.src ul { margin: 0 0 var(--s2); padding: 0; list-style: none; }
.src li { border-bottom: 1px solid var(--line); }
.src a, .src li { color: var(--ink-2); display: flex; align-items: center; min-height: 44px; line-height: 1.45; padding: var(--s1) 0; }
.src a { flex: 1; min-width: 0; white-space: nowrap; }
.src__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src .link { font-size: var(--t-meta); color: var(--ink-2); }

.offline { margin: var(--s4); padding: var(--s4); border-radius: var(--r-m); background: var(--paper-2); }
.offline b { display: flex; gap: var(--s2); align-items: center; font-size: var(--t-body); margin-bottom: var(--s1); }
.offline p { margin: 0 0 var(--s3); font-size: var(--t-meta); color: var(--ink-2); }

/* ───────── トップ見本の固定枠 ───────── */
.bx-sample { --x: .2; --y: .16; --bw: .6; --bh: .76; }

/* ───────── 公開ページ（/gomi/ 配下。scripts/build-public-pages.mjs が作る） ───────── */

.pub-body { overflow-x: clip; }
.pub-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  max-width: 720px; margin: 0 auto; padding: var(--s2) var(--s4); min-height: 56px;
}
.pub-brand {
  font-family: var(--font-display); font-weight: 900; font-size: var(--t-body); letter-spacing: 0.02em;
  color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap;
}
.pub-bar__link {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s3);
  border-radius: var(--r-m); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--ink); font-weight: 700; font-size: var(--t-meta); text-decoration: none; white-space: nowrap;
}
.pub { max-width: 720px; margin: 0 auto; padding: 0 var(--s4) var(--s6); }
.pub a:not(.btn) { overflow-wrap: anywhere; }

.pub-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s2); font-size: var(--t-meta); color: var(--ink-2); }
.pub-crumbs li { display: inline-flex; align-items: center; gap: var(--s2); }
.pub-crumbs li + li::before { content: "/"; color: var(--line-strong); }
.pub-crumbs a { color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; }

.pub-head { padding: var(--s3) 0 var(--s5); border-bottom: 1px solid var(--line); }
.pub-kicker { margin: 0 0 var(--s1); font-size: var(--t-meta); font-weight: 700; color: var(--ink-2); }
.pub-head h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--t-display); line-height: 1.25; margin: 0; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.pub-sub { margin: var(--s2) 0 0; color: var(--ink-2); line-height: 1.6; }
.pub-date { display: block; font-size: var(--t-meta); font-family: var(--font-num); font-variant-numeric: tabular-nums; margin-top: var(--s1); }

/* 受付票: 区市町村ページの頭の要点。紙の地に細い罫、切り取り線は点線 */
.pub-slip {
  margin: var(--s4) 0 0; padding: var(--s1) var(--s4); display: grid;
  border-radius: var(--r-m); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line);
}
.pub-slip > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; align-items: baseline; }
.pub-slip > div + div { border-top: 1px dashed var(--line-strong); }
.pub-slip dt { font-size: var(--t-meta); color: var(--ink-2); font-weight: 700; }
.pub-slip dd { margin: 0; font-weight: 700; min-width: 0; }
.pub-slip .away__link { min-height: 44px; }

.pub-sec { padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.pub-sec > h2, .pub-cta > h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--t-lead); line-height: 1.35; margin: 0 0 var(--s3); overflow-wrap: anywhere; }
.pub-sec > h2 small { margin-left: var(--s2); font-family: var(--font-num); font-size: var(--t-meta); font-weight: 700; color: var(--ink-2); }
.pub-note { margin: 0 0 var(--s3); font-size: var(--t-meta); color: var(--ink-2); line-height: 1.7; }
.pub-sec .facts + .lead, .pub-sec .lead + .facts { margin-top: var(--s3); }
.pub-actions { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.pub-actions > .lead { margin-bottom: 0; }
.pub-phone .num { font-weight: 700; }
.pub-districts { padding: var(--s2) var(--s3); border-radius: var(--r-m); background: var(--paper-2); }
.pub-districts b { font-size: var(--t-meta); color: var(--ink-2); }
.pub-districts ul { list-style: none; margin: 0; padding: 0; }
.pub-districts li + li { border-top: 1px solid var(--line); }
.pub-districts a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.pub-district { margin: var(--s2) 0 0; font-size: var(--t-meta); line-height: 1.5; overflow-wrap: anywhere; }
.pub-sec .facts dd { overflow-wrap: anywhere; }
.pub-sec .facts a[href^="tel:"] { min-height: 44px; display: inline-flex; align-items: center; }

/* 品目ごとの料金（横に流さないカード） */
.pub-fees { list-style: none; margin: 0 0 var(--s3); padding: 0; border-top: 1px solid var(--line); }
.pub-fee { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.pub-fee__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s3); }
.pub-fee__name { font-weight: 700; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; min-width: 0; }
.pub-yen { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--t-lead); white-space: nowrap; }
.pub-yen small { font-family: var(--font-body); font-size: var(--t-meta); font-weight: 400; margin-left: 2px; }
.pub-fee__flagged { display: inline-flex; align-items: baseline; gap: var(--s2); }
.pub-fee__status { font-size: var(--t-meta); font-weight: 700; color: var(--ink); white-space: nowrap; }
.pub-fee__status.is-other { color: var(--other-ink); }
.pub-fee__rank { margin: var(--s1) 0 0; font-size: var(--t-meta); color: var(--ink-2); }
.pub-fee__rank b { color: var(--ink); margin: 0 2px; }
.pub-tiers { list-style: none; margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r-s); background: var(--paper-2); display: grid; gap: var(--s1); }
.pub-tiers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; font-size: var(--t-meta); line-height: 1.5; }
.pub-tiers li > span:first-child { overflow-wrap: anywhere; }
.pub-tiers .pub-yen { font-size: var(--t-body); }
.pub-links { list-style: none; margin: var(--s1) 0 0; padding: 0; }
.pub-away { margin: var(--s5) calc(var(--s4) * -1) 0; }
.pub-away .away__item p { margin: 2px 0 0; }

/* 比較: いちばん安い・高い・差の3つの数 */
.pub-hero > h2 { font-size: var(--t-head); line-height: 1.3; }
.pub-hero__lead { margin: 0; font-size: var(--t-lead); font-weight: 700; line-height: 1.55; }
.pub-hero__nums { margin: 0 0 var(--s3); display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s2); }
.pub-hero__nums > div { padding: var(--s3); border-radius: var(--r-m); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.pub-hero__nums dt { font-size: var(--t-meta); font-weight: 700; color: var(--ink-2); }
.pub-hero__nums dd { margin: var(--s1) 0 0; }
.pub-hero__nums .pub-yen { font-size: var(--t-head); }
.pub-hero__who { display: block; margin-top: 2px; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }

.pub-groups { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pub-groups li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.pub-groups__name { font-weight: 700; }
.pub-groups__name small { margin-left: var(--s2); font-size: var(--t-meta); color: var(--ink-2); font-weight: 400; }

.pub-bar-svg { display: block; width: 100%; height: 8px; }
.pub-bar-svg__track { fill: var(--paper-3); }
.pub-bar-svg__fill { fill: var(--go); }

.pub-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pub-dist li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 2.5em; gap: var(--s3); align-items: center; font-size: var(--t-meta); }
.pub-dist__yen { text-align: right; white-space: nowrap; }
.pub-dist__count { font-weight: 700; }

.pub-rank { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pub-rank li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); align-items: start; }
.pub-rank__n {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper);
  display: inline-grid; place-items: center; font-size: var(--t-meta); font-weight: 700;
}
.pub-rank__body { display: grid; gap: var(--s1); min-width: 0; }
.pub-rank__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--s3); }
.pub-rank__top a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.pub-rank__body small { font-size: var(--t-meta); color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }

.pub-excl + .pub-excl { margin-top: var(--s4); }
.pub-excl h3 { margin: 0 0 var(--s1); font-size: var(--t-body); }
.pub-excl h3 small { margin-left: var(--s2); font-family: var(--font-num); font-size: var(--t-meta); color: var(--ink-2); }
.pub-names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.pub-names li { display: inline-flex; align-items: baseline; gap: var(--s1); padding: 0 var(--s3); border-radius: var(--r-chip); background: var(--paper-2); min-height: 44px; align-items: center; max-width: 100%; }
.pub-names a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.pub-names small { font-size: var(--t-meta); color: var(--ink-2); white-space: nowrap; }

/* 品目ごとの差のまとめ */
.pub-cards { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.pub-card { padding: var(--s4); border-radius: var(--r-l); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.pub-card h2 { margin: 0 0 var(--s3); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-family: var(--font-display); font-weight: 900; font-size: var(--t-lead); line-height: 1.35; }
.pub-card h2 a { color: var(--ink); min-width: 0; min-height: 44px; display: inline-flex; align-items: center; }
.pub-card__ratio { flex: none; font-size: var(--t-body); white-space: nowrap; }
.pub-card__ratio .num { font-size: var(--t-head); font-weight: 900; margin-right: 1px; }
.pub-card__nums { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s3); }
.pub-card__nums dt { font-size: var(--t-meta); color: var(--ink-2); font-weight: 700; }
.pub-card__nums dd { margin: 2px 0 0; min-width: 0; }
.pub-card__nums small { display: block; font-size: var(--t-meta); color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.pub-card__meta { margin: var(--s3) 0 0; padding-top: var(--s2); border-top: 1px dashed var(--line-strong); font-size: var(--t-meta); color: var(--ink-2); }

/* 区市町村の一覧 */
.pub-find { padding: var(--s4) 0 0; }
.pub-find .pub-note { margin: var(--s2) 0 0; }
.pub-find .pub-note:empty { display: none; }
.pub-teaser {
  display: grid; gap: var(--s1); margin: var(--s4) 0 0; padding: var(--s4); border-radius: var(--r-l);
  background: var(--go-tint); color: var(--ink); text-decoration: none;
}
.pub-teaser b { font-family: var(--font-display); font-weight: 900; font-size: var(--t-lead); line-height: 1.35; color: var(--go); }
.pub-teaser span { font-size: var(--t-meta); line-height: 1.6; }
.pub-munis { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pub-muni { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--line); }
.pub-muni[hidden] { display: none; }
.pub-muni__name { flex: 1 1 auto; min-width: 0; min-height: 52px; display: flex; flex-direction: column; justify-content: center; padding: var(--s1) 0; color: var(--ink); font-weight: 700; text-decoration: none; }
.pub-muni__name small { font-weight: 400; font-size: var(--t-meta); color: var(--ink-2); }
.pub-muni__official { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: var(--s1); padding: 0 var(--s2); font-size: var(--t-meta); font-weight: 700; white-space: nowrap; }
.pub-sec[data-group][hidden] { display: none; }

/* アプリへの入口 */
.pub-cta { margin: var(--s5) 0 0; padding: var(--s4); border-radius: var(--r-l); background: var(--go-tint); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.pub-cta > h2 { margin: 0; }
.pub-cta p { margin: 0 0 var(--s2); font-size: var(--t-meta); line-height: 1.7; }
.pub-src { padding-left: 0; padding-right: 0; }
.pub-src p { margin: 0; line-height: 1.7; }

.pub-foot { max-width: 720px; margin: 0 auto; padding: var(--s5) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: var(--t-meta); color: var(--ink-2); }
.pub-foot__notice { margin: 0 0 var(--s3); font-weight: 700; color: var(--ink); }
.pub-foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.pub-foot__links a { min-height: 44px; display: inline-flex; align-items: center; }

/* アプリ画面からの控えめな入口（トップと結果画面） */
.entry-link { justify-self: center; font-size: var(--t-meta); }
.res__pages { padding: 0 var(--s4) var(--s4); }

/* 自撮りとペットの演出 */
/* 写真の主役が人かペットのとき: 主役の枠を品目の枠と同じ動き（wao-box）で出し、写真シートの上にカードを重ねる。
 * 主役の枠は押せず、札もチェックも付けない。カードは下に寄せ、ボタンの位置を添える一言の行数で動かさない。
 * ::backdrop は :root の変数を継がないブラウザがあるため、幕の色だけ --stage と同じ色相の値を直に書く。 */
.selfie-frame {
  position: absolute; z-index: var(--z-box); pointer-events: none;
  left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: calc(var(--bw) * 100%); height: calc(var(--bh) * 100%);
  border: 3px solid var(--signal); border-radius: var(--r-l);
  box-shadow: 0 0 0 1px var(--frame-edge), inset 0 0 0 1px var(--frame-edge);
  animation: wao-box var(--wao-box) var(--ease-out) var(--wao-start) both;
}
.selfie {
  width: min(calc(100% - 2 * var(--s4)), 448px); max-width: 100%; max-height: 100%;
  margin: auto auto calc(var(--s4) + env(safe-area-inset-bottom)); padding: 0; border: 0;
  background: transparent; color: var(--ink); overflow: visible;
}
.selfie::backdrop { background: oklch(19% 0.012 160 / 0.42); }
.selfie__card {
  display: grid; justify-items: center; gap: var(--s2);
  padding: var(--s5) var(--s4) var(--s4);
  background: var(--paper); border-radius: var(--r-l);
  box-shadow: 0 6px 24px oklch(12% 0.01 160 / 0.28);
  text-align: center;
}
/* 処理券の判子: 二重の輪と「判定 人間」または「判定 家族」。少し傾けて押す */
.selfie__seal {
  width: 84px; height: 84px; margin: 0 0 var(--s1); border-radius: 50%;
  display: grid; place-content: center; gap: 2px;
  color: var(--go); box-shadow: inset 0 0 0 3px var(--go), inset 0 0 0 6px var(--paper), inset 0 0 0 7.5px var(--go);
  transform: rotate(-8deg);
  font-family: var(--font-display); line-height: 1;
}
.selfie__seal-k { font-size: var(--t-meta); font-weight: 700; letter-spacing: 0.2em; padding-left: 0.2em; }
.selfie__seal-v { font-size: var(--t-lead); font-weight: 900; letter-spacing: 0.08em; padding-left: 0.08em; }
.selfie__h {
  margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(var(--t-lead), 6.4vw, var(--t-head)); line-height: 1.35; letter-spacing: 0.01em;
  text-wrap: balance; line-break: strict;
}
.selfie__line { margin: 0; color: var(--ink-2); line-height: 1.7; text-wrap: pretty; line-break: strict; }
.selfie__close { margin-top: var(--s3); }
.selfie[open] .selfie__card { animation: selfie-rise var(--d-long) var(--ease-out) both; }
.selfie[open]::backdrop { animation: wao-dim var(--wao-dim) var(--ease-out) both; }
.selfie[open] .selfie__seal { animation: selfie-stamp 320ms var(--ease-out) 140ms both; }
.selfie[open] .selfie__h { animation: wao-label var(--wao-label) var(--ease-out) 300ms both; }
.selfie[open] .selfie__line { animation: wao-label var(--wao-label) var(--ease-out) 380ms both; }
@keyframes selfie-rise { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes selfie-stamp {
  0% { opacity: 0; transform: rotate(-22deg) scale(1.7); }
  70% { opacity: 1; transform: rotate(-7deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .selfie-frame, .selfie[open] .selfie__card, .selfie[open]::backdrop, .selfie[open] .selfie__seal, .selfie[open] .selfie__h, .selfie[open] .selfie__line { animation: none; }
}