/* skin.css — 肌・プラン診断(患者用/認証なし)専用スタイル
   design.css v2 のCSS変数・コンポーネントクラスのみ使用(色の直書き禁止。
   ダーク面のテキストは design.css 同様 #fff / rgba(255,255,255,…) のみ許容) */

/* 診断結果は料金・条件を比較する画面なので、単一の狭い読書カラムには閉じ込めない。
   :has() 非対応ブラウザでも本文とヘッダーの基準幅を一致させる。
   2026-09-04 是正: ヘッダー(.app-header)は design.css 側で padding を
   calc((100% - var(--page-max)) / 2 + ...) と --page-max から直に計算しており、
   この画面が --page-max を段(welcome/question/review)ごとに書き換えるたびに
   ヘッダーの横幅まで一緒に縮んでいた(実測: 1280px で本文56〜1224pxのはずが256〜1024px)。
   ヘッダーは全画面共通の器なので、body 側の --page-max は v60 共通コンテナ幅
   (--container, 1200px)に固定し、設問の720px等は各コンテンツ自身の max-width
   (.sk-question-shell 等)で作る。 */
:root { --page-max: var(--container); }
body:has(#skin-app) { --page-max: var(--container); }

#skin-app { min-width: 0; padding-bottom: 44px; }
/* 2026-09-05夜(v62、リーダー通知是正): 共有 .v62-lift はヘッダー固定時の頭切れ
   事故(質問チャット)を受けて負のマージンを外し、position:relative だけになった。
   最初のカード(.v62-lift)をヘッダーの24〜40px下から始める余白は、この画面自身の
   #skin-app 側で持つ(帯の下辺は PC 272px・SP 200px。カードの高さで自然にまたぐ)。
   mount() は全段階(welcome/question/result等)で #skin-app へ直接カードを差し込む
   ため、ここに置けばどの段でも同じ余白になる。 */
#skin-app { padding-top: 32px; }
@media (max-width: 767px) {
  #skin-app { padding-top: 24px; }
}
/* 市場再設計(design-brief.md §9): 灰色の面は禁止(白 .v60-surface-paper か
   生成り .v60-surface-cream の2面だけ)。design.css 共通の淡いラジアル演出も
   この画面では止めて、地を白一枚にする。
   2026-09-05(v62、brief-v62.md §1是正): 上の意図を実現していた
   body:has(#skin-app){background:var(--paper)} は、v60-base.css が新設した
   body::before の紺金の帯まで白で塗りつぶし、帯を一度も表示させていなかった
   (発注者「背景がなさ過ぎてみずらい」の原因の1つ)。地を白一枚にする狙いは
   #skin-app 自身(白カード基調)で足りるため、body 側の背景上書きは削除する。 */
/* v61(2026-09-04夕方): 固定バー/浮遊CTA(.v60-fixed-bar/.v60-fixed-fab)は
   発注者「無駄しかない」を受け index.html から撤去し、最小フッター(.v61-foot)
   1本に差し替えた。上のstage別非表示ルールは対象要素が無くなったため削除。 */
.sk-sr-status {
  position: fixed; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============ 最初の画面 ============ */
.sk-start {
  position: relative; overflow: hidden; text-align: left; color: var(--text);
  background: linear-gradient(150deg, var(--surface) 0%, var(--brand-softer) 100%);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 4px 14px rgba(11, 23, 48, .10); padding: 28px 26px;
}
.sk-start.surface-hero { color: var(--text); background: linear-gradient(150deg, var(--surface) 0%, var(--brand-softer) 100%); border-color: var(--line); box-shadow: 0 4px 14px rgba(11, 23, 48, .10); }
.sk-start.surface-hero::after { display: none; }
.sk-start::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--grad-gold);
}
.sk-start > * { position: relative; }
.sk-screen-visual { display: block; flex: 0 0 auto; color: var(--brand); pointer-events: none; user-select: none; }
.sk-screen-visual svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sk-start-heading-row { display: flex; align-items: flex-start; gap: 16px; }
.sk-start-heading-copy { min-width: 0; flex: 1; }
.sk-welcome-visual { width: clamp(74px, 16vw, 118px); margin-top: 1px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.sk-visual-box {
  margin: 14px 0 18px; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line-strong); box-shadow: 0 1px 3px rgba(11, 23, 48, .08);
}
.sk-visual-banner-img {
  width: 100%; height: 200px; display: block;
}
/* 2026-09-15(発注者「なぞのアニメーション…意味が分からない」): hoverの寄り(1.02倍)を削除。 */
.sk-start h2 { color: var(--text); font-size: 27px; font-weight: 900; margin: 0; letter-spacing: -0.03em; line-height: 1.25; }
.sk-start-description { color: var(--muted-strong); font-size: 13.5px; line-height: 1.7; margin: 10px 0 14px; max-width: 36em; }
/* v80(2026-09-14、市場比較 M-1): 入口の裏づけ 1 行。/faq/ の .faq-trust と同じ見た目
   (13px・太字・--ink-2)。説明文より一段静かに、ただし読み飛ばされない太さで置く。 */
.sk-entry-trust { max-width: 46em; margin: 8px 0 14px; color: var(--ink-2); font-size: 13px; font-weight: 700; line-height: 1.6; }
/* 設問 1 の上(札の下)に置くときは、カードとの間だけ空ける。 */
#skin-app .sk-q1-trust { margin: 10px 0 12px; }
.sk-start-feedback {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--err);
  background: var(--err-soft);
  color: var(--text-status-danger);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.sk-start-feedback[hidden] { display: none; }
.sk-start-meta { margin: 0 0 12px; color: var(--muted-strong); font-size: var(--fs-2xs); font-weight: 800; }
.sk-start-disclaimer { margin: 0 0 14px; text-align: left; }
.sk-start-cta { box-shadow: 0 1px 3px rgba(11, 23, 48, .08); font-weight: 900; letter-spacing: 0.04em; }
.sk-start-cta-note { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-2xs); line-height: 1.45; text-align: center; }
/* v63(2026-09-05夜、brief-v63.md §2-1): 開いた瞬間の自動読み込み表示。事実の行
   (.sk-start-meta)だけを残し、見出し・院選択・釦の無い最小の状態を出す。 */
.sk-start-loading { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted-strong); font-size: 14px; }
.sk-start-loading .spinner { flex: 0 0 auto; }

/* ============ 質問画面 ============ */
.sk-qhead { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 2px 2px 12px; }
.sk-qhead-guide { color: var(--muted-strong); font-size: var(--fs-micro); font-weight: 900; letter-spacing: 0.15em; }
.sk-step-wrap { display: inline-flex; align-items: center; gap: 8px; }
.sk-question-visual { width: 36px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.sk-step-label { color: var(--muted-strong); font-size: var(--fs-micro); font-weight: 900; letter-spacing: 0.12em; }
.sk-step {
  font-size: var(--fs-2xs); font-weight: 900; color: var(--accent-strong); letter-spacing: 0.08em;
  background: var(--accent-pale); border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px;
  font-variant-numeric: tabular-nums;
}
.sk-progress-wrap { margin: 0 2px 14px; }
.sk-qcard { position: relative; overflow: hidden; border-color: var(--line); border-radius: var(--r-card); box-shadow: 0 4px 14px rgba(11, 23, 48, .10); padding: 26px 24px; }
.sk-qcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--grad-gold); }
.sk-qtext { font-size: 22px; font-weight: 900; line-height: 1.45; letter-spacing: -0.025em; margin: 2px 0 0; color: var(--text); }
.sk-help { color: var(--muted-strong); font-size: 13px; margin: 8px 0 0; line-height: 1.65; }
.sk-answer-hint { margin: 12px 1px 0; color: var(--muted-strong); font-size: var(--fs-2xs); line-height: 1.45; }
.sk-scale-endpoints { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--muted-strong); font-size: var(--fs-2xs); font-weight: 750; line-height: 1.5; }
.sk-scale-endpoint { min-width: 0; overflow-wrap: anywhere; }
.sk-scale-bottom { text-align: right; }

.sk-options { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; counter-reset: skin-option; }
.sk-options .q-option {
  display: flex; align-items: center; gap: 12px; counter-increment: skin-option;
  min-height: 52px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 14.5px; font-weight: 750;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer; text-align: left;
}
/* v82(2a、発注者2026-09-15「選んでないのに既に選択中の色になっている」への対応):
   hoverの塗り(background)が選択中(.sk-selected)と同じ--brand-softerだったため、
   タッチ端末で選択→自動で次の設問へ進んだ直後に指の位置の未選択肢がhoverのまま
   残ると「選択中に見える」誤認になっていた。hoverは枠線・影だけにしbackgroundは
   変えない(選択中とは常に別の見た目にする)。あわせて(hover: hover) and
   (pointer: fine)で囲み、hover非対応(タッチ)端末には最初から効かせない
   (擬似:hoverが指を離した後も残る問題の根本対策)。持ち上がりのtransformは
   「なぞのアニメーション」指摘により削除。 */
@media (hover: hover) and (pointer: fine) {
  .sk-options .q-option:hover {
    border-color: var(--brand-electric);
    box-shadow: 0 1px 3px rgba(11, 23, 48, .08);
  }
}
.sk-options .q-option::before {
  content: counter(skin-option, decimal-leading-zero); flex: 0 0 28px;
  color: var(--accent-strong); font-size: var(--fs-micro); font-weight: 900; letter-spacing: 0.04em;
}
.sk-opt-label { flex: 1; }
/* v67(q18_machine): 選択肢の1〜2行の補足。単一選択(.q-option)のときだけ、その
   選択肢を持つ設問で align-items を上寄せにする(補足の無い他設問は今までどおり中央)。 */
.sk-opt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sk-opt-help { color: var(--muted-strong); font-size: var(--fs-2xs); font-weight: 600; line-height: 1.55; }
.q-option.has-help { align-items: flex-start; }
.q-option.has-help::before { margin-top: 2px; }
/* 単一選択で「戻る」後に前回の回答を示す */
.q-option.sk-selected {
  border-color: var(--accent); background: var(--accent-pale);
  box-shadow: 0 1px 3px rgba(11, 23, 48, .08);
}
.q-option.sk-selected::after {
  content: "選択中"; color: var(--accent-strong); font-size: var(--fs-2xs); font-weight: 900;
  margin-left: auto; white-space: nowrap; padding: 3px 9px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
}

/* v67(発注者「複数選択できる場所がわかりずらいので、しっかり大きく書く」):
   選択肢の上に太字・大きめの帯を出す(単一選択の設問には出さない)。 */
.sk-multi-banner {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px;
  margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
  background: var(--brand-soft); border: 1.5px solid var(--brand-electric);
  color: var(--brand); font-size: 15px; line-height: 1.5;
}
.sk-multi-banner strong { font-size: 16px; font-weight: 900; }
.sk-multi-banner-sub { color: var(--muted-strong); font-weight: 700; font-size: 13.5px; }

.sk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sk-chips .chip { min-height: 48px; font-size: 14px; text-align: left; border-radius: 8px; font-weight: 800; }
/* v67: 複数選択はチェックボックス様の見た目(角丸の四角+チェック)にする。
   単一選択(.q-option)の丸い印は変えない(「単一選択は丸のまま」)。 */
.sk-chip-check {
  position: relative; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  transition: border-color .15s, background .15s;
}
.chip.active .sk-chip-check { border-color: var(--accent); background: var(--accent); }
.chip.active .sk-chip-check::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(40deg);
}
.sk-chip-index { display: inline-grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 6px; font-size: var(--fs-micro); font-weight: 900; letter-spacing: 0.04em; opacity: 0.8; }
.sk-chip-label { min-width: 0; }
.sk-part-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
.sk-chips .sk-part-choice {
  position: relative; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; min-height: 120px;
  padding: 12px 8px; text-align: center; border-radius: var(--r-card);
  border: 1px solid var(--line-strong); background: var(--surface);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* v67: 部位カードはアイコン+見出しの中央寄せカードなので、チェックボックスは右上に置く。 */
.sk-chips .sk-part-choice .sk-chip-check { position: absolute; top: 8px; right: 8px; }
/* v82(2a): 部位カードのhoverも選択中(.active)と別の見た目を保ったまま
   (hover: hover) and (pointer: fine)で囲み、持ち上がりのtransformを削除。 */
@media (hover: hover) and (pointer: fine) {
  .sk-chips .sk-part-choice:hover {
    border-color: var(--brand-electric);
    box-shadow: 0 1px 3px rgba(11, 23, 48, .08);
  }
}
.sk-part-icon {
  display: grid; width: 44px; height: 44px; place-items: center; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--brand-soft); color: var(--brand);
}
.sk-part-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sk-part-choice .sk-opt-label { flex: 0 1 auto; color: var(--text); font-size: var(--fs-2xs); font-weight: 850; line-height: 1.35; }
.sk-part-choice.active {
  border-color: var(--accent); background: var(--accent-pale);
  box-shadow: 0 1px 3px rgba(11, 23, 48, .08);
}
.sk-part-choice.active .sk-part-icon { border-color: var(--accent); background: var(--surface); color: var(--accent-strong); }
.sk-multi-exclusive-note { margin: 9px 2px 0; color: var(--text); font-size: var(--fs-2xs); line-height: 1.55; }
.sk-multi-action { display: flex; justify-content: flex-end; margin-top: 16px; }
.sk-multi-complete { min-width: 104px; }
.sk-multi-complete[hidden] { display: none; }

/* ============ ローディング ============ */
.sk-loading { text-align: center; padding: 40px 0 30px; }
.sk-loading .spinner { width: 40px; height: 40px; border-width: 3.5px; }
.sk-loading p { color: var(--muted); margin-top: 16px; font-weight: 600; }
.sk-skel-stack { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.sk-skel-stack .skeleton.line { height: 14px; }
.sk-skel-stack .skeleton.w70 { width: 70%; }
.sk-skel-stack .skeleton.w40 { width: 40%; }
.sk-skel-stack .skeleton.block { height: 78px; border-radius: 8px; }

/* ============ 結果: 肌タイプ ヒーロー ============ */
.sk-result-hero {
  position: relative; overflow: hidden;
  background: var(--grad-hero); color: #fff;
  border-radius: var(--r-card); padding: 26px 22px 24px; box-shadow: 0 8px 24px rgba(11, 23, 48, .14);
  border: 1px solid rgba(255,255,255,.08);
}
.sk-result-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(200px 150px at 82% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}
.sk-result-hero > * { position: relative; }
.sk-result-hero > .sk-result-visual { position: absolute; z-index: 0; top: 12px; right: 15px; width: 108px; color: #fff; opacity: .23; }
/* on-dark: .sk-result-hero(--grad-hero)の上。rgba(255,255,255,.7) を Node(WCAG相対輝度、テスト内の計算式と同一)で
   検算: 明端 #244079 に対し 5.86:1(#1a305e 7.13:1 / #0b1730 9.07:1)、全域で基準(4.5:1)を上回る。 */
.sk-result-label { margin: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); text-align: center; }
.sk-type-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 6px; }
/* 白文字は金地(--grad-gold)で 2.28:1(要3、22px/900は大文字扱い)と未達だった。
   .btn.accent と同じ濃い文字色にする(明端 7.73:1 / 暗端 4.41:1、どちらも3:1以上)。 */
.sk-type-ring {
  width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad-gold); display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: #211707; letter-spacing: .02em;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 24%, transparent);
}
/* on-dark: .sk-result-hero(--grad-hero)の上。明端 #244079 に対し 10.07:1。 */
.sk-type-name { font-size: 19px; font-weight: 800; color: #fff; text-align: left; line-height: 1.35; }
/* on-dark: .sk-result-hero(--grad-hero)の上。rgba(255,255,255,.85) を Node(WCAG相対輝度)で検算:
   明端 #244079 に対し 7.76:1(#1a305e 9.76:1 / #0b1730 12.97:1)、全域で基準(4.5:1)を上回る。 */
.sk-type-desc { color: rgba(255,255,255,.85); font-size: 13px; line-height: 1.7; margin: 6px 0 0; }

/* フィッツパトリック スケール(I〜VI) */
.sk-fitz { margin-top: 20px; }
.sk-fitz-track {
  position: relative; height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-soft) 0%, var(--accent) 40%, var(--navy-400) 70%, var(--navy-900) 100%);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--ink-950) 25%, transparent);
}
.sk-fitz-pin {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--ink-950) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-micro); font-weight: 900; color: var(--accent-strong);
  transition: left .55s var(--ease);
}
.sk-fitz-scale { display: flex; margin-top: 9px; }
/* on-dark: .sk-result-hero(--grad-hero)の上。独立検査(2回目)の実測ピクセルでは rgba(255,255,255,.55) が
   明端 #244079 上で 4.41:1(基準4.5未達、判定タイプにより非.onスパンの位置が変わるため他の位置も
   悪化しうる)だった。.72 へ上げ、Node(WCAG相対輝度、テスト内の計算式と同一)で検算: 明端 #244079 に対し
   6.11:1(#1a305e 7.45:1 / #0b1730 9.57:1)、全域で基準を上回る。 */
.sk-fitz-scale span { flex: 1; text-align: center; font-size: var(--fs-2xs); font-weight: 700; color: rgba(255,255,255,.72); }
/* on-dark: renderFitzBar() は .sk-result-hero(--grad-hero)の中でだけ呼ばれる。明端 #244079 に対し 10.07:1。 */
.sk-fitz-scale span.on { color: #fff; }
/* on-dark: .sk-result-hero(--grad-hero)の上。.6 は Node検算で明端 #244079 に対し 4.77:1と基準ぎりぎりだったため
   .68 へ上げ、#244079 に対し 5.63:1(#1a305e 6.84:1 / #0b1730 8.66:1)まで余裕を確保。 */
.sk-fitz-ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--fs-2xs); color: rgba(255,255,255,.68); }

/* ============ 結果: 確認事項 ============ */
.sk-cautions { list-style: none; margin: 0; padding: 0; }
.sk-cautions li {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; font-size: 13.5px; line-height: 1.7;
  border-bottom: 1px solid var(--line);
}
.sk-cautions li:first-child { padding-top: 2px; }
.sk-cautions li:last-child { border-bottom: none; padding-bottom: 2px; }
.sk-cautions .ca-ico { flex-shrink: 0; font-size: 16px; line-height: 1.5; }

/* ============ 結果: おすすめコース・料金表 ============ */
.sk-course-section { margin-top: 2px; }
.sk-course-heading {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: linear-gradient(145deg, var(--surface), var(--brand-softer));
  box-shadow: 0 1px 3px rgba(11, 23, 48, .08);
}
.sk-course-heading > div { min-width: 0; }
.sk-course-heading .section-label { margin: 0 0 7px; color: var(--text-link); }
.sk-course-heading h2 { margin: 0; font-size: clamp(20px, 2.6vw, 27px); }
.sk-course-heading p:last-child { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.65; }
.sk-plan-group { display: grid; gap: 10px; }
.sk-plan-group + .sk-plan-group { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.sk-plan-group-title { margin: 0; color: var(--text); font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.sk-plan-group-recommended .sk-plan-group-title { color: var(--brand); }
.sk-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 700px), 1fr)); gap: 16px; }
.sk-plan {
  display: grid;
  grid-template-columns: minmax(180px, .85fr) minmax(170px, .75fr) minmax(280px, 1.4fr);
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.sk-plan.is-primary { border-color: color-mix(in srgb, var(--brand) 70%, transparent); }
.sk-plan.is-primary .sk-plan-top { background: linear-gradient(135deg, var(--brand-softer), var(--surface)); }
.sk-plan-top { min-height: 0; padding: 18px; }
.sk-plan-head { min-width: 0; }
.sk-plan-name { color: var(--text); font-size: 16px; font-weight: 900; letter-spacing: -.01em; line-height: 1.45; overflow-wrap: anywhere; }
.sk-plan-rank { margin-top: 7px; }
.sk-plan-rank .badge { border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); background: var(--accent-soft); color: var(--accent-strong); }
.sk-plan-pricebar {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 18px;
  border-left: 1px solid var(--line);
  background: var(--surface);
}
.sk-plan-price { color: var(--brand); font-size: 28px; font-weight: 900; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sk-plan-price .yen { margin-left: 2px; font-size: 15px; font-weight: 800; letter-spacing: 0; }
.sk-plan-price .from { margin-left: 3px; color: var(--muted); font-size: 13px; font-weight: 750; letter-spacing: 0; }
.sk-plan-price.tbd { color: var(--muted-strong); font-size: 16px; font-weight: 850; letter-spacing: 0; }
.sk-plan-price-label { margin: 0; color: var(--muted); font-size: var(--fs-micro); font-weight: 750; line-height: 1.45; }
.sk-plan-details { display: grid; grid-template-columns: minmax(132px, .75fr) minmax(190px, 1.25fr); gap: 0; border-left: 1px solid var(--line); }
.sk-plan-facts { display: grid; align-content: center; margin: 0; }
.sk-plan-facts > div { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.sk-plan-facts > div:last-child { border-bottom: 0; }
.sk-plan-facts dt { color: var(--muted); font-size: var(--fs-micro); font-weight: 850; }
.sk-plan-facts dd { margin: 0; color: var(--text); font-size: var(--fs-xs); font-weight: 750; line-height: 1.6; overflow-wrap: anywhere; }
.sk-plan-conditions { padding: 14px 16px 16px; border-left: 1px solid var(--line); background: var(--surface-2); }
.sk-plan-conditions p { margin: 0 0 6px; color: var(--text); font-size: var(--fs-micro); font-weight: 900; }
.sk-plan-conditions ul { display: grid; gap: 5px; margin: 0; padding-left: 1.2em; color: var(--muted-strong); font-size: var(--fs-2xs); line-height: 1.55; }
.sk-plan-reason { grid-column: 1 / -1; margin-top: 0; padding: 13px 18px 15px; border-top: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: var(--fs-xs); font-weight: 700; line-height: 1.7; }
.sk-course-final-note { margin: 0; padding: 10px 12px; border-left: 3px solid var(--accent); color: var(--muted); font-size: var(--fs-2xs); line-height: 1.65; }
.sk-course-unavailable { border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: var(--accent-pale); }
.sk-course-unavailable h2 { margin-bottom: 8px; font-size: 18px; }
.sk-course-unavailable p { margin: 0; color: var(--muted-strong); font-size: var(--fs-xs); line-height: 1.7; }

/* ============ 結果: 医師相談(温かみ) ============ */
.sk-refer-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--info-soft), var(--surface));
  border: 1.5px solid var(--line-strong); text-align: center;
}
.sk-refer-hero > * { position: relative; }
.sk-refer-hero > .sk-refer-visual { position: absolute; top: 10px; right: 12px; width: 90px; color: var(--brand); opacity: .13; }
.sk-refer-ico {
  width: 66px; height: 66px; margin: 0 auto 12px; border-radius: 50%;
  background: linear-gradient(135deg, #fff, var(--info-soft));
  /* --info(面用)は背景が info-soft 寄りの位置で 4.04:1 と未達(自己点検で発見)。
     info の文字版トークンは design.css に無いため、.badge.info と同じ慣例で --text-link を使う。 */
  border: 1px solid var(--line); color: var(--text-link); letter-spacing: .08em;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 900;
  box-shadow: 0 1px 3px rgba(11, 23, 48, .08);
}
.sk-refer-hero h2 { font-size: 19px; margin: 4px 0 10px; }
.sk-refer-hero p { color: var(--text); font-size: 14px; line-height: 1.8; margin: 0 auto; max-width: 30em; }

/* ============ 結果: CTA・再チャレンジ ============ */
.sk-cta {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 20px; text-align: center; box-shadow: none;
}
.sk-cta-kicker { margin: 0 0 4px; color: var(--brand); font-size: var(--fs-micro); font-weight: 900; letter-spacing: .16em; }
.sk-cta-title { margin: 0; font-weight: 900; font-size: 18px; letter-spacing: -.02em; }
.sk-cta-sub { color: var(--muted); font-size: 13px; margin: 6px 0 0; line-height: 1.6; }
.sk-cta-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sk-cta-actions .btn { margin-top: 0; }
.sk-cta-action-group { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.sk-cta-action-group .btn + .btn { margin-top: 7px; }
.sk-cta-action-kicker { display: block; margin-bottom: 7px; color: var(--brand); font-size: var(--fs-2xs); font-weight: 900; letter-spacing: .06em; }
.sk-cta-external-note { display: block; margin-top: 6px; color: var(--muted); font-size: var(--fs-2xs); line-height: 1.4; text-align: center; }
.sk-cta-question-link { margin: 7px 0 0; font-size: var(--fs-xs); font-weight: 800; text-align: center; }
.sk-cta-question-link a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; }
.sk-restart { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.sk-restart .btn { min-height: 46px; }
.sk-restart-button { min-width: 172px; cursor: pointer; }

@media (max-width: 760px) {
  .sk-plan-pricebar { border-top: 1px solid var(--line); border-left: 0; }
  .sk-plan-details { grid-template-columns: 1fr; border-top: 1px solid var(--line); border-left: 0; }
  .sk-plan-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-plan-facts > div { border-bottom: 0; }
  .sk-plan-facts > div + div { border-left: 1px solid var(--line); }
  .sk-plan-conditions { border-top: 1px solid var(--line); border-left: 0; }
}

/* ============ 結果: 自由入力チャット ============ */
.sk-chat { padding: 18px; border-color: var(--line-strong); }
.sk-chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sk-chat-kicker { margin: 0 0 3px; color: var(--brand); font-size: var(--fs-micro); font-weight: 900; letter-spacing: .14em; }
.sk-chat h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.sk-chat-intro { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; }
.sk-chat-head .btn { flex: 0 0 auto; }
.sk-chat-status { min-height: 20px; margin: 11px 0 0; color: var(--muted); font-size: var(--fs-2xs); line-height: 1.5; }
.sk-chat-log { display: flex; flex-direction: column; gap: 8px; min-height: 118px; max-height: 300px; margin-top: 9px; padding: 11px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.sk-chat-bubble { max-width: 92%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; background: var(--surface); color: var(--text); font-size: var(--fs-xs); line-height: 1.65; overflow-wrap: anywhere; }
.sk-chat-bubble.user { align-self: flex-end; border-color: var(--line); border-radius: 12px 12px 3px 12px; background: var(--brand-softer); }
.sk-chat-bubble.error { border-color: var(--err); background: var(--err-soft); }
.sk-chat-bubble-label { display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--fs-micro); font-weight: 900; letter-spacing: .06em; }
.sk-chat-bubble p { margin: 0; white-space: pre-wrap; }
.sk-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 10px; }
.sk-chat-form textarea { min-height: 48px; max-height: 140px; resize: vertical; font-size: 16px; }
.sk-chat-form .btn { min-height: 48px; }
.sk-chat-privacy, .sk-chat-help { margin: 7px 0 0; color: var(--muted); font-size: var(--fs-2xs); line-height: 1.5; }
.sk-chat-privacy { padding-left: 9px; border-left: 2px solid var(--accent); }

/* ============ エラー ============ */
.sk-error { text-align: center; }
.sk-error .er-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: var(--fs-micro); font-weight: 900; letter-spacing: .08em; }
.sk-error h2 { font-size: 17px; margin: 8px 0 6px; }
.sk-error p { color: var(--muted); font-size: 13.5px; line-height: 1.7; margin: 0 0 4px; }

