/* ============================================================================
   大日香港 v2（/dainichi_hk/next/）— カタログと同一のデザイン言語v2トークン＋業務UI部品。
   規範: ダーク基調＋ガラス質＋発光1色・モーション120–300ms(transform/opacityのみ)・reduced-motion・CSP self完結。
   ★UI層のみ。既存 dhk API をそのまま呼ぶ（並行ロジック/複製なし）。
   ============================================================================ */
:root{
  --c-void:#04060d; --c-bg:#05070f; --c-bg2:#080c1a;
  --c-glass:rgba(255,255,255,.045); --c-glass2:rgba(255,255,255,.07); --c-glass-brd:rgba(255,255,255,.10); --c-line:rgba(255,255,255,.08);
  --c-ink:#eef4ff; --c-ink2:#aebbd6; --c-ink3:#68789e;
  --c-glow:#5cf0ff; --c-glow2:#2fb8ff; --c-glow-ink:#04121c; --c-glow-soft:rgba(92,240,255,.16); --c-glow-line:rgba(92,240,255,.42);
  --c-ok:#6ee7b7; --c-ng:#fb7185; --c-warn:#fcd34d;
  --f:"Hiragino Kaku Gothic ProN",-apple-system,BlinkMacSystemFont,"Segoe UI",Meiryo,system-ui,sans-serif; --f-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --e:cubic-bezier(.22,.61,.36,1); --e-out:cubic-bezier(.16,1,.3,1); --t1:.13s; --t2:.22s; --t3:.34s;
  --r:16px; --r-lg:22px; --r-pill:999px; --shadow:0 24px 60px -20px rgba(0,0,0,.7); --glow:0 0 0 1px var(--c-glow-line),0 8px 30px -6px var(--c-glow-soft);
}
:root[data-theme="light"]{
  /* v3.5.0 新デザイン言語（ライト＝白カード・明確な境界・控えめな影＝社員/管理と統一） */
  --c-void:#eef1f7; --c-bg:#eef1f7; --c-bg2:#e7ebf4;
  --c-glass:#ffffff; --c-glass2:#eef3fa; --c-glass-brd:#adbacf; --c-line:#ccd5e4;
  --c-ink:#152340; --c-ink2:#42527a; --c-ink3:#6b7a9c;
  --c-glow:#0a7cc9; --c-glow2:#1f86d6; --c-glow-ink:#fff; --c-glow-soft:rgba(31,134,214,.12); --c-glow-line:rgba(31,134,214,.42);
  --c-ok:#0e7a4e; --c-ng:#d63a54; --shadow:0 6px 22px -8px rgba(30,55,110,.22);
}
*{box-sizing:border-box;margin:0}
body{font-family:var(--f);color:var(--c-ink);background:var(--c-void);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;
  background-image:radial-gradient(120vw 55vh at 50% -8%,rgba(47,184,255,.12),transparent 55%),linear-gradient(180deg,var(--c-bg),var(--c-void) 72%)}
