:root {
    --ink: #1f2933;
    --muted: #66737f;
    --line: #d9e0e6;
    --paper: #f4f7f6;
    --surface: #fff;
    --brand: #126c5b;
    --brand-dark: #0b4b3f;
    --soft: #e8f4f1;
    --warning: #8a5a00;
    --warning-bg: #fff7df;
    --danger: #a12b2b;
    --shadow: 0 14px 34px rgba(30, 48, 43, .09);
}
* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; max-width: 100%; overflow-x: hidden; }
button, input, select { font: inherit; }
a { color: var(--brand); }
.registration-header { align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; gap: 20px; justify-content: space-between; padding: 22px max(20px, calc((100vw - 1120px) / 2)); }
.registration-header > *, .intro-panel > *, .card-heading > *, .integration-card { min-width: 0; }
.registration-header h1 { font-size: 24px; margin: 2px 0 5px; }
.registration-header p { color: var(--muted); margin: 0; }
.eyebrow { color: var(--brand) !important; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* いまどの店舗を登録しているか。以前はこれが画面のどこにも無く、対象がすり替わっても
   （別タブの管理画面にセッションを奪われても）気づけませんでした。 */
.registration-header .target-shop { color: var(--brand) !important; font-size: 13px; font-weight: 700; margin: 0 0 6px !important; overflow-wrap: anywhere; }
.registration-header .target-shop[data-loading] { color: var(--muted) !important; font-weight: 400; }
.progress { background: var(--soft); border-radius: 10px; min-width: 145px; padding: 12px 16px; text-align: center; }
.progress strong, .progress span { display: block; }
.progress strong { color: var(--brand); font-size: 21px; }
.progress span { color: var(--muted); font-size: 12px; }
/* 状態を読み込むまでは「– / 5」を薄く出します（0/5 が一瞬見えるフリッカー防止）。 */
.progress strong[data-loading] { color: var(--muted); }
.registration-layout { margin: 0 auto; max-width: 1120px; padding: 28px 20px 80px; width: 100%; }
.intro-panel, .setup-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 20px; max-width: 100%; overflow-wrap: anywhere; padding: 24px; width: 100%; }
.intro-panel { align-items: center; display: grid; gap: 28px; grid-template-columns: 1fr auto; }
.intro-panel h2 { margin: 5px 0 8px; }
.intro-panel p { color: var(--muted); margin: 0; }
.step-list { display: flex; gap: 8px; list-style: none; margin: 0; max-width: 100%; min-width: 0; padding: 0; }
.step-list li { background: #eef1f3; border-radius: 999px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; padding: 8px 10px; }
.step-list li.done { background: var(--soft); color: var(--brand); font-weight: 800; }

/* ── ウィザードの進みぐあい ─────────────────────────────
   5ページのどこにいるかを常に見せます。done=済み、current=いまここ。
   まだ開けないステップのリンクは .disabled-link で押せないことを示します。 */
.wizard-nav { background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 max(20px, calc((100vw - 1120px) / 2)) 16px; }
.wizard-steps { counter-reset: none; }
.wizard-steps li { flex: 1 1 0; padding: 0; }
.wizard-steps li a { align-items: center; border-radius: 999px; color: inherit; display: flex; gap: 8px; justify-content: center; padding: 9px 10px; text-decoration: none; }
.wizard-step-number { align-items: center; background: #cfd6db; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-size: 11px; font-weight: 800; height: 22px; justify-content: center; width: 22px; }
.wizard-steps li.done { background: var(--soft); color: var(--brand); }
.wizard-steps li.done .wizard-step-number { background: var(--brand); }
.wizard-steps li.done .wizard-step-number::before { content: "✓"; font-size: 12px; }
.wizard-steps li.done b { font-weight: 800; }
.wizard-steps li.current { background: var(--brand); color: #fff; }
.wizard-steps li.current .wizard-step-number { background: rgba(255, 255, 255, .28); }
.wizard-steps li.current a { font-weight: 800; }
.wizard-steps li a.disabled-link { pointer-events: none; }

/* ── ステップの前置き（なぜこの設定が要るのか） ───────────── */
.step-intro { background: linear-gradient(180deg, #f2f8f6 0%, #fff 100%); border: 1px solid #cfe2dc; border-radius: 14px; margin-bottom: 20px; padding: 24px; }
.step-intro-eyebrow { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .08em; margin: 0 0 6px; }
.step-intro h2 { font-size: 21px; line-height: 1.5; margin: 0 0 10px; }
.step-intro h3 { font-size: 15px; margin: 0 0 10px; }
.step-intro p { color: #46525d; line-height: 1.85; margin: 0 0 12px; }
.step-intro-lead { font-size: 15px; }
.step-intro-slide, .step-intro-block { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin: 16px 0; padding: 18px; }
.step-intro-cards, .step-intro-flow, .payment-flow { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.step-intro-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.payment-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step-intro-cards > li, .payment-flow > li { background: #f8faf9; border: 1px solid var(--line); border-radius: 10px; min-width: 0; padding: 14px; }
.step-intro-cards > li > strong, .payment-flow > li > strong { display: block; font-size: 13px; line-height: 1.6; margin-bottom: 6px; }
.step-intro-cards p, .payment-flow p { color: var(--muted); font-size: 12px; line-height: 1.75; margin: 0 0 10px; }
.step-intro-cards p:last-child, .payment-flow p:last-child { margin-bottom: 0; }
.step-intro-num, .payment-flow-num { align-items: center; background: var(--brand); border-radius: 50%; color: #fff; display: inline-flex; font-size: 12px; font-weight: 800; height: 26px; justify-content: center; margin-bottom: 8px; width: 26px; }
.step-intro-flow > li { background: #f8faf9; border-left: 3px solid var(--brand); border-radius: 8px; padding: 12px 14px; }
.step-intro-flow > li > strong { display: block; font-size: 13px; }
.step-intro-flow span { color: var(--muted); display: block; font-size: 12px; line-height: 1.7; margin-top: 3px; }
.step-intro-note { background: #eef4f2; border-radius: 8px; color: #46525d; font-size: 12px; line-height: 1.8; margin: 12px 0 0; padding: 10px 12px; }
.step-intro-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.difference-note { align-items: center; background: #f8faf9; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 12px; grid-template-columns: 1fr auto 1fr; margin-top: 14px; padding: 14px; }
.difference-note div { min-width: 0; }
.difference-note strong { display: block; font-size: 13px; }
.difference-note span { color: var(--muted); display: block; font-size: 12px; line-height: 1.7; margin-top: 3px; }
.difference-note b { color: var(--brand); font-size: 18px; }
/* 運営とのLINEは任意です。必須の設定と見た目で区別します。 */
.support-line-block { border-style: dashed; }
.optional-badge { background: #eef1f3; border-radius: 999px; color: var(--muted); display: inline-block; font-size: 11px; font-weight: 800; margin: 0 0 8px; padding: 4px 10px; }

/* ── ステップ間の移動 ───────────────────────────────── */
.wizard-footer { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin: 4px 0 20px; }
.wizard-footer a { min-width: 0; }
.integration-grid.single { grid-template-columns: minmax(0, 1fr); }
.card-heading { align-items: center; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 22px; }
.card-heading h2 { font-size: 20px; margin: 0 0 4px; }
.card-heading p { color: var(--muted); margin: 0; }
.status-badge { background: #eef1f3; border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 800; padding: 7px 10px; }
.status-badge.done { background: var(--soft); color: var(--brand); }
.status-badge.error { background: #fdeaea; color: var(--danger); }
.primary-button, .secondary-button, .small-button, .danger-button { border: 1px solid transparent; border-radius: 7px; cursor: pointer; display: inline-block; font-weight: 800; padding: 12px 16px; text-align: center; text-decoration: none; touch-action: manipulation; transition: background-color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .08s ease; }
.primary-button { background: var(--brand); color: #fff; }
.primary-button:hover { background: var(--brand-dark); }
.secondary-button { background: #e5ecea; color: var(--brand-dark); }
.danger-button { background: #fff; border: 1px solid #d99a9a; color: var(--danger); }
.danger-button:hover { background: #fff2f2; }
.disabled-link { cursor: not-allowed; opacity: .65; }
.small-button { background: var(--warning-bg); color: var(--warning); font-size: 13px; margin-top: 10px; }
.primary-button:active, .secondary-button:active, .small-button:active, .danger-button:active { transform: translateY(2px) scale(.99); }
.primary-button:focus-visible, .secondary-button:focus-visible, .small-button:focus-visible, .danger-button:focus-visible, a:focus-visible { box-shadow: 0 0 0 4px rgba(18,108,91,.22); outline: 2px solid var(--brand); outline-offset: 2px; }
.primary-button:disabled, .secondary-button:disabled, .small-button:disabled, .danger-button:disabled, [aria-busy="true"] { cursor: progress; opacity: .62; transform: none; }
.primary-button.is-busy::before, .secondary-button.is-busy::before, .small-button.is-busy::before, .danger-button.is-busy::before { animation: spin .7s linear infinite; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; display: inline-block; height: .8em; margin-right: .55em; vertical-align: -.1em; width: .8em; }
.inline-button { width: auto; }

/* ── ヘッダー右側（ステップ完了カウンター＋登録途中の操作）───────────── */

/* 「下書き保存」「入力内容削除」は、以前は本文の先頭に黄色い帯（.draft-actions）として
   置いていました。登録を進めたい店舗にとっては「やめる操作」が本題と同じ大きさで並ぶ形で、
   かえって迷わせるため、カウンターの横へ畳みました（2026-09-04、ユーザー指示）。
   .registration-header は子2つ前提の space-between なので、操作を3つ目の子として足さず
   .progress ごとこの箱で包みます。650px以下では 1カラムのグリッドになります（下の @media）。 */
.header-aside { align-items: center; display: flex; flex: 0 0 auto; gap: 12px; justify-content: flex-end; }
/* 2つを縦に積みます。.progress の高さ（約64px）とほぼ揃うので、操作の有無でヘッダーの
   高さが変わりません。横並びにすると右カラムが伸びて、900px前後で左の見出しが潰れます。
   min-width は「状態が届いてボタンが増えた瞬間に横へ跳ねない」ための予約幅です。 */
.header-draft-actions { display: grid; gap: 6px; min-width: 6.6em; }
/* .secondary-button / .danger-button の上に重ねる修飾子です。共通ベース（角丸・:active・
   :focus-visible・:disabled・.is-busy のスピナー）をそのまま使えるので、それらの
   セレクタ列を書き換えずに済みます。塗りと太字だけを外して主張を弱めます。 */
.header-action { background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; padding: 6px 10px; white-space: nowrap; }
.header-action:hover { background: #f2f5f4; color: var(--ink); }
.header-action-danger { background: transparent; border-color: var(--line); color: var(--danger); }
.header-action-danger:hover { background: #fff2f2; }

.stack-form { display: grid; gap: 16px; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.confirmation-panel { background: #f7f9fa; border: 1px solid var(--line); border-radius: 9px; padding: 18px; }
.compact-form { gap: 11px; }
.field-grid { align-items: start; display: grid; gap: 14px; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.address-detail-field { grid-column: 1 / -1; }
label { align-content: start; color: #46525d; display: grid; font-size: 13px; font-weight: 700; gap: 7px; }
.field-grid > label { align-self: start; display: flex; flex-direction: column; height: auto; min-width: 0; }
label em { color: var(--danger); font-size: 11px; font-style: normal; }
label small, .helper { color: var(--muted); font-size: 12px; }
input, select { background: #fff; border: 1px solid #bcc7cf; border-radius: 7px; color: var(--ink); min-height: 44px; padding: 10px 12px; width: 100%; }
.field-grid input, .field-grid select, .postal-control .secondary-button { flex: 0 0 44px; height: 44px; max-height: 44px; min-height: 44px; }
input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18,108,91,.13); outline: 0; }
input:user-invalid, select:user-invalid { border-color: var(--danger); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(161,43,43,.1); }
.field-error { color: var(--danger); font-size: 12px; font-weight: 700; line-height: 1.5; }
.check-row { align-items: start; display: flex; gap: 10px; }
/* 汎用の input 規則（min-height:44px, width:100%）はテキスト欄向けです。チェックボックスは
   .legal-confirm input と同じ18pxへ戻します（戻さないと親幅いっぱいの箱になります）。 */
.check-row input { flex: 0 0 auto; height: 18px; margin: 2px 0 0; min-height: 18px; padding: 0; width: 18px; }
.notice { background: var(--soft); border-left: 4px solid var(--brand); border-radius: 6px; margin-bottom: 18px; padding: 14px 16px; }
.notice p { margin: 3px 0; }
.notice.compact { font-size: 13px; margin: 0; }
.summary-box, .integration-summary, .final-summary { background: #f7f9fa; border-radius: 8px; color: var(--muted); margin-top: 12px; padding: 13px; }
.dev-panel { background: var(--warning-bg); border: 1px dashed #dbbd72; border-radius: 8px; margin-top: 16px; padding: 14px; }
.dev-panel.compact { padding: 10px; }
.sandbox-panel { margin: 0 0 18px; }
.sandbox-panel .sandbox-note { color: var(--warning); font-size: 13px; margin: 4px 0 0; }
.sandbox-panel .sandbox-warning { border-top: 1px dashed #dbbd72; color: var(--warning); font-size: 12px; margin: 12px 0 0; padding-top: 10px; }
.switch-row { align-items: center; display: flex; gap: 14px; justify-content: space-between; }
.switch { flex: none; height: 28px; position: relative; width: 48px; }
.switch input { height: 0; opacity: 0; width: 0; }
.switch span { background: #bdc8c4; border-radius: 999px; inset: 0; position: absolute; transition: .2s; }
.switch span::after { background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, .13); content: ""; height: 22px; left: 3px; position: absolute; top: 3px; transition: .2s; width: 22px; }
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.sandbox-only { border-style: dashed; }
.integration-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.integration-card { background: linear-gradient(180deg, #fff 0%, #fbfcfc 100%); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(30, 48, 43, .06); padding: 20px; }
.integration-title { align-items: start; display: flex; gap: 10px; justify-content: space-between; }
.integration-title h3 { font-size: 16px; margin: 4px 0 12px; }
.integration-card > p { color: var(--muted); font-size: 13px; min-height: 58px; }
.postal-field { align-self: start; }
.postal-control { align-items: stretch; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
.postal-control .secondary-button { min-width: 112px; white-space: nowrap; }
.line-integration-card { border-color: #cfe3dd; }
.line-owner-link-actions, .line-code-actions { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.line-owner-link-actions button, .line-code-actions > * { width: 100%; }
.link-code-panel { background: linear-gradient(145deg, #f2faf7, #f8fbfa); border: 1px solid #cfe3dd; border-radius: 12px; margin: 16px 0 0; padding: 16px; }
.link-code-heading { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.link-code-heading strong { color: var(--brand-dark); font-size: 13px; }
.link-code-heading span { color: var(--muted); font-size: 11px; }
.link-code-panel > p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0 0 12px; }
.line-qr-panel { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 18px; grid-template-columns: 180px minmax(0, 1fr); margin-top: 14px; padding: 16px; }
.line-qr-panel img { background: #fff; border-radius: 8px; height: auto; max-width: 180px; width: 100%; }
.line-qr-panel strong { color: var(--brand-dark); }
.line-qr-panel p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 6px 0 0; }
.selected-destination { background: var(--soft); border-radius: 7px; color: var(--brand-dark); font-size: 13px; font-weight: 800; margin: 0; padding: 11px 12px; }
.field-status { color: var(--muted); font-size: 12px; min-height: 18px; overflow-wrap: anywhere; }
.field-status.success { color: var(--brand-dark); }
.field-status.error { color: var(--danger); }
.field-status.loading::before { animation: pulse 1s infinite alternate; content: "● "; }
@keyframes spin { to { transform: rotate(360deg); } }
#postal-candidate-field, .postal-candidate-field { background: #f7f9fa; border-radius: 8px; padding: 12px; }
/* 事業者情報（手順4）の郵便番号欄。.legal-form-grid の input は幅100%なので、検索ボタンと並べる分だけ列を切ります。 */
.legal-form-grid .postal-control .secondary-button { min-height: 44px; }
.legal-form-grid .postal-candidate-field { grid-column: 1 / -1; }
.legal-form-grid .field-status { font-weight: 400; }
.oauth-setup-note { background: #fff8e7; border: 1px solid #ead49b; border-radius: 8px; color: #624b13; font-size: 13px; margin-top: 12px; padding: 12px; }
.oauth-setup-note p { margin: 8px 0; min-height: 0; }
.oauth-setup-note code { overflow-wrap: anywhere; }
.text-link { display: inline-block; font-size: 13px; margin-top: 5px; }
/* 前置きの折りたたみボタン。<details> を使えないページ（ステップ3）があるので、ボタン＋aria-expanded で開閉します。 */
.disclosure-toggle { background: transparent; border: 0; color: var(--brand); cursor: pointer; font-weight: 800; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.disclosure-toggle::before { content: "▸ "; }
.disclosure-toggle[aria-expanded="true"]::before { content: "▾ "; }
.disclosure-toggle + [id] { margin-top: 14px; }
.guide-link { display: inline-block; font-size: 12px; font-weight: 800; margin: 0 0 14px; }
#line-test-actions { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.square-location-panel { background: linear-gradient(145deg, #f3faf8, #fff); border: 1px solid #cfe3dd; border-radius: 12px; display: grid; gap: 14px; margin-top: 14px; padding: 16px; }
.square-location-heading { align-items: center; display: flex; gap: 11px; }
.selection-step { align-items: center; background: var(--brand); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-size: 12px; font-weight: 900; height: 28px; justify-content: center; width: 28px; }
.square-location-heading strong { color: var(--brand-dark); font-size: 14px; }
.square-location-heading p, .square-location-note { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 3px 0 0; min-height: 0; }
.square-location-field span { color: #40504c; }
.square-location-field select { background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px); background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; padding-right: 38px; }
.square-location-submit { align-items: flex-start; display: flex; flex-direction: column; gap: 2px; padding: 13px 16px; text-align: left; width: 100%; }
.square-location-submit span { font-size: 14px; }
.square-location-submit small { color: rgba(255,255,255,.78); font-size: 10px; font-weight: 600; }
.square-location-note { border-top: 1px solid #dcebe7; margin: 0; padding-top: 11px; }
.message { border-radius: 8px; align-items: flex-start; display: flex; gap: 12px; box-shadow: 0 12px 30px rgba(30, 48, 43, .18); left: 50%; margin: 0; max-width: min(640px, calc(100vw - 32px)); padding: 14px 16px; position: fixed; top: 16px; transform: translateX(-50%); width: max-content; z-index: 1000; }
.message.error { background: #fdeaea; color: var(--danger); }
.message.warning { background: var(--warning-bg); border: 1px solid #e8cf91; color: #6f4c09; }
.message.success { background: var(--soft); color: var(--brand-dark); }
.message .message-text { flex: 1 1 auto; }
.message .message-close { background: transparent; border: 0; color: inherit; cursor: pointer; flex: 0 0 auto; font-size: 18px; line-height: 1; padding: 0 2px; }
.registration-resume-target { border-color: #d6aa43; box-shadow: 0 0 0 4px rgba(214,170,67,.16), var(--shadow); scroll-margin-top: 18px; }
.resume-notice { background: var(--warning-bg); border: 1px solid #e8cf91; border-radius: 8px; color: #6f4c09; font-size: 13px; font-weight: 800; margin-bottom: 18px; padding: 11px 13px; }
.complete-card { padding: 42px 24px; text-align: center; }
.dialog-actions, .completion-links { display: flex; flex-wrap: wrap; gap: 10px; }
.confirm-dialog { border: 0; border-radius: 14px; box-shadow: 0 24px 70px rgba(19, 38, 33, .28); color: var(--ink); max-width: min(520px, calc(100vw - 32px)); padding: 0; }
.confirm-dialog::backdrop { background: rgba(15, 32, 28, .58); }
.confirm-dialog form { padding: 24px; }
.confirm-dialog h2 { font-size: 20px; margin: 0 0 12px; }
.confirm-dialog p { color: var(--muted); line-height: 1.75; }
.confirm-dialog .danger-note { background: #fff1f1; border-radius: 8px; color: var(--danger); font-size: 13px; padding: 11px 12px; }
.dialog-actions { justify-content: flex-end; margin-top: 20px; }
.billing-registration-card { border-top: 4px solid var(--brand); }
.billing-price { align-items: baseline; background: var(--soft); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; padding: 18px; }
.billing-price span { color: var(--muted); font-weight: 800; }
.billing-price strong { color: var(--brand-dark); font-size: 30px; }
.billing-price small { color: var(--brand); font-weight: 800; }
.billing-facts { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.billing-facts p { background: #f7f9fa; border-radius: 9px; display: grid; gap: 5px; margin: 0; padding: 13px; }
.billing-facts strong { font-size: 12px; }
.billing-facts span { color: var(--muted); font-size: 12px; line-height: 1.6; }
.billing-pause-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 8px 0 0; }
.billing-readiness { background: var(--warning-bg); border-left: 4px solid #d6aa43; border-radius: 6px; color: #6f4c09; font-size: 13px; font-weight: 700; padding: 12px 14px; }
.billing-coupon { background: #f7f9fa; border-radius: 10px; display: grid; gap: 8px; margin: 16px 0; padding: 14px 16px; }
.billing-coupon > label { color: var(--muted); font-size: 13px; font-weight: 800; }
.billing-coupon .coupon-row { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
.billing-coupon .coupon-row button { white-space: nowrap; }
.billing-coupon input { border: 1px solid #cfd8dc; border-radius: 8px; font-size: 16px; min-width: 0; letter-spacing: .06em; padding: 11px 12px; text-transform: uppercase; }
.billing-coupon .coupon-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; }
.billing-coupon .coupon-note.coupon-applied { color: #1f5c33; font-weight: 700; }
.security-note { color: var(--danger); font-size: 12px; font-weight: 700; line-height: 1.7; }
.completion-mark { align-items: center; background: var(--brand); border-radius: 50%; color: #fff; display: inline-flex; font-size: 32px; height: 68px; justify-content: center; width: 68px; }
.line-messaging-setup { background: #f3f9f7; border: 1px solid #bcd9d1; border-radius: 12px; margin-bottom: 16px; padding: 14px; }
.line-messaging-heading { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.line-messaging-heading strong, .line-messaging-heading span { display: block; }
.line-messaging-heading div > span:not(.line-step) { color: var(--muted); font-size: 11px; margin-top: 3px; }
.line-messaging-setup > p { color: #46525d; font-size: 12px; line-height: 1.7; margin: 10px 0 14px; min-height: 0; }
/* まだLINE公式アカウントを持っていない方が最初に押すボタンです。LINEの公式カラーで示します。 */
.line-create-oa-box { background: #fff; border: 1px solid #bfe8cf; border-left: 4px solid #06c755; border-radius: 10px; margin: 0 0 13px; padding: 12px 13px; }
.line-create-oa-box > strong { color: var(--ink); display: block; font-size: 12px; line-height: 1.55; }
.line-create-oa-box p { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 4px 0 10px; min-height: 0; }
.line-create-oa { background: #06c755; border: 0; border-radius: 8px; color: #fff; display: inline-block; font-size: 13px; font-weight: 800; padding: 10px 16px; text-align: center; text-decoration: none; }
.line-create-oa:hover, .line-create-oa:focus { background: #05a948; color: #fff; }
.line-create-oa:focus-visible { outline: 3px solid #9ae3b8; outline-offset: 2px; }
/* Webhookを探して手が止まらないように、不要であることを明示します。 */
.line-no-webhook-note { background: #eef4f2; border-radius: 8px; color: #46525d; font-size: 11px; line-height: 1.7; margin: 11px 0 0; padding: 9px 11px; }
.line-no-webhook-note strong { color: var(--brand-dark); }
/* LIFFタブの直リンク。長いURLを折り返して、スマホでも全体が読めるようにします。 */
.liff-console-hint { background: #eef4f2; border-radius: 8px; color: #46525d; display: grid; font-size: 12px; gap: 4px; line-height: 1.7; margin: 11px 0 0; padding: 10px 12px; }
.liff-console-hint strong { color: var(--brand-dark); }
.liff-console-hint a { overflow-wrap: anywhere; word-break: break-all; }
.liff-console-hint small { color: #67737d; font-size: 11px; }
/* LIFF追加画面の入力欄ごとの説明。既定は畳んでおき、必要な人だけ開きます。 */
.liff-field-guide { background: #fff; border: 1px solid #dfe6e2; border-radius: 8px; font-size: 12px; margin: 8px 0 0; padding: 8px 12px; }
.liff-field-guide > summary { color: var(--brand-dark); cursor: pointer; font-weight: 700; }
.liff-field-guide dl { display: grid; gap: 10px; margin: 10px 0 2px; }
.liff-field-guide dt { color: var(--brand-dark); font-weight: 700; }
.liff-field-guide dd { color: #46525d; line-height: 1.8; margin: 2px 0 0; }
/* 事業者情報を店舗情報から引用するボタン。入力欄の真上に置いて、打ち始める前に気づけるようにします。 */
.legal-prefill-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 14px; }
.legal-prefill-row .step-intro-note { flex: 1 1 260px; margin: 0; }
.line-messaging-form { display: grid; gap: 11px; }
.line-messaging-form label { display: grid; gap: 6px; }
.line-messaging-form label > span { color: var(--ink); font-size: 12px; font-weight: 700; }
.line-messaging-form input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.line-messaging-bot { color: var(--brand); font-size: 12px; font-weight: 700; line-height: 1.65; margin: 11px 0 0; }
.line-messaging-warning { background: var(--warning-bg); border-left: 4px solid #d6aa43; border-radius: 6px; color: #6f4c09; font-size: 12px; font-weight: 700; line-height: 1.65; margin: 11px 0 0; padding: 10px 12px; }
.line-quota-note { border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.75; margin: 13px 0 0; min-height: 0; padding-top: 11px; }
/* 各手順の中に置く「LINE側での準備」（A・B・C）。上部の準備カードを廃止し、必要な手順の直前に内包しました。 */
.line-prep-steps { display: grid; gap: 10px; list-style: none; margin: 0 0 14px; padding: 0; }
.line-prep-steps > li { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; min-width: 0; padding: 10px 12px; }
.line-prep-steps > li > strong { color: var(--ink); display: block; font-size: 12px; line-height: 1.6; margin-bottom: 4px; }
.line-prep-steps p { color: #46525d; font-size: 12px; line-height: 1.7; margin: 4px 0 0; min-height: 0; }
.line-prep-steps .step-intro-note, .line-prep-steps .liff-console-hint, .line-prep-steps .liff-field-guide { margin-top: 8px; }
.line-login-setup { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.line-login-heading { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.line-login-heading strong, .line-login-heading span { display: block; }
.line-login-heading div > span:not(.line-step) { color: var(--muted); font-size: 11px; margin-top: 3px; }
.line-login-setup > p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 10px 0 14px; min-height: 0; }
.line-login-form { display: grid; gap: 11px; }
.line-login-form label { display: grid; gap: 6px; }
.line-login-form label > span { color: var(--ink); font-size: 12px; font-weight: 700; }
.line-login-form input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.line-login-form .line-platform-confirmation { align-items: flex-start; background: #f2f8f6; border: 1px solid #cfe2dc; border-radius: 12px; display: flex; gap: 11px; padding: 13px 14px; }
.line-login-form .line-platform-confirmation input { flex: 0 0 auto; height: 18px; margin: 2px 0 0; min-height: 18px; width: 18px; }
.line-login-form .line-platform-confirmation span, .line-login-form .line-platform-confirmation > span > strong, .line-login-form .line-platform-confirmation small { display: block; }
.line-login-form .line-platform-confirmation strong { color: var(--ink); font-size: 12px; line-height: 1.55; }
.line-login-form .line-platform-confirmation small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.65; margin-top: 3px; }
/* 手順3の上に出す「リンクされたLINE公式アカウント」の設定場所。②のQRで止まらないよう、読み取る前に目に入る位置に置く。 */
.line-linked-account-guide { background: var(--warning-bg); border: 1px solid #ead9a8; border-radius: 12px; margin: 12px 0; padding: 13px 14px; }
.line-linked-account-guide > strong { color: var(--ink); display: block; font-size: 13px; line-height: 1.55; }
.line-linked-account-guide p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 6px 0 0; }
.line-linked-account-guide .liff-console-hint a { overflow-wrap: anywhere; }
.complete-card .next-steps .line-rich-menu-links .guide-link { margin: 0; }
/* 「リッチメニュー用のURL」の部品。登録完了ページ（「次にやること」4）だけで使う（手順2からは2026-09-12に移設）。 */
.line-rich-menu-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 6px 0 0; min-height: 0; }
.line-rich-menu-buttons { margin: 10px 0 0; }
.line-rich-menu-buttons dt { color: var(--ink); font-size: 12px; font-weight: 700; margin-top: 8px; }
.line-rich-menu-buttons dd { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 2px 0 0; }
.line-rich-menu-buttons dd .line-rich-menu-url { margin-top: 6px; }
.line-rich-menu-url { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; margin: 10px 0 0; }
.line-rich-menu-url input, .line-rich-menu-url code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.line-rich-menu-url code { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; text-align: left; }
.line-rich-menu-url button { white-space: nowrap; }
.line-rich-menu-steps { color: #46525d; font-size: 12px; line-height: 1.7; margin: 8px 0 0; padding-left: 1.4em; }
.line-rich-menu-steps li { margin: 3px 0; }
.line-rich-menu-links { display: flex; flex-wrap: wrap; gap: 14px; }
.line-rich-menu-links .guide-link, .line-rich-menu-links .text-link { margin: 0; }
.line-rich-menu-note { background: var(--warning-bg); border-left: 4px solid #d6aa43; border-radius: 6px; color: #6f4c09; font-weight: 700; margin-top: 14px; padding: 10px 12px; }
.complete-card .next-steps .line-rich-menu-url { margin-top: 8px; }
.complete-card .next-steps .guide-link { margin: 8px 0 0; }
.line-owner-link-setup { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.line-owner-link-heading { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.line-owner-link-heading strong, .line-owner-link-heading span { display: block; }
.line-owner-link-heading div > span:not(.line-step) { color: var(--muted); font-size: 11px; margin-top: 3px; }
.line-owner-link-setup > p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 10px 0 14px; min-height: 0; }
.line-owner-link-status-text { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 11px 0 0; }
.line-owner-link-status-text.waiting { color: #8a5a00; }
.line-owner-link-status-text.success { color: var(--brand); font-weight: 700; }
.line-owner-link-status-text.error { color: var(--danger); font-weight: 700; }
.line-add-friend-box { background: #f8faf9; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 11px; margin-bottom: 13px; padding: 13px; }
.line-add-friend-box strong { color: var(--brand-dark); font-size: 13px; }
.line-add-friend-box p { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 5px 0 0; }
.line-add-friend-actions { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; }
.line-add-friend-actions img { background: #fff; border: 1px solid var(--line); border-radius: 8px; height: auto; max-width: 140px; width: 100%; }
/* 手順の番号と、前段が終わるまで操作できないことを見せるための装飾です。 */
.line-step { background: var(--brand); border-radius: 999px; color: #fff; display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; margin-bottom: 5px; margin-top: 0; padding: 4px 10px; }
.line-step-lock { background: var(--warning-bg); border-left: 4px solid #d6aa43; border-radius: 6px; color: #6f4c09; font-size: 12px; font-weight: 700; line-height: 1.65; margin: 0 0 13px; padding: 10px 12px; }
[data-state="locked"] { opacity: .72; }
.line-test-heading { align-items: center; display: flex; gap: 10px; grid-column: 1 / -1; }
.line-test-heading strong { color: var(--brand-dark); font-size: 13px; }
.line-test-heading .line-step { margin-bottom: 0; }
.line-test-intro, #line-test-result { grid-column: 1 / -1; }
.line-test-intro { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; min-height: 0; }
/* 送信後の「スマホを確認 → 届いた／届かない」。 */
.line-test-result { background: linear-gradient(145deg, #f2faf7, #f8fbfa); border: 1px solid #cfe3dd; border-radius: 12px; padding: 14px; }
.line-test-result > p { color: var(--ink); font-size: 13px; line-height: 1.7; margin: 0 0 10px; min-height: 0; }
.line-test-result-actions { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.line-test-troubleshoot { border-top: 1px solid var(--line); color: #46525d; font-size: 12px; line-height: 1.7; margin-top: 12px; padding-top: 10px; }
.line-test-troubleshoot ul { margin: 6px 0 10px; padding-left: 18px; }
.line-test-troubleshoot li { margin: 2px 0; }
.line-test-troubleshoot .guide-link { display: block; margin: 8px 0 0; }
[hidden] { display: none !important; }
@keyframes pulse { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 900px) {
    .integration-grid { grid-template-columns: 1fr; }
    .step-list { flex-wrap: wrap; }
    .step-intro-cards, .payment-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
    button, input, select { font-size: 16px; max-width: 100%; }
    .registration-header, .intro-panel { align-items: start; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
    .registration-header { padding: 18px 16px; }
    .registration-header h1 { font-size: 21px; }
    .registration-layout { padding: 18px 12px 64px; }
    .progress, .step-list { width: 100%; }
    .header-aside { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
    .step-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .step-list li { border-radius: 8px; text-align: center; }
    .two-columns { grid-template-columns: 1fr; }
    .card-heading { grid-template-columns: minmax(0, 1fr); }
    .card-heading .status-badge { grid-column: 1; justify-self: start; max-width: 100%; white-space: normal; }
    .intro-panel, .setup-card { padding: 18px 16px; }
    .integration-card { padding: 15px; }
    .button-row { display: grid; grid-template-columns: 1fr; }
    .button-row button, .inline-button { width: 100%; }
    .postal-control, .line-owner-link-actions, .line-code-actions, #line-test-actions { grid-template-columns: 1fr; }
    .line-add-friend-actions { grid-template-columns: 1fr; justify-items: center; }
    .line-qr-panel { grid-template-columns: 1fr; text-align: center; }
    .line-qr-panel img { justify-self: center; max-width: 220px; }
    .link-code-heading { align-items: flex-start; flex-direction: column; }
    .oauth-setup-note code { display: block; max-width: 100%; }
    .dialog-actions, .completion-links { display: grid; grid-template-columns: 1fr; }
    .billing-facts { grid-template-columns: 1fr; }
    .wizard-nav { padding: 0 12px 12px; }
    /* 5段の全体像を保ったまま畳みます。2列に折り返すと「いま何合目か」が読み取れません。 */
    .wizard-steps { gap: 4px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .wizard-steps li a { flex-direction: column; gap: 4px; padding: 8px 2px; }
    .wizard-steps li b { font-size: 10px; line-height: 1.35; text-align: center; }
    .step-intro { padding: 18px 16px; }
    .step-intro h2 { font-size: 18px; }
    .step-intro-cards, .payment-flow, .difference-note { grid-template-columns: 1fr; }
    .difference-note b { text-align: center; }
    .step-intro-actions, .wizard-footer { display: grid; grid-template-columns: 1fr; }
    .step-intro-actions .inline-button, .wizard-footer .inline-button { width: 100%; }
}
@media (max-width: 350px) {
    .step-list { grid-template-columns: 1fr; }
    .wizard-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .wizard-steps li b { font-size: 9px; }
    .integration-title { align-items: flex-start; flex-direction: column; }
    .status-badge { max-width: 100%; overflow-wrap: anywhere; }
    .link-code-panel code { font-size: 16px; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ============================================================
   特定商取引法にもとづく事業者情報（ステップ3）
   ============================================================ */

.legal-form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 18px;
}

.legal-form-grid label {
    display: grid;
    gap: 6px;
}

.legal-form-grid label > span {
    font-size: 13px;
    font-weight: 800;
}

.legal-form-grid sup {
    color: #b4472f;
    font-size: 10px;
    margin-left: 4px;
}

.legal-form-grid input,
.legal-form-grid textarea {
    border: 1px solid #cfd9d5;
    border-radius: 9px;
    font: inherit;
    padding: 11px;
    width: 100%;
}

.legal-form-grid textarea {
    resize: vertical;
}

.legal-form-grid small {
    color: #6a746f;
    font-size: 11px;
    line-height: 1.6;
}

.legal-field-wide {
    grid-column: 1 / -1;
}

/* 公開される文面のプレビュー。ここを読まずに通過できてはいけないので、
   たたまずそのまま置きます。details にしないでください。 */
.legal-preview-card {
    background: #f7faf9;
    border: 1px dashed #cfd9d5;
    border-radius: 12px;
    margin-top: 20px;
    padding: 18px 20px;
}

.legal-preview-card h3 {
    margin: 0 0 10px;
}

.legal-preview-list {
    margin: 12px 0 0;
}

.legal-preview-list > div {
    border-top: 1px solid #dfe5e1;
    display: grid;
    gap: 2px 16px;
    grid-template-columns: 12em minmax(0, 1fr);
    padding: 10px 0;
}

.legal-preview-list > div:first-child {
    border-top: 0;
}

.legal-preview-list dt {
    font-size: 12px;
    font-weight: 800;
}

.legal-preview-list dd {
    color: #4b5954;
    font-size: 12px;
    line-height: 1.85;
    margin: 0;
    overflow-wrap: anywhere;
}

.legal-preview-list dd p {
    margin: 0 0 6px;
}

.legal-preview-list dd p:last-child {
    margin-bottom: 0;
}

.legal-confirm {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
    margin: 18px 0 14px;
}

/* 汎用の input 規則（min-height:44px / width:100% / padding）がチェックボックスにも当たり、
   箱が親幅いっぱいの大きな枕になっていました。手順2の確認欄と同じ18pxへ戻します。 */
.legal-confirm input { flex: 0 0 auto; height: 18px; margin: 2px 0 0; min-height: 18px; padding: 0; width: 18px; }

@media (max-width: 640px) {
    .legal-preview-list > div {
        gap: 3px;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── 完了ページ（ステップ5） ──────────────────────────────
   設定内容の要約（各行に「変更」）、足りない項目のリスト、完了後の「次にやること」。 */
.confirm-summary { display: grid; gap: 0; margin: 0 0 18px; }
.confirm-summary > div { border-bottom: 1px solid var(--line); display: grid; gap: 4px; padding: 10px 0; }
.confirm-summary dt { color: var(--muted); font-size: 12px; }
.confirm-summary dd { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; margin: 0; overflow-wrap: anywhere; }
.confirm-summary dd .text-link { flex: 0 0 auto; margin: 0; }
.finish-missing-list { margin: 0 0 14px; padding-left: 1.3em; }
.finish-missing-list li { margin: 4px 0; }
.finish-missing-list a { font-weight: 800; }
.complete-card h3 { margin: 22px 0 10px; }
.complete-card .next-steps { text-align: left; }
.complete-card .completion-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }

/* ===== 画面の幅ごとの崩れ（2026-10-15、ユーザー指示「PC・iPad・iPhoneで画面崩れが無いか」） =====
   ・ボタンの枠を 1px の透明な枠にしました（上の .primary-button ほか）。.danger-button だけ枠が付いていて、
     確認ダイアログの「戻る」と「削除する」で高さが2px違っていました。
   ・割引コードは、欄と「適用する」を同じ行の2列にしました（上の .coupon-row）。折り返す作りだと、320〜390pxで
     「適用する」だけが次の行の左に落ちていました。とても狭い幅（340px以下）は2段にします。 */
@media (max-width: 340px) {
    .billing-coupon .coupon-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 650px) {
    /* 事業者情報の欄は16pxにします。.legal-form-grid input の font:inherit（ラベルの13px）が、上の
       「650px以下は16px」より強く、iPhone がタップで画面を拡大していました。textarea も同じです。 */
    textarea,
    .legal-form-grid input,
    .legal-form-grid textarea { font-size: 16px; }
    /* LINEのテスト通知の「届いた／届かない」と、リッチメニューのURLの行は1列に積みます。
       2列のままだと 320px で「届かない」が2行に折れ、URLの欄が約98pxになって8行ほどに折れていました。 */
    .line-test-result-actions,
    .line-rich-menu-url { grid-template-columns: minmax(0, 1fr); }
}

/* ポップアップ（<dialog> の showModal()）を開いているあいだは、後ろのページをスクロールさせません（2026-10-16）。
   iPhone は小窓の中のスクロールを後ろのページへ渡し、小窓も一緒にずれていました。説明は shop-admin/assets/admin.css の末尾です。 */
html:has(dialog:modal) {
    overflow: hidden;
    overscroll-behavior: none;
    scrollbar-gutter: stable;
}

dialog:modal {
    overscroll-behavior: contain;
}