/*
 * mysurance ブランドシート — コンソール全画面 (index / console / admin) 共通。
 * 各ページの <style> と perf.css / statement.css の**後**に読み込み、
 * トークン層の上書き + コンポーネント形状だけをここで与える。
 *
 * 出典:
 *  - mysurance/lp-tagin-mys-brand (公式 LP リポジトリ) の tailwind.css トークンと
 *    基底コンポーネント (Button / Input / TextLink / InputItem / Header / Footer):
 *      maincolor #0069C3 / black #333 / gray-70 #555 / gray-50 #999 / gray-30 #D3D3D3
 *      backgroundblue #F2F7FC / backgroundgray #F5F5F5 / backgroundcaution #FFFDE6
 *      statuswarning #C80000 / statuscaution #E6D200 / boderblue #82BEE6
 *      shadow 0 0 20px rgba(51,51,51,.12)
 *      書体 AvenirNextLTPro-Bold(見出し 900/700) + AvenirNextLTPro-Medium(本文 500)
 *        + Noto Sans JP / body-medium 15px・行間 180%
 *      Button=角丸 8px (rounded-lg)・太字 / Input=角丸 12px (rounded-xl)・枠 gray-50
 *      TextLink=ブランド色 + 下線 / ヘッダ=ブランド塗り+白枠線ボタン (rounded-xl)
 *      Footer=白地・上罫 0.5px gray-30・コピーライトはキャプション gray-50
 *  - www.mysurance.co.jp 実サイトの実測 (2026-08): 表コンポーネント
 *      (列ヘッダ=ブランド塗り白字・上角 8px、罫線 #D3D3D3、強調列 #F2F7FC)
 *
 * ダークモードは提供しない (実サイトがライトのみのため、常にライトで描画)。
 * ページ側の配色定義は撤去し、本シートだけでライトのトークンを管理する。
 * 2026-09-05: 業務画面の密度・ナビは workspace.css へ分離。
 * 補助文字のコントラストと控えめな影は ../docs/design-system.md の業務用基準。
 */

:root {
  color-scheme: light;
  /* ページ共通トークンの差し替え (lp-tagin-mys-brand トークン準拠) */
  --page: #ffffff;            /* 地は純白 */
  --surface: #ffffff;         /* 白カード */
  --ink: #333333;             /* black */
  --ink-2: #555555;           /* gray-70 */
  --muted: #687787;           /* 白地でも読める補助文字 */
  --grid: #d3d3d3;            /* gray-30 */
  --line: #d3d3d3;            /* index.html は --line を使う */
  --border: #dce4ec;
  --canvas: #f2f7fc;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --content-width: 1120px;
  --control-height: 44px;
  --accent: #0069c3;          /* maincolor */
  --accent-ink: #ffffff;
  --good: #0e9a5f;
  --bad: #c80000;             /* statuswarning */
  --st-good: #0e9a5f;
  --st-warn: #e6d200;         /* statuscaution — **塗り専用**。下の --warn-ink を参照 */
  /* ★ **警告色を文字に使わない。** `--st-warn` (#e6d200) は塗り (chip の地・帯) の
     ための色で、白地に文字として置くと **1.55:1** — 事実上読めない (2026-09-01 指摘)。
     文字にはこちらを使う (白地で **5.54:1** = WCAG AA を超える)。
     `#b6820a` を直書きしていた箇所もここへ寄せた (3.39:1 で AA に届いていなかった)。 */
  --warn-ink: #8a6100;
  --st-bad: #c80000;
  /* ブランド固有 (このシートだけが参照) */
  --brand: #0069c3;
  --brand-dark: #00518f;
  --brand-pale: #e8f1fb;
  --brand-highlight: #f2f7fc; /* backgroundblue: 表の強調列・行 hover */
  --brand-shadow: 0 2px 8px rgba(0, 50, 90, .04);
  /* チャート (perf.css のトークンをブランド系に) */
  --series-1: #0069c3;
  --series-2: #0e9a5f;
  --series-3: #b5730f;
  --series-4: #6a4bc7;
  --funnel-1: #8fc0ea;
  --funnel-2: #4b96d8;
  --funnel-3: #0069c3;
  --funnel-4: #00518f;
  --axis: #c4cbd3;
  /* 書体: AvenirNextLTPro (Web フォントは同梱しないため Avenir Next で代替) */
  --font-head: "AvenirNextLTPro-Bold", "Avenir Next", "Noto Sans JP",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo",
    Helvetica, sans-serif;
  --font-body: "AvenirNextLTPro-Medium", "Avenir Next", "Noto Sans JP",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo",
    Helvetica, sans-serif;
}

