/* ============================================================
   AllerGo — design system
   基準幅 375px / 最小 320px / タップ44px以上 / WCAG 2.2 AA
   論理プロパティで記述（将来のRTL対応に備える, I18N-12）
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-inline-size: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- tokens ---------- */
:root {
  /* ground */
  --bg:            #FBFAF8;
  --surface:       #FFFFFF;
  --surface-2:     #F4F2EE;
  --surface-sunk:  #EFECE6;
  --line:          #E2DED6;
  --line-strong:   #CFC9BE;

  /* ink */
  --ink:           #1B1917;
  --ink-2:         #57514A;
  --ink-3:         #7C746B;
  --ink-on-accent: #FFFFFF;

  /* brand — 判定の赤緑黄と混同しないよう深いティール */
  --brand:         #0A6C63;
  --brand-ink:     #08574F;
  --brand-soft:    #E4F1EF;
  --brand-line:    #B9DBD6;

  /* verdicts — 色のみに依存しない（必ずアイコン＋文字を併用, 9.3） */
  --safe:          #14713A;
  --safe-ink:      #0E5A2D;
  --safe-soft:     #E3F3E8;
  --safe-line:     #A9D8BB;

  --caution:       #9A5B00;
  --caution-ink:   #7A4700;
  --caution-soft:  #FCF0DC;
  --caution-line:  #E9C68A;

  --unsafe:        #B3261E;
  --unsafe-ink:    #8F1D17;
  --unsafe-soft:   #FCE9E7;
  --unsafe-line:   #F0B4AF;

  --focus:         #0A6C63;

  /* elevation */
  --sh-1: 0 1px 2px rgb(27 25 23 / .06), 0 1px 1px rgb(27 25 23 / .04);
  --sh-2: 0 2px 8px rgb(27 25 23 / .07), 0 1px 2px rgb(27 25 23 / .05);
  --sh-3: 0 8px 28px rgb(27 25 23 / .12), 0 2px 6px rgb(27 25 23 / .06);
  --sh-up: 0 -4px 20px rgb(27 25 23 / .09);

  /* geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;
  --tap: 44px;
  --pad: 16px;
  --maxw: 560px;

  --header-h: 56px;
  --tabbar-h: calc(58px + env(safe-area-inset-bottom, 0px));

  /* type */
  --ff: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-num: ui-rounded, -apple-system, "Hiragino Sans", sans-serif;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --bg:           #14130F;
    --surface:      #1E1C18;
    --surface-2:    #262320;
    --surface-sunk: #100F0C;
    --line:         #35312B;
    --line-strong:  #4A453D;

    --ink:          #F2EFE9;
    --ink-2:        #B8B1A6;
    --ink-3:        #8D857A;

    --brand:        #4FBFB1;
    --brand-ink:    #7FD5C9;
    --brand-soft:   #12312E;
    --brand-line:   #1D4A45;

    --safe:         #5FC77F;
    --safe-ink:     #8CDCA4;
    --safe-soft:    #13301D;
    --safe-line:    #23492F;

    --caution:      #E0A140;
    --caution-ink:  #F0BC6B;
    --caution-soft: #33260F;
    --caution-line: #4D3A18;

    --unsafe:       #F0837A;
    --unsafe-ink:   #F5A49D;
    --unsafe-soft:  #381815;
    --unsafe-line:  #55241F;

    --focus:        #4FBFB1;
    --ink-on-accent:#0B1F1D;

    --sh-1: 0 1px 2px rgb(0 0 0 / .5);
    --sh-2: 0 2px 8px rgb(0 0 0 / .5);
    --sh-3: 0 8px 28px rgb(0 0 0 / .6);
    --sh-up: 0 -4px 20px rgb(0 0 0 / .5);
  }
}

:root[data-theme="dark"] {
  --bg:           #14130F;
  --surface:      #1E1C18;
  --surface-2:    #262320;
  --surface-sunk: #100F0C;
  --line:         #35312B;
  --line-strong:  #4A453D;
  --ink:          #F2EFE9;
  --ink-2:        #B8B1A6;
  --ink-3:        #8D857A;
  --brand:        #4FBFB1;
  --brand-ink:    #7FD5C9;
  --brand-soft:   #12312E;
  --brand-line:   #1D4A45;
  --safe:         #5FC77F;
  --safe-ink:     #8CDCA4;
  --safe-soft:    #13301D;
  --safe-line:    #23492F;
  --caution:      #E0A140;
  --caution-ink:  #F0BC6B;
  --caution-soft: #33260F;
  --caution-line: #4D3A18;
  --unsafe:       #F0837A;
  --unsafe-ink:   #F5A49D;
  --unsafe-soft:  #381815;
  --unsafe-line:  #55241F;
  --focus:        #4FBFB1;
  --ink-on-accent:#0B1F1D;
  --sh-1: 0 1px 2px rgb(0 0 0 / .5);
  --sh-2: 0 2px 8px rgb(0 0 0 / .5);
  --sh-3: 0 8px 28px rgb(0 0 0 / .6);
  --sh-up: 0 -4px 20px rgb(0 0 0 / .5);
}

