/* ==========================================================================
   asip-ui.css  — Asip 社内ダッシュボード共通の見た目（2026-10-28 SaaS化）
   読み込み先: new.html（ダッシュボード）/ kokyaku.html（顧客ページ）/ tugas.html（デスク）
   各ページの <style> のあとに読むので、同じ強さの規則はここが勝つ。
   文言・ロジック・JS には触らない（見た目だけ）。元に戻す: 各ページの <link href="asip-ui.css"> を消す。
   <html data-ui="dash|cust|desk"> で、ページごとの変数の対応づけを切り替える。
   ダークモード: 元の new.html は後ろの :root が暗い色を打ち消していて実質ライトのみ。
   ここでも color-scheme:light に固定して、読めなくなる事故を避ける。
   ========================================================================== */

/* ---------- 1. トークン（共通） ---------- */
:root{
  --ui-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
  --ui-bg:#F8FAFC;          /* ページ背景 */
  --ui-card:#FFFFFF;        /* カード */
  --ui-line:#E2E8F0;        /* 枠線 */
  --ui-line2:#CBD5E1;       /* 入力欄・押せる物の枠線 */
  --ui-ink:#0F172A;         /* 本文 */
  --ui-sub:#475569;         /* 補足（白地で 7.5:1） */
  --ui-navy:#0F2A4A;        /* ブランド（見出し・選択中） */
  --ui-accent:#2563EB;      /* 操作の色（ボタン・リンク・選択・焦点） */
  --ui-accent-2:#1D4ED8;    /* accent の hover */
  --ui-accent-bg:#EFF6FF;   /* accent の薄い面 */
  --ui-ok:#16A34A;  --ui-ok-ink:#15803D;   --ui-ok-bg:#F0FDF4;
  --ui-warn:#D97706; --ui-warn-ink:#B45309; --ui-warn-bg:#FFFBEB;
  --ui-bad:#DC2626; --ui-bad-ink:#B91C1C;  --ui-bad-bg:#FEF2F2;
  --ui-r:12px;  --ui-r-sm:8px;
  --ui-shadow:0 1px 2px rgba(15,23,42,.06);
  --ui-shadow-hover:0 2px 8px rgba(15,23,42,.10);
  --ui-ring:0 0 0 2px #fff,0 0 0 4px var(--ui-accent);
  --ui-t:.16s ease;
  --ui-h:36px;              /* ボタン・入力の最小の高さ（PC） */
}
html{color-scheme:light}
body{font-family:var(--ui-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit}

/* ---------- 2. ページごとの変数の対応づけ ---------- */
html[data-ui="dash"]{
  --bg:var(--ui-bg);--card:var(--ui-card);--ink:var(--ui-ink);--sub:var(--ui-sub);--line:var(--ui-line);
  --navy:var(--ui-navy);--accent:var(--ui-accent);--bar:var(--ui-accent);--bar2:#BFD3FA;
  --ok:var(--ui-ok);--warn:var(--ui-warn);--bad:var(--ui-bad);--pink:var(--ui-bad-bg);
}
html[data-ui="cust"]{
  --navy:var(--ui-navy);--bg:var(--ui-bg);--line:var(--ui-line);--mut:var(--ui-sub);--red:var(--ui-bad-ink);--green:var(--ui-ok-ink);
}
html[data-ui="desk"]{
  --bg:#fff;--soft:var(--ui-bg);--fg:var(--ui-ink);--mut:var(--ui-sub);--line:var(--ui-line);--card:#fff;
  --acc:var(--ui-accent);--ok:var(--ui-ok-ink);--bad:var(--ui-bad);--warn:var(--ui-warn-ink);
}

/* ---------- 3. 文字 ---------- */
html[data-ui="dash"] body,html[data-ui="desk"] body{font-size:15px;line-height:1.55;color:var(--ui-ink)}
html[data-ui="cust"] body{font-size:14px;line-height:1.5;color:var(--ui-ink)}
h1{font-weight:600;letter-spacing:-.005em}
html[data-ui="dash"] header h1{font-size:18px;color:var(--ui-navy)}
html[data-ui="dash"] h2,html[data-ui="desk"] h2{font-size:16px;font-weight:600;color:var(--ui-navy);margin:24px 0 8px;letter-spacing:0}
html[data-ui="dash"] h2 small,html[data-ui="desk"] h2 small{font-size:13px;font-weight:400;color:var(--ui-sub)}
h3{font-weight:600}
td,th,.v,.n,.big,.k,.sum b,.nsum b,.c4top b,.fr b,.rw4 .n,.rw5 .n,.jt b,.fun .n,.fun2 .n,.se .n,.chip b{font-variant-numeric:tabular-nums}
.v{font-weight:600}
.k,.note,.upd{color:var(--ui-sub)}
.note{font-size:13px}
.ok{color:var(--ui-ok-ink)}
.warn{color:var(--ui-warn-ink)}
.bad{color:var(--ui-bad)}
/* リンクの色は弱い指定（:where）にして、各ページの個別の色指定を邪魔しない */
:where(a){color:var(--ui-accent)}
:where(a:hover){color:var(--ui-accent-2)}

/* ---------- 4. カード・面 ---------- */
.card,.sim,.wk,.nc,.pc,.band,.quick a,.links a,.nsum>*,.c4top>div,.jcol,.chartbox,.chart,.pair .pc,.sch,.day,.hubbox,.rkin,.orin{border-radius:var(--ui-r)}
.card,.sim,.wk,.nsum>*,.c4top>div,.band,.quick a,.links a,.day,.sch{box-shadow:var(--ui-shadow)}
html[data-ui="dash"] .card{padding:16px;border-color:var(--ui-line)}
html[data-ui="dash"] .grid{gap:16px}
html[data-ui="dash"] .simgrid{gap:16px}
.quick a,.links a{transition:border-color var(--ui-t),box-shadow var(--ui-t),transform var(--ui-t)}
.quick a:hover,.links a:hover{border-color:var(--ui-accent);box-shadow:var(--ui-shadow-hover);color:var(--ui-ink)}
.quick a b,.links a b{font-weight:600}
.hubbox,.rkin,.orin{box-shadow:0 12px 32px rgba(15,23,42,.18)}
#hub,#rkbox,#orbox,#rsbox{backdrop-filter:blur(2px)}
.sample,.box{border-radius:var(--ui-r);border-width:1px}

/* ---------- 5. ボタン・チップ・入力 ---------- */
button,.btn,a.rkbtn,select,input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea{transition:background-color var(--ui-t),border-color var(--ui-t),box-shadow var(--ui-t),filter var(--ui-t),color var(--ui-t)}
button{cursor:pointer;min-height:var(--ui-h);border-radius:var(--ui-r-sm);font-weight:500}
button:disabled{cursor:not-allowed}
button:not(:disabled):hover{filter:brightness(.96)}
button:not(:disabled):active{filter:brightness(.92)}
:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ui-accent);outline-offset:0;border-color:var(--ui-accent)}
button.pri,.pri,.btn{font-weight:600}
button.pri,.pri{background:var(--ui-accent);border-color:var(--ui-accent);color:#fff}
button.pri:not(:disabled):hover,.pri:hover{background:var(--ui-accent-2);border-color:var(--ui-accent-2);filter:none;color:#fff}
input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{border:1px solid var(--ui-line2);border-radius:var(--ui-r-sm);background:#fff;color:var(--ui-ink)}
input:not([type=range]):not([type=checkbox]):not([type=radio]),select{min-height:var(--ui-h)}
input::placeholder,textarea::placeholder{color:#64748B;opacity:1}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--ui-accent)}
/* 例外: 小さな丸い「？」・文字のようなボタンは高さを伸ばさない（押せる範囲だけ広げる） */
.qm{min-height:0;position:relative}
.qm::before{content:"";position:absolute;inset:-9px}
.nmb{min-height:0}
.rkbtn,.tf button{min-height:32px}

/* ---------- 6. 上のタブ・チップ ---------- */
nav.sub{border-bottom:1px solid var(--ui-line);background:#fff}
nav.sub button,.segs button,.chips button,.dueb button,.hubtabs button{border-radius:999px;min-height:var(--ui-h);font-weight:500}
nav.sub button{background:#F1F5F9;color:var(--ui-ink);border:1px solid transparent}
nav.sub button:not(.on):hover{background:#E2E8F0;filter:none}
nav.sub button.on{background:var(--ui-accent);color:#fff;font-weight:600}
nav.sub button small{font-size:12px;opacity:.8}
nav.sub button.on small{opacity:1}
.segs button,.chips button{background:#fff;border:1px solid var(--ui-line2);color:var(--ui-ink)}
.segs button:not(.on):hover,.chips button:not(.on):hover{background:#F1F5F9;filter:none}
.segs button.on,.chips button.on{font-weight:600}
.seg{border-radius:var(--ui-r)}
.seg button{border-radius:var(--ui-r-sm)}
.seg button.on{background:var(--ui-navy)}
.foldb{border-radius:var(--ui-r)}
.stg7 button,.boxsw button{border-radius:var(--ui-r);transition:border-color var(--ui-t),background-color var(--ui-t),box-shadow var(--ui-t)}
.stg7 button:hover,.boxsw button:hover{border-color:var(--ui-accent);filter:none}

/* ---------- 7. 表 ---------- */
table{border-radius:var(--ui-r);border-color:var(--ui-line)}
th{font-size:13px;font-weight:600;color:var(--ui-sub);background:var(--ui-bg);text-transform:none;letter-spacing:0;border-bottom:1px solid var(--ui-line)}
html[data-ui="dash"] th,html[data-ui="dash"] td{padding:10px 12px}
td{border-bottom-color:var(--ui-line)}
tbody tr:last-child td,table tr:last-child td{border-bottom-color:transparent}
tr.r:hover td,tbody tr:not(.pink):not(.sel):hover td{background:#F8FAFC}
tr.pink td{background:var(--ui-bad-bg)}
th.n,td.n{text-align:right}

/* ====================================================================
   8. ダッシュボード本体 new.html（data-ui="dash"）
   ==================================================================== */
/* 左メニュー: 薄い色の背景＋左の太い線 */
html[data-ui="dash"] #side{background:#fff;border-right:1px solid var(--ui-line);padding:16px 12px}
html[data-ui="dash"] #side .logo{font-size:16px;font-weight:600}
html[data-ui="dash"] #tabs button{position:relative;gap:12px;padding:8px 10px;margin:2px 0;border-radius:10px;min-height:52px;color:var(--ui-ink);transition:background-color var(--ui-t)}
html[data-ui="dash"] #tabs button img{width:36px;height:36px;border-radius:9px;box-shadow:0 1px 2px rgba(15,23,42,.14)}
html[data-ui="dash"] #tabs button b{font-size:14px;font-weight:600}
html[data-ui="dash"] #tabs button small{font-size:12px;color:var(--ui-sub)}
html[data-ui="dash"] #tabs button:hover{background:#F1F5F9;filter:none}
html[data-ui="dash"] #tabs button.on{background:var(--ui-accent-bg);box-shadow:none}
html[data-ui="dash"] #tabs button.on b{color:var(--ui-accent-2)}
html[data-ui="dash"] #tabs button.on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--ui-accent)}
html[data-ui="dash"] #inbox{border-radius:var(--ui-r);box-shadow:0 1px 2px rgba(22,163,74,.25);transition:filter var(--ui-t)}
html[data-ui="dash"] #inbox:hover{filter:brightness(.95)}
html[data-ui="dash"] #inbox small{font-size:12px}
/* 上の帯 */
html[data-ui="dash"] header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--ui-line);padding:12px 24px;backdrop-filter:saturate(1.4) blur(6px)}
html[data-ui="dash"] header .upd{font-size:12px}
html[data-ui="dash"] header .acts button,html[data-ui="dash"] header .acts a{min-height:var(--ui-h);padding:0 14px;font-size:13px;font-weight:500}
html[data-ui="dash"] header .acts button:not(.pri):not(#langBtn){background:#fff;border:1px solid var(--ui-line2);color:var(--ui-ink)}
/* 日本語 / Indonesia の切り替え: スラッシュを消して、はめ込み式に */
#langBtn{font-size:0;display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--ui-line2);border-radius:999px;background:#F1F5F9;min-height:var(--ui-h)}
#langBtn span{font-size:13px;padding:5px 14px;border-radius:999px;color:var(--ui-sub);font-weight:500;line-height:1.4}
#langBtn span.on{background:var(--ui-accent);color:#fff;font-weight:600}
html[data-ui="dash"] #langBtn:hover{filter:none}
/* 中身の幅と余白 */
html[data-ui="dash"] main{padding:20px 16px}
@media(min-width:1000px){html[data-ui="dash"] main{max-width:1480px;padding:24px}}
html[data-ui="dash"] nav.sub{padding:10px 24px;gap:8px}
/* 数字のカード・帯 */
html[data-ui="dash"] .v{font-size:28px}
html[data-ui="dash"] .band b{font-weight:600}
html[data-ui="dash"] .band.ok{background:var(--ui-ok-bg);border-color:#BBF7D0}
html[data-ui="dash"] .band.ok b{color:var(--ui-ok-ink)}
html[data-ui="dash"] .band.bad{background:var(--ui-bad-bg);border-color:#FECACA}
html[data-ui="dash"] .band.bad b{color:var(--ui-bad-ink)}
html[data-ui="dash"] .gapc.ok{background:var(--ui-ok-bg);color:var(--ui-ok-ink)}
html[data-ui="dash"] .gapc.bad{background:var(--ui-bad-bg);color:var(--ui-bad-ink)}
html[data-ui="dash"] .pc.ok{background:var(--ui-ok-bg)}
html[data-ui="dash"] .pc.bad{background:var(--ui-bad-bg)}
html[data-ui="dash"] .tag{font-size:12px;padding:2px 10px;color:var(--ui-sub);background:#F1F5F9}
html[data-ui="dash"] .bar,html[data-ui="dash"] .pbar{background:#E2E8F0}
html[data-ui="dash"] .filters input,html[data-ui="dash"] .filters select{min-height:var(--ui-h)}
html[data-ui="dash"] details>summary{color:var(--ui-navy)}
/* 資料ページの色分け（.kat の色は各行の指定のまま）は触らない */
html[data-ui="dash"] .links a{padding:12px 14px}
html[data-ui="dash"] .set input{min-height:var(--ui-h)}
html[data-ui="dash"] .set label,html[data-ui="dash"] label{color:var(--ui-sub);font-size:13px}
html[data-ui="dash"] .err{color:var(--ui-bad-ink)}
/* ログイン画面 */
html[data-ui="dash"] #login{border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.10);padding:28px 24px}
html[data-ui="dash"] #login input{min-height:44px;border-color:var(--ui-line2)}
html[data-ui="dash"] #login button{min-height:44px;border-radius:10px}
/* 埋め込みの枠 */
.frame iframe{border-color:var(--ui-line);border-radius:var(--ui-r);box-shadow:var(--ui-shadow)}
.openFull{border-radius:var(--ui-r)}

/* ====================================================================
   9. 顧客ページ kokyaku.html（data-ui="cust"）
   ==================================================================== */
html[data-ui="cust"] body{background:var(--ui-bg)}
html[data-ui="cust"] .top{background:#fff;color:var(--ui-navy);border-bottom:1px solid var(--ui-line);padding:10px 16px;gap:12px}
html[data-ui="cust"] .top b{font-size:18px;font-weight:600;color:var(--ui-navy)}
html[data-ui="cust"] .top a{color:var(--ui-accent);opacity:1;font-size:13px;text-decoration:none;font-weight:500}
html[data-ui="cust"] .top a:hover{text-decoration:underline}
html[data-ui="cust"] .top input{border:1px solid var(--ui-line2);background:#fff;border-radius:var(--ui-r-sm);padding:0 12px;min-height:var(--ui-h);color:var(--ui-ink)}
html[data-ui="cust"] .top select{border:1px solid var(--ui-line2);background:#fff;color:var(--ui-ink);border-radius:var(--ui-r-sm);padding:0 10px;min-height:var(--ui-h)}
html[data-ui="cust"] .chips{background:#fff;border-bottom:1px solid var(--ui-line);padding:12px 16px;gap:8px}
html[data-ui="cust"] .chip{min-height:var(--ui-h);display:inline-flex;align-items:center;gap:2px;padding:4px 14px;font-size:13px;font-weight:500;border-radius:999px;transition:filter var(--ui-t),background-color var(--ui-t),border-color var(--ui-t)}
html[data-ui="cust"] .chip.on:not(.cc){border-color:var(--ui-navy)}
html[data-ui="cust"] .chip:hover{filter:brightness(.96)}
html[data-ui="cust"] .chip b{font-size:15px;font-weight:700;margin-left:6px}
/* 元の不具合: 縦並び＋折り返しの箱だと、横スクロールの行が画面より広がってページ全体が横に動いた。折り返しを止めて幅を画面に合わせる */
html[data-ui="cust"] .chips{flex-wrap:nowrap;min-width:0}
html[data-ui="cust"] .crow{gap:8px;min-width:0;max-width:100%}
html[data-ui="cust"] .crow .lb{font-size:12px;margin:0 4px 0 12px;color:var(--ui-sub);font-weight:500}
html[data-ui="cust"] .wrap{gap:16px;padding:16px}
html[data-ui="cust"] .card{border-radius:var(--ui-r);border-color:var(--ui-line);box-shadow:var(--ui-shadow)}
html[data-ui="cust"] table{border:0;border-radius:0}
html[data-ui="cust"] th{padding:10px;font-size:13px;color:var(--ui-sub);background:var(--ui-bg);border-bottom:1px solid var(--ui-line)}
html[data-ui="cust"] td{padding:9px 10px;border-bottom:1px solid #EEF2F6}
@media(min-width:821px){html[data-ui="cust"] td:first-child{white-space:nowrap}}
html[data-ui="cust"] tr.r:hover td{background:#F8FAFC}
html[data-ui="cust"] tr.sel td{background:#FEF9E7}
html[data-ui="cust"] th.srt:hover{color:var(--ui-accent)}
html[data-ui="cust"] .st{font-size:12px;padding:3px 8px;border-radius:6px}
html[data-ui="cust"] .tag{font-size:12px;padding:1px 6px;border-radius:6px}
html[data-ui="cust"] .tag.p{padding:2px 8px}
html[data-ui="cust"] .btn{min-height:var(--ui-h);display:inline-flex;align-items:center;padding:0 14px;font-size:13px;font-weight:600;border-radius:var(--ui-r-sm);background:var(--ui-accent)}
html[data-ui="cust"] .btn:hover{background:var(--ui-accent-2);filter:none}
html[data-ui="cust"] .btn.g{background:var(--ui-ok-ink)}
html[data-ui="cust"] .btn.g:hover{filter:brightness(.92)}
html[data-ui="cust"] .btn.w{background:#fff;color:var(--ui-accent);border:1px solid var(--ui-accent)}
html[data-ui="cust"] .btn.w:hover{background:var(--ui-accent-bg)}
html[data-ui="cust"] .opts button{min-height:var(--ui-h);border-radius:var(--ui-r-sm);border-color:var(--ui-line2);color:var(--ui-ink);font-weight:500}
html[data-ui="cust"] .opts button.on{background:var(--ui-accent);border-color:var(--ui-accent);color:#fff}
html[data-ui="cust"] .det h2{font-size:18px;font-weight:600;color:var(--ui-navy)}
html[data-ui="cust"] .box{border-width:1px;border-radius:var(--ui-r)}
html[data-ui="cust"] .alertpic{border-radius:var(--ui-r-sm)}
html[data-ui="cust"] .grid{font-size:14px;row-gap:6px}
html[data-ui="cust"] .toast{border-radius:999px;box-shadow:0 6px 20px rgba(15,23,42,.25)}
html[data-ui="cust"] dialog{border-radius:16px;box-shadow:0 16px 40px rgba(15,23,42,.25)}
html[data-ui="cust"] .login{border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.10)}
html[data-ui="cust"] .login input{min-height:44px}
html[data-ui="cust"] .login .btn{min-height:44px;width:100%;justify-content:center}
html[data-ui="cust"] .mut{color:var(--ui-sub)}

/* ====================================================================
   10. デスク tugas.html（data-ui="desk"）
   ==================================================================== */
html[data-ui="desk"] body{background:var(--ui-bg)}
html[data-ui="desk"] header{padding:10px 16px;gap:8px;border-bottom:1px solid var(--ui-line);background:#fff}
html[data-ui="desk"] header b{font-size:18px;font-weight:600;color:var(--ui-navy)}
html[data-ui="desk"] header small{font-size:13px}
html[data-ui="desk"] button{font-size:13px;padding:0 14px;border-color:var(--ui-line2);background:#fff;color:var(--ui-ink);font-weight:500}
html[data-ui="desk"] button.on,html[data-ui="desk"] button.pri{background:var(--ui-navy);border-color:var(--ui-navy);color:#fff;font-weight:600}
html[data-ui="desk"] nav{padding:10px 16px;gap:8px;background:#fff}
html[data-ui="desk"] nav button{border-radius:999px;min-height:var(--ui-h)}
html[data-ui="desk"] nav button:not(.on):hover{background:#F1F5F9;filter:none}
html[data-ui="desk"] select.who{min-height:var(--ui-h);padding:0 10px;font-size:13px;border-radius:var(--ui-r-sm)}
html[data-ui="desk"] .demo{background:var(--ui-warn-bg);border-color:#FDE68A;color:#92400E}
html[data-ui="desk"] main{padding:16px 16px 96px;max-width:1480px}
html[data-ui="desk"] .sum{gap:12px;margin:12px 0}
html[data-ui="desk"] .sum div{border-radius:var(--ui-r);box-shadow:var(--ui-shadow);padding:8px 14px}
html[data-ui="desk"] .sum b{font-size:22px;line-height:1.25;font-weight:600}
html[data-ui="desk"] .sum small{font-size:12px;color:var(--ui-sub)}
html[data-ui="desk"] .card{border-radius:var(--ui-r);box-shadow:var(--ui-shadow);padding:12px 16px;margin:12px 0}
html[data-ui="desk"] .t{font-weight:600}
html[data-ui="desk"] .mut{font-size:13px}
html[data-ui="desk"] .tag{font-size:12px;padding:1px 10px;background:#F1F5F9;color:var(--ui-sub)}
html[data-ui="desk"] .tag.late,html[data-ui="desk"] .tag.warn{background:var(--ui-bad-bg);color:var(--ui-bad-ink);border-color:#FECACA}
html[data-ui="desk"] .tag.today{background:var(--ui-warn-bg);color:var(--ui-warn-ink);border-color:#FDE68A}
html[data-ui="desk"] .st button{font-size:12px;min-height:32px;padding:0 12px}
html[data-ui="desk"] .st button.on{background:var(--ui-accent);border-color:var(--ui-accent);color:#fff}
html[data-ui="desk"] .day{border-radius:var(--ui-r)}
html[data-ui="desk"] .day>b{background:var(--ui-bg);font-size:14px;font-weight:600}
html[data-ui="desk"] .ev{font-size:14px}
html[data-ui="desk"] .res{border-radius:var(--ui-r-sm)}
html[data-ui="desk"] input,html[data-ui="desk"] select,html[data-ui="desk"] textarea{padding:7px 10px}
html[data-ui="desk"] label{font-size:13px;color:var(--ui-sub)}
html[data-ui="desk"] .bar i{background:var(--ui-accent)}
html[data-ui="desk"] .bar i.over{background:var(--ui-bad)}
html[data-ui="desk"] #login{margin:60px auto}
html[data-ui="desk"] #toast{border-radius:999px;box-shadow:0 6px 20px rgba(15,23,42,.25)}
@media(min-width:1000px){html[data-ui="desk"] .pc{border-radius:var(--ui-r);box-shadow:var(--ui-shadow)}}

/* ====================================================================
   11. 携帯（768px以下）: 押す所は44px、入力は16px（iPhoneの自動拡大を防ぐ）
   ==================================================================== */
@media(max-width:768px),(pointer:coarse){
  :root{--ui-h:44px}
  button,.btn,a.rkbtn{min-height:44px}
  .rkbtn,.tf button,.st button,.opts button{min-height:40px}
  .qm,.nmb{min-height:0}
  input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;min-height:44px}
  .qm::before{inset:-12px}
  html[data-ui="dash"] header .acts button,html[data-ui="dash"] header .acts a{min-height:40px;padding:0 7px;font-size:12px}
  html[data-ui="dash"] header .acts{gap:3px}
  #langBtn{min-height:40px}
  #langBtn span{font-size:12px;padding:6px 7px}
  html[data-ui="dash"] .sim input[type=number]{min-height:40px}
  html[data-ui="cust"] .chip{min-height:44px}
  html[data-ui="desk"] header .who,html[data-ui="desk"] select.who{min-height:44px}
  html[data-ui="desk"] .st button{min-height:40px}
}
@media(max-width:820px){
  html[data-ui="dash"] header .acts .inboxTop{display:inline-flex;align-items:center}
  html[data-ui="dash"] #langBtn span{padding:6px 5px}
  .chart div:nth-child(even) span{visibility:hidden}
  /* 下のメニュー（スマホ）: 12px の文字が入るように詰める */
  html[data-ui="dash"] #side{padding:4px 2px calc(4px + env(safe-area-inset-bottom));border-top:1px solid var(--ui-line);box-shadow:0 -2px 8px rgba(15,23,42,.06);background:rgba(255,255,255,.97)}
  html[data-ui="dash"] #side #tabs button{min-height:56px;padding:4px 0;gap:2px;border-radius:10px}
  html[data-ui="dash"] #tabs button img{width:30px;height:30px}
  html[data-ui="dash"] #tabs button b{font-size:12px;font-weight:600;line-height:1.15;letter-spacing:-.03em;white-space:nowrap}
  html[data-ui="dash"] #tabs button.on::before{left:22%;right:22%;top:0;bottom:auto;width:auto;height:3px;border-radius:0 0 3px 3px}
  html[data-ui="dash"] header{padding:10px 14px}
  html[data-ui="dash"] header h1{font-size:17px}
  html[data-ui="dash"] main{padding:14px 14px 96px}
  html[data-ui="dash"] nav.sub{padding:8px 14px}
  html[data-ui="dash"] .v{font-size:24px}
  html[data-ui="cust"] .top{padding:10px 12px}
  html[data-ui="cust"] .wrap{padding:12px}
}

/* ====================================================================
   12. 色分け（2026-10-28 吉川さん「色とか入れて視覚的に見やすくしてほしい」）
   ルール: 同じ色＝同じ意味。青＝ふつう・中立／緑＝済み・達成／琥珀＝今日・注意／赤＝遅れ・不足／紫・青緑・バラ＝区別のためだけの色。
   薄い面（約10%）＋濃い色（文字は 4.5:1 以上）。既存の色（資料の .kat・顧客ページの CCOL・人ごとの色）には触らない。
   HTML は変えない。元に戻す: この 12 を消す（控え: _控え_SaaS化前_20261028/asip-ui.css.before_color）。
   ==================================================================== */
:root{
  --c-blue:#2563EB;--c-blue-d:#1D4ED8;--c-blue-bg:#EFF6FF;--c-blue-ln:#BFDBFE;
  --c-green:#16A34A;--c-green-d:#15803D;--c-green-bg:#F0FDF4;--c-green-ln:#BBF7D0;
  --c-amber:#D97706;--c-amber-d:#92400E;--c-amber-bg:#FFFBEB;--c-amber-ln:#FDE68A;
  --c-red:#DC2626;--c-red-d:#B91C1C;--c-red-bg:#FEF2F2;--c-red-ln:#FECACA;
  --c-violet:#7C3AED;--c-violet-d:#6D28D9;--c-violet-bg:#F5F3FF;--c-violet-ln:#DDD6FE;
  --c-teal:#0D9488;--c-teal-d:#0F766E;--c-teal-bg:#F0FDFA;--c-teal-ln:#99F6E4;
  --c-rose:#E11D48;--c-rose-d:#9F1239;--c-rose-bg:#FFF1F2;--c-rose-ln:#FECDD3;
  --c-slate:#475569;--c-slate-d:#334155;--c-slate-bg:#F1F5F9;--c-slate-ln:#CBD5E1;
}
/* --- 上のタブ: 1つずつ薄い色＋色の点。選ばれた物はその色で塗りつぶし --- */
nav.sub button,html[data-ui="desk"] nav button{background:var(--hb,var(--c-slate-bg));color:var(--h,var(--ui-ink));border:1px solid var(--hl,transparent)}
nav.sub button::before,html[data-ui="desk"] nav button::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hf,var(--c-slate));margin-right:8px;vertical-align:1px}
html[data-ui="dash"] nav.sub button:not(.on):hover,html[data-ui="desk"] nav button:not(.on):hover{background:var(--hl,#E2E8F0);filter:none}
html[data-ui="dash"] nav.sub button.on,html[data-ui="desk"] nav button.on{background:var(--hf,var(--c-blue));color:#fff;border-color:var(--hf,var(--c-blue))}
html[data-ui="dash"] nav.sub button.on::before,html[data-ui="desk"] nav button.on::before{background:#fff}
html[data-ui="dash"] nav.sub button.on small{opacity:1}
nav.sub button:nth-child(5n+1){--h:var(--c-blue-d);--hb:var(--c-blue-bg);--hl:var(--c-blue-ln);--hf:var(--c-blue)}
nav.sub button:nth-child(5n+2){--h:var(--c-violet-d);--hb:var(--c-violet-bg);--hl:var(--c-violet-ln);--hf:var(--c-violet)}
nav.sub button:nth-child(5n+3){--h:var(--c-teal-d);--hb:var(--c-teal-bg);--hl:var(--c-teal-ln);--hf:var(--c-teal)}
nav.sub button:nth-child(5n+4){--h:var(--c-amber-d);--hb:var(--c-amber-bg);--hl:var(--c-amber-ln);--hf:#B45309}
nav.sub button:nth-child(5n+5){--h:var(--c-rose-d);--hb:var(--c-rose-bg);--hl:var(--c-rose-ln);--hf:#E11D48}
/* デスク: 今日＝琥珀／カレンダー＝青／一覧＝紫／済み＝緑／足す＝ネイビー */
html[data-ui="desk"] nav button[data-t="today"]{--h:var(--c-amber-d);--hb:var(--c-amber-bg);--hl:var(--c-amber-ln);--hf:#B45309}
html[data-ui="desk"] nav button[data-t="cal"]{--h:var(--c-blue-d);--hb:var(--c-blue-bg);--hl:var(--c-blue-ln);--hf:var(--c-blue)}
html[data-ui="desk"] nav button[data-t="list"]{--h:var(--c-violet-d);--hb:var(--c-violet-bg);--hl:var(--c-violet-ln);--hf:var(--c-violet)}
html[data-ui="desk"] nav button[data-t="done"]{--h:var(--c-green-d);--hb:var(--c-green-bg);--hl:var(--c-green-ln);--hf:var(--c-green-d)}
html[data-ui="desk"] nav button[data-t="add"]{--h:#fff;--hb:var(--ui-navy);--hl:var(--ui-navy);--hf:var(--ui-navy)}
html[data-ui="desk"] nav button[data-t="add"]::before{background:#93C5FD}
html[data-ui="desk"] nav button[data-t="add"]:not(.on):hover{background:#17406E}
/* --- 見出し: 青い小さな縦線 --- */
html[data-ui="dash"] h2::before,html[data-ui="desk"] h2::before{content:"";display:inline-block;width:4px;height:.95em;border-radius:2px;background:var(--c-blue);margin-right:8px;vertical-align:-.12em}
html[data-ui="cust"] .det h2::before{content:"";display:inline-block;width:4px;height:.95em;border-radius:2px;background:var(--c-blue);margin-right:8px;vertical-align:-.12em}
html[data-ui="dash"] h2 small,html[data-ui="desk"] h2 small{background:var(--c-slate-bg);border-radius:999px;padding:1px 8px;margin-left:6px;color:var(--c-slate-d)}
/* --- 数字のタイル: 意味の色。赤＝遅れ・不足／琥珀＝今日／緑＝済み・達成／青＝ふつう --- */
html[data-ui="desk"] .sum div{background:var(--c-blue-bg);border-color:var(--c-blue-ln);border-top:3px solid var(--c-blue)}
html[data-ui="desk"] .sum .r{background:var(--c-red-bg);border-color:var(--c-red-ln);border-top-color:var(--c-red)}
html[data-ui="desk"] .sum .y{background:var(--c-amber-bg);border-color:var(--c-amber-ln);border-top-color:var(--c-amber)}
html[data-ui="desk"] .sum .g{background:var(--c-green-bg);border-color:var(--c-green-ln);border-top-color:var(--c-green)}
html[data-ui="desk"] .sum .r b{color:var(--c-red-d)}html[data-ui="desk"] .sum .y b{color:var(--c-amber-d)}html[data-ui="desk"] .sum .g b{color:var(--c-green-d)}
html[data-ui="desk"] .sum small{color:var(--c-slate-d)}
html[data-ui="dash"] .c4top>div{border-top:3px solid var(--c-blue-ln)}
html[data-ui="dash"] .c4top>div:nth-child(1){background:var(--c-blue-bg);border-top-color:var(--c-blue)}
html[data-ui="dash"] .c4top>div:nth-child(2){background:var(--c-slate-bg);border-top-color:var(--c-slate)}
html[data-ui="dash"] .c4top>div.bad{background:var(--c-red-bg);border-top-color:var(--c-red)}
html[data-ui="dash"] .c4top>div.ok{background:var(--c-green-bg);border-top-color:var(--c-green)}
html[data-ui="dash"] .nsum>*{border-top:3px solid var(--c-blue)}
html[data-ui="dash"] .nsum>.hl{border-top-color:var(--c-amber);background:var(--c-amber-bg)}
/* --- 表の見出し: ごく薄い青 --- */
th{background:#EEF3FB;color:var(--c-slate-d);border-bottom:1px solid var(--c-blue-ln)}
html[data-ui="dash"] th,html[data-ui="cust"] th{background:#EEF3FB;color:var(--c-slate-d)}
/* --- 状態ボタン（デスク）: 未＝灰／途中＝青／済み＝緑 --- */
html[data-ui="desk"] .st button[data-st="belum"].on{background:var(--c-slate);border-color:var(--c-slate)}
html[data-ui="desk"] .st button[data-st="jalan"].on{background:var(--c-blue);border-color:var(--c-blue)}
html[data-ui="desk"] .st button[data-st="selesai"].on{background:var(--c-green-d);border-color:var(--c-green-d)}
html[data-ui="desk"] .st button[data-st="selesai"]:not(.on){color:var(--c-green-d)}
html[data-ui="desk"] .st button[data-st="jalan"]:not(.on){color:var(--c-blue-d)}
/* --- タグ --- */
html[data-ui="desk"] .tag.warn{background:var(--c-red-bg);color:var(--c-red-d);border-color:var(--c-red-ln)}
html[data-ui="desk"] .day>b{background:var(--c-blue-bg);color:var(--c-blue-d);border-bottom:1px solid var(--c-blue-ln)}
html[data-ui="dash"] .tag{background:var(--c-blue-bg);color:var(--c-blue-d)}