/* SabaiBook 日本版 — 公開ページ・予約ページ・管理画面の共通の見た目
   配色と書体は日本語 LP（sabaibook.com/ja/）に合わせる。
   間隔は 8 の倍数（4 は詰まった所だけ）。押せる所は 44px 以上。 */

:root{
  --paper:#faf7ef; --paper-deep:#f0e9d8; --card:#ffffff;
  --ink:#1a1814; --ink-soft:#3d3a35; --ink-mute:#6b655e;
  --line:rgba(26,24,20,.12); --line-strong:rgba(26,24,20,.24);
  --accent:#a8304f; --accent-on:#ffffff; --accent-soft:#fbe7ec; --accent-ink:#8f2743;
  --ok:#2f6b4f; --ok-soft:#e4efe8; --warn:#8a5a0f; --warn-soft:#f6ecd8; --danger:#a3262a; --danger-soft:#f8e3e3;
  --f-body:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  --f-num:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Hiragino Sans",system-ui,sans-serif;
  --r-s:8px; --r-m:16px; --r-l:24px;
  --shadow:0 1px 2px rgba(26,24,20,.06),0 8px 24px rgba(26,24,20,.06);
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15130f; --paper-deep:#201d18; --card:#1e1b17;
    --ink:#ece7df; --ink-soft:#cfc8bd; --ink-mute:#a39b90;
    --line:rgba(236,231,223,.14); --line-strong:rgba(236,231,223,.26);
    --accent:#e0708e; --accent-on:#1a1814; --accent-soft:#3a2129; --accent-ink:#f0a3b7;
    --ok:#8cc7a8; --ok-soft:#1f3329; --warn:#e2b86b; --warn-soft:#3a2f1b; --danger:#f0a0a0; --danger-soft:#3b2020;
    --shadow:none; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#15130f; --paper-deep:#201d18; --card:#1e1b17;
  --ink:#ece7df; --ink-soft:#cfc8bd; --ink-mute:#a39b90;
  --line:rgba(236,231,223,.14); --line-strong:rgba(236,231,223,.26);
  --accent:#e0708e; --accent-on:#1a1814; --accent-soft:#3a2129; --accent-ink:#f0a3b7;
  --ok:#8cc7a8; --ok-soft:#1f3329; --warn:#e2b86b; --warn-soft:#3a2f1b; --danger:#f0a0a0; --danger-soft:#3b2020;
  --shadow:none; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.7;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3{font-feature-settings:"palt" 1}
h1,h2,h3{line-height:1.35; margin:0; text-wrap:balance}
h1{font-size:26px; letter-spacing:-.01em}
h2{font-size:20px}
h3{font-size:16px}
p{margin:0}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent-ink); text-underline-offset:3px}
.num{font-family:var(--f-num); font-variant-numeric:tabular-nums}
.note{font-size:14px; color:var(--ink-mute)}
.wrap{padding-inline:16px; max-width:720px; margin-inline:auto}
.narrow{max-width:640px}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ---- ボタン ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px;
  border-radius:999px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink);
  font:inherit; font-weight:700; font-size:16px; text-decoration:none; cursor:pointer;
  transition:transform .15s var(--ease-out), background .15s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-on)}
.btn.danger{color:var(--danger); border-color:color-mix(in oklab,var(--danger) 40%,transparent)}
.btn.small{min-height:44px; padding:0 16px; font-size:14px}
.btn.wide{width:100%}
.btn.ghost{background:transparent; border-color:transparent; color:var(--accent-ink)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55; cursor:default; transform:none}
.btn[aria-busy="true"]::after{content:""; width:16px; height:16px; border-radius:50%; border:2px solid currentColor;
  border-right-color:transparent; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- 入力 ---- */
.field{display:grid; gap:8px}
.field + .field{margin-top:24px}
.field label,.field .label{font-weight:700; font-size:14px}
.field .hint{font-size:14px; color:var(--ink-mute)}
.field .error{font-size:14px; color:var(--danger); font-weight:700}
input[type=text],input[type=tel],input[type=email],input[type=url],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%; min-height:48px; padding:12px 16px; border-radius:var(--r-s); border:1px solid var(--line-strong);
  background:var(--card); color:var(--ink); font:inherit; font-size:16px}