@media (max-width: 420px) {
  .sk-start-heading-row { gap: 10px; }
  .sk-welcome-visual { width: 76px; padding: 6px; }
  .sk-start h2 { font-size: 24px; }
  .sk-qtext { font-size: 19px; }
  .sk-question-visual { width: 32px; }
  .sk-scale-endpoints { grid-template-columns: 1fr; gap: 4px; }
  .sk-scale-bottom { text-align: left; }
  .sk-part-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sk-chips .sk-part-choice { min-height: 94px; padding: 8px; }
  .sk-part-choice:last-child { grid-column: 1 / -1; min-height: 76px; flex-direction: row; }
  .sk-part-icon { width: 38px; height: 38px; }
  .sk-part-icon svg { width: 30px; height: 30px; }
  .sk-result-hero { padding: 22px 18px; }
  .sk-result-hero > .sk-result-visual { top: 10px; right: 8px; width: 76px; opacity: .18; }
  .sk-refer-hero > .sk-refer-visual { top: 8px; right: 8px; width: 68px; }
  .sk-plans { grid-template-columns: 1fr; }
  .sk-plan-top { min-height: 0; }
  .sk-chat { padding: 16px; }
  .sk-chat-head { align-items: stretch; flex-direction: column; }
  .sk-chat-head .btn { align-self: flex-start; }
  .sk-chat-form { grid-template-columns: 1fr; }
  .sk-chat-form .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #skin-app .fade-up, .sk-qcard, .sk-fitz-pin { animation: none; transition: none; }
}

/* --------------------------------------------------------------------------
 * Skin diagnosis: clinical-learning theme refinements
 * -------------------------------------------------------------------------- */
#skin-app .sk-start-cta { box-shadow: 0 5px 13px color-mix(in srgb, var(--brand) 22%, transparent); }
#skin-app .fade-up { animation: fade-up .18s var(--ease); }
#skin-app .sk-part-icon { border-color: color-mix(in srgb, var(--brand) 18%, transparent); }
#skin-app .sk-result-hero {
  border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface-2) 58%, var(--accent-pale) 100%);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(11, 23, 48, .10);
}
#skin-app .sk-result-hero::after {
  background:
    radial-gradient(220px 150px at 88% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(190px 130px at 8% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
#skin-app .sk-result-label { color: var(--muted-strong); }
/* v60: この装飾アイコンはヒーローの主役をマスコットに譲るため非表示にした
   (ファイル末尾の上書きを参照)。色の宣言だけ残すと静的検査が地色との組み合わせを
   誤検出するため、色そのものを外す。 */
#skin-app .sk-result-hero > .sk-result-visual { opacity: .14; }
#skin-app .sk-type-ring {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent);
}
#skin-app .sk-type-name { color: var(--text); }
#skin-app .sk-type-desc { color: var(--muted-strong); }
/* この帯だけは配色トークンではなく肌色そのものを描く(フィッツパトリック I→VI の目安)。
   テーマ色に置き換えると、目盛りが示す肌の濃さが読めなくなるため据え置く。 */
#skin-app .sk-fitz-track {
  background: linear-gradient(90deg, #f8e1c8 0%, #edc69d 40%, #d99668 70%, #9e684b 100%);
}
#skin-app .sk-fitz-pin {
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: 0 1px 3px rgba(11, 23, 48, .08);
}
#skin-app .sk-fitz-scale span { color: var(--muted); }
#skin-app .sk-fitz-scale span.on { color: var(--text); }
#skin-app .sk-fitz-ends { color: var(--muted); }
#skin-app .sk-plan.is-primary { border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
#skin-app .sk-plan.is-primary .sk-plan-top { background: linear-gradient(135deg, var(--brand-softer), var(--surface)); }
#skin-app .sk-refer-hero {
  background: linear-gradient(150deg, var(--brand-softer), var(--surface));
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}
#skin-app .sk-refer-ico {
  border-color: color-mix(in srgb, var(--brand) 26%, transparent);
  background: linear-gradient(135deg, #ffffff, var(--brand-soft));
  color: var(--text-link);
}
#skin-app .sk-cta { border-color: color-mix(in srgb, var(--brand) 28%, transparent); }
#skin-app .sk-chat-bubble.user { border-color: color-mix(in srgb, var(--brand) 30%, transparent); }

/* Decorative illustration; the adjacent heading carries the full meaning. */
#skin-app .sk-course-visual {
  display: block;
  width: 100%;
  max-height: 300px;
  aspect-ratio: 4 / 3;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background-color: var(--surface-2);
  box-shadow: 0 1px 3px rgba(11, 23, 48, .08);
}

@media (max-width: 420px) {
  #skin-app .sk-course-visual {
    max-height: none;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #skin-app .fade-up { animation: none; }
}

/* --------------------------------------------------------------------------
 * v17: おすすめを先頭にし、詳細と音声案内は必要なときだけ開く
 * -------------------------------------------------------------------------- */
.sk-speech-guide {
  position: sticky;
  z-index: 40;
  top: calc(var(--header-height) + 4px);
  justify-content: flex-end;
  margin-top: 10px;
  margin-bottom: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sk-course-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  border-top: 5px solid var(--brand);
  background: var(--surface);
}
.sk-course-heading h2 { font-size: clamp(24px, 3vw, 32px); }
.sk-course-heading p:last-child { margin-top: 5px; }
#skin-app .sk-course-heading .sk-course-visual {
  width: 88px;
  height: 72px;
  aspect-ratio: auto;
  border-radius: 12px;
  box-shadow: none;
}
.sk-plan-group { gap: 8px; }

.sk-plan {
  grid-template-columns: minmax(220px, 1.05fr) minmax(160px, .72fr) minmax(230px, 1fr);
  border-width: 1px;
}
.sk-plan-top { padding: 16px 18px; }
.sk-plan-clinic {
  display: inline-flex;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-softer);
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
}
.sk-plan-pricebar { padding: 16px 18px; }
.sk-plan > .sk-plan-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}
.sk-plan > .sk-plan-facts > div {
  align-content: center;
  padding: 10px 13px;
  border-bottom: 0;
}
.sk-plan > .sk-plan-facts > div + div { border-left: 1px solid var(--line); }
/* v79(レーンRS/R-05): 「所要時間」は 3 つ目の項目。項目表は 2 列なので、そのままだと
   2 行目に半分だけ残る。行いっぱいに広げて上に区切り線を引く(「回数」「対象部位」の
   並びは変えない。所要時間を持たないプランでは行ごと出ないので見た目は従来どおり)。 */
.sk-plan-facts > .sk-fact-duration { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.sk-plan > .sk-plan-facts > .sk-fact-duration { border-left: 0; }
.sk-plan-reason { grid-column: 1 / -1; padding: 11px 18px; }
.sk-plan-more {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.sk-plan-more.sk-plan-details { display: block; border-left: 0; }
.sk-plan-more > summary,
.sk-other-plans > summary,
.sk-result-details > summary,
.sk-chat-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 10px 15px;
  cursor: pointer;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}
.sk-plan-more > summary::-webkit-details-marker,
.sk-other-plans > summary::-webkit-details-marker,
.sk-result-details > summary::-webkit-details-marker,
.sk-chat-disclosure > summary::-webkit-details-marker { display: none; }
.sk-plan-more > summary::after,
.sk-other-plans > summary::after,
.sk-result-details > summary::after,
.sk-chat-disclosure > summary::after { content: '＋'; font-size: 17px; line-height: 1; }
.sk-plan-more[open] > summary::after,
.sk-other-plans[open] > summary::after,
.sk-result-details[open] > summary::after,
.sk-chat-disclosure[open] > summary::after { content: '−'; }
.sk-plan-more[open] > summary,
.sk-other-plans[open] > summary,
.sk-result-details[open] > summary,
.sk-chat-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.sk-plan-more .sk-plan-conditions { padding: 13px 18px 16px; border: 0; }

.sk-other-plans,
.sk-result-details,
.sk-chat-disclosure {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
}
.sk-other-plans > summary { min-height: 52px; background: var(--brand-softer); }
.sk-other-plan-list { margin: 14px; }
.sk-result-details-body { padding: 14px; }
.sk-result-details .sk-result-hero { box-shadow: none; }
.sk-chat-disclosure > summary { min-height: 52px; background: var(--surface-2); }
.sk-chat-disclosure .sk-chat { margin: 0; border: 0; border-radius: 0; box-shadow: none; }

.sk-cta { padding: 17px; }
.sk-cta-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-cta-question-link { margin-top: 5px; }

@media (max-width: 760px) {
  .sk-plan { grid-template-columns: 1fr; }
  .sk-plan > .sk-plan-facts { border-top: 1px solid var(--line); border-left: 0; }
  .sk-plan-pricebar { border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 420px) {
  .sk-speech-guide { top: 62px; justify-content: stretch; }
  .sk-plan > .sk-plan-facts { grid-template-columns: 1fr; }
  .sk-plan > .sk-plan-facts > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .sk-other-plan-list { margin: 10px; }
  .sk-result-details-body { padding: 10px; }
  .sk-cta-actions { grid-template-columns: 1fr; }
}

/* v20: 複数候補を必要なときだけ比較。表は狭幅でもセル内で折り返す。 */
.sk-plan-comparison {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
}
.sk-plan-comparison > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 10px 15px;
  cursor: pointer;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
  list-style: none;
  background: var(--brand-softer);
}
.sk-plan-comparison > summary::-webkit-details-marker { display: none; }
.sk-plan-comparison > summary::after { content: '＋'; font-size: 17px; line-height: 1; }
.sk-plan-comparison[open] > summary::after { content: '−'; }
.sk-plan-comparison[open] > summary { border-bottom: 1px solid var(--line); }
.sk-plan-comparison-body { min-width: 0; padding: 12px; }
.sk-plan-comparison-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sk-plan-comparison-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-2xs);
  line-height: 1.55;
}
.sk-plan-comparison-table th,
.sk-plan-comparison-table td {
  min-width: 0;
  padding: 10px 9px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.sk-plan-comparison-table th:last-child,
.sk-plan-comparison-table td:last-child { border-right: 0; }
.sk-plan-comparison-table tbody tr:last-child th,
.sk-plan-comparison-table tbody tr:last-child td { border-bottom: 0; }
.sk-plan-comparison-table thead th {
  background: var(--surface-2);
  color: var(--muted-strong);
  font-size: var(--fs-micro);
  font-weight: 900;
}
.sk-plan-comparison-table tbody th { font-weight: 850; text-align: left; }
.sk-plan-comparison-table tbody td { font-variant-numeric: tabular-nums; }
.sk-plan-comparison-table th:nth-child(1) { width: 25%; }
.sk-plan-comparison-table th:nth-child(2) { width: 16%; }
.sk-plan-comparison-table th:nth-child(3) { width: 10%; }
.sk-plan-comparison-table th:nth-child(4) { width: 17%; }
.sk-plan-comparison-table th:nth-child(5) { width: 32%; }
.sk-plan-comparison-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sk-plan-comparison-copy { min-height: 44px; }
.sk-plan-comparison-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--fs-2xs);
  line-height: 1.5;
}

@media (max-width: 560px) {
  .sk-plan-comparison-body { padding: 9px; }
  .sk-plan-comparison-table { font-size: 13px; }
  .sk-plan-comparison-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .sk-plan-comparison-table,
  .sk-plan-comparison-table tbody,
  .sk-plan-comparison-table tr,
  .sk-plan-comparison-table th,
  .sk-plan-comparison-table td { display: block; width: 100%; }
  .sk-plan-comparison-table tbody th:nth-child(1) { width: 100%; }
  .sk-plan-comparison-table tr { padding: 9px 0; border-bottom: 1px solid var(--line); }
  .sk-plan-comparison-table tbody tr:last-child { border-bottom: 0; }
  .sk-plan-comparison-table th,
  .sk-plan-comparison-table td {
    display: grid;
    grid-template-columns: minmax(6.8em, 30%) minmax(0, 1fr);
    gap: 8px;
    padding: 5px 9px;
    border: 0;
  }
  .sk-plan-comparison-table th::before,
  .sk-plan-comparison-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--fs-micro);
    font-weight: 850;
  }
  .sk-plan-comparison-table tbody th::before { content: 'プラン名'; }
  .sk-plan-comparison-actions { align-items: stretch; flex-direction: column; }
  .sk-plan-comparison-copy { width: 100%; }
}

/* --------------------------------------------------------------------------
 * v26 → 市場再設計(2026-09-04): 画面ごとの複数レイヤー・ラジアル・格子背景は
 * すべて撤去した(design-brief.md §5「3面のみ・テクスチャなし」)。地は
 * design.css の共通トーンに統一する。
 * -------------------------------------------------------------------------- */

.sk-entry-stack { max-width: 1040px; margin-inline: auto; }
#skin-voice-toggle:not(:disabled)[aria-pressed="false"] { font-size: 0; }
#skin-voice-toggle:not(:disabled)[aria-pressed="false"]::after { content: 'アニメ調の短い音声案内'; font-size: 13px; }
body[data-skin-stage="result"] .sk-speech-guide:not(.is-enabled),
body[data-skin-stage="referral"] .sk-speech-guide:not(.is-enabled) { position: static; }
.sk-start { padding: 0; }
.sk-start-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
  min-height: 408px;
}
.sk-start-content { align-self: center; min-width: 0; padding: clamp(28px, 4vw, 48px); }
.sk-start-description { margin: 9px 0 16px; }
.sk-clinic-selector-wrap { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sk-clinic-selector-wrap .btn { min-width: 110px; min-height: 44px; }
.sk-visual-box {
  position: relative;
  min-height: 100%;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: none;
}
.sk-visual-banner-img { width: 100%; height: 100%; min-height: 408px; }
.sk-visual-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 12px;
  /* 写真の上に載る帯。地色を半透明にすると背景次第で白文字が読めなくなるため、
     最暗トークンをそのまま不透明で敷く(白文字との比が静的に検証できる形にする)。 */
  background: var(--ink-950);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  /* v102: 同じファイルの他の 3 か所と同じく接頭辞つきを対で書く(地色が不透明なので見た目は変わらない)。 */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* 2026-09-04 削除: 上の1行は #skin-app 自体を 720px に固定していたが margin:auto が
   無く、中央寄せの .sk-question-shell(下で max-width:720px; margin:0 auto を持つ)
   と二重になったうえ、この行だけが勝って画面全体が左詰めになる実害があった
   (1920px 幅で実測、右側が丸ごと空白)。.sk-question-shell 側だけで十分なので削除。 */
.sk-qhead { min-height: 36px; margin: 0 2px 7px; }
.sk-qhead-guide { color: var(--brand); }
.sk-step-wrap { gap: 5px; }
.sk-step { padding: 4px 10px; }
.sk-progress-wrap { margin: 0 2px 9px; }
.sk-qcard { padding: 20px; background: rgba(255, 255, 255, .98); }
.sk-options { gap: 7px; margin-top: 13px; }
.sk-options .q-option { min-height: 46px; padding: 9px 13px; }
.sk-scale-endpoints { margin-top: 10px; padding: 7px 10px; }

.sk-decision-summary {
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--brand) 42%, transparent);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 1px 3px rgba(11, 23, 48, .08);
}
.sk-decision-summary::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.sk-decision-kicker { margin: 0 0 4px; color: var(--brand); font-size: var(--fs-micro); font-weight: 900; letter-spacing: .13em; }
.sk-decision-summary h2 { margin: 0; padding-right: 180px; font-size: clamp(19px, 2.5vw, 25px); line-height: 1.4; }
.sk-decision-safety {
  position: absolute;
  top: 17px;
  right: 20px;
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}
.sk-decision-intro,
.sk-decision-incomplete { margin: 6px 0 0; color: var(--muted-strong); font-size: 13px; line-height: 1.6; }
.sk-decision-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 13px 0 0;
}
.sk-decision-list > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.sk-decision-list > div.is-wide { grid-column: 1 / -1; border-left: 3px solid var(--brand); background: var(--brand-softer); }
.sk-decision-list dt { color: var(--muted); font-size: 13px; font-weight: 900; line-height: 1.35; }
.sk-decision-list dd { margin: 3px 0 0; color: var(--text); font-size: 13px; font-weight: 850; line-height: 1.5; overflow-wrap: anywhere; }

.sk-course-section { gap: 8px; margin-top: 0; }
.sk-course-section.stack > * + * { margin-top: 8px; }
.sk-course-heading { min-height: 82px; padding: 12px 16px; border-top-width: 4px; }
.sk-course-heading .section-label { margin-bottom: 3px; }
.sk-course-heading h2 { font-size: clamp(20px, 2.5vw, 26px); }
.sk-course-heading p:last-child { margin-top: 3px; font-size: 13px; line-height: 1.45; }
#skin-app .sk-course-heading .sk-course-visual { width: 70px; height: 58px; }
.sk-plans { gap: 8px; }
.sk-plan-top { padding: 12px 14px; }
.sk-plan-name { font-size: 15px; }
.sk-plan-clinic { margin-top: 4px; }
.sk-plan-pricebar { padding: 12px 14px; }
.sk-plan-price { font-size: 25px; }
.sk-plan > .sk-plan-facts > div { padding: 8px 10px; }
.sk-plan-facts dt { font-size: 13px; }
.sk-plan-facts dd { font-size: 13px; line-height: 1.45; }
.sk-plan-more > summary,
.sk-other-plans > summary,
.sk-result-details > summary,
.sk-chat-disclosure > summary,
.sk-plan-comparison > summary { min-height: 44px; padding: 8px 13px; }
.sk-plan-more .sk-plan-conditions { padding: 10px 14px 13px; }
.sk-other-plans > summary,
.sk-plan-comparison > summary { min-height: 46px; }
.sk-course-final-note { padding: 7px 10px; font-size: 13px; line-height: 1.5; }

.sk-next-actions { padding: 16px 18px; text-align: left; }
.sk-next-actions .sk-cta-title { font-size: 19px; }
.sk-action-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.sk-action-steps li {
  display: flex;
  min-width: 0;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .86);
}
.sk-action-number { flex: 0 0 auto; color: var(--accent-strong); font: 900 11px/1.4 "Plus Jakarta Sans", sans-serif; letter-spacing: .06em; }
.sk-action-copy { display: grid; min-width: 0; gap: 3px; }
.sk-action-copy strong { color: var(--text); font-size: 13px; line-height: 1.4; }
.sk-action-copy > span { color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
.sk-next-actions .sk-cta-actions { margin-top: 10px; }
.sk-next-actions .sk-cta-external-note { margin: 6px 0 0; }
.sk-next-actions .sk-cta-question-link { margin-top: 2px; }
body[data-skin-stage="result"] #skin-app .sk-result-stack > * + *,
body[data-skin-stage="referral"] #skin-app .sk-referral-stack > * + * { margin-top: 6px; }

@media (max-width: 760px) {
  .sk-start-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sk-start-content { padding: 20px; }
  .sk-visual-box { order: -1; min-height: 150px; border-bottom: 1px solid var(--line-strong); border-left: 0; }
  .sk-visual-banner-img { min-height: 150px; background-position: center 58%; }
  .sk-visual-caption { right: 12px; bottom: 10px; left: auto; max-width: 250px; padding: 7px 9px; font-size: 13px; }
  .sk-decision-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-plan > .sk-plan-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sk-plan > .sk-plan-facts > div { border: 0; }
  .sk-plan > .sk-plan-facts > .sk-fact-sessions { grid-column: 1; grid-row: 1; }
  .sk-plan > .sk-plan-facts > .sk-fact-unit { grid-column: 2; grid-row: 1; border-left: 1px solid var(--line); }
  .sk-plan > .sk-plan-facts > .sk-fact-parts { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line); }
}

@media (max-width: 420px) {
  .sk-start { border-radius: 12px; }
  .sk-start-content { padding: 14px; }
  .sk-start h2 { font-size: 22px; }
  .sk-start-description { margin: 5px 0 9px; font-size: 13px; line-height: 1.5; }
  .sk-clinic-selector-wrap { gap: 6px; margin-bottom: 7px; }
  .sk-clinic-selector-wrap .btn { flex: 1; min-width: 0; min-height: 44px; }
  .sk-start-meta { margin-bottom: 6px; font-size: 13px; }
  .sk-start-disclaimer { margin-bottom: 8px; padding: 7px 9px; font-size: 13px; line-height: 1.45; }
  .sk-start-cta { min-height: 46px; }
  .sk-visual-box { min-height: 118px; }
  .sk-visual-banner-img { min-height: 118px; }
  .sk-visual-caption { display: none; }

  .sk-qhead { min-height: 32px; margin-bottom: 5px; }
  .sk-qhead .btn { min-height: 44px; padding-block: 6px; }
  .sk-step { padding: 3px 8px; }
  .sk-progress-wrap { margin-bottom: 6px; }
  .sk-qcard { padding: 12px; border-radius: 12px; }
  .sk-qtext { font-size: 18px; line-height: 1.35; }
  .sk-help { margin-top: 4px; font-size: 13px; line-height: 1.45; }
  .sk-scale-endpoints { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 7px; padding: 5px 7px; font-size: 13px; line-height: 1.35; }
  .sk-scale-bottom { text-align: right; }
  .sk-options { gap: 5px; margin-top: 8px; }
  .sk-options .q-option { min-height: 44px; gap: 8px; padding: 7px 10px; font-size: 13px; line-height: 1.35; }
  .sk-options .q-option::before { flex-basis: 23px; }

  .sk-decision-summary { padding: 12px; border-radius: 12px; }
  .sk-decision-summary h2 { padding-right: 0; font-size: 17px; line-height: 1.35; }
  .sk-decision-safety { position: static; margin-top: 4px; padding: 3px 7px; }
  .sk-decision-intro,
  .sk-decision-incomplete { margin-top: 4px; font-size: 13px; line-height: 1.45; }
  .sk-decision-list { gap: 4px; margin-top: 6px; }
  .sk-decision-list > div { padding: 5px 6px; }
  .sk-decision-list dt { font-size: 13px; }
  .sk-decision-list dd { margin-top: 1px; font-size: 13px; line-height: 1.35; }

  .sk-refer-hero { padding: 14px; }
  .sk-refer-ico { width: 50px; height: 50px; margin-bottom: 6px; }
  .sk-refer-hero h2 { margin: 2px 0 6px; font-size: 18px; }
  .sk-refer-hero p { font-size: 13px; line-height: 1.55; }

  .sk-course-section.stack > * + * { margin-top: 6px; }
  .sk-course-heading { grid-template-columns: minmax(0, 1fr) 48px; gap: 7px; min-height: 0; padding: 7px 9px; }
  .sk-course-heading h2 { font-size: 18px; }
  .sk-course-heading p:last-child { font-size: 13px; }
  #skin-app .sk-course-heading .sk-course-visual { width: 48px; height: 42px; border-radius: 9px; }
  .sk-plan-top { padding: 7px 9px; }
  .sk-plan-name { font-size: 13px; line-height: 1.35; }
  .sk-plan-pricebar { padding: 7px 9px; }
  .sk-plan-price { font-size: 21px; }
  .sk-plan-price-label { font-size: 13px; line-height: 1.35; }
  .sk-plan > .sk-plan-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-plan > .sk-plan-facts > div { padding: 5px 7px; }
  .sk-plan-facts dt { font-size: 13px; }
  .sk-plan-facts dd { font-size: 13px; line-height: 1.35; }
  .sk-plan-more > summary,
  .sk-other-plans > summary,
  .sk-result-details > summary,
  .sk-chat-disclosure > summary,
  .sk-plan-comparison > summary { min-height: 44px; padding: 7px 11px; font-size: 13px; }
  .sk-course-final-note { padding: 5px 7px; font-size: 13px; line-height: 1.35; }
  .sk-other-plan-list { margin: 7px; }

  body[data-skin-stage="result"] #skin-app .sk-result-stack > * + *,
  body[data-skin-stage="referral"] #skin-app .sk-referral-stack > * + * { margin-top: 6px; }
  .sk-next-actions { padding: 11px; }
  .sk-next-actions .sk-cta-title { font-size: 17px; }
  .sk-action-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 6px; }
  .sk-action-steps li { flex-direction: column; gap: 3px; padding: 6px 5px; }
  .sk-action-copy { gap: 2px; }
  .sk-action-copy strong { font-size: 13px; line-height: 1.35; }
  .sk-action-copy > span { font-size: 13px; line-height: 1.35; }
  .sk-next-actions .sk-cta-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
  .sk-next-actions .sk-cta-actions .btn { min-width: 0; padding-inline: 6px; font-size: 13px; }
  .sk-next-actions .sk-cta-external-note { font-size: 13px; line-height: 1.4; text-align: center; }
  .sk-next-actions .sk-cta-question-link a { font-size: 13px; }
  .sk-restart { gap: 6px; }
  .sk-restart .btn { min-width: 0; min-height: 44px; padding-inline: 9px; font-size: 13px; }
}

