/* 共通の部品（コンポーネント）。2026-10-08 卓馬「UI/UXを根底から見直して完成度を上げる」の土台。
 *
 * ・クラスはすべて ds- で始める。今ある画面のクラスとぶつけないため（既存の画面は phase 2 で順に置き換える）
 * ・値は tokens.css の変数だけを使う（直書きしない）
 * ・CSP で style 属性が使えないので、状態は クラス・aria-* ・data-* で切り替える
 * ・使い方と「やってよい／いけない」は docs/DESIGN-SYSTEM.md
 *
 * 末尾の「全体のそろえ」だけは既存の画面にも効く（どれも見た目を壊さない範囲：
 * 古い変数を同じ値のトークンへつなぐ／キーボードの枠／ダイアログの後ろ／エラーの知らせ）。
 * 読む順番：tokens.css → 各画面の css → components.css → visual.css（visual.css は最後のまま）
 */

/* ════ ボタン ════════════════════════════════════════════════ */
.ds-btn{
 display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-sp-2);
 min-height:var(--ds-control-h);padding:0 var(--ds-sp-5);border-radius:var(--ds-r-pill);
 border:1px solid var(--ds-border-strong);background:var(--ds-surface);color:var(--ds-accent);
 font:var(--ds-fw-medium) var(--ds-fs-md)/1.2 var(--ds-font);letter-spacing:.01em;text-decoration:none;
 cursor:pointer;white-space:nowrap;box-sizing:border-box;
 transition:background-color var(--ds-dur-fast) var(--ds-ease),box-shadow var(--ds-dur-fast) var(--ds-ease),border-color var(--ds-dur-fast) var(--ds-ease),transform var(--ds-dur-fast) var(--ds-ease)}
.ds-btn:hover:not(:disabled){background:var(--ds-accent-softer);border-color:var(--ds-accent-border)}
.ds-btn:active:not(:disabled){transform:translateY(1px)}
.ds-btn:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds-btn:disabled,.ds-btn[aria-disabled=true]{cursor:not-allowed;background:var(--ds-locked-bg);color:var(--ds-text-disabled);border-color:transparent;box-shadow:none}
/* 主な操作：1画面に1つだけ */
.ds-btn--primary{background:var(--ds-accent);border-color:var(--ds-accent);color:var(--ds-text-on-accent);box-shadow:var(--ds-shadow-primary)}
.ds-btn--primary:hover:not(:disabled){background:var(--ds-accent-hover);border-color:var(--ds-accent-hover)}
.ds-btn--primary:active:not(:disabled){background:var(--ds-accent-pressed)}
/* 2番目の操作 */
.ds-btn--secondary{background:var(--ds-surface);border-color:var(--ds-border-strong);color:var(--ds-accent)}
/* 3番目以下（文字だけ） */
.ds-btn--ghost{background:transparent;border-color:transparent;color:var(--ds-accent);padding:0 var(--ds-sp-3)}
.ds-btn--ghost:hover:not(:disabled){background:var(--ds-accent-soft);border-color:transparent}
/* 消す・やめる（戻せない操作だけ） */
.ds-btn--danger{background:var(--ds-surface);border-color:var(--ds-danger-border);color:var(--ds-danger)}
.ds-btn--danger:hover:not(:disabled){background:var(--ds-danger-bg);border-color:var(--ds-danger)}
.ds-btn--danger.ds-btn--primary{background:var(--ds-danger);border-color:var(--ds-danger);color:var(--ds-text-on-accent);box-shadow:none}
/* 大きさ */
.ds-btn--lg{min-height:var(--ds-control-h-lg);padding:0 var(--ds-sp-8);font-size:var(--ds-fs-lg);font-weight:var(--ds-fw-bold)}
.ds-btn--sm{min-height:32px;padding:0 var(--ds-sp-3);font-size:var(--ds-fs-sm)}
.ds-btn--block{display:flex;width:100%}
/* お金・時間がかかるボタン：2行（上＝何をするか／下＝約◯円・約◯分） */
.ds-btn--stacked{flex-direction:column;gap:2px;padding-top:var(--ds-sp-2);padding-bottom:var(--ds-sp-2);line-height:1.25}
.ds-btn__meta{font-size:var(--ds-fs-xs);font-weight:var(--ds-fw-regular);opacity:.9;letter-spacing:0}
/* 作っている間（aria-busy="true" を付ける） */
.ds-btn[aria-busy=true]{cursor:progress;position:relative;color:transparent!important}
.ds-btn[aria-busy=true]::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
 border:2px solid currentColor;border-color:var(--ds-text-on-accent) transparent var(--ds-text-on-accent) transparent;animation:ds-spin .8s linear infinite}
