/* ============================================================
   現場LIFF 共通スタイル（スマホ・モバイルシェル）
   ------------------------------------------------------------
   ◆ theme.css のトークン上に構築。色/角丸/影は var(--...) を使用。
   ◆ app.css の btn / badge / card / input / select / textarea / num /
     avatar / meter / tappable 等は流用し、ここでは重複定義しない。
   ◆ 現場向けは「余白広め・大きめタップターゲット・直感優先」。
     管理画面より文字/余白を一回り大きく。
   ◆ LIFF前提＝スマホ単一カラム。PCで開いた場合は中央に最大430pxの
     モバイルシェルを枠表示（背景はごく薄いアクセント）。
   ◆ 新規クラスはすべてこのファイルに集約。命名は機能的に。
   ============================================================ */

/* ====== クラス索引（後続の現場画面で再利用する土台） ======
   レイアウト:
     .field-body            PC時の中央寄せ背景（body 直下に付与）
     .field-shell           モバイルシェル本体（最大430px・100dvh・縦flex）
     .field-scroll          スクロール領域（ナビ分の下余白・safe-area考慮）
     .field-scroll--flush   ボトムナビが無い画面用（下余白を safe-area のみに）
     .field-section         セクション外周パディング（左右20px）
     .field-foot            画面下部の固定アクションバー（提出/保存等）

   ヘッダ:
     .liff-header           sticky ヘッダ（半透明・blur・下境界）
     .liff-back             戻る丸ボタン
     .liff-title            中央/左寄せタイトル（戻る併用時）
     .liff-iconbtn          ヘッダ右の丸アイコンボタン（検索/通知等）
     .liff-user             ユーザー識別行（アバター＋氏名＋ロール）
     .liff-role             ロールの小タグ（自社/協力会社）

   ボトムナビ:
     .field-nav             固定ボトムナビ（4項目グリッド・safe-area）
     .field-nav-item        ナビ項目（縦アイコン＋ラベル、active=accent）

   見出し / セクション:
     .field-eyebrow         極小キャップション（日付など）
     .field-h1              画面の大見出し
     .sec-head              セクション見出し行（タイトル＋右リンク）
     .sec-title             セクションタイトル
     .sec-more              「すべて見る」リンク

   リスト行 / タイムライン:
     .row-link              タップ可能なリスト行（カード内）
     .tl                    タイムライン縦線コンテナ
     .tl-item               タイムライン1件
     .tl-time               時刻ピル（左）
     .tl-dot                タイムラインのドット

   予定カード:
     .plan-card             今日の予定カード
     .plan-time             予定の時刻表示（大きめ）
     .meta-row              アイコン＋ラベル＋値の1行（集合場所/資材など）
     .meta-ico              meta-row 用の小アイコン枠

   クイック操作:
     .quick-grid            2列グリッド
     .quick-tile            大きめのクイック操作タイル
     .quick-tile--accent    アクセント塗りのタイル（主要操作）
     .quick-ico             タイル内アイコン枠

   フォーム（日報入力など）:
     .form-card             入力をまとめるカード
     .form-row              ラベル＋入力の縦積みブロック
     .form-grid-2           2分割（開始/終了 等）
     .field-hint            入力下の注記（前回値反映・自動圧縮 等）
     .autofill-note         自動反映バッジ（select等の脇）
     .repeater              行追加式リスト（作業員＋人工・明細）
     .repeater-row          1行
     .repeater-add          「行を追加」ボタン行
     .stepper               数量スピナー（− 値 ＋）
     .stepper-btn           スピナーのボタン
     .thumb-grid            写真サムネのグリッド
     .thumb                 サムネ枠
     .thumb-add             「写真を追加」枠

   ステータス/補助:
     .save-pill             下書き保存済の小表示
     .notice-row            お知らせ1件
     .empty                 空状態

   給与・シフト スタッフ画面（末尾の追記ブロック）:
     .cal--mobile           スマホ幅の月間カレンダー（payroll.css の .cal に併用）
     .cal-pick              タップして希望を選ぶ日セル（is-picked=選択済み）
     .pick-mark             セル内の選択マーク（is-on/is-lim/is-off/is-paid）
     .opt-legend            ○△×有 の意味の一覧（2列）
     .cal-hours             セル内の勤務時間表示（9-14 など）
     .cal-day--mine         自分の出勤日の塗り
     .wk-grid               曜日パターンの7列グリッド
     .wk-btn                曜日1つのトグル（active=選択中）
     .sum-grid              2列のまとめタイル
     .sum-tile              まとめタイル1枚（.lb / .vl）
     .big-num               大きな数値表示（有給残など）
     .acc                   開閉できる内訳ブロック（details）
     .acc-head              内訳の見出し行（summary）
     .acc-body              内訳の中身
     .privacy-note          プライバシーの注記（塗りで目立たせる）
   ============================================================ */