@media (max-width: 340px) {
  .sk-action-steps { grid-template-columns: 1fr; }
  .sk-action-steps li { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-visual-banner-img,
  .sk-visual-box:hover .sk-visual-banner-img { transform: none; transition: none; }
}

/* v27: 条件発見と訂正を優先する。小文字化ではなく、階層と列を整理する。
   市場再設計(design-brief.md §5): 画面ごとに地色を変える演出は撤去し、
   全ステージで共通の地(design.css 側)に統一した(3面構成: 白 / cream / 紺)。 */
/* 2026-09-04是正: ヘッダーと共用の --page-max はもう書き換えない
   (上のコメント参照)。設問の幅は .sk-question-shell 自身の max-width で作る。 */
#skin-app { padding-bottom: 32px; }
#skin-app h2[tabindex="-1"]:focus { outline: none; box-shadow: none; }
#skin-app h2, #skin-app button, #skin-app summary { scroll-margin-top: 126px; }

/* 2026-09-04夕方(v61 納品前検査 R6): 中央列を 1fr にしていたため、この行だけが
   コンテナ(1200px)の左端いっぱいに広がり、中央寄せの入口カード(800px)より
   200px 外側から始まっていた(実測 1920: 音声行 x=360 / カード x=560)。
   列を内容幅にして行ごと中央へ寄せ、カード・最小フッターと同じ中心線に揃える。 */
.sk-speech-guide,
.sk-speech-guide:not(.is-enabled) {
  position: static;
  display: grid;
  grid-template-columns: 48px minmax(0, max-content) minmax(0, max-content);
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 48px;
}
.sk-speech-guide .speech-guide-mascot,
.sk-speech-guide:not(.is-enabled) .speech-guide-mascot { width: 48px; height: 48px; border-radius: 12px; }
.sk-speech-guide .speech-guide-mascot img,
.sk-speech-guide:not(.is-enabled) .speech-guide-mascot img { width: 33px; height: 50px; }
.sk-speech-guide .speech-guide-role,
.sk-speech-guide:not(.is-enabled) .speech-guide-role { display: block; min-width: 0; font-size: 13px; }
#skin-voice-toggle:not(:disabled)[aria-pressed="false"] { font-size: 13px; }
#skin-voice-toggle:not(:disabled)[aria-pressed="false"]::after { content: none; }
.sk-speech-guide .speech-guide-toggle,
.sk-speech-guide:not(.is-enabled) .speech-guide-toggle { width: auto; min-height: 44px; padding: 9px 12px; }
.sk-voice-tools { grid-column: 1 / -1; display: none; }
.sk-speech-guide.is-enabled .sk-voice-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.sk-speech-guide .speech-guide-mode { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.sk-voice-tools .speech-guide-mode select { max-width: none; min-width: 0; width: 100%; font-size: 14px; }
.sk-voice-choice, .sk-voice-playback, .sk-voice-note { grid-column: 1 / -1; }
/* 2026-09-10是正: 実際の配置は #skin-speech-guide(ID優先)の display:flex なので、
   ここの grid-column は効かない。行自体はトグルと同じ幅いっぱいの1行になるため、
   中身(ボタン)を justify-content で中央へ寄せないとトグルだけが浮いて見える
   (実測 1280: トグル x=599・この行 x=72 w=1136 で左端に寄っていた)。 */
.sk-voice-playback { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sk-voice-playback .btn { min-height: 44px; }
.sk-voice-note { margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.6; }
.sk-speech-guide .speech-guide-status.is-visible { grid-column: 1 / -1; }
/* 予備(VOICEVOX)バンクが鳴る構成で voice-bank.js が足すクレジット。利用規約が
   求める必須表記なので、560px 以下で隠している役割注記(.speech-guide-role)とは
   別要素にし、どの画面幅でも1行そのまま出す。 */
.sk-speech-guide .voice-credit {
  grid-column: 1 / -1;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

#skin-app .sk-start { padding: 0; background: var(--surface); border-color: var(--line); border-radius: 12px; }
#skin-app .sk-start::before { background: var(--brand); height: 3px; }
#skin-app .sk-start-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: 390px; }
#skin-app .sk-start-content { padding: 32px; }
#skin-app .sk-start h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.35; }
#skin-app .sk-start-description { margin: 12px 0 22px; font-size: 15px; line-height: 1.8; }
#skin-app .sk-start-meta { margin: 12px 0; font-size: 13px; }
#skin-app .sk-start-disclaimer { padding: 10px 12px; font-size: 13px; line-height: 1.6; margin-bottom: 16px; }
#skin-app .sk-start-cta { min-height: 52px; font-size: 16px; }
.sk-start-price-link { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
/* 2026-09-04夕方(v61 納品前検査 R4): 料金早見(renderPriceWelcome)の入口。上の
   「先に公式料金を確認する」(院の公式サイト・外部)と行き先が違うので、同じ体裁の
   細字リンクとして開始ボタンの下に並べる。当たり判定は 44px。 */
.sk-start-price-browse {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 44px; margin-top: 2px; padding: 0; border: 0; background: none;
  color: var(--text-link); font: inherit; font-size: 14px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
}
.sk-start-price-browse:hover { color: var(--navy-900); }
.sk-start-price-browse:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; border-radius: var(--r-pill); }
/* v74(2026-09-08): 設問 1 の下だけに置く料金早見の入口(料金だけ知りたい人向け。2 問目以降・院内では出さない) */
#skin-app .sk-q1-price-entry { margin: 12px 0 0; text-align: center; color: var(--muted-strong); font-size: 14px; }
#skin-app .sk-q1-price-entry .sk-start-price-browse { margin-top: 0; }
/* v79(レーンRS/R-04): 設問の下に置く「質問チャットへ」の文字リンク。
   ヘッダーの行き先が畳まれる 480px 以下でも、どの設問からでも相談へ移れるようにする。
   当たり判定は 44px 以上(min-height)。見た目は上の料金早見の行と同じ静かな文字リンク。 */
#skin-app .sk-q-chat-entry { margin: 8px 0 0; text-align: center; }
#skin-app .sk-q-chat-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}
#skin-app .sk-visual-box { min-height: 100%; border-left: 1px solid var(--line); order: 0; }
#skin-app .sk-visual-banner-img { min-height: 390px; height: 100%; background-position: 53% center; }
#skin-app .sk-visual-caption { font-size: 13px; }

#skin-app .sk-qhead { min-height: 44px; margin: 0 0 8px; }
.sk-section-label { color: var(--muted-strong); font-size: 13px; font-weight: 700; }
#skin-app .sk-step { border: 0; background: var(--brand-soft); color: var(--brand); padding: 5px 10px; font-size: 13px; }
#skin-app .sk-qcard { padding: 24px; border-radius: 12px; border-color: var(--line); box-shadow: 0 1px 3px rgba(11, 23, 48, .08); }
#skin-app .sk-qcard::before { height: 3px; background: var(--brand); }
#skin-app .sk-qtext { font-size: 22px; line-height: 1.6; }
#skin-app .sk-help { font-size: 15px; line-height: 1.65; margin-top: 8px; } /* v65: 14→15px */
#skin-app .sk-scale-endpoints { font-size: 13px; margin-top: 12px; padding: 8px 10px; line-height: 1.5; }
#skin-app .sk-options { gap: 8px; margin-top: 16px; }
#skin-app .sk-options .q-option { min-height: 54px; font-size: 16px; line-height: 1.55; padding: 12px 14px; } /* v65: 15→16px */
@media (hover: hover) and (pointer: fine) {
  #skin-app .sk-options .q-option:hover { transform: none; }
}
#skin-app .sk-chips .chip { min-height: 48px; font-size: 14px; }
#skin-app .sk-part-choice .sk-opt-label { font-size: 14px; }
#skin-app .sk-multi-exclusive-note { font-size: 13px; }
.sk-edit-actions { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.sk-edit-actions p { margin: 0; color: var(--muted-strong); font-size: 14px; line-height: 1.6; }
.sk-edit-actions .btn { min-height: 48px; }

/* 2026-09-04 座長裁定: 紺の帯(hero)は .sk-result-stack の外(兄弟)へ出したため、
   このグリッドは常に「左: 料金 / 右: 相談・持ち帰り」の2カラムから始まる
   (旧: hero が居た1行目が空のまま残り、行間ぶんの隙間が上に出ていた)。 */
/* 2026-09-04 座長裁定(追加): hero を兄弟へ出した際、このグリッド自身が
   .container/.v60-shell 相当の余白を失い x=0〜viewport幅に張り付いていた。
   グリッド自身に本文と同じ余白(--container 幅・--gutter 内側パディング)を持たせて戻す。 */
#skin-app .sk-result-stack {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px 22px; align-items: start;
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
}
@media (max-width: 760px) {
  #skin-app .sk-result-stack { padding-inline: var(--gutter-sp); }
}
body[data-skin-stage="result"] #skin-app .sk-result-stack.stack > * + * { margin-top: 0; }
/* 2026-09-04夕方(v61 リーダー判定⑤): 右列は旧4枚(注記・次にすること・受付で
   見せる・持ち帰る・選んだ内容)から、受付で見せる・持ち帰るを「次にすること」へ
   畳み込んだため3枚になった。行番号を1つずつ詰め、空の行(旧row3)がgapぶん
   二重に空くのを防ぐ。左列(料金)の span も 1/5→1/4 に合わせて縮める。 */
.sk-result-stack > .sk-course-section, .sk-result-stack > .sk-course-unavailable { grid-column: 1; grid-row: 1 / 4; }
.sk-result-stack > .disclaimer { grid-column: 2; grid-row: 1; }
.sk-result-stack > .sk-next-actions { grid-column: 2; grid-row: 2; }
.sk-result-stack > .sk-result-details { grid-column: 2; grid-row: 3; }
.sk-result-stack > .sk-chat-disclosure { grid-column: 1 / -1; grid-row: 4; }
.sk-result-stack > .sk-restart { grid-column: 1 / -1; grid-row: 5; }
#skin-app .sk-decision-summary { padding: 18px; border-color: var(--line); border-radius: 12px; box-shadow: none; background: var(--surface); }
#skin-app .sk-decision-summary::before { background: var(--brand); height: 3px; }
#skin-app .sk-decision-summary h2 { padding-right: 0; font-size: 21px; line-height: 1.45; }
#skin-app .sk-decision-safety { position: static; margin-top: 8px; padding: 4px 8px; font-size: 13px; }
#skin-app .sk-decision-incomplete { font-size: 14px; line-height: 1.7; }
#skin-app .sk-decision-list { grid-template-columns: 1fr; gap: 0; margin-top: 16px; }
#skin-app .sk-decision-list > div { position: relative; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); }
#skin-app .sk-decision-list > div:has(.sk-summary-edit) { padding-right: 55px; min-height: 68px; }
#skin-app .sk-decision-list > div.is-wide { padding: 13px 0 0; border: 0; }
#skin-app .sk-decision-list dt { color: var(--muted-strong); font-size: 13px; line-height: 1.5; }
#skin-app .sk-decision-list dd { margin-top: 5px; font-size: 14px; font-weight: 700; line-height: 1.65; }
.sk-summary-edit { position: absolute; top: 12px; right: 0; min-width: 48px; min-height: 44px; padding: 7px; font-size: 13px; }
.sk-decision-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-review-all { display: inline-flex; flex-shrink: 0; min-height: 44px; justify-content: center; margin: 0; padding: 8px 12px; font-size: 14px; }
.sk-selection-overview { margin: 12px 0 0; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.65; }
.sk-decision-details, .sk-consultation-flow { margin-top: 8px; }
.sk-decision-details > summary, .sk-consultation-flow > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; color: var(--brand); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.sk-decision-details > summary::after, .sk-consultation-flow > summary::after { content: '＋'; flex-shrink: 0; }
.sk-decision-details[open] > summary::after, .sk-consultation-flow[open] > summary::after { content: '−'; }
.sk-decision-details > summary::-webkit-details-marker, .sk-consultation-flow > summary::-webkit-details-marker { display: none; }

#skin-app .sk-course-heading { display: block; min-height: 0; padding: 0 0 10px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
#skin-app .sk-course-heading .sk-course-visual { display: none; }
#skin-app .sk-course-heading .section-label { font-size: 13px; margin: 0 0 7px; }
#skin-app .sk-course-heading h2 { font-size: 24px; line-height: 1.4; }
#skin-app .sk-plan { grid-template-columns: 1fr; border-radius: var(--r-card); box-shadow: none; }
#skin-app .sk-plan-top { padding: 18px 18px 10px; }
#skin-app .sk-plan-name { font-size: 17px; line-height: 1.6; }
#skin-app .sk-plan-pricebar { padding: 10px 18px 18px; border: 0; }
.sk-total-label { color: var(--muted-strong); font-size: 13px; font-weight: 700; line-height: 1.5; }
#skin-app .sk-plan-price { margin: 4px 0; font-size: 32px; line-height: 1.2; }
#skin-app .sk-plan-price-label { font-size: 13px; line-height: 1.6; }
#skin-app .sk-plan > .sk-plan-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 0; }
#skin-app .sk-plan > .sk-plan-facts > div { padding: 12px 16px; border: 0; }
#skin-app .sk-plan > .sk-plan-facts > .sk-fact-sessions { grid-column: 1; grid-row: 1; }
#skin-app .sk-plan > .sk-plan-facts > .sk-fact-unit { grid-column: 2; grid-row: 1; border-left: 1px solid var(--line); }
#skin-app .sk-plan > .sk-plan-facts > .sk-fact-parts { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line); }
#skin-app .sk-plan > .sk-plan-facts { grid-template-columns: 80px minmax(0, 1fr); }
#skin-app .sk-plan > .sk-plan-facts > .sk-fact-parts { grid-column: 2; grid-row: 1; border-top: 0; border-left: 1px solid var(--line); }
#skin-app .sk-plan-facts dt { font-size: 13px; }
#skin-app .sk-plan-facts dd { font-size: 14px; line-height: 1.65; }
.sk-important-conditions { padding: 16px 18px 12px; border-top: 1px solid var(--line); background: var(--surface-2); }
.sk-important-conditions h3 { margin: 0 0 8px; color: var(--text); font-size: 14px; }
.sk-important-conditions ul { display: grid; gap: 8px; margin: 0; padding-left: 1.2em; color: var(--text); font-size: 14px; line-height: 1.7; }
.sk-cost-check-note { margin: 12px 0 0; color: var(--muted-strong); font-size: 14px; line-height: 1.7; }
.sk-official-price-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.sk-plan-mismatch { padding: 14px; border-left: 3px solid var(--accent); background: var(--surface-warm); color: var(--text); font-size: 14px; line-height: 1.7; }
#skin-app .sk-other-plans > summary,
#skin-app .sk-plan-more > summary,
#skin-app .sk-plan-comparison > summary,
#skin-app .sk-result-details > summary,
#skin-app .sk-chat-disclosure > summary { min-height: 48px; font-size: 14px; padding: 12px 14px; }
#skin-app .sk-plan-comparison-table { font-size: 14px; }
#skin-app .sk-plan-comparison-table th::before,
#skin-app .sk-plan-comparison-table td::before { font-size: 13px; }
#skin-app .sk-plan-conditions li { font-size: 14px; }
#skin-app .sk-plan-reason { font-size: 14px; }

#skin-app .sk-next-actions { padding: 18px; text-align: left; background: var(--surface); border-color: var(--line); border-radius: 12px; box-shadow: none; }
#skin-app .sk-next-actions .sk-cta-title { font-size: 21px; line-height: 1.45; }
#skin-app .sk-action-steps { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
#skin-app .sk-action-steps li { flex-direction: row; align-items: flex-start; padding: 0; border: 0; background: transparent; gap: 12px; }
#skin-app .sk-action-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 13px; }
#skin-app .sk-action-copy { gap: 4px; }
#skin-app .sk-action-copy strong { font-size: 14px; line-height: 1.45; }
#skin-app .sk-action-copy > span { font-size: 14px; line-height: 1.65; }
#skin-app .sk-next-actions .sk-cta-actions { grid-template-columns: 1fr; margin-top: 18px; gap: 10px; }
#skin-app .sk-next-actions .sk-cta-actions .btn { min-height: 48px; font-size: 15px; }
#skin-app .sk-next-actions .sk-cta-external-note { margin-top: 10px; font-size: 13px; line-height: 1.6; text-align: left; }
/* 2026-09-04夕方(v61 リーダー判定⑤): .sk-choice-note(コースの契約を今すぐ
   決める必要はありません)と .sk-consider-link/.sk-home-link(機能一覧に戻る、
   ヘッダーと重複)は要素ごと削除したため、対応するこの2ルールも削除した。 */
.sk-existing-booking { display: flex; justify-content: center; align-items: center; min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
/* 2026-09-04 座長裁定: 黄色い注意箱は禁止。.disclaimer クラス自体は既存契約
   (1画面に1つ)のため残すが、見た目は v60-small 相当の枠なし1行にする
   (design.css の共有 .disclaimer は #ebcf8b の黄枠・#fff9e9 の黄地を持つため、
   このページだけ打ち消す)。結果・医師相談どちらの面でも同じ見た目にする。 */
#skin-app .disclaimer {
  padding: 0; margin: 0; border: 0; background: none; border-radius: 0;
  color: var(--ink-2); font-family: var(--font-sans); font-size: 13px;
  font-weight: 400; line-height: 1.6; letter-spacing: .02em;
}
#skin-app .sk-referral-stack > * + * { margin-top: 18px; }
/* 2026-09-13(v79、監査 AU-D の D-04): 医師相談の面だけ器の最大幅が無く、1280px で
   本文の行長が 1242px(通常の結果面は hero 1200px・料金カード 668px)になっていた。
   通常の結果面(.sk-result-stack、1201行)と同じ器をこの面にも与える。
   中の .sk-refer-hero が自前で持っていた左右余白はこの器に寄せる(下の 2520行台)。 */
#skin-app .sk-referral-stack {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
}
@media (max-width: 760px) {
  #skin-app .sk-referral-stack { padding-inline: var(--gutter-sp); }
}
#skin-app .sk-refer-hero { padding: 24px; }
#skin-app .sk-refer-hero h2 { font-size: 23px; line-height: 1.5; }
#skin-app .sk-refer-hero p { font-size: 14px; line-height: 1.8; }
#skin-app .sk-cautions li, #skin-app .sk-type-desc { font-size: 14px; }
#skin-app .sk-restart .btn { min-height: 44px; font-size: 14px; }

.sk-answer-review { padding: 24px; }
.sk-answer-review h2 { margin: 0; font-size: 25px; }
.sk-review-intro { margin: 10px 0 16px; color: var(--muted-strong); font-size: 14px; line-height: 1.7; }
.sk-answer-review-list { margin: 18px 0 0; padding: 0; list-style: none; }
.sk-answer-review-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.sk-review-question { margin: 0 0 6px; color: var(--muted-strong); font-size: 14px; line-height: 1.6; }
.sk-review-answer { margin: 0; color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.6; }
.sk-answer-change { min-height: 44px; min-width: 52px; font-size: 13px; }
#skin-app .sk-error p { font-size: 14px; line-height: 1.7; }
#skin-app[data-skin-stage="question"] .fade-up { animation: none; }

@media (max-width: 980px) {
  #skin-app .sk-result-stack { display: block; }
  body[data-skin-stage="result"] #skin-app .sk-result-stack.stack > * + * { margin-top: 18px; }
  #skin-app .sk-decision-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  #skin-app .sk-decision-list > div:has(.sk-summary-edit) { padding-right: 0; padding-bottom: 52px; }
  #skin-app .sk-summary-edit { top: auto; bottom: 7px; left: 0; right: auto; }
}
@media (max-width: 560px) {
  .sk-speech-guide, .sk-speech-guide:not(.is-enabled) { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; min-height: 48px; }
  .sk-speech-guide .speech-guide-role, .sk-speech-guide:not(.is-enabled) .speech-guide-role { display: none; }
  .sk-speech-guide .speech-guide-toggle, .sk-speech-guide:not(.is-enabled) .speech-guide-toggle { width: 100%; }
  .sk-speech-guide .speech-guide-mascot, .sk-speech-guide:not(.is-enabled) .speech-guide-mascot { width: 44px; height: 48px; }
  #skin-app .sk-start-content { padding: 24px 20px; }
  #skin-app .sk-start h2 { font-size: 26px; }
  #skin-app .sk-start-description { font-size: 14px; margin-bottom: 18px; }
  #skin-app .sk-visual-box { display: none; }
  #skin-app .sk-qcard { padding: 18px 16px; }
  #skin-app .sk-qtext { font-size: 19px; line-height: 1.5; }
  #skin-app .sk-help { font-size: 14px; line-height: 1.55; }
  #skin-app .sk-options { gap: 7px; }
  #skin-app .sk-options .q-option { min-height: 48px; padding: 9px 10px; line-height: 1.5; }
  #skin-app .sk-scale-endpoints { gap: 8px; }
  #skin-app .sk-part-grid { gap: 10px; }
  .sk-decision-heading { align-items: flex-start; gap: 8px; }
  .sk-review-all { font-size: 13px; padding-inline: 9px; }
  #skin-app .sk-decision-list { grid-template-columns: 1fr; gap: 0; }
  #skin-app .sk-decision-list > div:has(.sk-summary-edit) { padding-right: 55px; padding-bottom: 12px; }
  #skin-app .sk-summary-edit { top: 12px; right: 0; bottom: auto; left: auto; }
  #skin-app .sk-plan-top { padding: 16px 16px 8px; }
  #skin-app .sk-plan-pricebar { padding: 8px 16px 16px; }
  #skin-app .sk-plan-price { font-size: 30px; }
  #skin-app .sk-next-actions { padding: 18px 16px; }
  #skin-app .sk-plan-comparison-table th, #skin-app .sk-plan-comparison-table td { grid-template-columns: minmax(6.5em, 32%) minmax(0, 1fr); }
  .sk-important-conditions { padding: 14px 16px 10px; }
  .sk-answer-review { padding: 20px 16px; }
  #skin-app .sk-refer-hero { padding: 20px 16px; }
}
@media (forced-colors: active) {
  #skin-app .sk-plan, #skin-app .sk-decision-summary, #skin-app .sk-qcard, #skin-app .sk-options .q-option { border: 1px solid CanvasText; }
  #skin-app .q-option.sk-selected { outline: 2px solid Highlight; }
  #skin-app .sk-action-number { border: 1px solid CanvasText; }
}

/* 市場再設計(design-brief.md §5): 専用サブセットフォント(v28)は削除済み。
   design.css の共通フォント(--font-serif / --font-sans)だけを使う。
   --font はこの画面の古いコンポーネント(.sk-action-number)がまだ参照しているため、
   別名を作らず共通トークンへ差し替えるだけにする。 */
body[data-ui-theme="clinical-learning"][data-skin-stage] {
  --font: var(--font-sans);
  --font-display: var(--font-serif);
}
/* この画面のヘッダーは下線を 1px に細くしている。差し込み前の予約(design.css の
 * #app-header:empty)は配色共通の 3px を確保するため、ここだけ実寸に合わせ直す。 */
body:has(#skin-app) #app-header:empty { border-bottom-width: 1px; }
/* 2026-09-17(v92 S-07): 480px 以下のこの画面のヘッダーは、質問チャットへの行き先
   (.hd-nav-link-cross)が 2 段目に回るぶん実寸 89px(= --header-height、v60-base.css)
   だが、差し込み前の場所取り(design.css の #app-header:empty)は全画面共通の 56px
   だった。JS がヘッダーを差し込んだ瞬間に本文が 33px 下がっていた(実測 375×667)。
   行き先を出さない院内の写し(html[data-davide-intake])と設置先の写し
   (html[data-feature-instance])はヘッダーが 1 段=56px のままなので対象から外す。
   差し込んだ後のヘッダーの高さ・見た目は変わらない(:empty の間だけ効く規則)。 */
@media (max-width: 480px) {
  html:not([data-davide-intake]):not([data-feature-instance]) body:has(#skin-app) #app-header:empty {
    min-height: var(--header-height);
  }
}
body[data-skin-stage] .app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* 2026-09-04夕方(v61 納品前検査 R2): 結果・医師相談の段は本文が .disclaimer を出すため、
   最小フッターの同義の1行は下げて、1画面に同じ注記が2本並ばないようにする。 */
body[data-skin-stage="result"] .v61-foot .sk-foot-note,
body[data-skin-stage="referral"] .v61-foot .sk-foot-note { display: none; }

/* 2026-09-04夕方(v61 納品前検査 R1): .hd-mark(英字ラベル)を隠す規則は、この画面だけの
   個別対応をやめて共有の v60-base.css `.app-header .hd-mark { display: none; }` へ
   一本化した(faq/qa/quiz/results に「FAQ」「QA」が残っていたため)。ここは擬似要素の
   飾りを止める分だけ残す。 */
body[data-skin-stage] .app-header::before,
body[data-skin-stage] .app-header::after { display: none; }
body[data-ui-theme="clinical-learning"][data-skin-stage] #app-header .app-header::before,
body[data-ui-theme="clinical-learning"][data-skin-stage] #app-header .app-header::after { content: none; display: none; }
#skin-app .sk-start::before,
#skin-app .sk-qcard::before,
#skin-app .sk-decision-summary::before { display: none; }
#skin-app .sk-start { border-radius: 12px; box-shadow: 0 1px 3px rgba(11, 23, 48, .08); }
#skin-app .sk-start h2 { max-width: 12em; text-wrap: balance; }
#skin-app .sk-start h2, #skin-app .sk-qtext,
#skin-app .sk-decision-summary h2, #skin-app .sk-course-heading h2,
#skin-app .sk-next-actions h2 { font-weight: 700; }
#skin-app .btn, #skin-app .q-option { font-weight: 700; }
#skin-app .sk-start-description { max-width: 28em; }
#skin-app .sk-visual-box { border: 0; box-shadow: none; background: var(--surface-2); }
#skin-app .sk-visual-banner-img,
#skin-app .sk-visual-box:hover .sk-visual-banner-img { transform: none; transition: none; }
#skin-app .sk-qcard { box-shadow: none; }
#skin-app .sk-progress-wrap { margin-bottom: 10px; }
#skin-app .q-progress { height: 5px; box-shadow: none; }
#skin-app .sk-scale-endpoints { border: 0; background: transparent; padding: 4px 0; }
#skin-app .sk-options { margin-top: 10px; }
#skin-app .sk-options .q-option { box-shadow: none; }
#skin-app .sk-options .q-option::before {
  content: '';
  box-sizing: border-box;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
}
#skin-app .sk-options .q-option.sk-selected::before {
  border: 5px solid var(--brand);
}
#skin-app .sk-chip-index { display: none; }
#skin-app .sk-part-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#skin-app .sk-part-grid .sk-part-choice { min-height: 108px; }
#skin-app .sk-part-grid .sk-part-choice:last-child { grid-column: auto; flex-direction: column; }
#skin-app .sk-part-choice:hover { transform: none; box-shadow: none; }
#skin-app .sk-decision-summary {
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
#skin-app .sk-decision-summary h2 { margin: 0; font-size: 21px; }
#skin-app .sk-decision-list > div { background: transparent; }
#skin-app .sk-decision-details { margin-top: 4px; }
#skin-app .sk-decision-details > summary { justify-content: flex-start; }
#skin-app .sk-course-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#skin-app .sk-course-heading h2 { margin: 0; font-size: 22px; }
.sk-clinic-name { flex-shrink: 0; color: var(--muted-strong); font-size: 13px; }
/* v63(2026-09-05夜、brief-v63.md §2-2): 院の選択は入口から結果画面のここへ移した。
   .btn/.btn.sm(44px)/.btn.ghostをそのまま使い、選択中だけghostを外して塗りにする。 */
.sk-result-clinic-switch { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 6px; }
.sk-clinic-toggle { min-width: 80px; padding-left: 12px; padding-right: 12px; }
@media (max-width: 480px) {
  #skin-app .sk-course-heading { flex-wrap: wrap; }
  .sk-result-clinic-switch { flex-basis: 100%; }
}
.sk-multiple-course-note { margin: 0; color: var(--muted-strong); font-size: 14px; line-height: 1.7; }
#skin-app .sk-plan.is-primary .sk-plan-top { background: var(--surface); }
#skin-app .sk-plan:hover { transform: none; }
#skin-app .sk-error .er-ico { display: none; }
#skin-app .sk-action-number { font-family: var(--font); }
.sk-speech-guide .sk-voice-preferences,
.sk-speech-guide > .sk-voice-playback { display: none; }
.sk-speech-guide.is-enabled .sk-voice-preferences { display: block; grid-column: 1 / -1; }
/* 2026-09-10是正: 上の .sk-voice-playback と同じ理由(#skin-speech-guide の
   display:flex が実際の配置)。summary もトグルと同じ幅いっぱいの1行になるため
   justify-content で中央へ寄せる(実測 1280: この行 x=72 w=1136 で左端寄り)。 */
.sk-voice-preferences > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.sk-speech-guide.is-enabled > .sk-voice-playback { display: flex; grid-column: 1 / -1; }
.sk-voice-playback > .btn[hidden] { display: none; }
@media (max-width: 560px) {
  #skin-app .sk-part-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #skin-app .sk-start-content { padding: 22px 18px; }
  #skin-app .sk-start h2 { max-width: 11em; font-size: 27px; line-height: 1.45; }
  #skin-app .sk-qcard { padding: 16px; }
  #skin-app .sk-options .q-option { padding: 10px 12px; }
}
@media (forced-colors: active) {
  #skin-app .sk-options .q-option::before { border-color: CanvasText; }
  #skin-app .sk-options .q-option.sk-selected::before { border-color: Highlight; }
  #skin-app .sk-chip-check { border-color: CanvasText; }
  #skin-app .chip.active .sk-chip-check { border-color: Highlight; background: Highlight; }
}

/* Keep catalog status, empty, and retry states visually anchored beside the
   selector without adding copy or changing the existing responsive columns. */
#skin-app .pb-results .pb-status {
  display: block;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
  line-height: 1.65;
}
#skin-app .pb-results .pb-status:empty { display: none; }
#skin-app .pb-results[aria-busy="true"] .pb-status {
  background: var(--surface-2);
  color: var(--muted-strong);
}
@media (max-width: 760px) {
  #skin-app .pb-results .pb-status { padding: 10px 12px; font-size: 13px; }
}

