/* ============================================================
   BOS（バックオフィスシステム） — 共通スタイル
   デザイン方向： AURORA
     ・白磁の地に、ぼかした光のグラデーション
     ・すりガラス（backdrop-filter）のカードを浮かせる
     ・**角は控えめに落とす**（2026-08-27 ユーザー「もう少し四角のほうがいい」）
     ・数字はグラデーションで塗る
   色・角丸・影はすべて CSS変数にまとめてあるので、ここを変えれば全画面に反映される

   メニューは**画面左**（2026-08-27）。これから項目が増えるため、
   横並びだと入りきらない。狭い画面では上に戻す（下の @media を見ること）
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#fbfaf9;
  --ink:#1a1a1f; --ink2:#6a6873; --ink3:#a4a1ad;

  /* すりガラス面 */
  --glass:rgba(255,255,255,.72);
  --glass-solid:#fff;
  --glass-edge:rgba(255,255,255,.85);
  --line:rgba(26,26,31,.08);
  --line2:rgba(26,26,31,.05);

  /* オーロラの4色。グラデーションと差し色に使う */
  --v1:#7c6cf0;   /* 菫 */
  --v2:#f08a6c;   /* 珊瑚 */
  --v3:#3fbf9a;   /* 翡翠 */
  --v4:#f0c46c;   /* 琥珀 */

  --v1-bg:rgba(124,108,240,.15); --v1-ink:#5a48d8;
  --v2-bg:rgba(240,138,108,.16); --v2-ink:#c4522c;
  --v3-bg:rgba(63,191,154,.16);  --v3-ink:#1f8a68;
  --v4-bg:rgba(240,196,108,.20); --v4-ink:#96701c;
  --gray-bg:rgba(26,26,31,.06);

  --danger:#d94b4b; --danger-bg:rgba(217,75,75,.12);

  /* 角丸。丸すぎないところで止める */
  --r-lg:14px; --r-md:11px; --r-sm:9px; --r-xs:7px;
  /* ボタン・タブ。以前は 100px の完全な丸だった */
  --r-btn:8px;
  /* サイドメニューの幅 */
  --nav-w:212px;
  --sh-1:0 4px 22px rgba(40,30,70,.055);
  --sh-2:0 14px 36px rgba(40,30,70,.11);

  --sans:'Zen Kaku Gothic New','Yu Gothic UI','Yu Gothic',Meiryo,sans-serif;
  --disp:'Sora','Zen Kaku Gothic New',sans-serif;
  --mono:'JetBrains Mono',Consolas,monospace;
}

html[data-theme="dark"]{
  --bg:#111015;
  --ink:#eceaf2; --ink2:#a09dad; --ink3:#6e6b7a;

  --glass:rgba(38,36,48,.66);
  --glass-solid:#232130;
  --glass-edge:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.05);

  --v1:#9b8dff; --v2:#ffa88c; --v3:#5fd9b6; --v4:#ffd98c;
  --v1-bg:rgba(155,141,255,.18); --v1-ink:#b5a9ff;
  --v2-bg:rgba(255,168,140,.16); --v2-ink:#ffb69e;
  --v3-bg:rgba(95,217,182,.16);  --v3-ink:#7fe3c6;
  --v4-bg:rgba(255,217,140,.16); --v4-ink:#ffdfa0;
  --gray-bg:rgba(255,255,255,.07);

  --danger:#ff8080; --danger-bg:rgba(255,128,128,.14);

  --sh-1:0 4px 22px rgba(0,0,0,.3);
  --sh-2:0 14px 36px rgba(0,0,0,.42);
}

body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
  position:relative; min-height:100vh; overflow-x:hidden;
}

