.field-label {
    align-items: baseline;
    display: flex;
    gap: 4px;
}

.field-label sup {
    color: var(--brand);
    font-size: 10px;
}

.slot-settings {
    display: grid;
    gap: 16px;
}

.slot-group {
    background: #f8fbfa;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
}

.slot-group-head {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.slot-group-head > span {
    background: #dff3ed;
    border-radius: 999px;
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 900;
    padding: 6px 9px;
    white-space: nowrap;
}

.slot-group-head strong {
    font-size: 15px;
}

.slot-group-head p {
    color: var(--muted);
    font-size: 12px;
    margin: 2px 0 0;
}

.slot-group label small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.55;
}

.slot-notes {
    background: #edf7f4;
    border-left: 4px solid var(--brand);
    border-radius: 10px;
    margin-top: 18px;
    padding: 17px 19px;
}

.slot-notes h4 {
    margin: 0 0 10px;
}

.slot-notes ol {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.slot-notes li {
    color: #40504c;
    font-size: 12px;
    line-height: 1.7;
}

.slot-notes strong {
    color: var(--brand-dark);
}

@media (max-width: 760px) {
    .slot-group {
        padding: 15px;
    }

    .slot-group-head {
        align-items: flex-start;
    }

    .slot-notes {
        padding: 15px;
    }
}

/* ============================================================
   特定商取引法にもとづく事業者情報と、キャンセル規定の説明
   ============================================================
   オンライン決済に必要な2条件（Square連携・事業者情報）の達成状況と、
   お客様の注文ページへ公開される文面のプレビューです。 */

.legal-gate-note {
    background: #fdf6ec;
    border-left: 4px solid #c98a2e;
    border-radius: 10px;
    margin: 0 0 16px;
    padding: 15px 18px;
}

.legal-gate-note p {
    color: #5d4a2d;
    font-size: 13px;
    line-height: 1.8;
    margin: 0 0 8px;
}

.legal-gate-note p:last-child {
    margin-bottom: 0;
}

.legal-checklist {
    display: grid;
    gap: 9px;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.legal-checklist li {
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    gap: 12px;
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 12px 14px;
}

.legal-checklist li > span {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;
}

.legal-checklist .is-done {
    background: #eef8f5;
    border-color: #9fcfc2;
}

.legal-checklist .is-done > span {
    color: var(--brand);
}

.legal-checklist .is-todo > span {
    color: #b08a3c;
}

.legal-checklist strong {
    font-size: 14px;
}

.legal-checklist p {
    font-size: 12px;
    line-height: 1.7;
    margin: 3px 0 0;
}

/* 自由記述の欄は、2カラムのグリッドでも1行を丸ごと使わせます。 */
.field-wide {
    display: grid;
    gap: 6px;
    grid-column: 1 / -1;
    margin-top: 14px;
}

.field-wide textarea {
    border: 1px solid #cfd9d5;
    border-radius: 9px;
    font: inherit;
    padding: 11px;
    resize: vertical;
    width: 100%;
}

.field-wide small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.55;
}

.legal-preview {
    background: #f7faf9;
    border: 1px dashed var(--line);
    border-radius: 10px;
    margin-top: 18px;
    padding: 16px 18px;
}

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

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

.legal-preview-list > div {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 2px 16px;
    grid-template-columns: 11em minmax(0, 1fr);
    padding: 9px 0;
}

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

.legal-preview-list dt {
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.legal-preview-list dd {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
    margin: 0;
    overflow-wrap: anywhere;
}

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

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

/* キャンセル規定は全店舗共通なので、設定欄ではなく説明として置きます。 */
.policy-note {
    background: #edf7f4;
    border-left: 4px solid var(--brand);
    border-radius: 10px;
    margin-top: 14px;
    padding: 15px 18px;
}

.policy-note h4 {
    margin: 0 0 9px;
}

.policy-note ul {
    display: grid;
    gap: 6px;
    margin: 0 0 10px;
    padding-left: 1.2em;
}

.policy-note li {
    color: #40504c;
    font-size: 12px;
    line-height: 1.75;
}

.policy-note p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.75;
    margin: 0 0 7px;
}

.policy-note p:last-child {
    margin-bottom: 0;
}

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

/* 契約情報メニューの「特商法の登録手続きへ」と、インフォメーションタブの「対応が必要なこと」から
   飛んでくる着地点です。以前はヘッダー（.app-header）が position:sticky で、ずらさないと見出しが下に潜りました。
   ヘッダーは2026-10-14から流れますが、検証環境の帯は貼り付いたままで、見出しの上に少し余白がある方が読みやすいので残しています。 */
#legal-panel,
#order-page-panel,
#square-panel {
    scroll-margin-top: 88px;
}

