/* 新しい見た目（切り替え式）— 2026-09-26 セッション「管理画面UI全面リデザイン」（マサトさん依頼）
   ・html に ui2 の印が付いた時だけ効く（オーナーが「新しい見た目」をオンにした端末だけ）。印が無い時は今の見た目のまま
   ・色・文字・余白・線の決まりをここに1つにまとめる。色は「状態」を伝える時だけ使う（緑=正常/販売中・青=情報/進行中・黄=確認が必要・オレンジ=注意・赤=返品/エラー/急ぎ・グレー=完了/対象外）
   ・今いる所（左メニュー）は濃い青の地に白い文字（2026-09-23 マサトさんの要望をそのまま）
   ・新しい部品のクラスは u- で始める（今の画面のクラスとぶつけない） */

html.ui2{
  /* 今の画面が使っている変数も、この決まりに合わせて置き換える（.tag.red などが自動で新しい色になる） */
  --bg:#ffffff; --card:#ffffff; --ink:#18181b; --muted:#55585f; --line:#e6e6e9; --accent:#1f5fd6;
  --red:#bd2e1c; --yellow:#8a6100; --green:#15764a; --blue:#2a58c2; --radius:8px;
  /* 新しい決まり */
  --u-bg-subtle:#f7f7f8; --u-bg-hover:#f0f0f2; --u-bg-selected:#edf2fd; --u-line-strong:#d4d4d9;
  --u-ink-2:#35373d; --u-ink-3:#55585f; --u-primary:#18181b; --u-primary-hover:#303036; --u-link:#2556c4;
  --u-green-bg:#e5f3eb; --u-blue-bg:#e8eefb; --u-yellow-bg:#faf0d2; --u-orange:#ad4c07; --u-orange-bg:#fcebdd;
  --u-red-bg:#fbe9e6; --u-gray:#5b5d64; --u-gray-bg:#eeeef0;
  --u-r-sm:4px; --u-r:6px; --u-r-lg:8px;
  /* 文字の大きさ（2026-09-26 1段大きく）: xs=小見出し・件数／sm=補足・札／fs=表・メニュー・ボタン／md=本文／lg=小見出し／xl=ページの見出し */
  --u-fs-xs:12px; --u-fs-sm:13px; --u-fs:14px; --u-fs-md:15px; --u-fs-lg:17px; --u-fs-xl:22px; --u-fs-kpi:28px;
}
/* 「文字の大きさ：大きめ」（この端末だけ・左メニューの下で選ぶ）*/
html.ui2.u-lg{--u-fs-xs:13px; --u-fs-sm:14px; --u-fs:15px; --u-fs-md:16px; --u-fs-lg:18px; --u-fs-xl:24px; --u-fs-kpi:30px}
html.ui2, html.ui2 body{background:#fff}
html.ui2 body{font:var(--u-fs-md)/1.6 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:var(--ink)}
html.ui2 a{color:var(--u-link)}
html.ui2 :focus-visible{outline:2px solid var(--u-link);outline-offset:2px}
html.ui2 .num{font-variant-numeric:tabular-nums}
html.ui2 .muted{color:var(--u-ink-3)}
html.ui2 .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--u-fs-sm)}