.ds-btn--secondary[aria-busy=true]::after,.ds-btn--ghost[aria-busy=true]::after{border-color:var(--ds-accent) transparent var(--ds-accent) transparent}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* 費用・時間の札（有料の操作のすぐ横か下に必ず置く） */
.ds-cost{display:inline-flex;align-items:center;gap:var(--ds-sp-1);font:var(--ds-fw-medium) var(--ds-fs-sm)/1.4 var(--ds-font);color:var(--ds-text-2);font-variant-numeric:tabular-nums}
.ds-cost::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;border:1.5px solid currentColor;
 background:linear-gradient(currentColor,currentColor) 50% 30%/1.5px 35% no-repeat,linear-gradient(currentColor,currentColor) 62% 50%/30% 1.5px no-repeat;opacity:.75}
.ds-cost--free{color:var(--ds-success)}
/* AIの残高切れ（2026-10-09・balance-guard.js）。押せるままにして薄くし、横に1行の知らせを出す（入金後に押せないと戻ったと分からない） */
button.ds-balance-out{opacity:.55;filter:saturate(.35)}
.ds-balance-note{flex-basis:100%;margin:var(--ds-sp-1) 0 0;font:var(--ds-fw-bold) var(--ds-fs-sm)/1.5 var(--ds-font);color:var(--ds-danger)}

/* 操作の並び */
.ds-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-sp-3)}
.ds-actions--end{justify-content:flex-end}
.ds-actions--stack{flex-direction:column;align-items:stretch}

/* ════ カード ═══════════════════════════════════════════════ */
.ds-card{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);padding:var(--ds-sp-5);box-sizing:border-box;min-width:0}
.ds-card--raised{border-color:transparent;box-shadow:var(--ds-shadow-2)}
.ds-card--flat{background:var(--ds-surface-2);border-color:transparent}
.ds-card--interactive{cursor:pointer;transition:box-shadow var(--ds-dur) var(--ds-ease),border-color var(--ds-dur) var(--ds-ease),transform var(--ds-dur) var(--ds-ease)}
.ds-card--interactive:hover{border-color:var(--ds-accent-border);box-shadow:var(--ds-shadow-2);transform:translateY(-1px)}
.ds-card--interactive:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ds-sp-3);margin-bottom:var(--ds-sp-3)}
.ds-card__title{margin:0;font:var(--ds-fw-bold) var(--ds-fs-lg)/var(--ds-lh-tight) var(--ds-font);color:var(--ds-text)}
.ds-card__desc{margin:var(--ds-sp-1) 0 0;font-size:var(--ds-fs-sm);line-height:var(--ds-lh);color:var(--ds-text-2)}
.ds-card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-sp-3);margin-top:var(--ds-sp-4);padding-top:var(--ds-sp-4);border-top:1px solid var(--ds-border)}

/* 「次にやること」：画面の主役（1画面に1つ）。主なボタンは中に1つだけ */
.ds-next{position:relative;display:grid;gap:var(--ds-sp-4);padding:var(--ds-sp-6);border-radius:var(--ds-r-xl);
 background:linear-gradient(135deg,var(--ds-surface) 0%,var(--ds-surface) 55%,var(--ds-accent-softer) 100%);
 border:1px solid var(--ds-accent-border);box-shadow:var(--ds-shadow-2);box-sizing:border-box;min-width:0;overflow:hidden}
.ds-next__eyebrow{justify-self:start}
.ds-next__title{margin:0;font:var(--ds-fw-bold) var(--ds-fs-2xl)/var(--ds-lh-tight) var(--ds-font);color:var(--ds-text);letter-spacing:-.01em;text-wrap:balance;word-break:auto-phrase}   /* 「…教えましょ/う」の1文字だけの行を作らない（2026-10-09） */
.ds-next__text{margin:0;max-width:44em;font-size:var(--ds-fs-md);line-height:var(--ds-lh);color:var(--ds-text-2)}
.ds-next__action{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-sp-3) var(--ds-sp-4)}
.ds-next__more{font-size:var(--ds-fs-sm)}