/* ---------------- モバイルシェル ---------------- */
/* body に付与：PC時のみ中央寄せ＋ごく薄いアクセント背景 */
.field-body {
  min-height: 100vh;
  background: var(--surface);          /* スマホ実機は白一色 */
}

.field-shell {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;                      /* 確定高さ＝ボトムナビを常時固定（モバイル） */
  background: var(--surface);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;                    /* ボトムナビを absolute で内包 */
}

/* PC幅：中央に枠（角丸＋影）として見せる。背景はごく薄いアクセント */
@media (min-width: 600px) {
  .field-body {
    display: flex;
    justify-content: center;
    padding: 28px 0;
    background:
      radial-gradient(900px 520px at 15% 6%, var(--accent-soft), transparent 60%),
      radial-gradient(760px 520px at 85% 96%, var(--accent-softer), transparent 58%),
      var(--bg);
  }
  .field-shell {
    min-height: 0;
    height: calc(100vh - 56px);
    max-height: 920px;
    align-self: center;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
  }
}


/* ---------------- LIFFヘッダ（sticky） ---------------- */
.liff-header {
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  /* iOS のノッチ等：上方向の safe-area を確保 */
  padding: max(14px, env(safe-area-inset-top)) 18px 13px;
}

/* 戻る丸ボタン（タイトル併用時に使う） */
.liff-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0; margin-left: -6px;
  border-radius: var(--r-pill);
  color: var(--ink-2); background: transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.liff-back:hover { background: var(--surface-3); color: var(--ink); }

.liff-title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2; }

/* ヘッダ右の丸アイコンボタン（検索/通知） */
.liff-iconbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-pill);
  color: var(--ink-2); background: transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.liff-iconbtn:hover { background: var(--surface-3); color: var(--ink); }
/* 通知ドット（赤丸） */
.liff-iconbtn .dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--danger); box-shadow: 0 0 0 2px var(--surface);
}

/* ユーザー識別行（ホーム等） */
.liff-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.liff-user .avatar { width: 42px; height: 42px; font-size: 13px; }
.liff-uname { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.liff-ucap  { font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }

/* ロールタグ（自社 / 協力会社） */
.liff-role {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
}
.liff-role.is-partner { background: var(--warning-soft); color: var(--warning); }


/* ---------------- スクロール領域 ---------------- */
.field-scroll {
  flex: 1;
  min-height: 0;                       /* flex子要素を内部スクロールさせ、ナビを固定 */
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* ボトムナビ高さ + safe-area 分の下余白（被り防止） */
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
}
.field-scroll::-webkit-scrollbar { display: none; }

/* 固定フッターアクション（下部バー）がある画面用：バー高さ分を確保 */
.field-scroll.has-foot {
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
/* ボトムナビもフッターも無い画面 */
.field-scroll--flush { padding-bottom: env(safe-area-inset-bottom); }

/* セクション外周パディング（左右20px・現場向けに広め） */
.field-section { padding-left: 20px; padding-right: 20px; }


/* ---------------- ボトムナビ ---------------- */
.field-nav {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 6px max(8px, env(safe-area-inset-bottom));
}
.field-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 2px 5px;
  border-radius: var(--r);
  color: var(--ink-4); font-size: 11px; font-weight: 600;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field-nav-item:hover { color: var(--ink-2); }
.field-nav-item .ico { width: 22px; height: 22px; }
.field-nav-item.active { color: var(--accent); }
.field-nav-item.active .lbl { font-weight: 700; }
/* 新着ドット */
.field-nav-item .nav-dot {
  position: absolute; top: 4px; margin-left: 16px;
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--danger); box-shadow: 0 0 0 2px var(--surface);
}
.field-nav-item { position: relative; }


/* ---------------- 見出し / セクション ---------------- */
.field-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--accent);
}
.field-h1 { font-size: 21px; font-weight: 800; color: var(--ink); line-height: 1.25; }

.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sec-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.sec-more {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; font-weight: 700; color: var(--accent);
  transition: opacity var(--dur) var(--ease);
}
.sec-more:hover { opacity: .7; }


/* ---------------- リスト行（カード内・タップ可能） ---------------- */
.row-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur) var(--ease);
}
.row-link:last-child { border-bottom: 0; }
.row-link:active { background: var(--surface-3); }
.row-link .chev { color: var(--ink-4); flex-shrink: 0; }


