/* =====================================================================
   会計フリーランス UIデザインシステム v1  (assets/ui.css)
   紺=信頼(会計)/橙=行動/帳票的な数字表現。全画面共通の唯一のCSS。
   モバイルファースト(人材はスマホ利用が主)。
   ===================================================================== */

/* ---------- 1. デザイントークン ---------- */
:root{
  /* ブランド(サイトv5と同一) */
  --navy-900:#0D2B4A;      /* 見出し・最重要テキスト */
  --navy-700:#123C68;      /* プライマリ(ボタン/リンク/ロゴ) */
  --navy-100:#E3EAF3;      /* プライマリ淡背景 */
  --orange-600:#E86A10;    /* アクション強調・アクセント(多用禁止) */
  --orange-100:#FDEBDC;    /* 強調淡背景(締切バナー等) */
  --green-700:#0C6B57;     /* 成功・入金・承認済 */
  --green-100:#E1F0EC;
  --red-700:#B3261E;       /* 期限超過・エラー */
  --red-100:#FBE4E2;
  --amber-700:#8A6100;     /* 期限接近(黄) */
  --amber-100:#FFF3D6;

  /* ニュートラル */
  --ink-900:#1A2330;       /* 本文 */
  --ink-600:#4A5568;       /* 補足 */
  --ink-400:#8A94A6;       /* プレースホルダ・注記 */
  --line-200:#DEE4EC;      /* 罫線 */
  --bg-100:#F4F6F9;        /* アプリ背景 */
  --bg-0:#FFFFFF;          /* カード */

  /* タイポグラフィ */
  --font-sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --font-num:"Noto Sans JP",sans-serif;  /* 金額: font-feature-settingsで等幅数字 */
  --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px;
  --fs-xl:20px; --fs-2xl:24px; --fs-money:28px;

  /* レイアウト */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --radius-s:8px; --radius-m:12px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(13,43,74,.06),0 2px 8px rgba(13,43,74,.05);
  --maxw:960px;
}

/* ---------- 2. ベース ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-100);color:var(--ink-900);
  font-family:var(--font-sans);font-size:var(--fs-md);line-height:1.65;}
a{color:var(--navy-700);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--orange-600);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 金額・時間は必ず .num(等幅数字・右寄せ) */
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.money{font-size:var(--fs-money);font-weight:700;letter-spacing:.01em}
.money small{font-size:.55em;font-weight:600;color:var(--ink-600);margin-left:2px}

/* ---------- 3. アプリシェル ---------- */
.appbar{position:sticky;top:0;z-index:30;background:var(--bg-0);
  border-bottom:1px solid var(--line-200);}
.appbar-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
  gap:var(--sp-3);padding:10px var(--sp-4);}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--navy-700);font-size:var(--fs-lg)}
.brand .mark{width:26px;height:26px;border-radius:7px;background:var(--navy-700);
  color:#fff;display:grid;place-items:center;font-size:14px}
.brand .sub{font-size:var(--fs-xs);font-weight:500;color:var(--ink-400);margin-left:2px}
.appbar .who{margin-left:auto;font-size:var(--fs-sm);color:var(--ink-600)}
.main{max-width:var(--maxw);margin:0 auto;padding:var(--sp-4) var(--sp-4) 96px;}
@media(min-width:768px){.main{padding-top:var(--sp-6)}}

/* 下部タブ(人材・モバイル) / PCは左に寄るナビ不要のシンプル運用 */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg-0);
  border-top:1px solid var(--line-200);display:flex;
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 0 6px;font-size:11px;color:var(--ink-400);text-decoration:none}
.tabbar a.on{color:var(--navy-700);font-weight:700}
.tabbar .ico{font-size:20px;line-height:1}
@media(min-width:768px){.tabbar{display:none}
  .appbar-in nav.pcnav{display:flex;gap:var(--sp-5);margin-left:var(--sp-6)}
  .pcnav a{font-size:var(--fs-sm);color:var(--ink-600);font-weight:500}
  .pcnav a.on{color:var(--navy-700);font-weight:700;border-bottom:2px solid var(--orange-600);padding-bottom:2px}}
@media(max-width:767px){.pcnav{display:none}}

/* ---------- 4. 見出し・セクション ---------- */
.page-title{font-size:var(--fs-2xl);font-weight:700;color:var(--navy-900);
  margin:var(--sp-2) 0 var(--sp-4);line-height:1.35}
.section-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  color:var(--ink-400);text-transform:uppercase;margin:var(--sp-6) 0 var(--sp-2)}

/* ---------- 5. カード ---------- */
.card{background:var(--bg-0);border:1px solid var(--line-200);
  border-radius:var(--radius-m);box-shadow:var(--shadow-card);
  padding:var(--sp-4);margin-bottom:var(--sp-3)}