/* Illustrated entry: the actual action is answering, not a device-based scan. */
.sk-entry-stack { max-width: 800px; margin-inline: auto; }
#skin-app .sk-start-layout { display: block; min-height: 0; }
/* v61(2026-09-04夕方): 発注者「立ち絵をやめる」を受け、160px の案内役イラストを
   44px の小さな機能アイコン(voice-mascot-v19契約で img自体は残す)へ縮小した。
   吹き出し(.sk-mascot-bubble)と英字eyebrow(.sk-start-kicker)はJS側で要素ごと
   削除済み(brief-v61.md「機能的な位置に小さく1つまで」)。 */
.sk-entry-heading { --entry-art-size: 40px; display: grid; grid-template-columns: minmax(0, 1fr) var(--entry-art-size); align-items: center; gap: 14px; }
.sk-entry-heading-copy { min-width: 0; }
#skin-app .sk-entry-heading .sk-visual-box { display: grid; place-items: center; width: var(--entry-art-size); height: var(--entry-art-size); min-height: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
#skin-app .sk-entry-heading .sk-visual-banner-img { display: block; width: var(--entry-art-size); height: var(--entry-art-size); min-height: 0; object-fit: contain; background: none; }
#skin-app .sk-entry-heading .sk-visual-banner-img.is-unavailable { visibility: hidden; }
.sk-start-feedback + .sk-clinic-selector-wrap { margin-top: 0; }
@media (max-width: 560px) {
  .sk-entry-heading { gap: 10px; }
  #skin-app .sk-entry-heading h2 { font-size: 24px; line-height: 1.45; }
  #skin-app .sk-start-description { margin: 14px 0 18px; font-size: 14px; }
}

/* ── 入口: 院の選択と途中経過の再開 ───────────────────────────── */
.sk-clinic-slot { display: block; }
/* 2026-09-03: 院名簿は入口カードを描いたあとに届く。空のまま高さ 0 で置いていたため、
   届いた瞬間に下の音声案内と同意カードが 91px まとめて下がっていた
   (実測 1440px: #skin-speech-guide の y が 778 → 869、layout-shift 0.0055〜0.0723)。
   届いたあとの実測は 320〜1440px のどこでも 77〜78px で一定なので、空のあいだだけ
   その高さを先に取っておく。中身が入れば :empty が外れて実寸に戻るので、
   選択肢が増えても縮こまらない。 */
.sk-clinic-slot:empty { min-height: 77px; }
.sk-clinic-selector { margin-bottom: 14px; }
.sk-clinic-selector-label { margin: 0 0 8px; color: var(--muted-strong); font-size: 13px; font-weight: 700; line-height: 1.5; }
.sk-clinic-selector-note { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
#skin-app .sk-clinic-selector-wrap { margin-bottom: 0; }
.sk-resume {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  background: var(--brand-softer);
}
.sk-resume-lead { margin: 0; color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.6; }
.sk-resume-note { margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.65; }
.sk-resume-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.sk-resume-actions .btn { flex: 1 1 160px; min-height: 46px; font-size: 14px; }

/* ── 質問: 進行状況を数でも示す ───────────────────────────────── */
.sk-progress-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.sk-progress-count { flex-shrink: 0; color: var(--muted-strong); font-size: 13px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sk-progress-count strong { color: var(--brand); font-size: 17px; }
.sk-progress-total { color: var(--muted); }
#skin-app .sk-progress-meta .sk-section-label { min-width: 0; overflow-wrap: anywhere; }
#skin-app .sk-progress-restart { flex-shrink: 0; min-height: 44px; padding: 8px 12px; font-size: 13px; }

/* ── 結果: 判定の根拠 ─────────────────────────────────────────── */
.sk-basis { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 4px; }
.sk-basis > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; color: var(--brand); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none;
}
.sk-basis > summary::after { content: '＋'; flex-shrink: 0; }
.sk-basis[open] > summary::after { content: '−'; }
.sk-basis > summary::-webkit-details-marker { display: none; }
.sk-basis-body { display: grid; gap: 16px; padding: 4px 0 8px; }
.sk-basis-group h3 { margin: 0 0 8px; color: var(--text); font-size: 14px; line-height: 1.5; }
.sk-basis-list { display: grid; gap: 0; margin: 0; }
.sk-basis-list > div {
  /* 見出し列が狭いと「日差しでの赤みの出/やすさ」のように語の途中で折れる。
     13px の見出しが1行に収まる幅を確保する(420px以下は下の指定で1列に畳む)。 */
  display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.sk-basis-list dt { margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.6; }
.sk-basis-list dd { margin: 0; color: var(--text); font-size: 13.5px; font-weight: 700; line-height: 1.65; }
.sk-basis-note { margin: 8px 0 0; color: var(--muted-strong); font-size: 13px; line-height: 1.7; }

/* ── 結果: 受付で見せる・持ち帰る(2026-09-04夕方 v61: 「次にすること」カードへ
   畳み込んだため、独立した箱(.sk-takeaway)と見出し(-title)・リード(-lead)は
   廃止した。ボタン列(-actions)とステータス(-status)は引き続き使うので残す。 ── */
.sk-takeaway-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sk-takeaway-actions .btn { flex: 1 1 140px; min-height: 46px; font-size: 14px; }
.sk-takeaway-status { margin: 10px 0 0; color: var(--muted-strong); font-size: 13px; line-height: 1.7; }
.sk-takeaway-status:empty { display: none; }

@media (max-width: 420px) {
  .sk-resume-actions .btn, .sk-takeaway-actions .btn { flex: 1 1 100%; }
  .sk-basis-list > div { grid-template-columns: 1fr; }
}

/* ── 印刷: 受付・カウンセリングで見せる1枚に整える ─────────────── */
@media print {
  body { background: var(--surface); }
  body::before, body::after { display: none !important; }
  #app-header,
  .sk-speech-guide,
  .analytics-consent-card,
  .sk-sr-status,
  #skin-app .pb-check-back,
  #skin-app .sk-progress-restart,
  #skin-app .sk-chat-disclosure,
  #skin-app .sk-chat,
  #skin-app .sk-restart,
  #skin-app .sk-takeaway-actions,
  #skin-app .sk-takeaway-status,
  #skin-app .sk-review-all,
  #skin-app .sk-summary-edit,
  #skin-app .sk-answer-change,
  #skin-app .sk-cta-actions,
  #skin-app .sk-existing-booking,
  #skin-app .sk-home-link,
  #skin-app .sk-screen-visual,
  #skin-app .sk-result-visual,
  #skin-app .sk-refer-visual { display: none !important; }
  #skin-app .sk-print-note { display: block !important; }
  main#skin-app { max-width: none; padding: 0; }
  #skin-app .sk-result-stack,
  #skin-app .sk-referral-stack { display: block !important; }
  #skin-app .sk-result-stack > * + *,
  #skin-app .sk-referral-stack > * + * { margin-top: 10px !important; }
  #skin-app .card,
  #skin-app .sk-plan,
  #skin-app .sk-decision-summary,
  #skin-app .sk-next-actions,
  #skin-app .sk-course-unavailable {
    border: 1px solid var(--muted) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    background: var(--surface) !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #skin-app details > summary { display: none !important; }
  #skin-app details > *:not(summary) { display: block !important; }
  #skin-app details::details-content { content-visibility: visible !important; }
  #skin-app .sk-plan-comparison-table-wrap { overflow: visible !important; }
  #skin-app h2 { font-size: 15pt; }
  #skin-app h3 { font-size: 12pt; }
  #skin-app p, #skin-app li, #skin-app dd, #skin-app dt { font-size: 10.5pt; line-height: 1.6; }
  #skin-app .sk-plan-price { font-size: 20pt; }
  #skin-app a[href^="http"]::after { content: ' （' attr(href) '）'; font-size: 9pt; word-break: break-all; }
  #skin-app .fade-up { animation: none !important; }
}
.sk-print-note { display: none; margin: 0 0 10px; color: var(--muted-strong); font-size: 13px; line-height: 1.7; }

/* ── 肌相談チャット: 候補チップと入力中インジケータ ────────────── */
.sk-chat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sk-chat-chips[hidden] { display: none !important; }
.sk-chat-chips-label { flex-basis: 100%; color: var(--muted-strong); font-size: 13px; font-weight: 700; line-height: 1.5; }
#skin-app .sk-chat-chip { min-height: 44px; padding: 8px 14px; font-size: 13.5px; }
.sk-chat-bubble.is-typing { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; }
.sk-chat-typing { display: inline-flex; align-items: center; gap: 5px; }
.sk-chat-typing > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: sk-chat-typing-dot 1.1s var(--ease, ease-in-out) infinite;
}
.sk-chat-typing > span:nth-child(2) { animation-delay: .18s; }
.sk-chat-typing > span:nth-child(3) { animation-delay: .36s; }
@keyframes sk-chat-typing-dot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .sk-chat-typing > span { animation: none; opacity: .55; }
}
@media print {
  .sk-chat-chips { display: none !important; }
}

/* 開閉見出しと同じ文言をカード内で繰り返さない(読み上げ用には残す)。 */
.sk-chat-disclosure .sk-chat-head h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sk-chat-disclosure .sk-chat-intro { margin-top: 0; }

/* 印刷は1枚の持ち帰り資料として読ませる。院名・日付・注意書きを先頭に置き、
   画面用の操作余白(変更ボタンのための空き)を残さない。 */
.sk-print-title { display: none; }
/* 2026-09-04夕方(v61 リーダー判定⑤): 旧.sk-takeaway(カードとしてDOM順3番目、
   order:-1で紙の先頭へ並べ替え)を.sk-next-actionsへ統合したため、文書見出し・
   院名・日付・注記はJS側でカードの外(.sk-print-lead)へ分離した(printLeadBlock)。
   画面では常に非表示にして高さ・余白に影響させない。
   結果(通常)の .sk-result-page では patient-voice-clarity.test.js が
   「heroが配列の先頭」を固定しているため printLeadBlock は DOM順で末尾に置いた
   (順序はJS側)。印刷でだけ order:-1 で先頭へ並べ替える。医師相談優先の
   .sk-referral-page はその制約が無いため、DOM順そのまま先頭に置いてある。 */
.sk-print-lead { display: none; }
@media print {
  #skin-app .sk-print-lead { display: block; }
  #skin-app .sk-result-page { display: flex; flex-direction: column; }
  #skin-app .sk-result-page > .sk-print-lead { order: -1; }
  #skin-app .sk-result-stack,
  #skin-app .sk-referral-stack { display: flex !important; flex-direction: column; }
  #skin-app .sk-print-title { display: block !important; margin: 0 0 6px; font-size: 15pt; font-weight: 700; }
  #skin-app .sk-decision-list > div,
  #skin-app .sk-decision-list > div:has(.sk-summary-edit) {
    min-height: 0 !important;
    padding: 6px 0 !important;
  }
  #skin-app .sk-basis-list > div { padding: 5px 0 !important; }
  #skin-app .sk-decision-summary::before { display: none !important; }
}

/* 狭い画面では上下の説明を2段組にせず、語の途中で折り返さないようにする。 */
@media (max-width: 420px) {
  #skin-app .sk-scale-endpoints { grid-template-columns: 1fr; gap: 4px; }
  #skin-app .sk-scale-bottom { text-align: left; }
}

/* 匿名利用データの設定。折りたたみの見出しと同意チェックを指で押せる大きさにする。
   WCAG 2.5.8(最小24×24)を満たしつつ、他の操作と同じ44pxの下限に揃える。 */
.analytics-consent-card > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 4px;
  cursor: pointer;
}
.analytics-consent-card label.row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 0;
  cursor: pointer;
}
.analytics-consent-card label.row > span { flex: 1 1 auto; }
.analytics-consent-card label.row input[type="checkbox"] {
  flex: 0 0 auto;
  inline-size: 24px;
  block-size: 24px;
  accent-color: var(--brand);
  cursor: pointer;
}

/* 期限切れで途中経過を消したときの短い案内。警告ではないので中立の面に置く。 */
#skin-app .sk-resume-expired {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ══ 視覚検証(2026-09-02)で実測した不合格点の是正 ═══════════════════
   実測環境: Chrome 152 headless / 320・390・768・1024・1440px
   ① 音声案内の文言が 11px のまま残っていたので注記の下限(13px)に合わせる
   ② モバイルの本文(選択肢・チャット・確認事項・入口の説明)を 16px にする
   ③ 押せない状態のボタンが opacity で白文字ごと薄まり 2.17:1 だったのを是正
   ④ 印刷の地色を白に戻し、持ち帰り1〜2枚に収める
   ═════════════════════════════════════════════════════════════════ */

/* ① speech-guide.css の 11px を、この画面だけ注記の下限に合わせる。
      音声bankが無いときの1行(.is-unavailable)は画面に見えているので、
      同じ強さ(クラス4つ)で受けて後勝ちさせる。 */
.sk-speech-guide .speech-guide-status,
.sk-speech-guide .speech-guide-status.is-visible,
.sk-speech-guide.is-unavailable .speech-guide-status.is-visible { font-size: 13px; }

/* ② 本文は16px(モバイル)。選択肢・チャットの回答・確認事項は読み物なので
      二次情報(14px)や注記(13px)の段に落とさない。 */
#skin-app .sk-options .q-option { font-size: 15px; }
#skin-app .sk-chat-bubble { font-size: 15px; }
#skin-app .sk-cautions li,
#skin-app .sk-type-desc { font-size: 15px; }
@media (max-width: 560px) {
  #skin-app .sk-options .q-option { font-size: 16px; line-height: 1.5; }
  #skin-app .sk-chat-bubble { font-size: 16px; }
  #skin-app .sk-cautions li,
  #skin-app .sk-type-desc { font-size: 16px; }
  #skin-app .sk-start-description { font-size: 16px; }
}

/* ③ 押せない状態の是正は design.css の .btn:disabled 一群へ統合した(全画面共通・実測 6.25:1)。
      ここでの個別上書きは同じ値の重複だったため削除。 */

/* ④ 印刷: ステージ別の地色より後に、同じ強さで白へ戻す。 */
@media print {
  body[data-ui-theme="clinical-learning"][data-skin-stage] {
    background: var(--surface);
    background-image: none;
  }
  /* 持ち帰り用紙に必要なのは、料金の条件・リスク・注意書き・確認事項。
     画面で開ける根拠の内訳と流れ図・肌タイプの図版は紙から外し、A4 2枚に収める。 */
  #skin-app .sk-basis,
  #skin-app .sk-consultation-flow,
  #skin-app .sk-result-hero { display: none !important; }
}

/* ══ v49 (2026-09-03): 紺+金の質感・階層・動き ══════════════════════════
   基準は国内メンズ医療脱毛の上位3社と国内デザインギャラリーの医療・美容事例。
   情報は増やさず、面の質感／階層／余白／動きだけを上げる。
   動きは transform と opacity だけを使う(レイアウトを動かさないので CLS は増えない)。
   地の重ね色はすべて「明るくする」方向に統一し、文字のコントラストが
   重なりで下がらないようにしてある(実測は下の各節のコメント)。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 地の面 ─────────────────────────────────────────────────────────
   市場再設計(design-brief.md §5・§7): 地の質感(ラジアル・22pxの点)は撤去。
   面は白・cream・紺の3面だけにする(共通の淡い地は design.css 側が持つ)。
   .page-banner(見出し帯の写真・紺スクリム)は index.html から撤去済みで
   .sk-photo-band に置き換えたため、ここの関連ルールも削除した。 */

/* ── 3. 列を1本に揃える ────────────────────────────────────────────────
   2026-09-04是正: 入口カードの幅は --page-max(ヘッダーと共用)ではなく
   .sk-entry-stack 自身の max-width(下で指定)で作る。 */

/* ── 4. 入口: 文と案内役を左右に組む ──────────────────────────────────── */
#skin-app .sk-start { box-shadow: 0 2px 8px rgba(13, 27, 54, .07); }
/* 案内役の後ろの光。淡い青一色だと白いカードの上で灰色の円に見えたので、
   紺と金の配色に合わせて金→紺→透明の3段にする(円の縁は出さない)。 */
#skin-app .sk-entry-heading .sk-visual-box {
  background: radial-gradient(circle at 50% 58%, rgba(247, 241, 228, .92) 0%, rgba(233, 238, 248, .62) 44%, rgba(233, 238, 248, 0) 72%);
  border-radius: 50%;
}
@media (min-width: 761px) {
  #skin-app .sk-start-content { position: relative; padding-right: 268px; }
  #skin-app .sk-entry-heading { display: block; }
  #skin-app .sk-entry-heading .sk-visual-box {
    position: absolute;
    top: 50%;
    right: 26px;
    width: 208px;
    height: 208px;
    transform: translateY(-50%);
  }
  #skin-app .sk-entry-heading .sk-visual-banner-img { width: 208px; height: 208px; }
  #skin-app .sk-start h2 { max-width: 14em; }
  #skin-app .sk-start-description { max-width: 30em; }
}