/* ---------- base ---------- */
body {
  font-family: var(--ff);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: .01em;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

/* 200%まで拡大してもレイアウトが破綻しない（10.3） */
h1 { font-size: 1.5rem;  line-height: 1.35; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; line-height: 1.45; font-weight: 700; }
h3 { font-size: 1rem;    line-height: 1.5;  font-weight: 700; }
small, .txt-sm { font-size: .8125rem; line-height: 1.6; }
.txt-xs { font-size: .75rem; line-height: 1.55; }
.num { font-family: var(--ff-num); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.muted-2 { color: var(--ink-3); }

.wrap { inline-size: 100%; max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: 0;
  background: var(--brand); color: var(--ink-on-accent);
  padding: 12px 20px; z-index: 200; border-end-end-radius: var(--r-md);
}
.skip-link:focus { inset-block-start: 0; }

/* ---------- app shell ---------- */
#app { min-block-size: 100dvh; display: flex; flex-direction: column; }

.appbar {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-block-end: 1px solid var(--line);
}
.appbar__in {
  block-size: var(--header-h);
  display: flex; align-items: center; gap: 8px;
  max-inline-size: var(--maxw); margin-inline: auto; padding-inline: 12px;
}
.appbar__logo {
  display: flex; align-items: baseline; gap: 6px;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
  color: var(--brand-ink); text-decoration: none; margin-inline-end: auto;
  min-block-size: var(--tap); align-items: center;
}
.appbar__logo b { font-weight: 800; }
.appbar__logo span { font-size: .7rem; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.appbar__back {
  display: grid; place-items: center;
  inline-size: var(--tap); block-size: var(--tap);
  margin-inline-start: -8px; border-radius: var(--r-full); color: var(--ink);
}
.appbar__back:hover { background: var(--surface-2); }
.appbar__title {
  font-size: 1rem; font-weight: 700; margin-inline-end: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* header chips: 言語 / プロフィール / 厳格モード（9.2 ヘッダー固定要素） */
/* タップ領域 44px を確保しつつ、見た目の高さは 34px に保つ。
   縦の余白を透明な当たり判定として使う。 */
.hchip {
  display: inline-flex; align-items: center; gap: 5px;
  block-size: 34px; padding-inline: 10px;
  position: relative;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); font-size: .78rem; font-weight: 700;
  color: var(--ink-2); white-space: nowrap; box-shadow: var(--sh-1);
}
.hchip:hover { border-color: var(--line-strong); color: var(--ink); }
.hchip--strict { color: var(--brand-ink); background: var(--brand-soft); border-color: var(--brand-line); }
.hchip--loose  { color: var(--caution-ink); background: var(--caution-soft); border-color: var(--caution-line); }
.hchip__avatar {
  inline-size: 20px; block-size: 20px; border-radius: var(--r-full);
  background: var(--brand); color: var(--ink-on-accent);
  display: grid; place-items: center; font-size: .65rem; font-weight: 800;
  margin-inline-start: -3px;
}

main { flex: 1; padding-block-end: calc(var(--tabbar-h) + 8px); }
/* オンボーディング表示中はタブバーが無いので下余白を出さない */
main:has(> .ob) { padding-block-end: 0; }

/* ---------- bottom tab bar（サムゾーン, 9.2） ---------- */
.tabbar {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-block-start: 1px solid var(--line);
  box-shadow: var(--sh-up);
  padding-block-end: env(safe-area-inset-bottom, 0px);
}
.tabbar__in { display: flex; max-inline-size: var(--maxw); margin-inline: auto; }
.tab {
  flex: 1; min-inline-size: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-block-size: 58px; padding-block: 6px; padding-inline: 2px;
  color: var(--ink-3); font-size: .68rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; position: relative;
}
/* ラベルは1行に収める。言語によって長さが違うため、はみ出すものは省略する。 */
.tab > span:last-child {
  inline-size: 100%; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tab svg { inline-size: 22px; block-size: 22px; stroke-width: 1.9; }
.tab[aria-current="page"] { color: var(--brand-ink); }
.tab[aria-current="page"]::before {
  content: ""; position: absolute; inset-block-start: 0;
  inline-size: 26px; block-size: 3px; border-radius: 0 0 3px 3px; background: var(--brand);
}

/* ---------- cards / surfaces ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.card--flat { box-shadow: none; }
.section { padding-block: 20px; }
.section__head { display: flex; align-items: center; gap: 10px; margin-block-end: 12px; }
.section__head h2 { margin-inline-end: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: var(--tap); padding-inline: 18px;
  border-radius: var(--r-full); font-weight: 700; font-size: .95rem;
  text-decoration: none; border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active { transform: scale(.975); }
.btn--primary { background: var(--brand); color: var(--ink-on-accent); box-shadow: var(--sh-2); }
.btn--primary:hover { background: var(--brand-ink); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--quiet { color: var(--ink-2); }
.btn--quiet:hover { background: var(--surface-2); }
.btn--danger { background: var(--unsafe-soft); color: var(--unsafe-ink); border-color: var(--unsafe-line); }
.btn--block { display: flex; inline-size: 100%; }
.btn--lg { min-block-size: 52px; font-size: 1rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn svg { inline-size: 18px; block-size: 18px; flex: none; }

/* ---------- verdict badge（色＋形＋文字, 9.3） ---------- */
.vbadge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 6px; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  border: 1px solid; white-space: nowrap; flex: none;
}
.vbadge svg { inline-size: 14px; block-size: 14px; flex: none; }
.vbadge--SAFE   { background: var(--safe-soft);    color: var(--safe-ink);    border-color: var(--safe-line); }
.vbadge--CAUTION{ background: var(--caution-soft); color: var(--caution-ink); border-color: var(--caution-line); }
.vbadge--UNSAFE { background: var(--unsafe-soft);  color: var(--unsafe-ink);  border-color: var(--unsafe-line); }

.vbadge--lg { font-size: .9rem; padding: 8px 16px 8px 12px; gap: 8px; }
.vbadge--lg svg { inline-size: 20px; block-size: 20px; }

/* 大きな判定表示（メニュー詳細用） */
.verdict-hero {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-radius: var(--r-lg); border: 1.5px solid;
}
.verdict-hero__icon {
  inline-size: 44px; block-size: 44px; border-radius: var(--r-full);
  display: grid; place-items: center; flex: none; color: #fff;
}
.verdict-hero__icon svg { inline-size: 26px; block-size: 26px; stroke-width: 2.6; }
.verdict-hero__t { font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.verdict-hero__s { font-size: .8rem; font-weight: 700; letter-spacing: .06em; opacity: .75; }
.verdict-hero--SAFE    { background: var(--safe-soft);    border-color: var(--safe-line);    color: var(--safe-ink); }
.verdict-hero--SAFE    .verdict-hero__icon { background: var(--safe); }
.verdict-hero--CAUTION { background: var(--caution-soft); border-color: var(--caution-line); color: var(--caution-ink); }
.verdict-hero--CAUTION .verdict-hero__icon { background: var(--caution); }
.verdict-hero--UNSAFE  { background: var(--unsafe-soft);  border-color: var(--unsafe-line);  color: var(--unsafe-ink); }
.verdict-hero--UNSAFE  .verdict-hero__icon { background: var(--unsafe); }

/* 判定理由 */
.reasons { display: flex; flex-direction: column; gap: 6px; margin-block-start: 12px; }
.reason {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .85rem; line-height: 1.55; color: var(--ink-2);
}
.reason__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; margin-block-start: 8px; flex: none; }
.reason--CONTAINS      .reason__dot { background: var(--unsafe); }
.reason--CROSS_CONTACT .reason__dot { background: var(--caution); }
.reason--NO_DATA       .reason__dot { background: var(--ink-3); }
.reason--HEATED_OK     .reason__dot { background: var(--caution); }
.reason strong { color: var(--ink); font-weight: 700; }

/* ---------- chips / filters ---------- */
/* 横スクロールにすると選択肢が画面外に隠れ、スマホでは気づかれない。
   折り返して全部見えるようにする。 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 2px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-block-size: 38px; padding-inline: 14px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); font-size: .84rem; font-weight: 700; color: var(--ink-2);
}
.chip[aria-pressed="true"], .chip.is-on {
  background: var(--brand); color: var(--ink-on-accent); border-color: var(--brand);
}
.chip--safe[aria-pressed="true"]    { background: var(--safe);    border-color: var(--safe); color: #fff; }
.chip--caution[aria-pressed="true"] { background: var(--caution); border-color: var(--caution); color: #fff; }

/* ---------- allergen picker grid ---------- */
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.acell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-block-size: 78px; padding: 10px 6px; text-align: center;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-2);
  font-size: .78rem; font-weight: 700; line-height: 1.25;
  transition: transform .1s ease;
}
.acell:active { transform: scale(.96); }
.acell__ico { font-size: 1.4rem; line-height: 1; filter: grayscale(.35); }
.acell__en { font-size: .62rem; font-weight: 600; color: var(--ink-3); letter-spacing: .01em; }
.acell[aria-pressed="true"] {
  border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.acell[aria-pressed="true"] .acell__ico { filter: none; }
.acell[aria-pressed="true"] .acell__en { color: var(--brand-ink); opacity: .75; }
.acell__check {
  position: absolute; inset-block-start: 5px; inset-inline-end: 5px;
  inline-size: 16px; block-size: 16px; opacity: 0;
}
.acell { position: relative; }
.acell[aria-pressed="true"] .acell__check { opacity: 1; }

/* ---------- 28品目テーブル ---------- */
.atable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.atable { inline-size: 100%; font-size: .82rem; }
.atable th, .atable td { padding: 9px 10px; text-align: start; border-block-end: 1px solid var(--line); }
.atable thead th {
  font-size: .72rem; font-weight: 800; color: var(--ink-3); letter-spacing: .04em;
  background: var(--surface-2); position: sticky; inset-block-start: 0;
  border-block-end: 1px solid var(--line-strong);
}
.atable tbody tr.is-mine { background: var(--brand-soft); }
.atable tbody tr.is-mine td:first-child { box-shadow: inset 3px 0 0 var(--brand); font-weight: 700; }
.atable__name { display: flex; align-items: center; gap: 7px; }
.atable__name em { font-style: normal; font-size: .68rem; color: var(--ink-3); }
.astatus {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 800; white-space: nowrap;
}
.astatus svg { inline-size: 13px; block-size: 13px; flex: none; }
.astatus--CONTAINS      { color: var(--unsafe-ink); }
.astatus--CROSS_CONTACT { color: var(--caution-ink); }
.astatus--NOT_USED      { color: var(--safe-ink); }
.astatus--UNKNOWN       { color: var(--ink-3); }

/* ---------- menu card ---------- */
.mcard {
  display: flex; gap: 12px; padding: 12px; align-items: flex-start;
  border-block-end: 1px solid var(--line); text-decoration: none;
  min-block-size: var(--tap);
}
.mcard:last-child { border-block-end: none; }
.mcard:active { background: var(--surface-2); }
.mcard__thumb {
  inline-size: 72px; block-size: 72px; border-radius: var(--r-md); flex: none;
  background: var(--surface-sunk); display: grid; place-items: center;
  border: 1px solid var(--line); overflow: hidden; position: relative;
}
.mcard__thumb span { font-size: 1.6rem; opacity: .35; }
.mcard__body { flex: 1; min-inline-size: 0; }
.mcard__top { display: flex; align-items: flex-start; gap: 8px; margin-block-end: 3px; }
.mcard__name {
  font-size: .95rem; font-weight: 700; line-height: 1.4; flex: 1; min-inline-size: 0;
}
.mcard__name-ja {
  display: block; font-size: .78rem; font-weight: 600; color: var(--ink-3); line-height: 1.4;
}
.mcard__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); }
.mcard__price { font-weight: 800; color: var(--ink); }
.mcard__why { font-size: .78rem; color: var(--ink-2); line-height: 1.5; margin-block-start: 4px; }
.mcard--UNSAFE { opacity: .62; }
.mcard--UNSAFE .mcard__thumb { filter: grayscale(.6); }

