/* =====================================================================
   男の身だしなみアプリ — UIデザイン適用版
   方針: UIデザインガイドラインのトークンに沿い、初心者が身構えない
        暖色基調の初回チェック体験にする。
   ===================================================================== */
:root{
  color-scheme:light dark;
  /* タブレット／PC で本文が間延びしないよう、中身の最大幅を1か所で決める。
     この幅に収まらない狭い画面では自動的に画面幅いっぱいになる。 */
  --content-max:640px;
  --bg:#fff7ee;
  --surface:#fff;
  --text:#2b2622;
  --muted:#6e6359;
  --orange:#f0822e;
  --orange-cta:#d9701f;
  --ink-orange:#9e4e0e;
  --green-strong:#4e9a48;
  --ink-green:#2f6a2c;
  --line:#ead9c8;
  --line-strong:#d6bda7;
  --soft:#fff0df;
  --shadow:0 16px 40px rgba(83,54,28,.14);
  --shadow-soft:0 8px 24px rgba(83,54,28,.09);
  --r-card:16px;
  --r-hero:20px;
  --r-btn:14px;
  --ease:cubic-bezier(.4,0,.2,1);
  --ink:var(--text);
  --line-soft:var(--line);
  --border:var(--line-strong);
  /* 白地決め打ちだった箇所をトークン化（ダークモード対応用） */
  --surface-2:#fffdfa;
  --surface-translucent:rgba(255,255,255,.96);
  --chip-active-bg:#fff8f1;
  --tag-has-border:#cbe1c8;
  --tag-has-bg:#f1faef;
  --hero-grad-1:#fff4e7;
  --hero-grad-2:#fff;
  --medal-border:#f3cfaa;
  --disabled-text:#b8a89b;
  --toast-bg:#2b2622;
  --scrim:rgba(0,0,0,.4);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#15110d;
    --surface:#221c17;
    --text:#f1e9e0;
    --muted:#a99b8d;
    --ink-orange:#f3a366;
    --ink-green:#8fd188;
    --line:#3b332b;
    --line-strong:#4c4137;
    --soft:#2a2119;
    --shadow:0 16px 40px rgba(0,0,0,.45);
    --shadow-soft:0 10px 26px rgba(0,0,0,.32);
    --surface-2:#2a231c;
    --surface-translucent:rgba(21,17,13,.92);
    --chip-active-bg:#3a2a1a;
    --tag-has-border:#3f6b3c;
    --tag-has-bg:#1e2f1c;
    --hero-grad-1:#241c14;
    --hero-grad-2:#1a1510;
    --medal-border:#6b4a24;
    --disabled-text:#6e6359;
    --scrim:rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  /* アプリ本体がビューポート全体を占め、スクロールは .screen-wrap の内側だけで起きる。
     以前は 430px 以下だけこの挙動だったが、全画面幅へ適用した。 */
  /* svh 非対応ブラウザ向けに vh を先に置く（後勝ちで svh が優先される） */
  margin:0;min-width:320px;height:100vh;height:100svh;overflow:hidden;
  font-family:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  color:var(--text);line-height:1.6;background:var(--bg);
}
.num{font-family:"Inter",monospace}
b{font-weight:700}

:where(button,a,[tabindex]):focus-visible{outline:3px solid rgba(240,130,46,.55);outline-offset:3px}

/* ===================== App shell =====================
   端末枠（旧 .phone）と紹介ヘッダー（旧 .stage__head）は廃止。
   どの画面幅でもアプリ本体だけがビューポート全体を占める。
   タブレット／PC の広い画面では、背景と境界線は全幅のまま
   「中身だけ」を --content-max に収めて中央寄せする
   （padding-inline の max() 計算。入れ子の枠を作らないため）。 */
.app{
  position:relative;width:100%;height:100vh;height:100svh;
  display:flex;flex-direction:column;background:var(--surface);overflow:hidden;
}
.noscript-note{margin:0;padding:12px 16px;background:var(--soft);border-bottom:1px solid var(--line);font-size:13px}

