@charset "UTF-8";
/* ============================================================
   ディアレストポータル — 共通スタイル
   構成：1 トークン / 2 リセット / 3 骨格 / 4 見出し / 5 ボタン /
        6 カード / 7 テーブル / 8 絞り込み / 9 フォーム / 10 バッジ /
        11 数値カード / 12 通知 / 13 状態表示 / 14 ページ送り /
        15 モーダル / 16 部品 / 17 認証 / 18 会員 / 19 印刷 / 20 レスポンシブ
   ルール：色・寸法・文字サイズ・余白は :root のトークンだけを参照する。
          生のhex値は :root 以外に書かない。個別画面にインラインstyleを書かない。
   ============================================================ */

/* --- 1. デザイントークン ------------------------------------- */
:root {
  /* ---- 面と境界 ---- */
  --c-bg:            #F5F6F8;  /* アプリ背景 */
  --c-surface:       #FFFFFF;  /* カード・テーブル・フォームの面 */
  --c-surface-alt:   #FAFBFC;  /* テーブルヘッダー、補助的な帯 */
  --c-border:        #DDE1E6;  /* 罫線・カード枠（装飾） */
  --c-border-control:#7E8894;  /* input/select/checkbox の枠（3.6:1 確保） */

  /* ---- 文字 ---- */
  --c-text:          #1C2530;  /* 本文・見出し（白地 15.5:1） */
  --c-text-muted:    #5A6672;  /* 補足・単位・メタ（白地 5.9:1） */
  --c-text-invert:   #FFFFFF;

  /* ---- 基調色 ---- */
  --c-primary:       #17527A;  /* 主要操作・リンク（白地 8.3:1） */
  --c-primary-hover: #113F5E;
  --c-primary-weak:  #E8F0F6;  /* 選択中ナビ、情報帯の背景 */

  /* ---- 役割識別色（ヘッダーの4pxラインとナビ選択のみに使用） ---- */
  --c-role-hq:       #17527A;  /* 本部管理 */
  --c-role-store:    var(--c-role-hq);  /* 店舗管理（本部管理と共通） */
  --c-role-member:   var(--c-role-store);  /* 会員画面（店舗管理と共通） */

  /* ---- 状態色（前景 / 背景 の対で使う） ---- */
  --c-ok-fg:      #1F7A4D;  --c-ok-bg:      #E7F3EC;  /* 正常・有効・完了 */
  --c-wait-fg:    #17527A;  --c-wait-bg:    #E8F0F6;  /* 確認待ち・処理中 */
  --c-warn-fg:    #8A5B00;  --c-warn-bg:    #FBF1DA;  /* 警告 */
  --c-error-fg:   #B3261E;  --c-error-bg:   #FCEBEA;  /* エラー・失敗 */
  --c-off-fg:     #5A6672;  --c-off-bg:     #EEF0F2;  /* 停止・無効・下書き */
  --c-focus:      #1A73C7;                            /* フォーカスリング */

  /* ---- タイポグラフィ（外部フォント禁止のためOS標準のみ） ---- */
  --font-base: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI",
               "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs:   0.75rem;   /* 12px  バッジ、注記 */
  --fs-sm:   0.8125rem; /* 13px  ラベル、テーブル補助列 */
  --fs-md:   0.875rem;  /* 14px  テーブル本文、密度の高い領域 */
  --fs-base: 1rem;      /* 16px  本文・入力値（入力は必ず16px以上：iOSの拡大防止） */
  --fs-lg:   1.125rem;  /* 18px  カード見出し */
  --fs-xl:   1.375rem;  /* 22px  ページ見出し */
  --fs-2xl:  1.75rem;   /* 28px  会員画面の主見出し・数値表示 */
  --lh-tight: 1.4;      /* 見出し */
  --lh-base:  1.7;      /* 和文本文 */
  --lh-table: 1.55;
  --fw-normal: 400; --fw-medium: 500; --fw-bold: 700;

  /* ---- 余白（4pxグリッド） ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- 形 ---- */
  --r-control: 4px;  /* ボタン・入力・バッジ */
  --r-card:    8px;  /* カード・パネル */
  --shadow-overlay: 0 8px 24px rgba(20, 32, 45, 0.16); /* 浮く要素のみ */
  --z-header: 100; --z-drawer: 200; --z-overlay: 300;

  /* ---- 拡張トークン（方針書2章に無い、骨格・部品用の補助値） ---- */
  --header-h:      60px;                    /* 4pxの役割ラインを含むヘッダー高 */
  --nav-w:         240px;                   /* サイドバー幅 */
  --content-max:   1280px;                  /* コンテンツ最大幅 */
  --c-overlay:     rgba(20, 32, 45, 0.45);  /* ドロワー・モーダルの背面 */
  --c-scroll-fade: rgba(20, 32, 45, 0.16);  /* 横スクロールの続きを示す帯 */
  --c-toast-bg:    #1C2530;                 /* トースト（浮く要素）の面 */
}