/* 事業者情報を店舗情報から引用するボタンの行。初期登録ウィザードの
   .legal-prefill-row（shop-register/assets/registration.css）と同じ形です。 */
.legal-prefill-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 14px;
}

.legal-prefill-row .muted {
    flex: 1 1 260px;
    margin: 0;
}

/* 店舗管理画面の事業者情報パネル（2026-09-18、ユーザー指示）。登録済みの値を読むだけの形で並べます。
   入力欄はこの画面には無く、「事業者情報を編集する」から別ページ（/shop-admin/legal/）へ移ります。
   一覧の組み方はプレビューの .legal-preview-list をそのまま使い、枠と文字の濃さだけを変えています。 */
.legal-summary {
    display: grid;
    gap: 12px;
}

.legal-summary > p {
    margin: 0;
}

.legal-summary-list {
    background: #fbfdfc;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 4px 16px;
}

.legal-summary-list dt sup {
    color: var(--danger);
    font-size: 10px;
    margin-left: 4px;
}

.legal-summary-list dd {
    color: var(--ink);
    font-size: 13px;
}

.legal-summary-empty {
    color: #9aa6a2;
}

/* 事業者情報の編集ページ（/shop-admin/legal/index.php）。このページは admin.css とこのファイルだけを読みます。
   入力欄が1列に収まる幅へ絞り、ヘッダーの店舗名を小さく添えます。 */
.legal-edit-page main {
    max-width: 860px;
}

.legal-edit-page .app-header {
    padding-left: max(18px, calc((100vw - 860px) / 2));
    padding-right: max(18px, calc((100vw - 860px) / 2));
}

.legal-edit-shop {
    color: var(--muted);
    font-size: 13px;
    margin: 2px 0 0;
}

.legal-edit-page .legal-preview h3 {
    font-size: 14px;
    margin: 0 0 8px;
}

/* 編集ページの入力欄のまとまり。枠で囲みます。 */
.legal-edit {
    background: #f6fbf9;
    border: 1px solid #9ccbc0;
    border-radius: 12px;
    padding: 16px 18px;
}

.legal-edit-lead {
    background: #fff;
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    font-size: 13px;
    margin: 0 0 14px;
    padding: 10px 12px;
}

.legal-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
}

/* 「特定商取引法に基づく表記をしますか？」の Yes／No（LINEでつながらない店舗の編集ページだけ。
   2026-10-05、ユーザー指示）。会計の支払い方法（admin-settle.css の .settle-method）と同じ、
   押せる札の形で並べます。選んでいる札は枠を濃くします。 */
.legal-disclosure-choice {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin: 16px 0 14px;
    min-width: 0;
    padding: 14px;
}

/* 問いは枠の線に乗せず、枠の中の見出しにします（スマホ幅で2行に折れると、線が文字を横切るため）。 */
.legal-disclosure-choice legend {
    color: var(--ink);
    float: left;
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 10px;
    padding: 0;
    width: 100%;
}