/* ---- 地とタイポグラフィ (body-medium: 15px / 行間 180% / 500) ---- */
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3,
.perf .perf-card h2,
.stmt h3 {
  font-family: var(--font-head);
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.5;
}
/* h1〜h3 は black (900)、h4 相当以下は bold (700) */
h1, h2, h3 { font-weight: 700; }

/* ---- リンク: TextLink 準拠 (ブランド色 + 下線、hover は 80%) ---- */
a { color: var(--accent); text-decoration: underline; }
a:hover { color: color-mix(in srgb, var(--accent) 80%, #fff); }
/* ナビ・タブ・ボタン型のアンカーは下線を持たない */
.nav a, .section-tabs a, .tabs a, .filters a,
#dash .topbar a, .page-head a { text-decoration: none; }

/* ---- ブランドヘッダ帯: Header コンポーネント準拠 ----
 * ブランド塗りの全幅バー + 白枠線の角丸 12px (rounded-xl) ボタン。
 * .wrap (console/admin: 980px, index: 640px, 左右 padding 20px) の中から
 * margin で全幅までブリードし、padding でコンテンツ位置を .wrap に揃える。 */
/* 帯は .wrap の中に置いたまま、box-shadow を左右へ伸ばして全幅に見せる。
 * vw を使わないので**スクロールバー幅の影響を受けず**、中身は .wrap の列に
 * そのまま揃う (画面ごとに列幅を計算し直す必要がない)。 */
#dash .topbar,
.page-head,
.site-head,
#dash .nav,
.section-tabs,
body > .wrap > header {
  background: var(--brand);
  box-shadow: 0 0 0 100vmax var(--brand); /* 帯を画面幅いっぱいに伸ばす */
  clip-path: inset(0 -100vmax);           /* 上下には漏らさない */
  border-radius: 0;
}
#dash .topbar,
.page-head {
  margin: -28px 0 0; /* .wrap の padding-top 28px を打ち消して最上部へ */
  padding: 14px 0 6px;
  align-items: center;
}
.page-head { padding-bottom: 14px; }
#dash .topbar h1, .page-head h1, #dash .nav h1 { color: #fff; font-size: 17px; }
/* メニュー行に同居する要素 (身元・ログアウト) */
#dash .nav h1 { margin: 0 8px 0 0; white-space: nowrap; }

/* ロゴの右に置くサービス名 (Header: ロゴ ｜ サービス名 の並置)。
   区切りの罫は読み上げ対象から外し、視覚的にも本文より弱くする。
   縦位置は帯の中央ではなく**ワードマークの下端**に合わせる — ロゴは
   マーク (30px) が上下に張り出すので、箱の中央で揃えると隣の文字が
   ワードマークより高く見える */
.service-name {
  margin: 0 0 1px; /* .brand-logo .type と同じ下マージン */
  color: #fff; font-size: 17px; font-weight: 700;
  white-space: nowrap; line-height: 1.2;
  align-self: flex-end;
}
.service-name .sep { margin-right: 1px; opacity: .55; font-weight: 400; }
/* 狭い画面ではロゴの下に回して縮める (#dash .topbar は既定で nowrap)。
   セレクタに #dash を含めるのは、上の `#dash .topbar h1` に負けないため */
@media (max-width: 620px) {
  #dash .topbar, body > .wrap > header { flex-wrap: wrap; row-gap: 2px; }
  #dash .topbar h1.service-name, .site-head .service-name,
  body > .wrap > header .service-name {
    font-size: 13px; white-space: normal; flex-basis: 100%;
  }
}
#dash .nav .who { color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dash .nav button {
  white-space: nowrap;
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 12px;
  padding: 5px 14px;
  font-weight: 700;
  transition: background .12s, color .12s;
}
#dash .nav button:hover { background: #fff; color: var(--brand); }
/* ロゴ (Header コンポーネント: マーク + ワードマークを白で並置、下端揃え) */
.brand-logo { display: inline-flex; align-items: flex-end; gap: 2px; line-height: 0; }
.brand-logo .mark { width: 40px; height: 30px; }
.brand-logo .type { width: 137px; height: 17px; margin-bottom: 1px; }
#dash .topbar .who, .page-head .who { color: rgba(255, 255, 255, .85); }
#dash .topbar { flex-wrap: nowrap; }
#dash .topbar .who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dash .topbar h1 { white-space: nowrap; }
#dash .topbar button,
.page-head .who button {
  white-space: nowrap;
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 12px;
  padding: 6px 14px;
  font-weight: 700;
  transition: background .12s, color .12s;
}
#dash .topbar button:hover,
.page-head .who button:hover { background: #fff; color: var(--brand); }

/* コンソール未ログイン時 (ログイン画面): ロゴ + サービス名の薄い帯 */
.site-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -28px 0 32px; /* .wrap の padding-top 28px を打ち消す */
  padding: 14px 0;
}

/* index (申込): ヘッダは Header コンポーネントの通り、ロゴ + サービス名の薄い帯。
 * ページタイトル・リードは白地のコンテンツ側に置く */
/* :not(.site-head) — コンソールのログイン画面のヘッダ (.wrap 直下の header
 * でもある) には、申込ページ用のこの余白を効かせない */
body > .wrap > header:not(.site-head) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -40px 0 32px; /* .wrap の padding-top 40px を打ち消す */
  padding: 14px 0;
}