/* --- 2. リセットと基本 ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  background: var(--c-bg);
  color: var(--c-text);
  text-wrap: pretty;
}

input, select, button, textarea { font-family: inherit; }
th, td { text-align: left; }

a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-hover); text-decoration: underline; }

/* 見出しは h1 → h2 → h3 の順で必ず小さくなるようにする */
h1, h2, h3, h4 { line-height: var(--lh-tight); text-wrap: balance; }
h1 { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0 0 var(--sp-3); }
h2 { font-size: var(--fs-lg); font-weight: var(--fw-medium); margin: var(--sp-6) 0 var(--sp-3); }
h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); margin: var(--sp-5) 0 var(--sp-2); }
h4 { font-size: var(--fs-md); font-weight: var(--fw-medium); margin: var(--sp-4) 0 var(--sp-2); }

:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* hidden は !important ではなく詳細度で解決する */
[hidden][hidden] { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* 数値は等幅に揃える */
.num { font-variant-numeric: tabular-nums; }
.ta-r { text-align: right; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.muted { color: var(--c-text-muted); }
.faint { color: var(--c-text-muted); }
.push-right { margin-left: auto; }

/* --- 3. アプリ全体の骨格 -------------------------------------- */
.app-header {
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--header-h); padding: 0 var(--sp-5);
  background: var(--c-surface);
  border-top: 4px solid var(--c-role-hq);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: var(--z-header);
}
.app-header--master { border-top-color: var(--c-role-hq); }
.app-header--store  { border-top-color: var(--c-role-store); }
.app-header--member { border-top-color: var(--c-role-member); }

.app-header__brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-md); font-weight: var(--fw-bold); white-space: nowrap;
}
.app-logo {
  width: 24px; height: 24px; border-radius: var(--r-control);
  background: var(--c-primary); color: var(--c-text-invert);
  display: grid; place-items: center; font-size: var(--fs-xs);
  flex: none;
}
.app-header--store .app-logo  { background: var(--c-role-store); }
.app-header--member .app-logo { background: var(--c-role-member); }

.app-header__context { font-size: var(--fs-sm); color: var(--c-text-muted); }
.app-header__user {
  margin-left: auto; display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--c-text-muted);
}

.app-body { display: flex; align-items: stretch; min-height: calc(100vh - var(--header-h)); }

.side-nav {
  width: var(--nav-w); flex: 0 0 var(--nav-w);
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  padding: var(--sp-4) var(--sp-2) var(--sp-10);
}
.side-nav__heading {
  margin: 0 0 var(--sp-2); padding: 0 var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--c-text-muted);
}
.side-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-nav__link {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-2) var(--sp-4);
  border-left: 3px solid transparent;
  border-radius: 0 var(--r-control) var(--r-control) 0;
  font-size: var(--fs-md); line-height: var(--lh-tight);
  color: var(--c-text); text-decoration: none;
}
.side-nav__link:hover { background: var(--c-surface-alt); color: var(--c-text); text-decoration: none; }
.side-nav__link.is-active {
  background: var(--c-primary-weak); color: var(--c-text);
  border-left-color: var(--c-role-hq); font-weight: var(--fw-medium);
}
.layout-store .side-nav__link.is-active  { border-left-color: var(--c-role-store); }
.layout-member .side-nav__link.is-active { border-left-color: var(--c-role-member); }
.side-nav__badge { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-muted); }

.main {
  flex: 1; min-width: 0;
  width: 100%; max-width: var(--content-max); margin-inline: auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-12);
}