/* 背景のオーロラ。大きくぼかした光を4つ置く */
body::before{
  content:''; position:fixed; inset:-20%; pointer-events:none; z-index:0;
  filter:blur(90px); opacity:.5;
  background:
    radial-gradient(420px 380px at 12% 14%, #b9a8ff, transparent 64%),
    radial-gradient(480px 400px at 88% 8%,  #ffc4a8, transparent 62%),
    radial-gradient(520px 420px at 70% 92%, #a8f0d8, transparent 62%),
    radial-gradient(380px 340px at 26% 88%, #ffe6a8, transparent 62%);
  animation:auroraIn 1.4s ease both;
}
html[data-theme="dark"] body::before{opacity:.30}
@keyframes auroraIn{from{opacity:0}to{opacity:.5}}

/* 本文はオーロラの上に載せる */
.top,.wrap,.overlay{position:relative; z-index:1}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .6s cubic-bezier(.16,.84,.34,1) backwards}

a{color:var(--v1-ink)}

/* ===== メニュー（画面左の帯） =====

   HTMLは横並びのときと同じ。**CSSだけで縦に組み替えている**ので、
   各画面の <header class="top"> は触らなくてよい。
     .top       … 左に固定した帯
     .brand     … 上のロゴ
     .navwrap   … 部署（.depts）とその機能（.tabs）
     .top-right … 表示切替。いちばん下に落とす
*/
.top{
  position:fixed; left:0; top:0; bottom:0; width:var(--nav-w); z-index:20;
  padding:18px 12px 14px; border-radius:0;
  background:var(--glass); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border-right:1px solid var(--line); box-shadow:none;
  display:flex; flex-direction:column; align-items:stretch; gap:18px;
  overflow-y:auto; overscroll-behavior:contain;
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--disp);
       font-weight:700; font-size:16px; letter-spacing:-.02em; white-space:nowrap;
       padding:0 6px}
.brand-mark{
  width:30px;height:30px;border-radius:var(--r-xs); font-style:normal;
  background:linear-gradient(135deg,var(--v1),var(--v2)); color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  box-shadow:0 5px 14px rgba(124,108,240,.36);
}
.navwrap{display:flex; flex-direction:column; gap:14px; min-width:0}
.depts{display:flex; flex-direction:column; gap:3px}
.dept-btn{
  padding:7px 11px; border-radius:var(--r-btn); font-size:12px; font-weight:600;
  color:var(--ink3); text-decoration:none; transition:.18s;
  border:1px solid transparent; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dept-btn:hover{color:var(--ink); background:var(--glass-edge)}
.dept-btn.on{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--v1),var(--v2));
  box-shadow:0 4px 12px rgba(124,108,240,.28);
}
/* 部署とその機能の間に細い区切りを入れる */
.tabs{display:flex; flex-direction:column; gap:2px;
      padding-top:12px; border-top:1px solid var(--line2)}
.tab{
  padding:8px 11px; border-radius:var(--r-btn); font-size:13px; color:var(--ink2);
  text-decoration:none; transition:.18s;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tab:hover{background:var(--glass-edge); color:var(--ink)}
.tab.on{background:var(--ink); color:var(--bg); font-weight:600}
.top-right{margin-top:auto; display:flex; align-items:center; gap:8px; padding:0 6px}

.icon-btn{
  width:32px;height:32px;border-radius:var(--r-btn); cursor:pointer; font-size:14px;
  border:1px solid var(--line); background:transparent; color:var(--ink2);
  display:flex;align-items:center;justify-content:center; transition:.22s;
}
.icon-btn:hover{background:var(--glass-edge); color:var(--ink)}

/* ===== レイアウト ===== */
.wrap{padding:14px 24px 90px; max-width:1440px; margin:0 0 0 var(--nav-w)}
.head{display:flex; align-items:flex-end; justify-content:space-between;
      gap:18px; margin:24px 4px 20px; flex-wrap:wrap}
.h1{font-family:var(--disp); font-size:38px; font-weight:200;
    letter-spacing:-.035em; line-height:1.12}
.h1 b{
  font-weight:700;
  background:linear-gradient(120deg,var(--v1),var(--v2) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.h1sub{color:var(--ink2); font-size:13px; margin-top:5px}

/* ===== ボタン ===== */
/* <a> をボタンの見た目で使うことがあるので、下線を消しておく */
a.btn{text-decoration:none}
.btn{
  border:none; border-radius:var(--r-btn); padding:10px 20px;
  font-family:var(--disp); font-size:12.5px; font-weight:600; cursor:pointer;
  color:#fff; background:linear-gradient(135deg,var(--v1),#9a6cf0);
  box-shadow:0 6px 18px rgba(124,108,240,.34); transition:.22s;
  white-space:nowrap;
}
.btn:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 9px 24px rgba(124,108,240,.42)}
.btn:disabled{opacity:.5; cursor:default; box-shadow:none}
.btn-o{
  background:transparent; color:var(--ink2); border:1px solid var(--line); box-shadow:none;
}
.btn-o:hover:not(:disabled){background:var(--glass-edge); color:var(--ink); transform:none; box-shadow:none}
.btn-sm{padding:6px 14px; font-size:12px}
.btn-danger{background:transparent; color:var(--danger); border:1px solid var(--danger-bg); box-shadow:none}
.btn-danger:hover{background:var(--danger-bg); transform:none; box-shadow:none}

/* ===== 入力 ===== */
.inp,.sel{
  border:1px solid var(--line); border-radius:var(--r-xs); padding:9px 13px;
  font-family:inherit; font-size:13px; background:var(--glass-solid); color:var(--ink);
  transition:.2s;
}
.inp:focus,.sel:focus{outline:none; border-color:var(--v1);
  box-shadow:0 0 0 3px var(--v1-bg)}
.inp:disabled,.sel:disabled{opacity:.55; cursor:not-allowed}
.inp::placeholder{color:var(--ink3)}
.money{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600}

/* ===== すりガラスのカード ===== */
.panel{
  background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-edge); border-radius:var(--r-lg);
  padding:8px; box-shadow:var(--sh-1);
}
.phead{display:flex; align-items:center; gap:11px; padding:13px 18px 12px; flex-wrap:wrap}
.ptitle{font-family:var(--disp); font-size:14px; font-weight:600; letter-spacing:-.01em}
.pnote{font-size:12px; color:var(--ink3)}
.sp{margin-left:auto}

/* ===== 統計カード ===== */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:24px}
.stat{
  background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-edge); border-radius:var(--r-md);
  padding:19px 21px; box-shadow:var(--sh-1); transition:.28s;
}
.stat:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.stat dt{font-size:11.5px; color:var(--ink2); font-weight:500; margin-bottom:6px}
.stat dd{font-family:var(--disp); font-size:36px; font-weight:700;
         letter-spacing:-.045em; line-height:1}