/* ---------------- 予定カード ---------------- */
.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
}
/* 時刻＋現場名のヘッダ行 */
.plan-time {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 800; color: var(--accent);
  letter-spacing: -.01em; line-height: 1;
}

/* アイコン＋ラベル＋値の1行（集合場所/必要資材/車両 等） */
.meta-row { display: flex; align-items: flex-start; gap: 10px; }
.meta-ico {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}
.meta-ico .ico { width: 16px; height: 16px; }
.meta-lbl { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.meta-val { font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.45; }


/* ---------------- クイック操作 ---------------- */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick-tile {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: left;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quick-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.quick-ico {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--r);
  background: var(--accent-soft);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.quick-ico .ico { width: 22px; height: 22px; }
.quick-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.quick-sub { font-size: 11px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }

/* アクセント塗り（主要操作＝日報を書く 等） */
.quick-tile--accent {
  background: var(--accent); border-color: var(--accent); color: var(--accent-on);
}
.quick-tile--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-md); }
.quick-tile--accent .quick-ico { background: rgba(255,255,255,.16); color: var(--accent-on); }
.quick-tile--accent .quick-title { color: var(--accent-on); }
.quick-tile--accent .quick-sub { color: rgba(255,255,255,.72); }


/* ---------------- フォーム（日報入力など） ---------------- */
/* 現場向け：入力を一回り大きく（タップしやすさ優先） */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.form-card > .form-row { border-bottom: 1px solid var(--border); }
.form-card > .form-row:last-child { border-bottom: 0; }

.form-row { padding: 16px; }
.form-row > .field-label { font-size: 12.5px; margin-bottom: 8px; }

/* 大きめの入力（高さ拡張）。app.css の .input/.select/.textarea に併用 */
.input-lg, .select-lg { height: 46px; font-size: 15px; }
.textarea-lg { font-size: 15px; min-height: 92px; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 入力下の注記（前回値反映・クライアント圧縮 等） */
.field-hint {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-3); margin-top: 7px; line-height: 1.4;
}
.field-hint .ico { width: 13px; height: 13px; flex-shrink: 0; color: var(--ink-4); }

/* 自動反映バッジ（select 等の脇に「予定から自動」など） */
.autofill-note {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: var(--r-xs);
  background: var(--accent-soft); color: var(--accent);
}
.autofill-note .ico { width: 12px; height: 12px; }


/* ---------------- 行追加式（作業員＋人工 / 明細） ---------------- */
.repeater { display: flex; flex-direction: column; gap: 10px; }
.repeater-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-2);
}
.repeater-row .grow { min-width: 0; flex: 1; }
.repeater-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--r-sm); color: var(--ink-4);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.repeater-del:hover { background: var(--danger-soft); color: var(--danger); }
.repeater-add {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 44px;
  border: 1px dashed var(--border-strong); border-radius: var(--r);
  background: var(--surface);
  font-size: 13px; font-weight: 700; color: var(--accent);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.repeater-add:hover { background: var(--accent-soft); border-color: var(--accent); }

/* 数量スピナー（人工数など） */
.stepper {
  display: inline-flex; align-items: center; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
.stepper-btn {
  width: 38px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); background: var(--surface);
  transition: background-color var(--dur) var(--ease);
}
.stepper-btn:hover { background: var(--surface-3); }
.stepper-val {
  width: 50px; height: 44px; border: 0;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  text-align: center; font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 700; color: var(--ink); background: var(--surface);
}


/* ---------------- 写真サムネ ---------------- */
.thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.thumb {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: var(--r); overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--border);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-del {
  position: absolute; top: 5px; right: 5px;
  width: 24px; height: 24px; border-radius: var(--r-pill);
  background: rgba(15,23,42,.62); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.thumb-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  aspect-ratio: 1 / 1; border-radius: var(--r);
  border: 1px dashed var(--border-strong); background: var(--surface-2);
  color: var(--ink-3); font-size: 11px; font-weight: 700;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.thumb-add:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }


/* ---------------- 下部固定アクションバー ---------------- */
.field-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
}
/* フッター内の主ボタンを伸ばす（提出ボタン大） */
.field-foot .btn-grow { flex: 1; }


/* ---------------- ステータス / 補助 ---------------- */
/* 下書き保存済の小表示 */
.save-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
}
.save-pill .ico { width: 13px; height: 13px; color: var(--success); }

/* お知らせ1件 */
.notice-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  transition: background-color var(--dur) var(--ease);
}
.notice-row:last-child { border-bottom: 0; }
.notice-row:active { background: var(--surface-3); }
.notice-ico {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.notice-unread { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--danger); flex-shrink: 0; margin-top: 6px; }

