/* ============================================================
   刃物 見積シミュレーター（本番）── blade_form_v8.html 移植＋価格ラダー＋印刷
   ============================================================ */
:root{--bg:#0a111c;--panel:#111c2b;--panel2:#0e1826;--line:#22334a;--line2:#2c405c;
  --ink:#e8f0f8;--sub:#8ba3bd;--accent:#38bdf8;--accent2:#22d3ee;--accent-d:#0ea5e9;
  --hi:#fbbf24;--hi-soft:rgba(251,191,36,.14);--bpink:#bfe2ff;--edge:#ff6b57;--ok:#34d399;--errc:#f87171}
*{box-sizing:border-box}
body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;background:radial-gradient(1200px 600px at 80% -10%,rgba(56,189,248,.08),transparent 60%),var(--bg);color:var(--ink);line-height:1.55;min-height:100vh}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
/* ヘッダー：モバイルは縦積み（ロゴ＋社名が上→タイトル）、PCは横並び（タイトル左／ロゴ＋社名 右上） */
header{padding:13px 22px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:linear-gradient(180deg,rgba(17,28,43,.9),rgba(10,17,28,.6));border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.logo-img{width:40px;height:40px;display:block;flex:none;filter:drop-shadow(0 0 10px rgba(56,189,248,.35))}
.co{font-size:14px;color:var(--ink);font-weight:700;letter-spacing:.02em}
.title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.title h1{font-size:17px;margin:0;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.title h1 .accent{color:var(--accent)}
.title h1 .reg{font-size:9px;top:-.7em}
header .badge{font-size:10.5px;color:var(--accent2);border:1px solid var(--line2);padding:3px 9px;border-radius:20px}
@media(min-width:721px){
  header{flex-direction:row;align-items:center;justify-content:space-between;padding:15px 26px}
  .brand{order:2}.title{order:1}
}
.container{max-width:1240px;margin:0 auto;padding:16px 24px 130px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px;box-shadow:0 10px 28px rgba(0,0,0,.22)}
.card h2{font-size:12.5px;margin:0 0 13px;padding-bottom:9px;border-bottom:1px solid var(--line);color:var(--accent);letter-spacing:.09em;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h2 .n{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:6px;background:rgba(56,189,248,.14);color:var(--accent);font-size:11px}
.card h2 .secret{margin-left:auto;font-size:10px;color:var(--hi);border:1px solid rgba(251,191,36,.5);padding:2px 8px;border-radius:12px;letter-spacing:.05em}
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px 16px}
.cfg{display:flex;flex-direction:column;gap:5px}
.cfg label{font-size:11px;color:var(--sub);font-weight:600}
select,input[type=number],input[type=text]{width:100%;padding:8px 10px;border:1px solid var(--line2);border-radius:9px;font-size:14px;background:var(--panel2);color:var(--ink)}
select:hover{border-color:var(--accent)}select:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,.2)}
select option{background:#0e1826}select:disabled,input:disabled{opacity:.5;cursor:not-allowed}
.bimetal-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:3px;color:var(--ink)}
.bimetal-row input{width:auto;accent-color:var(--accent)}
.unit-toggle{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.unit-toggle button{background:var(--panel2);color:var(--sub);border:none;padding:7px 16px;font-size:13px;cursor:pointer}
.unit-toggle button.on{background:var(--accent);color:#04121e;font-weight:700}
.main{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:16px}
@media(max-width:900px){.main{grid-template-columns:1fr}}
.callout{background:rgba(56,189,248,.07);border:1px solid var(--line2);border-radius:10px;padding:8px 11px;font-size:12px;color:var(--accent2);margin-bottom:10px}
svg{width:100%;aspect-ratio:450/318;height:auto;max-height:74vh;display:block;user-select:none;border-radius:12px;background:#0b1626}
#svg text{font-family:"Meiryo","メイリオ","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.blade{fill:rgba(191,226,255,.05);stroke:var(--bpink);stroke-width:1.5}
.hole{fill:#0b1626;stroke:var(--bpink);stroke-width:1.4}
.cham{fill:none;stroke:var(--hi);stroke-width:1.3;stroke-dasharray:3 2}
.bore{fill:none;stroke:var(--bpink);stroke-width:1.2;stroke-dasharray:5 3}
.bi{fill:rgba(251,191,36,.22);stroke:var(--hi);stroke-width:1.1}
.edgeline{stroke:var(--edge);stroke-width:3.2;fill:none;stroke-linecap:round}
.frame{fill:none;stroke:var(--bpink);stroke-width:1.2}
.centerline{stroke:#8ba3bd}
.dim{cursor:pointer}
.dim line{stroke:var(--accent);stroke-width:1}
.dim text{fill:#9bd6ff;font-size:6px;font-weight:700}
.dim .hit{fill:transparent;stroke:transparent}
.dim.hi line{stroke:var(--hi);stroke-width:1.9}.dim.hi text{fill:var(--hi);font-weight:800}.dim.hi .hit{fill:var(--hi-soft)}
/* 図面内テキストは社名を除き全て 6px（社名 tbh は 7px）＝田﨑さん指定 */
.tt{fill:var(--sub);font-size:6px}
.tb{fill:#8ba3bd;font-size:6px}
.tbv{fill:#e8f0f8;font-size:6px}
.tbh{fill:var(--accent);font-size:7px;font-weight:700}
.tn{fill:#9bd6ff;font-size:6px}
.status{margin-top:10px;min-height:18px}
.st{border-radius:10px;padding:9px 12px;font-size:12.5px;border:1px solid}
.st ul{margin:5px 0 0;padding-left:18px}
.st.ok{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.4);color:var(--ok)}
.st.warn{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.4);color:var(--hi)}
.st.err{background:rgba(248,113,113,.09);border-color:rgba(248,113,113,.45);color:var(--errc)}
.st.done{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.6);color:var(--ok);font-weight:700}
.dims .grp{font-size:10.5px;color:var(--sub);margin:11px 0 4px;font-weight:700;letter-spacing:.08em;border-bottom:1px dotted var(--line2);padding-bottom:3px}
.dims .row{display:grid;grid-template-columns:1fr 72px 30px;align-items:center;gap:6px;margin:3px 0;padding:4px 6px;border-radius:8px}
.dims .row.hi{background:var(--hi-soft)}
.dims .row label{font-size:12px;cursor:pointer;color:var(--ink)}
.dims .row .code{display:inline-block;min-width:24px;font-weight:800;color:var(--accent)}
.dims .row.hi .code{color:var(--hi)}
.dims .row input{padding:6px 8px;font-size:13px}
.dims .row .unit{font-size:11px;color:var(--sub)}
.dims .info{font-size:11px;color:var(--accent2);margin:4px 6px}
.info{font-size:11px;color:var(--accent2)}
.weightout{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.weightout .wtitle{font-size:10.5px;color:var(--accent);font-weight:700;letter-spacing:.08em;margin-bottom:5px}
.weightout .wrow{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--sub);margin:3px 0}
.weightout .wrow b{color:var(--ink);font-weight:700}
.weightout .wrow.tot b{color:var(--accent2)}
.weightout .wnote{font-size:10.5px;color:var(--sub);margin-top:5px}
.resultbar{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(13,23,39,.85),rgba(10,17,28,.98));border-top:1px solid var(--line);padding:12px 24px;display:flex;align-items:center;gap:12px;backdrop-filter:blur(8px);z-index:10}
.btn{background:linear-gradient(180deg,var(--accent2),var(--accent-d));color:#04121e;border:none;padding:11px 24px;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 6px 16px rgba(34,211,238,.3);white-space:nowrap}
.btn:hover{filter:brightness(1.08)}.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;filter:none}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none}
.out{font-size:12px;color:var(--sub)}
.preset-note{font-size:11px;color:var(--hi);margin-top:4px;min-height:14px}
.rb-actions{display:flex;align-items:center;gap:12px}
.rb-print{display:flex;align-items:center;gap:7px;margin-left:auto}
.rb-lbl{font-size:11px;color:var(--sub)}
.orient-toggle{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.orient-toggle button{background:var(--panel2);color:var(--sub);border:none;padding:8px 14px;font-size:13px;cursor:pointer}
.orient-toggle button.on{background:var(--accent);color:#04121e;font-weight:700}

/* フッター */
.site-footer{text-align:center;font-size:12px;color:var(--sub);letter-spacing:.03em;padding:14px 0 4px;margin-top:6px;border-top:1px solid var(--line)}

/* ===== 価格ラダー（営業ビュー・社外秘） ===== */
.ladder{display:flex;flex-direction:column;gap:6px}
.lrow{display:flex;align-items:baseline;gap:12px;padding:9px 14px;border-radius:10px;border:1px solid var(--line2);flex-wrap:wrap}
.lrow .lprice{font-size:20px;font-weight:800;font-family:ui-monospace,Menlo,Consolas,monospace;min-width:110px}
.lrow .llbl{font-size:12px;color:var(--sub)}
.lrow.cur .lprice{color:var(--ink)}
.lrow.commit{border-width:2px;background:rgba(56,189,248,.06)}
.lrow.commit .lprice{font-size:26px;color:var(--accent2)}
.lrow.commit .sig{margin-left:auto;font-size:12px;font-weight:700}
.lrow.commit.sig-green{border-color:rgba(52,211,153,.6)}.lrow.commit.sig-green .sig{color:var(--ok)}
.lrow.commit.sig-yellow{border-color:rgba(251,191,36,.6)}.lrow.commit.sig-yellow .sig{color:var(--hi)}
.lrow.commit.sig-red{border-color:rgba(248,113,113,.7);background:rgba(248,113,113,.08)}.lrow.commit.sig-red .sig{color:var(--errc)}
.lrow.floor .lprice{color:var(--hi);font-size:16px}
.lrow.cost .lprice{color:var(--sub);font-size:16px}
.larrow{font-size:12px;color:var(--accent);padding:0 14px;font-weight:700}
.larrow.room{color:var(--hi);font-weight:400}
.larrow.room b{color:var(--hi)}
.ldetail{font-size:12.5px;color:var(--sub);padding:0 14px}
.ldetail b{color:var(--ok)}
.lcost-detail{font-size:11px;color:var(--sub);padding:2px 14px;line-height:1.7}
.lnote{font-size:11px;color:var(--accent2);padding:0 14px}
.lempty{font-size:12.5px;color:var(--sub);padding:6px 4px}
.lempty ul{margin:6px 0 0;padding-left:20px}
.lempty .todo{font-size:11px;color:var(--hi)}

/* 提示価格スライダー（#8：価格を動かしながら粗利/率をライブ確認） */
.adjust{border:1px solid var(--line2);border-radius:12px;padding:11px 14px;background:rgba(56,189,248,.05);margin:2px 0}
.adjust .ahead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.adjust .atitle{font-size:11px;color:var(--sub);font-weight:700;letter-spacing:.05em}
.adjust .areset{font-size:11px;color:var(--accent);background:none;border:1px solid var(--line2);border-radius:8px;padding:4px 10px;cursor:pointer}
.adjust .areset:hover{border-color:var(--accent)}
.adjust .aprice{font-size:28px;font-weight:800;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--accent2);margin:2px 0 6px}
.adjust input[type=range]{width:100%;margin:6px 0 4px;accent-color:var(--accent);height:26px}
.adjust .arange{display:flex;justify-content:space-between;font-size:10px;color:var(--sub)}
.adjust .agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px 14px;margin-top:9px}
.adjust .acell{display:flex;flex-direction:column;gap:1px}
.adjust .acell .k{font-size:10.5px;color:var(--sub)}
.adjust .acell .v{font-size:15px;font-weight:700;color:var(--ink);font-family:ui-monospace,Menlo,Consolas,monospace}
.adjust .acell .v.pos{color:var(--ok)}
.adjust .acell .v.neg{color:var(--errc)}
.adjust .asig{margin-top:9px;font-size:13px;font-weight:700;padding:6px 10px;border-radius:8px;border:1px solid}
.adjust .asig.sig-green{color:var(--ok);border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.08)}
.adjust .asig.sig-yellow{color:var(--hi);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.08)}
.adjust .asig.sig-red{color:var(--errc);border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.08)}
.adjust .ayear{font-size:11px;color:var(--accent2);margin-top:6px}

@media(max-width:640px){
  .container{padding:12px 12px 124px}.title h1{font-size:15px}
  svg{height:auto;max-height:60vh}
  .resultbar{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .rb-actions{flex:1 1 100%;gap:8px}
  .rb-actions .btn{flex:1;padding:11px 6px;font-size:13px;white-space:nowrap}
  .rb-print{flex:1 1 100%;justify-content:flex-end}
  .out{display:none}
  .dims .row{grid-template-columns:1fr 84px 30px}
  .lrow .lprice{min-width:0}
  .lrow.commit .lprice{font-size:22px}
  .adjust .aprice{font-size:24px}
}

/* ===== 印刷（図面のみ・白地に黒・線は細め／向きはJSで @page を注入） ===== */
#printArea{display:none}
@media print{
  @page{margin:8mm}
  body{background:#fff}
  body>*{display:none !important}
  #printArea{display:block !important;width:100%;height:100%}
  #printArea svg{width:100%;height:auto;max-height:100%;background:#fff;border-radius:0}
  #printArea svg text{font-family:"Meiryo","メイリオ","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
  /* #4：線を全体的に細く */
  #printArea .blade{fill:none;stroke:#111;stroke-width:.5}
  #printArea .hole{fill:#fff;stroke:#111;stroke-width:.45}
  #printArea .cham{stroke:#666;stroke-width:.4}
  #printArea .bore{stroke:#444;stroke-width:.4}
  #printArea .bi{fill:#eee;stroke:#666;stroke-width:.4}
  #printArea .edgeline{stroke:#111;stroke-width:1}
  #printArea .frame{stroke:#111;stroke-width:.5}
  #printArea .centerline{stroke:#888;stroke-width:.4}
  #printArea .dim line{stroke:#333;stroke-width:.35}
  #printArea .dim text{fill:#111}
  #printArea .tt{fill:#333}
  #printArea .tb{fill:#555}
  #printArea .tbv{fill:#111}
  #printArea .tbh{fill:#111}
  #printArea .tn{fill:#111}
}