.stat dd .u{font-size:13px; font-weight:400; color:var(--ink3); margin-left:3px; letter-spacing:0}
.stat .foot{font-size:11.5px; color:var(--ink3); margin-top:6px}
.stat.v1 dd{background:linear-gradient(120deg,var(--v1),#c46cf0);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat.v2 dd{background:linear-gradient(120deg,var(--v2),#f06c8a);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat.v3 dd{background:linear-gradient(120deg,var(--v3),#3f9fbf);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== 一覧（表ではなく、丸い行） ===== */
.rows{display:flex; flex-direction:column; gap:2px}
.row{
  display:grid; align-items:center; gap:16px;
  padding:14px 18px; border-radius:var(--r-sm); transition:.22s; cursor:pointer;
}
.row:hover{background:var(--glass-edge); box-shadow:0 3px 16px rgba(40,30,70,.07)}
.row-head{
  display:grid; align-items:center; gap:16px; padding:2px 18px 8px;
  font-size:10.5px; font-weight:700; color:var(--ink3); letter-spacing:.06em;
}
.r-name{font-size:14.5px; font-weight:600; letter-spacing:-.01em; line-height:1.5}
.r-sub{font-size:12px; color:var(--ink3)}
.r-txt{font-size:12.5px; color:var(--ink2)}
.r-amt{font-family:var(--disp); font-size:19px; font-weight:700;
       text-align:right; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.r-amt.dim{color:var(--ink3); font-weight:400; font-size:13.5px}
.arw{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink3);
  font-size:14px; transition:.22s; flex-shrink:0;
}
.row:hover .arw{background:var(--ink); border-color:var(--ink); color:var(--bg)}

/* 按分の帯 */
.spark{display:flex; height:5px; border-radius:4px; overflow:hidden; margin-top:5px; width:100px}
.spark i{display:block; height:100%}

/* ===== バッジ ===== */
.bdg{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
  padding:4px 12px; border-radius:var(--r-xs); white-space:nowrap;
}
.b-v1{background:var(--v1-bg); color:var(--v1-ink)}
.b-v2{background:var(--v2-bg); color:var(--v2-ink)}
.b-v3{background:var(--v3-bg); color:var(--v3-ink)}
.b-v4{background:var(--v4-bg); color:var(--v4-ink)}
.b-gray{background:var(--gray-bg); color:var(--ink2)}

/* ===== お知らせ ===== */
.hint{
  background:var(--v4-bg); border:1px solid rgba(240,196,108,.35); border-radius:var(--r-md);
  padding:13px 17px; font-size:12.5px; color:var(--v4-ink); margin-bottom:20px;
  display:flex; gap:10px; align-items:flex-start;
}
.hint b{font-weight:700}

.empty{padding:60px 20px; text-align:center; color:var(--ink3); font-size:13px}

/* ===== モーダル ===== */
.overlay{
  position:fixed; inset:0; background:rgba(20,16,32,.34);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:none; align-items:flex-start; justify-content:center;
  padding:32px 20px; z-index:100; overflow:auto;
}
.overlay.open{display:flex; animation:rise .3s ease backwards}
.modal{
  background:var(--glass-solid); border-radius:var(--r-lg); width:100%; max-width:740px;
  border:1px solid var(--glass-edge);
  box-shadow:0 24px 70px rgba(30,20,60,.28); overflow:hidden;
}
.modal-head{padding:18px 22px 14px; display:flex; align-items:center; gap:12px}
.modal-title{font-family:var(--disp); font-size:17px; font-weight:700; letter-spacing:-.02em}
.modal-body{padding:4px 22px 18px}
.modal-foot{padding:14px 22px; border-top:1px solid var(--line2);
            display:flex; gap:9px; align-items:center}

.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.fld{display:flex; flex-direction:column; gap:5px}
.fld.wide{grid-column:1/-1}
.fld label{font-size:11.5px; font-weight:700; color:var(--ink2); display:flex; gap:5px; align-items:center}
.fld .inp,.fld .sel{width:100%}
.fld .help{font-size:11px; color:var(--ink3); line-height:1.6}

.check{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; padding:7px 0}
.check input{width:16px;height:16px;cursor:pointer;accent-color:var(--v1)}

/* 按分ルール */
.splits{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
        background:var(--glass-solid)}
.splits-head{padding:10px 14px; font-size:11.5px; font-weight:700; color:var(--ink2);
             border-bottom:1px solid var(--line2); display:flex; align-items:center; gap:9px}
.split-row{display:flex; gap:8px; align-items:center; padding:9px 14px; border-bottom:1px solid var(--line2)}
.split-row:last-of-type{border-bottom:none}
.split-foot{padding:10px 14px; border-top:1px solid var(--line2);
            display:flex; align-items:center; gap:9px; font-size:12px}
.pct-ok{color:var(--v3-ink); font-weight:700; font-family:var(--mono)}
.pct-ng{color:var(--danger); font-weight:700; font-family:var(--mono)}

/* ===== トースト ===== */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:var(--bg); padding:12px 22px; border-radius:var(--r-btn);
  font-size:13px; font-weight:600; z-index:200; box-shadow:0 10px 34px rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger); color:#fff}

/* 狭い画面ではメニューを上に戻す（左に固定すると本文が読めなくなるため） */
@media (max-width:1000px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr}
  .h1{font-size:30px}

  .top{
    position:static; width:auto; height:auto; bottom:auto;
    flex-direction:row; align-items:center; flex-wrap:wrap; gap:14px;
    padding:11px 14px; border-right:none; border-bottom:1px solid var(--line);
    overflow:visible;
  }
  .navwrap{flex:1; gap:6px}
  .depts{flex-direction:row; flex-wrap:wrap}
  .tabs{flex-direction:row; flex-wrap:wrap; padding-top:0; border-top:none}
  .tab, .dept-btn{overflow:visible}
  .top-right{margin-top:0; margin-left:auto}
  .wrap{margin:0 auto; padding:14px 14px 60px}
}