/* 画面ごとの最大幅（.page--* を追加するだけ） */
.page--sm { max-width: 560px; }
.page--narrow { max-width: 680px; }
.page--md { max-width: 760px; }
.page--lg { max-width: 880px; }
.section-gap { margin-top: var(--sp-4); }
.page--xl { max-width: 980px; }
.page--sp { max-width: 420px; margin-inline: auto; }

/* --- 4. 見出し・パンくず ------------------------------------- */
.breadcrumb { font-size: var(--fs-sm); color: var(--c-text-muted); }
.breadcrumb span { color: var(--c-text-muted); }

.page-head {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  margin-top: var(--sp-2); flex-wrap: wrap;
}
.page-title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.page-lead { margin: var(--sp-2) 0 0; font-size: var(--fs-md); color: var(--c-text-muted); }
.page-head__actions { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.section-title { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: var(--lh-tight); }
.section-title--gap { margin-top: var(--sp-6); }

/* --- 5. ボタン ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 40px; padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  border: 1px solid var(--c-border-control); border-radius: var(--r-control);
  background: var(--c-surface); color: var(--c-text);
  cursor: pointer; text-decoration: none;
  transition: background-color .15s;
}
.btn:hover { background: var(--c-surface-alt); color: var(--c-text); text-decoration: none; }
.btn:disabled, .btn.is-disabled {
  background: var(--c-off-bg); color: var(--c-off-fg);
  border-color: var(--c-border); cursor: not-allowed;
}

.btn--primary {
  border-color: var(--c-primary); background: var(--c-primary); color: var(--c-text-invert);
}
.btn--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-text-invert); }

.btn--danger,
.btn--danger-quiet {
  border-color: var(--c-error-fg); background: var(--c-surface); color: var(--c-error-fg);
}
.btn--danger:hover,
.btn--danger-quiet:hover { background: var(--c-error-bg); color: var(--c-error-fg); }

.btn--primary-quiet {
  border-color: var(--c-primary); background: var(--c-surface); color: var(--c-primary);
}
.btn--primary-quiet:hover { background: var(--c-primary-weak); color: var(--c-primary); }

.btn--dashed { border: 1px dashed var(--c-border-control); color: var(--c-text); }
.btn--block { width: 100%; }
.btn--lg { min-height: 44px; font-size: var(--fs-base); padding: var(--sp-3) var(--sp-5); }
.btn--grow { flex: 1; }

.btn-link {
  background: none; border: 0; padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  color: var(--c-primary); cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }
.link-sm { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.link-danger { font-size: var(--fs-sm); color: var(--c-error-fg); }

/* 一覧の行内操作はテキストボタンにする */
.btn-row {
  display: inline-block; font-size: var(--fs-md); font-weight: var(--fw-medium);
  color: var(--c-primary); border: 0; background: none;
  padding: var(--sp-2) 0; white-space: nowrap; text-decoration: none;
}
.btn-row:hover { color: var(--c-primary-hover); text-decoration: underline; }

/* --- 6. カード ------------------------------------------------ */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
.card + .card { margin-top: var(--sp-4); }
.card__head {
  margin: 0; padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: var(--lh-tight);
  border-bottom: 1px solid var(--c-border);
}
.card__head--fill { background: var(--c-surface-alt); }
.card__body { padding: var(--sp-5); }
.card__body--lg { padding: var(--sp-5); }
.card__foot {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--c-border);
  background: var(--c-surface-alt); border-radius: 0 0 var(--r-card) var(--r-card);
}
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
/* stack直下の単独ボタンは横に広げない（モバイルのみ全幅） */
.stack > .btn { align-self: flex-start; }
.stack--sm { gap: var(--sp-3); }
.stack--lg { gap: var(--sp-6); }

/* --- 7. テーブル --------------------------------------------- */
.table-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-card); overflow: hidden;
}
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* 右端に続きがあることを示す12pxの帯（装飾ではなく可視性のため） */
  background:
    linear-gradient(to left, var(--c-surface), transparent) right center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--c-scroll-fade), transparent) right center / 12px 100% no-repeat scroll;
}
.table { width: 100%; min-width: var(--table-min, 860px); border-collapse: collapse; }
.table caption {
  text-align: left; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm);
  color: var(--c-text-muted); border-bottom: 1px solid var(--c-border);
}
.table thead tr { background: var(--c-surface-alt); }
.table th {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-muted);
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: var(--header-h); z-index: 1;
}
.table td {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md); line-height: var(--lh-table);
}
.table td.tight { padding: var(--sp-3) var(--sp-4); }
/* ゼブラは使わず、1pxの罫線だけで行を分ける */
.table tbody tr { border-bottom: 1px solid var(--c-border); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: var(--c-surface-alt); }
.table tbody td:first-child { background: var(--c-surface); }
.table tbody tr:hover td:first-child { background: var(--c-surface-alt); }
.table .sub { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); }
.table .num, .table .ta-r { font-variant-numeric: tabular-nums; }
.table th.sortable { padding: 0; }
.table th.sortable button {
  all: unset; cursor: pointer; display: block; width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-muted);
}
.table th.sortable button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }

/* --- 8. 絞り込みバー ----------------------------------------- */
.filter-bar {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.filter-bar .input, .filter-bar .select { min-height: 40px; padding: var(--sp-2) var(--sp-3); }
.filter-bar__note { margin-left: auto; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* --- 9. フォーム --------------------------------------------- */
/* 1カラム固定（375px要件と誤入力防止のため横並びにしない） */
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.field-grid--wide { grid-template-columns: minmax(0, 1fr); }
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field__label {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text);
}
/* 補足は「入力前に読ませる」ためラベルと入力の間に置く（DOM順は変えずに order で並べ替え） */
.field > * { order: 2; }
.field > .field__label { order: 0; }
.field > .field__hint  { order: 1; }
.field > .field__error { order: 3; }
.field__hint { margin: 0; font-size: var(--fs-xs); color: var(--c-text-muted); }
.field__error { margin: 0; font-size: var(--fs-sm); color: var(--c-error-fg); }

.input, .select, .textarea {
  width: 100%; min-height: 40px;
  border: 1px solid var(--c-border-control); border-radius: var(--r-control);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-base); line-height: var(--lh-tight);
  background: var(--c-surface); color: var(--c-text);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-text-muted); }
.textarea { line-height: var(--lh-base); resize: vertical; min-height: 96px; }
.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--c-error-fg); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--c-off-bg); color: var(--c-off-fg); }
.input--inline, .select--inline { width: auto; }
.input--lg, .select--lg { min-height: 44px; font-size: var(--fs-base); }

/* 必須・任意チップ（アスタリスク単独は使わない） */
.req, .opt {
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  border-radius: var(--r-control); padding: 1px var(--sp-2);
  border: 1px solid currentColor; background: var(--c-surface);
}
.req { color: var(--c-error-fg); }
.opt { color: var(--c-off-fg); }

/* ラジオ／チェックボックスの選択肢ボックス */
.choice {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  min-height: 44px; padding: var(--sp-3);
  border: 1px solid var(--c-border-control); border-radius: var(--r-control);
  background: var(--c-surface);
  font-size: var(--fs-md); cursor: pointer;
}
.choice:hover { background: var(--c-surface-alt); }
.choice.is-selected { border-color: var(--c-primary); background: var(--c-primary-weak); }
.choice input { accent-color: var(--c-primary); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.choice__label { display: block; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.choice__hint { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 2px; }
.choice-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.choice-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* チップ状のチェックボックス */
.chip-check {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border-control); border-radius: var(--r-control);
  background: var(--c-surface); font-size: var(--fs-md); cursor: pointer;
}
.chip-check:hover { background: var(--c-surface-alt); }
.chip-check input { width: 18px; height: 18px; accent-color: var(--c-primary); }
.chip-check.is-on { border-color: var(--c-primary); background: var(--c-primary-weak); }
.check-inline {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  min-height: 44px; padding-block: var(--sp-2);
  font-size: var(--fs-md); color: var(--c-text); cursor: pointer;
}
.check-inline input { width: 18px; height: 18px; accent-color: var(--c-primary); margin-top: 3px; flex: none; }

/* 送信ボタンの並び（主 → 副の順で末尾左寄せ） */
.form-actions {
  display: flex; gap: var(--sp-3); justify-content: flex-start;
  margin-top: var(--sp-6); flex-wrap: wrap;
}
.form-actions--sticky {
  position: sticky; bottom: 0;
  padding: var(--sp-3) var(--sp-4); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-card);
}
.form-actions--split { justify-content: flex-start; }
.form-actions--split .push-right { margin-left: auto; }

