/* デザイントークン（Designer確定・Gold は強調限定/全画面5%未満）。dark/light両対応。 */
:root {
  --mc-navy: #17274D;
  --mc-gold: #CCB366;
  --mc-accent: #1B5FA8;

  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-2: #EEF1F6;
  --ink: #17274D;
  --ink-muted: #5A6478;
  --line: #D9DEE8;
  --positive: #1E7A52;
  --warn: #B7791F;
  --danger: #9B2C2C;

  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --font-num: "Inter", "Roboto Mono", var(--font-jp);
  --fs-hero: clamp(2.5rem, 6vw, 4.25rem);
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(23, 39, 77, .06);
  --shadow-md: 0 6px 24px rgba(23, 39, 77, .10);
}
:root[data-theme="dark"] {
  --bg: #0D1426;
  --surface: #141E36;
  --surface-2: #1C2944;
  --ink: #EAEEF6;
  --ink-muted: #9AA6BE;
  --line: #2A3858;
  --mc-accent: #4A8BD6;
  --mc-gold: #D8C27E;
  --positive: #3FBE85;
  --shadow-md: 0 6px 24px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-jp);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.gold-rule { height: 2px; background: var(--mc-gold); width: 56px; border: 0; border-radius: 2px; }
.tap { min-width: 44px; min-height: 44px; }
.muted { color: var(--ink-muted); }

/* 削減額 CountUp ヒーロー */
.hero-saving { font-size: var(--fs-hero); line-height: 1.05; font-weight: 800; color: var(--mc-gold); }
.struck { text-decoration: line-through; color: var(--ink-muted); }

/* バッジ */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid var(--line); background: var(--surface-2); }
.badge-gold { border-color: var(--mc-gold); color: var(--mc-navy); }
:root[data-theme="dark"] .badge-gold { color: var(--mc-gold); }
.badge-pos { border-color: var(--positive); color: var(--positive); }

/* 内製/外注タグ */
.tag-in { background: rgba(30,122,82,.12); color: var(--positive); }
.tag-out { background: rgba(155,44,44,.10); color: var(--danger); }
.tag-part { background: rgba(183,121,31,.12); color: var(--warn); }

/* 法令カードの登場アニメ */
@keyframes growin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.growin { animation: growin .28s ease both; }

/* スティッキー削減額（右上） */
.sticky-hero { position: sticky; top: 1rem; z-index: 5; }

/* 印刷ビュー（A4縦・入力UI非表示） */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .print-full { width: 100% !important; max-width: 100% !important; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* ヘッダー: ログインユーザー名 / 有効期限の表示（navy 地に白系文字。gold 不使用） */
.hdr-meta { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; font-size: .8rem; line-height: 1.2; }
.hdr-meta__icon { opacity: .8; }
.hdr-meta__user { color: #e6ecf7; font-weight: 600; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-pill { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
/* 中立（無期限/管理者/余裕あり）: navy 地に映える淡いブルーグレー（既存ヘッダー文字色と統一） */
.hdr-pill--neutral { color: #9fb0d6; }
/* 期限間近（<=warn日）: amber 系警告。gold(#CCB366) とは別色で混同回避・塗りは極薄 */
.hdr-pill--warn { color: #F0B454; background: rgba(240, 180, 84, .14); }
/* 期限切れ: 赤系 */
.hdr-pill--danger { color: #F2A0A0; background: rgba(242, 160, 160, .16); }

@media (max-width: 768px) {
  .sticky-hero { position: static; }
  .hdr-meta { flex-basis: 100%; }
  .hdr-meta__user { max-width: 12ch; }
}