/* ページタイトル: コンテンツページの h1 (black・中央揃え) + リード */
.page-intro { margin: 0 0 24px; }
.page-intro h1 { font-size: 28px; text-align: center; margin: 0 0 12px; }
.page-intro p { color: var(--ink-2); margin: 0; }

/* ステップ表示: タイムラインコンポーネント (Modal の TimelineNode) ----
 * 塗りつぶし円ノード 24px (完了・現在=ブランド / 未到達=gray-50)、
 * ノード間は 2px のコネクタ線。完了区間はブランド色になる */
.steps {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 32px;
  color: var(--muted);
}
.steps .step {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-align: center;
}
.steps .step .n {
  width: 24px;
  height: 24px;
  border: 0;
  background: var(--muted);
  color: #fff;
  font-size: 13px;
}
.steps .step.current { color: var(--ink); font-weight: 700; }
.steps .step.current .n { background: var(--brand); }
.steps .step.done { color: var(--ink-2); }
.steps .step.done .n { background: var(--brand); }
.steps .sep {
  flex: 1 1 auto;
  min-width: 16px;
  height: 2px;
  margin-top: 11px; /* ノード (24px) の中心に合わせる */
  background: var(--grid);
  font-size: 0;     /* マークアップ上の「›」は線として描く */
  color: transparent;
}
.steps .step.done + .sep { background: var(--brand); }

/* ---- カード: 白地 + shadow トークン、角丸 16px ---- */
.card, .perf .tile, .perf .perf-card, .stmt, .modal, .modal-overlay .modal {
  border-color: var(--border);
  box-shadow: var(--brand-shadow);
  border-radius: 16px;
}

/* ---- 主要ボタン: Button (primary) 準拠 — 角丸 8px・太字・ブランド塗り。
 * hover は 90%、disabled は gray-300/gray-500 ---- */