.card.tight{padding:var(--sp-3) var(--sp-4)}
.card h3{margin:0 0 var(--sp-2);font-size:var(--fs-lg);color:var(--navy-900)}
.card .meta{font-size:var(--fs-sm);color:var(--ink-600)}

/* ---------- 6. ToDoカード(期限駆動UIの主役) ---------- */
.todo{display:flex;align-items:center;gap:var(--sp-3);
  border-left:4px solid var(--line-200);cursor:pointer}
.todo:active{transform:scale(.995)}
.todo .body{flex:1;min-width:0}
.todo .title{font-weight:700;font-size:var(--fs-md);color:var(--navy-900)}
.todo .due{font-size:var(--fs-sm);color:var(--ink-600);margin-top:2px}
.todo .chev{color:var(--ink-400);font-size:18px}
.todo.warn{border-left-color:var(--amber-700);background:linear-gradient(0deg,var(--bg-0),var(--bg-0)) , var(--bg-0)}
.todo.warn .due{color:var(--amber-700);font-weight:700}
.todo.danger{border-left-color:var(--red-700)}
.todo.danger .due{color:var(--red-700);font-weight:700}

/* ---------- 7. バッジ・ステータス ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:700;padding:3px 10px;line-height:1.6;white-space:nowrap}
.badge.navy{background:var(--navy-100);color:var(--navy-700)}
.badge.green{background:var(--green-100);color:var(--green-700)}
.badge.amber{background:var(--amber-100);color:var(--amber-700)}
.badge.red{background:var(--red-100);color:var(--red-700)}
.badge.gray{background:#EDF0F4;color:var(--ink-600)}

/* ---------- 8. ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;border-radius:var(--radius-s);cursor:pointer;
  font-family:inherit;font-weight:700;font-size:var(--fs-md);
  padding:12px 20px;min-height:48px;text-decoration:none;transition:filter .15s}
.btn:hover{filter:brightness(1.06);text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--navy-700);color:#fff}
.btn.accent{background:var(--orange-600);color:#fff}   /* 締結・提出など前進アクション専用 */
.btn.ghost{background:var(--bg-0);color:var(--navy-700);border:1.5px solid var(--navy-700)}
.btn.quiet{background:#EDF0F4;color:var(--ink-600)}
.btn.danger-ghost{background:var(--bg-0);color:var(--red-700);border:1.5px solid var(--red-700)}
.btn.block{width:100%}
.btn.sm{min-height:36px;padding:6px 14px;font-size:var(--fs-sm)}

/* ---------- 9. フォーム ---------- */
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:var(--fs-sm);font-weight:700;
  color:var(--ink-900);margin-bottom:6px}
.field .req{color:var(--red-700);font-size:var(--fs-xs);margin-left:4px}
.input,select.input,textarea.input{width:100%;border:1.5px solid var(--line-200);
  border-radius:var(--radius-s);padding:12px 14px;font-size:16px; /* iOSズーム防止=16px */
  font-family:inherit;background:var(--bg-0);color:var(--ink-900);min-height:48px}
.input:focus{border-color:var(--navy-700);outline:none;box-shadow:0 0 0 3px var(--navy-100)}
.input[aria-invalid="true"]{border-color:var(--red-700);background:var(--red-100)}
.hint{font-size:var(--fs-xs);color:var(--ink-400);margin-top:4px}
.error-text{font-size:var(--fs-sm);color:var(--red-700);font-weight:600;margin-top:4px}
.input-row{display:flex;gap:var(--sp-2)}
.input-row>*{flex:1}

/* ---------- 10. 帳票テーブル → モバイルはカード化 ---------- */
.sheet{width:100%;border-collapse:collapse;background:var(--bg-0)}
.sheet th,.sheet td{padding:10px 12px;border-bottom:1px solid var(--line-200);
  font-size:var(--fs-sm);text-align:left;vertical-align:top}
.sheet th{color:var(--ink-600);font-weight:600;background:#F8FAFC;white-space:nowrap}
.sheet td.num,.sheet th.num{text-align:right}
.sheet tr:last-child td{border-bottom:0}
@media(max-width:640px){
  .sheet.stack thead{display:none}
  .sheet.stack tr{display:block;border:1px solid var(--line-200);
    border-radius:var(--radius-s);margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--bg-0)}
  .sheet.stack td{display:flex;justify-content:space-between;gap:var(--sp-3);
    border:0;padding:6px 0}
  .sheet.stack td::before{content:attr(data-th);color:var(--ink-400);
    font-size:var(--fs-xs);font-weight:600;flex-shrink:0}
}