.legal-disclosure-options {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.legal-disclosure-option {
    align-items: center;
    background: #fff;
    border: 1px solid #cbd8d3;
    border-radius: 10px;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font-size: 15px;
    gap: 8px;
    min-height: 44px;
    min-width: 120px;
    padding: 6px 14px;
}

.legal-disclosure-option:has(input:checked) {
    background: #eff9f6;
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.legal-disclosure-option input {
    height: 18px;
    margin: 0;
    width: 18px;
}

.legal-disclosure-note {
    color: var(--muted);
    font-size: 13px;
    margin: 10px 0 0;
}

.legal-disclosure-public {
    font-size: 13px;
    margin: 0 0 12px;
}

@media (max-width: 760px) {
    .legal-edit {
        padding: 14px;
    }

    .legal-edit-actions > button {
        flex: 1 1 0;
    }

    .legal-disclosure-option {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* 事業者情報の変更の確認（legal/index.php の #legal-confirm-dialog）。
   /billing/ の .confirm-dialog（billing.css）と同じ見た目を、この画面の色の変数で写しています。 */
.confirm-dialog {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(19, 38, 33, .28);
    color: var(--ink);
    max-width: min(560px, calc(100vw - 32px));
    padding: 0;
    width: 100%;
}

.confirm-dialog::backdrop {
    background: rgba(15, 32, 28, .58);
}

.confirm-dialog form {
    padding: 24px;
}

.confirm-dialog h2 {
    font-size: 19px;
    line-height: 1.5;
    margin: 0 0 12px;
}

.confirm-dialog p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
    margin: 0 0 10px;
}

.confirm-dialog .confirm-note {
    background: #fdf6ec;
    border-radius: 8px;
    color: #7c5316;
    padding: 10px 12px;
}

.legal-change-list {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0 0 14px;
    max-height: 45vh;
    overflow: auto;
    padding: 0;
}

.legal-change-list li {
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    font-size: 13px;
    gap: 4px;
    padding: 10px 12px;
}

.legal-change-before,
.legal-change-after {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.legal-change-before {
    color: var(--muted);
}

.legal-change-after {
    color: var(--ink);
    font-weight: 800;
}

.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

@media (max-width: 560px) {
    .confirm-dialog form {
        padding: 20px 16px;
    }

    .dialog-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* 事業者情報が欠けてオンライン決済を倒したときだけ、枠の色を強めます。
   「足りません」の案内と「切り替えました」の報告は重さが違うためです。 */
.legal-gate-note.is-downgraded {
    background: #fdf0ec;
    border-left-color: #c0512a;
}

.legal-gate-note .legal-gate-downgraded {
    border-bottom: 1px solid #e6cdbf;
    color: #742b15;
    padding-bottom: 10px;
}

/* 事業者情報の郵便番号欄。入力欄の横に「住所を検索」を置きます。
   初期登録ウィザードの .postal-control（shop-register/assets/registration.css）と同じ形です。
   部品は /assets/postal-lookup.js（3画面共有）。 */
.postal-control {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.postal-control button {
    min-width: 112px;
    white-space: nowrap;
}

/* インボイス登録番号。先頭の「T」は固定の文字で、入力欄には数字13桁だけを打ちます
   （/shop-admin/legal/。2026-09-19、ユーザー指示）。T の箱は入力欄と同じ高さ・同じ線で、
   ひと続きの欄に見せます。幅は桁数ぶんで足りるので、行いっぱいには広げません。 */
.invoice-number-control {
    align-items: stretch;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    max-width: 260px;
}

.invoice-number-prefix {
    align-items: center;
    background: #eef3f1;
    border: 1px solid #cbd8d3;
    border-radius: 9px 0 0 9px;
    border-right: 0;
    color: var(--ink);
    display: flex;
    font-size: 15px;
    font-weight: 800;
    padding: 0 12px;
}

.invoice-number-control input {
    border-radius: 0 9px 9px 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.postal-candidate-field {
    background: #f7f9fa;
    border-radius: 8px;
    padding: 12px;
}

/* 候補の選択欄は2列グリッドの1マスに収めず、行いっぱいに出します。 */
.form-grid .postal-candidate-field {
    grid-column: 1 / -1;
}

/* 郵便番号検索の進み具合。ウィザードの .field-status と同じ4状態です。 */
.field-status {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    min-height: 18px;
    overflow-wrap: anywhere;
}

.field-status.success { color: var(--brand-dark); }
.field-status.error { color: var(--danger); }
.field-status.loading::before { content: "● "; }

/* /assets/field-rules.js が入力欄の下に出すエラー文。 */
.field-error {
    color: var(--danger);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(184, 53, 53, .1);
}

/* インフォメーションタブの「テイクアウト・事前予約のURL」。担当者招待URLの欄と同じ見た目にそろえます。 */
.order-page-link {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.order-page-link input {
    background: #fff;
    border: 1px solid #cddbd7;
    border-radius: 10px;
    color: #17302d;
    flex: 1 1 280px;
    font: inherit;
    min-height: 46px;
    min-width: 0;
    padding: 10px 13px;
}

/* 「URLをコピー」「開いて確かめる」は、隣のURLの欄と同じ46pxにします（2026-10-15）。 */
.order-page-link > :is(button, .button-link) {
    min-height: 46px;
}

/* 16px未満だと iPhone がタップで画面を拡大します（admin.css の末尾の説明）。 */
@media (max-width: 760px) {
    .order-page-link input,
    .field-wide textarea {
        font-size: 16px;
    }
}

/* ============================================================
   インフォメーションタブの「対応が必要なこと」
   ============================================================
   タブに出す数字（admin.css の .tab-badge）の内訳です。数字と同じ配列から作ります
   （admin.js の informationAlerts()）。琥珀色は .legal-gate-note と同じ重さで、
   「止まっている」ではなく「まだ済んでいない」という意味で使います。 */

.information-alerts {
    border-color: #e6cf9f;
}

.information-alert-list {
    counter-reset: information-alert;
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.information-alert-list li {
    background: #fdf6ec;
    border-left: 4px solid #c98a2e;
    border-radius: 10px;
    counter-increment: information-alert;
    padding: 15px 18px;
}

/* 番号はタブの数字と対応します。「①が何なのか」をこの行で言い当てられるようにします。 */
.information-alert-list li strong::before {
    color: #b07a20;
    content: counter(information-alert) ". ";
}

.information-alert-list li strong {
    display: block;
    font-size: 15px;
}

.information-alert-list li p {
    color: #5d4a2d;
    font-size: 13px;
    line-height: 1.8;
    margin: 6px 0 12px;
}

/* 一度お知らせした項目（2026-09-21、ユーザー指示。admin.js の seenInformationNotices()）。
   タブの数字には数えないので、琥珀色を使わず、番号も振りません（番号はタブの数字と対応させています）。 */
.information-alert-list.is-seen li {
    background: #f5f8f7;
    border-left-color: #bdc8c4;
}

.information-alert-list.is-seen li strong::before {
    content: none;
}

.information-alert-list.is-seen li p {
    color: var(--muted);
}

/* ============================================================
   LINEでお客様とつながらない店舗（042）の支払い方法と注文のLINE通知（2026-10-05、ユーザー指示）
   ============================================================
   支払い方法は選択肢を置かず「店頭払い」だけを出します（admin.js の paymentPanel()）。
   注文のLINE通知は、スイッチをOFFのまま押せなくして並べます（lineNotificationPanel()）。 */

.payment-fixed {
    font-size: 18px;
    font-weight: 900;
    margin: 0 0 8px;
}

.channel-card.is-unavailable {
    background: #f5f8f7;
}

.channel-card.is-unavailable strong {
    color: var(--muted);
}

.switch input:disabled + span {
    cursor: not-allowed;
    opacity: .5;
}

/* ---- 持ち場ランチャー（2026-10-07。index.php の #role-launcher-dialog） ----
   大きなボタンを格子に並べます。押す場所は最小 64px。覚えている持ち場には印を付けます。
   ★ボタンの中は1列の grid で、列は minmax(0, 1fr)・justify-content は stretch にします（2026-10-15、ユーザー指示
     「持ち場のボタンで文字の位置がそろっていない」）。admin.css の button 共通の justify-content:center が残ると、
     列が中身の幅になって横の真ん中に置かれ、説明文が1行で収まるボタン（ドリンク・キッチン（すべて）・予約など）だけ
     文字の左端が右へずれていました。 */
.role-launcher-dialog {
    max-width: min(760px, calc(100vw - 32px));
}

.role-launcher-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    margin: 16px 0;
}

.role-launcher-choice {
    align-content: start;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    display: grid;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: start;
    min-height: 96px;
    padding: 14px 16px;
    text-align: left;
}

.role-launcher-choice strong {
    font-size: 19px;
}

.role-launcher-choice small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.role-launcher-choice.is-remembered {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 2px var(--brand);
}

.role-launcher-mark {
    background: var(--brand);
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
}

.role-launcher-remember {
    align-items: center;
    display: flex;
    font-size: 14px;
    gap: 8px;
    margin: 0 0 8px;
}