/* ---------- store card ---------- */
.scard {
  display: flex; gap: 12px; padding: 14px 12px; align-items: center;
  border-block-end: 1px solid var(--line); text-decoration: none;
}
.scard:last-child { border-block-end: none; }
.scard:active { background: var(--surface-2); }
.scard__pin {
  inline-size: 40px; block-size: 40px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center; font-size: 1.15rem; border: 1.5px solid;
}
.scard__pin--SAFE    { background: var(--safe-soft);    border-color: var(--safe-line); }
.scard__pin--CAUTION { background: var(--caution-soft); border-color: var(--caution-line); }
.scard__pin--UNSAFE  { background: var(--unsafe-soft);  border-color: var(--unsafe-line); }
.scard__body { flex: 1; min-inline-size: 0; }
.scard__name { font-weight: 700; font-size: .95rem; line-height: 1.35; }
.scard__sub { font-size: .78rem; color: var(--ink-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.scard__count { font-size: .78rem; font-weight: 800; }
.scard__count--SAFE    { color: var(--safe-ink); }
.scard__count--CAUTION { color: var(--caution-ink); }
.scard__count--UNSAFE  { color: var(--ink-3); }

/* ---------- 出典・鮮度 ---------- */
.source {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .74rem; color: var(--ink-2); line-height: 1.5;
}
.source a { color: var(--brand-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.fresh {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: var(--r-full);
  border: 1px solid;
}
.fresh--fresh  { color: var(--safe-ink);    background: var(--safe-soft);    border-color: var(--safe-line); }
.fresh--aging  { color: var(--caution-ink); background: var(--caution-soft); border-color: var(--caution-line); }
.fresh--stale  { color: var(--unsafe-ink);  background: var(--unsafe-soft);  border-color: var(--unsafe-line); }

/* ---------- 免責（9.4：判定結果画面ごとに毎回表示） ---------- */
.disclaimer {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--caution-soft); border: 1px solid var(--caution-line);
  color: var(--caution-ink); font-size: .76rem; line-height: 1.55; font-weight: 600;
}
.disclaimer svg { inline-size: 15px; block-size: 15px; flex: none; margin-block-start: 2px; }
.disclaimer--quiet {
  background: var(--surface-2); border-color: var(--line); color: var(--ink-2); font-weight: 500;
}

/* ---------- サンプルデータ告知 ---------- */
.demo-banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-md);
  background: repeating-linear-gradient(135deg,
    var(--surface-2) 0 10px, color-mix(in srgb, var(--caution-soft) 60%, var(--surface-2)) 10px 20px);
  border: 1.5px dashed var(--caution-line);
  font-size: .78rem; line-height: 1.6; color: var(--ink-2);
}
.demo-banner strong { display: block; color: var(--caution-ink); font-size: .82rem; margin-block-end: 2px; }
.demo-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .64rem; font-weight: 800; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--r-full);
  background: var(--surface-sunk); color: var(--ink-3); border: 1px dashed var(--line-strong);
  flex: none;
}