/* ════ 札（チップ）・数（バッジ） ═════════════════════════════ */
.ds-chip{display:inline-flex;align-items:center;gap:var(--ds-sp-1);min-height:24px;padding:0 var(--ds-sp-3);border-radius:var(--ds-r-pill);
 font:var(--ds-fw-medium) var(--ds-fs-xs)/1.2 var(--ds-font);white-space:nowrap;
 background:var(--ds-surface-2);color:var(--ds-text-2);border:1px solid transparent;box-sizing:border-box}
.ds-chip--success{background:var(--ds-success-bg);color:var(--ds-success)}
.ds-chip--warning{background:var(--ds-warning-bg);color:var(--ds-warning)}
.ds-chip--danger{background:var(--ds-danger-bg);color:var(--ds-danger)}
.ds-chip--info{background:var(--ds-info-bg);color:var(--ds-info)}
.ds-chip--recommend{background:var(--ds-recommend-bg);color:var(--ds-recommend);border-color:var(--ds-recommend-border)}
.ds-chip--recommend::before{content:"✦";font-size:10px}
.ds-chip--locked{background:var(--ds-locked-bg);color:var(--ds-locked)}
.ds-chip--outline{background:var(--ds-surface);border-color:var(--ds-border-strong)}
.ds-chip__dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.ds-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--ds-r-pill);
 background:var(--ds-accent);color:var(--ds-text-on-accent);font:var(--ds-fw-bold) 11px/1 var(--ds-font-num);font-variant-numeric:tabular-nums;box-sizing:border-box}
.ds-badge--muted{background:var(--ds-surface-3);color:var(--ds-text-2)}

/* ════ 選ぶカード（集客／採用、目的、業界 など） ══════════════════
 * <label class="ds-choice"><input type="radio" name=".."><span class="ds-choice__body">
 *   <b class="ds-choice__title">集客</b><span class="ds-choice__desc">お客様を集める広告</span></span></label>
 * button で作るときは aria-pressed="true" で選んだ状態にする */
.ds-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--ds-sp-3)}
.ds-choice{position:relative;display:flex;align-items:flex-start;gap:var(--ds-sp-3);padding:var(--ds-sp-4);border-radius:var(--ds-r-lg);
 border:1.5px solid var(--ds-border-strong);background:var(--ds-surface);cursor:pointer;text-align:left;box-sizing:border-box;min-width:0;
 font:inherit;color:var(--ds-text);box-shadow:0 1px 0 var(--ds-border);
 transition:border-color var(--ds-dur-fast) var(--ds-ease),background-color var(--ds-dur-fast) var(--ds-ease),box-shadow var(--ds-dur-fast) var(--ds-ease)}
.ds-choice:hover{border-color:var(--ds-accent-border);background:var(--ds-accent-softer)}
.ds-choice>input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--ds-accent)}
.ds-choice:focus-within,.ds-choice:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds-choice:has(>input:checked),.ds-choice[aria-pressed=true],.ds-choice[aria-checked=true]{border-color:var(--ds-accent);background:var(--ds-accent-soft);box-shadow:0 0 0 1px var(--ds-accent) inset}
.ds-choice:has(>input:disabled),.ds-choice[aria-disabled=true]{cursor:not-allowed;opacity:.55}
.ds-choice__body{display:grid;gap:2px;min-width:0}
.ds-choice__title{font:var(--ds-fw-bold) var(--ds-fs-md)/1.4 var(--ds-font)}
.ds-choice__desc{font-size:var(--ds-fs-sm);line-height:1.55;color:var(--ds-text-2)}
.ds-choice__tag{position:absolute;top:-10px;left:var(--ds-sp-3)}

