*,*::before,*::after{box-sizing:border-box}

:root{
  --br:#6d28d9;
  --br2:#8b5cf6;
  --bk:#f4f4f6;
  --dk:#e8e8ed;
  --sf:#ffffff;
  --sf2:#f0f0f4;
  --bd:#d4d4dc;
  --bd2:#b8b8c8;
  --wh:#1a1a2e;
  --g1:#1a1a2e;
  --g2:#5a5a78;
  --g3:#8888a8;
  --rd:#dc2626;--gn:#16a34a;--am:#d97706;--pu:#7c3aed;--cy:#0891b2;
  --tx:#1a1a2e;
  --ac:#6d28d9;
  --r:12px;
  --r-sm:8px;
  --r-lg:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#ffffff}
body{color:#1a1a2e;font-family:'Space Grotesk','Noto Sans JP',sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;background:#ffffff}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:#f0f0f4}::-webkit-scrollbar-thumb{background:#8888a8;border-radius:4px}

/* HEADER */
header{position:sticky;top:0;z-index:200;background:#ffffff;border-bottom:1px solid #e0e0ea;height:54px;display:flex;align-items:center;padding:0 24px;gap:28px;box-shadow:none}
.logo{font-size:16px;font-weight:900;letter-spacing:-.02em;white-space:nowrap;color:#1a1a2e;display:flex;align-items:center;gap:6px}
.logo .dot{color:#6d28d9}
.logo .beta{font-size:9px;font-weight:700;font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#1a1a2e;border:1px solid #1a1a2e;padding:2px 6px;border-radius:3px;margin-left:9px;vertical-align:middle;opacity:.9}
nav{display:flex;gap:8px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#1a1a2e}
nav a{color:#1a1a2e;text-decoration:none;transition:all .15s;cursor:pointer;padding:4px 12px;border-radius:6px}
nav a:hover,nav a.active{color:#1a1a2e;background:rgba(109,40,217,.1);text-shadow:none}

/* PAGE */
.pg{display:none;flex-direction:column;min-height:calc(100vh - 54px)}
.pg.show{display:flex}

/* CALC PAGE LAYOUT — 入力を狭く、結果を広く */
.layout{display:grid;grid-template-columns:310px 1fr;flex:1;height:calc(100vh - 54px)}
.sb{background:#ffffff;border-right:1px solid #e0e0ea;padding:16px 14px;overflow-y:auto;max-height:calc(100vh - 54px);display:flex;flex-direction:column;gap:14px}
.sb-tabs { display:flex; margin-bottom:16px; gap:6px; }
.sb-tab { flex:1; text-align:center; padding:7px 0; font-size:12px; font-weight:700; color:#5a5a78; cursor:pointer; border-radius:8px; background:transparent; transition:all .15s; user-select:none; border:none; }
.sb-tab.active { color:#1a1a2e; background:#ede9fe; }
.sb-panel { display:none; }
.sb-panel.active { display:flex; flex-direction:column; flex:1; }
#cmdInput:focus { border-color:inherit; background:#faf5ff; outline:none; box-shadow:none; }
#wCmdInput:hover,
#wCmdInput:focus {
  background: #faf5ff;
  outline: none;
  box-shadow: none;
}
.cmd-item { padding:8px 12px; font-size:12px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #f4f4f8; color:#1a1a2e; }
.cmd-item:last-child { border-bottom:none; }
.cmd-item:hover, .cmd-item.cmd-focus { background:#ede9fe; color:#1a1a2e; }
.cmd-item .cmd-sub { font-size:10px; color:#aaa; }
.cmd-cat { padding:5px 12px; font-size:10px; font-weight:700; color:#aaa; background:#f8f8fc; letter-spacing:.06em; text-transform:uppercase; }
.mn{padding:20px;overflow-y:auto;background:#ffffff;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 54px)}

/* 履歴・在庫 新UI */
.hi-tabs { background: #f4f4f8; padding: 8px 16px 0; display: flex; gap: 4px; }
.hi-tab { padding: 7px 16px; font-size: 12px; font-weight: 700; color: #aaa; cursor: pointer; border-radius: 8px 8px 0 0; background: transparent; transition: all .15s; border: none; }
.hi-tab-active { color: #1a1a2e; background: #fff; }
.hi-search-bar { padding: 12px 16px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid #f0f0f5; }
.hi-search-wrap { flex: 1; position: relative; }
.hi-search-wrap::before { content: '🔍'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; pointer-events: none; }
.hi-search-wrap input { width: 100%; background: #f8f8fc; border: 1px solid #e0e0ea; border-radius: 8px; padding: 8px 10px 8px 32px; font-size: 12px; color: #1a1a2e; outline: none; box-sizing: border-box; font-family: inherit; }
.hi-search-wrap input:focus { background: #faf5ff; outline: none; box-shadow: none; }
.hi-filter-btn { background: transparent; border: 1px solid #e0e0ea; border-radius: 8px; padding: 7px 12px; font-size: 11px; font-weight: 700; color: #5a5a78; cursor: pointer; white-space: nowrap; font-family: inherit; transition: all .15s; }
.hi-filter-btn.active { border-color: #6d28d9; color: #6d28d9; background: #faf5ff; }
.hi-chip-row { padding: 8px 16px; display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid #f0f0f5; }
.hi-chip { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; border: 1px solid #e0e0ea; color: #5a5a78; background: #fff; cursor: pointer; transition: all .15s; }
.hi-chip.on { background: #ede9fe; border-color: #6d28d9; color: #6d28d9; }
.hi-sort-row { padding: 6px 16px 4px; display: flex; align-items: center; justify-content: space-between; }
.hi-count { font-size: 11px; color: #aaa; }
.hi-sort { background: transparent; border: none; font-size: 11px; color: #5a5a78; cursor: pointer; outline: none; font-family: inherit; font-weight: 700; }
.hi-card { border: 1px solid #eee; border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: all .15s; margin-bottom: 6px; }
.hi-card:hover { border-color: #6d28d9; background: #faf5ff; }
.hi-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; }
.hi-card-client { font-size: 13px; font-weight: 700; color: #1a1a2e; }
.hi-card-date { font-size: 10px; color: #aaa; }
.hi-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.hi-tag { font-size: 10px; padding: 2px 7px; border-radius: 20px; background: #f0f0f8; color: #5a5a78; font-weight: 600; }
.hi-tag-kind { background: #ede9fe; color: #6d28d9; }
.hi-tag-weight { background: #ecfdf5; color: #059669; }
.inv-card-new { border: 1px solid #eee; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; margin-bottom: 6px; cursor: pointer; transition: all .15s; }
.inv-card-new:hover { border-color: #16a34a; background: #f0fdf4; }
.inv-card-len { font-size: 18px; font-weight: 800; color: #1a1a2e; min-width: 80px; }
.inv-card-len span { font-size: 11px; font-weight: 400; color: #aaa; }
.inv-card-detail { flex: 1; }
.inv-card-spec { font-size: 12px; color: #1a1a2e; font-weight: 700; }
.inv-card-meta { font-size: 10px; color: #aaa; margin-top: 2px; }
.inv-len { font-size: 18px; font-weight: 800; color: #1a1a2e; min-width: 80px; }
.inv-len span { font-size: 11px; font-weight: 400; color: #aaa; }
.inv-detail { flex: 1; }
.inv-spec-label { font-size: 12px; color: #1a1a2e; font-weight: 700; }
.inv-meta { font-size: 10px; color: #aaa; margin-top: 2px; }
.inv-qty-badge { font-size: 12px; font-weight: 700; color: #16a34a; background: #dcfce7; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
.hi-filter-panel { display: none; padding: 12px 16px; background: #f8f8fc; border-bottom: 1px solid #eee; border-top: 1px solid #eee; }
.hi-filter-panel.open { display: block; }

/* SIDEBAR COMPONENTS */
.shd{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#2a2a3e;margin-bottom:8px}
.field{margin-bottom:7px}.field:last-child{margin-bottom:0}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5a5a78;margin-bottom:3px}
input[type=number],input[type=text],input[type=date],select{width:100%;background:#fff;border:1px solid #d4d4dc;color:#2a2a3e;font-family:'Space Grotesk',monospace;font-size:12px;font-weight:500;padding:6px 9px;outline:none;transition:border-color .15s;appearance:none;border-radius:var(--r-sm)}

select option{background:#fff}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tbtn{border:1px solid #d4d4dc;background:#ffffff;color:#1a1a2e;font-family:'Space Grotesk','Noto Sans JP',sans-serif;font-size:9px;font-weight:700;letter-spacing:.03em;padding:4px 2px;cursor:pointer;transition:all .15s;text-align:center;border-radius:var(--r-sm);display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1}
.tbtn:hover{background:rgba(109,40,217,.07);color:#1a1a2e;border-color:#d4d4dc}
.tbtn.on{background:rgba(109,40,217,.1);color:#1a1a2e;border-color:#c4b5fd}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}

/* STOCK ROWS */
.stk-row{display:flex;align-items:center;gap:5px;border:1px solid #e0e0ea;background:#fafafa;padding:4px 8px;border-radius:var(--r-sm)}
.stk-row.off{opacity:.35}
#stkList{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:2px}
input[type=checkbox]{width:13px;height:13px;accent-color:#d8ccff;cursor:pointer;flex-shrink:0}
.stk-nm{font-size:12px;font-weight:600;color:#1a1a2e;flex:1;font-family:'Space Grotesk',monospace}
.stk-nm small{font-size:10px;font-weight:600;letter-spacing:.04em;color:#5a5a78;margin-left:1px}
.stk-mx{width:48px;background:#f4f4f6;border:1px solid #d4d4dc;color:#1a1a2e;font-family:monospace;font-size:10px;padding:2px 3px;outline:none;text-align:center;-moz-appearance:textfield;appearance:textfield;border-radius:6px}
.stk-mx::-webkit-inner-spin-button,.stk-mx::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stk-mx:focus{background:#faf5ff;outline:none;box-shadow:none}
.stk-note{font-size:11px;color:#5a5a78;margin-top:4px;line-height:1.5}

/* ── 残材セクション ── */
.remnant-area{border:1px solid #d4d4dc;background:#fff;padding:0;border-radius:var(--r-sm);overflow:hidden}
.remnant-head{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-bottom:1px solid #d4d4dc;background:#f0f0f4}
.remnant-head span{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cy)}
.rem-row{display:flex;align-items:center;gap:6px;padding:5px 10px;border-bottom:1px solid #e8e8ed}
.rem-row:last-child{border-bottom:none}
.rem-row input[type=number]{font-size:11px;padding:4px 6px}
.rem-del{background:transparent;border:none;color:#8888a8;cursor:pointer;font-size:14px;line-height:1;padding:0 3px;flex-shrink:0;transition:color .15s}
.rem-del:hover{color:var(--rd)}
.rem-label{font-size:11px;color:#5a5a78;flex-shrink:0;white-space:nowrap}
.add-btn{background:transparent;border:1px dashed var(--cy);color:var(--cy);font-size:11px;font-weight:700;padding:6px;cursor:pointer;width:100%;text-align:center;transition:all .15s;border-radius:var(--r-sm);font-family:inherit}
.add-btn:hover{border-color:#0891b2;color:#0891b2}

/* PARTS TABLE */
.pt-wrap{border:1px solid #d4d4dc;background:#fff;border-radius:var(--r-sm);overflow:hidden}
.pt-hd{display:grid;grid-template-columns:18px 1fr 54px 56px;border-bottom:1px solid #d4d4dc;padding:4px 0;background:#fff}
.pt-hd span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5a5a78;padding:0 5px}
.pt-row{display:grid;grid-template-columns:18px 1fr 54px 56px;border-bottom:1px solid #e8e8ed}
/* 工区カラム有効時 */
.pt-wrap.kuiku-on .pt-hd{grid-template-columns:18px 1fr 54px 64px 56px}
.pt-wrap.kuiku-on .pt-row{grid-template-columns:18px 1fr 54px 64px 56px}
#ptHdKuiku{text-align:center}
.pt-row input[id^="pz"]{text-align:center;font-size:11px}
.pt-row:last-child{border-bottom:none}
/* Ctrl+A 全選択状態 */
.pt-row.pt-selected{background:rgba(109,40,217,.07)}
.pt-row.pt-selected input{background:rgba(109,40,217,.06)}
.pt-n{font-size:11px;color:#8888a8;display:flex;align-items:center;justify-content:center;font-family:monospace}
/* 重量ページ オプションチップ */
.w-opt-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 2px;
}
.w-opt-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1.5px solid #e0e0ea;
  border-radius: 20px;
  background: #f8f8fc;
  color: #8888a8;
  cursor: pointer;
  transition: .15s;
  font-family: inherit;
  letter-spacing: .02em;
}
.w-opt-chip:hover {
  border-color: #a78bfa;
  color: #1a1a2e;
  background: #faf5ff;
}
.w-opt-chip--on {
  border-color: #a78bfa;
  background: #ede9fe;
  color: #1a1a2e;
}
.w-opt-chip--on:hover {
  border-color: #8b5cf6;
  background: #e0d9fb;
  color: #1a1a2e;
}

/* 計算ボタン Ctrl+Enter ヒント（キーキャップ風） */
.run-hint{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  margin-left:8px;
  padding:0 7px;
  border:1px solid rgba(90,90,120,.18);
  border-radius:6px;
  background:rgba(255,255,255,.55);
  color:#8888a8;
  font-size:9px;
  font-weight:700;
  font-family:'Space Grotesk','Noto Sans JP',sans-serif;
  letter-spacing:.04em;
  text-transform:none;
  white-space:nowrap;
}
.pt-row input{background:transparent;border:1px solid transparent;color:#2a2a3e;font-family:'Space Grotesk',monospace;font-size:12px;padding:5px 6px;outline:none;transition:.12s;width:100%}
.pt-row input:hover,
.pt-row input:focus{background:#faf5ff;outline:none;box-shadow:none}
.pt-row 
.pt-kg{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:11px;font-weight:500;color:#5a5a78;font-family:monospace}
.tot{display:flex;justify-content:space-between;align-items:center;border:1px solid #d4d4dc;padding:8px 11px;background:#fff;margin-top:2px;border-radius:0 0 var(--r-sm) var(--r-sm)}
.tot-l{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5a5a78}
.tot-v{font-size:13px;font-weight:500;color:#2a2a3e;font-family:monospace}

/* 部材ヘッダー行 */
.parts-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.parts-btns{display:flex;gap:5px;align-items:center}
.sm-btn{background:transparent;border:1px solid #d4d4dc;color:#5a5a78;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;cursor:pointer;transition:all .15s;border-radius:var(--r-sm)}
.sm-btn:hover{border-color:#2a2a3e;color:#2a2a3e}
.sm-btn.del:hover{border-color:var(--rd);color:var(--rd)}
.sm-btn.add:hover{border-color:var(--gn);color:var(--gn)}
.sm-btn.paste:hover{border-color:var(--cy);color:var(--cy)}

/* ペースト入力エリア */
.paste-area{border:1px solid var(--br);background:rgba(167,139,250,.06);padding:8px;margin-bottom:6px;display:none;border-radius:var(--r-sm)}
.paste-area.show{display:block}
.paste-area textarea{width:100%;background:#f8f8fc;border:1px solid #d4d4dc;color:#2a2a3e;font-family:monospace;font-size:11px;padding:6px;resize:vertical;min-height:80px;outline:none;line-height:1.5}
.paste-area textarea:focus{background:#faf5ff;outline:none;box-shadow:none}
.paste-area textarea::placeholder{color:#aaaacc}
.paste-hint{font-size:11px;color:#5a5a78;margin-bottom:5px;line-height:1.6}
.paste-hint strong{color:var(--cy)}
.paste-btns{display:flex;gap:5px;margin-top:6px}
.paste-exec{background:var(--cy);color:var(--bk);border:none;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.05em;padding:5px 12px;cursor:pointer;transition:background .15s;border-radius:var(--r-sm)}
.paste-exec:hover{background:var(--wh)}
.paste-cancel{background:transparent;border:1px solid #d4d4dc;color:#5a5a78;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;padding:5px 10px;cursor:pointer;transition:all .15s}
.paste-cancel:hover{border-color:var(--rd);color:var(--rd)}

/* RUN BUTTON */
.run{width:100%;background:#ffffff;color:#1a1a2e;border:1.5px solid #d4d4dc;font-family:'Space Grotesk','Noto Sans JP',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:all .2s;border-radius:var(--r);box-shadow:none}
.run:hover{background:rgba(109,40,217,.08);border-color:#c4b5fd;color:#1a1a2e;box-shadow:none}
.run:disabled{background:var(--g3);cursor:not-allowed;color:var(--dk)}
.arr{font-size:16px;transition:transform .15s}
.run:hover .arr{transform:translateX(4px)}

/* RESULT AREA */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:14px;color:#8888a8;border:1px solid #d4d4dc;background:#fff;border-radius:var(--r)}
.ph p{font-size:14px;color:#2a2a3e}
.ph small{font-size:11px;color:#5a5a78}
.res-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid #ebebf0}
.res-ttl{font-size:17px;font-weight:700;font-style:italic;text-transform:uppercase;color:#2a2a3e}
.tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border:1px solid;border-radius:20px}
.tag-best{background:var(--br);color:#fff;border-color:var(--br);box-shadow:0 0 10px rgba(167,139,250,.25)}
.tag-chg{border-color:rgba(196,181,253,.6);color:var(--pu)}
.tag-yield{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border-color:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.3)}
.yield-card{border:2px solid #22c55e !important;box-shadow:0 4px 24px rgba(34,197,94,.2) !important}
.yield-card .cc-hd{display:flex;flex-direction:row;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #e8e8ed;background:#f8f8fb;flex-wrap:nowrap;overflow:hidden}
.clist{display:flex;flex-direction:column;gap:9px}
.cc{border:1px solid #d4d4dc;background:#fff;margin-bottom:0;border-radius:var(--r);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.cc.r1{border:1.5px solid #d4d4dc;box-shadow:0 2px 8px rgba(0,0,0,.06)}.cc.r2{border:1px solid var(--bd2)}.cc.r3{border:1px solid #d4d4dc}
.cc-hd{display:flex;flex-direction:row;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #e8e8ed;background:#f8f8fb;flex-wrap:nowrap}
.rbdg{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}
.r1 .rbdg{background:var(--br);color:#fff}.r2 .rbdg{background:#f8f8fc;color:#2a2a3e;border:2px solid var(--g2)}.r3 .rbdg{background:#f8f8fc;color:#2a2a3e;border:2px solid var(--bd2)}
.cc-desc{font-size:14px;font-weight:700;flex:1;min-width:0;color:#1a1a2e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r1 .cc-desc{font-size:14px;font-weight:700;flex:1;min-width:0;color:#1a1a2e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.r2 .cc-desc{font-size:14px;font-weight:700;flex:1;min-width:0;color:#1a1a2e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.r3 .cc-desc{font-size:14px;font-weight:700;flex:1;min-width:0;color:#1a1a2e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-stats{display:flex;gap:10px;flex-wrap:nowrap;align-items:center;flex-shrink:0}
.cs .cl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2a2a3e}
.cs .cv{font-size:13px;font-weight:600;font-family:monospace}
.r1 .cs .cv{color:#2a2a3e}.r2 .cs .cv{color:#2a2a3e}.r3 .cs .cv{color:#2a2a3e}
.cc-pat{padding:12px 16px;background:#f0f0f6}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:7px}
.pc{background:#fff;border:1px solid #d4d4dc;border-radius:var(--r-sm);overflow:hidden}
.pc.best{border-color:#d4d4dc}
.pc-hd{padding:6px 10px;background:#f8f8fc;border-bottom:1px solid #ebebf0;font-size:11px;font-weight:600;display:flex;justify-content:space-between;color:#1a1a2e}
.pc.best .pc-hd{padding:6px 10px;background:#f8f8fc;border-bottom:1px solid #ebebf0;font-size:11px;font-weight:600;display:flex;justify-content:space-between;color:#1a1a2e}
.pc-row{padding:6px 12px;border-bottom:1px solid #ebebf0;font-family:monospace;font-size:12px;display:flex;gap:6px;align-items:center;color:#2a2a3e}
.pc-row:last-child{border-bottom:none}
.px{background:var(--bd2);color:#2a2a3e;padding:2px 6px;font-size:11px;font-weight:700;flex-shrink:0;border-radius:4px}
.pp{flex:1;color:#2a2a3e}.plr{font-size:10px;flex-shrink:0;color:var(--gn) !important}
.ll{color:var(--gn)}.lm{color:var(--gn)}.lh{color:var(--gn)}

/* ── 切断図ビジュアルバー ── */
.cut-diagram{padding:12px 14px;background:#f0f0f6;border-top:1px solid #ebebf0}
.cut-diagram-title{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#2a2a3e;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.cut-diagram-title::after{content:'';flex:1;height:1px;background:var(--bd)}
.bar-vis{margin-bottom:8px}
.bar-vis-label{font-size:11px;color:#2a2a3e;margin-bottom:4px;font-family:monospace;display:flex;align-items:center;gap:6px}
.bar-vis-label .bar-count{background:var(--bd2);color:#2a2a3e;padding:1px 6px;font-size:10px;font-weight:700}
.bar-track{position:relative;height:28px;background:#f8f8fc;border:1px solid #d4d4dc;overflow:hidden;display:flex;border-radius:0}
.bar-piece{height:100%;display:flex;align-items:center;justify-content:center;font-family:monospace;font-size:11px;font-weight:600;position:relative;transition:opacity .15s}
.bar-piece:hover{opacity:.8}
.bar-piece-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;pointer-events:none}
.bar-kerf{width:2px;height:100%;background:#f4f4f6;flex-shrink:0}
.bar-loss{height:100%;background:rgba(255,68,68,.1);border-left:1px solid rgba(255,68,68,.4);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--gn);font-family:monospace}
.bar-rem{height:100%;background:rgba(34,68,136,.12);border-left:3px solid #224488;display:flex;align-items:center;justify-content:center;font-size:10px;color:#224488;font-family:monospace;font-weight:700}
.bar-scale{display:none}


/* アコーディオン切断図トグルボタン */
.diag-toggle{width:100%;background:transparent;border:none;border-top:1px solid #ebebf0;color:#5a5a78;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;cursor:pointer;text-align:left;transition:color .15s,background .15s}
.diag-toggle:hover{background:#f8f8fc;color:#2a2a3e}
.diag-toggle.open{color:var(--br)}
/* 凡例 */
.diag-legend{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;padding:0 2px}
.diag-legend-item{height:18px;padding:0 8px;font-size:11px;font-weight:700;display:flex;align-items:center;min-width:0;width:auto}

/* 残材バッジ */
.rem-badge{font-size:10px;background:rgba(0,212,255,.15);border:1px solid var(--cy);color:var(--cy);padding:1px 5px;font-weight:700}

/* 切断図：部材ハッチングパターン（画面＋白黒印刷兼用） */
/* 画面: 背景色+ハッチング overlay, 印刷: ハッチングのみで識別 */
.p0{background:#252530;color:#ffffff}
.p1{background:#252530;color:#ffffff}
.p2{background:#252530;color:#ffffff}
.p3{background:#252530;color:#ffffff}
.p4{background:#252530;color:#ffffff}
.p5{background:#252530;color:#ffffff}
.p6{background:#252530;color:#ffffff}
.p7{background:#252530;color:#ffffff}
.p8{background:#252530;color:#ffffff}
.p9{background:#252530;color:#ffffff}
/* ハッチングはSVGデータURIで各クラスに付与（白黒印刷で識別可能） */
.ph0{background-image:none}
.ph1{background-image:none}
.ph2{background-image:none}
.ph3{background-image:none}
.ph4{background-image:none}
.ph5{background-image:none}
.ph6{background-image:none}
.ph7{background-image:none}
.ph8{background-image:none}
.ph9{background-image:none}
/* 印刷用ハッチング（黒地なしでパターンのみ） */
@media print{
  /* 印刷時に隠すもの */
  header,nav,.hi-tabs,.pg:not(.print-target),.an:not(.print-target),
  .print-btn,.diag-toggle,.run,.sb,#hip,
  button:not(.print-allow){display:none !important}

  /* ページ設定 */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-sizing:border-box}
  body{background:#fff !important;color:#000 !important;font-size:11px;margin:0;padding:0}
  @page{margin:12mm 10mm;size:A4}

  /* 計算ページ */
  #cp.show{display:block !important;position:static !important}
  .mn{padding:0 !important;overflow:visible !important}

  /* 印刷対象のみ表示 */
  .an{display:none !important}
  .an.print-target{display:block !important}
  .cc{display:none !important}
  .cc.print-target{display:block !important;border:1px solid #ccc !important;border-radius:6px !important;margin-bottom:12px;page-break-inside:avoid}

  /* 作業指示書ヘッダー */
  .print-job-header{display:block !important;margin-bottom:12px}

  /* 切断図 */
  [id^="diag_"]{display:block !important}
  .cut-diagram{page-break-inside:avoid}

  /* 切断図バー色 */
  .p0{background:#e8e8e8 !important;color:#000 !important;border:1px solid #999 !important}
  .p1{background:#d0d8f0 !important;color:#000 !important;border:1px solid #88a !important}
  .p2{background:#d0f0d8 !important;color:#000 !important;border:1px solid #8a8 !important}
  .p3{background:#f0d8d0 !important;color:#000 !important;border:1px solid #a88 !important}
  .p4{background:#f0ecd0 !important;color:#000 !important;border:1px solid #aa8 !important}
  .p5{background:#ddd0f0 !important;color:#000 !important;border:1px solid #99a !important}
  .p6{background:#d0f0f0 !important;color:#000 !important;border:1px solid #8aa !important}
  .p7{background:#f0d0f0 !important;color:#000 !important;border:1px solid #a8a !important}
  .p8{background:#e8e8e8 !important;color:#000 !important;border:1px solid #888 !important}
  .p9{background:#f0f0d0 !important;color:#000 !important;border:1px solid #aa9 !important}
  .ph0,.ph1,.ph2,.ph3,.ph4,.ph5,.ph6,.ph7,.ph8,.ph9{background-image:none}
}

/* CHARGE CARD */
.chg-note{font-size:11px;color:#2a2a3e;margin-bottom:12px;line-height:1.7}
.chg-note strong{color:var(--br)}

/* SPINNER */
.sp{width:13px;height:13px;border:2px solid rgba(0,0,0,.3);border-top-color:var(--bk);border-radius:50%;animation:rot .5s linear infinite;display:inline-block;vertical-align:middle}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes fi{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.an{animation:fi .2s ease both}.d1{animation-delay:.05s}.d2{animation-delay:.1s}
.calc-loading-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(16,10,6,.54);
  backdrop-filter:blur(6px);
  z-index:1200;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.calc-loading-overlay.show{
  opacity:1;
  pointer-events:auto;
}
.calc-loading-card{
  min-width:240px;
  padding:24px 26px 22px;
  border-radius:20px;
  background:linear-gradient(180deg,#fff8ef 0%,#ffe6c5 100%);
  border:1px solid rgba(104,54,18,.18);
  box-shadow:0 22px 50px rgba(43,18,4,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.calc-loading-pizza{
  font-size:54px;
  line-height:1;
  animation:pizza-spin 1.8s linear infinite;
  filter:drop-shadow(0 6px 14px rgba(120,56,7,.24));
  transform-origin:center;
}
.calc-loading-spinner{
  width:24px;
  height:24px;
  border-radius:50%;
  border:3px solid rgba(120,56,7,.2);
  border-top-color:#b45309;
  animation:rot .7s linear infinite;
}
.calc-loading-title{
  font-size:16px;
  font-weight:800;
  color:#2b1608;
  letter-spacing:.04em;
}
.calc-loading-sub{
  font-size:12px;
  color:#8a5a2b;
  text-align:center;
  line-height:1.6;
}

/* ── HISTORY PAGE ── */
.h-hero{position:relative;height:400px;display:flex;align-items:flex-end;padding:52px 64px;overflow:hidden;background:#f4f4f6}
.h-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(167,139,250,.08) 0%,transparent 60%)}
.h-hero::after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(-55deg,transparent,transparent 60px,rgba(255,255,255,.015) 60px,rgba(255,255,255,.015) 61px)}
.h-yr{position:absolute;top:40px;right:60px;font-size:140px;font-weight:700;font-style:italic;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(167,139,250,.25);z-index:1;user-select:none}
.h-hc{position:relative;z-index:2}
.h-lb{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--br);margin-bottom:14px}
.h-t{font-size:46px;font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;color:#2a2a3e;line-height:1.05;margin-bottom:12px}
.h-t span{color:var(--br)}
.h-sub{font-size:13px;color:#2a2a3e;max-width:500px;line-height:1.7}
.h-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #ebebf0;background:#fff}
.h-st{padding:24px 32px;border-right:1px solid #d4d4dc}
.h-st:last-child{border-right:none}
.h-st-n{font-size:38px;font-weight:700;font-style:italic;color:var(--br);font-family:'Space Grotesk',sans-serif;margin-bottom:5px;line-height:1}
.h-st-n sup{font-size:16px;vertical-align:super}
.h-st-l{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5a5a78}
.h-tl{max-width:1000px;margin:0 auto;padding:64px}
.h-sl{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--br);display:flex;align-items:center;gap:12px;margin-bottom:44px}
.h-sl::after{content:'';flex:1;height:1px;background:var(--bd)}
.tl{position:relative;padding-left:44px}
.tl::before{content:'';position:absolute;left:12px;top:0;bottom:0;width:1px;background:var(--bd)}
.tl-i{position:relative;margin-bottom:50px;opacity:0;animation:tlIn .5s ease forwards}
.tl-i:nth-child(1){animation-delay:.1s}.tl-i:nth-child(2){animation-delay:.2s}.tl-i:nth-child(3){animation-delay:.3s}.tl-i:nth-child(4){animation-delay:.4s}.tl-i:nth-child(5){animation-delay:.5s}.tl-i:nth-child(6){animation-delay:.6s}
@keyframes tlIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.tl-dot{position:absolute;left:-36px;top:5px;width:13px;height:13px;border:2px solid var(--br);background:#f4f4f6;transform:rotate(45deg)}
.tl-dot.big{background:var(--br);width:16px;height:16px;left:-38px;top:3px}
.tl-yr{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--br);margin-bottom:7px}
.tl-yr em{color:#5a5a78;font-style:normal;font-weight:400;margin-left:7px;letter-spacing:.06em}
.tl-tt{font-size:20px;font-weight:700;font-style:italic;text-transform:uppercase;color:#2a2a3e;margin-bottom:8px;line-height:1.2}
.tl-tt span{color:var(--br)}
.tl-tx{font-size:12px;color:#2a2a3e;line-height:1.85;max-width:620px}
.tl-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.tl-tag{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border:1px solid #d4d4dc;color:#8888a8;transition:all .15s}
.tl-tag:hover,.tl-tag.hi{border-color:var(--br);color:var(--br)}
.h-biz{background:#fff;border-top:1px solid #ebebf0;padding:56px 64px}
.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bd);border:1px solid #d4d4dc;margin-top:36px}
.biz-c{background:#f0f0f6;padding:24px;transition:background .2s}
.biz-c:hover{background:#f0f0f4}
.biz-ic{font-size:20px;margin-bottom:12px;filter:grayscale(1);transition:filter .2s}
.biz-c:hover .biz-ic{filter:none}
.biz-t{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2a2a3e;margin-bottom:6px}
.biz-d{font-size:11px;color:#5a5a78;line-height:1.6}
.h-ci{padding:44px 64px 64px;border-top:1px solid #ebebf0;display:grid;grid-template-columns:1fr 1fr;gap:32px}
.ci-lb{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--br);margin-bottom:8px}
.ci-v{font-size:15px;font-weight:600;color:#2a2a3e}
.ci-sm{font-size:12px;color:#2a2a3e;line-height:1.8;margin-top:3px}
footer{border-top:1px solid #ebebf0;padding:12px 28px;display:flex;justify-content:space-between;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8888a8;background:#f4f4f6}

/* ライトモード */

/* 印刷ボタン */
.print-btn{flex-shrink:0;
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:#1a1a2e;
  border:1.5px solid #d4d4dc;
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  padding:9px 18px;
  cursor:pointer;border-radius:50px;
  box-shadow:none;
  transition:all .18s;
  white-space:nowrap;
  margin:14px auto 16px;
}
.print-btn:hover{background:#f4f4f6;border-color:#aaa;transform:translateY(-1px)}
.print-btn:active{transform:translateY(0)}
.print-btn .pbb{
  position:absolute;top:-7px;right:-7px;
  background:#22d3ee;color:#000;
  font-size:9px;font-weight:900;
  padding:2px 7px;border-radius:20px;
  letter-spacing:.04em;white-space:nowrap;
  pointer-events:none;
}
@media print {
  #printJobHeader { display:block !important; }
  #regRemBtn { display:none !important; }
  /* 用紙設定：A4横 */
  @page{size:A4 landscape;margin:10mm 12mm}
  /* 基本リセット */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-sizing:border-box}
  html,body{width:277mm;max-width:277mm;overflow:hidden;background:#fff !important;color:#000 !important;background-image:none !important;font-size:10px;margin:0;padding:0}
  /* 印刷不要な要素を全非表示 */
  header,footer,.sb,.ph,.paste-area,.parts-btns,
  .diag-toggle,.run,.an:not(.print-target),
  #hp,#ip,#histPreviewModal,#cutDoneModal,#histModal,
  .print-btn,.fab-wrap,#regRemBtn{display:none !important}
  /* 選択カード以外を隠す */
  .cc:not(.print-target){display:none !important}
  .res-hd:not(.print-target-hd){display:none !important}
  .chg-note{display:none !important}
  /* レイアウトをフル幅に */
  .layout{display:block !important;width:100% !important}
  .mn{padding:0 !important;overflow:visible !important;width:100% !important}
  .pg{display:block !important;width:100% !important}
  .an.print-target{display:block !important;animation:none !important;width:100% !important}
  /* 切断図を強制展開 */
  .print-target [id^="diag_"]{display:block !important}
  /* 印刷対象カード（cc統一） */
  .cc.print-target{
    width:100% !important;max-width:100% !important;
    border:1px solid #999 !important;background:#fff !important;
    break-inside:avoid;margin:0 !important;overflow:hidden
  }
  .cc.print-target + .cc.print-target { margin-top: 6mm !important; }
  .cc-hd{display:flex;flex-direction:row;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #e8e8ed;background:#f8f8fb;flex-wrap:nowrap}
  .cc-stats{display:flex;gap:10px;flex-wrap:wrap;align-items:center;flex-shrink:0}
  .cs .cl{font-size:10px !important}.cs .cv{font-size:11px !important}
  /* 詳細エリア（取り合い・数値グリッド）は印刷不要 */
  .cc-pat{display:none !important}
  .pat-detail{display:none !important}
  /* 取り合いパターンカード：タイトル行は印刷不要、母材情報のみ表示 */
  .pat-title-row{display:none !important}
  .pat-print-stats{display:block !important}
  /* 端材リストは印刷で表示 */
  .cc.print-target .rem-section{display:block !important}
  /* 数値グリッド（画面用）は印刷不要 */
  .pat-num-grid{display:none !important}
  /* 切断図 */
  .cut-diagram{background:#f8f8f8 !important;border-top:1px solid #ddd !important;width:100% !important;overflow:hidden !important;padding:8px 10px !important}
  .bar-vis{width:100% !important}
  .bar-vis{overflow:hidden !important}
  .bar-track{background:#fff !important;border-color:#999 !important;width:100% !important;height:24px !important;border-radius:0 !important}
  .bar-loss{background:#fff !important;border-left:1px solid #aaa !important}
  .bar-piece{filter:none !important;opacity:1;background:#f0f0f0 !important;border-right:1px solid #aaa !important}
  .cut-diagram-title{color:#000 !important}
  .cut-diagram-title::after{background:#999 !important}
  .bar-vis-label{color:#000 !important}
  .bar-piece-inner{color:#000 !important;font-size:8px !important;overflow:hidden}
  .bar-scale-text,.bar-vis-label{color:#444 !important;font-size:7px !important}
  .bar-scale-line{background:#999 !important}
  .bar-scale{height:12px !important}
  /* 取り合いカード */
  .pc{background:#fff !important;border:1px solid #ddd !important}
  .pc-hd{padding:6px 10px;background:#f8f8fc;border-bottom:1px solid #ebebf0;font-size:11px;font-weight:600;display:flex;justify-content:space-between;color:#1a1a2e}
  .pc-row{color:#000 !important;font-size:10px !important;padding:3px 8px !important}
  .px{background:#ccc !important;color:#000 !important}
  .ll,.lm,.lh,.cs .cv,.cc-desc{font-size:14px;font-weight:700;flex:1;min-width:0;color:var(--br);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rbdg{background:#333 !important;color:#fff !important;width:20px !important;height:20px !important;font-size:10px !important}
  .cc-desc{font-size:14px;font-weight:700;flex:1;min-width:0;color:var(--br);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .print-btn{display:none !important}
  .diag-toggle{display:none !important}
  .tag{border-color:#666 !important;color:#666 !important;background:transparent !important;font-size:10px !important}
  .r1 .rbdg,.r2 .rbdg,.r3 .rbdg{background:#333 !important;color:#fff !important}
  .bar-kerf{background:#999 !important}
  /* 凡例 */
  .cut-diagram > div:last-child{display:flex !important;flex-wrap:wrap !important;gap:3px !important}
  /* 作業指示書ヘッダー */
  .print-job-header{display:block !important;margin-bottom:10px;padding:8px 12px;border:1px solid #999;background:#f8f8f8;page-break-inside:avoid}
  .print-job-header table{width:100%;border-collapse:collapse;font-size:10px}
  .print-job-header table th{background:#e8e8e8;padding:3px 8px;border:1px solid #ccc;text-align:left;font-weight:700;font-size:9px;letter-spacing:.05em}
  .print-job-header table td{padding:3px 8px;border:1px solid #ccc;font-family:monospace}
  .print-job-header .job-title{font-size:13px;font-weight:700;margin-bottom:6px;letter-spacing:.04em;color:#000}
  .print-job-header .job-meta{font-size:9px;color:#555;margin-bottom:6px;display:flex;gap:16px}
  .rem-strip { flex-wrap: wrap !important; gap: 4px !important; }
}
/* ── Stitchスタイル追加 ── */
.h-stats{border-radius:var(--r);overflow:hidden;margin:0 24px}
.h-stat{border-right:1px solid #d4d4dc}
.biz-grid{border-radius:var(--r);overflow:hidden}
.biz-c{transition:background .2s,transform .15s}
.biz-c:hover{transform:translateY(-2px)}
.h-ci{border-radius:0 0 var(--r-lg) var(--r-lg)}
.tl-dot{border-radius:2px}
.tl-dot.big{border-radius:3px}
.tl-tag{border-radius:20px}

/* カード内の pc-hd 丸角 */
.pc-hd{padding:6px 10px;background:#f8f8fc;border-bottom:1px solid #ebebf0;font-size:11px;font-weight:600;display:flex;justify-content:space-between;color:#1a1a2e}
.pc:first-child .pc-hd{padding:6px 10px;background:#f8f8fc;border-bottom:1px solid #ebebf0;font-size:11px;font-weight:600;display:flex;justify-content:space-between;color:#1a1a2e}

/* 結果セクションヘッダー */
.res-hd{border-bottom:1px solid #ebebf0}

/* cc-hd のグラデーション */
.r1 .cc-hd{display:flex;flex-direction:row;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #e8e8ed;background:#f8f8fb;flex-wrap:nowrap}

/* diag-toggle 角丸 */
.diag-toggle{border-radius:0 0 var(--r-sm) var(--r-sm)}

/* bar-track 角丸なし */
.bar-track{border-radius:0 !important}

/* scrollbar 角丸 */
::-webkit-scrollbar-thumb{border-radius:4px}

/* input 角丸 */
input[type=number],select{border-radius:var(--r-sm) !important}
.stk-mx{border-radius:var(--r-sm) !important}
.paste-area textarea{border-radius:var(--r-sm)}

/* ライトモード */

/* フッター */
footer{border-radius:0;background:rgba(15,14,23,.8)}

/* ── ライトモード（白背景・高コントラスト） ── */
/* 結果エリア */
/* 切断図 */
/* スクロールバー */
/* history */


  .hist-item{padding:10px 12px;border-radius:8px;cursor:pointer;border:1px solid #d4d4dc;margin-bottom:6px;transition:background .15s}
  .hist-item:hover{background:#f0f0f4}


/* 履歴・在庫統合タブ */
#hip{overflow:hidden;display:none;flex-direction:column;background:#fff}
#hip.show{display:flex}

/* ── 履歴・在庫共通レイアウト ── */
.hi-panel{display:none;flex:1;width:100%;overflow-y:auto;box-sizing:border-box;min-height:0;background:#fff}
.hi-page-inner{width:100%;box-sizing:border-box;padding:16px 20px}
.hi-page-title { font-size:16px; font-weight:800; color:#1a1a2e; margin-bottom:16px; letter-spacing:.02em; }

/* フィルターグリッド */
.hi-filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;width:100%}
.hi-field { display:flex; flex-direction:column; gap:4px; flex:1; min-width:140px; }
.hi-field-btn { flex:0 0 auto; min-width:auto; justify-content:flex-end; }
.hi-label { font-size:10px; font-weight:700; color:#8888a8; letter-spacing:.06em; text-transform:uppercase; }
.hi-input { background:#fff; border:1px solid #e0e0ea; color:#1a1a2e; border-radius:8px; padding:7px 10px; font-size:12px; font-family:inherit; width:100%; box-sizing:border-box; outline:none; transition:border-color .15s; }
.hi-clear-btn { background:none; border:1px solid #e0e0ea; color:#5a5a78; border-radius:8px; padding:7px 16px; font-size:12px; cursor:pointer; font-family:inherit; white-space:nowrap; }
.hi-clear-btn:hover { border-color:#aaa; color:#1a1a2e; }

/* 手動追加ボタン */
.hi-add-btn { width:100%; background:transparent; border:1.5px dashed #d4d4dc; color:#5a5a78; border-radius:10px; padding:10px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; margin-bottom:10px; letter-spacing:.04em; transition:all .15s; }
.hi-add-btn:hover { background:#f4f4f6; }

/* 追加フォーム */
.hi-add-form-inner { background:#fff; border:1px solid #e0e0ea; border-radius:10px; padding:14px 16px; }
.hi-add-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:10px; }
.hi-add-row:last-child { margin-bottom:0; }
.hi-submit-btn { background:#fff; color:#1a1a2e; border:1.5px solid #d4d4dc; border-radius:8px; padding:8px 20px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.hi-submit-btn:hover { background:#f4f4f6; }

/* 履歴リスト */
.hist-card { background:#fff; border:1px solid #e8e8ed; border-radius:10px; margin-bottom:10px; overflow:hidden; }
.hist-card-header { padding:8px 14px; background:#fff; display:flex; align-items:center; gap:8px; border-bottom:1px solid #ebebf0; }
.hist-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #f0f0f6; cursor:pointer; transition:background .12s; }
.hist-row:last-child { border-bottom:none; }
.hist-row:hover { background:#f8f8f8; }
.hist-row-main { flex:1; min-width:0; }
.hist-client { font-size:14px; font-weight:700; color:#1a1a2e; }
.hist-name { font-size:12px; color:#5a5a78; margin-left:8px; }
.hist-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:3px; }
.hist-date { font-size:11px; color:#1a1a2e; font-weight:600; }
.hist-spec-badge { font-size:10px; font-weight:700; color:#1a1a2e; background:#fff; border:1px solid #d4d4dc; padding:1px 8px; border-radius:20px; }
.hist-desc { font-size:10px; color:#888; }
.hist-rem { font-size:10px; color:#5a5a78; }
.hist-del-btn { flex-shrink:0; background:none; border:1px solid #e8e8ed; color:#bbb; border-radius:6px; padding:3px 10px; cursor:pointer; font-size:10px; font-family:inherit; margin-left:8px; }
.hist-del-btn:hover { border-color:#f87171; color:#f87171; }

/* 在庫リスト */
.inv-card { background:#fff; border:1px solid #e8e8ed; border-radius:10px; margin-bottom:10px; overflow:hidden; }
.inv-card-header { padding:8px 14px; background:#fff; display:flex; align-items:center; gap:8px; border-bottom:1px solid #ebebf0; }
.inv-spec-label { font-size:12px; font-weight:700; color:#1a1a2e; }
.inv-count-badge { font-size:10px; color:#888; background:#fff; border:1px solid #e0e0ea; padding:1px 8px; border-radius:20px; }
.inv-col-header { display:flex; gap:10px; align-items:center; padding:4px 14px; font-size:10px; color:#aaa; font-weight:700; letter-spacing:.06em; border-bottom:1px solid #f0f0f6; }
.inv-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #f0f0f6; transition:background .12s; }
.inv-row:last-child { border-bottom:none; }
.inv-row:hover { background:#f8f8f8; }
.inv-len { font-size:16px; font-weight:700; color:#1a1a2e; font-variant-numeric:tabular-nums; min-width:100px; }
.inv-len-unit { font-size:10px; color:#aaa; margin-left:2px; }
.inv-qty { font-size:11px; color:#5a5a78; background:#f0f0f6; border:1px solid #e0e0ea; border-radius:4px; padding:1px 7px; }
.inv-note { flex:1; font-size:11px; color:#888; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-note-cell{
  width:100%;
  min-width:0;
}
.inv-note-display,
.inv-note-editor{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.inv-note-text{
  min-width:0;
  font-size:11px;
  color:#666;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.inv-note-badge,
.inv-note-save{
  flex:0 0 auto;
  height:24px;
  padding:0 9px;
  border:1px solid #d9d9e6;
  border-radius:999px;
  background:#fff;
  color:#4b5563;
  font-size:11px;
  cursor:pointer;
}
.inv-note-badge:hover,
.inv-note-save:hover{
  background:#f8f8fb;
}
.inv-note-input{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  height:34px;
  padding:0 10px;
  border:1px solid #d9d9e6;
  border-radius:8px;
  background:#fff;
  color:#2d2d42;
  font-size:12px;
  outline:none;
}
.inv-note-input:focus{
  background:#faf5ff;
  outline:none;
  box-shadow:none;
}
.inv-date { font-size:10px; color:#aaa; white-space:nowrap; }
.inv-del-btn { opacity:1; pointer-events:auto; transition:opacity .15s; background:#fff; border:1px solid rgba(248,113,113,.3); color:#f87171; border-radius:6px; padding:3px 7px; cursor:pointer; font-size:11px; }
.inv-row:hover .inv-del-btn { opacity:1; }
.inv-len{
  display:flex;
  align-items:center;
  gap:8px;
}
.inv-len-stack{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
}
.rem-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.rem-pill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:2px 8px;
  font-size:11px;
  color:#2d2d42;
  background:#fff;
  border:1px solid #e1e1ea;
  border-radius:999px;
}
.rem-pill-empty{
  color:#8888a8;
}

/* ══════════════════════════════════════════════
   🛒 カートバッジ・ボタン
══════════════════════════════════════════════ */
.cart-badge {
  display:inline-flex;align-items:center;gap:4px;
  background:#fff;color:#1a1a2e;border:1.5px solid #d4d4dc;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:4px 12px;border-radius:20px;cursor:pointer;
  border:1.5px solid #d4d4dc;font-family:inherit;transition:all .15s;
}
.cart-badge:hover { background:#f4f4f6; }
.cart-badge.empty { background:#f4f4f6;color:#aaa;border-color:#e0e0ea;cursor:default; }

/* カードのボタングループ */
.cc-btns { display:flex;gap:6px;align-items:center;flex-shrink:0; }

.cc-btn-add {
  background:transparent;border:1.5px solid #16a34a;color:#16a34a;
  border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;
}
.cc-btn-add:hover { background:rgba(22,163,74,.1); }
.cc-btn-add.added {
  background:#16a34a;border-color:#16a34a;color:#fff;
}

.cc-btn-print {
  background:#fff;color:#1a1a2e;border:1.5px solid #d4d4dc;
  border-radius:8px;padding:5px 12px;font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;
}
.cc-btn-print:hover { background:#f4f4f6;border-color:#aaa; }

/* カートモーダル */
#cartModal {
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.6);z-index:9100;overflow-y:auto;padding:20px 16px;
}
.cart-modal-inner {
  max-width:760px;margin:0 auto;background:#fff;
  border-radius:12px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.cart-modal-hd {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid #e8e8ed;background:#f8f8fb;
}
.cart-item {
  padding:12px 20px;border-bottom:1px solid #f0f0f6;
  display:flex;align-items:flex-start;gap:12px;
}
.cart-item:last-child { border-bottom:none; }
.cart-item-del {
  background:none;border:1px solid #e8e8ed;color:#bbb;
  border-radius:6px;padding:3px 8px;cursor:pointer;font-size:11px;
  flex-shrink:0;font-family:inherit;
}
.cart-item-del:hover { border-color:#f87171;color:#f87171; }

/* ══════════════════════════════════════════════
   切断バー（印刷プレビュー共通）
══════════════════════════════════════════════ */
.bar-block{margin-bottom:6px}
.bar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.bar-pat{font-size:9px;font-weight:700;color:#222;margin-bottom:3px}
.bar-track{display:flex;height:24px;border:1.5px solid #555;border-radius:3px;overflow:hidden;background:#fff}
.b-blade{width:1.5px;background:#555;flex-shrink:0}
.b-end{flex-shrink:0;background:repeating-linear-gradient(-45deg,#aaa,#aaa 1.5px,#fff 1.5px,#fff 5px)}
.b-piece{display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#000;overflow:hidden;background:#d8d8d8;border-left:1px solid #555}
.b-piece:first-of-type{border-left:none}
.b-rem{background:repeating-linear-gradient(-45deg,#888,#888 1.5px,#ddd 1.5px,#ddd 5px);display:flex;align-items:center;justify-content:center;font-size:7px;color:#000;font-weight:700}
.b-loss{background:repeating-linear-gradient(-45deg,#ccc,#ccc 1px,#fff 1px,#fff 4px);display:flex;align-items:center;justify-content:center;font-size:7px;color:#888}
/* セクション印刷レイアウト */
.sec{border:1px solid #999;border-radius:6px;overflow:hidden;margin-bottom:8px}
.sec-hd{background:#e8e8e8;padding:5px 10px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #999}
.sec-body{display:grid;grid-template-columns:160px 1fr}
.sec-left{padding:7px 10px;border-right:1px solid #ccc;font-size:10px}
.sec-right{padding:7px 10px}
.cut-tbl{width:100%;border-collapse:collapse;font-size:10px}
.cut-tbl th{padding:2px 4px;border-bottom:1.5px solid #000;font-weight:700;font-size:9px;text-align:left;background:#f0f0f0}
.cut-tbl td{padding:2px 4px;border-bottom:1px solid #e8e8e8}
.cut-tbl td.num{text-align:center;font-weight:700}
.cnt-badge{background:#000;color:#fff;font-size:11px;font-weight:900;padding:2px 12px;border-radius:12px;letter-spacing:.04em;border:2px solid #000}
.ph-full{display:grid;grid-template-columns:1fr auto;gap:8px;padding-bottom:8px;border-bottom:2px solid #000;margin-bottom:12px;align-items:start}
.ph-mini{display:grid;grid-template-columns:1fr auto;gap:8px;padding:4px 8px;background:#f0f0f0;border-left:3px solid #000;margin-bottom:10px;align-items:center;border-radius:0 4px 4px 0}
.r-tag{font-size:9px;border:1px solid #bbb;padding:1px 5px;border-radius:3px;display:inline-block;margin:1px}
.print-footer{display:flex;justify-content:space-between;font-size:9px;color:#888;margin-top:8px;padding-top:6px;border-top:1px solid #ddd}
.badge{background:#000;color:white;font-size:9px;font-weight:700;padding:1px 7px;border-radius:3px;flex-shrink:0}

/* 規格パネル */
.spec-item{
  display:block;width:100%;text-align:left;
  padding:5px 10px;font-size:11px;
  background:#fff;border:none;border-bottom:1px solid #f0f0f6;
  color:#1a1a2e;cursor:pointer;font-family:inherit;
}
.spec-item:hover{background:rgba(109,40,217,.07);color:#1a1a2e}
.spec-item.on{background:rgba(109,40,217,.1);color:#1a1a2e;font-weight:700}
.spec-item:last-child{border-bottom:none}
#specSelected{transition:background .12s}
#specSelected:hover{background:#f4f4f6 !important}
/* 種類ボタン縦並び */


input:focus,select:focus,textarea:focus{outline:none !important;background:#faf5ff !important;box-shadow:none !important}
input:hover,select:hover,textarea:hover{outline:none;background:#faf5ff;box-shadow:none}

/* ナビ・カートのfocusも薄紫背景 */
.nav-btn:focus,.cart-badge:focus,.tbtn:focus,.cc-btn-add:focus{outline:none;background:#faf5ff}

/* 2026 refresh */
:root{
  --br:#6b46ff;
  --br-soft:rgba(107,70,255,.1);
  --br-soft-strong:rgba(107,70,255,.14);
  --ink:#111111;
  --ink-soft:#4b5563;
  --line:#e5e7eb;
}
body{
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(107,70,255,.05), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
}
header{
  height:60px;
  padding:0 24px;
  gap:18px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
}
header nav{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.hdr-right{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  position:relative;
  flex-shrink:0;
}
.logo{
  gap:10px;
  display:flex;
  align-items:center;
}
.logo{
  background:transparent;
}
.logo-image{
  display:block;
  height:40px;
  width:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
  filter:brightness(1.06);
}
.logo .beta{
  margin-left:0;
  border-color:#111;
  color:#111;
}
.header-cart-btn{
  min-height:36px;
  padding:0 14px;
  border-radius:12px;
}
.header-contact-link{
  margin-left:4px;
}
.hdr-right > #cartBadge{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 14px;
  border-radius:12px;
  border:1.5px solid #ede9fe;
  background:#faf5ff;
  color:#374151;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
}
.hdr-right > #cartBadge:hover{
  background:#ede9fe;
}
.ham-btn{
  width:36px;
  height:36px;
  border:none;
  border-radius:12px;
  background:transparent;
  color:#6b7280;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.ham-btn:hover,
.ham-btn.open{
  background:#faf5ff;
  color:#6d28d9;
}
.ham-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:119;
}
.ham-overlay.show{
  display:block;
}
.ham-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:232px;
  background:#fff;
  border:1px solid #ede9fe;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(109,40,217,.08),0 2px 8px rgba(0,0,0,.05);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px) scale(.97);
  transform-origin:top right;
  transition:opacity .18s,transform .18s cubic-bezier(.32,.72,0,1);
  z-index:120;
}
.ham-menu.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.hm-section{
  padding:6px 0;
}
.hm-section + .hm-section{
  border-top:1px solid #f5f3ff;
}
.hm-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  background:transparent;
  border:none;
  text-align:left;
  cursor:pointer;
  transition:background .1s;
  font-family:inherit;
}
.hm-row:hover{
  background:#faf5ff;
}
.hm-row.is-disabled{
  cursor:default;
}
.hm-row.is-disabled:hover{
  background:transparent;
}
.hm-row--wip{
  opacity:.6;
}
.hm-row--wip:hover{
  opacity:.8;
}
.hm-txt{
  flex:1;
  font-size:13px;
  font-weight:600;
  color:#1f2937;
}
.hm-arr{
  font-size:14px;
  color:#c4b5fd;
}
.hm-ver,
.hm-note{
  font-size:11px;
  color:#a78bfa;
}
.calc-note{
  margin:10px 2px 12px;
  font-size:10px;
  line-height:1.6;
  color:#8a8aa4;
}
.layout{
  grid-template-columns:320px 1fr;
  height:calc(100vh - 60px);
}
.sb,.mn{
  max-height:calc(100vh - 60px);
}
.mn{
  background:#fff;
}
.cc{
  box-shadow:0 12px 34px rgba(17,17,17,.06);
}
.cc.r1,.cc.r2,.cc.r3{
  border-color:var(--line);
}
.cc-pat,
.cut-diagram,
.yield-card .cc-hd{
  background:#fff;
}
.diag-toggle,
.diag-toggle.open,
.diag-toggle:hover{
  color:var(--ink);
}
.diag-toggle:hover,
.diag-toggle.open{
  background:var(--br-soft);
}
.cart-badge:hover,
.cart-bulk-print:hover,
.cc-btn-print:hover,
.print-btn:hover{
  background:var(--br-soft) !important;
  border-color:#d4d4dc !important;
}
.cart-bulk-print{
  background:#fff;
  color:#111;
  border:1.5px solid #d4d4dc;
  border-radius:8px;
  padding:6px 18px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
}
#invDropCont{
  margin-bottom:0 !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  background:linear-gradient(180deg, rgba(107,70,255,.06), rgba(107,70,255,.02)) !important;
}
.remnant-area{
  border-color:var(--line);
}
.remnant-head{
  background:#fff;
}
.remnant-head span{
  color:var(--ink);
}
.bar-track{
  background:#f8f8fc !important;
}
.bar-vis.remnant-source{
  border:1px dashed rgba(107,70,255,.35);
  border-radius:10px;
  padding:8px 8px 6px;
  background:rgba(107,70,255,.035);
}
.bar-vis-label .source-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(107,70,255,.1);
  border:1px solid rgba(107,70,255,.2);
  color:#5b3df5;
  font-size:10px;
  font-weight:700;
}
.bar-cutline{
  width:1px;
  align-self:stretch;
  background:rgba(255,255,255,.95);
  box-shadow:1px 0 0 rgba(17,17,17,.18);
  flex-shrink:0;
}
.preview-action-btn{
  background:#fff !important;
  color:#1a1a2e !important;
  border:1.5px solid #d4d4dc !important;
  border-radius:8px !important;
  padding:7px 18px !important;
  font-size:13px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  font-family:inherit !important;
  transition:background .15s,border-color .15s,color .15s !important;
}
.preview-action-btn:hover,
.preview-action-btn:active{
  background:var(--br-soft) !important;
}
.tbtn.on,
.tbtn:hover,
.spec-item.on,
.spec-item:hover,
.paste-area,
input:focus,select:focus,textarea:focus{
  box-shadow:none !important;
}
input:focus,select:focus,textarea:focus{
  background:#faf5ff !important;
  outline:none !important;
}
.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:14px 0 4px;
}
.pager:empty{
  display:none;
}
.pager button{
  border:1px solid var(--line);
  background:#fff;
  color:#111;
  border-radius:8px;
  padding:7px 12px;
  font-size:12px;
  cursor:pointer;
  transition:all .15s;
}
.pager button:hover:not(:disabled){
  background:var(--br-soft);
  border-color:#c4b5fd;
}
.pager button:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.pager-info{
  font-size:12px;
  color:var(--ink-soft);
  min-width:92px;
  text-align:center;
}
.inv-card-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
.inv-col-header,
.inv-row{
  display:grid;
  grid-template-columns:minmax(150px,1.2fr) minmax(110px,.7fr) minmax(160px,1fr) minmax(180px,1.2fr) minmax(96px,.7fr) 56px;
  align-items:center;
  gap:10px;
}
.inv-col-header{
  padding:6px 14px;
  background:#fafafa;
}
.inv-row{
  padding:10px 14px;
}
.inv-len{
  min-width:0;
}
.inv-company,
.inv-note{
  font-size:11px;
  color:#666;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.inv-del-btn{
  opacity:1;
  position:relative;
  z-index:3;
  justify-self:end;
  white-space:nowrap;
  pointer-events:auto;
}
.inv-action{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  position:relative;
  z-index:3;
  min-width:64px;
}

.cart-purchase-section{
  margin-top:12px;
  padding:14px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fafafa;
}

.cart-purchase-title{
  font-size:13px;
  font-weight:800;
  color:#111827;
  margin-bottom:10px;
}

.cart-purchase-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.cart-purchase-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid #ececf2;
  font-size:12px;
}

.cart-purchase-row:last-child{
  border-bottom:none;
}

.cart-purchase-spec{
  font-weight:700;
  color:#111827;
}

.cart-purchase-stock{
  color:#374151;
  text-align:right;
}

.cart-purchase-mail{
  margin-top:12px;
  padding:10px 14px;
  border:1px solid #111827;
  border-radius:10px;
  background:#fff;
  color:#111827;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.cart-purchase-mail:hover{
  background:#f3f4f6;
}

.cart-purchase-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.cart-purchase-empty{
  font-size:12px;
  color:#6b7280;
}
.inv-count-badge{
  justify-self:end;
}
@media (max-width: 900px){
  .logo-image{
    height:32px;
  }
  .layout{
    grid-template-columns:1fr;
    height:auto;
  }
  .sb,.mn{
    max-height:none;
  }
  .inv-col-header,
  .inv-row{
    grid-template-columns:1fr 76px;
  }
  .inv-company,
  .inv-note,
  .inv-date{
    grid-column:1 / -1;
  }
}
.beta-pixel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:3px 7px 2px;
  border:1px solid #111;
  border-radius:2px;
  font-family:'Space Grotesk',monospace;
  font-size:8px !important;
  font-weight:900;
  letter-spacing:.22em;
  line-height:1;
  text-transform:uppercase;
  box-shadow:2px 2px 0 rgba(17,17,17,.12);
}
.remnant-inventory-picker{
  display:flex;
  gap:6px;
}
.rem-add-btn{
  min-width:28px;
  height:28px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.rem-add-btn:hover,
.rem-add-btn:active{
  background:var(--br-soft);
}
.remnant-head{
  gap:10px;
}
.remnant-head span{
  flex:1;
}
.rem-row{
  display:grid;
  grid-template-columns:minmax(88px,1.1fr) minmax(64px,.6fr) minmax(120px,1fr) auto auto;
  align-items:center;
  gap:8px;
}
.rem-row input,
.rem-row select{
  min-width:0;
}
.rem-row[data-source="inventory"]{
  grid-template-columns:minmax(92px,1fr) minmax(72px,.65fr) minmax(160px,1.15fr) auto;
  background:#fcfcfd;
}
.rem-label-group{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rem-label-title{
  font-size:10px;
  font-weight:700;
  color:var(--ink);
}
.rem-label-sub{
  font-size:10px;
  color:#7b7b90;
}
.rem-meta{
  font-size:10px;
  color:#7b7b90;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rem-add-inline{
  width:28px;
  height:28px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}
.rem-add-inline:hover,
.rem-add-inline:active{
  background:var(--br-soft);
}
.rem-row .rem-del{
  width:28px;
  height:28px;
  border:1px solid transparent;
  border-radius:8px;
}
.rem-row .rem-del:hover,
.rem-row .rem-del:active{
  background:#fff1f1;
  border-color:#f3c8c8;
  color:#c24141;
}
#hiPanelH input,
#hiPanelH select,
#hiPanelI input,
#hiPanelI select,
#invSelect{
  background:#fff !important;
  border:1px solid #d4d4dc !important;
  color:#2a2a3e !important;
  border-radius:var(--r-sm) !important;
  padding:7px 10px !important;
  font-size:12px !important;
  font-family:'Space Grotesk',monospace !important;
  font-weight:500 !important;
  box-sizing:border-box;
}
.cart-danger-btn{
  transition:background .15s,border-color .15s,color .15s !important;
}
.cart-danger-btn:hover,
.cart-danger-btn:active{
  background:#fff1f1 !important;
  border-color:#f3b7b7 !important;
  color:#c24141 !important;
}
.paste-area{
  border-color:#d4d4dc !important;
  background:#fff !important;
}
.paste-area textarea:focus{
  background:#faf5ff;
  outline:none;
  box-shadow:none;
}
.spec-item:hover,
.spec-item.on{
  background:#f4f4f6 !important;
  color:#1a1a2e !important;
}
.remnant-area{
  display:flex;
  flex-direction:column;
  gap:0;
}
.remnant-head{
  padding:10px 12px;
}
#invDropCont{
  background:#fff !important;
  border:1px solid #d4d4dc !important;
  border-radius:8px !important;
}
#invBadge{
  color:#5a5a78 !important;
  background:#fff !important;
  border:1px solid #d4d4dc !important;
}
.remnant-picker-shell{
  margin-bottom:8px;
  padding:8px;
  background:#fff;
  border:1px solid #d4d4dc;
  border-radius:8px;
}
.remnant-picker-top{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
}
.remnant-badge{
  font-size:10px;
  font-weight:700;
  color:#0f766e;
  background:#ecfeff;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #67e8f9;
}
#invUseBtn{
  font-size:11px;
  padding:5px 14px;
  background:#fff;
  color:#16a34a;
  border:1.5px solid #16a34a;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  white-space:nowrap;
  font-family:inherit;
  box-shadow:0 3px 0 #15803d;
  transition:transform .12s,box-shadow .12s,background .15s;
}
#invUseBtn:hover{
  background:#f0fdf4;
}
#invUseBtn:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 #15803d;
}
.rem-row{
  padding:8px 10px;
}
.rem-row[data-source="inventory"]{
  background:#fff;
}
.rem-row[data-source="inventory"] .rem-qty{
  width:100%;
  min-width:0;
  text-align:center;
  font-weight:700;
}
.rem-row[data-source="inventory"] .rem-label-title{
  font-size:16px;
  font-weight:800;
  line-height:1.1;
}
.rem-row[data-source="inventory"] .rem-label-sub{
  font-size:10px;
  font-weight:700;
  color:#6b7280;
}
.rem-row-empty{
  display:block !important;
  padding:12px 10px;
}
.rem-row-empty .rem-meta{
  color:#8888a8;
  font-weight:500;
}
.rem-row[data-source="inventory"]{
  display:grid;
  grid-template-columns:minmax(92px,1fr) minmax(112px,128px) 34px;
  gap:10px;
  align-items:center;
}
.rem-label-group{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.rem-qty-group{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.rem-qty-label{
  font-size:10px;
  font-weight:700;
  color:#5a5a78;
  white-space:nowrap;
}
.rem-del{
  width:30px;
  height:30px;
  border:1px solid #d4d4dc;
  border-radius:8px;
  background:#fff;
  color:#4b5563;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.rem-del:hover,
.rem-del:active{
  color:#b91c1c;
  border-color:#efb1b1;
  background:#fff5f5;
}
.b-piece span{
  display:block;
  width:100%;
  padding:0 4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}
.bar-pat{
  font-variant-numeric:tabular-nums;
}
.bar-vis-label,
.bar-head{
  gap:8px;
  flex-wrap:wrap;
}
@media (max-width: 900px){
  .rem-row,
  .rem-row[data-source="inventory"]{
    grid-template-columns:minmax(0,1fr) 88px 30px;
  }
  .rem-add-btn{
    min-width:32px;
  }
  .rem-row[data-source="inventory"] .rem-label-title{
    font-size:15px;
  }
  .rem-qty-label{
    font-size:9px;
  }
}
.contact-page{
  padding:24px 20px 40px;
  max-width:960px;
  margin:0 auto;
  box-sizing:border-box;
}
#cop{
  background:#fff;
}
#cop input:hover,
#cop input:focus,
#cop select:hover,
#cop select:focus,
#cop textarea:hover,
#cop textarea:focus{
  background:#f3efff !important;
  outline:none !important;
  box-shadow:none !important;
}
#contactSubject{
  color:#1a1a2e !important;
}
#contactSubject option{
  background:#fff;
  color:#1a1a2e;
}
#contactSubject option:checked{
  background:#f3efff;
  color:#1a1a2e;
}
#contactSubmitBtn:hover,
#contactSubmitBtn:focus{
  background:#e9e2ff !important;
  outline:none !important;
  box-shadow:none !important;
}
#contactSubmitBtn:active{
  background:#ded4ff !important;
}
.contact-card{
  background:#fff;
  border:1px solid #e0e0ea;
  border-radius:18px;
  padding:24px;
  box-shadow:0 16px 36px rgba(17,17,24,.06);
}
.contact-title{
  font-size:24px;
  line-height:1.2;
  font-weight:800;
  color:#1a1a2e;
  margin-bottom:10px;
}
.contact-lead{
  margin:0 0 18px;
  color:#5a5a78;
  font-size:14px;
  line-height:1.7;
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.contact-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.contact-field-wide{
  grid-column:1 / -1;
}
.contact-field label{
  font-size:12px;
  font-weight:700;
  color:#4a4a68;
}
.contact-pen-label{
  font-family:'Space Grotesk','Noto Sans JP',sans-serif;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  color:#1a1a2e !important;
}
.contact-field input,
.contact-field select,
.contact-field textarea{
  width:100%;
  background:#fff;
  border:1px solid #d4d4dc;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  color:#1a1a2e;
  box-sizing:border-box;
  outline:none;
  font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover{border-color:#a89cd8}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{border-color:#7c5ccc;box-shadow:0 0 0 3px rgba(124,92,204,.12)}
.contact-field textarea{
  min-height:180px;
  resize:vertical;
  line-height:1.6;
}
.contact-actions{
  display:flex;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
.contact-destination{
  margin-top:12px;
  font-size:12px;
  color:#6d6d88;
}
@media (max-width: 720px){
  .contact-grid{
    grid-template-columns:1fr;
  }
}

.deadline-split{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  background:#fff;
  border:1px solid #d4d4dc;
  color:#2a2a3e;
  border-radius:var(--r-sm);
  padding:4px 30px 4px 9px;
  box-sizing:border-box;
  min-height:26px;
  font-family:'Space Grotesk',monospace;
  font-size:12px;
  font-weight:500;
}
#jobWorker{
  height:26px;
  min-height:26px;
  padding-top:4px;
  padding-bottom:4px;
  box-sizing:border-box;
  line-height:1.2;
}
.deadline-sep{
  font-size:12px;
  font-weight:500;
  color:#8888a8;
  flex:0 0 auto;
}
.deadline-year-input,
.deadline-part-input{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  text-align:center;
  font-family:'Space Grotesk',monospace;
  font-size:12px;
  font-weight:500;
  color:#1a1a2e;
  border-radius:0 !important;
  line-height:1.2;
}
.deadline-year-input{
  width:42px !important;
  min-width:42px;
  flex:0 0 42px;
}
.deadline-part-input{
  width:20px !important;
  min-width:20px;
  flex:0 0 20px;
}
.deadline-year-input:focus,
.deadline-part-input:focus{
  outline:none;
}
.deadline-picker-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:0;
  color:#4b5563;
  border-radius:8px;
  width:18px;
  height:18px;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:0;
}
.deadline-picker-btn:hover{
  background:#f4f4f6;
  color:#1a1a2e;
}
.deadline-picker-btn svg{
  width:14px;
  height:14px;
  fill:currentColor;
}
.deadline-native-picker{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* ── 詳細設定タブ専用スタイル ── */

/* セクション */
.ds-section { margin-bottom: 18px; }
.ds-title {
  font-size: 10px;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1.5px solid #f0f0f5;
}

/* フィールド */
.ds-field { margin-bottom: 8px; }
.ds-field label {
  font-size: 10px;
  color: #1a1a2e;
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
  transition: .15s;
}
.ds-field input[type="number"],
.ds-field input[type="text"],
.ds-field input[type="date"],
.ds-field textarea {
  width: 100%;
  background: #f8f8fc;
  border: 1.5px solid #eee;
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 8px;
  color: #1a1a2e;
  outline: none;
  font-family: inherit;
  transition: .15s;
  box-sizing: border-box;
}
.ds-field input[type="number"]:hover,
.ds-field input[type="text"]:hover,
.ds-field input[type="date"]:hover,
.ds-field textarea:hover {
  border-color: #eee;
  background: #faf5ff;
}
.ds-field input[type="number"]:focus,
.ds-field input[type="text"]:focus,
.ds-field input[type="date"]:focus,
.ds-field textarea:focus {
  border-color: #eee;
  background: #faf5ff;
  outline: none;
  box-shadow: none;
}
.ds-field textarea {
  resize: none;
  height: 52px;
  line-height: 1.5;
}
.ds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* セクションヘッダー（全体タップ可） */
.ds-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 6px;
  transition: .15s;
  user-select: none;
}
.ds-sec-head:hover { background: #f5f0ff; }
.ds-sec-head:hover .ds-title { color: #1a1a2e; }
.ds-sec-head:hover .ds-toggle-icon { color: #bbb; }

/* ＋／－ アイコン */
.ds-toggle-icon {
  color: #bbb;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  transition: .15s;
}

/* 在庫定尺・手持ち残材 追加ボタン */
.ds-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 6px;
  background: none;
  border: 1.5px dashed #ddd;
  border-radius: 6px;
  font-size: 11px;
  color: #aaa;
  font-weight: 700;
  cursor: pointer;
  transition: .15s;
  font-family: inherit;
  margin-top: 4px;
}
.ds-add-btn:hover {
  border-color: #6d28d9;
  color: #6d28d9;
  background: #faf5ff;
}

/* トグルスイッチエリア */
.ds-toggle-area {
  background: #f8f8fc;
  border-radius: 10px;
  overflow: hidden;
}
.ds-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid #eee;
  transition: .15s;
  cursor: pointer;
}
.ds-toggle-row:last-child { border-bottom: none; }
.ds-toggle-row:hover { background: #faf5ff; }
.ds-toggle-row:hover .ds-toggle-label span { color: #1a1a2e; }
.ds-toggle-label span {
  font-size: 11px;
  font-weight: 700;
  color: #1a1a2e;
  display: block;
  transition: .15s;
}
.ds-toggle-label small {
  font-size: 9px;
  color: #bbb;
  display: block;
  margin-top: 1px;
}

/* CSS トグルスイッチ本体 */
.ds-tog { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.ds-tog input { opacity: 0; width: 0; height: 0; position: absolute; }
.ds-tog-track {
  position: absolute;
  inset: 0;
  background: #ddd;
  border-radius: 20px;
  cursor: pointer;
  transition: .2s;
}
.ds-tog input:checked + .ds-tog-track {
  background: #f3efff;
  box-shadow: inset 0 0 0 1px #d8ccff;
}
.ds-tog-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.ds-tog input:checked + .ds-tog-track::after { left: 19px; }

/* ── 準備中バッジ ── */
.wip-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #ea580c;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: .04em;
  vertical-align: middle;
  margin-left: 6px;
}

/* ── 準備中セクション（薄く・操作不可） ── */
.wip-block {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  position: relative;
}
.wip-block::after {
  content: '準備中';
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #ea580c;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

/* ── 準備中カード（データページ・重量ページ用） ── */
.wip-card {
  border: 1.5px dashed #e0e0ea;
  border-radius: 12px;
  padding: 16px 14px;
  margin-bottom: 10px;
  position: relative;
  background: #fafafa;
}
.wip-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.wip-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f0f0f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.wip-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #aaa;
}
.wip-card-desc {
  font-size: 11px;
  color: #bbb;
  line-height: 1.6;
  padding-left: 40px;
}

.cart-modal-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 14px 16px;
}

.cart-section {
  margin-bottom: 16px;
}

.cart-section-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.cart-project-placeholder {
  background: #f8f8fc;
  border: 1px dashed #e0e0ea;
  border-radius: 8px;
  color: #aaa;
  font-size: 11px;
  padding: 10px 12px;
}

.cart-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.cart-action-btn {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #f8f8fc;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  color: #1a1a2e;
}

.cart-action-btn:hover:not(:disabled),
.cart-action-btn:focus:not(:disabled) {
  background: #faf5ff;
  outline: none;
  box-shadow: none;
}

.cart-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cart-item-status {
  font-size: 10px;
  color: #666;
  margin-top: 4px;
}

/* ═══════════════════════════════
   データページ (.dp-*)
═══════════════════════════════ */
.dp-page {
  padding: 24px 16px;
  max-width: 980px;
  margin: 0 auto;
}

/* 鋼種タブ行 */
.dp-kind-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.dk-tab {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #ddd;
  background: #f6f6f6;
  color: #475569;
  cursor: pointer;
  transition: all .15s;
}
.dk-tab.active {
  background: #f4f4f4;
  border-color: #ccc;
  color: #333;
}
.dk-tab.wip {
  opacity: 0.45;
  cursor: default;
}
.wip-dot {
  font-size: 6px;
  vertical-align: super;
  margin-left: 3px;
  color: #f59e0b;
}

/* メインレイアウト */
.dp-main {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.dp-left {
  flex: 0 0 auto;
  width: 450px;
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.dp-right {
  flex: 1 1 320px;
  min-width: 300px;
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

/* 断面図エリア */
.dp-diagram-bg {
  background: #f6f6f6;
  border-radius: 12px;
  padding: 12px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 340px;
}

/* 鋼材種別バッジ */
.dp-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  letter-spacing: .06em;
}
.dp-type-h {
  background: #f0f0f0;
  border: 1px solid #ccc;
  color: #333;
}

/* JISバッジ・名称 */
.dp-jis-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  color: #555;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.dp-spec-name {
  font-size: 16px;
  font-weight: 800;
  color: #111;
  margin-bottom: 2px;
}
.dp-spec-sub {
  font-size: 10px;
  color: #888;
  margin-bottom: 14px;
}

/* スペック選択 */
.dp-spec-row-label {
  font-size: 9px;
  font-weight: 700;
  color: #888;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.dp-spec-sel {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.spec-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1.5px solid #ddd;
  background: #f6f6f6;
  color: #475569;
  cursor: pointer;
  transition: all .15s;
}
.spec-btn.active {
  background: #f4f4f4;
  border-color: #ccc;
  color: #333;
}

/* セクションタイトル */
.dp-section-title {
  font-size: 9px;
  font-weight: 700;
  color: #888;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* データグリッド */
.dp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.dp-cell {
  background: #f6f6f6;
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
}
.dp-cell span {
  display: block;
  font-size: 9px;
  color: #888;
  font-weight: 700;
  margin-bottom: 2px;
}
.dp-cell strong {
  font-size: 12px;
  color: #111;
  font-weight: 800;
}
.dp-cell.dp-r {
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.dp-cell.dp-r span { color: #d97706; }
.dp-cell.dp-r strong { color: #b45309; }

/* kg/mバー */
.dp-kgm-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: #f4f4f4;
  border-radius: 8px;
  margin-top: 10px;
}
.dp-kgm-bar span {
  font-size: 10px;
  color: #555;
  font-weight: 700;
}
.dp-kgm-bar strong {
  font-size: 15px;
  color: #111;
  font-weight: 800;
}

#dataExtraInfo {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.dp-box {
  background: #f6f6f6;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
}

/* データタブ ドロップダウン復旧 */
.data-page-shell,
.data-topbar,
#dataSpecPicker,
.data-spec-picker {
  overflow: visible;
}

.data-spec-picker {
  position: relative;
  width: 100%;
  max-width: 720px;
}

.data-spec-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

#dataSpecInput {
  width: 100%;
  height: 42px;
  border: 1.5px solid #d9ddea;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 14px;
  background: #fff;
  color: #111827;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}

#dataSpecInput:hover,
#dataSpecInput:focus {
  background: #faf5ff;
  outline: none;
  box-shadow: none;
}

#dataSpecToggleBtn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid #d9ddea;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}

#dataSpecToggleBtn:hover,
#dataSpecToggleBtn:focus {
  background: #faf5ff;
  outline: none;
  box-shadow: none;
}

.data-spec-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
  z-index: 200;
  display: none;
}

.data-spec-dropdown.open {
  display: block;
}

.data-spec-option {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
  box-sizing: border-box;
}

.data-spec-option:last-child {
  border-bottom: none;
}

.data-spec-option:hover,
.data-spec-option.active,
.data-spec-option:focus {
  background: #f8fbff;
  outline: none;
}

.data-spec-empty {
  padding: 12px 14px;
  color: #555;
  font-size: 13px;
}

/* データタブ 2カラム再調整 */
.dp-page {
  padding: 16px 18px 20px;
}

.data-page-shell {
  max-width: 1180px;
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
}

.data-topbar {
  margin-bottom: 14px;
}

.data-topbar-label {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.data-main-grid {
  display: grid;
  grid-template-columns: minmax(430px, 500px) minmax(500px, 620px);
  gap: 18px;
  align-items: start;
  justify-content: center;
}

.data-figure-card,
.data-info-card {
  background: #fff;
  border: 1px solid #ececf3;
  border-radius: 22px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.04);
}

.data-figure-card {
  padding: 14px 14px 12px;
}

.data-info-card {
  padding: 14px 14px 12px;
}

.dp-spec-info {
  margin-bottom: 8px;
}

.dp-jis-badge {
  margin-bottom: 6px;
}

.dp-spec-name {
  margin: 6px 0 4px;
  line-height: 1.08;
}

.dp-spec-sub {
  margin-bottom: 8px;
}

.dp-diagram-bg {
  background: #f6f6f6;
  border-radius: 14px;
  padding: 8px 6px;
  min-height: 352px;
}

#dataSVGWrap {
  min-height: 336px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dataSVGWrap svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
}

#dataDimGrid,
#dataPerfGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.dp-section-title {
  margin-bottom: 6px;
}

.dp-cell {
  min-height: 58px;
  padding: 8px 7px;
  border-radius: 10px;
}

.dp-cell strong {
  font-size: 14px;
  line-height: 1.1;
}

.dp-kgm-bar {
  margin-top: 10px;
  padding: 9px 12px;
}

#dataExtraInfo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.dp-box {
  padding: 10px 12px;
  min-height: 72px;
}

.dp-box strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.2;
}

@media (max-width: 980px) and (min-width: 760px) {
  .dp-page {
    padding: 14px 12px 18px;
  }

  .data-page-shell {
    width: min(100%, calc(100vw - 20px));
  }

  .data-main-grid {
    grid-template-columns: minmax(290px, 360px) minmax(360px, 1fr);
    gap: 14px;
  }

  .data-figure-card,
  .data-info-card {
    border-radius: 18px;
    padding: 12px;
  }

  .dp-diagram-bg {
    min-height: 258px;
    padding: 6px 4px;
  }

  #dataSVGWrap {
    min-height: 246px;
  }

  #dataSVGWrap svg {
    max-width: 250px;
  }

  #dataDimGrid,
  #dataPerfGrid {
    gap: 5px;
  }

  .dp-cell {
    min-height: 52px;
    padding: 7px 6px;
  }

  .dp-cell span {
    font-size: 10px;
  }

  .dp-cell strong {
    font-size: 13px;
  }

  .dp-spec-name {
    font-size: 28px;
  }

  .dp-kgm-bar {
    padding: 8px 10px;
  }

  #dataExtraInfo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 759px) {
  .dp-page {
    padding: 12px;
  }

  .data-page-shell {
    width: min(100%, calc(100vw - 16px));
  }

  .data-main-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .data-figure-card,
  .data-info-card {
    padding: 12px;
    border-radius: 18px;
  }

  .dp-diagram-bg {
    min-height: 224px;
    padding: 6px 4px;
  }

  #dataSVGWrap {
    min-height: 214px;
  }

  #dataSVGWrap svg {
    max-width: 220px;
  }

  #dataExtraInfo {
    grid-template-columns: 1fr;
  }
}

/* 重量タブ 行ボタン */
.w-edit-btn {
  background: none;
  border: 1px solid #d0d0e0;
  border-radius: 6px;
  cursor: pointer;
  color: #8888a8;
  font-size: 12px;
  padding: 2px 6px;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.w-edit-btn:hover {
  background: #e8eaf6;
  col


/* ── ダークモード（data-theme="dark"） ───────────────── */
.hm-theme-pill{
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  background:#f0f0f4;
  color:#6b7280;
}
html[data-theme="dark"] .hm-theme-pill{
  background:#2a2a38;
  color:#a8a8c0;
}
.hm-row#themeToggleBtn.is-on .hm-theme-pill{
  background:#ede9fe;
  color:#5b21b6;
}
html[data-theme="dark"] .hm-row#themeToggleBtn.is-on .hm-theme-pill{
  background:rgba(167,139,250,.28);
  color:#ddd6fe;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --br:#a78bfa;
  --br2:#c4b5fd;
  --br-soft:rgba(167,139,250,.14);
  --br-soft-strong:rgba(167,139,250,.2);
  --ink:#e8e8f0;
  --ink-soft:#9ca3af;
  --line:#3f3f52;
  --bk:#0f0f14;
  --dk:#2a2a36;
  --sf:#18181f;
  --sf2:#22222c;
  --bd:#43435a;
  --bd2:#5c5c74;
  --wh:#f0f0f8;
  --g1:#e8e8f0;
  --g2:#a8a8c0;
  --g3:#808098;
  --tx:#e8e8f0;
  --ac:#a78bfa;
}

html[data-theme="dark"] body{
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(107,70,255,.12), transparent 22%),
    linear-gradient(180deg, #12121a 0%, #16161e 100%);
}

html[data-theme="dark"] ::-webkit-scrollbar-track{background:#22222c}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#5c5c74}

html[data-theme="dark"] header{
  background:rgba(22,22,30,.94);
  border-bottom-color:var(--line);
}
html[data-theme="dark"] .logo,
html[data-theme="dark"] nav a{color:var(--ink)}
html[data-theme="dark"] nav a:hover,
html[data-theme="dark"] nav a.active{
  color:var(--ink);
  background:rgba(167,139,250,.12);
}
html[data-theme="dark"] .logo .beta{
  border-color:#ccc;
  color:#ccc;
}
html[data-theme="dark"] .logo-image{
  mix-blend-mode:normal;
  filter:brightness(0) invert(1);
  opacity:.95;
}

html[data-theme="dark"] .cart-badge{
  background:#1e1e28!important;
  border-color:#3f3f52!important;
  color:#ccc!important;
}
html[data-theme="dark"] .cart-badge:not(.empty):hover{background:#26262f!important}
html[data-theme="dark"] .hdr-right > #cartBadge{
  border-color:#4c3d7a!important;
  background:#251a3d!important;
  color:#e0e0e8!important;
}
html[data-theme="dark"] .hdr-right > #cartBadge:hover{background:#2d2248!important}

html[data-theme="dark"] .ham-btn{color:#9ca3af}
html[data-theme="dark"] .ham-btn:hover,
html[data-theme="dark"] .ham-btn.open{
  background:rgba(167,139,250,.15);
  color:#c4b5fd;
}
html[data-theme="dark"] .ham-menu{
  background:#1a1a22;
  border-color:#3f3f52;
  box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.25);
}
html[data-theme="dark"] .hm-section + .hm-section{border-top-color:#2e2e3c}
html[data-theme="dark"] .hm-row:hover{background:rgba(167,139,250,.1)}
html[data-theme="dark"] .hm-txt{color:#e8e8f0}
html[data-theme="dark"] .hm-arr{color:#a78bfa}
html[data-theme="dark"] .hm-ver,
html[data-theme="dark"] .hm-note{color:#8888a8}

html[data-theme="dark"] .sb{
  background:#14141a;
  border-right-color:var(--line);
}
html[data-theme="dark"] .mn{background:#12121a}
html[data-theme="dark"] .sb-tab{color:#9ca3af}
html[data-theme="dark"] .sb-tab.active{
  color:#e8e8f0;
  background:rgba(167,139,250,.18);
}
html[data-theme="dark"] .shd{color:#b8b8d0}

html[data-theme="dark"] .field label,
html[data-theme="dark"] .ds-field label{color:#a8a8c0}

html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:var(--sf2)!important;
  border-color:var(--line)!important;
  color:var(--ink)!important;
}
html[data-theme="dark"] select option{background:#22222c;color:#e8e8f0}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  background:rgba(167,139,250,.12)!important;
}

html[data-theme="dark"] #cmdInput,
html[data-theme="dark"] #wCmdInput{
  background:var(--sf2)!important;
  border-color:var(--line)!important;
  color:var(--ink)!important;
}
html[data-theme="dark"] #cmdPaletteWrap button[type="button"],
html[data-theme="dark"] #wCmdWrap button[type="button"]{
  background:var(--sf2)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] #cmdDropdown,
html[data-theme="dark"] #wCmdDropdown{
  background:#1a1a22!important;
  border-color:var(--line)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.4)!important;
}
html[data-theme="dark"] .cmd-item{
  border-bottom-color:#2e2e3c;
  color:#e8e8f0;
}
html[data-theme="dark"] .cmd-item:hover,
html[data-theme="dark"] .cmd-item.cmd-focus{
  background:rgba(167,139,250,.15);
  color:#fff;
}
html[data-theme="dark"] .cmd-cat{background:#22222c;color:#8888a8}

html[data-theme="dark"] .pt-wrap,
html[data-theme="dark"] .pt-hd,
html[data-theme="dark"] .remnant-area,
html[data-theme="dark"] .stk-row{
  background:#1a1a22;
  border-color:var(--line);
}
html[data-theme="dark"] .pt-hd span{color:#a8a8c0}
html[data-theme="dark"] .pt-row{border-bottom-color:#2e2e3c}
html[data-theme="dark"] .pt-row input{color:#e8e8f0!important}
html[data-theme="dark"] .tot{background:#16161e;border-color:var(--line)}
html[data-theme="dark"] .tot-l{color:#a8a8c0}
html[data-theme="dark"] .tot-v{color:#e8e8f0}

html[data-theme="dark"] .paste-area textarea{background:#1a1a22!important;border-color:var(--line)!important}
html[data-theme="dark"] .paste-hint{color:#a8a8c0}
html[data-theme="dark"] .paste-exec:hover{background:#7c3aed!important}

html[data-theme="dark"] .run{
  background:#1e1e28!important;
  border-color:var(--line)!important;
  color:#e8e8f0!important;
}
html[data-theme="dark"] .run:hover{
  background:rgba(167,139,250,.12)!important;
  border-color:#8b5cf6!important;
}

html[data-theme="dark"] .sm-btn{
  border-color:var(--line);
  color:#a8a8c0;
}
html[data-theme="dark"] .sm-btn:hover{border-color:#888;color:#e8e8f0}

html[data-theme="dark"] .ph{
  background:#1a1a22;
  border-color:var(--line);
  color:#a8a8c0;
}
html[data-theme="dark"] .ph p{color:#e0e0e8}
html[data-theme="dark"] .ph small{color:#8888a8}

html[data-theme="dark"] .cc{
  background:#1a1a22;
  border-color:var(--line);
  box-shadow:0 12px 34px rgba(0,0,0,.35);
}
html[data-theme="dark"] .cc-hd,
html[data-theme="dark"] .yield-card .cc-hd,
html[data-theme="dark"] .cc-pat,
html[data-theme="dark"] .cut-diagram{
  background:#16161e;
  border-color:#2e2e3c;
}
html[data-theme="dark"] .cc-desc,
html[data-theme="dark"] .cs .cl{color:#e0e0e8}
html[data-theme="dark"] .pc{background:#1a1a22;border-color:var(--line)}
html[data-theme="dark"] .pc-hd{background:#22222c;border-color:#2e2e3c;color:#e8e8f0}
html[data-theme="dark"] .pc-row{color:#e0e0e8;border-color:#2e2e3c}
html[data-theme="dark"] .px{background:#5c5c74;color:#fff}

html[data-theme="dark"] .bar-track{background:#2a2a36!important;border-color:var(--line)!important}
html[data-theme="dark"] .diag-toggle{
  border-top-color:#2e2e3c;
  color:#a8a8c0;
}
html[data-theme="dark"] .diag-toggle:hover{background:#22222c;color:#e8e8f0}

html[data-theme="dark"] .hi-tabs{background:#16161e}
html[data-theme="dark"] .hi-tab{color:#8888a8}
html[data-theme="dark"] .hi-tab-active{
  color:#e8e8f0;
  background:#12121a;
}
html[data-theme="dark"] .hi-search-bar{border-bottom-color:#2e2e3c}
html[data-theme="dark"] .hi-search-wrap input{
  background:#1e1e28!important;
  border-color:var(--line)!important;
  color:#e8e8f0!important;
}
html[data-theme="dark"] .hi-filter-btn{
  border-color:var(--line);
  color:#a8a8c0;
}
html[data-theme="dark"] .hi-filter-btn.active{
  border-color:#a78bfa;
  color:#c4b5fd;
  background:rgba(167,139,250,.12);
}
html[data-theme="dark"] .hi-chip-row{border-bottom-color:#2e2e3c}
html[data-theme="dark"] .hi-chip{
  background:#1a1a22;
  border-color:var(--line);
  color:#a8a8c0;
}
html[data-theme="dark"] .hi-chip.on{
  background:rgba(167,139,250,.25);
  border-color:#a78bfa;
  color:#ddd6fe;
}
html[data-theme="dark"] .hi-card{
  border-color:#3f3f52;
  background:#1a1a22;
}
html[data-theme="dark"] .hi-card:hover{
  border-color:#a78bfa;
  background:rgba(167,139,250,.08);
}
html[data-theme="dark"] .hi-card-client{color:#e8e8f0}
html[data-theme="dark"] .hi-tag{background:#2a2a38;color:#a8a8c0}
html[data-theme="dark"] .hi-filter-panel{
  background:#1a1a22;
  border-color:#2e2e3c;
}

html[data-theme="dark"] .inv-card-new{
  background:#1a1a22;
  border-color:#3f3f52;
}
html[data-theme="dark"] .inv-card-new:hover{
  border-color:#4ade80;
  background:rgba(34,197,94,.08);
}
html[data-theme="dark"] .inv-card-len,
html[data-theme="dark"] .inv-len,
html[data-theme="dark"] .inv-spec-label{color:#e8e8f0}

html[data-theme="dark"] .w-opt-chip{
  background:#1e1e28;
  border-color:var(--line);
  color:#a8a8c0;
}
html[data-theme="dark"] .w-opt-chip--on{
  background:rgba(167,139,250,.25);
  border-color:#a78bfa;
  color:#e8e8f0;
}

html[data-theme="dark"] #wTable thead tr{background:#22222c!important;border-bottom-color:var(--line)!important}
html[data-theme="dark"] #wTable th{color:#a8a8c0!important}
html[data-theme="dark"] #wMainHd{border-bottom-color:#2e2e3c}
html[data-theme="dark"] #wEmpty{color:#6b7280!important}

html[data-theme="dark"] #cartModal .cart-modal-inner{background:#1a1a22}
html[data-theme="dark"] .cart-modal-hd{
  background:#16161e;
  border-bottom-color:#2e2e3c;
}

html[data-theme="dark"] .dp-page{background:#12121a}
html[data-theme="dark"] .data-figure-card,
html[data-theme="dark"] .data-info-card,
html[data-theme="dark"] .data-topbar{
  background:#1a1a22;
  border-color:#3f3f52;
  color:#e8e8f0;
}
html[data-theme="dark"] .dp-diagram-bg{background:#16161e}
html[data-theme="dark"] .dp-cell span{color:#a8a8c0}
html[data-theme="dark"] .dp-cell strong{color:#e8e8f0}
html[data-theme="dark"] .data-spec-dropdown{
  background:#1a1a22!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .data-spec-option:hover,
html[data-theme="dark"] .data-spec-option.active,
html[data-theme="dark"] .data-spec-option:focus{
  background:rgba(167,139,250,.15)!important;
}

html[data-theme="dark"] .calc-note{color:#8888a8}

html[data-theme="dark"] .w-edit-btn{
  border-color:#3f3f52;
  color:#a8a8c0;
}
html[data-theme="dark"] .w-edit-btn:hover{
  background:rgba(99,102,241,.15);
  color:#a5b4fc;
  border-color:#6366f1;
}

html[data-theme="dark"] .remnant-head{
  background:#22222c;
  border-bottom-color:var(--line);
}
html[data-theme="dark"] .rem-row{border-bottom-color:#2e2e3c}
html[data-theme="dark"] .tbtn{
  background:#1a1a22;
  border-color:var(--line);
  color:#e8e8f0;
}
html[data-theme="dark"] .tbtn:hover{background:rgba(167,139,250,.1)}
html[data-theme="dark"] .tbtn.on{
  background:rgba(167,139,250,.2);
  border-color:#8b5cf6;
  color:#e8e8f0;
}
html[data-theme="dark"] .ds-toggle-row{border-color:#2e2e3c}
html[data-theme="dark"] .ds-toggle-row:hover{background:rgba(167,139,250,.08)}
html[data-theme="dark"] .ds-toggle-row:hover .ds-toggle-label span{color:#e8e8f0!important}
html[data-theme="dark"] .ds-toggle-label span{color:#e8e8f0}
html[data-theme="dark"] .ds-toggle-label small{color:#8888a8}
html[data-theme="dark"] .spec-item{
  background:#1a1a22;
  border-bottom-color:#2e2e3c;
  color:#e8e8f0;
}
html[data-theme="dark"] .spec-item:hover{background:rgba(167,139,250,.1)}

/* ── Contact page dark mode ──────────────────────────────── */
html[data-theme="dark"] #cop,
html[data-theme="dark"] #contactp{background:#12121a}
html[data-theme="dark"] .contact-card{
  background:#1a1a2e;
  border-color:#2a2a44;
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}
html[data-theme="dark"] .contact-title{color:#e8e8ff}
html[data-theme="dark"] .contact-lead{color:#9898b8}
html[data-theme="dark"] .contact-field label{color:#8888aa}
html[data-theme="dark"] .contact-field input,
html[data-theme="dark"] .contact-field select,
html[data-theme="dark"] .contact-field textarea{
  background:#0e0e1a;
  border-color:#3a3a54;
  color:#e8e8ff;
}
html[data-theme="dark"] .contact-field input::placeholder,
html[data-theme="dark"] .contact-field textarea::placeholder{color:#5a5a78}
html[data-theme="dark"] #feedbackSubmitBtn{
  background:#2a1a4e;
  border-color:#5a3a9e;
  color:#c8b8ff;
}
html[data-theme="dark"] #feedbackSubmitBtn:hover,
html[data-theme="dark"] #feedbackSubmitBtn:focus{background:#3a2060!important}
html[data-theme="dark"] .contact-destination{
  background:#0e0e1a;
  border-color:#2a2a44;
  color:#6868a8;
}

/* ── Data kind select dropdown ─────────────────────────── */
.data-kind-select{
  display:block;
  width:100%;
  max-width:720px;
  margin:10px 0 14px;
  padding:9px 32px 9px 14px;
  border:1.5px solid var(--bd);
  border-radius:var(--r-sm);
  background:#f8f8fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size:10px;
  font-size:13px;
  font-weight:700;
  color:var(--tx);
  font-family:inherit;
  cursor:pointer;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .15s,background-color .15s;
}
.data-kind-select:hover,.data-kind-select:focus{
  border-color:var(--br);
  background-color:#f3efff;
}
html[data-theme="dark"] .data-kind-select{
  background-color:var(--sf2);
  border-color:var(--line);
  color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239ca3af' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .data-kind-select:hover,
html[data-theme="dark"] .data-kind-select:focus{
  border-color:var(--br);
  background-color:var(--br-soft);
}

/* ── Dark mode !important overrides (fix 2026-refresh cascade) ── */
/* These rules use !important to beat the 2026-refresh section     */

/* .cart-bulk-print base + hover */
html[data-theme="dark"] .cart-bulk-print{
  background:#1e1e28!important;
  color:#e8e8f0!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .cart-bulk-print:hover{
  background:rgba(167,139,250,.15)!important;
  border-color:#8b5cf6!important;
}
html[data-theme="dark"] .cart-badge:hover,
html[data-theme="dark"] .cc-btn-print:hover,
html[data-theme="dark"] .print-btn:hover{
  background:rgba(167,139,250,.12)!important;
  border-color:var(--line)!important;
}

/* .preview-action-btn */
html[data-theme="dark"] .preview-action-btn{
  background:#1e1e28!important;
  color:#e8e8f0!important;
  border:1.5px solid var(--line)!important;
}
html[data-theme="dark"] .preview-action-btn:hover,
html[data-theme="dark"] .preview-action-btn:active{
  background:rgba(167,139,250,.15)!important;
}

/* #invDropCont (covers both 2026-refresh rules) */
html[data-theme="dark"] #invDropCont{
  background:#1e1e28!important;
  border:1px solid var(--line)!important;
  border-radius:8px!important;
}

/* #invSelect */
html[data-theme="dark"] #invSelect{
  background:var(--sf2)!important;
  border:1px solid var(--line)!important;
  color:var(--ink)!important;
}

/* #invBadge */
html[data-theme="dark"] #invBadge{
  color:#a8a8c0!important;
  background:#1e1e28!important;
  border:1px solid var(--line)!important;
}

/* #hiPanelH, #hiPanelI inputs/selects (high specificity override) */
html[data-theme="dark"] #hiPanelH input,
html[data-theme="dark"] #hiPanelH select,
html[data-theme="dark"] #hiPanelI input,
html[data-theme="dark"] #hiPanelI select{
  background:var(--sf2)!important;
  border:1px solid var(--line)!important;
  color:var(--ink)!important;
}

/* .bar-track (reinforce; already has !important but be explicit) */
html[data-theme="dark"] .bar-track{
  background:#2a2a36!important;
  border-color:var(--line)!important;
}

/* .paste-area base */
html[data-theme="dark"] .paste-area{
  background:#1a1a22!important;
  border-color:var(--line)!important;
}

/* .spec-item hover/on need !important */
html[data-theme="dark"] .spec-item:hover,
html[data-theme="dark"] .spec-item.on{
  background:rgba(167,139,250,.15)!important;
  color:#e8e8f0!important;
}

/* contact page overrides that need !important */
html[data-theme="dark"] #cop input:hover,
html[data-theme="dark"] #cop input:focus,
html[data-theme="dark"] #cop select:hover,
html[data-theme="dark"] #cop select:focus,
html[data-theme="dark"] #cop textarea:hover,
html[data-theme="dark"] #cop textarea:focus{
  background:rgba(167,139,250,.1)!important;
  outline:none!important;
  box-shadow:none!important;
}
html[data-theme="dark"] #contactSubject{
  color:var(--ink)!important;
}
html[data-theme="dark"] #contactSubmitBtn:hover,
html[data-theme="dark"] #contactSubmitBtn:focus{
  background:rgba(167,139,250,.2)!important;
}
html[data-theme="dark"] #contactSubmitBtn:active{
  background:rgba(167,139,250,.3)!important;
}
html[data-theme="dark"] .contact-pen-l
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   データタブ 新レイアウト (案B)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dp-selector-bar {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.dp-selector-item { display: flex; flex-direction: column; gap: 5px; }
.dp-selector-grow { flex: 1; min-width: 200px; }
.dp-selector-label {
  font-size: 10px;
  font-weight: 700;
  color: #888;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* 2カラムグリッド */
.dp-content-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 32px;
}
@media (max-width: 860px) {
  .dp-content-grid { grid-template-columns: 1fr; }
}

/* 左: 情報カラム */
.dp-info-col { display: flex; flex-direction: column; gap: 0; }

/* 規格名エリア */
#dataSpecInfo .dp-spec-headline {
  font-size: 24px;
  font-weight: 800;
  color: #111;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
#dataSpecInfo .dp-spec-meta {
  font-size: 13px;
  color: #555;
  margin-bottom: 2px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
#dataSpecInfo .dp-spec-meta strong { font-weight: 700; color: #111; }
#dataSpecInfo .dp-badge-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}
#dataSpecInfo .dp-kind-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border: 1.5px solid #ccc;
  border-radius: 4px;
  color: #444;
  background: #f5f5f5;
  letter-spacing: .04em;
}
#dataSpecInfo .dp-jis-tag {
  font-size: 10px;
  color: #888;
  padding: 2px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fafafa;
}

/* セクション見出し */
.dp-sec-label {
  font-size: 10px;
  font-weight: 700;
  color: #666;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1.5px solid #111;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

/* 断面性能トグルボタン */
.dp-toggle-btn {
  margin-top: 14px;
  width: 100%;
  padding: 8px 12px;
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #444;
  text-align: left;
  font-family: inherit;
  letter-spacing: .04em;
  transition: background .12s;
}
.dp-toggle-btn:hover { background: #ebebeb; }

/* 定尺チップ */
.dp-std-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.dp-std-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #333;
  cursor: default;
}
.dp-std-chip button {
  background: none;
  border: none;
  font-size: 11px;
  color: #aaa;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.dp-std-chip button:hover { color: #e00; }
.dp-std-add-form {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
}
.dp-std-add-form input {
  width: 72px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
}
.dp-std-add-form button {
  padding: 4px 10px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

/* 右: 図カラム */
.dp-fig-col {
  position: sticky;
  top: 80px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.dp-svg-wrap svg { max-width: 100%; height: auto; }

/* extraInfo */
#dataExtraInfo { margin-top: 14px; }
.dp-extra-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  color: #555;
}
.dp-extra-row:last-child { border-bottom: none; }
.dp-extra-row strong { font-weight: 700; color: #111; font-size: 13px; }

/* カスタム鋼材ブロック */
.dp-custom-block {
  border-top: 1.5px solid #111;
  padding-top: 16px;
  margin-top: 8px;
}

/* メモエリア */
#dataNoteArea {
  border-top: 1.5px solid #111;
  padding-top: 14px;
  margin-top: 14px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   データタブ 案A (dp2-*)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dp2-page{max-width:1000px;margin:0 auto;padding:24px 20px 48px}

/* セレクターバー */
.dp2-sel-bar{display:flex;gap:12px;align-items:flex-end;margin-bottom:28px;flex-wrap:wrap}
.dp2-sel-item{display:flex;flex-direction:column;gap:5px}
.dp2-sel-grow{flex:1;min-width:200px}
.dp2-sel-label{font-size:10px;font-weight:700;color:#888;letter-spacing:.08em;text-transform:uppercase}
.dp2-kind-sel{padding:9px 32px 9px 12px;border:1.5px solid #ccc;border-radius:8px;font-size:13px;font-weight:600;background:#fafafa;cursor:pointer;outline:none;font-family:inherit;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.dp2-kind-sel:hover{border-color:#888}

/* ヘッダー */
.dp2-header{padding-bottom:20px;border-bottom:1.5px solid #111;margin-bottom:20px}
.dp2-hd-kind{font-size:11px;font-weight:700;color:#888;letter-spacing:.1em;margin-bottom:8px}
.dp2-hd-name{font-size:28px;font-weight:800;letter-spacing:-.02em;color:#111;line-height:1.1;margin-bottom:10px}
.dp2-hd-meta{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;font-size:14px;color:#555}
.dp2-hd-meta strong{font-size:18px;font-weight:800;color:#111}
.dp2-hd-divider{width:1px;height:16px;background:#ccc;flex-shrink:0}

/* 定尺チップ */
#dataStdArea{margin-bottom:24px}
.dp2-sec-lbl{font-size:10px;font-weight:700;color:#666;letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5px solid #111;padding-bottom:4px;margin-bottom:10px}
.dp2-std-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dp2-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:#f4f4f4;border:1px solid #ccc;border-radius:4px;font-size:12px;font-weight:600;color:#333}
.dp2-chip-x{background:none;border:none;font-size:10px;color:#aaa;cursor:pointer;padding:0;line-height:1;font-weight:700}
.dp2-chip-x:hover{color:#c00}
.dp2-chip-add{display:inline-flex;align-items:center;gap:4px}
.dp2-chip-add input{width:68px;padding:5px 7px;border:1px solid #ccc;border-radius:4px;font-size:12px;font-family:inherit}
.dp2-chip-add button{padding:5px 10px;background:#333;color:#fff;border:none;border-radius:4px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}

/* ボディ 2カラム */
.dp2-body{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media(max-width:760px){.dp2-body{grid-template-columns:1fr}}

/* 左: 情報 */
.dp2-info-col{}
.dp2-dim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ddd;border:1px solid #ddd;border-radius:8px;overflow:hidden;margin-bottom:14px}
.dp2-dim-cell{background:#fff;padding:10px 12px;text-align:center}
.dp2-dim-cell .dp2-lbl{font-size:10px;color:#888;margin-bottom:3px;font-weight:600}
.dp2-dim-cell .dp2-val{font-size:14px;font-weight:700;color:#111}
.dp2-toggle-btn{width:100%;padding:9px 12px;background:#f4f4f4;border:1.5px solid #ccc;border-radius:6px;font-size:11px;font-weight:700;color:#444;text-align:left;cursor:pointer;font-family:inherit;letter-spacing:.04em;margin-bottom:4px}
.dp2-toggle-btn:hover{background:#ebebeb}
.dp2-extra-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid #eee;font-size:12px;color:#666}
.dp2-extra-row:last-child{border-bottom:none}
.dp2-extra-row strong{font-weight:700;color:#111;font-size:13px}
#dataExtraInfo{margin-top:14px}
#dataNoteArea{margin-top:20px;border-top:1.5px solid #111;padding-top:16px}
.dp2-note-lbl{font-size:10px;font-weight:700;color:#666;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.dp2-note-list{background:#f8f8f8;border-radius:6px;padding:10px;font-size:12px;color:#888;min-height:48px;margin-bottom:8px;max-height:160px;overflow-y:auto}
.dp2-note-item{background:#fff;border-radius:4px;padding:7px 10px;margin-bottom:5px;border:1px solid #eee}
.dp2-note-ts{font-size:10px;color:#aaa;margin-bottom:2px}
.dp2-note-text{font-size:12px;color:#333}
.dp2-note-form{display:flex;gap:6px}
.dp2-note-form textarea{flex:1;padding:8px;border:1px solid #ccc;border-radius:6px;font-size:12px;resize:none;font-family:inherit;height:56px}
.dp2-note-form button{background:#333;color:#fff;border:none;border-radius:6px;padding:0 16px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap}

/* 右: 図 */
.dp2-fig-col{position:sticky;top:80px;border:1.5px solid #ccc;border-radius:10px;padding:24px;display:flex;align-items:center;justify-content:center;background:#fff;min-height:280px}
.dp2-fig-col svg{max-width:100%;height:auto}

/* カスタム鋼材 */
.dp2-custom-section{margin-top:40px;border-top:1.5px solid #111;padding-top:16px}

/* ━━━ dp2 補正・強制適用 ━━━ */
#dpp .dp2-page { max-width:1000px; margin:0 auto; padding:24px 20px 48px; }

/* ヘッダー強制 */
#dpp #dataSpecInfo { padding-bottom:18px; border-bottom:1.5px solid #111; margin-bottom:18px; }
#dpp .dp2-hd-kind { font-size:11px; font-weight:700; color:#888; letter-spacing:.1em; display:block; margin-bottom:6px; }
#dpp .dp2-hd-name { font-size:26px; font-weight:800; letter-spacing:-.02em; color:#111; display:block; line-height:1.1; margin-bottom:8px; }
#dpp .dp2-hd-meta { display:flex; gap:16px; align-items:baseline; font-size:13px; color:#666; }
#dpp .dp2-hd-meta strong { font-size:17px; font-weight:800; color:#111; }

/* 定尺エリア */
#dpp #dataStdArea { margin-bottom:20px; }
#dpp .dp2-sec-lbl { font-size:10px !important; font-weight:700 !important; color:#666 !important; letter-spacing:.08em; text-transform:uppercase; border-bottom:1.5px solid #111 !important; padding-bottom:4px; margin-bottom:10px; display:block; }
#dpp .dp2-std-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
#dpp .dp2-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; background:#f4f4f4; border:1px solid #ccc; border-radius:4px; font-size:12px; font-weight:600; color:#333; }
#dpp .dp2-chip-x { background:none; border:none; font-size:9px; color:#999; cursor:pointer; padding:0; line-height:1; margin-left:2px; }
#dpp .dp2-chip-x:hover { color:#c00; }
#dpp .dp2-chip-add { display:inline-flex; align-items:center; gap:5px; }
#dpp .dp2-chip-add input { width:70px; padding:4px 7px; border:1px solid #ccc; border-radius:4px; font-size:12px; font-family:inherit; }
#dpp .dp2-chip-add button { padding:4px 10px; background:#333; color:#fff; border:none; border-radius:4px; font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; }

/* ボディ 2カラム */
#dpp .dp2-body { display:grid; grid-template-columns:1fr 440px; gap:28px; align-items:start; }
@media (max-width:860px) { #dpp .dp2-body { grid-template-columns:1fr; } }

/* 断面寸法グリッド */
#dpp .dp2-dim-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:0; border:1.5px solid #ccc; border-radius:8px; overflow:hidden; margin-bottom:14px; }
#dpp .dp2-dim-cell { background:#fff; padding:10px 12px; text-align:center; border-right:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; }
#dpp .dp2-dim-cell:nth-child(3n) { border-right:none; }
#dpp .dp2-dim-cell:nth-last-child(-n+3) { border-bottom:none; }
#dpp .dp2-lbl { font-size:10px; font-weight:600; color:#888; margin-bottom:4px; display:block; }
#dpp .dp2-val { font-size:15px; font-weight:700; color:#111; display:block; }

/* 断面性能トグル */
#dpp .dp2-toggle-btn { display:block !important; width:100%; padding:9px 12px; background:#f4f4f4; border:1.5px solid #ccc; border-radius:6px; font-size:11px; font-weight:700; color:#444; text-align:left; cursor:pointer; font-family:inherit; letter-spacing:.04em; margin-bottom:4px; }
#dpp #dataPerfWrap .dp2-dim-grid { margin-top:8px; }

/* extra rows */
#dpp #dataExtraInfo { margin-top:14px; }
#dpp .dp2-extra-row { display:flex !important; justify-content:space-between; align-items:baseline; padding:9px 0; border-bottom:1px solid #eee; font-size:12px; color:#666; }
#dpp .dp2-extra-row:last-child { border-bottom:none; }
#dpp .dp2-extra-row strong { font-weight:700; color:#111; font-size:13px; }

/* メモ */
#dpp #dataNoteArea { display:block; margin-top:20px; border-top:1.5px solid #111; padding-top:16px; }
#dpp .dp2-note-lbl { font-size:10px; font-weight:700; color:#666; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; display:block; }
#dpp .dp2-note-list { background:#f8f8f8; border-radius:6px; padding:10px; min-height:44px; margin-bottom:8px; max-height:150px; overflow-y:auto; }
#dpp .dp2-note-item { background:#fff; border:1px solid #eee; border-radius:4px; padding:7px 10px; margin-bottom:5px; }
#dpp .dp2-note-ts { font-size:10px; color:#aaa; margin-bottom:2px; }
#dpp .dp2-note-text { font-size:12px; color:#333; }
#dpp .dp2-note-form { display:flex; gap:6px; }
#dpp .dp2-note-form textarea { flex:1; padding:8px; border:1.5px solid #ccc; border-radius:6px; font-size:12px; resize:none; font-family:inherit; height:52px; outline:none; }
#dpp .dp2-note-form textarea:focus { border-color:#555; }
#dpp .dp2-note-form button { background:#333; color:#fff; border:none; border-radius:6px; padding:0 16px; font-weight:700; font-size:12px; cursor:pointer; font-family:inherit; }

/* 断面図コラム */
#dpp .dp2-fig-col { position:sticky; top:80px; border:1.5px solid #ccc; border-radius:10px; padding:20px; display:flex; align-items:center; justify-content:center; background:#fff; min-height:260px; }
#dpp #dataSVGWrap svg { max-width:100%; height:auto; display:block; }

/* カスタム鋼材 */
#dpp .dp2-custom-section { margin-top:36px; padding-top:16px; border-top:1.5px solid #111; }

/* セレクターバー */
#dpp .dp2-sel-bar { display:flex; gap:12px; align-items:flex-end; margin-bottom:24px; flex-wrap:wrap; }
#dpp .dp2-sel-item { display:flex; flex-direction:column; gap:5px; }
#dpp .dp2-sel-grow { flex:1; min-width:180px; }
#dpp .dp2-sel-label { font-size:10px; font-weight:700; color:#888; letter-spacing:.08em; text-transform:uppercase; }