/* ---------- forms ---------- */
.field { display: block; margin-block-end: 14px; }
.field__label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-2); margin-block-end: 6px; }
.input, .textarea, .select {
  inline-size: 100%; min-block-size: var(--tap); padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); font-size: .95rem;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); }
.textarea { min-block-size: 80px; resize: vertical; line-height: 1.6; }
.search {
  position: relative; display: flex; align-items: center;
}
.search svg { position: absolute; inset-inline-start: 13px; inline-size: 17px; block-size: 17px; color: var(--ink-3); pointer-events: none; }
.search .input { padding-inline-start: 40px; border-radius: var(--r-full); }

/* radio card */
.radios { display: flex; flex-direction: column; gap: 8px; }
.radio {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; min-block-size: var(--tap);
}
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio__mark {
  inline-size: 20px; block-size: 20px; border-radius: 50%; flex: none;
  border: 2px solid var(--line-strong); margin-block-start: 2px;
  display: grid; place-items: center; transition: border-color .12s;
}
.radio__mark::after {
  content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: var(--brand); transform: scale(0); transition: transform .12s;
}
.radio:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.radio:has(input:checked) .radio__mark { border-color: var(--brand); }
.radio:has(input:checked) .radio__mark::after { transform: scale(1); }
.radio__t { font-weight: 700; font-size: .92rem; line-height: 1.4; }
.radio__d { font-size: .78rem; color: var(--ink-2); line-height: 1.5; margin-block-start: 2px; }