/* ============================================================
   LINE経費 画面
   ============================================================ */

/* 取得状況カード */
.sources{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:4px 10px 12px}
.src{border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px;
     background:var(--glass-solid); display:flex; flex-direction:column; gap:7px}
.src.done{border-color:rgba(63,191,154,.4)}
.src .no{font-family:var(--disp); font-size:15px; font-weight:700}
.src .mail{font-size:11px; color:var(--ink3); word-break:break-all; line-height:1.5}
.src .st{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

/* 案件行 / アカウント行のグリッド */
.g-proj{grid-template-columns:minmax(180px,1.4fr) 76px 1fr 130px 108px 30px}
.g-acc{grid-template-columns:minmax(220px,1.6fr) 116px 100px 1fr 116px}

/* 展開した内訳 */
.kids{display:none; padding:2px 0 12px 18px; margin-left:16px; border-left:2px solid var(--line2)}
.kids.open{display:block; animation:rise .35s ease backwards}
.kid{display:grid; align-items:center; gap:14px; padding:9px 16px;
     border-radius:var(--r-xs); font-size:13px}
.kid:hover{background:var(--glass-edge)}
.kid .id{font-family:var(--mono); font-size:11.5px; color:var(--ink3)}
.kid .amt{font-family:var(--mono); font-variant-numeric:tabular-nums;
          text-align:right; font-weight:600}
.row.open .arw{transform:rotate(90deg)}

/* 警告パネル */
.alert{background:var(--danger-bg); border:1px solid rgba(217,75,75,.3);
       border-radius:var(--r-lg); padding:8px; margin-bottom:20px}
.alert .ptitle{color:var(--danger)}
.stat.warn dd{background:linear-gradient(120deg,var(--danger),#f0806c);
              -webkit-background-clip:text;background-clip:text;color:transparent}
.b-danger{background:var(--danger-bg); color:var(--danger)}

/* 取り込みのドロップ領域 */
.drop{border:2px dashed var(--line); border-radius:var(--r-md); padding:34px 20px;
      text-align:center; color:var(--ink3); font-size:13px; transition:.2s; cursor:pointer;
      margin:0 10px 12px}
.drop:hover,.drop.over{border-color:var(--v1); background:var(--v1-bg); color:var(--v1-ink)}
.drop b{display:block; font-size:14px; color:var(--ink); margin-bottom:4px}
.drop.over b{color:var(--v1-ink)}

/* ブックマークレット。ドラッグしてブックマークバーに置く */
.bmk{display:inline-block; padding:9px 20px; border-radius:var(--r-btn); text-decoration:none;
     font-family:var(--disp); font-size:12.5px; font-weight:700; color:#fff; cursor:grab;
     background:linear-gradient(135deg,var(--v1),#9a6cf0);
     box-shadow:0 6px 18px rgba(124,108,240,.34)}
.bmk:active{cursor:grabbing}

.mono{font-family:var(--mono)}
.up{color:var(--danger); font-weight:600}
.down{color:var(--v3-ink); font-weight:600}
.flat{color:var(--ink3)}
.foot-note{font-size:11.5px; color:var(--ink3); padding:6px 20px 0; line-height:1.8}
.steps{counter-reset:s; padding:2px 20px 14px; margin:0; list-style:none}
.steps li{counter-increment:s; position:relative; padding:7px 0 7px 34px; font-size:13px}
.steps li::before{content:counter(s); position:absolute; left:0; top:8px;
  width:22px;height:22px;border-radius:50%; background:var(--v1-bg); color:var(--v1-ink);
  font:700 11px/22px var(--disp); text-align:center}

@media (max-width:1100px){
  .sources{grid-template-columns:repeat(2,1fr)}
  .g-proj{grid-template-columns:1fr 60px 100px 30px}
  .g-proj .c-hide,.g-acc .c-hide{display:none}
}

/* 初回セットアップの枠 */
.setup{border:1px solid rgba(240,196,108,.45); background:var(--v4-bg);
       border-radius:var(--r-md); margin:0 10px 16px; padding:4px 0}
.setup-head{display:flex; align-items:center; gap:10px; padding:14px 18px 4px; flex-wrap:wrap}
.setup-head b{font-size:14px}
.kbd{display:inline-block; padding:1px 7px; border-radius:6px; font-family:var(--mono);
     font-size:11.5px; background:var(--glass-solid); border:1px solid var(--line);
     box-shadow:0 1px 0 var(--line)}

/* 「○○の場合」の質問ボタンと答え */
.ask{display:flex; gap:8px; flex-wrap:wrap; padding:6px 20px 4px}
.ask .btn.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.answer{display:none; margin:10px 20px 4px; padding:15px 18px;
        border-radius:var(--r-sm); background:var(--glass-solid); border:1px solid var(--line)}
.answer.open{display:block; animation:rise .3s ease backwards}
.answer b{font-size:13.5px}
.answer p{font-size:12.5px; color:var(--ink2); margin-top:7px; line-height:1.85}
.answer .steps{padding:4px 0 0}
.answer .steps li{font-size:12.5px; color:var(--ink2)}

/* 取得状況カードを押せるようにする */
.src{cursor:pointer; transition:.22s}
.src:hover{border-color:var(--v1); box-shadow:0 4px 18px rgba(124,108,240,.14)}
.src .cred{font-size:11px; color:var(--ink3); border-top:1px solid var(--line2);
           padding-top:7px; margin-top:2px; line-height:1.6}
.src .cred b{color:var(--ink2); font-weight:600}
.src .missing{color:var(--v2-ink)}

/* ===== 設定マスタ ===== */
.subtabs{display:flex; gap:4px; margin:0 4px 18px}
.subtab{padding:9px 20px; border-radius:var(--r-btn); font-family:var(--disp); font-size:13px;
        font-weight:600; color:var(--ink2); background:transparent; border:1px solid var(--line);
        cursor:pointer; transition:.22s}
.subtab:hover{background:var(--glass-edge); color:var(--ink)}
.subtab.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}

.g-set{grid-template-columns:minmax(160px,1.4fr) 90px 1fr 80px 120px 30px}
.g-dept{grid-template-columns:minmax(160px,1.6fr) 90px 90px 90px 30px}
.g-login{grid-template-columns:minmax(220px,1.4fr) 1fr 70px 130px 30px}

@media (max-width:1000px){
  .g-set{grid-template-columns:1fr 90px 30px}
  .g-dept{grid-template-columns:1fr 90px 30px}
  .g-login{grid-template-columns:1fr 30px}
  .g-set>div:nth-child(3),.g-set>div:nth-child(4),.g-set>div:nth-child(5),
  .g-dept>div:nth-child(3),.g-dept>div:nth-child(4),
  .g-login>div:nth-child(2),.g-login>div:nth-child(3),.g-login>div:nth-child(4){display:none}
}

/* ===== 明細の切り替えタブ =====
   もともと meta.html の中だけに書いてあったため、業務委託の画面では
   ただのボタンとして出てしまっていた（2026-08-19）。共通に移した */
.rtabs{display:flex; gap:3px; flex-wrap:wrap; margin:22px 4px 10px}
.rtab{padding:8px 16px; border-radius:var(--r-btn); font-size:13px; color:var(--ink2);
      background:transparent; border:1px solid transparent; cursor:pointer;
      transition:.22s; white-space:nowrap; font-family:inherit}
.rtab:hover{background:var(--glass-edge); color:var(--ink)}
.rtab.on{background:var(--ink); color:var(--bg); font-weight:600}
.rcount{margin-left:7px; font-size:11.5px; opacity:.72; font-variant-numeric:tabular-nums}

/* ===== 手順（ウィザード）=====
   .steps / .step は「手順のol」で先に使われているため、.wiz を名前にしている。
   ツールごとに「いま何番をやっているのか」を1本の帯で示す。
   全部の panel を一度に出すと、どこから見ればいいか分からなくなるため、
   選んだステップのぶんだけを出す。3画面（業務委託 / LINE経費 / Meta広告費）で共通。 */
.wiz{
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
  margin:18px 0 16px; padding:6px; border-radius:var(--r-md);
  background:var(--glass); border:1px solid var(--line);
}
.wiz-i{
  flex:1 1 0; min-width:150px; display:flex; align-items:center; gap:11px;
  padding:12px 14px; border-radius:var(--r-sm); border:1px solid transparent;
  background:transparent; cursor:pointer; transition:.22s; text-align:left;
  font-family:inherit; color:var(--ink2); position:relative;
}
.wiz-i:hover:not(:disabled){background:var(--glass-edge); color:var(--ink)}
.wiz-i:disabled{cursor:not-allowed; opacity:.45}
.wiz-i.on{background:var(--ink); color:var(--bg)}
.wiz-i.on .wiz-t{color:var(--bg)}
.wiz-i.on .wiz-d{color:var(--bg); opacity:.66}

/* 丸番号。終わったステップは ✓ に変える */
.wiz-n{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-size:12.5px; font-weight:700;
  border:1px solid var(--line); color:var(--ink3); background:var(--bg);
}
.wiz-i.on .wiz-n{background:var(--bg); color:var(--ink); border-color:var(--bg)}
.wiz-i.done .wiz-n{background:var(--v1); color:#fff; border-color:var(--v1)}
.wiz-b{min-width:0}
.wiz-t{font-size:13.5px; font-weight:600; letter-spacing:-.01em; line-height:1.35;
        color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wiz-d{font-size:11px; color:var(--ink3); line-height:1.4; margin-top:2px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ステップとステップのあいだの矢印 */
.wiz-i + .wiz-i::before{
  content:'›'; position:absolute; left:-9px; color:var(--ink3);
  font-size:16px; line-height:1; pointer-events:none;
}
.wiz-i.on + .wiz-i::before, .wiz-i + .wiz-i.on::before{opacity:.4}

/* いまのステップ以外のパネルを隠す。
   パネル自身が「中身が空だから隠す」を持っていることがあるので、
   display を書き換えるのではなくクラスで上から隠す */
.wiz-off{display:none !important}

/* 次へ・戻る */
.wiz-nav{display:flex; gap:10px; align-items:center; margin:16px 4px 40px}
.wiz-nav .sp{flex:1}
.wiz-note{font-size:12.5px; color:var(--ink3)}

@media (max-width:1000px){
  .wiz-i{min-width:100%}
  .wiz-d{white-space:normal}
  .wiz-i + .wiz-i::before{display:none}
}

/* ===== 設定のたたみ込み =====
   毎月は触らないもの（読み取りパターン・補足事項・名前の対応表など）を
   ふだんは閉じておく。開いたときだけ中の panel が出る */
.setbox{display:block; margin:26px 0 10px}
.setbox > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:14px 20px; border-radius:var(--r-md);
  background:var(--glass); border:1px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--ink2); transition:.22s;
}
.setbox > summary::-webkit-details-marker{display:none}
.setbox > summary::before{content:'▸'; color:var(--ink3); transition:.22s}
.setbox[open] > summary::before{transform:rotate(90deg)}
.setbox > summary:hover{background:var(--glass-edge); color:var(--ink)}
.setbox[open] > summary{margin-bottom:6px}