/* ── 5. 小見出しに金の細線を1本 ────────────────────────────────────────
   金は面や文字に使うとコントラストが落ちる。線としてだけ使う。 */
#skin-app .sk-start-kicker,
#skin-app .sk-decision-kicker,
#skin-app .sk-cta-kicker,
#skin-app .sk-course-heading .section-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
#skin-app .sk-start-kicker::before,
#skin-app .sk-decision-kicker::before,
#skin-app .sk-cta-kicker::before,
#skin-app .sk-course-heading .section-label::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

/* ── 6. 面の分離 ───────────────────────────────────────────────────────
   地に色が付いたぶん、白い面は影で浮かせる。境界線だけだと沈んで見える。 */
#skin-app .sk-qcard,
#skin-app .sk-next-actions,
#skin-app .sk-takeaway,
#skin-app .sk-plan,
#skin-app .sk-other-plans,
#skin-app .sk-result-details,
#skin-app .sk-chat-disclosure,
#skin-app .sk-plan-comparison,
#skin-app .sk-answer-review {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(13, 27, 54, .07);
}

/* ── 7. 結果の起点をカードにする ────────────────────────────────────────
   「あなたが選んだ内容」が地に直接置かれ、結果画面に視線の起点が無かった。 */
#skin-app .sk-decision-summary {
  position: relative;
  overflow: hidden;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(13, 27, 54, .07);
}
#skin-app .sk-decision-summary::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--navy-500) 52%, var(--accent) 100%);
}
#skin-app .sk-decision-summary h2 { font-size: 23px; }
#skin-app .sk-course-heading h2 { font-size: 20px; }
#skin-app .sk-plan-name { font-size: 18px; }

/* ── 8. 進行の帯 ───────────────────────────────────────────────────────
   薄い線で、どこまで進んだかが遠目に読めなかった。 */
#skin-app .q-progress {
  height: 6px;
  background: var(--surface-3);
  box-shadow: inset 0 1px 2px rgba(13, 27, 54, .07);
}
#skin-app .q-progress > div {
  background: linear-gradient(90deg, var(--brand) 0%, var(--navy-500) 62%, var(--accent) 100%);
  box-shadow: none;
  transition: width .42s var(--ease);
}

/* ── 9. 選択肢の手触り ─────────────────────────────────────────────────
   押した瞬間の返事が無かった。位置は動かさず(行が跳ねる)、枠・地・丸だけ動かす。 */
#skin-app .sk-options .q-option {
  transition:
    border-color .18s var(--ease),
    background-color .18s var(--ease),
    box-shadow .18s var(--ease),
    transform .12s var(--ease);
}
/* v82(2a): 実際に効いている側(#skin-appの詳細度が126行目の素のセレクタに勝つ)。
   ここのbackgroundが選択中(下の.sk-selected)と同じ--brand-softerだったのが
   発注者指摘の直接原因。hover専用メディアクエリで囲み、backgroundは変えない。 */
@media (hover: hover) and (pointer: fine) {
  #skin-app .sk-options .q-option:hover {
    transform: none;
    border-color: var(--navy-400);
  }
}
#skin-app .sk-options .q-option:active { transform: scale(.994); }
#skin-app .sk-options .q-option::before {
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
#skin-app .sk-options .q-option.sk-selected {
  border-color: var(--brand);
  background: var(--brand-softer);
}
#skin-app .sk-options .q-option.sk-selected::before {
  border: 1.5px solid var(--brand);
  box-shadow: inset 0 0 0 4px var(--brand);
}
#skin-app .sk-part-choice { transition: border-color .18s var(--ease), background-color .18s var(--ease); }
#skin-app .sk-part-choice:active { transform: scale(.994); }

/* 入口カードは白い面。design.css の暗い面向けフォーカス(白いアウトライン)が
   .surface-hero 経由で当たっていたので、明るい面用に戻す。 */
#skin-app .sk-start :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-electric);
  outline-offset: 3px;
  box-shadow: none;
}

/* ── 10. 画面の切り替え ────────────────────────────────────────────────
   設問は 240ms で入る。カードだけを動かし、進行の帯と見出しは動かさない。 */
/* 2026-09-15: fill-mode を both→backwards に(実測: bothは完了後もfinished状態で
   document.getAnimations()に残り続けるため。to側の見た目は既定値と同じなので
   forwardsを外しても表示は変わらない)。8px 上限に合わせ 9px→8px。 */
#skin-app .sk-qcard { animation: sk-q-in .24s var(--ease) backwards; }
@keyframes sk-q-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* 結果は 結果 → プラン → 次の行動 の順に 90ms ずつずらして出す。
   2026-09-15: 250ms/8px 上限に合わせ .32s→.22s(keyframes側は下)。 */
#skin-app .sk-result-stack > *,
#skin-app .sk-referral-stack > * { animation: sk-rise .22s var(--ease) backwards; }
#skin-app .sk-result-stack > *:nth-child(1),
#skin-app .sk-referral-stack > *:nth-child(1) { animation-delay: .02s; }
#skin-app .sk-result-stack > *:nth-child(2),
#skin-app .sk-referral-stack > *:nth-child(2) { animation-delay: .11s; }
#skin-app .sk-result-stack > *:nth-child(3),
#skin-app .sk-referral-stack > *:nth-child(3) { animation-delay: .20s; }
#skin-app .sk-result-stack > *:nth-child(4),
#skin-app .sk-referral-stack > *:nth-child(4) { animation-delay: .29s; }
#skin-app .sk-result-stack > *:nth-child(5),
#skin-app .sk-referral-stack > *:nth-child(5) { animation-delay: .38s; }
#skin-app .sk-result-stack > *:nth-child(n + 6),
#skin-app .sk-referral-stack > *:nth-child(n + 6) { animation-delay: .45s; }
/* 2026-09-15: 8px 上限に合わせ 10px→8px。 */
@keyframes sk-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ── 11. 案内役 ────────────────────────────────────────────────────────
   2026-09-15(発注者「なぞのアニメーション…意味が分からない」): 入口の登場ポップ+
   無限の上下(sk-mascot-in・sk-mascot-idle)と、結果到着時の1回反応(sk-mascot-react)
   を削除。案内役は最初から静止した絵として表示する。 */

/* ── 12. 動きを止める設定 ──────────────────────────────────────────────
   design.css の全体指定に加えて、この画面の動きを名指しで止める。 */
@media (prefers-reduced-motion: reduce) {
  #skin-app .sk-qcard,
  #skin-app .sk-result-stack > *,
  #skin-app .sk-referral-stack > *,
  #skin-app .sk-entry-heading .sk-visual-banner-img,
  .sk-speech-guide .speech-guide-mascot img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .sk-speech-guide .speech-guide-mascot img { transform: translateY(3px) !important; }
  #skin-app .sk-options .q-option,
  #skin-app .sk-part-choice,
  #skin-app .q-progress > div { transition: none !important; }
}

/* ── 13. 紙 ────────────────────────────────────────────────────────────
   紙では動きも影も出さない。 */
@media print {
  #skin-app .sk-qcard,
  #skin-app .sk-result-stack > *,
  #skin-app .sk-referral-stack > *,
  #skin-app .sk-entry-heading .sk-visual-banner-img,
  .sk-speech-guide .speech-guide-mascot img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #skin-app .sk-decision-summary,
  #skin-app .sk-qcard,
  #skin-app .sk-plan { box-shadow: none !important; }
}

/* ── 14. v49 の実測後の是正 ────────────────────────────────────────────
   1440/1024 の結果画面で、左列(料金と適用条件)だけが地の上の裸のテキストで、
   右列の白いカードと釣り合っていなかった。リスクの本文を面に載せて列を揃える。
   見出しは h2(20px) > h3(16px) の差を付け、同じ大きさで2段並ばないようにする。 */
#skin-app .sk-treatment-risk {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: none;
}
#skin-app .sk-treatment-risk h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}
#skin-app .sk-treatment-risk p { margin: 0; font-size: 14px; line-height: 1.75; }
#skin-app .sk-treatment-risk p + p { margin-top: 8px; }

/* 進行の帯: 金は「今いる位置」の先端だけに置く。
   帯の伸縮に合わせて金の面積が変わらないよう、地の勾配ではなく先端の内側影で描く。 */
#skin-app .q-progress > div {
  background: linear-gradient(90deg, var(--brand), var(--navy-500));
  box-shadow: inset -3px 0 0 var(--accent);
}

/* 「最初から」は破棄の操作。同じ強さの枠で「戻る」と並ぶと、押し間違えを誘う。
   触れる大きさ(44px)は保ったまま、面と枠を外して三番手の見え方にする。 */
#skin-app .sk-progress-restart {
  border-color: transparent;
  background: transparent;
  color: var(--muted-strong);
}
#skin-app .sk-progress-restart:hover {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--text);
}

/* 紙では新しく足した面の影も出さない。 */
@media print {
  #skin-app .sk-treatment-risk { box-shadow: none !important; border-radius: 6px !important; }
}

/* 2026-09-04夕方(v61 リーダー判定⑤): プランカードの下に置く医療リスク開示の
   注記。旧.sk-treatment-risk(見出し付き・箱・16px)はrenderCourseUnavailable
   がまだ使うため変えない。font-size は下の「注記(small 13px)」除外リストで
   決まる(この場所で書いても2265行台の :is(p, ...) 16px規則に specificity
   同点・後着で負けるため、あちらへ足す方式にした)。 */
#skin-app .sk-plan-risk-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted-strong);
  line-height: 1.75;
}


/* ── 15. 読み込み時のずれ(CLS)を止める ────────────────────────────────
   ヘッダーと本文はJSが後から差し込む。差し込む前の高さが0だったため、
   初回表示で下の要素が2回まとめて動いていた(実測 CLS 0.555 / shift 2件)。
   先に高さだけ確保しておけば、同じ見た目のままずれが消える。 */
/* ヘッダーの高さ予約は design.css へ移した(全画面共通。480px以下の58pxも含む)。 */
#skin-app:empty { min-height: 62vh; }
/* 2026-09-17(v92 S-07): 上の 62vh は「まだ空の間」だけの場所取りで、skin.js が
   入口の枠を入れた直後は中身が実測 173px しかなく(375×667 Fast 3G)、そこから
   設問 1 問目(実測 766px)へ伸びるまでの間に下の音声案内の帯と最小フッターが
   2 回動いていた(CLS 0.37〜0.40)。読み込みが終わるまで(空 + aria-busy="true")は
   初期表示 1 画面ぶんの高さを取り、帯とフッターを最初から画面の外に置く。
   設問が入ると aria-busy が "false" になってこの規則は外れるので、落ち着いた後の
   高さ・座標は 1px も変わらない(設問 1 問目の実寸は 375 で 766/931・768 で 752/766・
   1280 で 750/773 と、どれも下の上限 700px より大きい)。
   上限 700px は、1024px の高い画面で「1 画面ぶん」を取ると実寸より高くなり、
   今度は逆向きに動いてしまうため。scripting: enabled は「JavaScript が動く時だけ」の
   意味で、JS 無効の環境では上の 62vh のままにする(空の白い面を広げない)。
   院内の写し(html[data-davide-intake])はこの便の対象外なので触らない。 */
@media (scripting: enabled) {
  html:not([data-davide-intake]) #skin-app:empty,
  html:not([data-davide-intake]) #skin-app[aria-busy="true"] {
    min-height: min(700px, calc(100vh - var(--header-height)));
  }
}

/* ── 16. 紙の地色 ─────────────────────────────────────────────────────
   §1 で地色を後から定義したため、上にあった印刷用の白戻しに勝ってしまい、
   印刷プレビューの地が rgb(231,235,244) のままだった(実測)。ここで白に戻す。 */
@media print {
  body[data-ui-theme="clinical-learning"][data-skin-stage] {
    background: var(--surface) !important;
    background-image: none !important;
  }
}

/* ── 17. 狭い画面の文字サイズを取り戻す ────────────────────────────────
   §7・§14 で足した素のルールが、上にある 560px 以下の指定に後から勝ってしまう
   (同じ強さなら後勝ち)。狭い画面の値をこの位置で置き直す。
   リスク本文の 16px は 2026-09-02 の読みやすさ是正で決めた下限。 */
@media (max-width: 560px) {
  #skin-app .sk-decision-summary h2 { font-size: 19px; }
  #skin-app .sk-course-heading h2 { font-size: 19px; }
  #skin-app .sk-plan-name { font-size: 16px; }
  #skin-app .sk-treatment-risk p { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
 * v61 最小化(2026-09-04 夕方): 発注者却下(「無駄しかない」「2枚目の場所いらない」)
 * を受け、v60 の紺フルブリード・ヒーロー(英字eyebrow・巨大見出し・チップ・
 * マスコット overhang・吹き出し)を撤去した(brief-v61.md §1/§3)。入口は
 * era1(42-84行)/era2(1105-1118行)/era3(1420-1443行)の素の compact card
 * 表示に戻る(白/creamの淡いグラデ・細い上辺のみ・通常サイズの見出し)。
 * .sk-start-layout の grid-template-columns 契約(davide-skin-v26.test.js)は
 * era2(1107行)がすでに満たすため、ここでの重複宣言は削除した。 ══════════ */


/* v61: マスコットの overhang を撤去したため、突き上げ用の 60px は不要になった
   (旧: マスコットの張り出し分だけ間隔を空けていた)。一般原則の32〜48pxへ。 */
.sk-entry-footnote {
  max-width: 640px;
  margin: 32px auto 0;
  padding: 0 24px 8px;
  text-align: center;
}
/* design-brief.md §4-2/§9: 注意文は黄色い箱をやめ、白/cream面の
   .v60-small(13px・--ink-2)相当のただの1行にする。 */
.sk-entry-footnote .sk-start-disclaimer {
  margin: 0 auto; padding: 0; border: 0; background: none; max-width: 40em;
  text-align: center; color: var(--ink-2); font-size: 13px; line-height: 1.6;
}

/* 2026-09-04夕方(v61 リーダー判定①): 全幅cream帯「来院前に整理しておくこと」
   (見出し帯の写真+文章+箇条書き、design-brief.md §7)を index.html から撤去した
   ため、.sk-photo-band* のCSS一式(旧40〜60行分)もここで削除した。 */

/* ── 設問: 中央 720px・金の帯(design-brief.md §4-2) ────────────────── */
.sk-question-shell { max-width: 720px; margin: 0 auto; }
#skin-app .q-progress {
  height: 4px;
  background: var(--navy-100);
  box-shadow: none;
}
#skin-app .q-progress > div {
  width: 100%;
  transform-origin: 0 50%;
  background: var(--gold-line);
  box-shadow: none;
  transition: transform .42s var(--ease-out, var(--ease));
}
#skin-app .sk-options .q-option { min-height: 56px; }
@media (max-width: 560px) {
  #skin-app .sk-options .q-option { min-height: 52px; }
}

/* ── 結果(通常・医師相談優先): 紺の帯・full-bleed・マスコットoverhangは
   v61で全廃した(下の「v61 最小化」章に統一の上書きがある)。旧宣言(白文字
   color:#fff等)を残すと、静的コントラスト検査(ui-readability-contract.test.js)
   が「地色は白なのに白文字」を実際に検出してしまうため、このブロックごと削除
   した(2026-09-04夕方 検査是正、brief-v61.md §3)。 */

/* ── 末尾: 匿名データ設定は畳んだ状態を小さな1行に(design-brief.md §9推奨) ──
   幅は自前で持たない。HTML側で class="container card analytics-consent-card" と
   なっており、.container が既に max-width: var(--page-max); margin: 0 auto を
   持つ(design.css)。ここで max-width を書き直すと「本文幅は --page-max だけで
   決める」契約(ui-readability-contract.test.js)に触れるため、padding だけ上書きする。 */
.analytics-consent-card {
  border: 0; background: none; box-shadow: none; padding: 0 var(--gutter-sp) 24px;
}
.analytics-consent-card > summary {
  color: var(--ink-2); font-size: 13px; font-weight: 700;
}
.analytics-consent-card[open] {
  border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper);
  padding: 12px var(--gutter-sp) 18px; box-shadow: 0 1px 3px rgba(11, 23, 48, .06);
}

/* ── 結果: 肌タイプの内訳(2026-09-04裁定でdetails内へ移動、白地) ────── */
.sk-type-detail { padding-top: 4px; }
.sk-type-detail-label {
  margin: 0 0 10px; color: var(--muted-strong); font-size: 13px; font-weight: 800; letter-spacing: .06em;
}
.sk-type-detail .sk-result-visual {
  display: block; width: 84px; margin: 0 auto 10px; color: var(--brand); opacity: .55;
}

/* ── 設問: 二重箱(進捗の枠+設問の枠)を解消(座長裁定2026-09-04) ──────────
   参照: public/qa/qa.css .qa-qcard(同じ指摘をQA出題画面で先に直した実装)。
   設問カードは地色・枠・影を持たない1枚の面にし、720幅の列に文字だけを置く。 */
#skin-app .sk-qcard {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
#skin-app .sk-qtext {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.01em;
}
/* 「‹ 戻る」は最上位の操作ではないので、枠付きボタンではなく文字ボタンにする
   (「最初から」= .sk-progress-restart と同じ扱い、隣で同格の枠が2つ並ぶのを防ぐ)。 */
#skin-app .sk-qhead > .btn.ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--muted-strong);
}
#skin-app .sk-qhead > .btn.ghost:hover {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════════════
 * v60 納品前検査の是正(2026-09-04、独立検査役)
 * 実測で design-brief.md §3-2/§3-3/§3-4/§8/§10 に届いていなかった点だけを直す。
 * 共通ファイル(design.css / v60-base.css)は触らず、#skin-app と skin 固有の
 * クラスの中で上書きする。ファイル末尾に置いて確実に後勝ちさせる。
 * ══════════════════════════════════════════════════════════════════════ */

/* ── (1) 余白 ────────────────────────────────────────────────────────── */
/* 設問画面が画面端に密着していた(実測 390px で h2・選択肢とも x=0 / w=390)。
   紺のフルブリード面を持たない設問だけに左右ガターを入れる(--gutter-sp=20px)。
   981px 以上は 720px の列が中央に立つので padding は不要。 */
.sk-question-shell { padding-left: var(--gutter-sp); padding-right: var(--gutter-sp); }
@media (min-width: 981px) {
  .sk-question-shell { padding-left: 0; padding-right: 0; }
}
/* 音声案内の帯と匿名データの帯は .container 由来の 15〜16px ガターのままで、
   本文(x=72)より 16px 内側にずれていた。幅は --page-max に任せ padding だけ揃える
   (ui-readability-contract「幅は --page-max だけで決める」に触れない)。
   cream 面 → 音声帯は実測 8px、匿名データ → フッターは 0px しか空いていなかった。 */
.sk-speech-guide,
.sk-speech-guide:not(.is-enabled) {
  margin-top: 48px;
  padding-left: var(--gutter-sp);
  padding-right: var(--gutter-sp);
}
/* v61(2026-09-04夕方): 本文から最小フッター直前の隠れた位置へ移したため、
   旧64pxの「広い空白」(発注者指摘)はもう作らない。フッターの罫線(.v61-foot::before)
   だけで区切りは十分つく。 */
.analytics-consent-card { padding: 0 var(--gutter-sp) 24px; margin-bottom: 8px; }
.analytics-consent-card[open] { padding: 12px var(--gutter-sp) 18px; }
@media (min-width: 981px) {
  .sk-speech-guide,
  .sk-speech-guide:not(.is-enabled) { padding-left: var(--gutter); padding-right: var(--gutter); }
  .analytics-consent-card { padding: 0 var(--gutter) 24px; }
  .analytics-consent-card[open] { padding: 12px var(--gutter) 18px; }
}

/* ── (3) 角丸は 0 / 12px / 999px の3種だけにする(design-brief §3-4) ──── */
/* 実測(結果画面)で 8px×4・9px×5・10px×11・16px×1・50%×2・非対称1 が出ていた。
   出どころは design.css の .btn(--radius-sm) と .card(--radius:16px)。共通側は
   触らず、この画面の中だけで正す。 */
#skin-app .btn,
#skin-app .chip { border-radius: var(--r-pill); }
#skin-app .card,
#skin-app textarea,
#skin-app input,
#skin-app select,
#skin-app .sk-chat-log,
#skin-app .sk-chat-bubble,
#skin-app .sk-chat-bubble.assistant,
#skin-app .sk-options .q-option { border-radius: var(--r-card); }
#skin-app .sk-action-number,
#skin-app .sk-type-ring,
#skin-app .sk-fitz-pin { border-radius: var(--r-pill); }

/* 影は既定なし(design-brief §3-4「使うのは浮遊CTAとSP固定バーの2箇所だけ」)。
   フォーカスリングは動きではないので :focus-visible は除外する。 */
#skin-app .card,
#skin-app section,
#skin-app article,
#skin-app details,
#skin-app .sk-chat-bubble,
#skin-app .sk-type-ring,
#skin-app .sk-fitz-track,
#skin-app .sk-fitz-pin { box-shadow: none; }
#skin-app .btn:not(:focus-visible),
#skin-app .chip:not(:focus-visible),
#skin-app textarea:not(:focus-visible),
#skin-app input:not(:focus-visible),
#skin-app select:not(:focus-visible) { box-shadow: none; }

/* ── (4) 本文は 16px 以上。13px はラベルと注記だけ(design-brief §3-2/§9-4) ── */
#skin-app .sk-treatment-risk p { font-size: 16px; }
body[data-skin-stage="result"] #skin-app :is(p, li, dd, summary, h3, .btn, .yen,
  .sk-action-copy strong, .sk-action-copy span, .sk-existing-booking,
  .sk-cost-check-note, .sk-official-price-link) {
  font-size: 16px;
}
/* ラベル(§3-2 label 12〜13px)と注記(small 13px)はそのまま小さく残す。
   2026-09-04夕方(v61 リーダー判定⑤): .sk-plan-risk-note(プランカード下へ
   移した医療リスク開示、旧.sk-treatment-risk pは16px本文だった)を追加。
   ここに入れないと上の :is(p, ...) の16px規則が(同じ specificity で後着のため)勝つ。 */
body[data-skin-stage="result"] #skin-app :is(.sk-result-eyebrow, .sk-clinic-name,
  .sk-total-label, .sk-plan-price-label, .sk-action-number, dt, .disclaimer,
  .sk-cta-external-note, .voice-credit, .sk-plan-risk-note) {
  font-size: 13px;
}
@media (max-width: 560px) {
  #skin-app .sk-start.surface-hero .sk-start-description { font-size: 16px; }
  #skin-app .sk-result-hero .sk-result-summary { font-size: 16px; }
}

/* ── (5) SP 固定バーの「機能一覧」を 44px の当たり判定にする ──────────── */
.sk-fixed-home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 8px;
  color: var(--navy-700);
  font-size: 14px;
  font-weight: 700;
}

/* ── JS 無効時の1行案内(#skin-app が空のまま白紙になるため) ───────────── */
.sk-noscript { margin: 40px auto; text-align: center; }

/* (3 続き) 上の「6. 面の分離」(#skin-app .sk-next-actions ほか)と
   「7. 結果の起点」の影は、クラス指定なので要素セレクタでは上書きできない。
   同じ強さのクラス指定で消す(design-brief §3-4「カードは影ではなく 1px line
   か地色差で区切る」。枠線は残すので面の分離は保たれる)。 */
#skin-app .sk-qcard,
#skin-app .sk-next-actions,
#skin-app .sk-takeaway,
#skin-app .sk-plan,
#skin-app .sk-other-plans,
#skin-app .sk-result-details,
#skin-app .sk-chat-disclosure,
#skin-app .sk-plan-comparison,
#skin-app .sk-answer-review,
#skin-app .sk-decision-summary { box-shadow: none; }

/* (4 続き) 主導線のボタンは本文と同じ 16px(§3-2 primary は 16px w700)。 */
#skin-app .sk-next-actions .sk-cta-actions .btn { font-size: 16px; }
/* チップは §3-5 の 14px w700 に揃える(13.5px の端数をやめる)。 */
#skin-app .sk-chat-chip { font-size: 14px; }
/* 案内役アイコンの箱の影も外す(§3-4)。speech-guide.css は共有ファイルなので
   この画面のスコープだけで打ち消す。 */
.sk-speech-guide .speech-guide-mascot,
.sk-speech-guide:not(.is-enabled) .speech-guide-mascot { box-shadow: none; }
/* (4 続き) 選択肢は design-brief §3-2 の body(PC 16px)。1129/1702 行の 15px は
   狭い画面用(1707 行)の 16px より広い画面で小さくなる逆転を起こしていた。 */