/* --- 10. バッジ（状態表現：色 + 形 + テキストの3点セット） ----- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  padding: 2px var(--sp-2);
  border-radius: var(--r-control); white-space: nowrap;
  background: var(--c-off-bg); color: var(--c-off-fg);
}
/* 形はCSSで描く（文字グリフは読み上げに混ざるため使わない） */
.badge--ok::before, .badge--done::before, .badge--wait::before,
.badge--warn::before, .badge--ng::before, .badge--off::before {
  content: ""; flex: none; display: block;
}
/* 正常・有効：● 円（塗り） */
.badge--ok { background: var(--c-ok-bg); color: var(--c-ok-fg); }
.badge--ok::before { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
/* 完了：◎ 円（枠線・中空） */
.badge--done { background: var(--c-ok-bg); color: var(--c-ok-fg); }
.badge--done::before { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
/* 確認待ち・処理中：◐ 半円 */
.badge--wait { background: var(--c-wait-bg); color: var(--c-wait-fg); }
.badge--wait::before {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
/* 警告：▲ 三角 */
.badge--warn { background: var(--c-warn-bg); color: var(--c-warn-fg); }
.badge--warn::before {
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 9px solid currentColor;
}
/* エラー・失敗：■ 四角 */
.badge--ng { background: var(--c-error-bg); color: var(--c-error-fg); }
.badge--ng::before { width: 9px; height: 9px; background: currentColor; }
/* 停止・無効・下書き：― 横棒 */
.badge--off { background: var(--c-off-bg); color: var(--c-off-fg); }
.badge--off::before { width: 11px; height: 3px; background: currentColor; }

/* 状態ではないラベル（役割・分類）。形は付けない */
.badge--info   { background: var(--c-primary-weak); color: var(--c-primary); }
.badge--strong { background: var(--c-off-bg); color: var(--c-text); font-weight: var(--fw-bold); }
.badge--plain  { background: var(--c-surface); color: var(--c-text-muted); border: 1px solid var(--c-border); }

/* --- 11. 数値カード ------------------------------------------ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.kpi-grid--sm { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: var(--sp-4) var(--sp-5);
}
.kpi--ng { background: var(--c-error-bg); border-color: var(--c-error-bg); }
.kpi--warn { background: var(--c-warn-bg); border-color: var(--c-warn-bg); }
.kpi__label { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.kpi__value {
  margin: var(--sp-1) 0 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); font-variant-numeric: tabular-nums;
}
.kpi__value--sm { font-size: var(--fs-xl); }
.kpi__sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* --- 12. 通知・注意書き（左辺4pxで種別を示す） ---------------- */
.alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--c-surface-alt); border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-text-muted);
  border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4);
}
.alert--danger { background: var(--c-error-bg); border-color: var(--c-error-bg); border-left-color: var(--c-error-fg); }
.alert--warn   { background: var(--c-warn-bg);  border-color: var(--c-warn-bg);  border-left-color: var(--c-warn-fg); }
.alert--ok     { background: var(--c-ok-bg);    border-color: var(--c-ok-bg);    border-left-color: var(--c-ok-fg); }
.alert__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.alert__text { margin: var(--sp-1) 0 0; font-size: var(--fs-md); color: var(--c-text); }
.alert--danger .alert__title { color: var(--c-error-fg); }
.alert--danger .alert__text { color: var(--c-text); }

.note {
  margin: 0; padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-alt); border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-border);
  border-radius: var(--r-card); font-size: var(--fs-md); color: var(--c-text-muted);
}
.note--warn { background: var(--c-warn-bg); border-color: var(--c-warn-bg); border-left-color: var(--c-warn-fg); color: var(--c-warn-fg); }
.note--danger { background: var(--c-error-bg); border-color: var(--c-error-bg); border-left-color: var(--c-error-fg); color: var(--c-error-fg); }
.note__title { margin: 0 0 var(--sp-1); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-text); }
.note--warn .note__title { color: var(--c-warn-fg); }
.note--danger .note__title { color: var(--c-error-fg); }
.note ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); line-height: var(--lh-base); }

.danger-zone {
  display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap;
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  background: var(--c-error-bg); border: 1px solid var(--c-error-bg);
  border-left: 4px solid var(--c-error-fg); border-radius: var(--r-card);
}
.danger-zone__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-error-fg); }
.danger-zone__text { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--c-text); }