:root[data-theme="light"] body{background-image:radial-gradient(120vw 55vh at 50% -8%,rgba(31,134,214,.10),transparent 55%),linear-gradient(180deg,var(--c-bg),#e3ebf8 72%)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}
::selection{background:var(--c-glow-soft)}
.wrap{max-width:960px;margin:0 auto;padding:0 18px}
a{color:var(--c-glow);text-decoration:none}

/* topbar */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;
  backdrop-filter:blur(16px) saturate(1.2);background:linear-gradient(180deg,color-mix(in srgb,var(--c-void) 82%,transparent),color-mix(in srgb,var(--c-void) 40%,transparent));border-bottom:1px solid var(--c-line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .dot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;color:var(--c-glow-ink);background:linear-gradient(135deg,var(--c-glow),var(--c-glow2));box-shadow:0 0 16px -2px var(--c-glow-soft)}
.brand small{display:block;font-size:10px;color:var(--c-ink3);font-weight:500;letter-spacing:.06em}
.top .who{font-size:12px;color:var(--c-ink3)}
.seg{display:inline-flex;border:1px solid var(--c-line);border-radius:12px;overflow:hidden;background:var(--c-glass2)}
.seg button{border:none;background:transparent;color:var(--c-ink3);font:700 12px var(--f);padding:7px 11px;cursor:pointer}
.seg button.on{background:linear-gradient(135deg,var(--c-glow),var(--c-glow2));color:var(--c-glow-ink)}
.iconbtn{width:34px;height:34px;border-radius:10px;border:1px solid var(--c-line);background:var(--c-glass2);color:var(--c-ink);cursor:pointer;display:grid;place-items:center}

/* buttons/inputs */
.btn{appearance:none;border:none;cursor:pointer;font:700 14px var(--f);padding:12px 18px;border-radius:var(--r-pill);color:var(--c-glow-ink);
  background:linear-gradient(135deg,var(--c-glow),var(--c-glow2));display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 24px -8px var(--c-glow-soft);
  transition:filter var(--t1),transform .06s var(--e),box-shadow var(--t2)}
.btn:hover{filter:brightness(1.06)} .btn:active{transform:scale(.97)} .btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:var(--c-glass2);color:var(--c-ink);border:1px solid var(--c-glass-brd);box-shadow:none}
.btn.sm{padding:8px 14px;font-size:12.5px} .btn:focus-visible{outline:none;box-shadow:var(--glow)}
.field{display:block;margin-bottom:14px} .field>span{display:block;font-size:12.5px;color:var(--c-ink3);margin-bottom:6px}
.inp{width:100%;font:400 15px var(--f);color:var(--c-ink);background:var(--c-glass2);border:1px solid var(--c-glass-brd);border-radius:12px;padding:12px 14px;transition:border-color var(--t2),box-shadow var(--t2)}
.inp:focus{outline:none;border-color:var(--c-glow-line);box-shadow:var(--glow)}

/* cards / grid */
.h2{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px}
.sub{color:var(--c-ink3);font-size:13px;margin:0 0 18px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{position:relative;border-radius:var(--r);border:1px solid var(--c-glass-brd);background:var(--c-glass);padding:20px;overflow:hidden;
  transition:transform var(--t2) var(--e-out),border-color var(--t2),box-shadow var(--t2)}
.card.act{cursor:pointer} .card.act:hover{transform:translateY(-3px);border-color:var(--c-glow-line);box-shadow:var(--shadow),0 0 0 1px var(--c-glow-line)}
.card.act:active{transform:translateY(-1px) scale(.995)}
.card .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:24px;margin-bottom:12px;background:linear-gradient(135deg,rgba(47,184,255,.22),rgba(92,240,255,.12));border:1px solid var(--c-glow-line);filter:drop-shadow(0 0 10px var(--c-glow-soft))}
.card .nm{font-weight:800;font-size:16px} .card .ds{color:var(--c-ink3);font-size:12.5px;margin-top:5px;line-height:1.6}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill)}
.pill.on{background:rgba(110,231,183,.14);color:var(--c-ok)} .pill.glow{background:var(--c-glow-soft);color:var(--c-glow);border:1px solid var(--c-glow-line)}
.pill.role{background:rgba(47,184,255,.16);color:#bfe9ff} :root[data-theme="light"] .pill.role{color:#0a5a8f}

/* tasks / list */
.task{border:1px solid var(--c-glass-brd);border-radius:14px;background:var(--c-glass);padding:14px 16px;margin-bottom:10px;transition:border-color var(--t2)}
.task:hover{border-color:var(--c-glow-line)}
.task .tt{font-weight:700;font-size:14px} .task .tm{color:var(--c-ink3);font-size:12px;margin-top:4px}
/* ★第35陣B: 品質管理の報告タスクはタップで全文を開く（キーボード操作も可） */
.task.tapme{cursor:pointer} .task.tapme:focus-visible{outline:2px solid var(--c-glow);outline-offset:2px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--c-ink3);font-weight:600;font-size:11.5px;padding:9px 10px;border-bottom:1px solid var(--c-line);white-space:nowrap}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--c-line);vertical-align:top}
.tbl tr.row{cursor:pointer} .tbl tr.row:hover td{background:var(--c-glass)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tfoot td{font-weight:700;border-top:2px solid var(--c-line);border-bottom:0}
.mono{font-family:var(--f-mono)}

/* search */
.search{position:relative;margin-bottom:16px}
.search .inp{padding-right:44px;border-radius:var(--r-pill);font-size:16px}
.search svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--c-glow);width:20px;height:20px}