#skin-app .sk-options .q-option { font-size: 16px; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════════
 * v61 最小化(2026-09-04夕方): 発注者却下(「無駄しかない」「わかりずらい」)
 * を受けた縮小(brief-v61.md §3)。ファイル末尾に置き、同じ強さの上書きより
 * 後に読ませて確実に勝たせる(既存の書き方を踏襲)。クラス名・id・
 * voice-bank.js/motion.js の結線は一切変えず、見た目だけを畳む。
 * ══════════════════════════════════════════════════════════════════════ */

/* ── 音声案内: マスコット+説明文+オンボタン+クレジットの帯を、
   アイコン付きの小さなトグル1個+同じ行の小さなクレジットへ畳む。
   #skin-speech-guide のID指定で :not(.is-enabled) を含む既存grid規則より
   確実に勝たせる(44pxグリッド契約=davide-skin-v26.test.jsは元の宣言を
   残しているため無傷)。.voice-credit は不可視化(非表示・opacity 0 等)しない
   契約を保つ(voice-credit-visibility.test.js)。 */
#skin-speech-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 2026-09-04夕方(v61 納品前検査 R6): flex-start だとこの行だけがコンテナ(1200px)の
     左端から始まり、中央寄せの入口カード(800px)より 200px 外側に出ていた
     (実測 1920: 行 x=360 / カード x=560 / 最初の子 x=392)。中央へ寄せて、
     カードと最小フッターと同じ中心線に乗せる。 */
  justify-content: center;
  column-gap: 10px;
  row-gap: 4px;
}
#skin-speech-guide .speech-guide-role { display: none; }
#skin-speech-guide .speech-guide-mascot {
  width: 28px; height: 28px; min-width: 0; border-radius: 8px; flex: 0 0 auto;
}
#skin-speech-guide .speech-guide-mascot img { width: 20px; height: 30px; }
#skin-speech-guide .speech-guide-toggle {
  flex: 0 0 auto; width: auto; min-height: 44px; padding: 8px 14px;
}
#skin-speech-guide .voice-credit { flex: 0 0 auto; margin: 0; }
#skin-speech-guide .sk-voice-playback,
#skin-speech-guide .sk-voice-preferences,
#skin-speech-guide .speech-guide-status.is-visible { flex-basis: 100%; }

/* ── 結果(通常): 紺のフルブリード帯・英字eyebrow「RESULT」を撤去し、
   見出し+マスコット小(合否/タイプの印として残す。brief-v61.md「小さく1つ」)
   +本文の並びに戻す。 */
#skin-app .sk-result-hero {
  position: relative;
  overflow: visible;
  margin: 24px 0 20px;
  padding: 0;
  /* 2026-09-04夕方(v61 リーダー判定⑤、1280×800実測): hero は .sk-result-stack の
     兄弟として本文の外に出ている(1126行台のコメント参照)。.sk-result-stack 自身は
     max-width:var(--container)+padding-inline:var(--gutter) を持つが、hero には
     この器の余白が無く x=0(viewport端)に張り付いていた。同じ器の値を明示して
     「料金と適用条件」の左端(x=72px相当)に揃える。 */
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  border: 0;
  border-radius: 0;
  /* background: none だと静的コントラスト検査(ui-readability-contract.test.js)が
     旧・紺背景の記録を消せず「紺地に紺文字」と誤検出したため、実際の地色
     (--paper=#fff、body:has(#skin-app)と同じ)を明示する(2026-09-04夕方 検査是正)。 */
  background: var(--paper);
  color: var(--text);
  box-shadow: none;
  min-height: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  text-align: left;
}
#skin-app .sk-result-hero .sk-result-eyebrow { display: none; }
#skin-app .sk-result-hero .sk-result-label {
  order: 1;
  margin: 0; font-family: var(--font-serif); font-weight: 700; color: var(--text);
  font-size: clamp(21px, 2.4vw, 26px); line-height: 1.3; text-transform: none;
  letter-spacing: 0; text-align: left; max-width: none;
}
#skin-app .sk-result-mascot {
  order: 2;
  position: static;
  display: block; width: var(--size, 96px); height: var(--size, 96px); margin: 0; object-fit: contain;
  transform: none; filter: none;
  /* 2026-09-05夜(v62、brief-v62.md §3 S行): 発注者「画像が少ない・動きが無い」を受け、
     44px に縮めていたアイコンを共有部品 .v62-mascot(96px、読み込み時に浮かび上がり
     +呼吸するアニメーション)へ差し替える。旧コメントにあった「fill-mode both の
     最終値が残る」問題は sk-result-mascot-in という別の古いキーフレーム(現在は
     このファイルのどこにも存在しない)の話で、v60-mascot-in/v60-breathe には
     該当しないため animation:none による打ち消しは不要になった。 */
}
#skin-app .sk-result-hero .sk-result-summary {
  order: 3;
  flex-basis: 100%;
  margin: 4px 0 0; max-width: 42em; color: var(--muted-strong);
  font-size: 15px; line-height: 1.7;
}
/* v74: 続く説明文が何について書かれているか(肌タイプの目安)を、1 行目に出す。 */
#skin-app .sk-result-hero .sk-result-type-inline {
  display: block; margin-bottom: 2px; color: var(--navy-800); font-size: 16px; font-weight: 800;
}
/* 旧箱型ヒーロー(172/419行)の ::after が紺・金の放射グラデーションの飾りを
   88% 0%(右上)に描いていた。overflow:hidden の箱を撤去した後もこの疑似要素だけは
   残り、右上に薄いグレーの帯として見えるバグになっていた(Playwrightで実測して発見)。
   content:none で疑似要素自体を消す。 */
#skin-app .sk-result-hero::after { content: none; }
.sk-result-hero + .sk-result-stack { margin-top: 24px; }
@media (max-width: 760px) {
  #skin-app .sk-result-hero { padding-inline: var(--gutter-sp); }
}
@media (min-width: 981px) {
  /* 2026-09-04夕方(v61 リーダー判定⑤): 旧 padding-right:0 は「右端に大きなマスコットを
     突き当てる」旧レイアウト時代の名残で、現行(order:2で見出しの右に小さく並ぶだけ)
     には不要どころか、上で揃えた左右対称の padding-inline を崩し右だけ0に戻して
     いた(下の.sk-result-stackは左右ともvar(--gutter))ため削除する。 */
  #skin-app .sk-result-hero .sk-result-summary { max-width: 42em; font-size: 15px; }
  /* v62: 96px は全幅で共通(brief-v62.md はPC/SPを分けていない)。旧48px縮小は削除。 */
}

/* ── 結果(医師相談優先): 紺の帯・英字eyebrowを撤去し、本文と同じ地に戻す。
   画像は契約(skin-provisional-plan.test.js)により追加しない。既存の
   .sk-refer-visual(支援技術向け補助視覚)はそのまま残す。 */
#skin-app .sk-refer-hero {
  position: relative;
  border: 0;
  border-radius: 0;
  /* background: var(--paper) にする理由は .sk-result-hero と同じ(上のコメント参照)。 */
  background: var(--paper);
  color: var(--text);
  box-shadow: none;
  /* v75(2026-09-09、検査 I2 の実測): padding:0 のままだと、外側の .sk-referral-stack にも
     器の余白が無いため、375px でも 1280px でも見出しと本文が画面の左端(x=0)に張り付く
     (実測: 見出しの左端 0px、下のカードの本文は 20〜24px)。v71 の「画面のずれ」の指摘の
     範囲として、悩み型(.sk-concern-page)で足したのと同じ値の左右余白をダビデ側にも
     そろえる。上下の余白と背景・影は変えない。
     2026-09-13(v79、D-04): その左右余白は外側の .sk-referral-stack が器として持つように
     したので、ここでは 0 に戻す(器と二重に効くと見出しだけが内側へ寄る)。 */
  padding: 0;
  margin: 24px 0 20px;
  text-align: left;
  min-height: 0;
  display: block;
}
#skin-app .sk-refer-hero .sk-result-eyebrow { display: none; }
#skin-app .sk-refer-hero h2 {
  margin: 0 0 8px; font-family: var(--font-serif); font-weight: 700; color: var(--text);
  font-size: clamp(21px, 2.4vw, 26px); line-height: 1.3; text-transform: none; letter-spacing: 0;
}
#skin-app .sk-refer-hero p { color: var(--muted-strong); max-width: 42em; }

/* ── 入口の案内役アイコン: 上の「v27 是正」章(1739-1961行)が円形背景・761px以上で
   208px absolute・idleアニメを与えていた(旧: 右列に大きく立つ演出)。v61は
   40px の機能アイコンに統一するため、ここで無条件に打ち消す(全幅で同じ大きさ)。
   2026-09-04夕方(v61 リーダー判定④): 枠付きの小さな箱に見えていたのは、基底の
   .sk-visual-box(50行, border+box-shadow)と era1420行台(border:1px)が
   このセレクタより弱い/先の位置ながら border-radius:10px/background:#fff だけを
   打ち消せておらず box-shadow は一度も上書きしていなかったため。枠(border・
   box-shadow)を消し、見出し横に浮かぶ裸のアイコンにする。 */
#skin-app .sk-entry-heading .sk-visual-box {
  position: static;
  top: auto; right: auto; bottom: auto; left: auto;
  width: var(--entry-art-size);
  height: var(--entry-art-size);
  transform: none;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#skin-app .sk-entry-heading .sk-visual-banner-img {
  width: var(--entry-art-size);
  height: var(--entry-art-size);
  animation: none;
  transform: none;
}
@media (min-width: 761px) {
  #skin-app .sk-start-content { padding-right: 32px; }
  #skin-app .sk-entry-heading { display: grid; }
  #skin-app .sk-entry-heading .sk-visual-box {
    position: static; top: auto; right: auto; transform: none;
    width: var(--entry-art-size); height: var(--entry-art-size);
  }
  #skin-app .sk-entry-heading .sk-visual-banner-img { width: var(--entry-art-size); height: var(--entry-art-size); }
  #skin-app .sk-start h2 { max-width: none; }
}

/* ── リーダー判定③(2026-09-04夕方): <details class="analytics-consent-card"> を
   最小フッター(.v61-foot)の中へ移した(元は本文の外・フッター直前に単独で置いていた)。
   フッター側の旧 <a href="#skin-analytics-consent"> は削除したので、フッターの
   リンクと同じ見た目(13px・下線)にして重複表示を1つに統合する。太字(2128行、
   font-weight:700)はこの文脈では不要なので打ち消す。min-height:44px(1638行)は
   タップ領域として維持し、見た目の文字サイズだけ小さくする(WCAG 2.5.8)。 */
.v61-foot .analytics-consent-card {
  display: block;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
.v61-foot .analytics-consent-card > summary {
  display: inline-flex;
  padding: 4px 2px;
  font-size: 13px;
  font-weight: 400;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.v61-foot .analytics-consent-card > summary:hover,
.v61-foot .analytics-consent-card > summary:focus-visible {
  color: var(--ink);
}
.v61-foot .analytics-consent-card[open] {
  margin: 10px 0 0;
  padding: 12px var(--gutter-sp) 18px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(11, 23, 48, .06);
  text-align: left;
}
@media (min-width: 981px) {
  .v61-foot .analytics-consent-card[open] { padding: 12px var(--gutter) 18px; }
}

/* ══ v61 見出しの統一(2026-09-04 夕方 納品前検査 R6・司令塔裁定)═══════════════
 * 画面名は共通ヘッダーの .hd-title(全画面同寸)。本文の最初の見出しは
 * 22px / var(--font-sans) / 700 / var(--ink) に揃える。直前は 8 画面で
 * 13px ゴシック金(質問チャット)〜36px 明朝(埋め込み案内)までばらけており、
 * 質問チャットは自分の h1 が直下の h2 より小さい逆転が起きていた(実測)。
 * 節の見出しはその下(18px)に置いて階層を1段だけ作る。 */
#skin-app .sk-start h2 {
  max-width: none;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
}

/* ══ v62(2026-09-05夜): 背景・画像・動きの追加(brief-v62.md)═══════════════════
 * 発注者(本番を見て)「アニメーションどこ、背景がなさ過ぎてみずらい 画像が少ない」。
 * v61 の構成(道具化・文言はそのまま)は変えず、共有部品(v60-base.css の .v62-*、
 * body::before の紺金の帯)を使って背景・挿絵・立ち絵・進捗バー・出現/hoverの
 * 動きだけを足す。文・帯・ラベル・説明ブロックは1つも増やしていない。 */

/* 1) 入口カードを帯の上に白カードで浮かせる。.surface-hero(2クラス)が
   background/box-shadow を強い詳細度で持つため、同じ強さの複合セレクタで
   .v62-card の見た目(白地+柔らかい影)に揃える。クラス自体は JS 側の
   classList.add('v62-card','v62-lift') で足す(customer-experience-polish.test.js /
   customer-pruning.test.js が 'card pad-lg sk-start' の文字列そのものを固定して
   いるため、class 属性の文字列は書き換えない)。 */
#skin-app .sk-start.surface-hero.v62-card {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 10px 30px rgba(11, 23, 48, .10), 0 1px 2px rgba(11, 23, 48, .05);
}

/* 2) 入口の挿絵(card-skin.webp、1200×900)。SP=カード最上部いっぱいの4:3、
   PC=本文の右。.sk-start-layout は v61 で1カラム(display:block)にしていたため、
   挿絵があるときだけ縦積み/横並びに組み替える(文言・操作の並びは変えない)。 */
#skin-app .sk-start-layout { display: flex; flex-direction: column; }
.sk-entry-art { order: -1; }
.sk-entry-art .v62-art { width: 100%; border-radius: 0; }
@media (min-width: 761px) {
  #skin-app .sk-start-layout { flex-direction: row; align-items: stretch; }
  #skin-app .sk-start-content { flex: 1 1 auto; min-width: 0; }
  .sk-entry-art {
    order: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0;
  }
  .sk-entry-art .v62-art { width: 240px; border-radius: var(--r-card); }
}

/* 3) 設問: 進み具合の横に案内役(64px)。既存の .sk-progress-wrap(進行帯+件数)は
   そのまま、左に v62-mascot を並べるための行を1本足すだけ。 */
.sk-progress-row { display: flex; align-items: center; gap: 12px; margin: 0 2px 10px; }
/* #skin-app 付きにして、既存の #skin-app .sk-progress-wrap { margin-bottom: 10px }
   (詳細度 id+class)より弱くならないようにする(素の .sk-progress-row .sk-progress-wrap
   だと2クラスにしかならず負ける)。行の外側マージンに統一したので内側は0にする。 */
#skin-app .sk-progress-row .sk-progress-wrap { flex: 1 1 auto; min-width: 0; margin: 0; }
@media (max-width: 560px) {
  .sk-progress-row { gap: 8px; }
}

/* 4) 結果画面: 紺帯を出したことで、帯の下辺(PC 272px)より上に来る不透明背景の
   無い文(渋谷院・免責文)が帯に重なり、暗色文字が帯の上で読めなくなっていた
   (実測: hero下端224px、旧ギャップ24pxでは.sk-result-stackの開始が248pxとなり
   帯の下辺272pxに届かない)。ヒーロー(不透明background:var(--paper))とスタックの
   間隔を、帯の下辺に届く分だけ広げる。SP(帯200px)はヒーローが2段に折り返して
   既に285px前後まで達しており重ならないため、この調整はPCだけでよい。 */
@media (min-width: 761px) {
  .sk-result-hero + .sk-result-stack { margin-top: 48px; }
}

/* ══════════════════════════════════════════════════════════════════════
 * v62 座長判定の是正(2026-09-05)
 * 設問見出しが紺帯に直接乗って読めなかった件と、入口に出現アニメが無かった件。
 * ══════════════════════════════════════════════════════════════════════ */

/* (1) 帯の露出で「二重箱解消」裁定(2026-09-04, #skin-app .sk-qcard を地色・枠・
   影ゼロの1枚面にしたもの)が読めない見出しを生んだため、帯に重なる設問カードに
   限って白い面を復元する(.v62-card が付いた時だけ。詳細度は id+2class で
   #skin-app .sk-qcard(id+1class)より確実に勝つので順序に依らない)。 */
#skin-app .sk-qcard.v62-card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: 0 4px 14px rgba(11, 23, 48, .10);
  padding: 28px;
}
@media (max-width: 560px) {
  #skin-app .sk-qcard.v62-card { padding: 24px; }
}

/* 帯の上に残す4要素(案内役の隣の進捗行=分野名・件数、戻る・最初から)だけ
   白文字+影にする。home.css .home-title と同じ処方(帯 bg-hero.webp、
   地色 #0b1730 相当、実測 17.4:1)。 */
/* v65(2026-09-05 夜、発注者「もっと明るい、見やすい、わかりやすいにして」): 帯を明るい生成りの絹に
   変えたので、帯の上の文字は白+影から濃紺(--navy-900)+白の薄い縁取りに。 */
#skin-app .sk-progress-row .sk-section-label {
  color: var(--navy-900);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
#skin-app .sk-progress-row .sk-progress-count {
  color: var(--navy-900);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
#skin-app .sk-progress-row .sk-progress-count strong { color: var(--navy-900); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
#skin-app .sk-progress-row .sk-progress-total {
  color: var(--navy-900);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
#skin-app .sk-qhead > .btn.ghost {
  color: var(--navy-900);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
#skin-app .sk-qhead > .btn.ghost:hover { text-shadow: none; }
/* 2026-09-23(A-06): 設問 1 の「戻る」は見えなくする(場所は残し、見出しの行をずらさない)。 */
#skin-app .sk-qhead > .sk-back-hidden { visibility: hidden; }
#skin-app .sk-progress-restart {
  color: var(--navy-900);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
#skin-app .sk-progress-restart:hover { text-shadow: none; }

/* (2) 入口: 2026-09-15 に登場せり上がり(v60-rise)を削除(発注者「なぞのアニメーション」)。
   最初から静止して表示する。案内役は 40px→64px(HTML 側で .v62-mascot を付与済み)。 */
.sk-entry-heading { --entry-art-size: 64px; }

/* ── v63.2(2026-09-05 昼): 生成挿絵(v60-base.css の --v63-images が 1 の時だけ skin.js が <img> を作る) ── */
/* 設問カード: 見出し+補足の右に 88px の挿絵(分野ごと: 肌の傾向/希望の部位/肌・お薬/プラン)。
   カードを 2 列グリッドにし、挿絵は 1〜2 行目の右列。見出し・補足だけが左列に入り、
   尺度の両端・選択肢は全幅のまま。画像が無い(404)時は onerror で has-art ごと外れる。 */
/* v64(2026-09-05 夕方、発注者「イラストなどもっとわかりやすくして」): 挿絵を 88→128px(≤480px は 64→88px)に。 */
#skin-app .sk-qcard.has-art { display: grid; grid-template-columns: minmax(0, 1fr) 144px; column-gap: 22px; align-items: start; } /* v65: 128→144px */
#skin-app .sk-qcard.has-art > * { grid-column: 1 / -1; }
#skin-app .sk-qcard.has-art > .sk-qtext, #skin-app .sk-qcard.has-art > .sk-help { grid-column: 1; }
#skin-app .sk-qcard.has-art > .sk-qart { grid-column: 2; grid-row: 1 / span 2; width: 144px; height: 144px; margin: 0; border-radius: 16px; object-fit: cover; background: var(--cream); box-shadow: 0 6px 16px rgba(11, 23, 48, .12); }
@media (max-width: 480px) {
  #skin-app .sk-qcard.has-art { grid-template-columns: minmax(0, 1fr) 96px; column-gap: 12px; }
  #skin-app .sk-qcard.has-art > .sk-qart { width: 96px; height: 96px; border-radius: 12px; }
  /* 独立検査(v64、司令塔許可の寸法是正): 挿絵 88px 化で見出し列が 224→200px に狭まり、
     q1(強い日差しに…)が 4→5 行に折り返した(実測)。has-art のときだけ見出しを24→22pxにして
     4行以内に戻す(has-artでないカードの見出しには触れない)。 */
  #skin-app .sk-qcard.has-art > .sk-qtext { font-size: 22px; }
}
/* 結果の挿絵(4:3)。2026-09-14(v79、レーンRS)で置き場所を見出し行の中から料金カードの
   後ろ(.sk-result-art-row)へ移した。375 幅の実測で、見出しと料金の間にあるために
   「コース総額」の金額が 1 画面目(812px)の外へ出ていたため。大きさ・角丸・影は v63.2/v64 のまま。
   印刷では下の @media print で非表示にする(hero から出したので個別に指定する)。 */
#skin-app .sk-result-art-row { display: flex; justify-content: center; }
#skin-app .sk-result-art-row .sk-result-art { display: block; width: 240px; height: auto; aspect-ratio: 4 / 3; margin: 0; border-radius: 16px; object-fit: cover; background: var(--cream); box-shadow: 0 10px 24px rgba(11, 23, 48, .12); }
@media print { #skin-app .sk-result-art-row { display: none !important; } }
/* 2026-09-05 v63.2 独立検査の指摘(司令塔が是正): 切替幅はこのファイルの他の分岐(760/761)と揃える。
   v64(同日夕方): 見出し行は 2 列グリッド(見出し / 案内役)。挿絵は v79 で料金カードの後ろへ
   移したので、右列(300px)は置かない(空の列が残ると見出しの右に 300px の余白ができる)。 */
@media (min-width: 761px) {
  #skin-app .sk-result-hero { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 8px; align-items: center; }
  #skin-app .sk-result-hero .sk-result-label { grid-column: 1; grid-row: 1; }
  #skin-app .sk-result-hero .sk-result-mascot { grid-column: 2; grid-row: 1; justify-self: start; }
  #skin-app .sk-result-hero .sk-result-summary { grid-column: 1 / 3; grid-row: 2; margin-top: 0; }
  #skin-app .sk-result-art-row .sk-result-art { width: 300px; }
}
/* 結果の見出し行は v62 以降、紺の帯の上に白い面として載る(background:var(--paper) は可読性契約の
   ため残す)。v63.2: 帯の上で「切れた白い長方形」に見えないよう、≥761px ではカードとして角丸+影+
   上下の余白を持たせる(左右の内側余白 var(--gutter) はそのままなので、本文の左端は下の
   「料金と適用条件」と揃ったまま)。SP は全幅の白い面のまま上下の余白だけ足す。 */
#skin-app .sk-result-hero { padding-block: 22px 24px; }
@media (min-width: 761px) {
  #skin-app .sk-result-hero { border-radius: var(--r-card); box-shadow: 0 10px 30px rgba(11, 23, 48, .10), 0 1px 2px rgba(11, 23, 48, .05); }
}
/* 2026-09-05 v63.1 独立検査の指摘(検査役は範囲外として司令塔へ委ね、司令塔が是正): 紺の帯
   (body::before)は @media print で消えるのに、帯の上の白文字(進捗行・戻る・最初から)が
   白いままで紙面に幽霊文字になっていた(computed style で #fff on #fff を実測)。home.css と
   同じく印刷では黒に戻す。 */
@media print {
  #skin-app .sk-progress-row .sk-section-label, #skin-app .sk-progress-row .sk-progress-count,
  #skin-app .sk-progress-row .sk-progress-count strong, #skin-app .sk-progress-row .sk-progress-total,
  #skin-app .sk-qhead > .btn.ghost, #skin-app .sk-progress-restart { color: #000; text-shadow: none; }
}
/* 2026-09-05 v64 独立検査の指摘(司令塔が是正): 挿絵が 1〜2 行目(128px)を占めるため、補足も尺度も無い
   設問(例: 痛みへの不安)では見出しの下に空白が出ていた。見出しと補足を自分の行の中で上下中央に
   置き、挿絵の高さに対して見出しが縦中央に並ぶ(画像+見出しのカードの一般的な配置)。 */
#skin-app .sk-qcard.has-art > .sk-qtext, #skin-app .sk-qcard.has-art > .sk-help { align-self: center; }
/* 補足(.sk-help)が無い設問は 2 行目が空になり、挿絵の高さぶんの余りが 2 行目に寄って見出しの下が
   空く(実測 1280px で 100px)。その場合は見出し自身が 1〜2 行目にまたがり、挿絵の高さの中で上下中央に
   並ぶ(実測後 gap 56px、挿絵の下端と選択肢の間隔は 10px)。 */
#skin-app .sk-qcard.has-art:not(:has(> .sk-help)) > .sk-qtext { grid-row: 1 / span 2; }
/* v65(2026-09-05 深夜、独立検査の実測): ≤480px で 96px の挿絵の横に 22px の見出しを並べると q1
   (強い日差しに30分〜…)が 5 行に折れ、「30分」が行またぎした。幅の狭い端末では挿絵を見出しの上に
   1 段置き、見出し・補足を全幅にする(q1 は 2 行)。挿絵は 96px のまま。 */
@media (max-width: 480px) {
  #skin-app .sk-qcard.has-art { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  #skin-app .sk-qcard.has-art > .sk-qart { grid-column: 1; grid-row: 1; margin: 0 0 12px; }
  #skin-app .sk-qcard.has-art > .sk-qtext { grid-column: 1; grid-row: 2; align-self: auto; }
  #skin-app .sk-qcard.has-art > .sk-help { grid-column: 1; grid-row: 3; align-self: auto; }
  #skin-app .sk-qcard.has-art:not(:has(> .sk-help)) > .sk-qtext { grid-row: 2; }
}

/* ── v66(2026-09-05 深夜): 設問ごとの挿絵+短い見出し、初回の信頼の札、選択肢の段差出現 ──
   発注者逐語:「アニメーションを追加してください、画像が内容とあっていないわかりずらいです、
   イラストにして、初心者や初めての人にもわかりやすいようにして、商用レベルまで引き上げて
   ください、高級感や信頼、見やすさなども」。挿絵は <figure class="sk-qfig"> に <img.sk-qart> と
   <figcaption.sk-qart-cap>(2〜6 字)を入れ、v65 の has-art グリッドの 2 列目に figure ごと置く。 */
#skin-app .sk-qcard.has-art > .sk-qfig {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 144px; margin: 0;
}
#skin-app .sk-qfig > .sk-qart {
  display: block; width: 144px; height: 144px; margin: 0; border-radius: 18px; object-fit: contain;
  background: var(--cream); border: 1px solid rgba(194, 162, 94, .35);
  box-shadow: 0 8px 20px rgba(11, 23, 48, .10);
}
/* v82 A13(grok常識レビュー、2026-09-15): 読み込みが遅い/失敗する直前の一瞬、幅と高さだけ
   確保された img に背景・枠線・影が先に付き「絵の無い空白の四角」に見えていた。読み終える
   (skin.js が .sk-qart-ready を付ける)まではそれらを出さない。幅・高さ・角丸は変えないので
   読み込み後にガタつかない。失敗時は onerror が figure ごと消すため、この状態のまま残らない。 */