textarea{min-height:120px; line-height:1.7; resize:vertical}
input[aria-invalid="true"]{border-color:var(--danger)}
.check{display:flex; gap:16px; align-items:flex-start; min-height:44px; padding:8px 0; cursor:pointer}
.check input{width:24px; height:24px; margin:0; flex:none; accent-color:var(--accent)}

/* ---- 札 ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:16px; box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.stack > * + *{margin-top:16px}
.row{display:flex; align-items:center; gap:16px}
.row.between{justify-content:space-between}
.chip{display:inline-flex; align-items:center; flex:none; white-space:nowrap; min-height:24px; padding:0 8px; border-radius:999px; font-size:12px; font-weight:700;
  background:var(--paper-deep); color:var(--ink-soft)}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.danger{background:var(--danger-soft); color:var(--danger)}
.chip.accent{background:var(--accent-soft); color:var(--accent-ink)}

/* ---- 知らせ（画面の下に出す） ---- */
.toast{position:fixed; left:16px; right:16px; bottom:calc(88px + env(safe-area-inset-bottom,0px)); z-index:50; margin-inline:auto; max-width:480px;
  background:var(--ink); color:var(--paper); border-radius:var(--r-m); padding:16px; display:flex; gap:16px; align-items:center;
  animation:rise .2s var(--ease-out)}
.toast .btn{min-height:44px; background:transparent; color:var(--paper); border-color:rgba(255,255,255,.4)}
@keyframes rise{from{transform:translateY(16px); opacity:0}}
.alert{border-radius:var(--r-m); padding:16px; background:var(--warn-soft); color:var(--ink)}
.alert.danger{background:var(--danger-soft)}
.alert.ok{background:var(--ok-soft)}
.alert strong{display:block; margin-bottom:4px}

/* ---- シート（下からせり上がる） ---- */
.sheet-back{position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.4); animation:fade .2s var(--ease-out)}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:41; max-height:92dvh; overflow:auto; background:var(--paper);
  border-radius:var(--r-l) var(--r-l) 0 0; padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));
  animation:up .25s var(--ease-out); max-width:720px; margin-inline:auto}
.sheet h2{margin-bottom:16px}
.sheet .actions{display:grid; gap:8px; margin-top:24px}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(24px); opacity:.6}}

/* ---- 読み込み中 ---- */
.loading{display:grid; place-items:center; gap:16px; padding:64px 16px; color:var(--ink-mute)}
.loading::before{content:""; width:32px; height:32px; border-radius:50%; border:3px solid var(--line-strong); border-top-color:var(--accent);
  animation:spin .9s linear infinite}
.empty{padding:32px 16px; text-align:center; color:var(--ink-mute)}