/* ════ 入力 ════════════════════════════════════════════════ */
.ds-field{display:grid;gap:6px;min-width:0;margin:0 0 var(--ds-sp-4)}
.ds-label{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-sp-2);font:var(--ds-fw-bold) var(--ds-fs-sm)/1.4 var(--ds-font);color:var(--ds-text)}
.ds-req{font-size:11px;font-weight:var(--ds-fw-bold);color:var(--ds-danger);background:var(--ds-danger-bg);border-radius:var(--ds-r-sm);padding:1px 6px}
.ds-opt{font-size:11px;font-weight:var(--ds-fw-regular);color:var(--ds-text-3)}
.ds-input,.ds-select,.ds-textarea{display:block;width:100%;min-height:var(--ds-control-h);padding:var(--ds-sp-2) var(--ds-sp-3);box-sizing:border-box;
 border:1px solid var(--ds-border-strong);border-radius:var(--ds-r-md);background:var(--ds-surface);color:var(--ds-text);
 font:var(--ds-fs-md)/1.5 var(--ds-font);transition:border-color var(--ds-dur-fast) var(--ds-ease),box-shadow var(--ds-dur-fast) var(--ds-ease)}
.ds-textarea{min-height:96px;resize:vertical;line-height:var(--ds-lh)}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--ds-text-disabled)}
.ds-input:hover,.ds-select:hover,.ds-textarea:hover{border-color:var(--ds-text-3)}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{outline:none;border-color:var(--ds-accent);box-shadow:var(--ds-focus)}
.ds-help{margin:0;font-size:var(--ds-fs-xs);line-height:1.55;color:var(--ds-text-3)}
.ds-field--ok .ds-help{color:var(--ds-success)}
.ds-field--error .ds-input,.ds-field--error .ds-select,.ds-field--error .ds-textarea{border-color:var(--ds-danger)}
.ds-field--error .ds-help{color:var(--ds-danger)}

/* ════ 進み具合 ═════════════════════════════════════════════ */
.ds-progress{display:grid;gap:6px;min-width:0}
.ds-progress__label{display:flex;justify-content:space-between;gap:var(--ds-sp-3);font-size:var(--ds-fs-sm);color:var(--ds-text-2);font-variant-numeric:tabular-nums}
/* <progress class="ds-progress__bar" max="100" value="60"> を使う（幅を style で書かなくてよい） */
.ds-progress__bar{appearance:none;-webkit-appearance:none;display:block;width:100%;height:8px;border:0;border-radius:var(--ds-r-pill);background:var(--ds-surface-3);overflow:hidden;color:var(--ds-accent)}
.ds-progress__bar::-webkit-progress-bar{background:var(--ds-surface-3);border-radius:var(--ds-r-pill)}
.ds-progress__bar::-webkit-progress-value{background:var(--ds-accent);border-radius:var(--ds-r-pill);transition:width var(--ds-dur-slow) var(--ds-ease)}
.ds-progress__bar::-moz-progress-bar{background:var(--ds-accent);border-radius:var(--ds-r-pill)}
.ds-progress--success .ds-progress__bar::-webkit-progress-value{background:var(--ds-success)}
.ds-progress--success .ds-progress__bar::-moz-progress-bar{background:var(--ds-success)}

/* ════ 手順（ステッパー） ═══════════════════════════════════
 * <ol class="ds-stepper"><li class="ds-step is-done">…</li><li class="ds-step" aria-current="step">…</li>… */
.ds-stepper{display:flex;align-items:flex-start;gap:0;margin:0;padding:0;list-style:none;counter-reset:ds-step;min-width:0}
.ds-step{position:relative;flex:1 1 0;display:grid;justify-items:center;gap:6px;min-width:0;text-align:center;counter-increment:ds-step;
 font:var(--ds-fw-medium) var(--ds-fs-sm)/1.35 var(--ds-font);color:var(--ds-text-3)}
.ds-step::before{content:counter(ds-step);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-sizing:border-box;
 background:var(--ds-surface);border:2px solid var(--ds-border-strong);color:var(--ds-text-3);font:var(--ds-fw-bold) 13px/1 var(--ds-font-num);position:relative;z-index:1}