/* ---------- 左のメニュー（固定）---------- */
html.ui2 #side{width:244px;background:var(--u-bg-subtle);border-right:1px solid var(--line);padding:14px 10px 12px;gap:8px}
html.ui2 #side .brand{display:flex;align-items:center;gap:8px;font-size:var(--u-fs-md);font-weight:650;padding:2px 8px 2px}
html.ui2 #side .brand::before{content:"S";width:22px;height:22px;border-radius:5px;background:var(--ink);color:#fff;font-size:var(--u-fs-sm);font-weight:700;display:grid;place-items:center;flex:none}
html.ui2 #side .meName{background:transparent;color:var(--u-ink-3);font-weight:500;font-size:var(--u-fs-sm);padding:0 8px}
html.ui2 #side .search input{height:34px;padding:0 10px 0 30px;border:1px solid var(--line);border-radius:var(--u-r);font-size:var(--u-fs);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8c93' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 9px center/14px}
html.ui2 #side .search input:focus{outline:none;border-color:var(--u-ink-2)}
html.ui2 #nav{gap:1px;margin:0 -2px}
html.ui2 #nav .sec{font-size:var(--u-fs-xs);color:var(--u-ink-3);padding:14px 10px 4px;letter-spacing:0;font-weight:600}
html.ui2 #nav .u-sp{flex:1;min-height:16px}
html.ui2 #nav .u-line{border-top:1px solid var(--line);margin:6px 8px}
html.ui2 #nav a{height:35px;padding:0 10px;gap:10px;border-radius:var(--u-r);color:var(--u-ink-2);font-size:var(--u-fs)}
html.ui2 #nav a .u-ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.ui2 #nav a .ic{width:16px;font-size:var(--u-fs)}
html.ui2 #nav a .lbl{overflow:hidden;text-overflow:ellipsis}
html.ui2 #nav a:hover{background:var(--u-bg-hover);color:var(--ink);text-decoration:none}
html.ui2 #nav a.on,html.ui2 #nav a.on:hover{background:var(--accent);color:#fff;font-weight:600}
html.ui2 #nav a .nbadge{margin-left:auto;flex:none;font-size:var(--u-fs-xs);line-height:20px;padding:0 7px;border-radius:999px;font-weight:600;background:var(--red);color:#fff}
html.ui2 #nav a .nbadge.tbadge{background:#e0a91f;color:#fff}
html.ui2 #nav a .nbadge+.nbadge{margin-left:4px}
html.ui2 #nav a.on .nbadge{box-shadow:0 0 0 1.5px #fff}
html.ui2 #side .who{border-top:1px solid var(--line);padding:10px 8px 0;font-size:var(--u-fs-sm);color:var(--u-ink-2);line-height:1.9}
html.ui2 #side .who a{color:var(--u-ink-3);margin-right:8px}
html.ui2 #side .who a:hover{color:var(--ink)}
.u-sys{display:flex;align-items:center;gap:7px;padding:2px 8px 0;font-size:var(--u-fs-sm);color:var(--u-ink-2);cursor:pointer;text-decoration:none}
html.ui2 .u-sys:hover{color:var(--ink);text-decoration:none}
.u-dot{width:7px;height:7px;border-radius:50%;background:#9a9ca3;flex:none}
.u-dot.u-green{background:#1f9d5c}.u-dot.u-red{background:#bd2e1c}.u-dot.u-yellow{background:#d19b00}
.u-switch{display:flex;align-items:center;gap:6px;font-size:var(--u-fs-sm);color:#6b7480;margin-top:6px;cursor:pointer;line-height:1.4}
.u-switch input{width:16px;height:16px;margin:0}

/* ---------- 右の作業場所 ---------- */
html.ui2 .mainwrap main{padding:22px 24px 56px;max-width:1440px}
html.ui2 h1{font-size:var(--u-fs-xl);font-weight:650;margin:0 0 16px;letter-spacing:.01em;line-height:1.35}
html.ui2 h1 .small,html.ui2 h1 .muted{font-size:var(--u-fs);font-weight:400;color:var(--u-ink-3);margin-left:4px}
html.ui2 h2{font-size:var(--u-fs-lg);font-weight:650;margin:26px 0 10px}
html.ui2 .small{font-size:var(--u-fs-sm)}
html.ui2 .card{border:1px solid var(--line);border-radius:var(--u-r-lg);padding:16px;box-shadow:none}
html.ui2 .kv{font-size:var(--u-fs)}
html.ui2 .kv div:nth-child(odd){color:var(--u-ink-3)}
html.ui2 .tag{border-radius:var(--u-r-sm);font-size:var(--u-fs-sm);font-weight:550;padding:1px 7px;background:var(--u-gray-bg);color:var(--u-gray)}
html.ui2 .tag.red{background:var(--u-red-bg);color:var(--red)}
html.ui2 .tag.yellow{background:var(--u-yellow-bg);color:var(--yellow)}
html.ui2 .tag.green{background:var(--u-green-bg);color:var(--green)}
html.ui2 .tag.blue{background:var(--u-blue-bg);color:var(--blue)}
html.ui2 .btn{border:1px solid var(--u-line-strong);border-radius:var(--u-r);background:#fff;color:var(--ink);font-size:var(--u-fs);padding:7px 12px;line-height:1.3}
html.ui2 .btn:hover{background:var(--u-bg-hover)}
html.ui2 .btn.primary{background:var(--u-primary);border-color:var(--u-primary);color:#fff}
html.ui2 .btn.primary:hover{background:var(--u-primary-hover)}
html.ui2 .btn.small{padding:3px 8px;font-size:var(--u-fs-sm)}
html.ui2 .btn.big{font-size:var(--u-fs-lg);padding:12px 20px}
html.ui2 .btn:disabled{opacity:.5;cursor:default}
html.ui2 .filters{gap:8px;align-items:center}
html.ui2 .filters select,html.ui2 .filters input{border:1px solid var(--u-line-strong);border-radius:var(--u-r);font-size:var(--u-fs);padding:6px 10px;background:#fff}
html.ui2 table{border:1px solid var(--line);border-radius:var(--u-r-lg)}
html.ui2 th,html.ui2 td{border-bottom:1px solid var(--line);font-size:var(--u-fs)}
html.ui2 th{background:var(--u-bg-subtle);color:var(--u-ink-2);font-weight:550;font-size:var(--u-fs-sm)}
html.ui2 tr.row:hover td{background:var(--u-bg-subtle)}
html.ui2 table.dense th,html.ui2 table.dense td{font-size:var(--u-fs);padding:6px 10px}
html.ui2 table.dense thead th{background:var(--u-bg-subtle)}
html.ui2 .sheet{border-radius:var(--u-r-lg)}
html.ui2 .alert{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--u-r);background:#fff}
html.ui2 .steps .step{border-radius:var(--u-r);font-size:var(--u-fs-sm)}
html.ui2 .step.done{background:var(--u-green-bg);border-color:#cde5d6;color:var(--green)}
html.ui2 .step.now{background:var(--u-red-bg);border-color:#f0c9c3;color:var(--red)}
html.ui2 .sortban{background:var(--u-yellow-bg);border:1px solid #ecd79f;border-radius:var(--u-r-lg);color:var(--ink)}
html.ui2 .sortban.hot{background:var(--u-red-bg);border-color:#efc4bd}
html.ui2 .urgent{border:1px solid #e9b3aa;border-left:3px solid var(--red);background:#fff;border-radius:var(--u-r-lg)}
html.ui2 .col{background:var(--u-bg-subtle);border:1px solid var(--line)}
html.ui2 .kcard{border-radius:var(--u-r)}
html.ui2 .kcard:hover{border-color:var(--u-line-strong);box-shadow:0 1px 2px rgba(24,24,27,.05)}
html.ui2 .seg .btn.on{background:var(--u-bg-selected);color:var(--accent);border-color:var(--accent)}
html.ui2 .dlg{border-radius:10px;border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.18)}
html.ui2 .dlg-wrap{background:rgba(24,24,27,.28)}
@media (max-width:820px){
  html.ui2 .topbar{background:#fff;border-bottom:1px solid var(--line)}
  html.ui2 .topbar .brand{font-size:var(--u-fs-md)}
  html.ui2 .mainwrap main{padding:14px 14px 40px}
  html.ui2 #side{box-shadow:8px 0 24px rgba(0,0,0,.12)}
}

/* ---------- 新しい部品（ホーム・一覧・右の詳細）---------- */
.u-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.u-head h1{margin:0;white-space:nowrap}
.u-head .u-sub{color:var(--u-ink-3);font-size:var(--u-fs)}
.u-head .u-act{margin-left:auto;display:flex;gap:8px;align-items:center}
.u-badge{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 7px;border-radius:var(--u-r-sm);font-size:var(--u-fs-sm);font-weight:550;white-space:nowrap;background:var(--u-gray-bg);color:var(--u-gray)}
.u-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.u-badge.u-green{background:var(--u-green-bg);color:var(--green)}.u-badge.u-blue{background:var(--u-blue-bg);color:var(--blue)}
.u-badge.u-yellow{background:var(--u-yellow-bg);color:var(--yellow)}.u-badge.u-orange{background:var(--u-orange-bg);color:var(--u-orange)}
.u-badge.u-red{background:var(--u-red-bg);color:var(--red)}
.u-staff{display:inline-block;font-size:var(--u-fs-sm);color:var(--u-ink-2);padding:0 6px;border:1px solid var(--line);border-radius:var(--u-r-sm);line-height:21px;background:#fff;white-space:nowrap}
.u-sec{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:30px 0 10px}
.u-sec h2{margin:0;font-size:var(--u-fs-lg);white-space:nowrap}
.u-sec .u-hint{color:var(--u-ink-3);font-size:var(--u-fs)}
.u-sec .u-more{margin-left:auto;font-size:var(--u-fs)}
.u-panel{border:1px solid var(--line);border-radius:var(--u-r-lg);overflow:hidden;background:#fff}
.u-err{border:1px solid #f0c9c3;background:var(--u-red-bg);border-radius:var(--u-r-lg);padding:12px 14px;color:#6e1a10;font-size:var(--u-fs)}
.u-err b{color:var(--red)}
.u-empty{padding:40px 20px;text-align:center;color:var(--u-ink-2);font-size:var(--u-fs)}
.u-empty b{display:block;font-size:var(--u-fs-md);color:var(--ink);margin-bottom:4px}
.u-sk{display:block;background:linear-gradient(90deg,#efeff1 0%,#f7f7f8 50%,#efeff1 100%);background-size:200% 100%;animation:u-sk 1.2s linear infinite;border-radius:var(--u-r-sm);height:14px}
@keyframes u-sk{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.u-sk{animation:none}.u-drawer,.u-toast{transition:none!important}}

/* ホームの数字（Stripe の考え方: 最初に「今の状態」） */
.u-kpis{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--u-r-lg);overflow:hidden}
.u-kpi{flex:1 1 200px;background:#fff;padding:16px 18px;min-width:0}
.u-kpi .u-kl{font-size:var(--u-fs);color:var(--u-ink-2)}
.u-kpi .u-kv{font-size:var(--u-fs-kpi);font-weight:650;letter-spacing:-.01em;margin:4px 0 2px;white-space:nowrap;line-height:1.25}
.u-kpi .u-ks{font-size:var(--u-fs-sm);color:var(--u-ink-3)}
.u-kpi .u-ks b{font-weight:600;color:var(--u-ink-2)}
.u-kpi a.u-kv{display:block;color:var(--ink)}
.u-kpi .u-meter{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:2px;margin:10px 0 6px}
.u-kpi .u-meter span{display:block;height:100%}
.u-kpi .u-leg{display:flex;gap:2px 10px;flex-wrap:wrap;font-size:var(--u-fs-sm);color:var(--u-ink-2)}
.u-kpi .u-leg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px}
/* 要対応（押すとその一覧へ） */
.u-attn-row{display:grid;grid-template-columns:4px 30px minmax(0,1fr) auto 18px;align-items:center;gap:0 12px;padding:0 14px 0 0;min-height:60px;border-top:1px solid var(--line);color:var(--ink);background:#fff}
.u-attn-row:first-child{border-top:0}
html.ui2 a.u-attn-row{color:var(--ink)}
html.ui2 a.u-attn-row:hover{background:var(--u-bg-subtle);text-decoration:none}
.u-attn-row .u-bar{align-self:stretch}
.u-attn-row.u-red .u-bar{background:#c8412e}.u-attn-row.u-orange .u-bar{background:#dd7a2d}.u-attn-row.u-yellow .u-bar{background:#dfb236}.u-attn-row.u-blue .u-bar{background:#5b82d6}
.u-attn-row .u-aic{color:var(--u-ink-2);display:grid;place-items:center}
.u-attn-row .u-at{font-weight:600;font-size:var(--u-fs-md);line-height:1.4}
.u-attn-row .u-ad{font-size:var(--u-fs-sm);color:var(--u-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-attn-row .u-an{font-size:calc(var(--u-fs-xl) + 1px);font-weight:650;font-variant-numeric:tabular-nums;text-align:right;line-height:1.2}
.u-attn-row .u-an small{font-size:var(--u-fs-sm);font-weight:500;color:var(--u-ink-3);margin-left:3px}
.u-attn-row .u-an .u-asub{display:block;font-size:var(--u-fs-sm);font-weight:600;color:var(--red)}
.u-attn-row .u-ago{color:#a3a5ab}
.u-attn-row.u-abad .u-an{font-size:var(--u-fs);color:var(--red);font-weight:600}
.u-attn-zero{padding:10px 18px;font-size:var(--u-fs-sm);color:var(--u-ink-3);border-top:1px solid var(--line);background:var(--u-bg-subtle)}
.u-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:0 24px}
.u-tbl{width:100%;border-collapse:collapse;border:0!important;border-radius:0!important;font-size:var(--u-fs)}
.u-tbl th{text-align:left;padding:8px 14px!important;font-size:var(--u-fs-sm)}
.u-tbl td{padding:9px 14px!important;white-space:nowrap}
.u-tbl tr:last-child td{border-bottom:0}
.u-tbl .u-ttl{max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis}
.u-list{list-style:none;margin:0;padding:0}
.u-list li{display:grid;grid-template-columns:16px 1fr auto;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:var(--u-fs);align-items:start}
.u-list li:last-child{border-bottom:0}
.u-list li.u-link{cursor:pointer}.u-list li.u-link:hover{background:var(--u-bg-subtle)}
.u-list .u-when{color:var(--u-ink-3);font-size:var(--u-fs-sm);white-space:nowrap}
.u-list .u-ic{width:16px;height:16px;margin-top:2px;color:var(--blue);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.u-ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 一覧（Airtable の考え方: よく見る列だけ・残りは右の詳細） */
.u-tools{display:flex;flex-direction:column;gap:10px;margin:0 0 12px}
.u-tools-1,.u-tools-2{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.u-find{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--u-line-strong);border-radius:var(--u-r);flex:0 1 380px;min-width:240px;color:var(--u-ink-3);background:#fff}
.u-find input{border:0;outline:0;flex:1;min-width:0;font:inherit;font-size:var(--u-fs);color:var(--ink);background:transparent}
.u-find:focus-within{border-color:var(--u-ink-2)}
.u-chips{display:flex;gap:4px;flex-wrap:wrap}
.u-chip{height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:var(--u-fs);color:var(--u-ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.u-chip:hover{border-color:var(--u-line-strong);color:var(--ink)}
.u-chip.u-on{background:var(--ink);border-color:var(--ink);color:#fff}
.u-chip .u-cc{font-size:var(--u-fs-sm);color:var(--u-ink-3);font-variant-numeric:tabular-nums}
.u-chip.u-on .u-cc{color:#c9c9cf}
.u-dd{position:relative}
.u-dd>button{height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px solid transparent;border-radius:var(--u-r);font-size:var(--u-fs);color:var(--u-ink-2);cursor:pointer;background:transparent;white-space:nowrap}
.u-dd>button:hover,.u-dd.u-open>button{background:var(--u-bg-hover);color:var(--ink)}
.u-dd>button b{font-weight:600;color:var(--ink)}
.u-dd>button.u-set{border-color:var(--u-line-strong);background:#fff}
.u-menu{position:absolute;top:34px;left:0;z-index:30;min-width:220px;max-height:min(70vh,560px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--u-r-lg);box-shadow:0 10px 30px rgba(24,24,27,.12);padding:6px;display:none}
.u-dd.u-open .u-menu{display:block}
.u-dd.u-right .u-menu{left:auto;right:0}
.u-menu .u-mi{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;background:none;border-radius:var(--u-r-sm);font-size:var(--u-fs);color:var(--ink);cursor:pointer;text-align:left;white-space:nowrap}
.u-menu .u-mi:hover{background:var(--u-bg-hover)}
.u-menu .u-mi.u-on{font-weight:600}
.u-menu .u-mi .u-mc{margin-left:auto;color:var(--u-ink-3);font-size:var(--u-fs-sm);padding-left:12px}
.u-menu .u-mh{font-size:var(--u-fs-xs);color:var(--u-ink-3);padding:8px 8px 2px;font-weight:600}
.u-menu .u-ml{border-top:1px solid var(--line);margin:6px 0}
.u-menu label.u-mi input{margin:0;width:15px;height:15px}
.u-count{margin-left:auto;font-size:var(--u-fs-sm);color:var(--u-ink-3)}
.u-gridwrap{border:1px solid var(--line);border-radius:var(--u-r-lg);overflow:auto;max-height:calc(100vh - 230px);background:#fff}
table.u-grid{border-collapse:separate;border-spacing:0;width:100%;border:0!important;border-radius:0!important;font-size:var(--u-fs)}
table.u-grid thead th{position:sticky;top:0;z-index:3;background:var(--u-bg-subtle);color:var(--u-ink-2);font-weight:550;font-size:var(--u-fs-sm);text-align:left;padding:0 8px;height:38px;border-bottom:1px solid var(--line);white-space:nowrap}
table.u-grid td{padding:8px 8px;height:58px;border-bottom:1px solid var(--line);white-space:nowrap;background:#fff;font-size:var(--u-fs)}
table.u-grid tbody tr{cursor:pointer}
table.u-grid tbody tr:hover td{background:var(--u-bg-subtle)}
table.u-grid tbody tr.u-on td{background:var(--u-bg-selected)}
table.u-grid tbody tr.u-ret td{background:#fff6f4}
table.u-grid .c-no{position:sticky;left:0;z-index:2;font-variant-numeric:tabular-nums;color:var(--u-ink-2);font-weight:550;padding-left:14px}
table.u-grid thead .c-no{z-index:4}
table.u-grid th.num,table.u-grid td.num{text-align:right;font-variant-numeric:tabular-nums}
table.u-grid td.u-ttl{max-width:260px;overflow:hidden;text-overflow:ellipsis}
table.u-grid td.u-wide{white-space:normal;min-width:280px;max-width:460px}
table.u-grid td.u-ed{cursor:text}
table.u-grid td.u-ed:hover{box-shadow:inset 0 0 0 1px var(--u-line-strong)}
table.u-grid .edin{width:100%;min-width:90px;padding:4px 6px;border:1px solid var(--accent);border-radius:var(--u-r-sm);font-size:var(--u-fs)}
.u-itm{display:flex;align-items:center;gap:10px;min-width:0}
.u-thumb{width:38px;height:38px;border-radius:var(--u-r-sm);background:var(--u-bg-subtle);border:1px solid var(--line);flex:none;object-fit:contain}
.u-itm-t{font-weight:550;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-break:break-all}
.u-itm-s{font-size:var(--u-fs-sm);color:var(--u-ink-3);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-neg{color:var(--red)}
.u-est{color:var(--u-ink-3)}
.u-days{color:var(--u-ink-3);font-size:var(--u-fs-sm);margin-left:5px}
.u-days.u-warn{color:var(--u-orange);font-weight:600}
.u-cks{display:inline-flex;gap:3px}
.u-ck{width:24px;height:24px;border-radius:5px;border:1.5px solid var(--u-line-strong);display:grid;place-items:center;background:#fff;cursor:pointer;color:#fff;padding:0;font-size:var(--u-fs-sm);line-height:1}
.u-ck:hover{border-color:var(--u-ink-2);background:var(--u-bg-selected)}
.u-ck.u-on{background:var(--ink);border-color:var(--ink);cursor:default}
.u-ckh{display:inline-flex;gap:3px}.u-ckh span{width:24px;text-align:center}
.u-pager{display:flex;gap:10px;align-items:center;justify-content:center;padding:14px}
.u-cards{display:none}

/* 右から出る詳細（Airtable の Record Detail） */
.u-scrim{position:fixed;inset:0;background:rgba(24,24,27,.10);z-index:80;opacity:0;pointer-events:none;transition:opacity .15s}
.u-scrim.u-show{opacity:1;pointer-events:auto}
.u-drawer{position:fixed;top:0;right:0;bottom:0;width:540px;max-width:100vw;background:#fff;border-left:1px solid var(--line);box-shadow:-12px 0 32px rgba(24,24,27,.10);transform:translateX(102%);transition:transform .18s ease-out;z-index:81;display:flex;flex-direction:column;font-size:var(--u-fs);color:var(--ink)}
.u-drawer.u-show{transform:none}
.u-dw-h{padding:14px 20px 10px;border-bottom:1px solid var(--line)}
.u-dw-top{display:flex;align-items:center;gap:6px;color:var(--u-ink-3);font-size:var(--u-fs-sm)}
.u-dw-top .u-x{margin-left:auto;border:0;background:none;cursor:pointer;color:var(--u-ink-2);padding:4px;border-radius:var(--u-r)}
.u-dw-top .u-x:hover{background:var(--u-bg-hover)}
.u-dw-top .u-nav{border:1px solid var(--line);background:#fff;border-radius:var(--u-r-sm);cursor:pointer;color:var(--u-ink-2);padding:1px 6px;font-size:var(--u-fs-sm)}
.u-dw-title{font-size:calc(var(--u-fs-lg) + 1px);font-weight:650;margin:8px 0 8px;line-height:1.4}
.u-dw-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.u-flow{display:flex;margin:14px 0 2px}
.u-flow span{flex:1;font-size:var(--u-fs-sm);color:var(--u-ink-3);padding-top:7px;border-top:3px solid var(--line);margin-right:3px;white-space:nowrap}
.u-flow span.u-fdone{border-color:var(--ink);color:var(--u-ink-2)}
.u-flow span.u-fnow{border-color:#dfb236;color:var(--ink);font-weight:600}
.u-tabs{display:flex;gap:18px;padding:0 20px;border-bottom:1px solid var(--line);overflow-x:auto}
.u-tab{padding:10px 0 9px;border:0;border-bottom:2px solid transparent;background:none;color:var(--u-ink-3);cursor:pointer;font-size:var(--u-fs);white-space:nowrap}
.u-tab.u-on{color:var(--ink);border-color:var(--ink);font-weight:600}
.u-dw-b{flex:1;overflow-y:auto;padding:16px 20px 24px}
.u-fg{margin:0 0 20px}
.u-fg h3{font-size:var(--u-fs-sm);color:var(--u-ink-3);font-weight:600;margin:0 0 6px}
.u-fields{display:grid;grid-template-columns:118px minmax(0,1fr);border-top:1px solid var(--line)}
.u-fields>div{padding:8px 0;border-bottom:1px solid var(--line);min-width:0;word-break:break-word}
.u-fields>div:nth-child(odd){color:var(--u-ink-3)}
.u-note{background:var(--u-yellow-bg);color:#5e4500;border-radius:var(--u-r);padding:8px 10px}
.u-events{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.u-events li{display:grid;grid-template-columns:86px 70px 1fr auto;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);align-items:center}
.u-dw-f{border-top:1px solid var(--line);padding:12px 20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.u-dw-f .u-fhint{font-size:var(--u-fs-sm);color:var(--u-ink-3);width:100%}

.u-toast{position:fixed;right:20px;bottom:20px;background:var(--ink);color:#fff;border-radius:var(--u-r-lg);padding:10px 14px;font-size:var(--u-fs);z-index:120;transform:translateY(12px);opacity:0;transition:all .18s;pointer-events:none;max-width:min(460px,calc(100vw - 40px))}
.u-toast.u-show{transform:none;opacity:1}
.u-toast.u-terr{background:var(--red)}

@media (max-width:820px){
  .u-head .u-act{margin-left:0;width:100%}
  .u-kpi{flex-basis:150px;padding:14px}
  .u-kpi:first-child{flex-basis:100%}
  .u-kpi .u-kv{font-size:var(--u-fs-xl)}
  .u-attn-row .u-ad{white-space:normal}
  .u-two{grid-template-columns:1fr}
  .u-find{flex:1 1 100%;min-width:0}
  .u-count{width:100%;margin:0}
  .u-gridwrap{display:none}
  .u-cards{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--u-r-lg);overflow:hidden}
  .u-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;background:#fff}
  .u-card:last-child{border-bottom:0}
  .u-card .u-thumb{width:44px;height:44px;grid-row:1/4}
  .u-card .u-card-t{font-weight:600;font-size:var(--u-fs-md);line-height:1.4}
  .u-card .u-card-m{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:var(--u-fs-sm);color:var(--u-ink-3)}
  .u-card .u-card-k{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--u-fs-sm);color:var(--u-ink-2)}
  .u-card .u-card-k b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
  .u-drawer{width:100vw}
  .u-fields{grid-template-columns:96px minmax(0,1fr)}
}
/* 文字の大きさ（標準／大きめ）: 左メニューの下・この端末だけ */
.u-fsw{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--u-fs-sm);color:var(--u-ink-2)}
.u-fsw button{font:inherit;padding:2px 10px;border:1px solid var(--u-line-strong);background:#fff;color:var(--ink);border-radius:999px;cursor:pointer}
.u-fsw button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- 新しい「商品管理」（段階のタブ＋一覧・ui/flow2.js）---------- */
.u-stages{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.u-stage{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--u-r-lg);background:#fff;font:inherit;font-size:var(--u-fs);color:var(--u-ink-2);cursor:pointer;white-space:nowrap}
.u-stage b{font-size:var(--u-fs-md);color:var(--ink);font-variant-numeric:tabular-nums}
.u-stage:hover{border-color:var(--u-line-strong);background:var(--u-bg-subtle)}
.u-stage.u-zero{background:var(--u-bg-subtle);color:var(--u-ink-3)}
.u-stage.u-zero b{color:var(--u-ink-3);font-weight:500}
.u-stage.u-on,.u-stage.u-on:hover{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.u-stage.u-on b{color:#fff}
.u-sdot{width:8px;height:8px;border-radius:50%;flex:none;background:#9a9ca3}
.u-sdot.u-red{background:#c8412e}.u-sdot.u-yellow{background:#dfb236}.u-sdot.u-blue{background:#5b82d6}.u-sdot.u-green{background:#3f9f6c}
.u-fhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.u-fhead h2{margin:0;font-size:var(--u-fs-lg)}
.u-fcount{color:var(--u-ink-3);font-weight:500;font-size:var(--u-fs)}
.u-fhead .u-hint{color:var(--u-ink-3);font-size:var(--u-fs-sm)}
.u-fbulk{margin-left:auto;display:flex;gap:12px;align-items:center}
.u-pickall,.u-pickl{display:inline-flex;gap:6px;align-items:center;font-size:var(--u-fs);cursor:pointer;white-space:nowrap}
.u-pickall input,.u-pickl input{width:18px;height:18px;margin:0}
.u-frow{display:grid;grid-template-columns:48px minmax(0,1fr) auto 150px;gap:0 16px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);cursor:pointer;background:#fff}
.u-frow:first-child{border-top:0}
.u-frow:hover{background:var(--u-bg-subtle)}
.u-frow:focus-visible{outline:2px solid var(--u-link);outline-offset:-2px}
.u-frow .u-thumb{width:48px;height:48px}
.u-ft{font-size:var(--u-fs-md);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all}
.u-ft b{font-variant-numeric:tabular-nums;margin-right:4px}
.u-fbadges{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:var(--u-fs-sm)}
.u-fnote{margin-top:6px;font-size:var(--u-fs-sm);background:var(--u-yellow-bg);color:#5e4500;border-radius:var(--u-r);padding:4px 8px;display:inline-block;max-width:100%}
.u-fmeta{display:flex;align-items:center;gap:14px;white-space:nowrap;font-size:var(--u-fs);color:var(--u-ink-2)}
.u-fch{min-width:64px}
.u-fdays{min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.u-late{color:var(--red);font-weight:700}
.u-fsub{color:var(--u-ink-3);font-size:var(--u-fs-sm)}
.u-fact{justify-self:end;display:flex;align-items:center}
.u-next{display:inline-flex;align-items:center;gap:2px;color:var(--u-link);font-size:var(--u-fs);font-weight:600;white-space:nowrap}
.u-next.u-dim{color:var(--u-ink-3);font-weight:400}
.u-recv{white-space:nowrap}
@media (max-width:820px){
  .u-stages{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .u-stage{flex:none}
  .u-frow{grid-template-columns:48px minmax(0,1fr);gap:4px 12px;padding:12px}
  .u-frow .u-thumb{grid-row:1/4}
  .u-fmeta{grid-column:2;flex-wrap:wrap;gap:8px}
  .u-fact{grid-column:2;justify-self:start;margin-top:4px}
  .u-fbulk{margin-left:0;width:100%}
}