/* ============ 公開ページ ============ */
.pub-head{border-bottom:1px solid var(--line)}
.pub-head .wrap{display:flex; align-items:center; min-height:56px}
.shop-link{font-weight:700; color:var(--ink); text-decoration:none}
.preview-bar{background:var(--warn-soft); color:var(--ink); text-align:center; font-size:14px; padding:8px 16px; font-weight:700}
.photos{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; padding:16px}
.photos img{flex:none; width:min(86%,560px); aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-m); scroll-snap-align:center; background:var(--paper-deep)}
.hero{padding-block:24px 8px}
.eyebrow{font-size:14px; color:var(--ink-mute); font-weight:700; margin-bottom:8px}
.catch{margin-top:8px; font-size:18px; font-weight:700; color:var(--ink-soft)}
.lead{margin-top:16px; line-height:1.9; color:var(--ink-soft)}
.block{padding-block:32px; border-top:1px solid var(--line)}
.hero + .block{margin-top:24px}
.block h2{margin-bottom:16px}
.block h3{margin:24px 0 8px; font-size:14px; color:var(--ink-mute)}
.menu-list{list-style:none; margin:0; padding:0}
.menu-item{padding:16px 0; border-bottom:1px solid var(--line)}
.menu-row{display:flex; justify-content:space-between; gap:16px; align-items:baseline}
.menu-name{font-weight:700}
.menu-price{font-weight:700; white-space:nowrap}
.menu-meta{font-size:14px; color:var(--ink-mute); margin-top:4px}
.hours{width:100%; border-collapse:collapse}
.hours th,.hours td{padding:8px 0; border-bottom:1px solid var(--line); text-align:left}
.hours th{width:3em; color:var(--ink-mute); font-weight:700}
.policy{white-space:normal; line-height:1.9}
.contact{list-style:none; margin:0; padding:0}
.contact li{display:flex; gap:16px; padding:8px 0; min-height:44px; align-items:center}
.contact .k{width:6em; flex:none; color:var(--ink-mute); font-size:14px}
.pub-foot{margin-top:0; padding-block:32px calc(96px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); font-size:14px}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 24px}
.foot-links a{min-height:44px; display:inline-flex; align-items:center}
.made{margin-top:16px; color:var(--ink-mute)}
.book-bar{position:fixed; left:0; right:0; bottom:0; z-index:30; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:color-mix(in oklab,var(--paper) 92%,transparent); border-top:1px solid var(--line); backdrop-filter:blur(8px)}
.book-bar .btn{max-width:480px; margin-inline:auto; display:flex}
.doc{padding-block:32px}
.doc h1{margin-bottom:24px}
.doc h2{font-size:18px; margin:32px 0 8px}
.doc p,.doc li{line-height:1.9}
.doc ol,.doc ul{padding-left:1.5em; margin:8px 0}
.doc table{width:100%; border-collapse:collapse}
.doc th,.doc td{padding:16px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.doc th{width:40%; padding-right:16px; font-size:14px; color:var(--ink-mute)}
@media (max-width:480px){ .doc th{display:block; width:auto; padding-bottom:0; border-bottom:0} .doc td{display:block; padding-top:4px} }
.msg-page .msg{max-width:480px; margin:15vh auto 0; padding:0 16px}
.msg-page .msg h1{font-size:20px; margin-bottom:16px}
.msg-page .msg p + p{margin-top:8px}

/* ============ 予約ページ ============ */
.app{max-width:560px; margin-inline:auto; padding:0 16px calc(120px + env(safe-area-inset-bottom,0px))}
.app-head{display:flex; align-items:center; gap:8px; min-height:56px}
.app-head .back{min-width:44px; min-height:44px; border:0; background:transparent; color:var(--ink); font-size:24px; cursor:pointer; border-radius:999px}
.app-head .title{font-weight:700}
.steps{display:flex; gap:4px; margin:8px 0 24px}
.steps span{flex:1; height:4px; border-radius:2px; background:var(--line-strong)}
.steps span.on{background:var(--accent)}
.section-title{font-size:20px; font-weight:700; margin:8px 0 16px}
.group-label{font-size:14px; color:var(--ink-mute); font-weight:700; margin:24px 0 8px}
.choice{display:flex; gap:16px; align-items:flex-start; width:100%; text-align:left; padding:16px; min-height:64px;
  border:1px solid var(--line); background:var(--card); border-radius:var(--r-m); font:inherit; color:inherit; cursor:pointer}
.choice + .choice{margin-top:8px}
.choice .mark{flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--line-strong); margin-top:2px; display:grid; place-items:center}
.choice.multi .mark{border-radius:6px}
.choice[aria-checked="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.choice[aria-checked="true"] .mark{border-color:var(--accent); background:var(--accent)}
.choice[aria-checked="true"] .mark::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent-on)}
.choice.multi[aria-checked="true"] .mark::after{width:10px; height:6px; border-radius:0; background:transparent;
  border-left:2px solid var(--accent-on); border-bottom:2px solid var(--accent-on); transform:rotate(-45deg) translate(1px,-1px)}