/* 明細の金額行(請求書兼支払通知) */
.ledger{list-style:none;margin:0;padding:0}
.ledger li{display:flex;justify-content:space-between;align-items:baseline;
  padding:10px 0;border-bottom:1px dashed var(--line-200);font-size:var(--fs-md)}
.ledger li .lab{color:var(--ink-600)}
.ledger li .val{font-weight:600}
.ledger li.minus .val{color:var(--red-700)}
.ledger li.total{border-bottom:0;border-top:2px solid var(--navy-900);
  margin-top:4px;padding-top:12px}
.ledger li.total .lab{color:var(--navy-900);font-weight:700}
.ledger li.total .val{font-size:var(--fs-money);font-weight:700;color:var(--navy-900)}

/* ---------- 11. ステッパー(契約ウィザード) ---------- */
.stepper{display:flex;gap:0;margin:var(--sp-4) 0 var(--sp-5);counter-reset:step}
.step{flex:1;text-align:center;position:relative;font-size:var(--fs-xs);color:var(--ink-400)}
.step::before{counter-increment:step;content:counter(step);
  display:grid;place-items:center;width:28px;height:28px;margin:0 auto 4px;
  border-radius:50%;background:#EDF0F4;color:var(--ink-400);font-weight:700}
.step::after{content:"";position:absolute;top:14px;left:calc(50% + 18px);
  right:calc(-50% + 18px);height:2px;background:var(--line-200)}
.step:last-child::after{display:none}
.step.done::before{background:var(--green-700);color:#fff;content:"✓"}
.step.on{color:var(--navy-700);font-weight:700}
.step.on::before{background:var(--navy-700);color:#fff}

/* ---------- 12. バナー(締切・重要通知) ---------- */
.banner{display:flex;gap:var(--sp-2);align-items:flex-start;
  border-radius:var(--radius-s);padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--sp-3)}
.banner.info{background:var(--navy-100);color:var(--navy-700)}
.banner.warn{background:var(--amber-100);color:var(--amber-700)}
.banner.danger{background:var(--red-100);color:var(--red-700)}
.banner.success{background:var(--green-100);color:var(--green-700)}

/* ---------- 13. 稼働バー(累計/精算幅) ---------- */
.hoursbar{position:relative;height:14px;border-radius:var(--radius-pill);
  background:#EDF0F4;overflow:hidden;margin:6px 0 4px}
.hoursbar .band{position:absolute;top:0;bottom:0;background:var(--navy-100)}
.hoursbar .fill{position:absolute;top:0;bottom:0;left:0;background:var(--navy-700);
  border-radius:var(--radius-pill)}
.hoursbar .fill.over{background:var(--red-700)}
.hoursbar-scale{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--ink-400)}

/* ---------- 14. 空状態 ---------- */
.empty{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--ink-400)}
.empty .t{font-weight:700;color:var(--ink-600);margin-bottom:4px}

/* ---------- 15. キュー(運営) ---------- */
.qrow{display:flex;gap:var(--sp-3);align-items:center;padding:10px 12px;
  border-left:4px solid var(--line-200);border-bottom:1px solid var(--line-200);background:var(--bg-0)}
.qrow.yellow{border-left-color:var(--amber-700);background:#FFFDF5}
.qrow.red{border-left-color:var(--red-700);background:#FFF7F6}
.qrow .sla{margin-left:auto;font-size:var(--fs-xs);font-weight:700}

/* ---------- 16. アプリ追補(samples/ui.cssを起点にした最小限の追加。部品の新発明はしない) ---------- */
/* 誓約書の全文スクロール表示(T6 Step2) */
.pledgebox{max-height:260px;overflow-y:auto;border:1px solid var(--line-200);
  border-radius:var(--radius-s);padding:var(--sp-3) var(--sp-4);background:#F8FAFC;
  font-size:var(--fs-sm);color:var(--ink-600)}
.pledgebox ol{margin:0;padding-left:1.4em}
.pledgebox li{margin-bottom:8px}
/* 再発行済み明細の折りたたみ(T3) */
details.superseded summary{cursor:pointer;font-size:var(--fs-sm);color:var(--ink-400);padding:6px 0}
/* チェックボックス行(同意チェック等) */
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm)}
.checkline input{width:20px;height:20px;margin-top:2px;flex-shrink:0}
/* stack時に不要なラベル列を隠す(値セルの data-th が代わりを担う) */
@media(max-width:640px){.sheet.stack td.mhide{display:none}}
/* ヘッダーナビの項目は折り返さない(運営コンソールはナビ項目が多い) */
.pcnav a{white-space:nowrap}
.appbar .who{white-space:nowrap}