:root {
      /* フォント方針: FP Practice と統一（BIZ UDPGothic 先頭・Webフォント読込なし・ウェイト 400/500/600/700） */
      /* 和文UI: Windows同梱のUD体を先頭に。Mac/iOS は Hiragino Sans へフォールバック */
      --font-sans: "BIZ UDPGothic", "Meiryo", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", sans-serif;
      /* 等幅・数値: 金額・ID・コードなど桁揃えが要る箇所 */
      --font-mono: "SFMono-Regular", Consolas, "Menlo", "Courier New", monospace;
      /* 印刷帳票: 請求書PDF・宛名ラベルなど */
      --font-print: "BIZ UDPGothic", "Meiryo", "Yu Gothic UI", sans-serif;
      /* サイドバー配色テーマ（ライト表示時のみ・既定=現状の白基調）。JS の applySidebarTheme が値を差し替える */
      --fp-sb-bg: #ffffff;
      --fp-sb-fg: #334155;
      --fp-sb-muted: #94a3b8;
      --fp-sb-border: #e2e8f0;
      --fp-sb-hover: #f1f5f9;
      --fp-sb-accent: #2563eb;
      --fp-sb-accent-soft: #eff6ff;
      --fp-sb-accent-soft-text: #1d4ed8;
      /* 本文アクセント用の色ランプ（既定=Tailwind blue＝現状維持）。JS の applySidebarTheme が差し替える */
      --fp-blue-50: #eff6ff; --fp-blue-100: #dbeafe; --fp-blue-200: #bfdbfe; --fp-blue-300: #93c5fd; --fp-blue-400: #60a5fa;
      --fp-blue-500: #3b82f6; --fp-blue-600: #2563eb; --fp-blue-700: #1d4ed8; --fp-blue-800: #1e40af; --fp-blue-900: #1e3a8a;
      /* 表ヘッダーの背景（テーマ色の薄い段）。ramp に連動。midnight ではスレート系 */
      --fp-head-bg: var(--fp-blue-100);
    }
    body, input, select, textarea, button {
      font-family: var(--font-sans);
    }
    /* Chrome/Safari の自動入力（autofill）で入力欄が薄黄色になるのを白へ戻す。
       background-color では上書きできず、内側box-shadowで塗り直すのが定石。ライト表示時のみ（ダークは従来の autofill 表示に任せる）。 */
    html:not(.dark-mode) input:-webkit-autofill,
    html:not(.dark-mode) select:-webkit-autofill,
    html:not(.dark-mode) textarea:-webkit-autofill,
    html:not(.dark-mode) input:-webkit-autofill:hover,
    html:not(.dark-mode) input:-webkit-autofill:focus,
    html:not(.dark-mode) select:-webkit-autofill:hover,
    html:not(.dark-mode) select:-webkit-autofill:focus,
    html:not(.dark-mode) textarea:-webkit-autofill:hover,
    html:not(.dark-mode) textarea:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
      box-shadow: 0 0 0 1000px #ffffff inset !important;
      -webkit-text-fill-color: #1e293b !important;
      caret-color: #1e293b;
    }
    /* ロック（disabled）状態のプルダウンも背景は白のまま（他項目と統一）。ライト表示時のみ。
       例: 源泉税=対象外 のとき自動で「作成不要」に固定される納付書作成プルダウン */
    html:not(.dark-mode) select:disabled { background-color: #fff; }
    /* サイドバー配色テーマ（ダーク時は従来の dark-mode ルール〔!important〕を優先するため :not(.dark-mode) に限定） */
    html:not(.dark-mode) #sidebar { background: var(--fp-sb-bg); border-right-color: var(--fp-sb-border); }
    html:not(.dark-mode) #sidebar .menu-item { color: var(--fp-sb-fg); }
    html:not(.dark-mode) #sidebar .menu-item:hover { background: var(--fp-sb-hover); }
    html:not(.dark-mode) #sidebar .menu-item.fp-active { background: var(--fp-sb-accent-soft); color: var(--fp-sb-accent-soft-text); border-left-color: var(--fp-sb-accent); }
    html:not(.dark-mode) #sidebar [data-group-toggle] { color: var(--fp-sb-muted); }
    html:not(.dark-mode) #sidebar [data-group-toggle]:hover { color: var(--fp-sb-fg); }
    /* トップバー（タイマー未開始時）もサイドバーのテーマ色に合わせる。作業中バーは状態色のため対象外 */
    html:not(.dark-mode) .fp-topbar-idle { background: var(--fp-sb-bg); border-bottom-color: var(--fp-sb-border); color: var(--fp-sb-fg); }
    html:not(.dark-mode) .fp-topbar-start-btn { background: var(--fp-sb-accent); }
    html:not(.dark-mode) .fp-topbar-start-btn:hover { background: var(--fp-sb-accent); filter: brightness(0.92); }

    /* ===== 本文の青系をテーマ色ランプに読み替える（ライト時のみ・HTMLは変更せずクラス単位で上書き） ===== */
    /* 既定(classic)は Tailwind blue と同値なので現状維持。ダーク時は従来の青のまま（:not(.dark-mode) で除外） */
    /* 文字色 */
    html:not(.dark-mode) .text-blue-100 { color: var(--fp-blue-100) !important; }
    html:not(.dark-mode) .text-blue-400 { color: var(--fp-blue-400) !important; }
    html:not(.dark-mode) .text-blue-500 { color: var(--fp-blue-500) !important; }
    html:not(.dark-mode) .text-blue-600 { color: var(--fp-blue-600) !important; }
    html:not(.dark-mode) .text-blue-700 { color: var(--fp-blue-700) !important; }
    html:not(.dark-mode) .text-blue-800 { color: var(--fp-blue-800) !important; }
    html:not(.dark-mode) .text-blue-900 { color: var(--fp-blue-900) !important; }
    html:not(.dark-mode) .hover\:text-blue-600:hover { color: var(--fp-blue-600) !important; }
    html:not(.dark-mode) .hover\:text-blue-700:hover { color: var(--fp-blue-700) !important; }
    html:not(.dark-mode) .hover\:text-blue-800:hover { color: var(--fp-blue-800) !important; }
    /* 背景色 */
    html:not(.dark-mode) .bg-blue-50  { background-color: var(--fp-blue-50) !important; }
    html:not(.dark-mode) .bg-blue-100 { background-color: var(--fp-blue-100) !important; }
    html:not(.dark-mode) .bg-blue-400 { background-color: var(--fp-blue-400) !important; }
    html:not(.dark-mode) .bg-blue-500 { background-color: var(--fp-blue-500) !important; }
    html:not(.dark-mode) .bg-blue-600 { background-color: var(--fp-blue-600) !important; }
    html:not(.dark-mode) .hover\:bg-blue-50:hover  { background-color: var(--fp-blue-50) !important; }
    html:not(.dark-mode) .hover\:bg-blue-100:hover { background-color: var(--fp-blue-100) !important; }
    html:not(.dark-mode) .hover\:bg-blue-400:hover { background-color: var(--fp-blue-400) !important; }
    html:not(.dark-mode) .hover\:bg-blue-600:hover { background-color: var(--fp-blue-600) !important; }
    html:not(.dark-mode) .hover\:bg-blue-700:hover { background-color: var(--fp-blue-700) !important; }
    html:not(.dark-mode) .focus\:bg-blue-50:focus  { background-color: var(--fp-blue-50) !important; }
    /* 枠線色 */
    html:not(.dark-mode) .border-blue-100 { border-color: var(--fp-blue-100) !important; }
    html:not(.dark-mode) .border-blue-200 { border-color: var(--fp-blue-200) !important; }
    html:not(.dark-mode) .border-blue-300 { border-color: var(--fp-blue-300) !important; }
    html:not(.dark-mode) .border-blue-400 { border-color: var(--fp-blue-400) !important; }
    html:not(.dark-mode) .border-blue-500 { border-color: var(--fp-blue-500) !important; }
    html:not(.dark-mode) .border-blue-600 { border-color: var(--fp-blue-600) !important; }
    html:not(.dark-mode) .hover\:border-blue-400:hover { border-color: var(--fp-blue-400) !important; }
    html:not(.dark-mode) .hover\:border-blue-500:hover { border-color: var(--fp-blue-500) !important; }
    html:not(.dark-mode) .focus\:border-blue-400:focus { border-color: var(--fp-blue-400) !important; }
    /* フォーカスリング */
    html:not(.dark-mode) .ring-blue-300 { --tw-ring-color: var(--fp-blue-300) !important; }
    html:not(.dark-mode) .ring-blue-400 { --tw-ring-color: var(--fp-blue-400) !important; }
    html:not(.dark-mode) .hover\:ring-blue-400:hover { --tw-ring-color: var(--fp-blue-400) !important; }
    html:not(.dark-mode) .focus\:ring-blue-400:focus { --tw-ring-color: var(--fp-blue-400) !important; }
    /* 表ヘッダーの背景もテーマ色に（通常テーブル／管理テーブル／スクロールテーブルの3系統共通・ライト時のみ） */
    html:not(.dark-mode) main table thead th { background-color: var(--fp-head-bg); }
    html:not(.dark-mode) .fp-mgmt-table thead { background: var(--fp-head-bg); }
    html:not(.dark-mode) .fp-table-scroll thead th { background: var(--fp-head-bg); }
    /* テーマ選択の丸ボタン */
    .fp-theme-swatch { width: 20px; height: 20px; border-radius: 9999px; border: 2px solid #cbd5e1; cursor: pointer; padding: 0; transition: transform .1s, box-shadow .1s; }
    .fp-theme-swatch:hover { transform: scale(1.12); }
    .fp-theme-swatch.on { border-color: #1e293b; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #1e293b; }
    main table { table-layout: fixed; width: 100%; }
    main table td, main table th {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* マークダウン案内文のスタイル */
    .manual-content h1 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0 0.75rem; color: #1e293b; }
    .manual-content h2 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 0.5rem; color: #334155; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.25rem; }
    .manual-content h3 { font-size: 1.05rem; font-weight: 600; margin: 0.75rem 0 0.5rem; color: #475569; }
    .manual-content p { margin: 0.5rem 0; line-height: 1.7; color: #334155; }
    .manual-content ul { list-style: disc; margin: 0.5rem 0; padding-left: 1.5rem; }
    .manual-content ol { list-style: decimal; margin: 0.5rem 0; padding-left: 1.5rem; }
    .manual-content li { line-height: 1.7; color: #334155; margin: 0.15rem 0; }
    .manual-content strong { font-weight: 700; color: #1e293b; }
    .manual-content em { font-style: italic; }
    .manual-content a { color: #2563eb; text-decoration: underline; }
    .manual-content a:hover { color: #1d4ed8; }
    .manual-content code { background: #f1f5f9; padding: 0.1rem 0.4rem; border-radius: 0.25rem; font-family: var(--font-mono); font-size: 0.9em; }
    .manual-content pre { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 0.75rem 0; }
    .manual-content pre code { background: transparent; color: inherit; padding: 0; }
    .manual-content blockquote { border-left: 4px solid #cbd5e1; padding-left: 1rem; color: #64748b; margin: 0.75rem 0; }
    .manual-content hr { border: none; border-top: 1px solid #e2e8f0; margin: 1rem 0; }
    /* 設定項目のヘルプアイコン（ホバーでツールチップ） */
    .setting-help {
      position: relative;
      display: inline-block;
      cursor: help;
      color: #94a3b8;
      font-size: 14px;
      user-select: none;
      margin-left: 4px;
    }
    .setting-help:hover { color: #2563eb; }
    .setting-help:hover::after {
      content: attr(data-help);
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      left: auto;
      padding: 8px 12px;
      background: #1e293b;
      color: white;
      font-size: 12px;
      line-height: 1.6;
      border-radius: 6px;
      white-space: pre-line;
      width: max-content;
      max-width: 320px;
      z-index: 100;
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
      font-weight: normal;
    }
    .setting-help:hover::before {
      content: '';
      position: absolute;
      top: 100%;
      right: 4px;
      left: auto;
      border: 5px solid transparent;
      border-bottom-color: #1e293b;
      z-index: 101;
    }
    /* モバイル: タップでも表示されるように（:focus対応） */
    .setting-help:focus { outline: none; color: #2563eb; }
    .setting-help:focus::after {
      content: attr(data-help);
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      left: auto;
      padding: 8px 12px;
      background: #1e293b;
      color: white;
      font-size: 12px;
      line-height: 1.6;
      border-radius: 6px;
      white-space: pre-line;
      width: max-content;
      max-width: 280px;
      z-index: 100;
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    }
    /* アイコンが画面左寄りのとき: 右に伸ばす（左端見切れ防止）。JS で .tooltip-right を付与 */
    .setting-help.tooltip-right:hover::after,
    .setting-help.tooltip-right:focus::after {
      left: 0;
      right: auto;
    }
    .setting-help.tooltip-right:hover::before {
      left: 4px;
      right: auto;
    }

    /* モバイル: サイドバーをドロワー化（画面外にスライド） */
    @media (max-width: 767px) {
      #sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 50 !important;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 200ms ease-in-out;
      }
      #sidebar[data-mobile-open="true"] {
        transform: translateX(0);
      }
    }
    /* モバイル: 横に広いテーブルはスクロールで閲覧可能に */
    @media (max-width: 767px) {
      /* mobile-scroll クラスが付いた親要素のテーブルを横スクロール可能に */
      .mobile-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .mobile-scroll > table { min-width: 600px; }
      /* テーブルのデフォルト動作をモバイルではautoレイアウトに */
      main table { table-layout: auto; }
      main table td, main table th { white-space: normal; overflow: visible; text-overflow: clip; }
    }
    .csv-export-btn {
      font-size: 0.875rem; font-weight: 500; color: #2563eb;
      border: 1px solid #93c5fd; border-radius: 0.375rem;
      padding: 0.5rem 1rem; background: #eff6ff; cursor: pointer;
      display: inline-flex; align-items: center; gap: 0.25rem;
    }
    .csv-export-btn:hover { background: #dbeafe; border-color: #60a5fa; }
    /* 共通ヘッダーボタン: 各管理ページの表題右に並ぶボタン群（アーカイブ済み/期限超過分析/CSV出力）を
       CSV出力ボタン（.csv-export-btn）と同一寸法・同一の枠付きボタン見た目に統一する。
       色だけ役割でバリアント切替（gray=アーカイブ / amber=期限超過分析 / blue=CSV相当 / active=ON状態）。
       寸法（font-size/weight/padding/border/radius）は .csv-export-btn と完全一致させること。 */
    .fp-header-btn {
      font-size: 0.875rem; font-weight: 500;
      border: 1px solid transparent; border-radius: 0.375rem;
      padding: 0.5rem 1rem; cursor: pointer;
      display: inline-flex; align-items: center; gap: 0.25rem;
    }
    .fp-header-btn--gray  { color: #334155; background: #f1f5f9; border-color: #cbd5e1; }
    .fp-header-btn--gray:hover  { background: #e2e8f0; border-color: #94a3b8; }
    .fp-header-btn--amber { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
    .fp-header-btn--amber:hover { background: #fde68a; border-color: #fbbf24; }
    .fp-header-btn--blue  { color: #2563eb; background: #eff6ff; border-color: #93c5fd; }
    .fp-header-btn--blue:hover  { background: #dbeafe; border-color: #60a5fa; }
    .fp-header-btn--active { color: #fff; background: #2563eb; border-color: #2563eb; }
    .fp-header-btn--active:hover { background: #1d4ed8; border-color: #1d4ed8; }
    .dark-mode .fp-header-btn--gray  { background: #334155; color: #cbd5e1; border-color: #475569; }
    .dark-mode .fp-header-btn--gray:hover  { background: #475569; }
    .dark-mode .fp-header-btn--amber { background: #422006; color: #fcd34d; border-color: #854d0e; }
    .dark-mode .fp-header-btn--amber:hover { background: #713f12; }
    .dark-mode .fp-header-btn--blue  { background: #334155; color: #93c5fd; border-color: #475569; }
    .dark-mode .fp-header-btn--blue:hover  { background: #475569; }
    #invoice-preview table { table-layout: auto; }
    #invoice-preview td, #invoice-preview th { white-space: normal; overflow: visible; text-overflow: clip; }
    .dr-col-resize, .mat-col-resize, .pay-col-resize {
      position: absolute; right: -4px; top: 0; bottom: 0; width: 8px;
      cursor: col-resize; background: transparent; z-index: 5;
    }
    .dr-col-resize:hover, .mat-col-resize:hover, .pay-col-resize:hover { background: rgba(59, 130, 246, 0.5); }

    /* 「自分の番」の✓アイコン用の強めの明滅（標準の animate-pulse より薄い/濃いの差を大きく＋軽い拡縮で気付きやすく） */
    @keyframes fpMyTurnBlink {
      0%, 100% { opacity: 1;    transform: scale(1.08); background-color: rgb(147 197 253); } /* 濃いめ(blue-300) */
      50%      { opacity: 0.25; transform: scale(0.9);  background-color: rgb(239 246 255); } /* 薄め(blue-50) */
    }
    .fp-myturn-blink { animation: fpMyTurnBlink 3.5s ease-in-out infinite; }

    /* 「🔑 Drive権限を再取得」ボタン: Drive権限（provider_token）が切れているときだけ点滅して
       「まず権限を取り直す」ことに気づかせる。権限があれば点滅しない。全送付モーダル共通で
       JS（highlightDriveReauthButtons）が data-drive-reauth ボタンに付与/除去する。 */
    @keyframes fpReauthBlink {
      0%, 100% { background-color: rgb(254 202 202); border-color: rgb(220 38 38); color: rgb(153 27 27); box-shadow: 0 0 0 3px rgba(239,68,68,0.35); transform: scale(1.05); }
      50%      { background-color: rgb(255 241 242); border-color: rgb(252 165 165); color: rgb(185 28 28); box-shadow: 0 0 0 0 rgba(239,68,68,0);    transform: scale(1.0); }
    }
    .fp-reauth-blink {
      animation: fpReauthBlink 1.3s ease-in-out infinite !important;
      font-weight: 700 !important;
      border-width: 1px !important;
      border-style: solid !important;
    }

    /* サインセル: 内容（1行/2行/点滅ボタン）に関わらず行の高さを揃える。
       rem 指定なのでフォントサイズ変更（Aa）に追従し、ピクセル固定のような崩れが起きない。
       prog-sign-cell は td 用（height+中央寄せ）、settle-sign-cell は div 用（min-height+flex中央寄せ）。 */
    .prog-sign-cell { height: 2.1rem; vertical-align: middle; }
    .settle-sign-cell { min-height: 2.1rem; display: flex; flex-direction: column; justify-content: center; }

    /* ===== 管理画面（進捗/決算/給与）共通スタイル（2026-06-08 スタイル統一・第1段階） ===== */
    .fp-mgmt-table-wrap { background:#fff; border-radius:0.5rem; box-shadow:0 1px 3px rgba(0,0,0,.1); overflow:auto; }
    .fp-mgmt-table { width:100%; }
    .fp-mgmt-table thead { background:#e2e8f0; }
    .fp-mgmt-table thead th { padding:0.5rem 0.75rem; font-weight:500; font-size:0.75rem; color:#334155; text-align:center; border-right:1px solid #cbd5e1; border-bottom:1px solid #cbd5e1; }
    .fp-mgmt-table tbody td { border-bottom:1px solid #cbd5e1; border-right:1px solid #e2e8f0; }
    .fp-mgmt-table tbody tr:hover { background:#f8fafc; }
    /* 管理テーブル: 本体だけ縦スクロール＋ヘッダー固定。--head-bg(ヘッダー背景色)/--scroll-max(高さ上限)でテーブル別に調整 */
    .fp-table-scroll { max-height: var(--scroll-max, calc(100vh - 300px)); min-height: 240px; }
    .fp-table-scroll thead th { position:sticky; top:0; z-index:20; background: var(--head-bg, #e2e8f0); box-shadow: inset 0 -1px 0 #cbd5e1; }
    /* システム利用状況の左端見出し列を横スクロールしても残す（2026-08-17）。
       left は列幅がドラッグで変わるため JS(applySuStickyOffsets) が実測して入れる。 */
    td.fp-su-sticky { position:sticky; z-index:6; background:#fff; }
    tr:hover > td.fp-su-sticky { background:#f8fafc; }
    .fp-table-scroll thead th.fp-su-sticky { z-index:26; }
    .dark-mode td.fp-su-sticky { background:#1e293b; }
    .dark-mode tr:hover > td.fp-su-sticky { background:#334155; }
    /* ページをmain領域の高さに収め、内部スクロール枠だけをスクロールさせる＝ページ全体(#main-scroll)との二重スクロールバー防止（2026-06-24）。
       fp-fill-page=ルート（縦flex・main高さにフィット）/ fp-fill-mid=途中の包みdiv（残り高さを継承）/ fp-fill-scroll=スクロールする表枠（残り高さを埋め、固定max-heightを解除）。 */
    .fp-fill-page   { display:flex; flex-direction:column; height:100%; min-height:0; }
    .fp-fill-mid    { display:flex; flex-direction:column; flex:1 1 0%; min-height:0; }
    .fp-fill-scroll { flex:1 1 0%; min-height:0; max-height:none !important; }
    /* サインセル（td 既定 / div 両用）。完了=日付＋名字1行・自分の番=円形✓・他者待ち=名字＋サイン待ち */
    .fp-sign-cell { position:relative; height:2.1rem; vertical-align:middle; padding:0.125rem 0.5rem; font-size:0.75rem; text-align:center; }
    /* info 等の済み相当セルは背景なし（中立表示用） */
    .fp-sign-cell--done { background:transparent; }
    /* 完了済セルは源泉所得税・決算管理と統一で薄緑背景（2026-06-11・✓マークなしで緑背景が「済み」のサイン） */
    .fp-sign-cell--complete { background:#f0fdf4; }
    .fp-sign-cell--clickable { cursor:pointer; }
    .fp-sign-cell--clickable:hover { background:#eff6ff; }
    .fp-sign-done-row { display:flex; align-items:center; justify-content:center; gap:0.375rem; line-height:1.25; }
    .fp-sign-myturn-row { display:inline-grid; grid-template-columns:auto 1fr; align-items:center; gap:0.25rem; line-height:1.25; }
    .fp-sign-check { display:inline-flex; align-items:center; justify-content:center; width:1.25rem; height:1.25rem; border-radius:9999px; border:2px solid #3b82f6; color:#2563eb; background:#eff6ff; font-weight:700; font-size:11px; }
    .fp-sign-check:hover { background:#dbeafe; }
    /* ===== レイヤーA(2026-06-16)：サインセルの「色を持つ部品」を全管理表(進捗/決算/予定納税/源泉/給与)で一元化 =====
       完了済の緑・自分の番の青✓・控えめ✓・待ちの薄字・日付/名字のテキスト色をここに集約する。
       各画面のサインセルは個別の Tailwind 直書きをやめて以下のクラスを参照する＝見た目変更が1箇所で全画面に反映される。 */
    .fp-sign-cell--complete.fp-sign-cell--clickable:hover { background:#dcfce7; } /* 完了済セルのhoverは緑(green-100)。青hover(--clickable)を上書き */
    .fp-sign-check--ghost { display:inline-flex; align-items:center; justify-content:center; width:1.25rem; height:1.25rem; border-radius:9999px; border:1px solid #cbd5e1; color:#94a3b8; font-size:11px; } /* 管理者代行など本人以外の控えめ✓ */
    .fp-sign-check--ghost:hover { border-color:#60a5fa; color:#2563eb; background:#fff; }
    /* スキップ系の🏃バッジ（確認スキップ・給与計算スキップ）。全ページ共通＝サイズ変更はここ1箇所。
       2026-06-18: 小さすぎたので約2倍（10px→20px）に拡大。確認列の右上にオーバーレイ表示・クリック不可 */
    .fp-skip-badge { position:absolute; top:0.125rem; right:0.125rem; font-size:15px; line-height:1; color:#047857; background:#ecfdf5; padding:0 0.125rem; border-radius:0.25rem; pointer-events:none; }
    /* 「スキップ設定なのに、今回はスキップされていない」ときの 🏃（進捗管理の確認列・2026-08-12）。
       走る人に斜線を引いて「効いていない」ことを示す。理由はホバーで表示するため
       pointer-events を戻す（クリックは親セルにバブルするので従来どおりチェックリストが開く）。
       意味は「要対応」ではなく状態表示なので、斜線は色を持たせず無彩色にする。 */
    .fp-skip-badge--off { color:#94a3b8; background:#f1f5f9; filter:grayscale(1); opacity:.85; pointer-events:auto; cursor:help; }
    .fp-skip-badge--off::after { content:''; position:absolute; left:-1px; right:-1px; top:50%; height:2px; margin-top:-1px; background:#64748b; border-radius:1px; transform:rotate(-24deg); }
    /* 作成列：記帳代行管理番号が入っている行の左上に表示する 🏷️ バッジ（記帳業務の外部委託の目印・クリック不可） */
    .fp-bk-badge { position:absolute; top:0.125rem; left:0.125rem; font-size:15px; line-height:1; pointer-events:none; }
    .fp-sign-date { font-size:0.75rem; color:#64748b; }        /* 完了サインの日付(旧 text-xs text-slate-500) */
    .fp-sign-name { font-size:0.875rem; color:#334155; }       /* 完了サイン者の名字(旧 text-sm text-slate-700) */
    .fp-sign-count { font-size:0.7rem; color:#94a3b8; }        /* 完了サインの件数等(日付と名字の間に1行で表示・給与管理の作成列) */
    .fp-sign-wait-name { font-size:0.875rem; color:#94a3b8; line-height:1.25; }  /* 他者待ちの名字(旧 text-sm text-slate-400) */
    .fp-sign-wait-label { font-size:10px; color:#cbd5e1; line-height:1.25; }     /* 「サイン待ち」(旧 text-[10px] text-slate-300) */
    /* 件数ステータスカード */
    .fp-stat-card { background:#fff; border-radius:0.5rem; box-shadow:0 1px 3px rgba(0,0,0,.1); padding:0.375rem 0.625rem; text-align:center; }
    .fp-stat-card--btn { cursor:pointer; transition:box-shadow .15s; }
    .fp-stat-card--btn:hover { box-shadow:0 2px 6px rgba(0,0,0,.15); }
    .fp-stat-card--active { outline:2px solid #60a5fa; outline-offset:-1px; }
    /* 絞り込み中の強調（警告系は色を維持）。青より一段濃いめで「選択中」が分かるように */
    .fp-stat-card--active-red { outline:2px solid #ef4444; outline-offset:-1px; }
    .fp-stat-card--active-amber { outline:2px solid #f59e0b; outline-offset:-1px; }
    .fp-stat-card--active-yellow { outline:2px solid #eab308; outline-offset:-1px; }
    .fp-stat-card--active-green { outline:2px solid #22c55e; outline-offset:-1px; }
    .fp-stat-card--ring-red { outline:2px solid #f87171; outline-offset:-1px; }
    .fp-stat-card--ring-amber { outline:2px solid #fbbf24; outline-offset:-1px; }
    .fp-stat-card--ring-yellow { outline:2px solid #eab308; outline-offset:-1px; }
    .fp-stat-card--ring-green { outline:2px solid #4ade80; outline-offset:-1px; }
    .fp-stat-card--ring-blue { outline:2px solid #60a5fa; outline-offset:-1px; }
    .fp-stat-num { font-size:1.125rem; font-weight:700; line-height:1.2; }
    .fp-stat-label { font-size:0.75rem; color:#64748b; }
    .fp-stat-caption { font-size:0.625rem; color:#94a3b8; margin-top:0.125rem; line-height:1.2; }
    /* フィルタバー */
    .fp-filter-bar { background:#fff; border-radius:0.5rem; box-shadow:0 1px 3px rgba(0,0,0,.1); padding:0.75rem; display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem; }
    /* select と「テキスト系」input のみ高さ統一。checkbox/radio は対象外（巨大化防止） */
    .fp-filter-bar select, .fp-filter-bar input:not([type=checkbox]):not([type=radio]) { border:1px solid #cbd5e1; border-radius:0.375rem; height:2.5rem; padding:0 0.75rem; font-size:0.875rem; background:#fff; box-sizing:border-box; }

    /* ===== カスタムツールチップ（JS制御で画面端でも見切れない） ===== */
    .fp-tooltip {
      position: fixed;
      background: #1e293b;
      color: white;
      padding: 11px 15px;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.6;
      max-width: 460px;
      z-index: 99999;
      pointer-events: none;
      box-shadow: 0 6px 12px -2px rgb(0 0 0 / 0.25);
      white-space: pre-wrap;
      animation: fpTipFade 0.15s ease-out;
    }
    @keyframes fpTipFade {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ===== レアキャラクター（猫） =====
       ダッシュボード見出しに ~3% でランダム出現。
       ホバーで軽く揺れて、吹き出しでメッセージを表示。 */
    .rare-cat {
      display: inline-block;
      position: relative;
      cursor: help;
      transform-origin: 50% 80%;
      transition: transform 0.15s;
      animation: fpCatAppear 0.4s ease-out;
    }
    .rare-cat:hover { animation: fpCatWiggle 0.6s ease-in-out infinite; }
    @keyframes fpCatAppear {
      from { opacity: 0; transform: translateY(6px) scale(0.7); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes fpCatWiggle {
      0%, 100% { transform: rotate(-4deg); }
      50%      { transform: rotate(4deg); }
    }
    /* 猫のメッセージ吹き出し（カスタムツールチップ） */
    .rare-cat[data-message]:hover::after,
    .rare-cat[data-message]:focus::after {
      content: attr(data-message);
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 16px;
      background: #1e293b;
      color: white;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.6;
      border-radius: 8px;
      white-space: nowrap;
      z-index: 100;
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
      animation: fpCatTipFade 0.2s ease-out;
      pointer-events: none;
    }
    .rare-cat[data-message]:hover::before,
    .rare-cat[data-message]:focus::before {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 2px;
      border: 6px solid transparent;
      border-bottom-color: #1e293b;
      z-index: 101;
      pointer-events: none;
    }
    @keyframes fpCatTipFade {
      from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* ===== フォントサイズ 3段階 ===== */
    .fs-small { font-size: 13px; }
    .fs-medium { font-size: 15px; }
    .fs-large { font-size: 18px; }
    .fs-small main table td, .fs-small main table th { font-size: 0.75rem; }
    .fs-medium main table td, .fs-medium main table th { font-size: 0.8rem; }
    .fs-large main table td, .fs-large main table th { font-size: 0.85rem; }

    /* ===== 表示密度: 3段階（標準 / 詰める / ぎゅっと） =====
       全画面の main 配下に適用。テーブルの行・カードの内側余白・縦方向ギャップを圧縮 */
    /* --- compact: 詰める（中段） --- */
    .density-compact main table td,
    .density-compact main table th { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    .density-compact main .p-3 { padding: 0.5rem !important; }
    .density-compact main .p-4 { padding: 0.625rem !important; }
    .density-compact main .p-5 { padding: 0.75rem !important; }
    .density-compact main .py-1\.5 { padding-top: 0.1875rem !important; padding-bottom: 0.1875rem !important; }
    .density-compact main .py-2 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
    .density-compact main .py-2\.5 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
    .density-compact main .py-3 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
    .density-compact main .py-4 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .density-compact main .space-y-2 > * + * { margin-top: 0.25rem !important; }
    .density-compact main .space-y-3 > * + * { margin-top: 0.375rem !important; }
    .density-compact main .space-y-4 > * + * { margin-top: 0.5rem !important; }
    .density-compact main .gap-2 { gap: 0.25rem !important; }
    .density-compact main .gap-3 { gap: 0.375rem !important; }
    .density-compact main .gap-4 { gap: 0.5rem !important; }

    /* --- ultra: ぎゅっと（最高密度・もう一段圧縮） --- */
    .density-ultra main table td,
    .density-ultra main table th { padding-top: 0.0625rem !important; padding-bottom: 0.0625rem !important; padding-left: 0.375rem !important; padding-right: 0.375rem !important; line-height: 1.15 !important; }
    .density-ultra main .p-1 { padding: 0.0625rem !important; }
    .density-ultra main .p-2 { padding: 0.125rem !important; }
    .density-ultra main .p-3 { padding: 0.1875rem !important; }
    .density-ultra main .p-4 { padding: 0.25rem !important; }
    .density-ultra main .p-5 { padding: 0.375rem !important; }
    .density-ultra main .py-1 { padding-top: 0.0625rem !important; padding-bottom: 0.0625rem !important; }
    .density-ultra main .py-1\.5 { padding-top: 0.0625rem !important; padding-bottom: 0.0625rem !important; }
    .density-ultra main .py-2 { padding-top: 0.0625rem !important; padding-bottom: 0.0625rem !important; }
    .density-ultra main .py-2\.5 { padding-top: 0.0625rem !important; padding-bottom: 0.0625rem !important; }
    .density-ultra main .py-3 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
    .density-ultra main .py-4 { padding-top: 0.1875rem !important; padding-bottom: 0.1875rem !important; }
    .density-ultra main .px-3 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
    .density-ultra main .px-4 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .density-ultra main .px-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .density-ultra main .space-y-1 > * + * { margin-top: 0.0625rem !important; }
    .density-ultra main .space-y-2 > * + * { margin-top: 0.0625rem !important; }
    .density-ultra main .space-y-3 > * + * { margin-top: 0.125rem !important; }
    .density-ultra main .space-y-4 > * + * { margin-top: 0.1875rem !important; }
    .density-ultra main .space-y-6 > * + * { margin-top: 0.25rem !important; }
    .density-ultra main .gap-1 { gap: 0.0625rem !important; }
    .density-ultra main .gap-2 { gap: 0.0625rem !important; }
    .density-ultra main .gap-3 { gap: 0.125rem !important; }
    .density-ultra main .gap-4 { gap: 0.1875rem !important; }
    .density-ultra main .mt-1 { margin-top: 0.0625rem !important; }
    .density-ultra main .mt-1\.5 { margin-top: 0.0625rem !important; }
    .density-ultra main .mt-2 { margin-top: 0.0625rem !important; }
    .density-ultra main .mt-3 { margin-top: 0.125rem !important; }
    .density-ultra main .mt-4 { margin-top: 0.1875rem !important; }
    .density-ultra main .mb-1 { margin-bottom: 0.0625rem !important; }
    .density-ultra main .mb-1\.5 { margin-bottom: 0.0625rem !important; }
    .density-ultra main .mb-2 { margin-bottom: 0.0625rem !important; }
    .density-ultra main .mb-3 { margin-bottom: 0.125rem !important; }
    .density-ultra main .mb-4 { margin-bottom: 0.1875rem !important; }
    .density-ultra main .p-1\.5 { padding: 0.0625rem !important; }
    .density-ultra main .px-1\.5 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
    .density-ultra main .leading-relaxed { line-height: 1.25 !important; }
    .density-ultra main .leading-tight { line-height: 1.1 !important; }
    .density-ultra main { line-height: 1.2 !important; }
    .density-ultra main h1 { margin-top: 0 !important; margin-bottom: 0.25rem !important; }
    .density-ultra main h2, .density-ultra main h3 { margin-top: 0 !important; margin-bottom: 0.125rem !important; }

    /* ===== 宛名シール印刷（エーワン 31512: A4 / 24面 / 3列×8段） ===== */
    /* 画面表示用: プレビューでは縮小表示する。印刷時のみ実寸 */
    .label-sheet {
      width: 210mm;
      height: 297mm;
      box-sizing: border-box;
      position: relative;
      background: white;
      color: #000;
    }
    .label-sheet .label-cell {
      position: absolute;
      box-sizing: border-box;
      width: 66mm;
      height: 33.9mm;
      padding: 4mm 5mm;
      overflow: hidden;
      font-family: var(--font-print);
      font-size: var(--label-font-size, 11pt);
      line-height: 1.35;
      color: #000;
    }
    .label-sheet .label-cell .label-phone {
      font-size: calc(var(--label-font-size, 11pt) - 2pt);
      color: #555;
    }
    /* デバッグ用: 画面プレビュー時のみ 1点鎖線で枠を表示（印刷では消す） */
    .label-preview-mode .label-cell {
      outline: 1px dashed #cbd5e1;
    }
    /* 源泉税集計ページ専用 印刷スタイル（body.printing-genzei 時のみ有効） */
    @media print {
      body.printing-genzei .genzei-summary-print,
      body.printing-genzei .genzei-summary-print * {
        visibility: visible !important;
      }
      body.printing-genzei .genzei-summary-print {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important;
        padding: 8mm !important;
        background: white !important;
      }
      body.printing-genzei .print\:hidden { display: none !important; }
      body.printing-genzei { background: white !important; }
      @page { size: A4 landscape; margin: 8mm; }
    }
    @media print {
      /* 印刷時: 印刷専用シート以外は全部非表示 */
      body * { visibility: hidden !important; }
      #label-sheet-print, #label-sheet-print * { visibility: visible !important; }
      /* プレビュー側は強制非表示（visibility のみだとレイアウトが残るため） */
      #label-sheet-preview, .label-preview-mode { display: none !important; }
      /* モーダル背景・シャドウを消す */
      .label-print-modal {
        position: fixed !important; inset: 0 !important;
        background: white !important;
        padding: 0 !important; margin: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
      }
      /* 印刷シートを左上に実寸で配置 */
      #label-sheet-print {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        margin: 0 !important; padding: 0 !important;
        width: 210mm !important; height: 297mm !important;
        background: white !important;
        box-shadow: none !important;
        page-break-after: avoid;
      }
      #label-sheet-print .label-cell {
        outline: none !important;
      }
      @page {
        size: A4 portrait;
        margin: 0;
      }
      .no-print { display: none !important; }
    }

    /* ===== ダークモード ===== */
    .dark-mode { color-scheme: dark; }
    .dark-mode body { background: #0f172a; color: #e2e8f0; }
    .dark-mode .bg-slate-100 { background: #1e293b !important; }
    .dark-mode .bg-white { background: #1e293b !important; }
    .dark-mode .bg-slate-50 { background: #334155 !important; }
    .dark-mode .border-slate-200 { border-color: #334155 !important; }
    .dark-mode .border-slate-100 { border-color: #334155 !important; }
    .dark-mode .border-slate-300 { border-color: #475569 !important; }
    .dark-mode .text-slate-800 { color: #f1f5f9 !important; }
    .dark-mode .text-slate-700 { color: #e2e8f0 !important; }
    .dark-mode .text-slate-600 { color: #cbd5e1 !important; }
    .dark-mode .text-slate-500 { color: #94a3b8 !important; }
    .dark-mode .text-slate-400 { color: #64748b !important; }
    .dark-mode aside { background: #0f172a !important; border-color: #334155 !important; }
    .dark-mode .shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; }
    .dark-mode input, .dark-mode select, .dark-mode textarea {
      background: #334155 !important; color: #e2e8f0 !important; border-color: #475569 !important;
    }
    .dark-mode .hover\:bg-slate-50:hover { background: #334155 !important; }
    .dark-mode .hover\:bg-slate-100:hover { background: #334155 !important; }
    .dark-mode .bg-blue-50 { background: rgba(59,130,246,0.15) !important; }
    .dark-mode .bg-red-50 { background: rgba(239,68,68,0.15) !important; }
    .dark-mode .bg-yellow-50 { background: rgba(234,179,8,0.15) !important; }
    .dark-mode .bg-green-50 { background: rgba(34,197,94,0.15) !important; }
    .dark-mode .csv-export-btn { background: #334155; color: #93c5fd; border-color: #475569; }
    .dark-mode .csv-export-btn:hover { background: #475569; }

    /* タイマー・日報: 1日の作業の流れタイムラインバー */
    .tl-track { display: flex; align-items: stretch; height: 28px; border-radius: 6px; overflow-x: auto; overflow-y: hidden; background: #f8fafc; border: 1px solid #e2e8f0; }
    .tl-seg { display: flex; align-items: center; justify-content: center; min-width: 20px; flex-shrink: 0; color: #475569; font-size: 11px; font-weight: 600; border-right: 1px solid rgba(255,255,255,0.8); cursor: default; overflow: hidden; }
    .tl-seg:last-child { border-right: 0; }
    .tl-seg .tl-no { line-height: 1; pointer-events: none; }
    .tl-gap { min-width: 4px; flex-shrink: 0; background: repeating-linear-gradient(45deg, #eef2f6, #eef2f6 4px, #f8fafc 4px, #f8fafc 8px); }
    .tl-row-no { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #475569; font-size: 11px; font-weight: 700; line-height: 1; }
    .dark-mode .tl-track { background: #1e293b; border-color: #334155; }
    .dark-mode .tl-gap { background: repeating-linear-gradient(45deg, #334155, #334155 4px, #1e293b 4px, #1e293b 8px); }

    /* タイマー・日報の編集フォーム: 時刻入力をコンパクト化（ネイティブの時計アイコン撤去・列幅圧縮） */
    .dr-time-compact { width: 4.3rem; }
    .dr-time-compact::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
    .dr-time-compact::-webkit-inner-spin-button,
    .dr-time-compact::-webkit-clear-button { display: none; -webkit-appearance: none; }
    /* メモ欄を1行高に収める（縦中央寄せ） */
    .dr-entry-memo { line-height: 1.4; }