/* switch */
.switch { display: flex; align-items: center; gap: 12px; padding: 12px 0; min-block-size: var(--tap); }
.switch__body { flex: 1; }
.switch__t { font-weight: 700; font-size: .92rem; }
.switch__d { font-size: .78rem; color: var(--ink-2); line-height: 1.5; margin-block-start: 2px; }
.switch__ui {
  inline-size: 50px; block-size: 30px; border-radius: var(--r-full); flex: none;
  background: var(--line-strong); position: relative; transition: background .16s;
}
.switch__ui::after {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  inline-size: 24px; block-size: 24px; border-radius: 50%; background: #fff;
  box-shadow: var(--sh-1); transition: transform .16s;
}
.switch[aria-checked="true"] .switch__ui { background: var(--brand); }
.switch[aria-checked="true"] .switch__ui::after { transform: translateX(20px); }

/* ---------- list rows ---------- */
.rows { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border-block-end: 1px solid var(--line); min-block-size: var(--tap);
  inline-size: 100%; text-align: start; text-decoration: none;
}
.row:last-child { border-block-end: none; }
.row:active { background: var(--surface-2); }
.row__body { flex: 1; min-inline-size: 0; }
.row__t { font-weight: 700; font-size: .92rem; }
.row__d { font-size: .78rem; color: var(--ink-2); line-height: 1.5; }
.row__v { font-size: .85rem; color: var(--ink-2); font-weight: 600; }
.row__chev { color: var(--ink-3); flex: none; }

/* ---------- accordion category ---------- */
.acc { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; margin-block-end: 10px; }
.acc__head {
  display: flex; align-items: center; gap: 10px; inline-size: 100%;
  padding: 14px; min-block-size: var(--tap); text-align: start;
}
.acc__head:active { background: var(--surface-2); }
.acc__t { font-weight: 700; font-size: .95rem; flex: 1; }
.acc__n { font-size: .76rem; color: var(--ink-2); font-weight: 700; }
.acc__chev { transition: transform .18s ease; color: var(--ink-3); flex: none; }
.acc[open] .acc__chev, .acc.is-open .acc__chev { transform: rotate(180deg); }
.acc__body { border-block-start: 1px solid var(--line); }

/* ---------- bottom sheet ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 80; background: rgb(20 18 15 / .45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  backdrop-filter: blur(2px);
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-3); max-block-size: 86dvh; display: flex; flex-direction: column;
  transform: translateY(101%); transition: transform .26s cubic-bezier(.32,.72,0,1);
  padding-block-end: env(safe-area-inset-bottom, 0px);
}
.sheet.is-open { transform: translateY(0); }
.sheet__grip { inline-size: 38px; block-size: 4px; border-radius: 2px; background: var(--line-strong); margin: 8px auto 4px; flex: none; }
.sheet__head { display: flex; align-items: flex-start; gap: 10px; padding: 8px 16px 12px; flex: none; }
.sheet__title { font-size: 1.05rem; font-weight: 800; flex: 1; line-height: 1.35; }
.sheet__close { inline-size: 34px; block-size: 34px; display: grid; place-items: center; border-radius: var(--r-full); color: var(--ink-2); background: var(--surface-2); flex: none; }
.sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-inline: 16px; padding-block-end: 20px; }
.sheet__foot { padding: 12px 16px; border-block-start: 1px solid var(--line); flex: none; background: var(--surface); }

/* ---------- map ---------- */
#map { inline-size: 100%; block-size: 100%; background: var(--surface-sunk); }
.map-wrap {
  position: relative; block-size: calc(100dvh - var(--header-h) - var(--tabbar-h) - 52px);
  min-block-size: 320px;
}
.map-pin-wrap { background: none !important; border: none !important; }
.map-pin {
  position: relative;
  display: grid; place-items: center; inline-size: 30px; block-size: 30px;
  border-radius: 50% 50% 50% 3px; transform: rotate(-45deg);
  border: 2px solid #fff; box-shadow: 0 2px 5px rgb(0 0 0 / .35);
}
.map-pin__g { transform: rotate(45deg); font-size: .82rem; line-height: 1; }
.map-pin--SAFE    { background: var(--safe); }
.map-pin--CAUTION { background: var(--caution); }
/* 判定できない店舗は主張を弱める。灰色一色の地図にならないよう不透明度で沈める。 */
.map-pin--UNSAFE  { background: #8B8378; opacity: .72; }
.map-pin__n {
  position: absolute; inset-block-start: -8px; inset-inline-end: -8px;
  min-inline-size: 18px; block-size: 18px; padding-inline: 4px;
  border-radius: var(--r-full); background: var(--safe); color: #fff;
  border: 2px solid #fff; font-size: .6rem; font-weight: 800;
  display: grid; place-items: center; transform: rotate(45deg);
  box-shadow: 0 1px 3px rgb(0 0 0 / .3);
}
/* 食べられる店を前面に出す */
.leaflet-marker-icon:has(.map-pin--SAFE) { z-index: 600 !important; }
.leaflet-marker-icon:has(.map-pin--UNSAFE) { z-index: 200 !important; }
.map-fab {
  position: absolute; inset-block-end: 14px; inset-inline-end: 14px; z-index: 400;
  inline-size: 46px; block-size: 46px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-2); display: grid; place-items: center; color: var(--brand-ink);
}
.leaflet-container { font: inherit !important; background: var(--surface-sunk) !important; }
.leaflet-control-attribution { font-size: 9px !important; background: rgb(255 255 255 / .7) !important; }