.choice[aria-disabled="true"]{opacity:.5; cursor:default}
.choice .body{flex:1; min-width:0}
.choice .top{display:flex; justify-content:space-between; gap:16px; font-weight:700}
.choice .sub{font-size:14px; color:var(--ink-mute); margin-top:4px; text-wrap:pretty}
.bottom-bar{position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--card); border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.bottom-bar .inner{max-width:560px; margin-inline:auto; display:flex; align-items:center; gap:16px}
.bottom-bar .sum{flex:1; min-width:0; font-size:14px; color:var(--ink-mute)}
.bottom-bar .sum b{display:block; font-size:20px; color:var(--ink)}
.cal{background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:16px}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.cal-head button{min-width:44px; min-height:44px; border:0; background:transparent; font-size:20px; color:var(--ink); cursor:pointer; border-radius:999px}
.cal-head button[disabled]{opacity:.3; cursor:default}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center}
.cal-grid .wd{font-size:12px; color:var(--ink-mute); padding:4px 0}
.cal-grid .wd.sun{color:var(--danger)} .cal-grid .wd.sat{color:#2f5d8a}
.day{min-height:48px; border-radius:var(--r-s); border:0; background:transparent; font:inherit; color:var(--ink); display:grid;
  place-items:center; align-content:center; gap:0; cursor:pointer; font-family:var(--f-num); font-variant-numeric:tabular-nums}
.day small{font-size:10px; line-height:1; color:var(--ink-mute); font-family:var(--f-body)}
.day.open small{color:var(--ok)}
.day[disabled]{color:var(--ink-mute); opacity:.45; cursor:default}
.day[aria-pressed="true"]{background:var(--accent); color:var(--accent-on)}
.day[aria-pressed="true"] small{color:var(--accent-on)}
.day.today{box-shadow:inset 0 0 0 1px var(--line-strong)}
.week-hours + .field{margin-top:24px}
.slot-group{font-size:14px; color:var(--ink-mute); margin:16px 0 8px}
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px}
.slot{min-height:48px; border-radius:var(--r-s); border:1px solid var(--line-strong); background:var(--card); font:inherit; font-weight:700;
  color:var(--ink); cursor:pointer; font-family:var(--f-num); font-variant-numeric:tabular-nums}
.slot[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-on)}
.summary{list-style:none; margin:0; padding:0}
.summary li{display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--line)}
.summary li:last-child{border-bottom:0}
.summary .k{width:6em; flex:none; color:var(--ink-mute); font-size:14px; padding-top:2px}
.summary .v{flex:1; min-width:0; font-weight:700}
.summary .v .line{display:block}
.lines p + p{margin-top:4px}
.stack-lg > * + *{margin-top:24px}
.card .btn.wide{margin-top:16px}
.policy-box{max-height:240px; overflow:auto; background:var(--paper-deep); border-radius:var(--r-s); padding:16px; font-size:14px; line-height:1.9}
.done{text-align:center; padding-top:32px}
.done .mark-ok{width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:var(--ok-soft); color:var(--ok); display:grid; place-items:center; font-size:32px}

/* ============ 管理画面 ============ */
.owner{max-width:720px; margin-inline:auto; padding:0 16px calc(96px + env(safe-area-inset-bottom,0px))}
.owner-head{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; margin-bottom:8px}
.owner-head h1{font-size:20px}
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--card); border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar button{min-height:56px; border:0; background:transparent; font:inherit; font-size:12px; color:var(--ink-mute); cursor:pointer;
  display:grid; place-items:center; align-content:center; gap:2px}
.tabbar button svg{width:24px; height:24px}
.tabbar button[aria-current="page"]{color:var(--accent-ink); font-weight:700}
.card > .progress{margin-top:16px}
.progress{height:8px; border-radius:4px; background:var(--paper-deep); overflow:hidden}
.progress span{display:block; height:100%; background:var(--accent)}
.todo{list-style:none; margin:16px 0 0; padding:0}
.todo li + li{border-top:1px solid var(--line)}
.todo button{width:100%; display:flex; align-items:center; gap:16px; padding:12px 0; min-height:56px; border:0; background:transparent;
  font:inherit; color:inherit; text-align:left; cursor:pointer}
