/*
 * setup-guide.css — /setup ウィザードと /help リファレンスの共有スタイル（単一ソース）。
 * SoT: .claude/specs/HELP-SETUP-UNIFY-DESIGN.md（v2・方法A）
 * 元は setup.html のインライン <style>。/help でも同じ手順ブロック（su-*）を描くため外出しし、
 * setup.html・help.html の両方から link する（CSS の二重管理も避ける）。
 * setup 専用の chrome（topbar/wrap/progress/backbar/choices/actions/print など）も含むが、
 * /help に存在しないセレクタは inert（無害）。
 */
body { background:#FFFBF5; color:#1A1A2E; font-family:'Noto Sans JP', sans-serif; margin:0; }

/* ── ヘッダー（ロゴのみ・集中を妨げない） ── */
.su-topbar {
  display:flex; align-items:center; justify-content:space-between;
  max-width:560px; margin:0 auto; padding:16px 20px 0;
}
.su-logo { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#9E6307; font-size:1.05rem; text-decoration:none; }
.su-exit { color:#9CA3AF; font-size:0.8rem; text-decoration:none; padding:15px 10px; margin:-15px -10px -15px 0; }
.su-exit:hover { color:#6B7280; }

.su-wrap { max-width:560px; margin:0 auto; padding:20px; }

/* ── 進捗バー ── */
.su-progress-outer { height:6px; background:#F3F0EB; border-radius:3px; overflow:hidden; margin:8px 0 6px; }
.su-progress-inner { height:6px; background:#E8920B; border-radius:3px; width:0; transition:width .3s ease; }
.su-progress-label { font-size:0.72rem; color:#9CA3AF; margin:0 0 16px; }

/* ── 「← 戻る」バー（D1・全画面で前ビューへ・離脱しない） ── */
.su-backbar { margin:0 0 10px; }
.su-back {
  display:inline-flex; align-items:center; gap:4px; background:none; border:none;
  color:#6B7280; font-family:inherit; font-size:0.85rem; font-weight:600; cursor:pointer;
  padding:8px 10px 8px 2px; margin:-8px 0 0 -2px; min-height:44px;
}
.su-back:hover { color:#1A1A2E; }
.su-back svg { flex-shrink:0; }

/* ── 現在地（アプリ）バッジ（D2・F2・控えめ上質） ── */
.su-app {
  display:flex; flex-direction:column; gap:3px; border-radius:10px;
  padding:8px 12px; margin:0 0 14px; line-height:1.5;
}
.su-app-row { display:flex; align-items:center; gap:8px; }
.su-app-icon { font-size:1rem; }
.su-app-label { font-size:0.82rem; font-weight:700; }
.su-app-note { font-size:0.76rem; font-weight:500; opacity:.9; }
.su-app-ig  { background:#F3EEFB; color:#5B3FA0; border:1px solid #E0D4F5; }
.su-app-fb  { background:#EAF1FB; color:#1E4C8A; border:1px solid #CFE0F5; }
.su-app-ok  { background:#FFF4E4; color:#9E6307; border:1px solid #F5DFB0; }
.su-app-web { background:#F1F3F5; color:#495057; border:1px solid #DEE2E6; }

/* ── 時間目安バナー（最初のステップのみ） ── */
.su-time-est { font-size:0.82rem; color:#6B7280; background:#F3F0EB; border-radius:8px; padding:8px 12px; margin:0 0 14px; }

/* ── カード ── */
.su-card {
  background:#FFFFFF; border:1px solid #F3F0EB; border-radius:18px;
  padding:26px 22px 24px; box-shadow:0 4px 20px rgba(0,0,0,.05);
}
/* 現在地（ステップ名）は「いま何合目か」を示す要素。白地のブランド橙 #E8920B は 11.5px 太字で
   コントラスト 2.46:1（WCAG AA 4.5:1 に不足）＝一番読めてほしい所が一番薄いという逆転だった。
   admin/help で実績のある濃橙 #9E6307（白地 4.95:1）へ。ブランドの色味は保つ。 */
.su-eyebrow { font-size:0.72rem; font-weight:700; color:#9E6307; letter-spacing:.04em; margin:0 0 8px; }
.su-title { font-size:1.3rem; font-weight:700; color:#1A1A2E; margin:0 0 10px; line-height:1.45; }
.su-lead { font-size:0.9rem; color:#4B5563; line-height:1.75; margin:0 0 18px; }

/* ── 手順サブステップ（①②③） ── */
.su-substeps { list-style:none; padding:0; margin:0 0 18px; }
.su-substep { display:flex; gap:12px; align-items:flex-start; padding:9px 0; }
.su-substep-num {
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:#FDEED8; color:#9E6307; font-size:0.82rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; margin-top:1px;
}
.su-substep-text { font-size:0.92rem; color:#1A1A2E; line-height:1.7; flex:1; }
.su-substep-text strong { color:#9E6307; }
.su-kbd {
  display:inline-block; padding:1px 8px; border-radius:6px; background:#F3F0EB;
  color:#1A1A2E; font-weight:700; font-size:0.9em;
}

/* ── 手順の実スクリーンショット（写真ガイド・リポジトリ同梱） ── */
.su-photo { margin:8px auto 14px; max-width:280px; text-align:center; }
.su-photo img { width:100%; height:auto; border:1px solid #E4DED4; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.07); display:block; background:#FFF; }
/* 写真キャプションは「その写真で何をするか」の説明＝本文と同格に読ませる。#6B7280 は 4.39:1 で
   AA にわずかに届かなかったため #4B5563（白地 7.56:1）へ。 */
.su-photo figcaption { font-size:0.78rem; color:#4B5563; line-height:1.5; margin-top:6px; }

/* ── 「英語エラーが出ても成功」安心ブロック（F-3 視覚化） ── */
.su-reassure { background:#EAF7F0; border:1px solid #B7E0C9; border-radius:12px; padding:14px; margin:0 0 16px; }
/* details/summary 化（既定は閉）。開くまで中身の写真2枚を読ませない＝先回りで不安を積まない。 */
.su-reassure-head { font-weight:700; font-size:0.9rem; color:#0B835C; margin:0 0 10px; line-height:1.6; }
summary.su-reassure-head { cursor:pointer; margin:0; list-style:none; padding-left:22px; position:relative; }
summary.su-reassure-head::-webkit-details-marker { display:none; }
summary.su-reassure-head::before { content:'⚠️'; position:absolute; left:0; top:0; }
summary.su-reassure-head::after { content:' ▾'; }
details.su-reassure[open] summary.su-reassure-head { margin:0 0 10px; }
details.su-reassure[open] summary.su-reassure-head::after { content:' ▴'; }
/* 印刷・/help（静的マニュアル）では畳まず全文を出す */
.su-print-only details.su-reassure, .help-guide-body details.su-reassure { display:block; }
.su-reassure-imgs { display:block; }
.su-reassure-imgs .su-photo { max-width:280px; margin:12px auto 6px; }
.su-reassure-imgs .su-photo figcaption { font-size:0.78rem; }
.su-reassure-text { font-size:0.82rem; color:#37694F; line-height:1.7; margin:10px 0 0; }

/* ── 注記（不安の先回り） ── */
.su-note { font-size:0.8rem; color:#6B7280; line-height:1.7; margin:4px 0; display:flex; gap:6px; }
.su-note-box {
  background:#FFF8EC; border:1px solid #F5DFB0; border-radius:12px;
  padding:12px 14px; margin:0 0 16px;
}
.su-note-box .su-note { margin:2px 0; }

/* ── 軽量注意（写真に写り込んだ「脇道ボタン」をその場で止める・1行） ── */
.su-mini-warn {
  display:flex; gap:6px; align-items:flex-start;
  font-size:0.8rem; line-height:1.65; color:#8A4B0B;
  background:#FFF6E9; border:1px solid #F3D9AE; border-radius:10px;
  padding:9px 11px; margin:0 0 14px;
}
.su-mini-warn strong { color:#7A3E06; }

/* ── 罠警告（間違えやすい所を控えめに強調・§G8） ── */
.su-warn {
  background:#FFF4E5; border:1px solid #F0B366; border-left:4px solid #E8920B;
  border-radius:12px; padding:12px 14px; margin:0 0 16px;
  font-size:0.84rem; color:#7A4A05; line-height:1.8;
}
.su-warn strong { color:#9E6307; }
.su-warn-head { display:flex; gap:6px; align-items:center; font-weight:700; color:#9E6307; margin:0 0 4px; }

/* ── ヒント（別端末で開く/印刷の導線） ── */
.su-tip { background:#F4F8FF; border:1px solid #D3E3F7; border-radius:12px; padding:12px 14px; margin:0 0 16px; }
.su-tip-lead { font-size:0.82rem; color:#3B5573; line-height:1.8; margin:0 0 10px; }
.su-tip-lead strong { color:#1E3A5F; }
.su-url { font-weight:700; color:#1E3A5F; background:#E4EEFB; border-radius:6px; padding:1px 6px; white-space:nowrap; }

/* ── なぜ？折りたたみ ── */
.su-why { border:1px solid #F3F0EB; border-radius:12px; background:#FCFAF6; padding:2px 14px; margin:0 0 18px; }
.su-why summary { cursor:pointer; font-weight:700; color:#1A1A2E; font-size:0.9rem; padding:12px 0; list-style:none; display:flex; align-items:center; gap:8px; }
.su-why summary::-webkit-details-marker { display:none; }
.su-why[open] summary { padding-bottom:4px; }
.su-why p { font-size:0.86rem; color:#4B5563; line-height:1.8; margin:0 0 12px; }

/* ── ボタン ── */
.su-actions { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.su-btn {
  width:100%; min-height:52px; border:none; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:1rem; font-weight:700; padding:12px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; box-sizing:border-box;
}
.su-btn-primary { background:#E8920B; color:#1A1A2E; }
.su-btn-primary:hover { background:#D4820A; }
.su-btn-primary:disabled { background:#E4D8C4; cursor:not-allowed; }
.su-btn-ghost { background:#FFFFFF; color:#6B7280; border:1px solid #E4DED4; font-weight:600; font-size:0.9rem; min-height:44px; }
.su-btn-ghost:hover { background:#FAF7F2; }
.su-sub-actions { display:flex; gap:8px; margin-top:12px; }
.su-sub-actions .su-btn-ghost { flex:1; font-size:0.82rem; min-height:44px; }

.su-error { color:#DC2626; font-size:0.85rem; line-height:1.6; margin:10px 0 0; }
.su-help-foot { font-size:0.8rem; color:#6B7280; line-height:1.7; text-align:center; margin:20px 4px 0; }
.su-help-foot a { color:#9E6307; font-weight:600; }

/* ── 完了画面 ── */
.su-done-icon {
  width:68px; height:68px; border-radius:50%; background:#D9F2E5;
  display:flex; align-items:center; justify-content:center; margin:6px auto 16px;
}

/* ── 診断の選択肢 ── */
.su-choices { display:flex; flex-direction:column; gap:10px; margin:6px 0 0; }
.su-choice {
  width:100%; text-align:left; background:#FFFFFF; border:1.5px solid #E4DED4;
  border-radius:12px; padding:15px 16px; font-family:inherit; font-size:0.95rem;
  font-weight:600; color:#1A1A2E; cursor:pointer; min-height:52px; line-height:1.5;
}
.su-choice:hover { border-color:#E8920B; background:#FFFBF5; }
.su-choice small { display:block; font-weight:400; color:#6B7280; font-size:0.78rem; margin-top:3px; }

/* ── ② 共有ボタン / コンビニ印刷ガイド（スマホ1台） ── */
.su-tip-btns { display:flex; flex-wrap:wrap; gap:8px; }
.su-share-btn { white-space:nowrap; }
.su-konbini {
  border:1px solid #E4DED4; border-radius:12px; background:#FFFFFF;
  padding:0 16px; margin:0 0 16px;
}
.su-konbini > summary {
  cursor:pointer; font-weight:700; color:#1A1A2E; font-size:0.9rem;
  list-style:none; padding:14px 0; display:flex; align-items:center;
}
.su-konbini > summary::-webkit-details-marker { display:none; }
.su-konbini[open] > summary { border-bottom:1px solid #F3F0EB; }
.su-konbini-body { padding:8px 0 14px; }
.su-konbini-lead { font-size:0.85rem; color:#4B5563; line-height:1.7; margin:4px 0 12px; }
.su-konbini-links { font-size:0.8rem; color:#6B7280; line-height:1.8; margin:10px 0 0; }
.su-konbini-links a { color:#9E6307; font-weight:600; }

/* ── 印刷（全手順マニュアル） ── */
.su-print-only { display:none; }
@media print {
  body { background:#fff; }
  .su-topbar, .su-progress-outer, .su-progress-label, .su-actions, .su-sub-actions,
  .su-help-foot, .su-why, .su-tip, .su-exit, .su-backbar, .su-app, .su-time-est { display:none !important; }
  .su-card { border:none; box-shadow:none; padding:0; }
  /* live 画面（診断や現在の1ステップ）は隠し、印刷は全手順マニュアルのみ出す */
  #su-root > *:not(.su-print-only) { display:none !important; }
  .su-print-only { display:block !important; }
  .su-print-title { font-size:1.35rem; margin:0 0 6px; }
  .su-print-intro { font-size:0.9rem; color:#333; line-height:1.7; margin:0 0 14px; }
  .su-print-foot { font-size:0.82rem; color:#444; line-height:1.6; margin:14px 0 0; }
  .su-print-chapter { margin:0 0 18px; }
  .su-print-h2 { font-size:1.12rem; margin:18px 0 8px; padding-bottom:4px; border-bottom:2px solid #E8920B; page-break-after:avoid; }
  .su-print-num { display:inline-block; min-width:1.5em; height:1.5em; line-height:1.5em; text-align:center; background:#E8920B; color:#fff; border-radius:999px; margin-right:8px; font-size:0.85rem; }
  .su-print-only .su-title { font-size:1rem; margin:12px 0 6px; page-break-after:avoid; }
  .su-print-only .su-lead { font-size:0.9rem; line-height:1.7; margin:0 0 8px; }
  /* .su-mini-warn＝「押してはいけないボタン」の1行警告。紙でページを跨いで割れると罠回避が分断される */
  .su-print-only .su-substep, .su-print-only .su-note-box, .su-print-only .su-note,
  .su-print-only .su-warn, .su-print-only .su-mini-warn { page-break-inside:avoid; }
  /* 印刷は背景色が落ちる想定なので、枠線を濃くして警告が本文に埋もれないようにする */
  .su-print-only .su-mini-warn { border-color:#B06A0C; }
  /* 印刷でも写真・連携エラー説明を表示（写真を見ながら紙で追える完全マニュアル） */
  .su-print-only .su-photo { display:block !important; margin:8px 0; page-break-inside:avoid; }
  .su-print-only .su-photo img { max-width:58%; height:auto; border:1px solid #ddd; border-radius:6px; }
  .su-print-only .su-photo figcaption { font-size:0.78rem; color:#555; margin-top:3px; }
  .su-print-only .su-reassure { display:block !important; }
}

/* ── [data-insta-guide]（dashboard/settings のプロ切替ガイド・SoT tplPro を staticStepHtml で描画） ── */
.insta-guide { border:1px solid #F3F0EB; border-radius:12px; background:#FFFFFF; padding:14px 18px; margin:8px 0; }
.insta-guide > .insta-guide-summary { cursor:pointer; font-weight:700; color:#1A1A2E; font-size:15px; list-style:none; display:flex; align-items:center; gap:8px; }
.insta-guide > .insta-guide-summary::-webkit-details-marker { display:none; }
.insta-guide-body { margin-top:14px; }
.insta-guide-body .su-title { font-size:1.05rem; margin:0 0 8px; }
.insta-guide-foot { font-size:0.82rem; color:#4B5563; line-height:1.7; margin:14px 0 0; }