/* states */
.state{min-height:40vh;display:grid;place-items:center;text-align:center;padding:34px 18px}
.state .ic{font-size:38px;margin-bottom:12px;filter:drop-shadow(0 0 16px var(--c-glow-soft))}
.state h3{font-size:18px;font-weight:800;margin-bottom:8px} .state p{color:var(--c-ink2);font-size:13.5px;line-height:1.8;max-width:400px}
.skel{border-radius:14px;background:linear-gradient(100deg,var(--c-glass) 30%,var(--c-glass2) 50%,var(--c-glass) 70%);background-size:200% 100%;animation:shim 1.25s var(--e) infinite;height:64px}
@keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}
.note{border-radius:12px;padding:11px 14px;font-size:13px;border:1px solid var(--c-line);margin-bottom:12px}
.note.ok{background:rgba(110,231,183,.12);border-color:rgba(110,231,183,.35);color:var(--c-ok)}
.note.ng{background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.35);color:var(--c-ng)}

/* login */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.authcard{width:100%;max-width:420px;border-radius:var(--r-lg);border:1px solid var(--c-glass-brd);background:var(--c-glass);padding:34px 28px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.authcard .lead{color:var(--c-ink2);font-size:13px;line-height:1.7;text-align:center;margin:6px 0 20px}

/* sheet (detail slide-in) */
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(3,5,11,.62);backdrop-filter:blur(6px);opacity:0;transition:opacity var(--t3) var(--e)}
.sheet-bg.on{opacity:1}
.sheet{position:fixed;z-index:61;top:0;right:0;height:100%;width:min(520px,100%);background:linear-gradient(180deg,var(--c-bg2),var(--c-bg));border-left:1px solid var(--c-glass-brd);box-shadow:var(--shadow);transform:translateX(102%);transition:transform var(--t3) var(--e-out);overflow-y:auto}
.sheet.on{transform:translateX(0)}
.sheet .inner{padding:22px 24px 40px}
.spec .row{display:grid;grid-template-columns:38% 62%;padding:10px 2px;border-bottom:1px solid var(--c-line)}
.spec .k{color:var(--c-ink3);font-size:12.5px} .spec .v{font-size:13.5px}
.x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;background:rgba(4,6,13,.6);color:#fff;font-size:17px;display:grid;place-items:center}

/* concierge FAB */
.fab{position:fixed;z-index:50;right:20px;bottom:20px;height:54px;padding:0 20px;border-radius:var(--r-pill);border:1px solid var(--c-glow-line);
  background:linear-gradient(135deg,rgba(92,240,255,.18),rgba(47,184,255,.12));color:var(--c-ink);font:700 14px var(--f);cursor:pointer;backdrop-filter:blur(14px);display:inline-flex;align-items:center;gap:10px;box-shadow:var(--shadow);transition:transform var(--t2) var(--e-out)}
.fab:hover{transform:translateY(-2px)}
.fab .pulse{width:9px;height:9px;border-radius:50%;background:var(--c-glow);animation:pulse 2.2s var(--e) infinite}
@keyframes pulse{70%{box-shadow:0 0 0 11px transparent}100%{box-shadow:0 0 0 0 transparent}}
.fade-up{animation:fadeup var(--t3) var(--e-out) both}@keyframes fadeup{from{opacity:0;transform:translateY(10px)}}
.spark{position:fixed;z-index:80;width:6px;height:6px;border-radius:50%;background:var(--c-glow);pointer-events:none;box-shadow:0 0 8px var(--c-glow);animation:spark .7s var(--e-out) forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}