.ds-step+.ds-step::after{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:var(--ds-border-strong)}
.ds-step.is-done{color:var(--ds-success)}
.ds-step.is-done::before{content:"✓";background:var(--ds-success);border-color:var(--ds-success);color:var(--ds-text-on-accent)}
.ds-step.is-done+.ds-step::after,.ds-step.is-done+.ds-step.is-done::after{background:var(--ds-success)}
.ds-step[aria-current=step]{color:var(--ds-accent);font-weight:var(--ds-fw-bold)}
.ds-step[aria-current=step]::before{background:var(--ds-accent);border-color:var(--ds-accent);color:var(--ds-text-on-accent);box-shadow:0 0 0 4px var(--ds-accent-soft)}
.ds-step a,.ds-step button{all:unset;cursor:pointer}
.ds-step a:focus-visible,.ds-step button:focus-visible{box-shadow:var(--ds-focus);border-radius:var(--ds-r-sm)}
/* 縦の手順（スマホ・説明つき） */
.ds-stepper--vertical{flex-direction:column;gap:var(--ds-sp-4)}
.ds-stepper--vertical .ds-step{display:grid;grid-template-columns:28px 1fr;justify-items:start;text-align:left;column-gap:var(--ds-sp-3);width:100%}
.ds-stepper--vertical .ds-step+.ds-step::after{top:-16px;left:13px;right:auto;width:2px;height:16px}

/* ════ 節の見出し ═══════════════════════════════════════════ */
.ds-section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--ds-sp-2) var(--ds-sp-4);margin:0 0 var(--ds-sp-4)}
.ds-section-head__title{margin:0;font:var(--ds-fw-bold) var(--ds-fs-xl)/var(--ds-lh-tight) var(--ds-font);color:var(--ds-text)}
.ds-section-head__desc{margin:var(--ds-sp-1) 0 0;font-size:var(--ds-fs-sm);color:var(--ds-text-3);line-height:1.6}
.ds-page-title{margin:0;font:var(--ds-fw-bold) var(--ds-fs-2xl)/var(--ds-lh-tight) var(--ds-font);color:var(--ds-text);letter-spacing:-.01em}

/* ════ 空の状態 ═════════════════════════════════════════════
 * 絵（visual.css の spot-*）＋何が入るか＋最初の1歩のボタン1つ */
.ds-empty{display:grid;justify-items:center;gap:var(--ds-sp-3);padding:var(--ds-sp-10) var(--ds-sp-6);text-align:center;
 border:1.5px dashed var(--ds-border-strong);border-radius:var(--ds-r-lg);background:var(--ds-surface)}
.ds-empty__art{width:120px;height:96px;background-repeat:no-repeat;background-position:center;background-size:contain}
.ds-empty__title{margin:0;font:var(--ds-fw-bold) var(--ds-fs-lg)/1.4 var(--ds-font);color:var(--ds-text);text-wrap:balance;word-break:auto-phrase}
.ds-empty__text{margin:0;max-width:32em;font-size:var(--ds-fs-sm);line-height:var(--ds-lh);color:var(--ds-text-2)}

/* ════ 知らせ（画面の中）・トースト ════════════════════════════ */
.ds-alert{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:var(--ds-sp-3);padding:var(--ds-sp-3) var(--ds-sp-4);
 border-radius:var(--ds-r-md);border:1px solid var(--ds-info-border);background:var(--ds-info-bg);color:var(--ds-text);
 font-size:var(--ds-fs-sm);line-height:1.6;box-sizing:border-box}
.ds-alert::before{content:"i";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ds-info);color:var(--ds-text-on-accent);font:var(--ds-fw-bold) 12px/1 var(--ds-font-num);margin-top:1px}
.ds-alert__title{display:block;font-weight:var(--ds-fw-bold);margin-bottom:2px}
.ds-alert--success{border-color:var(--ds-success-border);background:var(--ds-success-bg)}
.ds-alert--success::before{content:"✓";background:var(--ds-success)}
.ds-alert--warning{border-color:var(--ds-warning-border);background:var(--ds-warning-bg)}
.ds-alert--warning::before{content:"!";background:var(--ds-warning)}
.ds-alert--error{border-color:var(--ds-danger-border);background:var(--ds-danger-bg)}
.ds-alert--error::before{content:"!";background:var(--ds-danger)}
.ds-toast-region{position:fixed;left:50%;bottom:var(--ds-sp-6);transform:translateX(-50%);z-index:var(--ds-z-toast);display:grid;gap:var(--ds-sp-2);width:min(480px,calc(100vw - 2 * var(--ds-gutter)));pointer-events:none}
.ds-toast{pointer-events:auto;display:flex;align-items:center;gap:var(--ds-sp-3);padding:var(--ds-sp-3) var(--ds-sp-4);border-radius:var(--ds-r-md);
 background:var(--ds-toast-bg);color:var(--ds-text-on-accent);box-shadow:var(--ds-shadow-3);font-size:var(--ds-fs-sm);line-height:1.5;animation:ds-toast-in var(--ds-dur) var(--ds-ease-out)}