/* --- 13. 状態表示（読み込み・0件） --------------------------- */
.state-box {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: var(--sp-12) var(--sp-5); text-align: center;
}
.state-box__title { margin: 0; font-weight: var(--fw-bold); }
.state-box__text { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-md); color: var(--c-text-muted); }
.spinner {
  width: 26px; height: 26px; margin: 0 auto var(--sp-3);
  border: 3px solid var(--c-border); border-top-color: var(--c-primary);
  border-radius: 50%; animation: spin .8s linear infinite; display: block;
}

/* --- 14. ページ送り ------------------------------------------ */
.pager {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-border); background: var(--c-surface-alt);
}
.pager__btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  min-width: 44px; min-height: 40px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border-control); border-radius: var(--r-control);
  background: var(--c-surface); color: var(--c-text); cursor: pointer; text-decoration: none;
}
.pager__btn:hover { background: var(--c-surface-alt); text-decoration: none; }
.pager__btn.is-active { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-text-invert); }
.pager__btn.is-disabled { background: var(--c-off-bg); color: var(--c-off-fg); border-color: var(--c-border); pointer-events: none; }
.pager__note { margin-left: auto; font-size: var(--fs-sm); color: var(--c-text-muted); }
/* Laravel の {{ $x->links() }} を使う場合はこのブロックを差し替えてください */

/* --- 15. モーダル（本当に浮く要素なので影を使う） ------------- */
.modal {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--c-overlay);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
}
.modal__panel {
  background: var(--c-surface); border-radius: var(--r-card); width: 100%; max-width: 460px;
  box-shadow: var(--shadow-overlay); overflow: hidden;
}
.modal__head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-5); border-bottom: 1px solid var(--c-border);
}
.modal__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.modal__body { padding: var(--sp-5); }
.modal__foot {
  display: flex; gap: var(--sp-3); justify-content: flex-start;
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--c-border); background: var(--c-surface-alt);
}

/* --- 16. 部品（棒グラフ・手順・ドロップ枠・定義リスト） ------ */
.bar { height: var(--sp-2); background: var(--c-off-bg); border-radius: var(--r-control); overflow: hidden; }
.bar--thin { height: 6px; }
.bar__fill { display: block; height: 100%; background: var(--c-primary); }

.steps { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.steps__item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-control);
  background: var(--c-surface); font-size: var(--fs-md); color: var(--c-text-muted);
}
.steps__item.is-current { border-color: var(--c-primary); background: var(--c-primary-weak); color: var(--c-primary); font-weight: var(--fw-medium); }
.steps__item.is-done { color: var(--c-text-muted); }
.steps__num {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); background: var(--c-off-bg); color: var(--c-text-muted);
}
.steps__item.is-current .steps__num { background: var(--c-primary); color: var(--c-text-invert); }

.dropzone {
  border: 1px dashed var(--c-border-control); border-radius: var(--r-card);
  background: var(--c-surface-alt); padding: var(--sp-6); text-align: center;
}
.dropzone__name { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); }
.dropzone__meta { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.dropzone__actions { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); flex-wrap: wrap; }

/* 確認画面の「項目名／値」 */
.dl { margin: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.dl dt {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  font-size: var(--fs-sm); color: var(--c-text-muted); border-bottom: 1px solid var(--c-border);
}
.dl dd {
  margin: 0; padding: var(--sp-3) 0; font-size: var(--fs-base);
  border-bottom: 1px solid var(--c-border); overflow-wrap: anywhere;
}
.dl--plain { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); }
.dl--plain dt, .dl--plain dd { border: 0; padding: 0; }

.row-list { list-style: none; margin: 0; padding: 0; }
.row-list__item { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); }
.row-list__item:last-child { border-bottom: 0; }
.row-list__date { font-size: var(--fs-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

.two-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-5); align-items: start; }
.two-col--wide-left { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
.two-col--form { grid-template-columns: minmax(0,1.5fr) minmax(280px,1fr); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--sp-3); }
.sticky-side { position: sticky; top: calc(var(--header-h) + var(--sp-5)); display: flex; flex-direction: column; gap: var(--sp-4); }