.save-btn,
#key-form button,
#login button:not(.sso-btn):not(.sns-btn),
button.primary,
.paths-form .save,
#new-tag-form button.submit,
#new-member-form button.submit,
#bank-form .submit,
.stmt-confirm,
.notice-ok,
.modal-actions .primary-btn,
.decide-actions .approve {
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  transition: background .12s;
}
.save-btn:hover:enabled,
#key-form button:hover,
#login button:not(.sso-btn):not(.sns-btn):hover,
button.primary:hover:enabled,
.paths-form .save:hover,
#new-tag-form button.submit:hover,
#new-member-form button.submit:hover,
#bank-form .submit:hover,
.stmt-confirm:hover,
.notice-ok:hover,
.modal-actions .primary-btn:hover {
  background: color-mix(in srgb, var(--brand) 90%, #fff);
  filter: none;
}
.save-btn:disabled,
button.primary:disabled {
  background: #d3d3d3;
  color: #999;
  opacity: 1;
}
/* 承認 (good) と危険 (bad) の塗りボタンも同じ角丸 (色はセマンティックのまま) */
.decide-actions button,
.modal-actions button,
.stmt-object,
.stmt-object-send,
.cancel-btn,
.stmt-actions .print,
.stmt-bar #stmt-print,
.paths-form .cancel {
  border-radius: 8px;
}
.decide-actions .approve { background: var(--good); }
.decide-actions .approve:hover:enabled { background: color-mix(in srgb, var(--good) 90%, #fff); }

/* Button (secondary): 白地 + ブランド枠線。主要導線 (塗り) と並べる補助導線に使う */
#login button.secondary,
#login a.secondary,
button.secondary {
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 8px; /* Button トークンの角丸。これが無いと素の直角で出る (index の #ac-send) */
  font-weight: 700;
}
#login button.secondary:hover,
#login a.secondary:hover,
button.secondary:hover {
  background: color-mix(in srgb, var(--brand) 5%, #fff);
}

/* ---- 小ボタン類: Button (secondary) 準拠 — 白地 + ブランド枠線・角丸 8px、
 * hover はブランド 5% の地 ---- */
.dl-btn, .detail-btn, .reissue,
.tag-action, .approve, .reject,
.list-row .row-actions button,
.member-row .m-actions button,
.anc-item .a-actions button,
.audit-pager button,
.pw-reveal .close,
.snippet .copy, .copy {
  border-radius: 8px;
}
.dl-btn, .detail-btn, .reissue {
  background: #fff;
  border: 1px solid var(--brand);
  color: var(--brand);
  font-weight: 700;
}
.dl-btn:hover, .detail-btn:hover, .reissue:hover {
  background: color-mix(in srgb, var(--brand) 5%, #fff);
}

/* ---- 主ナビ: 実サイトのヘッダ同様、ブルーの帯の中に置く ----
 * 白の太字リンク。現在地はヘッダの「マイページ」ボタンと同じ白塗り。
 * 帯はヘッダ 2 段目として全幅にブリードして上の段と一体化する */
body.signed-out .page-head { padding-bottom: 16px; margin-bottom: 18px; }
#dash .nav, .section-tabs {
  margin: 0 0 20px;
  padding: 2px 0 12px;
  gap: 6px;
  align-items: center;
}
#dash .nav a, .section-tabs a, .section-tabs button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  padding: 5px 14px;
  transition: background .12s, color .12s;
}
#dash .nav a[aria-current="page"],
.section-tabs a[aria-current="page"],
.section-tabs button[aria-pressed="true"] {
  background: #fff;
  color: var(--brand);
}
#dash .nav a:hover, .section-tabs a:hover, .section-tabs button:hover { text-decoration: none; }
#dash .nav a:not([aria-current="page"]):hover,
.section-tabs a:not([aria-current="page"]):hover { background: rgba(255, 255, 255, .18); color: #fff; }
.tabs button:not([aria-pressed="true"]):hover,
.filters button:not([aria-pressed="true"]):hover,
.perf-filters button:not([aria-pressed="true"]):hover { background: var(--brand-highlight); }

/* ---- 表: 実サイトのプラン表コンポーネントに合わせる ----
 * 列ヘッダ = ブランド塗り + 白字 + 上角だけ 8px 丸め。罫線は gray-30。
 * 行 hover は backgroundblue #F2F7FC。 */
th {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  border-color: var(--brand);
}
th:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 0; }
th:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 0; }
#pay-table th, .stmt th { background: var(--brand); color: #fff; }
.stmt .tax-table th { background: var(--brand-dark); }
tr.row-link:hover td { background: var(--brand-highlight); }

/* ---- 入力: Input 準拠 — 白地・角丸 12px (rounded-xl)・枠は gray-50 ---- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="url"], input[type="number"],
input:not([type]), textarea, select {
  background: #fff;
  border-radius: 12px;
  /* **色だけでなく太さと種類も書く。** `border-color` だけだと UA 既定の
     `2px inset` が残り、枠を自前で書いていない欄が「凹んだ 2px の枠」で出る
     (2026-09-01 実測: admin の ops フォーム 15 欄)。画面側で `border: 1px solid …`
     を書いている欄は同じ値なので見た目は変わらない。 */
  border: 1px solid #999;
}

/* ---- **フォーム部品は既定で地の書体を継がない** ----
 * UA 既定は input / button が Arial 13.3px、textarea が monospace。`select` だけ
 * 下で個別に直してあったが、**同じ穴が input / textarea / button にも空いている** —
 * 画面側で書体を書き忘れた欄だけが別の顔になる。書き忘れは実際に溜まっていて、
 * 2026-09-01 の実測で admin の 23 欄と index の 2 ボタンが Arial / monospace だった。
 * **画面ごとに書き足す形にしない** — フォームを足すたびに落ちる (穴 17)。 */
input, textarea, button { font-family: inherit; }

/* ---- 何も書かれていない欄・ボタンの落としどころ ----
 * `:where()` で**詳細度 0** にしてあるのが要点。画面側に指定が 1 つでもあれば必ず
 * そちらが勝ち、**どこからも指定されていないものだけ**がここに落ちる (作者スタイルは
 * 詳細度 0 でも UA 既定には勝つ)。これで「フォームを足したら素の UA 既定で出た」を
 * 既定として塞ぐ — 列挙を足し忘れても崩れない。
 * 幅は入れない (行内に置く欄まで伸びる)。幅が要る場所は画面側で持つこと。 */
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="image"]),
  textarea
) {
  padding: 7px 10px;
}
:where(button.secondary, .dl-btn) { padding: 7px 14px; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* ---- プルダウン (select) — **開いた一覧まで当社の顔にする** ----
 * 閉じた状態の枠・余白は各画面が持てるが、**開いた一覧はここでしか揃えられない**。
 * 効かせ方は**ブラウザによって 2 段ある**ので、両方書く。
 *
 * (1) 素の `<select>` の一覧を描くのは OS で、こちらから効かせられるのは option の
 *     書体と色だけ。何も指定しないと、欄は当社のデザイン・開いた一覧は OS 既定という
 *     食い違いになる (2026-09-01 指摘)。`color-scheme` も明示する — 端末がダークだと、
 *     ライト固定のページの上に**黒い一覧**が開く。
 * (2) `appearance: base-select` に対応したブラウザ (Chrome / Edge 135+) では、
 *     一覧そのものが**普通の要素として描かれる**ので、枠・角丸・影・行の余白・
 *     hover まで当社の値で決められる。下の `@supports` がその層。
 *
 * **(1) だけでは足りない** — 書体と色を指定しても、行の高さ・角丸・影・hover の青は
 *     OS が描いたままで、「欄は当社・一覧は OS」の食い違いは残る (2026-09-01 再指摘)。
 *     逆に (2) だけにすると、非対応のブラウザで一覧が丸ごと OS 既定に戻る。
 *     どちらか片方を消さないこと。
 *
 * `select` 自体に書体を継がせるのも同じ理由。**`<select>` は既定で地の書体を
 * 継がない** (UA 既定は Arial 13.3px) ので、指定を書き忘れた欄だけが別の顔になる。 */
select { font-family: inherit; color: var(--ink); color-scheme: light; }
select option, select optgroup { font-family: inherit; background: #fff; color: var(--ink); }
/* 選択中の行 (一覧の中で「いまどれか」が分かる) */
select option:checked { background: var(--brand-highlight); }

/* (2) 一覧を要素として描ける層。**閉じた欄の見た目は各画面の指定がそのまま勝つ**
 *     (`.apply-form select` 等は詳細度で上) ので、ここでは一覧と、余白を持っていない
 *     欄の落としどころだけを決める。 */
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  /* 余白を書いていない欄の保険。画面側の `.xxx select { padding }` が勝つ。
     `max-width` は**この層でだけ要る**保険 — 素の `<select>` の幅は「いちばん長い
     選択肢」で決まるが、この層では「いま選ばれている値」で決まるので、長い値を
     選ぶと欄が伸びる (実測: 幅の指定が無い欄で 76px ⇔ 310px)。幅を固定したい欄は
     画面側で `width` / `min-width` を持たせること。 */
  select { padding: 7px 12px; max-width: 100%; cursor: pointer; }
  select:open { border-color: var(--brand); }
  /* 開閉の向きを矢印で見せる (素の select と同じ手掛かりを残す) */
  select::picker-icon { color: var(--ink-2); transition: rotate .12s; }
  select:open::picker-icon { rotate: 180deg; }

  /* 一覧の箱: 入力欄と同じ角丸 12px・影は shadow トークン。
     長い一覧 (都道府県・対象月) は箱の中でだけスクロールさせる */
  select::picker(select) {
    margin-top: 4px; padding: 6px; box-sizing: border-box;
    max-height: 18rem; overflow-y: auto; scrollbar-width: thin;
    font-family: inherit; color: var(--ink);
    background: #fff; border: 1px solid var(--grid); border-radius: 12px;
    box-shadow: var(--brand-shadow);
  }
  select::picker(select):focus-visible { outline: none; }

  /* 行: ボタンと同じ角丸 8px。チェックは右端に置く (文字の左端を揃えるため) */
  select option {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px; min-height: 0;
    font-size: 14px; line-height: 1.5; color: var(--ink); background: transparent;
    cursor: pointer;
  }
  select option::checkmark { order: 1; margin-left: auto; color: var(--brand); }
  select option:hover, select option:focus { background: var(--brand-highlight); outline: none; }
  select option:checked { color: var(--brand); font-weight: 700; background: var(--brand-highlight); }
  select option:disabled { color: var(--muted); cursor: default; }
  select option:disabled:hover { background: transparent; }
  select optgroup {
    padding: 8px 12px 2px; font-size: 12px; font-weight: 700; color: var(--muted);
    background: transparent;
  }
}

/* 指摘中の欄。背景は塗らず枠線だけで示す (欄の直下に文言を出す前提) */
input.invalid, textarea.invalid, select.invalid {
  border-color: var(--bad);
}
input.invalid:focus-visible, textarea.invalid:focus-visible, select.invalid:focus-visible {
  outline-color: var(--bad);
}

/* ---- 必須バッジ: InputItem 準拠 (statuswarning の枠線チップ・10px) ---- */
.agree .req, .req {
  font-size: 10px;
  font-weight: 700;
  color: var(--bad);
  border: 1px solid var(--bad);
  border-radius: 5px;
  background: transparent;
}

/* ---- バッジ / タグ: 塗りつぶし小タグ (角丸 6px) ----
 * お知らせレベル: 通常=ブランド / 重要=statuscaution (濃色文字) / 障害=statuswarning */
.a-level {
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 2px 10px;
  font-weight: 700;
}
.a-level.warning { background: var(--st-warn); color: #333; }
.a-level.critical { background: var(--bad); color: #fff; }
/* 審査キューの区分バッジも塗りつぶしに */
.kind {
  background: #ebebeb; /* gray-10 */
  color: var(--ink-2);
  border: 0;
  border-radius: 6px;
  padding: 2px 10px;
  font-weight: 700;
}
.kind.application { background: var(--brand); color: #fff; }

/* ---- ログイン画面: SSO ボタンも角丸 8px に ---- */
.gsi-btn, #login .sso .sso-btn { border-radius: 8px; }
#login .sso .sso-btn:hover:not(.brand-line) { background: color-mix(in srgb, var(--brand) 5%, #fff); border-color: var(--grid); }
.g-accounts button { border-radius: 8px; }
.g-accounts button:hover { border-color: var(--brand); background: var(--brand-highlight); }

/* ---- ダークモード用の個別ルール (各ページ側) をライト値で打ち消す ---- */
.tag-row .note.remand { color: var(--warn-ink); }
.tag-row .paths.unset { color: var(--warn-ink); }

/* ================= 状態バッジの配色 (console / admin 共通の 1 か所) =================
 * 色は**ここだけ**で決める。`.chip` の大きさ・形は各画面が持つ (審査キューは
 * 列幅を 12px 前提で見積もっているので、そちらは触らない) が、**色の対応は
 * 1 か所**にまとめる — 以前は console 側だけトークン化されていて、admin は
 * 点の色を状態ごとに直書きしていたため、片方だけ直すと食い違っていた。
 *
 * 配色 (2026-08-28 ユーザー指定): 審査中=青 / 承認=緑 / 差戻=黄 / 却下=グレー。
 * **赤は「運営が止めた」だけに残す** — 赤を使う先を減らすほど、赤が効く。
 * 却下から赤を外したので、**却下だと分かるのは記号 (✕)** の役目が重くなる。
 * **色だけに意味を持たせない**方針は維持 (✓ ↩ ✕ ■ ◷ !)。
 *
 * このシートは**ライト固定** (冒頭のとおりダークは提供しない) なので、
 * コントラストはライトの地だけで成立させればよい。
 */
.chip.pending, .chip.first_approved { --chip: var(--accent); }   /* 審査中 = 青 */
.chip.approved { --chip: var(--st-good); }                        /* 承認・配信中 = 緑 */
.chip.rejected, .chip.suspended { --chip: var(--muted); }         /* 却下・自分で停止 = グレー */
.chip.ops-suspended { --chip: #b13232; }                          /* 運営が停止 = 赤 (唯一) */
/* 差戻 = 黄 / パス未登録 = 黄 は**下の塗りのブロックで決める**。ここに書くと、
   同じ詳細度で後から上書きされて効かない (色を変えたい人が空振りする)。 */
/* お知らせの公開状態とメール配信 (admin) */
.chip.published, .chip.sent { --chip: var(--st-good); }
.chip.unpublished, .chip.unsent { --chip: var(--muted); }
.chip.sent-many, .chip.edited { --chip: var(--st-warn); }

/* 年次点検の点検回 (admin)。**審査の語彙 (pending/approved/rejected) を借りない** —
   点検の「済」は審査の「承認」ではないし、「対象外」は「却下」ではない。借りると
   一覧で 2 つの意味が同じ色になる (担当者一覧で権限に状態の色を当てて一度失敗している)。 */
.chip.cycle-done { --chip: var(--st-good); }                      /* 点検済み = 緑 */
.chip.cycle-excluded { --chip: var(--muted); }                    /* 対象外 (解約済み) = グレー */
/* 未実施は下の塗りのブロックで黄に塗る (手を打たないと終わらない状態だから) */

/* **手を打たないと配信されない状態だけ塗る** (一覧で最初に目に入る)。
 * 色 (どの状態か) と塗り (急ぐかどうか) は別の軸なので両立する。
 * 黄の塗りには暗い文字、赤の塗りには白 — どちらもライトの地で 4.5:1 を超える。 */
.chip.remanded, .chip.ops-suspended, .chip.cycle-due {
  color: var(--chip-ink); background: var(--chip); border-color: transparent;
}
/* ★ **「承認済み」は塗らない** (2026-09-01 指摘)。以前はパス未登録・設置待ちを
   黄で塗って「手を打たないと配信されない」を示していたが、**承認済みは
   ポジティブな結果**で、それを警戒色で出すと読み手には「何か問題がある」に見える。
   急ぎは状態の色ではなく**次の一手の 1 行**が言う (`NEXT_ACTION`・`--warn-ink`)。
   状態と次の一手は別の軸、という STAGE_CHIP の方針と同じ。 */
.chip.remanded, .chip.cycle-due { --chip: var(--st-warn); --chip-ink: #2a2000; }
.chip.ops-suspended { --chip-ink: #fff; }

/* ---- 生年月日: テキスト入力 + 補助のカレンダー (birthcal.js が組み立てる) ----
   ブラウザ既定の input[type=date] は表記・操作・配色がブラウザ任せなので使わず、
   打ちやすいテキスト欄を主にして、カレンダーを補助として横に添える。 */
.date-field { position: relative; display: flex; gap: 8px; align-items: stretch; }
.date-field input { flex: 1; min-width: 0; }
.date-open {
  flex: none; width: 48px; display: grid; place-items: center; cursor: pointer;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--muted); border-radius: 8px;
}
.date-open:hover, .date-open[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.date-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.date-open svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.date-pop {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; /* 幅は datepicker.css の共通定義に従う。 */
  padding: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--brand-shadow, 0 12px 32px rgba(0,0,0,.16));
}
.date-pop[hidden] { display: none; }
/* 下に入りきらないときは欄の上に出す (画面の外に出さない) */
.date-pop.above { top: auto; bottom: calc(100% + 6px); }
.date-pop-head { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.date-pop-head select {
  flex: 1; min-width: 0; padding: 7px 8px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--page); border: 1px solid var(--muted); border-radius: 8px;
}
.date-nav {
  flex: none; width: 32px; height: 32px; font: inherit; font-size: 18px; line-height: 1;
  color: var(--ink-2); background: var(--page);
  border: 1px solid var(--muted); border-radius: 8px; cursor: pointer;
}
.date-nav:hover:enabled { color: var(--accent); border-color: var(--accent); }
.date-nav:disabled { opacity: .4; cursor: not-allowed; }
.date-dow, .date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-dow { margin-bottom: 4px; font-size: 11px; color: var(--muted); text-align: center; }
.date-dow span { padding: 2px 0; }
.date-day {
  padding: 7px 0; font: inherit; font-size: 13px; color: var(--ink); text-align: center;
  background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.date-day:hover:enabled { border-color: var(--accent); }
.date-day:disabled { color: var(--muted); opacity: .4; cursor: not-allowed; }
.date-day.today { font-weight: 700; color: var(--accent); }
.date-day.selected { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.date-day.blank { visibility: hidden; }
.date-pop-foot {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.date-pop-foot button {
  font: inherit; font-size: 13px; font-weight: 600; padding: 5px 10px; cursor: pointer;
  color: var(--accent); background: none; border: 1px solid transparent; border-radius: 6px;
}
.date-pop-foot button:hover { border-color: var(--accent); }
.date-clear { color: var(--ink-2) !important; }

/* ---- 印刷: 帳票はモノクロ前提のまま (ブルーの帯・塗り・フッターは落とす) ---- */
@media print {
  #dash .topbar, .page-head, .site-head,
  #dash .nav, .section-tabs,
  body > .wrap > header {
    background: none;
    box-shadow: none; /* 全幅の帯は紙面に出さない */
    clip-path: none;
    margin: 0;
    padding: 0;
  }
  #dash .topbar h1, .page-head h1,
  body > .wrap > header h1, body > .wrap > header p { color: #000; }
  .brand-logo { display: none; } /* 白ロゴは紙面で見えない */
  th, #pay-table th, .stmt th, .stmt .tax-table th {
    background: none;
    color: #000;
    border-color: #999;
  }
  .site-footer { display: none; }
}

/* ---- 動きを抑えたい環境ではトランジションを止める ---- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* 担当者の姓名と部署・役職は、申込・運営フォームで共通の2列配置。 */
.contact-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 16px; margin-block: 16px; }
.contact-field-row > div { min-width: 0; }
.contact-field-row input { width: 100%; min-width: 0; box-sizing: border-box; }
.org-edit-grid > .contact-field-row, .org-edit-grid > .contact-legacy-note { grid-column: 1 / -1; }

.contact-field-row > div > label { margin-top: 0; margin-bottom: 6px; }
.org-edit-grid > .person-section-heading { grid-column: 1 / -1; margin: 12px 0 0; }
.org-edit-grid > .contact-field-row { margin-block: 0; }

.org-edit-grid { row-gap: 16px; }

/* タグ状態は装飾記号を付けず、狭い一覧列でも全文を中央に表示する。 */
.chip.tag-status-chip {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; white-space: normal; overflow-wrap: anywhere;
  min-width: 0; max-width: 100%; box-sizing: border-box; line-height: 1.5;
}