/* ============ inlineゼロ用ユーティリティ＋書込フォーム部品（CSP 純'self'・style属性排除） ============ */
.hide{display:none!important}
.center{text-align:center}
.mt2{margin-top:8px}.mt3{margin-top:12px}.mt4{margin-top:16px}.mt5{margin-top:20px}.mt6{margin-top:24px}
.mb2{margin-bottom:8px}.mb3{margin-bottom:12px}.mb4{margin-bottom:16px}
.pt22{padding-top:22px}.pb80{padding-bottom:80px}
.flex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.flexc{display:flex;flex-direction:column;gap:10px}
.mlauto{margin-left:auto}.grow{flex:1;min-width:0}
.fs11{font-size:11px}.fs12{font-size:12.5px}.fs16{font-size:16px}.wfull{width:100%}
.jc{justify-content:center}.jend{justify-content:flex-end}
.muted{color:var(--c-ink3)}.faint{color:var(--c-ink2)}
.hdr-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}

/* 書込フォーム（発注/請求 作成） */
.form-panel{border-radius:var(--r);border:1px solid var(--c-glass-brd);background:var(--c-glass);padding:20px;margin-bottom:14px}
.itbl{width:100%;border-collapse:collapse;font-size:12.5px}
.itbl th{color:var(--c-ink3);font-weight:600;font-size:11px;padding:6px 6px;text-align:left;border-bottom:1px solid var(--c-line);white-space:nowrap}
.itbl td{padding:5px 5px;border-bottom:1px solid var(--c-line);vertical-align:middle}
.itbl .inp{padding:8px 9px;font-size:12.5px;border-radius:9px}
.itbl .cell-calc{font-variant-numeric:tabular-nums;color:var(--c-glow);font-weight:700;text-align:right;white-space:nowrap}
.rowdel{width:30px;height:30px;border-radius:8px;border:1px solid var(--c-line);background:var(--c-glass2);color:var(--c-ng);cursor:pointer;font-size:14px}
.confirm-row{display:grid;grid-template-columns:36% 64%;padding:9px 2px;border-bottom:1px solid var(--c-line)}
.confirm-row .k{color:var(--c-ink3);font-size:12.5px}
.total-strip{display:flex;gap:18px;flex-wrap:wrap;padding:12px 2px;font-weight:800}
.total-strip .t{color:var(--c-glow);font-variant-numeric:tabular-nums}
.stepbar{display:flex;gap:8px;margin-bottom:16px}
.step{flex:1;height:4px;border-radius:2px;background:var(--c-line);transition:background var(--t2)}
.step.on{background:linear-gradient(90deg,var(--c-glow),var(--c-glow2))}
.big-ok{text-align:center;padding:30px 10px}
.big-ok .mark{width:76px;height:76px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size:36px;
  background:linear-gradient(135deg,rgba(92,240,255,.2),rgba(47,184,255,.12));border:1px solid var(--c-glow-line);
  box-shadow:0 0 30px -4px var(--c-glow-soft);animation:pop .4s var(--e-out)}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.hk-flag{text-align:center;font-size:34px}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.itbl .inp{min-width:70px}
.itbl td:first-child .inp,.itbl td:nth-child(2) .inp{min-width:96px}

/* Fix①: 発注 品番の照合状態（●照合済/未一致）— inlineゼロ・クラス制御 */
.o-code.matched{ box-shadow: inset 3px 0 0 var(--c-ok); }
.o-code.unmatched{ box-shadow: inset 3px 0 0 var(--c-ng); }

/* ①QC履歴：絞込行・種別/後日入力バッジ・横スクロール表（inlineゼロ・クラス制御） */
.pill.warn{ background:color-mix(in srgb,var(--c-warn) 20%,transparent); color:var(--c-warn); }
:root[data-theme="light"] .pill.warn{ color:#8a5a06; }
.pill.kind{ background:var(--c-glass2); color:var(--c-ink2); border:1px solid var(--c-glass-brd); }
.qfilter{ align-items:end; }
.qfilter .field{ margin:0; }
.qfilter .inp{ min-width:118px; }
.xscroll{ overflow-x:auto; }
/* 対象日を主・登録日時を従（配置と濃淡で一目で判別） */
.tbl td.qc-target b{ font-weight:700; } .tbl td.qc-entered{ color:var(--c-ink3); font-size:12px; white-space:nowrap; }
/* F 版数フッタ（両テーマ・控えめ） */
.hkfoot{ margin:26px auto 14px; max-width:1080px; padding:14px 16px 0; text-align:center; color:var(--c-ink3); font-size:12px; border-top:1px solid var(--c-glow-line); }