.ds-toast--success{background:var(--ds-success)}
.ds-toast--error{background:var(--ds-danger)}
.ds-toast .ds-btn--ghost{color:var(--ds-text-on-accent);margin-left:auto}
@keyframes ds-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ════ 下に貼り付く操作の帯（長い入力の画面） ═══════════════════
 * 左＝今の状態の一言、右＝主なボタン1つ（＋2番目は ghost）。スマホでは主なボタンを全幅に */
.ds-actionbar{position:sticky;bottom:0;z-index:var(--ds-z-sticky);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-sp-3);
 padding:var(--ds-sp-3) var(--ds-sp-5);background:var(--ds-actionbar-bg);border-top:1px solid var(--ds-border);box-shadow:var(--ds-shadow-up);box-sizing:border-box}
.ds-actionbar__status{min-width:0;font-size:var(--ds-fs-sm);color:var(--ds-text-2)}

/* ════ 読み込み中の形 ═══════════════════════════════════════ */
.ds-skeleton{display:block;border-radius:var(--ds-r-sm);background:linear-gradient(90deg,var(--ds-surface-2) 25%,var(--ds-surface-3) 37%,var(--ds-surface-2) 63%);background-size:400% 100%;animation:ds-shimmer 1.4s ease infinite;min-height:12px}
@keyframes ds-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ════ 世界の帯（AIエージェントの部屋の上） ═════════════════════
 * 新しく作らない。部屋の上は agent-header.js（.agent-hdr）を使う。ここは帯の色をトークンにつなぐだけ */
.ds-world{background:linear-gradient(90deg,var(--ds-world-navy),var(--ds-world-navy-2));color:var(--ds-world-ink);border-bottom:2px solid var(--ds-world-gold)}

/* ════ 並べ方の小物 ═════════════════════════════════════════ */
.ds-stack{display:grid;gap:var(--ds-sp-4);min-width:0}
.ds-stack--sm{gap:var(--ds-sp-2)}.ds-stack--lg{gap:var(--ds-sp-6)}
.ds-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-sp-3);min-width:0}
.ds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--ds-grid-min,240px),1fr));gap:var(--ds-sp-4)}
.ds-num{font-family:var(--ds-font-num);font-variant-numeric:tabular-nums}
.ds-muted{color:var(--ds-text-3)}
.ds-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ════ スマホ（390px） ═════════════════════════════════════ */
@media (max-width:600px){
 .ds-next{padding:var(--ds-sp-5) var(--ds-sp-4)}
 .ds-next__title{font-size:var(--ds-fs-xl)}
 .ds-next__action .ds-btn--primary,.ds-actionbar .ds-btn--primary{width:100%}
 .ds-choice-grid{grid-template-columns:1fr}
 .ds-card{padding:var(--ds-sp-4)}
 .ds-actionbar{padding:var(--ds-sp-3) var(--ds-gutter)}
 .ds-stepper:not(.ds-stepper--vertical) .ds-step{font-size:var(--ds-fs-xs)}
 .ds-btn{min-height:var(--ds-touch)}
 /* 長いボタンの文字が枠と画面の外へはみ出していた（2026-10-09 監査：バルドの「プロンプターで開く（大きな文字・自動で流れる）」で横に35pxはみ出し）。
    画面の幅を超えるときだけ折り返す */
 .ds-btn{max-width:100%;white-space:normal;text-align:center;padding-top:var(--ds-sp-1);padding-bottom:var(--ds-sp-1);flex-shrink:0}
 /* 開く・たたむ（details の summary）は 20px ほどしかなく、指で押しにくかった。上下の余白だけ足す（:where で、画面ごとの指定があればそちらが勝つ） */
 :where(summary){padding-block:var(--ds-sp-3)}
}

/* ═══════════════════════════════════════════════════════════════════
 * 全体のそろえ（既存の画面にも効く。2026-10-08）
 * どれも「同じ値をトークンから読む」か「ばらばらだったものを1つにそろえる」だけ。画面の配置は変えない
 * ═══════════════════════════════════════════════════════════════════ */