/* 空状態 */
.empty { text-align: center; padding: 40px 24px; color: var(--ink-3); }
.empty .ico { width: 34px; height: 34px; color: var(--ink-4); margin: 0 auto 10px; }


/* === 給与・シフト スタッフ画面 追記 ===
   スタッフ（パート）向けスマホ画面 4枚で使う追加部品。
   payroll.css の .cal / .kv 等に併用する前提。色は必ず var(--...) を使う。 */

/* ---------------- スマホ幅の月間カレンダー ---------------- */
/* payroll.css の .cal に併用（.cal .cal--mobile）。セルを低く・文字を小さく */
.cal--mobile .cal-head { padding: 7px 0; font-size: 10.5px; }
.cal--mobile .cal-day {
  min-height: 54px; padding: 6px 2px 7px; gap: 3px;
  align-items: center; justify-content: flex-start;
}
.cal--mobile .cal-date { font-size: 12px; justify-content: center; gap: 3px; }
.cal--mobile .cal-mark { font-size: 9px; padding: 0 3px; }

/* 希望を選ぶ日セル（button 化してタップ領域を確保） */
.cal-pick {
  width: 100%; text-align: center; cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.cal-pick:hover { background: var(--surface-2); }
.cal-pick:active { background: var(--surface-3); }
.cal-pick.is-picked { background: var(--accent-softer); }

/* セル内の選択マーク（○ 出勤できる / △ 時間限定 / × 休み / 有 有給希望） */
.pick-mark {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 21px; padding: 0 4px;
  border-radius: var(--r-xs);
  font-size: 11.5px; font-weight: 700; line-height: 1;
  background: var(--surface-3); color: var(--ink-4);
}
.pick-mark.is-on   { background: var(--accent-soft);  color: var(--accent); }
.pick-mark.is-lim  { background: var(--warning-soft); color: var(--warning); }
.pick-mark.is-off  { background: var(--surface-3);    color: var(--ink-4); }
.pick-mark.is-paid { background: var(--success-soft); color: var(--success); }

/* ○△×有 の意味の一覧 */
.opt-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
.opt-legend > span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--ink-3);
}

/* ---------------- 確定シフトのカレンダー表示 ---------------- */
/* 自分の出勤日 */
.cal-day--mine { background: var(--accent-soft); }
.cal-day--mine .cal-date { color: var(--accent); }
/* セル内の勤務時間（9-14 など） */
.cal-hours {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 10px; font-weight: 700; color: var(--accent); line-height: 1;
}

/* ---------------- 曜日パターン（まとめて設定） ---------------- */
.wk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk-btn {
  height: 44px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-3); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.wk-btn:hover { border-color: var(--border-strong); color: var(--ink); }
.wk-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.wk-btn.sat { color: var(--sat); }
.wk-btn.sun { color: var(--danger); }
.wk-btn.active.sat, .wk-btn.active.sun { color: var(--accent-on); }

/* ---------------- まとめタイル（今月の出勤日数など） ---------------- */
.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sum-tile { background: var(--surface-2); border-radius: var(--r); padding: 13px 14px; }
.sum-tile .lb { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.sum-tile .vl {
  display: block; margin-top: 5px;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 800; color: var(--ink); line-height: 1.15; letter-spacing: -.02em;
}
.sum-tile .vl .u { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-left: 3px; }

/* ---------------- 大きな数値（有給残） ---------------- */
.big-num {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 46px; font-weight: 800; color: var(--ink);
  line-height: 1; letter-spacing: -.02em;
}
.big-num .u { font-size: 16px; font-weight: 700; color: var(--ink-3); margin-left: 5px; }

/* ---------------- 開閉できる内訳ブロック（details/summary） ---------------- */
.acc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.acc + .acc { margin-top: 10px; }
.acc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px; cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  transition: background-color var(--dur) var(--ease);
}
.acc-head::-webkit-details-marker { display: none; }
.acc-head:hover { background: var(--surface-2); }
.acc-head .chev { margin-left: auto; flex-shrink: 0; color: var(--ink-4); transition: transform var(--dur) var(--ease); }
.acc[open] .acc-head .chev { transform: rotate(180deg); }
.acc-body { padding: 2px 14px 14px; }

/* ---------------- プライバシーの注記（塗りで目立たせる） ---------------- */
.privacy-note {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--success-soft); border-radius: var(--r); padding: 14px 15px;
}
.privacy-note .ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--success); margin-top: 1px; }
.privacy-note .tt { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.privacy-note .tx { font-size: 12px; color: var(--ink-2); line-height: 1.8; }