.todo .dot{flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--line-strong); display:grid; place-items:center}
.todo .is-done .dot{background:var(--ok); border-color:var(--ok); color:#fff; font-size:14px}
.todo .is-done .t{text-decoration:line-through; color:var(--ink-mute)}
.todo .sub{display:block; font-size:12px; color:var(--ink-mute)}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.stat .k{font-size:14px; color:var(--ink-mute)}
.stat .v{font-size:26px; font-weight:700; font-family:var(--f-num); font-variant-numeric:tabular-nums; line-height:1.3}
.stat .s{font-size:12px; color:var(--ink-mute)}
.list{list-style:none; margin:0; padding:0}
.list > li + li{border-top:1px solid var(--line)}
.bk{width:100%; display:flex; gap:16px; padding:12px 0; min-height:64px; border:0; background:transparent; font:inherit; color:inherit;
  text-align:left; cursor:pointer; align-items:flex-start}
.bk .time{width:4.5em; flex:none; font-family:var(--f-num); font-variant-numeric:tabular-nums; font-weight:700}
.bk .time small{display:block; font-weight:400; color:var(--ink-mute); font-size:12px}
.bk .main{flex:1; min-width:0}
.bk .name{display:block; font-weight:700}
.bk .menu{display:block; font-size:14px; color:var(--ink-mute)}
.bk.cancelled .name,.bk.cancelled .menu{text-decoration:line-through; color:var(--ink-mute)}
.day-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:24px 0 8px}
.day-head h3{font-size:16px}
.seg{display:flex; background:var(--paper-deep); border-radius:999px; padding:4px; gap:4px}
.seg button{flex:1; min-height:40px; border:0; border-radius:999px; background:transparent; font:inherit; font-size:14px; color:var(--ink-soft); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--card); color:var(--ink); font-weight:700; box-shadow:var(--shadow)}
.week-hours .wk{padding:16px 0; border-bottom:1px solid var(--line)}
.wk-head{display:flex; align-items:center; justify-content:space-between; gap:16px}
.switch{display:flex; align-items:center; gap:8px; min-height:44px; font-size:14px; cursor:pointer}
.switch input{width:24px; height:24px; margin:0; accent-color:var(--accent)}
.range{display:flex; align-items:center; gap:8px; margin-top:8px}
.range input[type=time]{flex:1; min-width:0}
.icon-btn{flex:none; min-width:44px; min-height:44px; border:0; border-radius:999px; background:transparent; color:var(--ink-mute); font-size:20px; cursor:pointer}
.sheet h2:focus{outline:none}
.draft-banner{margin:16px 0 24px; padding:16px; border-radius:var(--r-s); background:var(--warn-soft)}
.draft-banner p + p{margin-top:4px}
.draft-banner .warn{color:var(--warn); font-weight:700}
.draft-banner .row{flex-wrap:wrap; gap:8px; margin-top:16px}
.settings-list{list-style:none; margin:0; padding:0}
.settings-list li + li{border-top:1px solid var(--line)}
.settings-list button{width:100%; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0;
  border:0; background:transparent; font:inherit; color:inherit; text-align:left; cursor:pointer}