/* ---------- segmented ---------- */
.seg {
  display: flex; padding: 3px; gap: 3px; background: var(--surface-sunk);
  border-radius: var(--r-full); border: 1px solid var(--line);
}
.seg button {
  flex: 1; min-block-size: 36px; border-radius: var(--r-full);
  font-size: .84rem; font-weight: 700; color: var(--ink-2);
}
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

/* ---------- empty / states ---------- */
.empty { text-align: center; padding: 40px 20px; }
.empty__ico { font-size: 2.4rem; opacity: .4; margin-block-end: 10px; }
.empty__t { font-weight: 700; margin-block-end: 4px; }
.empty__d { font-size: .84rem; color: var(--ink-2); line-height: 1.6; max-inline-size: 34ch; margin-inline: auto; }
.empty .btn { margin-block-start: 16px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-sunk) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- onboarding ---------- */
/* 高さを固定して本文だけスクロールさせる。min-block-size だと中身で伸びてフッターが画面外に出る。 */
.ob { block-size: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.ob__head { padding: 16px var(--pad) 8px; flex: none; }
.ob__progress { display: flex; gap: 5px; margin-block-end: 14px; }
.ob__progress i { flex: 1; block-size: 4px; border-radius: 2px; background: var(--line); }
.ob__progress i.is-done { background: var(--brand); }
.ob__step { font-size: .72rem; font-weight: 800; color: var(--ink-3); letter-spacing: .06em; }
.ob__body { flex: 1; min-block-size: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px var(--pad) 20px; }
.ob__title { font-size: 1.35rem; font-weight: 800; line-height: 1.35; margin-block-end: 6px; letter-spacing: -.01em; }
.ob__sub { font-size: .86rem; color: var(--ink-2); line-height: 1.65; margin-block-end: 18px; }
.ob__foot {
  flex: none; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--line); background: var(--surface);
  display: flex; gap: 10px; align-items: center;
}
.ob__foot .btn--primary { flex: 1; }