/* 古い変数をトークンへつなぐ（値は今と同じ。これで色の出どころが1つになる）。
 * index の style.css は --ink / --line を別の意味で使っているので、別ページ（/seo・/youtube）だけにつなぐ */
:root{
 --g-primary:var(--ds-accent);--g-primary-hover:var(--ds-accent-hover);--g-on-primary:var(--ds-text-on-accent);
 --g-surface:var(--ds-surface);--g-container:var(--ds-surface-2);--g-container-high:var(--ds-surface-3);
 --g-text:var(--ds-text);--g-text-2:var(--ds-text-2);--g-outline-2:var(--ds-border-strong);
 --g-font:var(--ds-font);
}
.ds-page-seo,.ds-page-youtube{
 --blue:var(--ds-accent);--ink:var(--ds-text);--muted:var(--ds-text-3);--card:var(--ds-surface);
 --good:var(--ds-success);--warn:var(--ds-warning);--bad:var(--ds-danger);--line:var(--ds-border);
}

/* キーボードで動かしたときの枠を、全画面で同じ青の輪に（以前は灰・青・枠なしが混在）。ボタン・リンクだけ */
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}
/* 入力欄は今も青い枠で分かるので輪を足さない（クリックでも focus-visible になるため） */

/* 選んだ文字の色 */
::selection{background:var(--ds-accent-soft);color:var(--ds-text)}

/* ダイアログの後ろを1つに（以前は6通りの灰と紺。google.css の !important より後に読むので勝つ） */
dialog::backdrop{background:var(--ds-scrim)!important}

/* エラーの知らせ（app.js の #err-help と /youtube の #yt-err は同じ .err-help）。2つの見た目がずれていたのでそろえる */
dialog.err-help{width:min(520px,calc(100vw - 2 * var(--ds-gutter)));border:0;border-top:4px solid var(--ds-danger);border-radius:var(--ds-r-xl);
 padding:var(--ds-sp-6);box-shadow:var(--ds-shadow-3);color:var(--ds-text);font:var(--ds-fs-md)/var(--ds-lh) var(--ds-font);box-sizing:border-box}
dialog.err-help h2{margin:0 0 var(--ds-sp-2);font:var(--ds-fw-bold) var(--ds-fs-lg)/1.45 var(--ds-font);color:var(--ds-danger)}
dialog.err-help .err-help-head{display:flex;align-items:center;gap:var(--ds-sp-3);margin-bottom:var(--ds-sp-2)}
dialog.err-help .err-help-head h2{margin:0}
dialog.err-help .err-help-icon{background:var(--ds-danger-bg);color:var(--ds-danger)}
dialog.err-help .err-help-reason,dialog.err-help>p{margin:0 0 var(--ds-sp-3);color:var(--ds-text-2)}
dialog.err-help .err-help-next,dialog.err-help .err-next{background:var(--ds-surface-2);border-radius:var(--ds-r-md);padding:var(--ds-sp-3) var(--ds-sp-4);margin:0 0 var(--ds-sp-3)}
dialog.err-help .err-help-next strong,dialog.err-help .err-next strong{color:var(--ds-text);font-size:var(--ds-fs-sm)}
dialog.err-help ol{margin:var(--ds-sp-1) 0 0;padding-left:1.4em}
dialog.err-help details{margin:0 0 var(--ds-sp-4);font-size:var(--ds-fs-xs);color:var(--ds-text-3)}
dialog.err-help details code{display:block;margin-top:var(--ds-sp-2);padding:var(--ds-sp-2) var(--ds-sp-3);border-radius:var(--ds-r-sm);background:var(--ds-surface-2);white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--ds-fs-xs)}
dialog.err-help .err-help-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--ds-sp-2)}
dialog.err-help button{min-height:var(--ds-control-h);padding:0 var(--ds-sp-5);border-radius:var(--ds-r-pill);font:var(--ds-fw-medium) var(--ds-fs-md)/1 var(--ds-font);cursor:pointer;
 border:1px solid var(--ds-border-strong);background:var(--ds-surface);color:var(--ds-accent)}
dialog.err-help>button,dialog.err-help .err-help-close{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;background:var(--ds-accent);border-color:var(--ds-accent);color:var(--ds-text-on-accent)}
dialog.err-help>button{display:block;width:max-content;margin:0 0 0 auto}