.mono {
  font-size: var(--fs-sm); color: var(--c-primary);
  background: var(--c-primary-weak); border-radius: var(--r-control);
  padding: 2px var(--sp-2); white-space: nowrap;
}
.pre-body {
  margin: 0; font-family: inherit; font-size: var(--fs-md); line-height: var(--lh-base);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.preview-frame { border: 1px solid var(--c-border); border-radius: var(--r-card); background: var(--c-surface-alt); padding: var(--sp-4); }

/* --- 17. 認証・登録画面（中央カード） ------------------------ */
.auth { display: flex; justify-content: center; padding: var(--sp-12) var(--sp-4); min-height: 100vh; }
.auth__inner { width: 100%; max-width: 432px; }
.auth__brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-bold); font-size: var(--fs-base); margin-bottom: var(--sp-5);
}
.auth__brand .app-logo { width: 26px; height: 26px; font-size: var(--fs-sm); }
.auth__card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: var(--sp-6);
}
.auth__title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.auth__lead { margin: var(--sp-2) 0 0; font-size: var(--fs-md); color: var(--c-text-muted); }
.auth__form { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-6); }
.auth__note-list {
  margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-8);
  background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--r-card);
  font-size: var(--fs-sm); color: var(--c-text-muted); line-height: var(--lh-base);
}
.label-row { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.label-row label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text); }
.label-row a { margin-left: auto; font-size: var(--fs-sm); }

/* --- 18. 会員画面 -------------------------------------------- */
.m-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-card); overflow: hidden;
}
.m-card__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-border);
  font-weight: var(--fw-bold);
}
.m-card__head .app-logo { width: 22px; height: 22px; font-size: var(--fs-xs); }
.m-card__section { padding: 0 var(--sp-5) var(--sp-5); }
.m-card__section--top { padding: var(--sp-5); }
.m-sub { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-muted); }
.m-name { margin: 2px 0 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.m-rank-card {
  margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--c-primary-weak); border: 1px solid var(--c-border); border-radius: var(--r-card);
}
.m-menu { display: flex; flex-direction: column; gap: var(--sp-2); }
.m-menu a {
  display: flex; align-items: center; min-height: 44px;
  font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-text);
  border: 1px solid var(--c-border-control); border-radius: var(--r-control); padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
}
.m-menu a:hover { background: var(--c-surface-alt); color: var(--c-text); text-decoration: none; }
.m-cta {
  display: block; margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base); font-weight: var(--fw-medium);
  color: var(--c-text-invert); background: var(--c-primary);
  border-radius: var(--r-control); text-align: center; text-decoration: none;
}
.m-cta:hover { background: var(--c-primary-hover); color: var(--c-text-invert); text-decoration: none; }
.m-store-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.m-store-list li { border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); }
.m-history-card {
  display: block; padding: var(--sp-4); color: inherit; text-decoration: none;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card);
}
.m-history-card:hover { border-color: var(--c-border-control); background: var(--c-surface-alt); color: inherit; text-decoration: none; }

/* --- 19. 印刷 ------------------------------------------------ */
@media print {
  .side-nav, .app-header__user, .page-head__actions, .form-actions { display: none; }
  .main { padding: 0; }
}

/* --- 20. レスポンシブ ---------------------------------------- */
/* ~767px（375px基準）：単一カラム、ボタンは縦積みフル幅 */
@media (max-width: 767px) {
  .main { padding: var(--sp-4) var(--sp-4) var(--sp-10); }
  .btn, .pager__btn { min-height: 44px; }
  .input, .select, .textarea,
  .filter-bar .input, .filter-bar .select { min-height: 44px; }
  .filter-bar { gap: var(--sp-3); }
  .filter-bar .input--inline, .filter-bar .select--inline { width: 100%; }
  .stack > .btn { align-self: stretch; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .page-head__actions { margin-left: 0; width: 100%; }
  .page-head__actions .btn { flex: 1; }
  .dl { grid-template-columns: minmax(0, 1fr); }
  .dl dt { padding-bottom: 0; border-bottom: 0; }
}

/* ~1023px：サイドバーはドロワー。テーブルは横スクロール + 先頭列固定 */
@media (max-width: 1023px) {
  .two-col, .two-col--wide-left, .two-col--form { grid-template-columns: minmax(0,1fr); }
  .sticky-side { position: static; }
  .table th { position: static; }
  .table th:first-child, .table tbody td:first-child { position: sticky; left: 0; z-index: 2; }
  .table th:first-child { background: var(--c-surface-alt); }
}