#skin-app .sk-qfig > .sk-qart:not(.sk-qart-ready) {
  background: none; border-color: transparent; box-shadow: none;
}
#skin-app .sk-qart-cap {
  margin: 0; padding: 3px 10px; border-radius: 999px;
  background: #ffffff; border: 1px solid var(--gold-line);
  color: var(--navy-800); font-size: 13px; font-weight: 800; letter-spacing: .02em; line-height: 1.4; white-space: nowrap;
}
/* 初回だけの事実の札(登録不要/約2分/結果はその場/最終判断は医師)。進み具合の下、カードの上。
   クラス名は customer-pruning.test.js が過去に撤去した「trust」系クラスの復活を禁じているため facts。 */
/* v82 A6(grok常識レビュー、2026-09-15): 金枠のピル+丸い点の飾りが、選択中のバッジ
   (選んだ選択肢の印)に見えると指摘。印(丸い点)を外し、区切り文字だけの注記1行の
   見た目にする(4つの事実の文言はそのまま・折返しも許可のまま)。 */
#skin-app .sk-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0 0 12px; padding: 0; list-style: none;
}
#skin-app .sk-facts > li {
  display: inline-flex; align-items: center; min-height: auto; padding: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--muted-strong); font-size: 13px; font-weight: 700; line-height: 1.4;
}
#skin-app .sk-facts > li::before { content: none; }
#skin-app .sk-facts > li + li::before {
  content: "・"; display: inline; margin: 0 6px; color: var(--muted); font-weight: 400;
}
@media (max-width: 480px) {
  /* SP: figure を見出しの上に横並び(挿絵 96px+札)。v65 の積み方(挿絵→見出し→補足)を figure で引き継ぐ。 */
  #skin-app .sk-qcard.has-art > .sk-qfig {
    grid-column: 1; grid-row: 1; justify-self: start; align-self: auto;
    flex-direction: row; align-items: center; gap: 12px; width: auto; margin: 0 0 12px;
  }
  #skin-app .sk-qfig > .sk-qart { width: 96px; height: 96px; border-radius: 14px; }
  #skin-app .sk-qart-cap { font-size: 14px; }
  #skin-app .sk-facts > li { font-size: 12px; }
}
/* 2026-09-15(発注者「なぞのアニメーション…意味が分からない」): カードの右からの登場は
 * 250ms以下に弱め(下のkeyframes)、選択肢の段差入場(sk-opt-in)・挿絵の登場ポップ+
 * 無限浮遊(v66-pop・v66-float、sk-qart/sk-qart-cap/sk-facts>li/sk-result-art)は削除。
 * 静止画として最初から表示する。 */
@media (prefers-reduced-motion: no-preference) {
  #skin-app .sk-qcard { animation: sk-q-in-x 220ms var(--ease-out) backwards; }
  /* v82(2a、発注者2026-09-15指摘)で削除: ここにあった
     `#skin-app .sk-options .q-option:hover { transform: translateX(4px); border-color: var(--gold-line); }`
     は上のhoverルール(選択肢の手触りの節)と同じセレクタで、後に読まれるため
     hoverの持ち上がり+選択中と紛らわしい別色の枠を上書きしていた。hoverの定義は
     「9. 選択肢の手触り」の節(1本化・(hover: hover)で囲み済み)に統一する。 */
}
/* 2026-09-15: 8px 上限(画面の切替フェード)に合わせ min(28px,3vw)→min(8px,3vw)
   (8px は 390px 幅の左右余白 20px より確実に小さく、画面外に出ない)。
   sk-opt-in(選択肢の段差入場)は使用箇所ゼロ(削除済み、grep確認済み)のため keyframes も削除。 */
@keyframes sk-q-in-x {
  from { opacity: 0; transform: translateX(min(8px, 3vw)); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #skin-app .sk-qcard, #skin-app .sk-options .q-option, #skin-app .sk-qfig > .sk-qart, #skin-app .sk-qart-cap,
  #skin-app .sk-facts > li, #skin-app .sk-result-art { animation: none !important; }
}
@media print {
  #skin-app .sk-facts { display: none; }
  #skin-app .sk-qart-cap { color: #000; border-color: #999; }
}

/* ── v67(2026-09-06): 意味のある動き ───────────────────────────────────
   「戻る」で来たカードは左から入る / 金額は数え上げ(skin.js countUpYen) / ボタンは押し込み。
   2026-09-15(発注者「なぞのアニメーション…意味が分からない」): 進行の帯が伸びる演出
   (sk-progress-grow)は削除(JSが --sk-to から計算した最終値を直接 transform: scaleX() で
   設定済みのため、見た目は正しい進捗のまま即時表示になる)。選んだ丸・レベルの印(sk-check-pop)
   は行き過ぎ(60%地点で1.18倍まで超える弾み・cubic-bezier(.34,1.56,.64,1))を外し、
   不透明度+穏やかな拡大だけの「選択の印」にする。reduce-motion では全て静止。 */
.sk-plan-price-num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  #skin-app .sk-options .q-option.sk-selected::before { animation: sk-check-pop 220ms var(--ease-out) backwards; }
  #skin-app .sk-question-shell.sk-nav-back .sk-qcard { animation-name: sk-q-in-back; }
  #skin-app .btn:active { transform: translateY(1px) scale(.97); transition-duration: 80ms; }
}
@keyframes sk-check-pop {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); }
}
/* 2026-09-15: 8px 上限に合わせ -28px→-8px。 */
@keyframes sk-q-in-back {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #skin-app .q-progress.v62-bar > div, #skin-app .sk-options .q-option.sk-selected::before { animation: none !important; }
}

/* ============ v72(2026-09-07) 画面のずれ・使いづらさの是正 ============ */
/* 複数選択(部位)の「次へ」は主ボタンの見た目にし、480px 以下では全幅で上に置く。
   右端の小さな白いボタンが「次へ」だと分からず、選んだあとに止まる人が出る配置だった。 */
/* v82 A4(grok常識レビュー、2026-09-15): 上の#skin-app詳細度がdesign.cssの.btn:disabled
   (グレー)より勝ってしまい、未選択で無効な間も主ボタンの紺塗りのまま=選べる/選んだ
   ように見えていた。:not(:disabled)にして、無効の間は共通の.btn:disabledへ譲る。 */
#skin-app .sk-multi-complete { min-width: 120px; }
#skin-app .sk-multi-complete:not(:disabled) { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
#skin-app .sk-multi-complete:not(:disabled):hover, #skin-app .sk-multi-complete:not(:disabled):focus-visible { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
/* v82 A4 追記(2026-09-15): 共通の .btn:disabled の塗り --surface-3(#e9eef8= 233,238,248)は、
   ダビデの選択中の選択肢の塗りと同じ値だった(v82 S1 実測)。無効の「次へ」が選択肢と同じ色に
   見えないよう、無効の間だけ無彩色の灰(青みなし)にする。有効になれば上の紺に戻る。 */
#skin-app .sk-multi-complete:disabled, #skin-app .sk-multi-complete:disabled:hover { background: #eceeef; border-color: #d4d7db; color: var(--muted-strong); }
@media (max-width: 480px) {
  #skin-app .sk-multi-action { flex-direction: column; align-items: stretch; gap: 8px; }
  #skin-app .sk-multi-action .btn { width: 100%; min-width: 0; }
}
/* 結果画面の見出し横の小さな案内役(96px)は非表示。右の挿絵(300px、ゆっくり浮く)と二重になり、
   見出しの行の途中に浮いて見えていた。案内役は音声案内の欄と診断中の吹き出しで引き続き出る。 */
#skin-app .sk-result-hero .sk-result-mascot { display: none; }
/* 761px 以上の結果ヒーロー: 挿絵(225px)が 2 行にまたがるぶん、見出しの行と要約の行に余りが等分され、
   見出しと要約のあいだに 100px 近い空白ができていた。見出しを行の下端、要約を行の上端に寄せ、
   2 つを隣り合わせにしたまま挿絵の高さの中央に置く。 */
@media (min-width: 761px) {
  #skin-app .sk-result-hero .sk-result-label { align-self: end; }
  #skin-app .sk-result-hero .sk-result-summary { align-self: start; }
}

/* ============ v75(2026-09-09) 絵で選ぶ 5 段階 / 肌悩み型の結果 ============
   ジュエル版(engine: "concern")のために足した部品。ダビデの画面には出ない
   セレクタ(.sk-scale-*, .sk-level-*, .sk-concern-*, .sk-treatment-*)だけで書き、
   既存の見た目には触れない。色は既存トークン(ブランドごとの palette が
   --action-primary 等に流れる)を使い、明るい地のまま。 */

/* ── 設問: 絵で選ぶ 5 段階(kind: "scale-image") ── */
#skin-app .sk-options.sk-scale-cards {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px; margin-top: 18px;
}
#skin-app .sk-scale-cards .q-option.sk-scale-card {
  position: relative; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 8px; padding: 10px 8px 12px; text-align: center;
  border-radius: var(--r-card); font-size: 13px; line-height: 1.4;
}
/* 連番(01,02…)と「選択中」の札は、絵のカードでは絵の上の丸に置き換える。 */
#skin-app .sk-scale-cards .q-option::before { content: none; }
#skin-app .sk-scale-cards .q-option.sk-selected::after {
  content: "✓"; position: absolute; top: 6px; right: 6px; z-index: 1;
  display: grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0;
  border: 0; border-radius: 999px; background: var(--accent-strong); color: #fff;
  font-size: 13px; font-weight: 900; line-height: 1;
}
#skin-app .sk-scale-media {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; background: var(--cream);
}
#skin-app .sk-scale-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 絵が無い/読み込めないときも枠と大きさは保ち、下の言葉だけで選べるようにする。 */
#skin-app .sk-scale-media.is-unavailable {
  background: repeating-linear-gradient(45deg, var(--surface-2) 0 7px, var(--surface) 7px 14px);
}
#skin-app .sk-scale-step {
  position: absolute; top: 5px; left: 5px; display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .93);
  color: var(--muted-strong); font-size: 12px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
}
#skin-app .sk-scale-label { display: block; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
/* 2026-09-23(A-23): 選択肢の文字も見出し(design.css の h1〜h3)と同じく文節で折り返す
   (375 で「あ/ご」「産/毛」「ゾ/ーン」「ほとんど目立た/ない」と語の途中で切れていた)。
   対応していない端末は今までどおり(@supports の外は変えない)。
   VIS-12: 肌悩みの結果の大きな字も同じ(320 で「少/ない」と切れていた)。 */
@supports (word-break: auto-phrase) {
  #skin-app .sk-concern-name strong,
  #skin-app .sk-opt-label,
  #skin-app .sk-opt-help,
  #skin-app .sk-chip-label,
  #skin-app .sk-scale-label { word-break: auto-phrase; }
}
/* v111 M-4(A-23): 部位の札の文字は「・」ごとのかたまり(skin.js の partLabelChunks)で折り返す
   (文節の判定が「あご」を「あ/ご」に割っていた)。かたまりの中では改行しない(1 行より長いかたまりだけ中で折り返す)。
   字の大きさ・色・札の形は変えない。 */
#skin-app .sk-part-choice .sk-label-chunk { display: inline-block; }
/* v112 目視 #1: 「・」のかたまりをまとめた箱(skin.js の partLabelChunks)。1 行に入らない時は「・」ごとに折り返し、
   最後のかたまりは次の行へ(狭い丸い札で長い 2 行目が下の縁の線に乗らない)。 */
#skin-app .sk-part-choice .sk-label-head { display: inline-block; }
/* v112 目視 #1(320〜1280 の全幅で測り直し): 札の名前の行は字の欄より左右 4px ずつ内側に収める。字の欄いっぱいの
   1 行は札の真ん中より下にあるため、丸い左右の縁の線に乗っていた(体 981〜1280・顔 458〜479、VIO 449 は 0.5px)。
   ただし 9 字(9.2em)まではいつでも 1 行に使える(狭い札で「ヒゲ（鼻下・あご・」の行を今までどおりに保つ)。 */
#skin-app .sk-part-choice .sk-opt-label { max-width: max(9.2em, calc(100% - 8px)); }
/* v112 目視 #3: 2 列の狭い札(420px 以下・余白 8px)は下の余白だけ 4px 足す(8px → 12px)。3 行の札
   「顔/（ヒゲ以外の/産毛など）」の 3 行目が丸い札の下の縁の線に 1px 乗っていた(320〜331)。字の大きさ・色・札の角は変えない。 */
@media (max-width: 420px) {
  #skin-app .sk-chips .sk-part-choice { padding-bottom: 12px; }
}
#skin-app .sk-scale-card.sk-selected {
  border-color: var(--accent-strong); background: var(--accent-pale);
  box-shadow: 0 2px 10px rgba(11, 23, 48, .12);
}
#skin-app .sk-scale-card.sk-selected .sk-scale-media { border-color: var(--accent-strong); }
#skin-app .sk-scale-card.sk-selected .sk-scale-step { border-color: var(--accent-strong); color: var(--accent-strong); }
/* 両端の説明は左右で言う(選択肢が横に並ぶため)。 */
/* v75(2026-09-09、検査 I2): SP は 3+2 の 2 段に折り返るので「左：/右：」では位置が
   合わない。カードに出している段階の番号で両端を言い、どの幅でも 1 行に並べる。 */
#skin-app .sk-scale-endpoints.is-horizontal {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 2px 10px; text-align: center;
}
#skin-app .sk-scale-endpoints.is-horizontal .sk-scale-arrow { color: var(--muted-strong); font-weight: 900; }
/* SP: 1 行に 5 枚だと絵が小さくなりすぎるので 3+2 の 2 段(下段は中央)にし、
   絵の 1 辺を 88px 以上に保つ(6 列のうち 2 列ぶんを 1 枚が使う)。 */
@media (max-width: 719px) {
  #skin-app .sk-options.sk-scale-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 6px; margin-inline: -10px; }
  #skin-app .sk-scale-cards .q-option.sk-scale-card { grid-column: span 2; padding: 8px 3px 10px; }
  #skin-app .sk-scale-cards[data-scale-count="5"] .q-option.sk-scale-card:nth-child(4) { grid-column: 2 / span 2; }
  #skin-app .sk-scale-cards[data-scale-count="5"] .q-option.sk-scale-card:nth-child(5) { grid-column: 4 / span 2; }
  #skin-app .sk-scale-cards[data-scale-count="4"] .q-option.sk-scale-card:nth-child(3) { grid-column: 2 / span 2; }
  #skin-app .sk-scale-cards[data-scale-count="4"] .q-option.sk-scale-card:nth-child(4) { grid-column: 4 / span 2; }
  #skin-app .sk-qcard.has-scale { padding-left: 16px; padding-right: 16px; }
  #skin-app .sk-qcard.v62-card.has-scale { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 380px) {
  #skin-app .sk-scale-cards .q-option.sk-scale-card { font-size: 12px; }
}

/* ── 結果(肌悩み型): いちばん気になることと 5 段階の位置 ── */
#skin-app .sk-result-hero.sk-concern-hero {
  display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 24px; row-gap: 10px;
  max-width: min(var(--container), 980px);
}
#skin-app .sk-concern-hero .sk-result-label { order: 1; flex-basis: 100%; align-self: auto; }
#skin-app .sk-concern-primary { order: 2; flex: 1 1 300px; min-width: 0; }
#skin-app .sk-concern-hero .sk-result-art {
  order: 3; width: 240px; margin: 0; align-self: center; justify-self: auto;
}
#skin-app .sk-concern-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
#skin-app .sk-concern-name-lead { color: var(--muted-strong); font-size: 13px; font-weight: 800; }
#skin-app .sk-concern-name strong { font-family: var(--font-serif); font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; line-height: 1.25; color: var(--text); }
#skin-app .sk-concern-desc { margin: 6px 0 0; max-width: 42em; color: var(--muted-strong); font-size: 15px; line-height: 1.7; }
#skin-app .sk-level { margin-top: 16px; max-width: 420px; }
#skin-app .sk-level-track {
  position: relative; height: 12px; border-radius: 999px; border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--accent-pale) 45%, var(--accent) 100%);
}
#skin-app .sk-level-pin {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 999px; background: var(--action-primary, var(--navy-700)); color: var(--action-primary-foreground, #fff);
  font-size: 14px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(11, 23, 48, .28);
}
#skin-app .sk-level-scale { display: flex; margin-top: 12px; }
#skin-app .sk-level-scale span { flex: 1; text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
#skin-app .sk-level-scale span.on { color: var(--text); }
#skin-app .sk-level-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 8px 0 0; }
#skin-app .sk-level-caption strong { font-size: 17px; font-weight: 900; color: var(--text); }
#skin-app .sk-level-count { color: var(--muted-strong); font-size: 12.5px; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  /* 2026-09-15: 行き過ぎ(cubic-bezier(.34,1.56,.64,1))を外し 300ms 以下へ。 */
  #skin-app .sk-level-pin { animation: sk-check-pop 240ms var(--ease-out) 100ms backwards; }
}

/* ── 結果(肌悩み型): 本文は 1 段組みで上から読ませる ── */
#skin-app .sk-concern-page .sk-result-stack {
  display: block; max-width: min(var(--container), 980px);
}
body[data-skin-stage="result"] #skin-app .sk-concern-page .sk-result-stack.stack > * + * { margin-top: 20px; }
#skin-app .sk-concern-others h2 { margin: 0; font-size: 18px; font-weight: 800; }
#skin-app .sk-concern-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
#skin-app .sk-concern-tag {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 14px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface);
}
#skin-app .sk-concern-tag-name { font-size: 14px; font-weight: 800; color: var(--text); }
#skin-app .sk-concern-tag-level { font-size: 12.5px; font-weight: 700; color: var(--muted-strong); }

/* ── 結果(肌悩み型): 合う施術の目安 ── */
#skin-app .sk-treatment-list { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 861px) {
  #skin-app .sk-treatment-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}
#skin-app .sk-treatment-pricebar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 12px; }
/* 2026-09-23(A-08): 施術のカード自身は内側の余白 0 で、段ごとに余白を持つ(施術名の段= 16px)。
   料金の段だけ余白が無く「料金」が枠の左の線に接していたので、施術名と同じ 16px をそろえる
   (ホームケアのカードはカード側に余白があるので当てない)。 */
#skin-app .sk-treatment .sk-treatment-pricebar { padding-inline: 16px; }
#skin-app .sk-treatment-pricebar .sk-total-label { color: var(--muted-strong); font-size: 12.5px; font-weight: 800; }
#skin-app .sk-treatment-price { color: var(--text); font-size: 22px; font-weight: 900; line-height: 1.3; font-variant-numeric: tabular-nums; }
#skin-app .sk-treatment-facts { display: grid; gap: 8px 16px; margin: 12px 0 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
#skin-app .sk-treatment-facts > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
#skin-app .sk-treatment-facts dt { color: var(--muted-strong); font-size: 12.5px; font-weight: 800; }
#skin-app .sk-treatment-facts dd { margin: 0; color: var(--text); font-size: 13.5px; font-weight: 700; line-height: 1.55; }
#skin-app .sk-treatment-conditions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
#skin-app .sk-treatment-conditions > p { margin: 0; color: var(--muted-strong); font-size: 12.5px; font-weight: 800; }
#skin-app .sk-treatment-conditions ul { margin: 6px 0 0; padding-left: 1.2em; }
#skin-app .sk-treatment-conditions li { color: var(--text); font-size: 13.5px; line-height: 1.7; }
#skin-app .sk-plan-price-note { margin: 12px 0 0; color: var(--muted-strong); font-size: 13px; line-height: 1.7; }
/* v75(検査 I2): ご希望の説明は「合う施術の目安」の見出しの直下に 1 回だけ出す。 */
#skin-app .sk-selection-notes {
  margin: 0 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  color: var(--muted-strong); font-size: 13.5px; font-weight: 700; line-height: 1.7;
}
#skin-app .sk-selection-note { margin: 0; }
#skin-app .sk-selection-note + .sk-selection-note { margin-top: 4px; }
/* v75(検査 I2): ホームケア(自宅で使う品)は施術と分けて、同じ様式の縮小版で下に置く。 */
#skin-app .sk-homecare { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
#skin-app .sk-homecare-title {
  margin: 0 0 10px; font-family: var(--font-serif); font-weight: 700; color: var(--text);
  font-size: 17px; line-height: 1.4;
}
#skin-app .sk-homecare-list { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 761px) {
  /* auto-fill にして、1 件だけのときも器いっぱいに伸びず施術のカードより小さく見えるようにする。 */
  #skin-app .sk-homecare-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
}
#skin-app .sk-homecare-card { padding: 14px 16px; }
#skin-app .sk-homecare-card .sk-plan-name { font-size: 15px; }
#skin-app .sk-homecare-card .sk-treatment-price { font-size: 18px; }
#skin-app .sk-homecare-card .sk-plan-reason { font-size: 13px; }
#skin-app .sk-concern-actions .sk-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#skin-app .sk-concern-actions .btn.block { flex: 1 1 260px; }

/* 医師相談の画面(悩み型): 見出しと本文にページと同じ左右の余白と、読みやすい幅を
   持たせる。左右の余白そのものは v75 の検査(I2)で共有の #skin-app .sk-refer-hero 側にも
   同じ値(--gutter / SP は --gutter-sp)を入れ、ダビデ側の張り付きもそろえて直した。
   ここに残しているのは、悩み型だけの「幅の上限と中央そろえ」と .sk-referral-stack の分。 */
#skin-app .sk-concern-page .sk-refer-hero,
#skin-app .sk-concern-page .sk-referral-stack {
  max-width: min(var(--container), 980px); margin-inline: auto; padding-inline: var(--gutter);
}
@media (max-width: 760px) {
  #skin-app .sk-concern-page .sk-refer-hero,
  #skin-app .sk-concern-page .sk-referral-stack { padding-inline: var(--gutter-sp); }
}
/* 帯の目盛りと丸い印が近すぎたので、目盛りを少し下げる(印は帯の中央で動かさない)。 */
#skin-app .sk-level-scale { margin-top: 18px; }

/* v80(2026-09-14、市場比較 M-5 / D5): 電話の幅では、この型の結果の見出し帯(375 実測 530px)が
   高すぎて料金が 1 画面目に入らなかった。挿絵と 5 段階の帯は残したまま丈だけ詰める
   (肌タイプ型の結果= ダビデの見出し帯には掛けない)。 */
@media (max-width: 560px) {
  #skin-app .sk-concern-hero .sk-result-art { width: 150px; }
  #skin-app .sk-concern-hero .sk-level { margin-top: 10px; }
  #skin-app .sk-concern-hero .sk-level-scale { margin-top: 12px; }
  #skin-app .sk-concern-hero .sk-concern-desc { margin-top: 4px; }
}

