/* ============================================================
   静岡牛乳 Design System — 共通トークン＋基本コンポーネント
   出典: claude.ai/design 「静岡牛乳 Design System」(1b ネイビーバンド)
   各アプリはこのファイルを <style> にインライン展開するか
   static として読み込む。トークン名は変更しないこと。
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
/* base — 1b ネイビーバンド */
--blue-900:#16385F;--blue-700:#1F4E86;--blue-600:#2D6CB5;--blue-500:#3B7EC9;--blue-100:#E8EEF6;--blue-50:#F2F6FA;
--ink-1:#1B2634;--ink-2:#38506E;--ink-3:#5A6675;--ink-4:#8A94A0;
--white:#FFFFFF;--paper:#FAFBFC;
--line-1:#D3DCE8;--line-2:#E4E9EF;
--green-bg:#DFF2EE;--green-text:#0E6E5C;--green-600:#17917C;
--amber-bg:#FBE9D4;--amber-text:#A05A14;--amber-600:#D07A2E;
--red-bg:#F9DEE4;--red-text:#AD2B4E;--red-600:#C22B54;
/* semantic */
--brand:var(--blue-900);--action:var(--blue-600);--action-hover:var(--blue-700);
--text-body:var(--ink-1);--text-sub:var(--ink-3);--text-faint:var(--ink-4);--text-onbrand:#FFFFFF;--text-heading:var(--blue-900);
--surface-page:var(--paper);--surface-card:var(--white);--surface-band:var(--blue-900);--surface-tint:var(--blue-100);--surface-row-alt:var(--blue-50);
--border-strong:var(--line-1);--border-soft:var(--line-2);
--status-ok-bg:var(--green-bg);--status-ok-text:var(--green-text);
--status-warn-bg:var(--amber-bg);--status-warn-text:var(--amber-text);
--status-error-bg:var(--red-bg);--status-error-text:var(--red-text);
--focus-ring:0 0 0 3px rgba(45,108,181,.35);
/* typography */
--font-sans:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic UI',sans-serif;
--text-xs:11px;--text-sm:12px;--text-base:13px;--text-md:14px;--text-lg:16px;--text-xl:20px;--text-2xl:26px;
--weight-normal:400;--weight-medium:500;--weight-bold:700;
--leading-tight:1.35;--leading-normal:1.6;
/* spacing / radius / shadow */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;
--radius-sm:4px;--radius:6px;--radius-lg:8px;
--shadow-card:0 1px 3px rgba(22,56,95,.08),0 1px 2px rgba(22,56,95,.05);
--shadow-pop:0 4px 16px rgba(22,56,95,.16);
--cell-pad-y:6px;--cell-pad-x:10px;
--control-h:34px;--control-h-sm:28px;
}

/* ---------- base ---------- */
body{font-family:var(--font-sans);color:var(--text-body);font-size:var(--text-base);line-height:var(--leading-normal);background:var(--surface-page);margin:0}
a{color:var(--action);text-decoration:none}
a:hover{color:var(--action-hover);text-decoration:underline}
::selection{background:var(--blue-100)}

/* ---------- ネイビーバンド（アプリヘッダ） ---------- */
.ds-band{background:var(--surface-band);color:var(--text-onbrand);padding:0 var(--sp-4);height:48px;display:flex;align-items:center;gap:var(--sp-3)}
.ds-band .ds-title{font-size:var(--text-lg);font-weight:var(--weight-bold);color:#fff}
.ds-band .ds-org{font-size:var(--text-sm);color:rgba(255,255,255,.75)}

/* ---------- カード ---------- */
.ds-card{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--sp-4)}

/* ---------- ボタン ---------- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;height:var(--control-h);padding:0 var(--sp-4);border-radius:var(--radius);font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-medium);cursor:pointer;transition:background-color 120ms ease,color 120ms ease;border:1px solid transparent}
.ds-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ds-btn-primary{background:var(--action);color:#fff}
.ds-btn-primary:hover{background:var(--action-hover)}
.ds-btn-primary:active{background:var(--blue-900)}
.ds-btn-secondary{background:#fff;color:var(--action);border-color:var(--line-1)}
.ds-btn-secondary:hover{background:var(--blue-50)}
.ds-btn[disabled]{opacity:.45;cursor:not-allowed}
.ds-btn-sm{height:var(--control-h-sm);padding:0 var(--sp-3);font-size:var(--text-sm)}

/* ---------- フォーム ---------- */
.ds-input,.ds-select,.ds-textarea{height:var(--control-h);padding:0 var(--sp-3);border:1px solid var(--line-1);border-radius:var(--radius);font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-body);background:#fff;transition:border-color 120ms ease}
.ds-textarea{height:auto;padding:var(--sp-2) var(--sp-3)}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{outline:none;border-color:var(--action);box-shadow:var(--focus-ring)}
.ds-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-sub)}

/* ---------- タブ ---------- */
.ds-tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--border-soft)}
.ds-tab{padding:var(--sp-2) var(--sp-4);border:none;background:transparent;color:var(--text-sub);font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-medium);cursor:pointer;border-radius:var(--radius) var(--radius) 0 0;transition:background-color 120ms ease,color 120ms ease}
.ds-tab:hover{background:var(--blue-50)}
.ds-tab.active{background:var(--surface-tint);color:var(--text-heading);font-weight:var(--weight-bold)}

/* ---------- バッジ ---------- */
.ds-badge{display:inline-block;padding:1px var(--sp-2);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--weight-medium)}
.ds-badge-ok{background:var(--status-ok-bg);color:var(--status-ok-text)}
.ds-badge-warn{background:var(--status-warn-bg);color:var(--status-warn-text)}
.ds-badge-error{background:var(--status-error-bg);color:var(--status-error-text)}
.ds-badge-neutral{background:var(--surface-tint);color:var(--ink-2)}

/* ---------- 通知 ---------- */
.ds-notice{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);font-size:var(--text-base)}
.ds-notice-ok{background:var(--status-ok-bg);color:var(--status-ok-text)}
.ds-notice-warn{background:var(--status-warn-bg);color:var(--status-warn-text)}
.ds-notice-error{background:var(--status-error-bg);color:var(--status-error-text)}
.ds-notice-info{background:var(--surface-tint);color:var(--ink-2)}

/* ---------- テーブル（台帳） ---------- */
.ds-table{border-collapse:collapse;width:100%;font-size:var(--text-base)}
.ds-table th{background:var(--surface-tint);color:var(--ink-2);font-weight:var(--weight-medium);text-align:left;padding:var(--cell-pad-y) var(--cell-pad-x);border-bottom:1px solid var(--line-1)}
.ds-table td{padding:var(--cell-pad-y) var(--cell-pad-x);border-bottom:1px solid var(--border-soft)}
.ds-table tr:hover td{background:var(--blue-50)}
.ds-table .num{text-align:right;font-variant-numeric:tabular-nums}