.settings-list .state{font-size:14px; color:var(--ink-mute)}
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.photo-grid figure{margin:0; position:relative}
.photo-grid img{aspect-ratio:1; object-fit:cover; border-radius:var(--r-s); width:100%}
.photo-grid button{position:absolute; top:4px; right:4px; min-width:44px; min-height:44px; border-radius:999px; border:0;
  background:rgba(0,0,0,.55); color:#fff; font-size:16px; cursor:pointer}

/* ---- 管理画面から使い方への入口 ---- */
.help-link{text-align:center; margin-top:16px}
.msg-help{margin-top:24px}
.msg-help a{display:inline-flex; align-items:center; min-height:44px}

/* ============ 使い方のページ（読む頁: 1行は40字ほど、行間は広め） ============ */
.help-bar{position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px)}
.help-page{padding-top:0}
.help-bar-in{max-width:640px; margin-inline:auto; padding-inline:16px; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.help-bar-title{font-weight:700; color:var(--ink); text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.help-main{padding-block:32px 96px; scroll-margin-top:calc(56px + env(safe-area-inset-top,0px))}
.help-main h1{margin-bottom:8px}
.help-lead{color:var(--ink-soft)}
.help-toc{display:grid; gap:16px; margin-top:24px}
.help-toc .card + .card{margin-top:0}
.help-toc h2{font-size:16px; margin-bottom:8px}
.help-toc ul{list-style:none; margin:0; padding:0}
.help-toc li + li{border-top:1px solid var(--line)}
.help-toc a{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding-block:8px;
  color:var(--ink); text-decoration:none}
.help-toc a::after{content:"›" / ""; flex:none; color:var(--ink-mute); font-size:20px; line-height:1}
.help-cat{margin-top:48px; padding-top:24px; border-top:1px solid var(--line-strong)}
.help-cat-title{margin-bottom:16px}
.help-item{scroll-margin-top:calc(72px + env(safe-area-inset-top,0px))}
.help-item:target{box-shadow:0 0 0 2px var(--accent)}
.help-item h3{font-size:18px; margin-bottom:16px}
.help-item p,.help-item li,.help-item dd{line-height:1.8}
.help-block + .help-block{margin-top:24px}
.help-block h4{font-size:14px; color:var(--ink-mute); margin:0 0 8px}
.help-block p + p{margin-top:4px}
.help-block > .note{margin-top:8px}
.help-steps{list-style:none; margin:0; padding:0; counter-reset:step}
.help-steps li{position:relative; padding-left:40px; counter-increment:step}
.help-steps li + li{margin-top:8px}
.help-steps li::before{content:counter(step); position:absolute; left:0; top:2px; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink); font-family:var(--f-num); font-weight:700; font-size:14px; line-height:1}
.help-notes{margin:0; padding-left:1.25em}
.help-notes li + li{margin-top:8px}
.help-notes li.is-important{list-style:none; margin-left:-1.25em; padding:8px 16px; border-radius:var(--r-s); background:var(--warn-soft); color:var(--ink); font-weight:700}
.help-terms{margin:0}
.help-terms dt{font-weight:700}
.help-terms dd{margin:4px 0 0; color:var(--ink-soft)}
.help-terms dd + dt{margin-top:16px}
.help-notify{display:grid; gap:4px; margin-top:24px; padding:12px 16px; border-radius:var(--r-s); background:var(--paper-deep)}
.help-notify .k{font-size:12px; font-weight:700; color:var(--ink-mute)}
.help-notify .v{font-size:14px; line-height:1.7}
.help-related{margin-top:24px; font-size:14px; color:var(--ink-mute)}
.help-related a{display:inline-flex; align-items:center; min-height:44px; margin-right:16px}
.help-note-bottom{margin-top:24px; font-size:14px; color:var(--ink-soft)}
.help-contact{margin-top:16px}
.help-contact .btn{color:var(--accent-on)}
.help-back{margin-top:16px; text-align:right; font-size:14px}
.help-back a{display:inline-flex; align-items:center; min-height:44px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .btn[aria-busy="true"]::after,.loading::before{animation:none; border-right-color:currentColor}
}

/* 体験用の店の帯（本番の店では出ない）。z-index はシート(41)より下に置き、
   開いたシートを覆わないようにする。safe-area は body 側で既に足しているので付けない。 */
.demo-banner {
  position: sticky; top: 0; z-index: 30;
  padding: 8px 16px;
  background: #3F3A33; color: #FFF7EC;
  font-size: 13px; line-height: 1.5;
}
.demo-banner strong { display: block; font-size: 14px; }
.demo-banner span { display: block; opacity: 0.85; }