/* hero (welcome) */
.hero { text-align: center; padding: 32px 0 24px; }
.hero__mark {
  inline-size: 76px; block-size: 76px; margin: 0 auto 18px; border-radius: 24px;
  background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 65%, #2AA99A));
  display: grid; place-items: center; box-shadow: var(--sh-3); color: #fff;
}
.hero__mark svg { inline-size: 42px; block-size: 42px; }
.hero__name { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--brand-ink); }
.hero__name em { font-style: normal; font-size: .85rem; font-weight: 700; color: var(--ink-3); display: block; letter-spacing: .12em; margin-block-start: 2px; }
.hero__tag { font-size: 1.05rem; font-weight: 700; margin-block-start: 16px; line-height: 1.5; }
.hero__sub { font-size: .88rem; color: var(--ink-2); margin-block-start: 8px; line-height: 1.65; }
.features { display: flex; flex-direction: column; gap: 10px; margin-block-start: 24px; text-align: start; }
.feature { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.feature__ico { inline-size: 34px; block-size: 34px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; flex: none; }
.feature__ico svg { inline-size: 18px; block-size: 18px; }
.feature__t { font-weight: 700; font-size: .88rem; }
.feature__d { font-size: .78rem; color: var(--ink-2); line-height: 1.5; }

/* ---------- 伝達カード（S-06） ---------- */
.tcard {
  background: #fff; color: #111; border-radius: var(--r-lg);
  border: 2px solid #111; overflow: hidden; box-shadow: var(--sh-3);
}
.tcard__head { background: #111; color: #fff; padding: 12px 16px; }
.tcard__head h2 { font-size: 1.1rem; font-weight: 800; letter-spacing: .02em; }
.tcard__head p { font-size: .72rem; opacity: .8; letter-spacing: .06em; font-weight: 700; }
.tcard__body { padding: 16px; }
.tcard__intro { font-size: .95rem; line-height: 1.7; font-weight: 600; margin-block-end: 14px; }
.tcard__label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: #666; margin-block-end: 6px; }
.tcard__allergens { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 14px; }
.tcard__a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 8px; background: #FEE; border: 2px solid #C0281E;
  font-size: 1.05rem; font-weight: 800; color: #8F1D17;
}
.tcard__a em { font-style: normal; font-size: .66rem; font-weight: 700; opacity: .7; }
.tcard__sev { font-size: .85rem; font-weight: 700; padding: 8px 12px; background: #FFF4E5; border-inline-start: 4px solid #B45309; margin-block-end: 14px; line-height: 1.6; }
.tcard__asks { font-size: .85rem; line-height: 1.75; padding-inline-start: 4px; }
.tcard__asks li { display: flex; gap: 8px; margin-block-end: 5px; }
.tcard__asks li::before { content: "□"; font-weight: 800; flex: none; }
.tcard__note { font-size: .82rem; margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px dashed #CCC; color: #444; line-height: 1.65; }
.tcard__foot { background: #F5F3EF; padding: 10px 16px; font-size: .68rem; color: #666; border-block-start: 1px solid #DDD; line-height: 1.5; }
.tcard-mirror { margin-block-start: 14px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); font-size: .84rem; line-height: 1.7; color: var(--ink-2); }
.tcard-mirror h3 { font-size: .78rem; font-weight: 800; color: var(--ink-3); letter-spacing: .04em; margin-block-end: 6px; }

/* ---------- offline bar ---------- */
.offline-bar {
  position: fixed; inset-inline: 0; inset-block-end: var(--tabbar-h); z-index: 55;
  background: var(--ink); color: var(--bg); font-size: .74rem; font-weight: 700;
  padding: 7px 14px; text-align: center; letter-spacing: .01em;
}

/* ---------- toast ---------- */
.toast {
  position: fixed; inset-block-end: calc(var(--tabbar-h) + 14px); inset-inline: 16px; z-index: 120;
  background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: var(--r-md);
  font-size: .85rem; font-weight: 600; box-shadow: var(--sh-3); text-align: center;
  animation: toastIn .22s cubic-bezier(.32,.72,0,1);
  max-inline-size: calc(var(--maxw) - 32px); margin-inline: auto;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 130; background: rgb(20 18 15 / .5);
  display: grid; place-items: center; padding: 20px;
}
.modal {
  background: var(--surface); border-radius: var(--r-lg); padding: 20px;
  max-inline-size: 360px; inline-size: 100%; box-shadow: var(--sh-3);
  animation: modalIn .18s ease;
}
@keyframes modalIn { from { opacity: 0; transform: scale(.96); } }
.modal h3 { margin-block-end: 8px; }
.modal p { font-size: .86rem; color: var(--ink-2); line-height: 1.65; margin-block-end: 18px; }
.modal__actions { display: flex; gap: 8px; }
.modal__actions .btn { flex: 1; }

/* ---------- utils ---------- */
.stack > * + * { margin-block-start: var(--gap, 12px); }
.hidden { display: none !important; }
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.divider { block-size: 1px; background: var(--line); margin-block: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 大画面では中央に寄せ、スマホの見た目を保つ */
@media (min-width: 640px) {
  body { background: var(--surface-sunk); }
  #app { max-inline-size: var(--maxw); margin-inline: auto; background: var(--bg);
         min-block-size: 100dvh; box-shadow: 0 0 0 1px var(--line); }
  .tabbar { inline-size: var(--maxw); inset-inline: auto; margin-inline: auto; left: 50%; transform: translateX(-50%); }
  .sheet { inline-size: var(--maxw); inset-inline: auto; left: 50%; transform: translate(-50%, 101%); }
  .sheet.is-open { transform: translate(-50%, 0); }
  .toast { inline-size: calc(var(--maxw) - 32px); left: 50%; transform: translateX(-50%); inset-inline: auto; }
  .offline-bar { inline-size: var(--maxw); inset-inline: auto; left: 50%; transform: translateX(-50%); }
}

/* ============================================================
   画像・ブランド表現
   ============================================================ */

/* チェーンのブランドヘッダー */
.chain-hero {
  display: flex; align-items: center; gap: 12px;
  padding: 16px var(--pad);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand-of-chain) 13%, var(--surface)) 0%,
      var(--surface) 100%);
  border-block-end: 1px solid var(--line);
  position: relative;
}
.chain-hero::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: 3px; background: var(--brand-of-chain);
}
.chain-hero__logo {
  inline-size: 58px; block-size: 58px; flex: none;
  display: grid; place-items: center; padding: 6px;
  background: #fff; border-radius: var(--r-md);
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  overflow: hidden;
}
.chain-hero__logo img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.chain-hero__name { font-size: 1.2rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.chain-hero__en { font-size: .74rem; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.chain-hero__count {
  margin-inline-start: auto; text-align: end; flex: none;
  display: flex; align-items: baseline; gap: 2px;
  color: var(--ink-2);
}
.chain-hero__count b { font-size: 1.25rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.chain-hero__count span { font-size: .74rem; font-weight: 700; }

/* ロゴ（一覧行など） */
.chain-logo { display: block; }
.chain-mark {
  display: grid; place-items: center; flex: none;
  border-radius: var(--r-sm); color: #fff; font-weight: 800; line-height: 1;
}

/* メニュー詳細のヒーロー写真 */
.menu-hero {
  position: relative; background: var(--surface-sunk);
  border-block-end: 1px solid var(--line);
  display: grid; place-items: center;
  block-size: 150px;
}
.menu-hero--photo { block-size: auto; aspect-ratio: 4 / 3; max-block-size: 300px; }
.menu-hero--photo img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
}
.menu-hero__ph { font-size: 3.4rem; opacity: .4; }
.menu-hero__credit {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: 14px 12px 6px; text-align: end;
  font-size: .62rem; letter-spacing: .01em;
  color: var(--ink-3);
}
.menu-hero--photo .menu-hero__credit {
  color: rgb(255 255 255 / .92);
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / .5));
  text-shadow: 0 1px 2px rgb(0 0 0 / .5);
}

/* サムネイルに写真が入ったとき */
.mcard__thumb img { border-radius: inherit; }
.mcard__thumb:has(img) { background: var(--surface); }


/* ============================================================
   アイコン既定サイズ
   インライン SVG は固有サイズを持たないため、ここで一度だけ決める。
   ============================================================ */