/* 全幅の帯の中で、中身だけを中央の読みやすい幅に収める共通の余白計算 */
.appbar,.screen,.dock{--gutter:16px;padding-inline:max(var(--gutter),calc((100% - var(--content-max)) / 2))}

/* ---- app bar ---- */
.appbar{position:relative;z-index:5;padding-block:16px 14px;border-bottom:1px solid var(--line);background:var(--surface-translucent)}
.appbar__brand{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.appbar__name{margin:0;font-weight:900;font-size:16px}
.appbar__step{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);
  border:1px solid var(--line);padding:3px 10px;border-radius:999px;background:var(--soft)}

.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.tab{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:6px 2px 8px;border:0;background:transparent;cursor:pointer;
  border-bottom:3px solid transparent;border-radius:12px 12px 0 0;transition:background 160ms var(--ease)}
.tab:hover:not(.is-locked){background:var(--soft)}
.tab__txt{font-size:11px;font-weight:700;color:var(--muted);line-height:1}
.tab.is-active{border-bottom-color:var(--orange)}
.tab.is-active .tab__txt{color:var(--text)}
.tab.is-active .step-badge{background:var(--orange);border-color:var(--orange);color:#fff}
.tab.is-locked{cursor:not-allowed;opacity:.45}
.tab.is-done .step-badge{background:var(--green-strong);border-color:var(--green-strong);color:#fff}
.step-badge{display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);
  border-radius:999px;font:700 13px/1 "Inter",sans-serif}

.progress{margin-top:11px;height:8px;background:var(--soft);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.progress__fill{display:block;height:100%;background:var(--orange);
  transform-origin:left;transform:scaleX(var(--p,.04));transition:transform 240ms var(--ease)}

/* ===================== Screen viewport ===================== */
.screen-wrap{flex:1;min-height:0;overflow-y:auto;overflow-x:clip}
.screen{padding-block:18px 104px}
.screen[hidden]{display:none}

.sec-label{margin:18px 2px 10px;font-size:14px;font-weight:700}
.sec-label:first-child{margin-top:4px}

/* 列ラッパー。PC幅（≥1024px）で .screen が2カラムになったときの振り分け単位。
   スマホ／タブレットでは素のブロックなので、見た目も表示順も従来どおりの縦積み。 */
.col{min-width:0}
/* ラッパーを挟んだことで2列目の見出しが :first-child になり上マージンが詰まる。
   縦積み時は従来の間隔へ戻す（PC幅では下の @media で 4px に戻す）。 */
.col + .col > .sec-label:first-child{margin-top:18px}

.sec-note{font-size:11px;font-weight:400;color:var(--muted)}
.diff-key{text-decoration:underline}

/* ---- generic card（枠だけ） ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;box-shadow:var(--shadow-soft)}

/* ===================== S1 初回チェック ===================== */
.s1-head{margin:0 0 16px;padding:16px;border-radius:var(--r-hero);background:linear-gradient(135deg,var(--hero-grad-1) 0%,var(--hero-grad-2) 74%);border:1px solid var(--line)}
.s1-value{margin:0 0 5px;font-size:16px;font-weight:900;line-height:1.45}
.s1-remain{margin:0;font-size:12px;color:var(--muted)}

.qcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;box-shadow:var(--shadow-soft)}
.qcard[hidden]{display:none}
.qkicker{display:inline-flex;align-items:center;margin:0 0 10px;padding:4px 9px;border-radius:999px;background:var(--soft);font:700 12px/1 "Inter",sans-serif;color:var(--ink-orange)}
.qtitle{margin:0 0 6px;font-size:20px;font-weight:900;line-height:1.35}
.qhint{margin:0 0 14px;font-size:12.5px;color:var(--muted)}

.chips{display:flex;flex-direction:column;gap:10px}
.chip{display:flex;align-items:center;gap:11px;width:100%;min-height:52px;
  padding:12px 13px;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  text-align:left;cursor:pointer;color:var(--text);transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease),transform 160ms var(--ease),background 160ms var(--ease)}