/* v75(2026-09-09、最終確認の実測): 医師相談の面に残っていた左端のずれを、ダビデ・ジュエルの
   両方でそろえる。実測(375/1280、fullPage スクショと getBoundingClientRect):
   ・注記(.disclaimer)は器の余白が 0 のままで、見出し(20/32px)や各カードの本文(16〜23px)より
     左に出て画面の端に接していた(HEAD も同じ。ダビデ 1280 で x=0)。医師相談の段の注記にだけ
     見出しと同じガターを与える(結果の面の .disclaimer は 2 段組みの列に載るので触らない)。
   ・案内文(.sk-refer-hero p)は共有の `margin: 0 auto`(366 行)で中央寄せになり、1280 では
     見出しが x=32、本文が x=346 と 300px 以上ずれて見えた(HEAD も同じ)。見出しの真下から
     始まるように左そろえにする(max-width 42em の読みやすい行長はそのまま)。 */
/* 2026-09-13(v79、監査 AU-D の D-04 の続き): 左右の余白は器(.sk-referral-stack、1306行)が
   持つようにしたので、ダビデ側の注記が自前の余白を足すと 1 つだけ内側へ寄る
   (実測 1280px: 見出しの字 x=72・カードの字 x=93〜95 に対し、注記の字だけ x=104。
   375px でも 20 対 40)。悩み型(ジュエル)は見出し(.sk-refer-hero)も自前の余白を持つ形が
   すでに通っていて、注記と見出しが x=214 でそろうので、そちらだけ余白を残す。 */
#skin-app .sk-concern-page .sk-referral-stack > .disclaimer { padding-inline: var(--gutter); }
#skin-app .sk-refer-hero p { margin-inline: 0; }
@media (max-width: 760px) {
  #skin-app .sk-concern-page .sk-referral-stack > .disclaimer { padding-inline: var(--gutter-sp); }
}

/* 2026-09-13(v79、監査 AU-D の D-16): 375px では右上の装飾(.sk-refer-visual)の矩形が
   見出しとリード文の「字」に重なっていた(実測 375px: 見出し 14×20px、リード文 67×20px と
   67×13.5px)。装飾は右上に残したまま、字の側に装飾ぶんの余白を作って重なりを 0 にする
   (761px 以上は器が広く、実測でも重なっていないので触らない)。 */
@media (max-width: 760px) {
  /* 48px + 余白 8px = 56px。見出し「まずは医師にご相談ください」は 375px で字幅 273px
     なので、余白 56px(器 335px)なら 1 行に収まり、装飾とは 8px 離れる。 */
  #skin-app .sk-refer-hero > .sk-refer-visual { top: 0; right: 0; width: 48px; }
  #skin-app .sk-refer-hero > h2,
  #skin-app .sk-refer-hero > p { padding-right: 56px; }
}


/* ===== v82 結果画面(2026-09-15) =====
   発注者「結果が出ている時もわかりずらい情報が多すぎてごちゃごちゃしている」への対応。
   1 画面目に 見出し+結果+料金(ダビデ)/施術の要点(ジュエル)+主導線 1 つが入るよう、
   結果画面のブロックだけ余白と注記の文字を詰める。設問・入口・院内(/clinic/ の ci-*)には当てない。 */

/* ── 折りたたみの見出しをそろえる(平易な見出し+開閉の印「＋」「−」、押せる高さ 44px 以上) ──
   ＋/− は .sk-plan-more / .sk-other-plans / .sk-result-details(629〜659 行)が既に持っている。
   印の無かった .sk-fold(あわせて気になること・あなたへの確認事項)と .sk-decision-merged
   (あなたが選んだ内容)にも同じ印を足して、両院・3 種の結果で同じ見た目にする。 */
#skin-app .sk-fold > summary,
#skin-app .sk-decision-merged > summary,
#skin-app .sk-other-details > summary,
#skin-app .sk-other-treatments > summary,
#skin-app .sk-treatment-more > summary,
#skin-app .sk-plan-terms > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding-block: 9px;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
#skin-app .sk-fold > summary::-webkit-details-marker,
#skin-app .sk-decision-merged > summary::-webkit-details-marker { display: none; }
#skin-app .sk-fold > summary::after,
#skin-app .sk-decision-merged > summary::after { content: '＋'; flex-shrink: 0; font-size: 17px; line-height: 1; }
#skin-app .sk-fold[open] > summary::after,
#skin-app .sk-decision-merged[open] > summary::after { content: '−'; }
#skin-app .sk-fold > summary { padding-inline: 2px; }
#skin-app .sk-concern-others.sk-fold { padding: 4px 0; }
#skin-app .sk-decision-merged { padding: 4px 14px; }
#skin-app .sk-decision-merged-body { padding-bottom: 10px; }
/* 2026-09-23(A-24): 畳んだ「あなたへの確認事項」(悩み型の結果の details.card)だけ、.card の内側余白と
   見出し(.card-title)の下の 14px が残り、閉じた高さ 96px・見出しの下に 32px の空きがあった。
   隣の「あなたが選んだ内容」と同じ余白にそろえる(開いたときの本文の下も同じ 10px)。 */
#skin-app details.card.sk-fold { padding: 4px 14px; }
#skin-app details.card.sk-fold > .card-title { margin-bottom: 0; }
#skin-app details.card.sk-fold[open] > .sk-cautions { padding-bottom: 10px; }
#skin-app .sk-plan-terms { grid-column: 1 / -1; padding: 0 16px 8px; }
#skin-app .sk-plan-terms > summary { min-height: 44px; padding-block: 8px; font-size: 14px; }
#skin-app .sk-plan-terms .sk-important-conditions { border: 0; padding: 0; }
#skin-app .sk-other-treatments { margin-top: 10px; }
/* ジュエルの 1 枚目の施術カードの折りたたみ(この施術の詳しい説明)。カードの中なので
   枠は持たせず、左右はカードの余白にそろえる。 */
#skin-app .sk-treatment-more { margin-top: 0; padding: 0 16px 8px; }
#skin-app .sk-treatment-more > summary { min-height: 44px; padding-block: 8px; font-size: 14px; }
#skin-app .sk-treatment-more .sk-treatment-facts { margin-top: 4px; }
#skin-app .sk-treatment-more .sk-plan-reason { padding: 8px 0 0; }
#skin-app .sk-treatment-more .sk-treatment-conditions { margin-top: 10px; padding-top: 10px; }
#skin-app .sk-treatment-more .sk-reason-lead { margin-top: 8px; }

/* ── 節の名前だけを残して画面からは下げる見出し ──
   「料金と適用条件」は画面の題(あなたに合うプランの目安)と、「次にすること/次にできること」は
   釦の文言(○○院の公式サイトへ/ご予約・ご相談のページへ)と重なる。要素と id は残すので
   aria-labelledby の読み上げ名は変わらない。 */
body[data-skin-stage="result"] #skin-app .sk-course-heading > h2.visually-hidden { display: none; }
body[data-skin-stage="result"] #skin-app .sk-cta-title-quiet,
body[data-skin-stage="referral"] #skin-app .sk-cta-title-quiet { display: none; }
body[data-skin-stage="result"] #skin-app .sk-next-actions .sk-cta-actions,
body[data-skin-stage="referral"] #skin-app .sk-next-actions .sk-cta-actions { margin-top: 0; }
body[data-skin-stage="result"] #skin-app .sk-next-actions,
body[data-skin-stage="referral"] #skin-app .sk-next-actions { padding: 10px 16px 12px; }
/* 段の間(SP は 1371 行で 18px)。結果画面だけ 12px に詰める。 */
@media (max-width: 760px) {
  body[data-skin-stage="result"] #skin-app .sk-result-stack.stack > * + * { margin-top: 12px; }
}

/* ── 1 画面目を詰める(肌タイプ型・ダビデ) ──
   2026-09-23(A-02): 詰めるのは上下だけ。短縮記法(margin/padding)で左右まで 0・16px に上書きすると、
   .sk-result-hero の基本の節(v61 のコメントの所)の margin-inline:auto・padding-inline:var(--gutter) が
   消え、768・1280 で見出しの面が画面の左端に張り付いて下の列とずれていた(ダビデ 1280: 面 x0・文字 x16、カード x72)。 */
#skin-app .sk-result-page .sk-result-hero { margin-block: 16px 12px; padding-block: 10px 8px; }
#skin-app .sk-result-page .sk-result-label { font-size: 20px; }
#skin-app .sk-result-page .sk-result-summary { margin: 4px 0 0; line-height: 1.5; }
#skin-app .sk-result-page .sk-result-stack { margin-top: 0; }
#skin-app .sk-result-page .sk-course-heading { min-height: 0; padding: 4px 10px; row-gap: 4px; }
#skin-app .sk-result-page .sk-course-heading h2 { font-size: 19px; }
#skin-app .sk-result-page .sk-plan-group-recommended { margin-top: 4px; }
#skin-app .sk-result-page .sk-plan-top { padding: 6px 16px 4px; }
/* v82(第2便 8): 「コース総額（税込）」と金額を 1 行に並べる(実績サイトの料金カードと同じ形)。
   縦に 3 段積むより 34px 低くなり、主導線が 1 画面目に入る。 */
#skin-app .sk-result-page .sk-plan-pricebar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 2px 16px 8px;
}
#skin-app .sk-result-page .sk-plan-pricebar .sk-plan-price-label { flex-basis: 100%; }
#skin-app .sk-result-page .sk-plan-price { margin: 0; font-size: 28px; }
#skin-app .sk-result-page .sk-plan-price-label { margin-top: 0; }
/* 院を選ぶ釦は押せる高さ(44px)ちょうどにする */
#skin-app .sk-result-page .sk-clinic-toggle { min-height: 44px; padding-block: 7px; }
/* v82(第2便 2): 回数・対象部位の 1 行は料金のすぐ下に(本文と同じ 16px のまま余白だけ詰める) */
#skin-app .sk-plan-quickfacts { margin: 6px 16px 0; line-height: 1.5; }
/* v82(第2便 1): 料金の時点(※…)は、同じ注記の disclaimer / sk-plan-risk-note と同じ 13px。
   畳まずに料金の直下に置く(2366 行の「結果の本文は 16px」より後・高い詳細度で上書き)。 */
body[data-skin-stage="result"] #skin-app .sk-plan .sk-price-asof {
  margin: 6px 16px 0;
  font-size: 13px;
  line-height: 1.5;
}

/* 法的な注意は畳まず主導線の直下に置く。大きさは注記の 13px(design-brief §3-2)のまま、
   行間と余白だけ詰めて 1 画面目を空ける。 */
body[data-skin-stage="result"] #skin-app :is(.sk-plan-risk-note, .sk-plan-price-note) {
  margin-top: 8px;
  padding-top: 8px;
  line-height: 1.6;
}

/* ── 広い画面(981px 以上)の 2 カラムの置き場所を、新しい並びに合わせ直す ──
   1253〜1258 行の行番号は v82 より前の並び(注記 → 主導線 → 選んだ内容)に合わせたもので、
   そのままだと「もう一度チェックする」が比較表より上に出る。左= 判断に使う列
   (料金 → ほかのプラン → 比較 → 挿絵)、右= 行動と注意の列(主導線 → 法的注意 →
   参考情報 → 折りたたみ)にして、電話の並びと同じ順に読めるようにする。 */
@media (min-width: 981px) {
  body[data-skin-stage="result"] #skin-app .sk-result-stack > .sk-course-section,
  body[data-skin-stage="result"] #skin-app .sk-result-stack > .sk-course-unavailable { grid-column: 1; grid-row: 1 / 4; }
  body[data-skin-stage="result"] #skin-app .sk-result-stack > .sk-next-actions { grid-column: 2; grid-row: 1; }
  body[data-skin-stage="result"] #skin-app .sk-result-stack > .sk-plan-risk-note { grid-column: 2; grid-row: 2; }
  body[data-skin-stage="result"] #skin-app .sk-result-stack > .disclaimer { grid-column: 2; grid-row: 3; }
  body[data-skin-stage="result"] #skin-app .sk-result-stack > .sk-other-plans { grid-column: 1; grid-row: 4; }
  body[data-skin-stage="result"] #skin-app .sk-result-stack > .sk-plan-comparison { grid-column: 1; grid-row: 5; }
  body[data-skin-stage="result"] #skin-app .sk-result-stack > .sk-result-details:not(.sk-other-details) { grid-column: 2; grid-row: 4; }
  body[data-skin-stage="result"] #skin-app .sk-result-stack > .sk-other-details { grid-column: 2; grid-row: 5; }
  body[data-skin-stage="result"] #skin-app .sk-result-stack > .sk-result-art-row { grid-column: 1; grid-row: 6; }
  body[data-skin-stage="result"] #skin-app .sk-result-stack > .sk-chat-disclosure { grid-column: 2; grid-row: 6; }
  body[data-skin-stage="result"] #skin-app .sk-result-stack > .sk-restart { grid-column: 1 / -1; grid-row: 7; }
}

/* ── 1 画面目を詰める(悩み型・ジュエル) ──
   2026-09-23(A-02): 上と同じく上下だけ詰める(左右は .sk-result-hero.sk-concern-hero の max-width と
   .sk-result-hero の中央寄せ・ガターに任せる。ジュエル 1280 で面 x0〜980・文字 x16、カード x182 とずれていた)。 */
#skin-app .sk-concern-hero { margin-block: 16px 12px; padding-block: 10px 8px; }
#skin-app .sk-concern-hero .sk-concern-desc { margin: 4px 0 0; line-height: 1.5; }
#skin-app .sk-concern-hero .sk-level { margin-top: 6px; }
#skin-app .sk-concern-hero .sk-level-scale { margin-top: 6px; }
#skin-app .sk-concern-hero .sk-level-caption { margin-top: 2px; line-height: 1.45; }
#skin-app .sk-treatment-section .sk-course-heading { min-height: 0; padding: 2px 0; }
#skin-app .sk-treatment-section .sk-course-heading h2 { font-size: 19px; }
#skin-app .sk-selection-notes { margin: 4px 0 0; padding: 6px 10px; }
#skin-app .sk-selection-note { line-height: 1.55; }
#skin-app .sk-treatment-list { margin-top: 6px; }
#skin-app .sk-treatment-facts { gap: 4px 12px; margin-top: 8px; }
#skin-app .sk-treatment-section .sk-plan-top { padding: 6px 16px 4px; }
#skin-app .sk-treatment-section .sk-treatment-pricebar { margin-top: 4px; }
#skin-app .sk-treatment-section .sk-plan-reason { padding-block: 8px; }

/* ── 1 画面目を詰める(医師相談型・両院) ──
   この面は 見出し+「医師にお伝えいただきたいこと」(畳まない)+主導線 の 3 つだけなので、
   見出しの前後の空きと確認事項のカードの内側だけを詰める(文字の大きさは変えない)。 */
body[data-skin-stage="referral"] #skin-app .sk-refer-hero { margin: 16px 0 12px; }
body[data-skin-stage="referral"] #skin-app .sk-referral-stack > .card:not(.sk-refer-hero) { padding-block: 13px; }
body[data-skin-stage="referral"] #skin-app .sk-referral-stack > .card > .card-title { margin-bottom: 10px; }
body[data-skin-stage="referral"] #skin-app .sk-cautions > li { line-height: 1.65; }
/* 2026-09-23(A-07): v82 で見出しの下の 1 行を外してから、見出しの帯は見出しぶん(35〜63px)の高さしか無く、
   右上の装飾(90px・SP 48px)が帯の下へはみ出して次のカードの下に隠れ、灰色の四角の切れ端に見えていた。
   装飾は帯の高さの中に収める(上限は今までの大きさ)。帯の左右の余白 0 は触らない
   (test/skin-concern-ui-v75.test.js の意図)。 */
body[data-skin-stage="referral"] #skin-app .sk-refer-hero > .sk-refer-visual {
  top: 0; width: auto; height: 100%; max-height: 90px; aspect-ratio: 1 / 1;
}
body[data-skin-stage="referral"] #skin-app .sk-refer-hero > .sk-refer-visual svg { width: 100%; height: 100%; }
@media (max-width: 760px) {
  body[data-skin-stage="referral"] #skin-app .sk-refer-hero > .sk-refer-visual { max-height: 48px; }
}

/* 施術カードで繰り返していた共通の言い回し(v82 の 1 か所化) */
#skin-app .sk-reason-lead {
  margin: 6px 0 0;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

/* 段階に合わせた結果の絵(正方形)。読み込めないときは要素ごと消える(skin.js の onerror) */
#skin-app .sk-result-art-row .sk-result-art-level {
  width: 150px;
  aspect-ratio: 1;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}

/* ── 指で触れる端末では、選択肢の hover を出さない(第3便、納品前検査 N2) ──
   S1 の hover 規則は (hover: hover) and (pointer: fine) の中にあり、本物の電話(hover: none)には
   最初から効かない。ただし hover も使える端末(Windows のタッチ画面・iPad+トラックパッド)では
   このメディアクエリが真のままなので、指で選んで自動で次の設問へ進んだ後も指の位置に :hover が
   残り、未選択の選択肢の枠だけが hover の色(ダビデ rgb(63,102,173) / ジュエル rgb(194,73,111))に
   なっていた。skin.js が最初のタッチ(pointerType='touch')で html に sk-touch-input を付けるので、
   その間だけ未選択の選択肢の枠・影を既定(--line-strong / none)に戻す。
   選択中(.sk-selected / .active)の見た目と、マウスだけの端末の hover は変えない。 */
html.sk-touch-input #skin-app .sk-options .q-option:hover:not(.sk-selected),
html.sk-touch-input #skin-app .sk-scale-cards .q-option.sk-scale-card:hover:not(.sk-selected),
html.sk-touch-input #skin-app .sk-chips .sk-part-choice:hover:not(.active) {
  border-color: var(--line-strong);
  box-shadow: none;
}
/* 部位カード以外の札(.chip)は既定の枠が --line-control なので、そちらに戻す。 */
html.sk-touch-input #skin-app .sk-chips button.chip:not(.sk-part-choice):hover:not(.active) {
  border-color: var(--line-control);
  box-shadow: none;
}

/* ══ v83(2026-09-15) 悩み型の法的注意を 1 文ずつに(P-23)══════════════════
 * gemini 文言監査 #14: 「いずれのメニューも自由診療（保険適用外）です。施術後に…」の
 * 149 字が 1 段落で続き、375 では文字の壁になっていた。skin.js の riskNoteElement が
 * 1 文ずつの <li> に分けるので、ここは箇条書きの見た目だけを足す。
 * 文字の大きさ・色・上の区切り線は段落のときと同じ(.sk-plan-risk-note の規則を使う)。 */
#skin-app ul.sk-plan-risk-note {
  padding-left: 1.2em;
  list-style: disc;
}
#skin-app ul.sk-plan-risk-note > li { margin: 0 0 4px; }
#skin-app ul.sk-plan-risk-note > li:last-child { margin-bottom: 0; }

/* v83(P-20、gemini 文言監査 #8): 複数選択の案内は 1 文にまとめたので、太字と括弧の中を
 * 同じ行に流す(flex の並びのままだと括弧の中が必ず次の行に落ち、2 行に見えていた)。
 * 帯の地色・枠・大きさはそのまま。 */
#skin-app .sk-multi-banner { display: block; }
#skin-app .sk-multi-banner-sub { display: inline; }

/* ══ v83(2026-09-15) a11y の是正(P-45・P-46)═══════════════════════════════
 * a11y 計測(3-3/3-4= 隣接 8px 未満、8-2= 紙の最後がフッターだけ)。
 * 選択肢・尺度カードの間を 8px 以上にし、紙では下の余白を残さない。
 * 1 画面目の条件(K6= 主導線が 667 以内、P-05)を崩さないよう、増やすのは間だけ。 */
/* 元の指定と同じ幅の条件に重ねる(広い画面の間隔は変えない)。
 *  ・1388 行 @media (max-width:560px) の .sk-options gap:7px
 *  ・3042 行 @media (max-width:719px) の .sk-options.sk-scale-cards gap:8px 6px
 * 両端の説明(.sk-scale-endpoints.is-horizontal、gap 2px)は押せる部品ではなく文字なので
 * a11y の「隣り合う押せるものは 8px 以上」の対象外。ここでは触らない。 */
@media (max-width: 560px) {
  #skin-app .sk-options { gap: 8px; }
}
@media (max-width: 719px) {
  #skin-app .sk-options.sk-scale-cards { gap: 8px; }
}
@media print {
  body[data-skin-stage] { min-height: 0; }
  .v61-foot { padding-bottom: 0; margin-bottom: 0; break-inside: avoid; page-break-inside: avoid; }
  #skin-app .sk-result-stack > *, #skin-app .sk-referral-stack > * { break-inside: avoid; page-break-inside: avoid; }
}

/* ══ v83 依頼 11 B3(grok 依頼 5 の表 B-3、2026-09-16)══════════════════
 * 画面内の「‹ 戻る」で戻った設問で、「選択中」の札と選択肢の文が同じ行に並ぶため、
 * 375 では文の入る幅が 166px まで狭まり「赤くなったことがほと|んどない（赤みトラブ|ルなし）」と
 * 3 行に折れていた(実測: 文の桁 166px・3 行・札は真ん中の行の右)。
 * 折り返しを許して札を文の行の外(次の行の右端)へ出し、文に行全幅を渡す。
 * 文が 1 行に収まる幅(PC など)では折り返さないので、今までどおり札は同じ行の右端に残る。
 * 絵のカード(.sk-scale-card)のチェック丸は absolute なので対象外。
 * K5(操作前の選択中の見た目 0・タッチ直後の同座標= 既定色)には触らない。 */
/* 直し方: 560px 以下では札を行から外し、札の場所を下に確保する。
 * 番号と文の行は flex のままなので、選んでいない選択肢と文の左端がそろったまま。
 * (flex の折り返しでは札ではなく文自体が次の行へ落ち、grid にすると番号の桁幅を
 * 書き直すことになるため、札だけを流れから外した。561px 以上は今までどおり行の右端)。 */
@media (max-width: 560px) {
  #skin-app .sk-options:not(.sk-scale-cards) .q-option.sk-selected { position: relative; padding-bottom: 34px; }
  #skin-app .sk-options:not(.sk-scale-cards) .q-option.sk-selected::after {
    position: absolute; right: 12px; bottom: 8px; margin: 0;
  }
}

/* ══ v87（2026-09-16）送信を許可する四角の押せる広さ（S-05 の揃え）═════
 * 1803 行 の四角は 24×24px で、指で押す広さ（44×44px）に届かない。
 * 質問チャット（faq.css の v87 の節）と同じ形で、見た目は 24×24px のまま、
 * 擬似要素を四方に 10px ずつはみ出させて押せる範囲だけを 44×44px にする（24+10+10=44）。
 * 擬似要素は地色も線も持たないので画面には何も出ず、文字の位置も行の高さ（44px）も変わらない。 */
.analytics-consent-card label.row input[type="checkbox"] { position: relative; }
.analytics-consent-card label.row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  inset: -10px;
  display: block;
}
/* ══ v90 S-02（2026-09-17、横向きのスマホだけ：高さ 430px 以下）═════
 * 667×375 では、上側（上の見出しの帯 72 + 画面の上余白 24 + 「戻る」の行 44.8+8 +
 * 案内役と進み具合の行 64+10 + 事実の行 18.2+12 + カードの上余白 28）で 375px を使い切り、
 * 設問の見出しさえ 1 画面目に入らないことがあった（実測：見出しの下端 440.8、
 * 1 番目の選択肢の上端 502.9。ダビデ 16 問中 3 問・ジュエル 13 問中 4 問で見出しが画面の外）。
 * 高さが 430px 以下のときだけ上側を詰める。上の見出しの帯の高さ・文字の大きさ・行間・
 * 説明文の有無・釦の大きさ（44px 以上）は変えない。縦向き（375×667）や 768px 以上の画面には当たらない。 */
@media (max-height: 430px) {
  #skin-app { padding-top: 8px; }
  #skin-app .sk-qhead { margin-bottom: 4px; }
  #skin-app .sk-progress-row { margin-bottom: 6px; }
  /* 案内役はこの行の高さを決めているので 64→ 40px。 */
  #skin-app .sk-progress-row .v62-mascot { width: 40px; height: 40px; }
  #skin-app .sk-facts { margin-bottom: 6px; }
  #skin-app .sk-qcard { padding-top: 12px; }
  /* 挿絵は見出しの横にあり、見出しより高いため上の場所を決めている（144+札）。
     横向きのときだけ 96px（縦向きのスマホと同じ値）にして、選択肢も 1 画面目に入れる。 */
  #skin-app .sk-qcard.has-art > .sk-qfig { width: 96px; }
  #skin-app .sk-qfig > .sk-qart { width: 96px; height: 96px; }
}