.ico { inline-size: 1.15em; block-size: 1.15em; flex: none; }
.hchip .ico        { inline-size: 15px; block-size: 15px; }
.tab .ico          { inline-size: 22px; block-size: 22px; }
.btn .ico          { inline-size: 18px; block-size: 18px; }
.vbadge .ico       { inline-size: 14px; block-size: 14px; }
.vbadge--lg .ico   { inline-size: 20px; block-size: 20px; }
.verdict-hero__icon .ico { inline-size: 26px; block-size: 26px; stroke-width: 2.6; }
.astatus .ico      { inline-size: 13px; block-size: 13px; }
.disclaimer .ico   { inline-size: 15px; block-size: 15px; margin-block-start: 2px; }
.demo-banner .ico  { inline-size: 17px; block-size: 17px; margin-block-start: 2px; }
.acell__check .ico { inline-size: 16px; block-size: 16px; color: var(--brand); }
.row__chev .ico, .acc__chev .ico { inline-size: 18px; block-size: 18px; }
.sheet__close .ico { inline-size: 17px; block-size: 17px; }
.appbar__back .ico { inline-size: 22px; block-size: 22px; }
.map-fab .ico      { inline-size: 22px; block-size: 22px; }
.feature__ico .ico { inline-size: 18px; block-size: 18px; }
.hero__mark .ico   { inline-size: 42px; block-size: 42px; }
.search .ico       { inline-size: 17px; block-size: 17px; }


/* ============================================================
   監査で見つかった修正
   ============================================================ */

/* --- タップ領域 44px の確保（9.2）---
   擬似要素で当たり判定だけ広げる方法は重なり順の影響で不安定だったため、
   実際の寸法を 44px 以上にする。 */
.hchip        { block-size: var(--tap); min-inline-size: var(--tap); border-radius: var(--r-full); justify-content: center; }
.sheet__close { inline-size: var(--tap); block-size: var(--tap); }
.seg button   { min-block-size: var(--tap); }
.chip         { min-block-size: var(--tap); }
.appbar__back { inline-size: var(--tap); min-inline-size: var(--tap); block-size: var(--tap); }
.acell        { min-block-size: 82px; }

/* 出典リンクと details のトグルは行として 44px を確保する */
.source__link {
  display: inline-flex; align-items: center;
  min-block-size: var(--tap); padding-block: 6px;
}
.card > summary, details > summary {
  min-block-size: var(--tap);
  display: flex; align-items: center; gap: 8px;
  list-style: none;
}
.card > summary::-webkit-details-marker,
details > summary::-webkit-details-marker { display: none; }
.card > summary::after, details > summary::after {
  content: ""; margin-inline-start: auto; flex: none;
  inline-size: 8px; block-size: 8px;
  border-inline-end: 2px solid var(--ink-3);
  border-block-end: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
details[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }

/* 地図のズームボタン */
.leaflet-control-zoom a {
  inline-size: var(--tap) !important; block-size: var(--tap) !important;
  line-height: var(--tap) !important; font-size: 20px !important;
}

/* ヘッダーが 44px のチップ3つで詰まらないよう少し高くする */
.appbar__in { block-size: 60px; }
:root { --header-h: 60px; }

/* --- ヘッダーのタイトルが潰れる問題 ---
   チップ3つと競合して 72px まで縮んでいた。チップ側を縮めて本文に幅を渡す。 */
.appbar__title {
  min-inline-size: 0; flex: 1 1 auto;
  font-size: .95rem;
}
.appbar__in > .hchip { flex: 0 0 auto; }
@media (max-width: 340px) {
  .appbar__in { gap: 5px; padding-inline: 8px; }
  .hchip { padding-inline: 7px; gap: 3px; }
  /* 幅が足りないときはプロフィール名を隠し、頭文字だけ残す */
  .hchip:has(.hchip__avatar) > span:not(.hchip__avatar) { display: none; }
}

/* --- ダークモードのコントラスト ---
   白文字 × 琥珀色は 2.25:1 しかなく読めない。濃い文字色に変える。 */
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    .chip--caution[aria-pressed="true"] { color: #241A06; }
    .chip[aria-pressed="true"], .chip.is-on { color: var(--ink-on-accent); }
    .hchip__avatar { color: #FFFFFF; }
  }
}
:root[data-theme="dark"] .chip--caution[aria-pressed="true"] { color: #241A06; }
:root[data-theme="dark"] .hchip__avatar { color: #FFFFFF; }

/* 明るいモードでも琥珀の上の白は 3:1 を切るため、濃色を使う */
.chip--caution[aria-pressed="true"] { color: #2A1C00; }

/* 小さすぎる薄墨は一段濃くする（AA 4.5:1 のため） */
.chain-hero__en, .atable thead th, .demo-tag, .menu-hero__credit { color: var(--ink-2); }

/* --- 写真クレジットの可読性 ---
   透過PNGが淡い背景に載ると白文字が 1.5:1 まで落ちるため、帯を敷く。 */
.menu-hero--photo .menu-hero__credit {
  color: #fff;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / .72));
  padding-block: 20px 7px;
  text-shadow: 0 1px 3px rgb(0 0 0 / .8);
}

/* --- 320px でタブ名が切れる --- */
@media (max-width: 360px) {
  .tab { font-size: .62rem; }
  .tab > span:last-child { letter-spacing: -.02em; }
}

/* --- シートを開いている間、背後を触らせない --- */
body.sheet-open #app { overflow: hidden; }