.chip:hover{border-color:var(--orange);box-shadow:0 6px 18px rgba(240,130,46,.13);transform:translateY(-1px)}
.chip:active{transform:translateY(0)}
.chip__body{display:flex;flex-direction:column;min-width:0}
.chip__label{font-size:15px;font-weight:700;line-height:1.3}
.chip__hint{font-size:11.5px;color:var(--muted);margin-top:1px}
.chip::after{content:"";margin-left:auto;flex:0 0 auto;
  width:18px;height:18px;border:2px solid var(--line-strong);border-radius:999px}
.chip[aria-checked="true"]{border:2px solid var(--orange);background:var(--chip-active-bg)}
.chip[aria-checked="true"]::after{border-color:var(--orange);box-shadow:inset 0 0 0 4px #fff;background:var(--orange)}
.chip--neutral{border-style:dashed;background:var(--surface-2)}

/* ===================== S2 ロードマップ ===================== */
.done-head{padding:4px 0 12px;border-bottom:1px solid var(--line-soft);margin-bottom:12px}
.done-mark{display:none}   /* 記号は使わない */
.done-title{margin:0;font-size:20px;font-weight:900}
.done-sub{margin:2px 0 0;font-size:13px;color:var(--muted)}
.done-sub b{color:var(--ink)}

.today-card{border-left:5px solid var(--orange);margin-top:6px}
.today-card__k{margin:0 0 4px;font-size:11px;font-weight:700;color:var(--muted)}
.today-card__t{margin:0;font-size:14px;font-weight:700;line-height:1.6}

.road{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.road__item{display:flex;gap:12px;align-items:flex-start}
.road__body{min-width:0;flex:1}
.road__row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.road__t{margin:0;font-size:15px;font-weight:700}
.pill{font-size:11px;font-weight:700;padding:2px 8px;border:1px solid var(--line);border-radius:999px;line-height:1.6;background:var(--soft);color:var(--ink-orange)}
.road__flow{margin:0 0 4px;font-size:14px;font-weight:700}
.road__desc{margin:0;font-size:13px;color:var(--muted)}
.term{border:0;background:none;padding:0;cursor:pointer;color:var(--ink-orange);
  font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.road__category-link{display:inline-flex;align-items:center;min-height:36px;margin-top:8px;padding:5px 8px;
  border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--surface);color:var(--ink-orange);
  font:700 12px/1.3 inherit;cursor:pointer;text-align:left}
.road__category-link:hover{background:var(--soft)}
.road__category-link:focus-visible{outline:3px solid rgba(240,130,46,.55);outline-offset:3px}
.safety{margin:16px 2px 0;font-size:13px;line-height:1.65;color:var(--muted);
  border:1px dashed var(--line-strong);border-radius:var(--r-card);padding:12px 13px;background:var(--surface-2)}

/* ===================== S3 商品候補・比較 ===================== */
.budget{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.budget__btn{min-height:44px;border:1px solid var(--line);border-radius:var(--r-btn);
  background:var(--surface);color:var(--muted);font:700 13px/1.3 inherit;cursor:pointer;padding:0 6px}
.budget__btn.is-on{background:var(--orange);border-color:var(--orange);color:#fff}
.budget__count{margin:10px 2px 4px;font-size:14px;font-weight:700}

.cand{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cand-group{scroll-margin-top:16px;border-radius:var(--r-card);transition:background-color 180ms,outline-color 180ms}
.cand-group.is-focused{outline:3px solid var(--orange);outline-offset:3px;background:var(--chip-active-bg)}
.cand__item{position:relative}
.cand__item.is-selected{border-color:var(--orange);box-shadow:0 0 0 2px rgba(240,130,46,.16)}
.cand__select{display:block;width:100%;min-height:44px;padding:0;border:0;background:transparent;color:inherit;
  font:inherit;text-align:left;cursor:pointer}
.cand__select:focus-visible{outline:3px solid rgba(240,130,46,.55);outline-offset:3px}
.medal{display:inline-block;margin-bottom:10px;font-size:11px;font-weight:700;
  border:1px solid var(--medal-border);border-radius:999px;background:var(--soft);color:var(--ink-orange);padding:2px 9px}
.cand__top{display:flex;gap:12px;align-items:center}
.cand__info{min-width:0}
.cand__name{margin:0 0 2px;font-size:15px;font-weight:700;line-height:1.35}
.cand__price{margin:0;font-size:14px;font-weight:700}
.cand__vol{color:var(--muted);font-weight:400;font-size:12px}
.cand__note{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 12px}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;
  font:700 11.5px/1 inherit;border:1px solid var(--line);color:var(--text);background:var(--surface-2)}
.tag--has{border-color:var(--tag-has-border);background:var(--tag-has-bg);color:var(--ink-green)}
.tag--free{border-style:dashed}
.tag--more{color:var(--muted)}

.ghost-btn{width:100%;min-height:44px;border:1px solid var(--line-strong);border-radius:var(--r-btn);
  background:var(--surface);color:var(--text);font:700 14px/1 inherit;cursor:pointer}
.ghost-btn:hover{background:var(--soft)}

.compare{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.compare__row{display:grid;grid-template-columns:84px 1fr 1fr;align-items:stretch;border-top:1px solid var(--line-soft)}
.compare__row:first-child{border-top:0}
.compare__row--head{background:var(--soft)}
.compare__lab,.compare__cell{padding:10px;font-size:13px;min-width:0}
.compare__lab{font-weight:700;color:var(--muted);font-size:12px;border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;justify-content:center}
.compare__lab small{font-weight:400;font-size:10px}
.compare__cell{font-weight:700;text-align:center;border-right:1px solid var(--line-soft)}
.compare__cell:last-child{border-right:0}
.compare__row--head .compare__cell{font-size:12px;font-weight:700;line-height:1.25}
.compare__row.is-diff{position:relative}
.compare__row.is-diff::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green-strong)}
.factnote{margin:11px 2px 0;font-size:12.5px;color:var(--muted);line-height:1.6}
.question-helper{margin-top:14px}
.question-helper__open{max-width:none}
.question-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.question-list__item{padding:12px;border:1px solid var(--line-soft);background:var(--soft)}
.question-list__text{margin:0;font-size:14px;line-height:1.7;user-select:text;-webkit-user-select:text}
.question-list__copy{margin-top:10px}
.question-sheet__note{margin-bottom:16px}

/* SC-99 ディスクレーマー共通部品（薬機法・結果/商品画面の最下部に常時表示） */
.disclaimer{margin:16px 2px 2px;padding:11px 12px;border:1px solid var(--line-soft);background:var(--soft)}
.disclaimer__head{margin:0 0 5px;font-size:12px;font-weight:700;color:var(--muted)}
.disclaimer__line{margin:0 0 5px;font-size:12px;line-height:1.65;color:var(--muted)}
.disclaimer__line:last-child{margin-bottom:0}

/* ===================== S4 継続記録 ===================== */
.routine{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.routine__card{padding:14px 12px}
.routine__t{margin:0 0 2px;font-size:14px;font-weight:700}
.routine__d{margin:0;font-size:12.5px;color:var(--muted)}

.week{margin-top:12px}
.week__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:14px}
.week__t{margin:0;font-size:15px;font-weight:700}
.week__sub{margin:0;font-size:11px;color:var(--muted);text-align:right}
.week__total{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--muted);line-height:1.5}
.dots{display:flex;justify-content:space-between;align-items:flex-start}
.dotwrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.dot{width:18px;height:18px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface)}
.dot--done{background:var(--green-strong);border-color:var(--green-strong)}
.dot--miss{border-style:dashed}
.dot--today{width:32px;height:32px;border:2px solid var(--orange);cursor:pointer;
  display:grid;place-items:center}
.dot--today[aria-pressed="true"]{background:var(--orange)}
.dot--today[aria-pressed="true"]::after{content:"";width:12px;height:12px;background:#fff}
.dotlab{font-size:11px;color:var(--muted);font-weight:700}
.dotlab--today{color:var(--ink)}

.rating{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rate{display:flex;align-items:center;justify-content:center;min-height:48px;
  border:1px solid var(--line);border-radius:var(--r-btn);background:var(--surface);
  font:700 13px/1.2 inherit;color:var(--text);cursor:pointer;padding:8px 4px;text-align:center}
.rate[aria-pressed="true"]{border:2px solid var(--orange);background:var(--chip-active-bg)}
.reminder{margin:14px 2px 0;font-size:12.5px;color:var(--muted);font-weight:400}

/* ===================== Dock CTA ===================== */
.dock{position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding-block:12px calc(14px + env(safe-area-inset-bottom));
  background:var(--surface-translucent);border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:center}
.cta{flex:1 1 auto;height:50px;border:1px solid var(--orange-cta);border-radius:var(--r-btn);cursor:pointer;
  background:var(--orange-cta);color:#fff;font:700 15px/1 inherit;touch-action:manipulation;box-shadow:0 8px 18px rgba(217,112,31,.22)}
.cta:not([disabled]):hover{background:#c9671c}
.cta[disabled]{background:var(--surface);color:var(--disabled-text);border-color:var(--line);box-shadow:none;cursor:default}
.settings-btn{flex:0 0 auto;min-width:60px;height:48px;padding:0 12px;
  border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--surface);color:var(--text);
  font:700 13px/1 inherit;cursor:pointer;touch-action:manipulation}
.settings-btn:hover{background:var(--soft)}
.cta-back{display:none;flex:0 0 auto;width:48px;height:48px;
  border:1px solid var(--ink);background:var(--surface);color:var(--ink);
  font:700 18px/1 inherit;cursor:pointer;touch-action:manipulation}
.cta-back:hover{background:var(--soft)}

/* ---- toast ---- */
.toast{position:absolute;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);
  z-index:8;background:var(--toast-bg);color:#fff;font-size:13px;font-weight:700;
  padding:10px 16px;border-radius:999px;opacity:0;transition:opacity 160ms,transform 160ms;
  pointer-events:none;max-width:84%;text-align:center}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast[hidden]{display:none}

/* ---- term sheet ---- */
.sheet{position:fixed;inset:0;z-index:40;display:grid;place-items:end center}
.sheet[hidden]{display:none}
.sheet__scrim{position:absolute;inset:0;border:0;background:var(--scrim);cursor:pointer}
.sheet__panel{position:relative;z-index:1;width:min(var(--content-max),100%);background:var(--surface);
  border:1px solid var(--line);border-radius:22px 22px 0 0;box-shadow:var(--shadow);
  padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
.sheet__t{margin:0 0 8px;font-size:18px;font-weight:900}
.sheet__b{margin:0 0 16px;font-size:14px;line-height:1.7;color:var(--text)}
.sheet__close{max-width:none}
.sheet__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.sheet__icon{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--ink);background:var(--surface);color:var(--ink);font:700 18px/1 inherit;cursor:pointer}
.sheet__icon:hover{background:var(--soft)}

/* ---- settings sheet ---- */
.settings-sheet__panel{display:flex;flex-direction:column;gap:16px;max-height:min(82vh,720px);overflow:auto}
.settings-sheet__lead{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.settings-sheet__block{border:1px solid var(--line);padding:12px}
.settings-sheet__block--danger{border-style:dashed}
.settings-sheet__label{margin:0 0 6px;font-size:14px;font-weight:700}
.settings-sheet__note{margin:0 0 10px;font-size:12px;line-height:1.5;color:var(--muted)}
.settings-sheet__field{display:grid;gap:8px}
.settings-sheet__selection{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--muted)}
.settings-sheet__chips{display:flex;flex-wrap:wrap;gap:8px}
.avoid-chip{min-height:40px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:700 12px/1.2 inherit;cursor:pointer}
.avoid-chip:hover{border-color:var(--orange);background:var(--soft)}
.avoid-chip[aria-pressed="true"]{border-color:var(--orange);background:var(--chip-active-bg);color:var(--ink-orange)}
.s3-avoid-status{margin:6px 2px 8px;font-size:12px;line-height:1.5;color:var(--muted)}
.cand__alternative-note{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.settings-sheet__time{width:100%;height:44px;border:1px solid var(--line);padding:0 12px;font:700 14px/1 inherit;color:var(--ink);background:var(--surface)}
.settings-sheet__time:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.settings-sheet__action,.settings-sheet__save{min-height:44px}
.settings-sheet__action--danger,.settings-sheet__confirm-btn--danger{border-color:var(--toast-bg);background:var(--toast-bg);color:#fff}
.settings-sheet__action--danger:hover,.settings-sheet__confirm-btn--danger:hover{background:#333}
.settings-sheet__confirm{margin-bottom:10px;border:1px solid var(--line);padding:10px;background:var(--soft)}
.settings-sheet__confirm-text{margin:0 0 10px;font-size:12.5px;line-height:1.5}
.settings-sheet__confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.settings-sheet__confirm-btn{min-height:44px}
.settings-sheet__close-row{display:flex;justify-content:flex-end}
.question-sheet__panel{max-height:min(82vh,720px);overflow:auto}

/* ===================== responsive ===================== */
/* スマホ幅の密度調整。全画面化そのものは基底スタイルへ移したので、
   ここではフォント・余白の詰めと省略表示だけを扱う。 */
@media (max-width:430px){
  .appbar{padding:8px 12px 6px}
  .appbar__brand{margin-bottom:6px}
  .appbar__name{font-size:14px}
  .appbar__step{font-size:10px;padding:1px 6px}
  .tabs{gap:2px}
  .tab{min-height:36px;padding:3px 1px 5px;gap:3px}
  .step-badge{width:20px;height:20px;font-size:11px}
  .progress{height:5px;margin-top:5px}
  /* アプリシェルの chrome（appbar/dock）は固定のまま、内側だけスクロール可に。
     S2/S3 は内容が縦に長く、末尾の SC-99 ディスクレーマー（薬機法・必須表示）が
     切れるのを防ぐ。S1/S4 は収まるためスクロールは発生しない（#102）。 */
  .screen-wrap{overflow-y:auto;overflow-x:clip;-webkit-overflow-scrolling:touch}
  .screen{padding:9px 10px calc(58px + env(safe-area-inset-bottom))}
  .sec-label{margin:8px 2px 5px;font-size:12px}
  .card{padding:9px}
  .s1-head{margin:0 2px 7px}
  .s1-value{font-size:13px;line-height:1.35}
  .s1-remain{font-size:11px}
  .qcard{padding:10px}
  .qkicker{margin-bottom:4px;font-size:11px}
  .qtitle{margin-bottom:4px;font-size:16px;line-height:1.3}
  .qhint{margin-bottom:8px;font-size:11px}
  .chips{gap:5px}
  .chip{min-height:44px;padding:7px 9px}
  .chip__label{font-size:13px;line-height:1.25}
  .chip__hint{display:none}
  .chip::after{width:14px;height:14px}
  .done-head{padding:0 0 6px;margin-bottom:7px}
  .done-title{font-size:16px}
  .done-sub{font-size:12px}
  .today-card{margin-top:0}
  .today-card__k{font-size:10px}
  .today-card__t{font-size:12px;line-height:1.45}
  .road{gap:6px}
  .road__item{gap:8px;align-items:center}
  .road__t{font-size:12px}
  .road__flow{margin:0;font-size:12px;line-height:1.35}
  .road__desc,.road__row,.pill{display:none}
  .safety{margin:8px 2px 0;padding:7px 8px;font-size:10.5px;line-height:1.4}
  .budget{gap:6px}
  .budget__btn{min-height:44px;font-size:11px}
  .budget__count{margin:5px 2px 2px;font-size:12px}
  .cand{margin-top:3px;gap:6px}
  .medal{margin-bottom:5px;font-size:10px;padding:1px 6px}
  .cand__name{font-size:13px}
  .cand__price{font-size:12px}
  .cand__vol{font-size:10px}
  .tags{gap:4px;margin:6px 0 8px}
  .tag{height:20px;padding:0 8px;font-size:10.5px}
  .compare__row{grid-template-columns:64px 1fr 1fr}
  .compare__lab,.compare__cell{padding:6px;font-size:11px}
  .compare__lab{font-size:10.5px}
  .factnote{margin:7px 2px 0;font-size:10.5px;line-height:1.35}
  .disclaimer{margin:9px 2px 2px;padding:8px 9px}
  .disclaimer__head{font-size:10.5px;margin-bottom:3px}
  .disclaimer__line{font-size:10.5px;line-height:1.45;margin-bottom:3px}
  .routine{gap:6px}
  .routine__card{padding:8px}
  .routine__t{font-size:12px}
  .routine__d{font-size:11px}
  .week{margin-top:7px}
  .week__head{margin-bottom:8px}
  .week__t{font-size:13px}
  .week__sub{font-size:10px}
  .dots{gap:2px}
  .dot{width:14px;height:14px}
  .dot--today{width:44px;height:44px}
  .dotlab{font-size:10px}
  .rating{gap:6px}
  .rate{min-height:44px;font-size:11px;padding:5px 2px}
  .reminder{margin-top:7px;font-size:10.5px}
  .dock{position:absolute;padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .cta,.settings-btn,.cta-back{height:44px}
  .cta{font-size:13px}
  .settings-btn{min-width:54px;padding:0 10px}
  .cta-back{width:44px}
  .settings-sheet__panel{max-height:86svh;padding:14px 12px calc(14px + env(safe-area-inset-bottom))}
  .question-sheet__panel{max-height:86svh;padding:14px 12px calc(14px + env(safe-area-inset-bottom))}
  .sheet__head{margin-bottom:10px}
  .sheet__icon{width:44px;height:44px}
  .settings-sheet__block{padding:10px}
  .settings-sheet__label{font-size:13px}
  .settings-sheet__note,.settings-sheet__lead,.settings-sheet__confirm-text{font-size:11px}
  .settings-sheet__time,.settings-sheet__action,.settings-sheet__save{min-height:44px}
  /* 見出しの詰め方に合わせて、列ラッパー由来の補正もスマホ幅の値へ揃える */
  .col + .col > .sec-label:first-child{margin-top:8px}
}
@media (max-width:360px){
  .compare__row{grid-template-columns:58px 1fr 1fr}
  .qtitle{font-size:15px}
  .tab__txt{font-size:10px}
  .dock{padding-left:8px;padding-right:8px}
  .settings-btn{min-width:50px;padding:0 8px}
  .cta-back{width:40px}
  .cta{font-size:12px}
  .settings-sheet__confirm-actions{grid-template-columns:1fr}
}

/* ===================== PC（2カラム） =====================
   横に余裕がある画面では、空いた左右を使って縦スクロールを減らす。
   .screen 直下の .col を左右に振り分けるだけなので、各画面の中身の
   マークアップはスマホ用と共通のまま。 */
@media (min-width:1024px){
  /* 2カラムを置ける幅まで中身の最大幅を広げる */
  :root{--content-max:1080px}

  /* タブは全幅まで間延びさせず、中央に寄せる */
  .tabs{max-width:760px;margin-inline:auto}

  /* 画面本体を2カラムへ。[hidden] の画面は :not() で除外して display:none を守る */
  .screen:not([hidden]){
    display:grid;align-content:start;align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;
  }
  /* 全幅で置きたいもの（薬機法ディスクレーマー等）は両列にまたがる */
  .col--full{grid-column:1 / -1}
  /* 横並びになったので、2列目の見出しも1列目と同じ高さで始める */
  .col + .col > .sec-label:first-child{margin-top:4px}

  /* S1: 導入カードを左、質問カードを右に */
  #s1:not([hidden]){grid-template-columns:minmax(240px,320px) minmax(0,1fr)}
  #s1 .s1-head{margin-bottom:0}

  /* S2: 左に「今日やること」＋注意書き、右にステップ（2×2で縦を詰める）。
     注意書きは DOM 上は最後のままにして（スマホでの読み順を守るため）、
     grid-template-areas で左列の下に置き直し、左の余白を埋めてスクロールを消す。 */
  #s2:not([hidden]){
    grid-template-columns:minmax(260px,380px) minmax(0,1fr);
    grid-template-areas:"intro steps" "note steps";
  }
  #s2 > .col:first-child{grid-area:intro}
  #s2 > .col:nth-child(2){grid-area:steps}
  #s2 > .col--full{grid-area:note}
  #s2 .road{display:grid;grid-template-columns:repeat(2,1fr);align-content:start}

  /* 下部ボタン: 全幅に間延びさせず、設定は左端・CTAは右端に置く */
  .settings-btn{margin-right:auto}
  .cta{flex:0 0 auto;min-width:320px}
}

/* ===================== SC-00 導入（設計書 SC-00 v0.1 / 案A） =====================
   初回のみ表示する独立画面。アプリバー・タブ・CTA は main.js が非表示にするので、
   この画面は中身だけで成立させる。装飾は抑え、暖色の既存トークンに頼る
   （AI感のない・看板らしくない素直な造り）。 */
/* 旧 .screen の余白（下部104px=dock 分）と PC 2カラム化を打ち消す。id で高優先に。 */
#s0.screen{
  min-height:100%;
  display:flex;align-items:center;justify-content:center;
  padding-block:24px 24px;
}
/* ID指定の display:flex が hidden 属性を上書きしないようにする。 */
#s0.screen[hidden]{display:none}
.appbar[hidden],
.dock[hidden]{display:none}

.intro{width:100%;max-width:420px;padding:32px 28px;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--r-hero)}
.intro__name{margin:0 0 18px;font-size:18px;font-weight:900;text-align:center}
.intro__lead{margin:0 0 26px;font-size:21px;font-weight:900;line-height:1.55;text-align:center}
.intro__points{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:13px}
.intro__points li{position:relative;padding-left:22px;font-size:14px;line-height:1.6}
.intro__points li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;background:var(--orange)}
.intro__start{display:block;width:100%;height:52px;border:1px solid var(--orange-cta);border-radius:var(--r-btn);
  background:var(--orange-cta);color:#fff;font:700 16px/1 inherit;cursor:pointer;touch-action:manipulation;
  box-shadow:0 8px 18px rgba(217,112,31,.22)}
.intro__start:hover{background:#c9671c}
.intro__note{margin:18px 0 0;font-size:12px;color:var(--muted);text-align:center}

@media (max-width:430px){
  #s0.screen{padding-block:12px 12px}
  .intro{padding:24px 18px}
  .intro__name{margin-bottom:12px;font-size:16px}
  .intro__lead{margin-bottom:20px;font-size:18px}
  .intro__points{margin-bottom:24px;gap:10px}
  .intro__points li{font-size:13px}
  .intro__start{height:48px;font-size:15px}
  .intro__note{margin-top:14px;font-size:11px}
}

/* ===================== reduced motion ===================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}