@layer reset, tokens, base, components, utilities;
@layer tokens{
  :root{
    /* Tally流ライトデザインシステム(2026-07-24全面刷新)。意味色は少なく・濃く・光らせない */
    --success:#16a34a; --warning:#d97706; --danger:#dc2626; --info:#3b5bfd;
    --success-bg:#e8f6ee; --warning-bg:#fdf3e2; --danger-bg:#fdecec; --info-bg:#eef1ff;
    --r-1:6px; --r-2:9px; --r-3:12px; --r-4:16px;
    --sp-2:8px; --sp-3:12px; --sp-4:16px;
    --fs-h1:clamp(17px, 1rem + 0.5vw, 20px);
    --tap:44px;
  }
}
@layer components{
  :root{ --bg:#f6f7f9; --panel:#ffffff; --card:#ffffff; --line:#e7e9ee; --line2:#f0f2f5;
         --txt:#16181d; --sub:#6b7280; --faint:#9aa1ab; --accent:#3b5bfd; --btn:#16181d;
         --ok:#16a34a; --warn:#d97706; --err:#dc2626;
         --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace;
         color-scheme:light; }
  *{box-sizing:border-box}
  body{margin:0;font-family:'Inter','Noto Sans JP',-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--txt);
       background:linear-gradient(180deg,#f2f5f8 0%,var(--bg) 260px);}
  .app{display:flex;min-height:100vh}
  /* サイドバー */
  .sidebar{width:216px;flex:0 0 216px;background:var(--panel);border-right:1px solid var(--line);
           padding:16px 10px;position:sticky;top:0;height:100vh;block-size:100dvh;overflow-y:auto;overscroll-behavior:contain}
  .brand{font-weight:800;font-size:14.5px;padding:2px 10px 14px;letter-spacing:.01em}
  .brand small{display:block;color:var(--faint);font-weight:500;font-size:10px;margin-top:2px}
  nav{display:flex;flex-direction:column;gap:2px}
  .navgrp{display:flex;flex-direction:column}
  .navsec{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--faint);
          text-transform:uppercase;padding:14px 10px 5px}
  nav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;color:var(--sub);
        text-decoration:none;font-size:13px;font-weight:500;cursor:pointer}
  nav a:hover{background:#f3f4f6;color:var(--txt)}
  nav a.active{background:var(--info-bg);color:var(--accent);font-weight:700}
  nav a.parent{color:var(--txt);font-weight:600}
  nav a.parent.open{background:#f3f4f6}
  nav a .ic{width:20px;height:20px;flex:0 0 20px;display:flex;align-items:center;justify-content:center;font-size:13px;filter:grayscale(.15)}
  nav a.parent .caret{margin-left:auto;font-size:15px;line-height:1;color:var(--faint);transition:transform .18s ease}
  nav a.parent.open .caret{transform:rotate(90deg)}
  .subwrap{margin:2px 0 4px 19px;padding-left:10px;border-left:1.5px solid var(--line);
        display:flex;flex-direction:column;gap:1px}
  nav a.sub{padding:6px 9px;font-size:12.5px;border-radius:8px}
  nav a.sub .ic{width:5px;height:5px;flex:0 0 5px;background:#d3d7de;border-radius:50%}
  nav a.sub.active .ic{background:var(--accent)}
  nav a.sub.active{background:var(--info-bg)}
  /* コンテンツ */
  .content{flex:1;min-width:0;padding:20px 24px 40px;max-width:none}
  h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.015em;margin:0 0 4px}
  .muted{color:var(--sub);font-size:11.5px;line-height:1.55}
  .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;
        box-shadow:0 1px 2px rgba(16,24,40,.04)}
  .card h2{font-family:var(--mono);font-size:10px;margin:0 0 8px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
  label{display:block;font-size:12px;color:var(--sub);font-weight:600;margin:0 0 5px}
  input,select,textarea{width:100%;background:#fff;border:1px solid #dfe3e8;color:var(--txt);
        border-radius:10px;padding:9px 12px;font-size:14px;font-family:inherit}
  input::placeholder{color:#b3b9c2}
  select{text-align:center;text-align-last:center;cursor:pointer}
  #empBody select,#empBody span{text-align:center}
  input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,91,253,.14)}
  select:hover{border-color:#c6cbd4}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
  .actions{display:flex;justify-content:flex-end;margin-top:12px;gap:10px}
  button{background:var(--btn);color:#fff;border:0;border-radius:999px;padding:9px 18px;font-size:13.5px;
         cursor:pointer;font-weight:600;font-family:inherit;transition:background .12s ease,border-color .12s ease,opacity .12s}
  button:hover:not(:disabled){background:#2b2f36}
  button.ghost{background:#fff;border:1px solid #d7dae0;color:var(--txt)}
  button.ghost:hover:not(:disabled){background:#f6f7f9;border-color:#c6cbd4}
  button.warn{background:var(--warning-bg);color:#92580a;border:1px solid #f2d9ac}
  button.warn:hover:not(:disabled){background:#fbe9c8}
  button:disabled{opacity:.4;cursor:not-allowed}
  a{cursor:pointer;color:var(--accent)}
  table{width:100%;border-collapse:collapse;font-size:12px}
  th,td{padding:5px 8px;border-bottom:1px solid var(--line2);text-align:center;white-space:nowrap;vertical-align:middle}
  th{font-family:var(--mono);color:var(--faint);font-weight:600;font-size:10.5px;text-transform:uppercase;
     letter-spacing:.09em;position:sticky;top:0;background:#fbfbfc;z-index:1;border-bottom:1px solid var(--line)}
  tbody tr:hover td{background:#fafbfc}
  .scroll{max-height:380px;overflow:auto;border:1px solid var(--line);border-radius:12px}
  .scroll-tall{max-height:max(440px, calc(100vh - 250px));overflow:auto;border:1px solid var(--line);border-radius:12px}
  .pagetbl{margin-top:16px} .pagetbl th{z-index:2}
  .adjtbl td,.adjtbl th{padding:3px 6px;font-size:11.5px} .adjtbl .pill{font-size:10px;padding:1px 6px} .adjtbl .adjbtn{padding:2px 8px;font-size:11px}
  .adjwrap{border:1px solid var(--line);border-radius:12px;overflow-x:auto;background:#fff}
  /* 振込データ表: 共用adjtblの密度(11.5px)では読めないため専用に緩める(2026-08-10) */
  #bkTbl td,#bkTbl th{padding:9px 10px;font-size:12.5px}
  #bkTbl .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
  #bkTbl .bk-amt{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  #bkTbl tr.bk-miss td{background:var(--danger-bg);border-bottom:1px solid #f5d0d0}
  #bkTbl tr.bk-miss td:first-child{border-left:3px solid var(--danger)}
  #bkTbl tr.bk-miss:hover td{background:#fbe2e2}
  #bkTbl .bk-name{text-align:left;font-weight:700}
  #bkTbl .bk-reason{color:var(--danger);font-weight:700;text-align:left}
  #bkTbl .bk-hint{color:var(--sub);font-weight:400;font-size:11.5px}
  .bk-note{margin:6px 0;padding:9px 12px;border-radius:9px;font-size:12.5px}
  .bk-note.info{background:var(--info-bg);color:var(--txt)}
  .bk-note.danger{background:var(--danger-bg);color:#8f1d1d;border:1px solid #f0c4c4}
  .adjbtn{padding:5px 13px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid transparent}
  .adjbtn.edit{background:#fff;border-color:#d7dae0;color:var(--txt)}
  .adjbtn.edit:hover{background:#f6f7f9}
  .adjbtn.end{background:#fff;border-color:#f2d9ac;color:#92580a}
  /* 報酬明細 */
  .ps-sheet{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;max-width:440px;margin:0 auto 16px;font-size:13px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
  .ps-title{font-weight:800;font-size:16px;margin-bottom:6px}
  .ps-meta{color:var(--sub);font-size:12px;line-height:1.7;margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:8px}
  .ps-total{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:15px;padding:6px 0;border-bottom:2px solid var(--txt);margin-bottom:8px}
  .ps-sec{margin-bottom:10px}
  .ps-sec-h{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
  .ps-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dotted var(--line)}
  .ps-row span{color:var(--sub)} .ps-strong{font-weight:700}
  .ps-net{display:flex;justify-content:space-between;font-weight:800;font-size:16px;background:var(--info-bg);border-radius:8px;padding:9px 12px;margin:10px 0}
  .ps-biko{font-size:12px;line-height:1.7}
  #psPrint{display:none}
  @media print{
    .sidebar,.content>section:not(#view-payslip),#view-payslip>*:not(#psPrint){display:none!important}
    .app{display:block!important}
    body,body::before{background:#fff!important}
    #psPrint{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
    .ps-sheet{max-width:100%;color:#000;background:#fff;border:1px solid #999;break-inside:avoid;font-size:12px;box-shadow:none}
    .ps-title{color:#000}.ps-sec-h{color:#333}.ps-row span{color:#333}.ps-meta{color:#333}
    .ps-net{background:#eee;color:#000}.ps-row{border-bottom:1px dotted #ccc}
  }
  .pill{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px}
  .p-ok{background:var(--success-bg);color:var(--ok)} .p-guar{background:var(--info-bg);color:var(--accent)}
  .p-end{background:#f0f1f4;color:var(--sub)} .p-quit{background:var(--danger-bg);color:var(--err)}
  .toolbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
  .status{font-size:13px;color:var(--sub);align-self:center}
  .kpi{display:flex;gap:26px;flex-wrap:wrap} .kpi div{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .kpi b{font-size:22px;font-family:'Inter','Noto Sans JP',sans-serif;letter-spacing:-.01em;color:var(--txt);display:block;margin-top:2px}
  /* 要確認リスト */
  .issue{display:flex;align-items:center;gap:8px;padding:4px 8px;border-bottom:1px solid var(--line2);min-height:30px}
  /* 計算結果テーブル: ヘッダー行+名前列を固定、縦横スクロール(C-1) */
  #resWrap{max-height:calc(100vh - 300px);min-height:340px;overflow:auto;overflow-x:scroll}
  #resWrap thead th{position:sticky;top:0;background:#eef0f7;z-index:3;cursor:pointer;user-select:none}
  #resWrap th:first-child,#resWrap td:first-child{position:sticky;left:0;background:#fff;z-index:2;text-align:left}
  #resWrap thead th:first-child{z-index:4;background:#eef0f7}
  #resWrap tfoot td{position:sticky;bottom:0;background:#eef0f7;font-weight:700;border-top:2px solid var(--line)}
  #resWrap tfoot td:first-child{z-index:2;background:#eef0f7}
  /* 報酬(最終列)は右端に常時固定=スクロールせずに最重要の金額が見える */
  #resWrap th:last-child,#resWrap td:last-child{position:sticky;right:0;background:#fff;z-index:2;border-left:1px solid var(--line);box-shadow:-6px 0 8px -6px rgba(20,24,40,.12)}
  #resWrap thead th:last-child{z-index:4;background:#eef0f7}
  #resWrap tfoot td:last-child{background:#eef0f7}
  /* 横スクロールバーを常時見せる(macOSのオーバーレイ非表示対策) */
  .adjwrap::-webkit-scrollbar{height:11px;width:11px}
  .adjwrap::-webkit-scrollbar-thumb{background:#b9c0d4;border-radius:6px;border:2px solid #fff}
  .adjwrap::-webkit-scrollbar-track{background:#f0f2f8;border-radius:6px}
  .adjwrap{scrollbar-width:thin;scrollbar-color:#b9c0d4 #f0f2f8}
  .issue:last-child{border-bottom:0}
  .issue .sev{font-family:var(--mono);font-weight:700;font-size:9px;min-width:44px;text-align:center;border-radius:5px;padding:2px 0;letter-spacing:.05em}
  .sev.WARN{background:var(--warning-bg);color:var(--warn)} .sev.ERROR{background:var(--danger-bg);color:var(--err)}
  .sev.INFO{background:#f0f1f4;color:var(--sub)}
  .issue .ist{flex:none;width:56px;text-align:center}
  .issue .who{font-weight:700;flex:none;width:92px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
  .issue .igp{flex:none;width:118px;text-align:left}
  .issue .msg{color:var(--sub);font-size:12px;flex:1;line-height:1.35;text-align:left}
  .issue .iact{flex:none;display:flex;gap:6px;justify-content:flex-end}
  .issue button,.issue .adjbtn{padding:3px 8px;font-size:11px} .issue .pill{font-size:10px;padding:1px 6px}
  .issue.done{opacity:.5} .issue.done .msg{text-decoration:line-through}
  .step{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--sub);
        border:1px solid var(--line);border-radius:999px;padding:4px 12px;margin-right:6px;background:#fff}
  .step.on{background:var(--btn);color:#fff;border-color:transparent;font-weight:600}
  .banner{border-radius:12px;padding:12px 14px;font-size:13.5px;margin:12px 0}
  .banner.ok{background:var(--success-bg);color:#166534;border:1px solid #c5e9d2}
  .banner.wait{background:var(--warning-bg);color:#92580a;border:1px solid #f2d9ac}
  .seg{display:inline-flex;background:#eff1f4;border-radius:10px;padding:3px;border:none}
  .seg button{flex:1;background:transparent;border:0;border-radius:8px;color:var(--sub);font-weight:600;padding:7px 16px;font-size:13px;white-space:nowrap}
  .seg button:hover:not(.on):not(.active){background:rgba(255,255,255,.6);color:var(--txt)}
  .seg button.on,.seg button.active{background:#fff;color:var(--txt);box-shadow:0 1px 3px rgba(16,24,40,.12);font-weight:700}
  .seg button.on[data-sign="-1"]{color:var(--err)}
  #empSubTog{max-width:260px}
  #empSubTog button{padding:7px 14px}
  .sns-ic{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#f0f1f4;vertical-align:middle;border:1px solid var(--line)}
  span.sns-none{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;color:var(--faint)}
  .sns-at{color:var(--faint);margin-right:1px}
  .sns-xid{background:#fff;border:1px solid #dfe3e8;border-radius:8px;color:var(--txt);padding:6px 9px;width:150px;font-size:13px;font-family:var(--mono)}
  .sns-click{transition:transform .1s ease,box-shadow .1s ease}
  .sns-click:hover{transform:scale(1.07);box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)}
  .sns-open{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;
            border:1px solid var(--line);background:#fff;color:var(--txt);text-decoration:none;font-size:14px;font-weight:700;
            margin-right:6px;vertical-align:middle;cursor:pointer;transition:all .12s ease}
  .sns-open:hover{border-color:var(--accent);background:var(--info-bg);color:var(--accent);transform:translateY(-1px)}
  .sns-open.disabled{opacity:.3;pointer-events:none}
  /* レイアウト不変原則: ボタンは全行で同じ位置に常駐し、出す/出さないはvisibilityのみで切替(位置をずらさない) */
  .sns-save{padding:5px 0;width:68px;margin-left:6px;font-size:12px;text-align:center}
  tr.g-ended{background:#f4f5f8}
  tr.g-ended td{color:#a7aeba}
  tr.g-ended .gcell.g-off,tr.g-ended .gcell.g-on{opacity:.45}
  .kupbtn{width:172px;padding:7px 0;font-size:12.5px;text-align:center}
  .sns-refresh{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;
    border:1px solid var(--line);background:#fff;color:var(--sub);font-size:13px;cursor:pointer;
    margin-left:8px;vertical-align:middle;padding:0;line-height:1;transition:all .12s}
  .sns-refresh:hover:not(:disabled){border-color:var(--accent);background:var(--info-bg);color:var(--accent)}
  .sns-refresh:disabled{opacity:.4;cursor:default}
  .sns-refresh.spin{animation:snsspin .8s linear infinite}
  @keyframes snsspin{to{transform:rotate(360deg)}}
  .nf-tmpl{width:100%;background:#fff;border:1px solid #dfe3e8;border-radius:8px;color:var(--txt);padding:8px;font-size:13px;font-family:inherit;resize:vertical;box-sizing:border-box}
  #notifyBox .card code{background:#f0f1f4;padding:1px 6px;border-radius:5px;font-family:var(--mono);font-size:12px}
  #notifyBox{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;align-items:start}
  #notifyBox .card{margin:0;padding:14px 16px}
  #notifyBox .card>b{font-size:14px}
  #notifyBox .nf-ch{inline-size:100%}
  .store-seg{margin-top:4px;inline-size:fit-content;max-inline-size:100%}
  .store-seg button{flex:0 0 auto;padding:8px 18px;font-size:13px}
  .gcell{text-align:center;font-size:10px;min-width:40px;padding:3px 4px}
  .g-on{background:var(--info-bg);color:var(--accent);font-weight:700}
  .g-off{background:#f0f1f4;color:var(--faint)}
  .g-lock{background:#e3e5ea;color:var(--sub);font-weight:700}
  .login{padding:4px 10px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
  .login label{font-size:11px;color:var(--faint)} .login select{margin-top:4px}
  .login .who{margin-top:6px;font-size:11px;color:var(--sub)}
  .uchip{display:flex;align-items:center;gap:8px;padding:7px 9px;margin:2px 4px 10px;background:#f6f7f9;border:1px solid var(--line);border-radius:10px}
  .uava{width:26px;height:26px;border-radius:50%;background:var(--btn);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;flex:none;overflow:hidden}
  .umeta{display:flex;flex-direction:column;min-width:0}
  .umeta b{font-size:12px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
  .umeta b .uid{font-size:10px;color:var(--faint);font-weight:500;font-family:var(--mono)}
  .umeta small{font-size:10px;color:var(--sub)}
  /* 写真指名 */
  .kbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0 4px}
  .kpill{font-weight:700;font-size:13px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
  .kpill::before{content:'';width:8px;height:8px;border-radius:50%;background:#34c759}
  .ksearch{flex:1;min-width:150px;max-width:260px;padding:8px 13px;border:1px solid #dfe3e8;border-radius:10px;font:inherit;font-size:13px}
  .ktbl{table-layout:fixed;width:100%}
  .ktbl td{vertical-align:middle}
  .ktbl td.knm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;text-align:left}
  .ktbl th:nth-child(2){text-align:left}
  .ktbl tr.koff td{opacity:.45}
  .ktbl tr{transition:opacity .15s}
  .kswwrap{display:flex;align-items:center;gap:10px;min-height:28px}
  .kmode{font-size:11px;color:var(--faint)}
  .kst{font-family:var(--mono);font-size:11px;font-weight:700;width:30px;flex:none;letter-spacing:.03em}
  .kst.on{color:#248a3d}
  .kst.off{color:var(--faint)}
  .kauto{background:none;border:none;padding:0;font:inherit;font-size:12px;font-weight:600;color:var(--accent);cursor:pointer}
  .kauto:disabled{opacity:.5;cursor:default}
  .kava,.kava-t{width:36px;height:36px;border-radius:50%;flex:none}
  .kava{object-fit:cover;background:#f0f1f4}
  .kava-t{background:var(--info-bg);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
  .kdot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#d3d7de;margin-right:5px;vertical-align:1px}
  .kdot.onn{background:#34c759}
  .ksw{flex:none;width:46px;height:28px;border-radius:999px;background:#e3e5ea;position:relative;cursor:pointer;transition:background .18s;border:none;padding:0}
  .ksw.on{background:#34c759}
  .ksw::after{content:'';position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .18s}
  .ksw.on::after{left:20px}
  .ksw:hover:not(:disabled){background:#d7dae0}
  .ksw.on:hover:not(:disabled){background:#2fb350}
  .ksw:disabled{opacity:.5;cursor:default}
  .kcm2{font-size:12.5px;line-height:1.45;min-height:24px;text-align:left;color:var(--sub)}
  .kcmview{display:flex;align-items:center;gap:6px;cursor:pointer;border-radius:8px;padding:3px 6px;margin-left:-6px}
  .kcmview:hover{background:#f3f4f6}
  .kcmtx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
  .kcmedit{flex:none;background:none;border:none;padding:2px;font-size:12px;color:#c3c8d0;cursor:pointer;line-height:1}
  .kcmview:hover .kcmedit{color:var(--accent)}
  .kcmadd{background:none;border:1px dashed #d3d7de;border-radius:8px;color:var(--faint);font:inherit;font-size:12px;padding:4px 10px;cursor:pointer}
  .kcmadd:hover{border-color:var(--accent);color:var(--accent);background:var(--info-bg)}
  .kcmrow{display:flex;align-items:center;gap:6px}
  .kcmrow input{flex:1;min-width:0;font:inherit;font-size:12.5px;padding:6px 9px;border:1.5px solid var(--accent);border-radius:9px;box-sizing:border-box;box-shadow:0 0 0 3px rgba(59,91,253,.12)}
  .kcmok,.kcmng{flex:none;width:26px;height:26px;border-radius:50%;border:none;font-size:12px;font-weight:800;cursor:pointer;padding:0;line-height:1}
  .kcmok{background:var(--success-bg);color:var(--ok)}
  .kcmok:hover{background:#d3efe0}
  .kcmng{background:#f0f1f4;color:var(--sub)}
  .kcmng:hover{background:#e4e6eb}
  .kcmsaved{flex:none;font-size:11px;font-weight:700;color:var(--ok);animation:kcmfade 1.4s forwards}
  @keyframes kcmfade{0%,70%{opacity:1}100%{opacity:0}}
  .ktbl th:last-child{text-align:left}
  #roleTable input[type=checkbox],#empBody input[type=checkbox]{transform:scale(1.15);accent-color:var(--accent)}
  #empBody select{min-width:84px;padding:6px 8px}
  #empBody select[data-none="1"]{color:var(--faint);border-color:var(--line2);background:#fafbfc}
  #empBody select[data-none="0"]{color:var(--txt);border-color:#c9d2f7}
  /* 社員給与メモ */
  .spn-store{margin:20px 0 8px;font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  .spn-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
  .spn-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .spn-name{font-weight:700;font-size:15px;color:var(--txt)}
  .spn-tag{font-size:12px;color:var(--sub)}
  .spn-card textarea{margin-top:10px;font-size:13px;line-height:1.7;min-height:72px;resize:vertical}
  .spn-foot{display:flex;align-items:center;gap:10px;margin-top:8px}
  .spn-foot button:disabled{opacity:.4;cursor:default}
  .spn-upd{font-size:12px;color:var(--sub)}
  .spn-addbar{display:flex;align-items:center;gap:8px;margin:4px 0 14px;flex-wrap:wrap}
  .spn-addbar select{width:auto;min-width:200px}
  .spn-del{margin-left:auto;font-size:12px;background:none;border:none;color:var(--faint);cursor:pointer;text-decoration:underline}
  .spn-del:hover{color:var(--danger);background:none}
  /* 出勤画像エディタ */
  .ap-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
  .ap-bar select{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
  .ap-bar button{padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--txt);cursor:pointer}
  .ap-bar button:hover:not(:disabled){background:#f6f7f9}
  .ap-bar button:disabled{opacity:.45;cursor:default}
  .ap-warn{margin:8px 0;padding:8px 12px;border-radius:8px;background:var(--warning-bg);color:#92580a;font-size:13px}
  .ap-ed{display:flex;gap:14px;align-items:flex-start;margin-top:10px}
  .ap-stage-wrap{flex:1;min-width:0;background:#585460;border-radius:10px;padding:14px;overflow:auto;max-height:80vh}
  .ap-side{width:272px;flex:none;display:flex;flex-direction:column;gap:8px}
  .ap-props{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff;display:flex;flex-direction:column;gap:8px;font-size:13px}
  .ap-props label{display:flex;align-items:center;gap:6px;justify-content:space-between;white-space:nowrap}
  .ap-props input[type=text]{flex:1;min-width:0;padding:5px 8px;border:1px solid var(--line);border-radius:6px}
  .ap-props input[type=number]{width:74px;padding:5px;border:1px solid var(--line);border-radius:6px}
  .ap-props input[type=range]{flex:1}
  .ap-props select{flex:1;min-width:0;padding:5px;border:1px solid var(--line);border-radius:6px}
  .ap-props button{padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--txt);cursor:pointer}
  .ap-props button.on{background:var(--info-bg);border-color:var(--accent)}
  .ap-pt{font-weight:600}
  .ap-actrow{display:flex;gap:8px}
  .ap-lyh{display:flex;align-items:center;gap:4px;font-weight:600;font-size:13px}
  .ap-lyh .sp{flex:1}
  .ap-lyh button{padding:3px 7px;font-size:12px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--txt);cursor:pointer}
  #apLayers{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:auto;max-height:38vh}
  .ap-lrow{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--line2);cursor:pointer;font-size:13px}
  .ap-lrow:last-child{border-bottom:none}
  .ap-lrow.sel{background:var(--info-bg)}
  .ap-lrow .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ap-lrow button{border:none;background:none;color:var(--sub);cursor:pointer;padding:2px;font-size:12px}
  .ap-ly{cursor:move}
  /* シフトボード */
  .sfb-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
  .sfb-pnav{display:flex;align-items:center;gap:8px}
  .sfb-pnav button{background:#fff;border:1px solid #d7dae0;color:var(--txt);
        width:34px;height:34px;padding:0;border-radius:9px;font-size:17px;line-height:1}
  .sfb-pnav button:hover:not(:disabled){background:#f6f7f9}
  .sfb-pnav select{width:auto;min-width:130px;font-weight:600;padding:8px 10px}
  .sfb-vtog{margin-left:auto;display:inline-flex;background:#eff1f4;border-radius:10px;padding:3px}
  .sfb-vtog button{background:transparent;border:0;border-radius:8px;color:var(--sub);font-weight:600;padding:7px 16px;font-size:13px}
  .sfb-vtog button.on{background:#fff;color:var(--txt);box-shadow:0 1px 3px rgba(16,24,40,.12);font-weight:700}
  .sfb-wrap{width:100%;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
  table.sfb-tbl{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px}
  table.sfb-tbl th,table.sfb-tbl td{padding:2px 2px;border-bottom:1px solid var(--line2);border-right:1px solid #f6f7f9;
        text-align:center;white-space:normal;overflow:hidden;vertical-align:middle;line-height:1.2}
  table.sfb-tbl th{position:static;background:#fbfbfc;color:var(--faint);font-weight:600}
  .sfb-catc{width:54px} .sfb-nmc{width:15%;min-width:56px;text-align:left;padding-left:8px}
  .sfb-cntc{width:40px}
  .sfb-dh{font-size:11px;line-height:1.15} .sfb-dh .wd{display:block;font-size:9px;color:var(--faint)}
  .sfb-dh.sat{color:#2563eb} .sfb-dh.sun{color:#db2777}
  .sfb-cnt-row td{background:#fafbfc;font-size:11px;color:var(--sub)}
  .sfb-cnt-row .lbl{text-align:right;padding-right:8px;color:var(--faint)}
  .sfb-cnt-row .n{font-weight:700;color:var(--accent)}
  .sfb-nm{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sfb-tag{display:inline-block;font-size:9px;padding:1px 6px;border-radius:6px;white-space:nowrap}
  .sfb-tag.cast{background:var(--info-bg);color:var(--accent)}
  .sfb-tag.staff{background:var(--success-bg);color:var(--ok)}
  td.sfb-cell{cursor:pointer}
  td.sfb-cell.on{background:var(--info-bg);color:var(--accent);font-weight:700}
  td.sfb-cell:hover{outline:2px solid rgba(59,91,253,.4);outline-offset:-2px}
  tr.sfb-unsub td{background:#fef5f5!important}
  tr.sfb-unsub .sfb-nm{color:#b91c1c}
  .sfb-unsub-cell{text-align:center}
  .sfb-unsub-chip{display:inline-block;font-size:11px;font-weight:600;color:#b91c1c;line-height:1;
        background:var(--danger-bg);border:1px solid #f5c6c6;border-radius:999px;padding:4px 14px}
  .sfb-out{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .sfb-day{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
  .sfb-day h4{margin:0 0 8px;font-size:13px;display:flex;justify-content:space-between;align-items:baseline}
  .sfb-day h4 .cnt{font-size:11px;color:var(--faint)}
  .sfb-day.sat h4{color:#2563eb} .sfb-day.sun h4{color:#db2777}
  .sfb-slot{display:flex;justify-content:space-between;gap:6px;font-size:12px;padding:4px 0;border-top:1px solid var(--line2)}
  .sfb-slot .who{font-weight:600} .sfb-slot .tm{color:var(--sub);font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:11px}
  .sfb-day .none{color:var(--faint);font-size:12px;padding:4px 0}
  dialog.sfb-modal{border:0;padding:0;background:transparent;color:var(--txt);max-inline-size:min(100% - 32px, 720px);
    opacity:0;transform:translateY(6px) scale(.98);
    transition:opacity .16s ease, transform .16s ease, overlay .16s allow-discrete, display .16s allow-discrete}
  dialog.sfb-modal[open]{opacity:1;transform:none}
  @starting-style{ dialog.sfb-modal[open]{opacity:0;transform:translateY(6px) scale(.98)} }
  dialog.sfb-modal::backdrop{background:rgba(22,24,29,.4)}
  @supports (backdrop-filter:blur(1px)){ dialog.sfb-modal::backdrop{backdrop-filter:blur(2px)} }
  .sfb-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;width:320px;max-width:100%;box-shadow:0 12px 40px rgba(16,24,40,.14)}
  .sfb-box h3{margin:0 0 4px;font-size:16px} .sfb-box .sub{color:var(--sub);font-size:12px;margin-bottom:14px}
  .sfb-box .row{display:flex;gap:8px;margin:10px 0}
  .sfb-box .row label{margin:0;align-self:center;min-width:52px}
  .sfb-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:9997;
        background:#16181d;color:#fff;border:none;padding:11px 20px;border-radius:12px;
        font-size:13px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:0 8px 24px rgba(16,24,40,.25)}
  .sfb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .hide{display:none}
}
@layer base{
  :where(button,a,select,input,textarea,summary,[role=button],.sfb-cell){touch-action:manipulation}
  :where(button,a[href],select,input,textarea,[tabindex],.sfb-cell,.adjbtn,.sns-open,.sns-click,nav a):focus-visible{
    outline:2px solid var(--accent); outline-offset:2px}
  :where(button,.adjbtn,.sns-open,nav a,.seg button):active:not(:disabled){transform:translateY(1px)}
  h1{text-wrap:balance}
  .muted{text-wrap:pretty}
  .sidebar{padding-block-end:max(18px, env(safe-area-inset-bottom))}
  .content{padding-inline:clamp(16px, 3.4vw, 34px); padding-block-end:max(90px, env(safe-area-inset-bottom))}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
    ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
  }
}
@layer utilities{
  @media (max-width:760px){
    .app{flex-direction:column}
    .sidebar{position:static; inline-size:100%; block-size:auto; flex:none;
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      border-inline-end:0; border-block-end:1px solid var(--line); padding-block:8px}
    nav{flex-direction:row; gap:6px}
    .navgrp{flex-direction:row}
    .navsec{display:none}
    .brand{display:none}
    .uchip{margin:0 0 8px;padding:7px 10px}
    .uchip .umeta small{display:none}
    .content{max-inline-size:100%}
  }
  th,td{font-variant-numeric:tabular-nums}
  .num,td.num{text-align:right}
  #resBody td:nth-child(n+3){text-align:right;font-family:var(--mono);font-size:12px}
  @supports selector(:has(a)){
    .issue:has(.sev.ERROR){background:var(--danger-bg)}
  }
  @supports (view-transition-name:none){
    ::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
  }
}


/* ============================================================
   NIGHT OPS 本番テーマ v1 (2026-08-04適用)
   白基調 / アクセント=視認性オレンジ / 背景アクセントはグレーのみ /
   ステッカー型ナビ / 丸カード+ハードシャドウ / redesign-mock.html準拠
   ============================================================ */
:root{
  --bg:#fafaf8; --panel:#ffffff; --card:#ffffff; --line:#ecede8; --line2:#f2f3ee;
  --txt:#17181a; --sub:#73766d; --faint:#a4a79c;
  --accent:#f25c05;            /* 視認性オレンジ */
  --acc-fill:#ff6a12; --acc-ink:#1c0e00;
  --btn:#17181a;
  --nsh:3px 3px 0 rgba(23,24,26,.85),0 10px 22px rgba(23,24,26,.10);
  --csh:0 2px 4px rgba(23,24,26,.05),0 12px 30px rgba(23,24,26,.08);
}
html{background:#fdfdfc}
body{background:transparent}
/* 背景グラフィック(グレーのみ・トーンオントーン) */
#noBg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;background:#fdfdfc}
#noBg .word{position:absolute;font-weight:900;letter-spacing:-.02em;color:#f7f8f4;white-space:nowrap;user-select:none}
#noBg .blob{position:absolute;background:#f8f9f5;border-radius:120px;transform:rotate(-14deg)}
#noBg .film{position:absolute;top:-6%;bottom:-6%;left:198px;width:92px;background:#fff;
  box-shadow:0 0 20px rgba(23,24,26,.03);transform:rotate(7deg);display:flex;flex-direction:column;gap:12px;padding:14px 13px}
#noBg .film::before,#noBg .film::after{content:"";position:absolute;top:0;bottom:0;width:9px;
  background:radial-gradient(circle at 50% 8px,#f3f4ef 3px,transparent 3.6px);background-size:9px 22px}
#noBg .film::before{left:2px}#noBg .film::after{right:2px}
#noBg .film i{flex:none;height:92px;border-radius:14px;background:#f6f7f3;color:#eceee7;
  display:grid;place-items:center;font-size:34px;font-style:normal;font-weight:900}
#noBg .film i.w{background:#fff;box-shadow:inset 0 0 0 2px #f7f8f4}
.shell{position:relative;z-index:1;background:transparent}
/* ---- サイドバー=ステッカー型 ---- */
.sidebar{background:transparent;border-right:none;padding:14px 10px 14px 14px;position:relative}
.sidebar::before{content:"CONSOLE";position:absolute;left:0;top:130px;writing-mode:vertical-rl;
  font-size:60px;font-weight:900;letter-spacing:.06em;color:#f6f7f3;z-index:-1;user-select:none}
.sidebar .brand,.sidebar .login{background:#fff;border-radius:16px;box-shadow:var(--nsh);padding:12px 14px}
.navsec{color:#b6b9ac;font-weight:900;letter-spacing:.3em;padding:16px 8px 6px}
nav a.parent{background:#fff;border-radius:999px;box-shadow:var(--nsh);margin:10px 0;height:46px;
  padding:0 16px;font-weight:900;font-size:13.5px;position:relative;white-space:nowrap;
  display:flex;align-items:center;transition:transform .13s ease}
nav a.parent:hover{transform:translateX(4px);background:#fff}
nav a.parent.open,nav a.parent.active{background:var(--acc-fill);color:#fff;transform:rotate(-2deg) translateX(5px);
  box-shadow:4px 4px 0 rgba(23,24,26,.9),0 14px 26px rgba(255,106,18,.4)}
nav a.parent.open .caret{color:#fff}
.subwrap{margin:2px 0 6px 14px}
nav a.sub{background:#fff;border-radius:999px;box-shadow:2px 2px 0 rgba(23,24,26,.5),0 6px 14px rgba(23,24,26,.08);
  margin:7px 0;padding:8px 16px;font-weight:800;white-space:nowrap;width:max-content;min-width:80%}
nav a.sub.active{background:var(--acc-fill);color:#fff;box-shadow:3px 3px 0 rgba(23,24,26,.85)}
/* ---- カード/コンテンツ ---- */
.content{position:relative;z-index:1}
.card{border:none;border-radius:20px;box-shadow:var(--csh);padding:16px 18px}
h1{font-weight:900;letter-spacing:-.01em}
.card h2{letter-spacing:.1em}
button,.ghost{border-radius:999px !important;font-weight:800}
/* 既定ボタン=グレー(真っ黒チップは重い、とのオーナー指摘 2026-08-04) */
button:not(.ghost):not(.adjbtn):not(.swb){background:#eceee6;color:var(--txt)}
button:not(.ghost):not(.adjbtn):not(.swb):hover:not(:disabled){background:#e2e5da}
button.warn{background:var(--acc-fill) !important;border-color:var(--acc-fill) !important;color:#fff !important}
.seg{border-radius:999px;overflow:hidden}
.seg button{border-radius:999px !important}
.seg button.on,.seg button.active{background:var(--acc-fill) !important;color:#fff !important}
.tabs button.on{background:var(--acc-fill);color:#fff}
.pill{border-radius:999px}
.adjwrap{border:none;border-radius:16px;box-shadow:var(--csh)}
th{background:#f6f7f3}
dialog{border-radius:20px}
.banner{border-radius:14px}
a{color:var(--accent)}
input,select{border-radius:10px}
/* KPI/ダッシュボード専用 */
.dh-hero{background:linear-gradient(160deg,#fff 30%,#fff4ec);border-radius:22px;box-shadow:var(--csh);
  padding:20px 24px;position:relative;overflow:hidden}
.dh-hero::before{content:"SALES";position:absolute;right:-12px;bottom:-30px;font-size:104px;font-weight:900;
  color:rgba(242,92,5,.09);letter-spacing:-.03em}   /* 塗りつぶし(中抜きNG 2026-08-04) */
.dh-en{font-size:10px;letter-spacing:.32em;color:var(--sub);font-weight:900}
.dh-v{font-size:clamp(30px,3vw,52px);font-weight:900;letter-spacing:-.02em;margin-top:6px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dh-kpi{background:#fff;border-radius:20px;box-shadow:var(--csh);padding:16px 18px}
.dh-kpi .v{font-size:30px;font-weight:900;margin-top:5px;font-variant-numeric:tabular-nums}
.dh-store{border-radius:20px;overflow:hidden;box-shadow:var(--csh);background:#fff;cursor:pointer;
  transition:transform .25s cubic-bezier(.22,.9,.24,1),box-shadow .25s}
.dh-store:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 18px 40px rgba(23,24,26,.14)}
.dh-store .art{height:86px;position:relative}
.dh-store .logo{position:absolute;left:14px;bottom:8px;font-size:22px;font-weight:900;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.dh-gauge{height:7px;border-radius:99px;background:rgba(23,24,26,.08);overflow:hidden}
.dh-gauge i{display:block;height:100%;background:linear-gradient(90deg,#ff8a3d,var(--acc-fill));border-radius:99px}
/* ---- P0-1: フィルタ/セグの選択言語を統一(非選択=淡・選択=オレンジ) ---- */
.seg{background:transparent !important;border:none !important;display:flex;flex-wrap:wrap;gap:6px}
.seg button:not(.on):not(.active){background:#fff !important;color:var(--sub) !important;box-shadow:inset 0 0 0 1.5px var(--line) !important}
.seg button:not(.on):not(.active):hover{color:var(--txt) !important;box-shadow:inset 0 0 0 1.5px var(--line2) !important}
.tabs button:not(.on){background:#fff !important;color:var(--sub) !important;box-shadow:inset 0 0 0 1.5px var(--line)}
/* ---- P0-4: 「開いている」と「現在地」を分離 ---- */
nav a.parent.open:not(.active){background:#fff;color:var(--txt);transform:none;
  box-shadow:var(--nsh);outline:2.5px solid #ffcdae;outline-offset:-2.5px}
nav a.parent.open:not(.active) .caret{color:var(--accent)}
/* ---- P1-7: ネイティブ部品のテーマ化 ---- */
select,input[type=text],input[type=number],input[type=month],input[type=password],input[type=search]{
  appearance:none;-webkit-appearance:none;background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:7px 14px;font-weight:700;color:var(--txt);font-family:inherit;font-size:12.5px}
select{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%2373766d" stroke-width="1.8" fill="none" stroke-linecap="round"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
select:focus,input:focus{outline:none;border-color:var(--accent)}
/* P1-6: 一覧内セレクトは通常時テキスト風・ホバー/フォーカスで編集可視化 */
td select{border-color:transparent;background-color:transparent;background-image:none;padding:4px 10px;border-radius:8px}
td select:hover,td select:focus{border-color:var(--line2);background-color:#fff;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%2373766d" stroke-width="1.8" fill="none" stroke-linecap="round"/></svg>');background-repeat:no-repeat;background-position:right 8px center;padding-right:24px}
input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
input[type=file]{border:none;background:transparent;font-weight:700;color:var(--sub)}
input[type=file]::file-selector-button{border:none;border-radius:999px;background:#eceee6;color:var(--txt);
  font-weight:800;padding:8px 18px;margin-right:12px;cursor:pointer;font-family:inherit}
/* ---- P1-9: 区分/状態系の中立ピル(選択言語のオレンジと分離) ---- */
.pill.p-guar{background:var(--line2) !important;color:var(--sub) !important}
.pill.p-plan{background:#efe7f8 !important;color:#7a3bab !important}   /* 月給+歩合プラン */
/* ---- P1-10: 警告階層の色距離を確保 ---- */
:root{--danger:#cf1f2e;--err:#cf1f2e}
/* ---- P2-13: 明細カードをセンタリング ---- */
#psView{display:flex;flex-direction:column;align-items:center}
/* 明細の寸法統一(2026-08-04): flex中央寄せ下でmax-widthのみだと中身の文字量で幅が縮む→幅固定。
   備考の有無で高さが揺れないようbikoに最低高さも確保 */
.ps-sheet{width:440px;max-width:100%;box-sizing:border-box}
.ps-biko{min-height:44px}
/* ---- P2-17: ナビをコンテンツより前面に ---- */
.sidebar{z-index:5}
/* ---- モバイル拡大率の統一(2026-08-04) ----
   1) text-size-adjust: Android Chromeのフォントブースト(ブロック単位の自動文字拡大)を停止。
      これが画面ごとに倍率が違って見える主因
   2) overflow-x:clip: 幅広テーブルがレイアウトビューポートを押し広げて
      ページ全体が縮小表示されるのを禁止(横に広い表は各コンテナ内でスクロール) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip;max-width:100%}
.shell{max-width:100vw}
/* 従業員テーブル: 列を潰さず(職種の縦1文字折返し解消)コンテナ内で横スクロール */
#empBasic,#empSns{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:16px;
  border:1px solid var(--line);border-radius:12px;background:#fff}
#empBasic .pagetbl{margin-top:0;white-space:nowrap;min-width:1080px}
/* ============================================================
   デザイン監査 第2弾 (2026-08-04) — ZZZベンチマーク準拠 A1〜D6
   ============================================================ */
/* ---- A2前提: ナビ文字は黒(汎用 a{color:accent} の波及を遮断。オレンジは現在地の背景のみ) ---- */
nav a{color:var(--txt)}
/* ---- A1: ナビアイコン=線画SVG(currentColor継承。現在地は文字色と同じ白になる) ---- */
nav a.parent .ic{position:static;display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;flex:0 0 19px;margin-right:10px;font-size:0;line-height:0;
  filter:none;opacity:1;transform:none}
nav a.parent .ic svg{width:100%;height:100%;display:block}
/* ---- A2: オレンジ=現在地とCTA限定。破壊的操作は赤 / 進捗は無彩色 ---- */
button.warn{background:var(--danger) !important;border-color:var(--danger) !important;color:#fff !important}
.dh-gauge i{background:linear-gradient(90deg,#4a4d44,#17181a)}
/* ---- B1: 見出し階層 = 大見出し + EN小ラベル ---- */
h1{font-size:27px;letter-spacing:-.02em;line-height:1.15}
h1::after{display:block;content:"";font-size:9.5px;letter-spacing:.34em;color:var(--faint);
  font-weight:900;margin-top:4px;-webkit-text-stroke:0}
#view-employees h1::after{content:"EMPLOYEES"}
#view-shifts h1::after{content:"SHIFT"}
#view-roles h1::after{content:"ROLES"}
#view-adjustments h1::after{content:"ADJUSTMENTS"}
#view-payroll h1::after{content:"PAYROLL"}
#view-guarantees h1::after{content:"GUARANTEE"}
#view-specialpay h1::after{content:"SPECIAL PAY"}
#view-payslip h1::after{content:"PAYSLIP"}
#view-withholding h1::after{content:"WITHHOLDING"}
#view-bank h1::after{content:"BANK DATA"}
#view-payconfig h1::after{content:"CONFIG"}
#view-staffpay h1::after{content:"STAFF PAY"}
#view-settings h1::after{content:"SETTINGS"}
#view-kinicasts h1::after{content:"PHOTO PICK / CASTS"}
#view-kinivotes h1::after{content:"PHOTO PICK / VOTES"}
#view-kinirank h1::after{content:"PHOTO PICK / RANKING"}
#view-kinisettings h1::after{content:"PHOTO PICK / FORM"}
#view-notify h1::after{content:"NOTIFY"}
/* ---- B4: 各ページ右上の背景タイポ透かし(ダッシュボードのSALES透かしを全ページへ展開) ---- */
.content section{position:relative}
.content section::before{position:absolute;right:-6px;top:-16px;font-weight:900;font-size:74px;
  letter-spacing:-.03em;color:rgba(23,24,26,.045);   /* 塗りつぶし(中抜きNG 2026-08-04) */
  pointer-events:none;user-select:none;z-index:-1;content:"";white-space:nowrap}
#view-employees::before{content:"EMPLOYEES"}
#view-shifts::before{content:"SHIFT"}
#view-adjustments::before{content:"ADJUST"}
#view-payroll::before{content:"PAYROLL"}
#view-guarantees::before{content:"GUARANTEE"}
#view-specialpay::before{content:"SPECIAL"}
#view-payslip::before{content:"PAYSLIP"}
#view-withholding::before{content:"TAX"}
#view-bank::before{content:"BANK"}
#view-payconfig::before{content:"CONFIG"}
#view-staffpay::before{content:"STAFF"}
#view-settings::before{content:"SETTINGS"}
#view-roles::before{content:"ROLES"}
#view-notify::before{content:"NOTIFY"}
#view-kinicasts::before,#view-kinivotes::before,#view-kinirank::before,#view-kinisettings::before{content:"PHOTO PICK"}
/* ---- B3: 補足文の可読サイズ ---- */
.muted{font-size:12.5px}
/* テーブル内のmutedは折返し禁止(.muted{text-wrap:pretty}が職種「キャスト」を縦1文字に折っていた) */
td .muted{text-wrap:nowrap;white-space:nowrap}
/* ---- C1: 余白リズムを8pxグリッドへ ---- */
.card{margin:16px 0;padding:16px 20px}
h1{margin-bottom:2px}
/* ---- C2: 一覧テーブルの行高・セル余白を統一 ---- */
.pagetbl th{padding:10px 12px}
.pagetbl td{padding:9px 12px}
/* ---- C3: KPIカードの高さを揃える ---- */
.dh-kpi{box-sizing:border-box;height:100%}
.dh-hero{box-sizing:border-box;height:100%}
/* ---- C4: 広い画面でコンテンツ幅に上限 ---- */
.content>section{max-width:1240px;margin-inline:auto}
/* ---- D1: 影の階層整理(立体は現在地だけ・非選択はフラット+極薄影) ---- */
nav a.parent{box-shadow:0 1px 2px rgba(23,24,26,.07),0 5px 14px rgba(23,24,26,.06);
  outline:1px solid var(--line);outline-offset:-1px;margin:8px 0}
nav a.parent.active{box-shadow:4px 4px 0 rgba(23,24,26,.9),0 14px 26px rgba(255,106,18,.4);outline:none}
nav a.parent.open:not(.active){box-shadow:0 1px 2px rgba(23,24,26,.07),0 5px 14px rgba(23,24,26,.06)}
nav a.sub{box-shadow:0 1px 2px rgba(23,24,26,.05),0 3px 10px rgba(23,24,26,.05);
  outline:1px solid var(--line);outline-offset:-1px}
nav a.sub.active{box-shadow:3px 3px 0 rgba(23,24,26,.85);outline:none}
.sidebar .brand,.sidebar .login{box-shadow:var(--csh)}
/* ---- D2: サブメニューのはみ出しを1段までに制限 ---- */
nav a.sub{max-width:calc(100% + 12px);overflow:hidden;text-overflow:ellipsis}
/* ---- D3: テーブルの行ハイライト統一(ゼブラ+ホバー) ---- */
.pagetbl tbody tr:nth-child(even) td{background:#fbfcf8}
.pagetbl tbody tr:hover td,.adjtbl tbody tr:hover td{background:#f4f6ef}
/* ---- D4: 背景フィルム帯をさらに淡く(コンテンツ背後のノイズ抑制) ---- */
#noBg .film{opacity:.5}
/* ---- D5: 選択タブ/セグメントを台形に(ZZZタブ文法) ---- */
.tabs button.on,.seg button.on,.seg button.active{clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  border-radius:4px !important;padding-inline:22px !important}
/* シフトの一覧/出力/出勤画像トグルもセグメントと同じ選択言語に統一 */
.sfb-vtog{background:transparent !important;padding:0 !important;gap:6px}
.sfb-vtog button:not(.on){background:#fff !important;color:var(--sub) !important;box-shadow:inset 0 0 0 1.5px var(--line) !important}
.sfb-vtog button.on{background:var(--acc-fill) !important;color:#fff !important;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);border-radius:4px !important;padding-inline:22px !important}
/* ==== 高密度一覧のメリハリ(デザイン見本準拠 2026-08-04) ====
   見出し=極小・広字間・薄グレー / 行=高く余白たっぷり・白地+ヘアライン(ゼブラ廃止) /
   名前と最終報酬=太く大きく / 店舗・状態=ピル */
.pagetbl th,#resWrap thead th{font-size:9.5px;letter-spacing:.16em;color:var(--faint);font-weight:800;padding:12px 10px}
.pagetbl td{padding:13px 12px;font-size:13px}
.pagetbl tbody tr:nth-child(even) td{background:transparent}
.pagetbl .cc-nm{font-size:14px}
th{background:#fbfbf8}
#resWrap thead th,#resWrap thead th:first-child,#resWrap thead th:last-child,
#resWrap tfoot td,#resWrap tfoot td:first-child{background:#fbfbf8}
#resBody td{padding:12px 10px}
#resBody td:nth-child(n+3){font-family:inherit;font-size:13px}
#resBody td.res-nm{font-weight:800;font-size:14px}
#resBody td:last-child{font-weight:900;font-size:15px}
#resBody td:nth-child(n+10):not(:last-child){color:#55584f}
.pill.p-store{background:#f1f2ec !important;color:var(--sub) !important;font-weight:800;letter-spacing:.02em}
.adjtbl td,.adjtbl th{padding:7px 8px;font-size:12px}
.adjtbl th{font-size:9.5px;letter-spacing:.14em;color:var(--faint);font-weight:800}
/* ==== キャストチップ(アイコン+名前+（staff_id）の統一表示 2026-08-04) ==== */
.cchip{display:inline-flex;align-items:center;gap:7px;max-width:100%}
.cchip .cc-ic,.cchip .sns-ic{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.cc-ph{background:#eceee6;display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;color:var(--sub);font-style:normal}
.cc-nm{font-weight:700}
.cc-id{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:0}
/* シフト表は超高密度なのでチップを縮小・IDは2行目 */
.sfb-nmc .cchip{gap:5px}
.sfb-nmc .cchip .cc-ic{width:16px;height:16px}
.sfb-nmc .cc-id{display:block;font-size:8.5px;line-height:1;margin:1px 0 0 21px}
.sfb-nmc .cc-wrap{display:inline-block;text-align:left}
/* 特別給カード */
.ppcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin-bottom:6px}
.ppcard{background:#fff;border-radius:16px;box-shadow:var(--csh);padding:14px 16px;position:relative;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.ppcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(23,24,26,.12)}
.ppcard .pp-amt{font-size:21px;font-weight:900;font-variant-numeric:tabular-nums;margin:8px 0 2px}
.ppcard .pp-sub{font-size:11.5px;color:var(--sub)}
.ppcard .pp-act{display:flex;gap:8px;margin-top:10px}
.ppcard .pp-act button{font-size:11.5px;padding:6px 12px}
/* ==== Interaction FX(P5的リアクション。costume-portalのFX層をNIGHT OPSオレンジへ移植 2026-08-04) ==== */
.fxb{position:fixed;z-index:98;pointer-events:none;width:0;height:0}
.fxb .ring{position:absolute;left:-17px;top:-17px;width:34px;height:34px;
  border:2px solid var(--accent);border-radius:50%;opacity:.4;
  animation:fxring .4s cubic-bezier(.2,.7,.3,1) forwards}
.fxb .slash{position:absolute;left:-22px;top:-1px;width:44px;height:2px;
  background:linear-gradient(90deg,transparent,var(--acc-fill),transparent);
  transform:rotate(-24deg) scaleX(0);animation:fxslash .32s cubic-bezier(.2,.8,.3,1) forwards}
.fxb .sh{position:absolute;left:-3px;top:-3px;width:6px;height:6px;
  background:var(--acc-fill);opacity:.85;transform:rotate(45deg);
  animation:fxshard .38s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes fxring{from{transform:scale(.25);opacity:.4}to{transform:scale(1.45);opacity:0}}
@keyframes fxslash{0%{transform:rotate(-24deg) scaleX(0);opacity:.85}
  55%{transform:rotate(-24deg) scaleX(1);opacity:.55}
  100%{transform:rotate(-24deg) scaleX(1.18);opacity:0}}
@keyframes fxshard{to{transform:translate(var(--dx),var(--dy)) rotate(185deg);opacity:0}}
/* ページ切替の斜めワイプ(画面は消さない) */
.fxwipe{position:fixed;inset:-10% -30%;z-index:96;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(23,24,26,.05) 45%,
    rgba(242,92,5,.10) 50%,rgba(23,24,26,.05) 55%,transparent 70%);
  transform:translateX(-110%) skewX(-14deg)}
.fxwipe.go{animation:fxwipea .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fxwipea{to{transform:translateX(110%) skewX(-14deg)}}
/* 押し込みスタンプ(P5的な「潰れて跳ねる」) */
button:not(:disabled):active,nav a:active,.seg button:active,.tabs button:active{
  transform:translateY(1px) scale(.96) skewX(-2deg) !important;transition:transform .06s ease !important}
nav a.parent.active:active{transform:rotate(-2deg) translateX(5px) scale(.96) !important}
/* 効果音トグル(サイドバー下部) */
#fxSnd{margin-top:14px;width:100%;background:#fff !important;color:var(--sub) !important;
  box-shadow:inset 0 0 0 1.5px var(--line) !important;font-size:12px;padding:8px 12px}
#fxSnd.off{opacity:.6}
@media(prefers-reduced-motion:reduce){.fxb,.fxwipe{display:none !important}}
/* ---- D6: スマホ=オフキャンバスドロワー(≤760px) ---- */
#navFab{display:none;position:fixed;left:14px;top:14px;z-index:70;width:44px;height:44px;
  border:none;border-radius:14px;place-items:center;background:var(--btn);color:#fff;
  font-size:19px;box-shadow:3px 3px 0 rgba(23,24,26,.3);cursor:pointer}
#navScrim{display:none;position:fixed;inset:0;background:rgba(23,24,26,.35);z-index:55}
body.navopen #navScrim{display:block}
@media (max-width:760px){
  .app{flex-direction:row}
  .sidebar{position:fixed;inset:0 auto 0 0;inline-size:min(78vw,300px);block-size:auto;flex:none;
    transform:translateX(-105%);transition:transform .22s ease;z-index:60;background:var(--bg);
    overflow-y:auto;overflow-x:hidden;border-inline-end:1px solid var(--line);
    padding:64px 14px 14px;box-shadow:0 0 60px rgba(23,24,26,.2)}
  body.navopen .sidebar{transform:none}
  .sidebar .brand{display:block}
  nav{flex-direction:column;gap:0}
  .navgrp{flex-direction:column}
  .navsec{display:block}
  #navFab{display:grid}
  .content{padding-top:64px}
  .content section::before{font-size:44px;top:-8px}
  #noBg .film{display:none}
}