:root{
  --bg:#F2F5F9; --card:#FFFFFF; --ink:#152338; --muted:#5B6B80; --line:#DCE3EC; --line-soft:#EEF2F6;
  --navy:#0E1B2C; --navy-2:#16293F; --navy-ink:#C9D6E6;
  --blue:#175CD3; --blue-dark:#124AA8; --blue-soft:#DCE9FF; --eq:#E3ECF8; --pos:#EEF2F7;
  --warn:#FFF3D6; --warn-ink:#8A5A00; --danger:#B42318; --ok:#067647; --ok-soft:#E3F5EC;
  --radius:12px;
  --font:"Pretendard","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --mono:Consolas,"D2Coding",ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--card);padding:7px 13px;border-radius:8px;white-space:nowrap}
button:hover:not(:disabled){border-color:#AFC0D6;background:#F8FAFD}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
button.primary:hover:not(:disabled){background:var(--blue-dark)}
button.primary-soft{background:var(--blue-soft);border-color:#BFD5FB;color:var(--blue-dark);font-weight:600}
button.danger{color:var(--danger)}
button.small{padding:4px 10px;font-size:13px}
input,select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;width:100%}
input:focus,select:focus{outline:2px solid var(--blue-soft);border-color:var(--blue)}
input:disabled,select:disabled{background:#F2F4F7;color:#98A2B3}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;padding:0 22px;height:56px;
  background:linear-gradient(90deg,var(--navy),var(--navy-2));color:#fff;box-shadow:0 2px 10px rgba(14,27,44,.18)}
.brand{font-size:18px;font-weight:800;letter-spacing:-.2px;white-space:nowrap}
.tabs{display:flex;gap:2px;height:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:none;border-radius:0;background:none;color:var(--navy-ink);height:100%;padding:0 16px;font-weight:600;
  border-bottom:3px solid transparent;display:flex;align-items:center;gap:8px}
.tabs button i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.12);font-size:12px}
.tabs button:hover:not(:disabled){background:rgba(255,255,255,.06);color:#fff}
.tabs button.active{color:#fff;border-bottom-color:#5AA2FF}
.tabs button.active i{background:#5AA2FF;color:var(--navy)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.who{color:var(--navy-ink);font-size:13px;white-space:nowrap}
.who b{color:#fff}
.menu-wrap{position:relative}
/* price table actions */
.acts{display:grid;grid-template-columns:1fr;gap:5px;min-width:112px}
.acts > *{width:100%;text-align:center;justify-content:center}
a.btnlink{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--blue-dark);
  border-radius:8px;padding:4px 10px;font-size:13px;text-decoration:none;white-space:nowrap}
a.btnlink:hover{border-color:#AFC0D6;background:#F8FAFD}
td.unitp{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
td.qnote{font-size:13px;color:var(--muted);max-width:280px}
.q-need{display:inline-block;white-space:nowrap;font-size:13px;font-weight:600;color:var(--muted);background:var(--pos);border-radius:99px;padding:2px 10px;margin-left:6px;vertical-align:middle}
/* sections + sub tabs */
.sections{display:flex;gap:4px;height:100%;align-items:center}
.sections button{border:none;background:none;color:var(--navy-ink);font-weight:700;font-size:15px;padding:8px 14px;border-radius:9px;white-space:nowrap}
.sections button:first-child{font-size:17px;font-weight:800;letter-spacing:-.2px}
.sections button:hover:not(:disabled){background:rgba(255,255,255,.08);color:#fff}
.sections button.active{background:rgba(255,255,255,.14);color:#fff}
nav.subtabs{position:sticky;top:56px;z-index:25;display:flex;height:46px;padding:0 14px;background:var(--navy-2);border-bottom:1px solid rgba(255,255,255,.06)}
nav.subtabs[hidden]{display:none}
/* library */
.lib-grid{display:grid;grid-template-columns:fit-content(560px) minmax(0,1fr);gap:14px;align-items:start}
.lib-tree{min-width:340px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px;position:sticky;top:116px;max-height:calc(100vh - 140px);overflow:auto;scrollbar-gutter:stable}
.lt-head{font-size:12px;font-weight:700;color:var(--muted);padding:4px 8px 6px}
.lt-item{display:flex;align-items:flex-start;gap:6px;width:100%;border:none;background:none;text-align:left;padding:7px 10px;border-radius:8px;font-size:14px;line-height:1.4}
.lt-name{flex:1;min-width:0;white-space:nowrap;overflow-wrap:anywhere;padding-left:1.3em;text-indent:-1.3em}
.lt-item em{flex:none;margin-left:auto;margin-top:1px;font-style:normal;font-size:12px;color:var(--muted);background:var(--pos);border-radius:99px;padding:0 7px}
.lt-item:hover:not(:disabled){background:#F3F6FA}
.lt-item.on{background:var(--blue-soft);color:var(--blue-dark);font-weight:700}
.lt-tw{display:inline-block;width:14px;color:var(--muted);flex:none;cursor:pointer}
.lt-empty{color:var(--muted);font-size:13px;padding:8px 10px}
.lib-main{min-width:0}
.lib-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.lib-bar .lib-q{flex:1;min-width:200px}
.lib-pick{display:none;width:auto}
.lib-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 10px;font-size:14px;color:var(--muted)}
.lib-crumbs a{color:var(--blue-dark);cursor:pointer;font-weight:600}
.lib-crumbs a:hover{text-decoration:underline}
.lib-fact{margin-left:auto;display:flex;gap:6px}
tr.lib-dir td{background:#FAFBFD;cursor:pointer;text-align:left}
tr.lib-dir:hover td{background:var(--blue-soft)}
td.lib-title{font-size:14px;text-align:left}
td.lib-title a{color:var(--ink);text-decoration:none}
td.lib-title a:hover{color:var(--blue);text-decoration:underline}
td.lib-path{font-size:12px;color:var(--muted);text-align:left}
td.lib-file{font-size:13px;white-space:nowrap}
.up-list{max-height:180px;overflow:auto;background:var(--bg);border-radius:8px;padding:8px 12px;margin:0 0 12px;font-size:13px}
a.btnlink.primary-link{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
a.btnlink.primary-link:hover{background:var(--blue-dark)}
.up-progress{height:24px;background:var(--pos);border-radius:6px;position:relative;overflow:hidden;margin:6px 0}
.up-bar{position:absolute;inset:0 auto 0 0;width:0;background:var(--blue-soft);transition:width .2s}
.up-progress span{position:relative;font-size:12px;line-height:24px;padding-left:10px;color:var(--blue-dark);font-weight:600}
/* P/N lookup */
.lk-group{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:12px}
.lk-ghead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lk-ghead b{font-size:16px}
.lk-ghead .btnlink{margin-left:auto}
.lk-gnote{color:var(--muted);font-size:13px}
.lk-table td.lk-desc{font-size:13px;color:#344054;max-width:320px}
.lk-sku{font-size:11px;color:var(--muted);font-weight:400}
tr.lk-exact td{background:#F3FBF6}
.lk-toggle{margin-top:8px}
.muted{color:var(--muted);font-weight:400}
.tabs button.tab-lookup i{background:none;font-size:13px}
.lookup-box{display:flex;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:10px}
.lookup-box #lkPn{flex:1;font-size:17px;font-family:var(--mono);padding:11px 14px}
.lookup-box #lkQty{width:110px;text-align:center;font-size:15px}
.lookup-box #lkQty::placeholder{color:var(--muted)}
.lookup-box button{padding:0 26px;font-size:15px}
.lk-recent{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center;color:var(--muted);font-size:13px}
.lk-recent button{padding:3px 10px;font-size:12px;font-family:var(--mono);border-radius:99px}
.lk-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:4px 0 10px}
.lk-head h2{margin:0;font-size:18px;font-family:var(--mono)}
.lk-head span{color:var(--muted);font-size:13px}
.lk-head a{margin-left:auto;font-size:13px}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.need{background:var(--warn);color:var(--warn-ink)}
.tag.bad{background:#FEE4E2;color:var(--danger)}
.common-btn{background:#F5B83D;border-color:#F5B83D;color:#1B1405;font-weight:700}
.common-btn:hover:not(:disabled){background:#FFC857;border-color:#FFC857}
.menu-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;font-weight:600}
.menu-btn:hover:not(:disabled){background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
.hdr-actions{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 18px 40px rgba(16,24,40,.18)}
.hdr-actions.open{display:flex;flex-direction:column}
.hdr-actions button{border:none;text-align:left;padding:9px 12px;border-radius:8px}
.hdr-actions button[hidden]{display:none}
.hdr-actions button#btnLogout{border-top:1px solid var(--line-soft);border-radius:0 0 8px 8px;color:var(--danger)}

/* ---------- estimate bar + KPIs ---------- */
.estbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 22px;background:#fff;border-bottom:1px solid var(--line)}
.est-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.est-pick label{font-weight:700;color:var(--muted);font-size:13px}
.est-pick select{width:auto;min-width:220px;max-width:340px;font-weight:700;font-size:15px;padding:7px 10px}
.kpis{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.kpi{background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:6px 14px;min-width:96px}
.kpi span{display:block;font-size:12px;color:var(--muted)}
.kpi b{font-size:18px;font-variant-numeric:tabular-nums}
.kpi em{font-style:normal;color:var(--muted);font-size:12px;margin-left:2px}
.kpi.total{background:var(--blue-soft);border-color:#BFD5FB;min-width:170px}
.kpi.total b{color:var(--blue-dark);font-size:20px}
.kpi.need{background:var(--warn);border-color:#F5DFA8}
.kpi.need b{color:var(--warn-ink)}

.subbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 22px;background:#fff;border-bottom:1px solid var(--line)}
.status{color:var(--muted);min-height:20px;font-size:13px;flex:1;min-width:200px}
.status.error{color:var(--danger)} .status.good{color:var(--ok)}
.fx{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.fx input{width:80px;text-align:right;padding:4px 8px}
.fx strong{color:var(--ink);white-space:nowrap}

main{padding:14px 22px 40px;max-width:1500px;margin:0 auto}
.intro{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:10px;padding:10px 14px;margin-bottom:14px;color:var(--muted)}
.intro b{color:var(--ink);margin-right:6px}
.hint{color:var(--muted);margin:10px 0 0;font-size:13px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;min-width:0}
.bar{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.bar h2{font-size:15px;margin:0 auto 0 0}
.sub{color:var(--muted);margin:-4px 0 8px}
.seg{display:inline-flex;background:#E7ECF3;border-radius:9px;padding:3px}
.seg label{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:7px;cursor:pointer;font-weight:600;color:var(--muted)}
.seg input{width:auto;display:none}
.seg label:has(input:checked){background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12)}

/* ---------- tables ---------- */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;max-height:60vh;background:#fff}
.table-wrap.short{max-height:260px}
.table-wrap.tall{max-height:calc(88vh - 190px);min-height:min(420px,calc(88vh - 190px))}   /* 공통 부자재: use the screen height */
table{border-collapse:collapse;width:100%}
th,td{padding:9px 12px;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line);text-align:center;vertical-align:middle}
th:last-child,td:last-child{border-right:none}
th{background:#EEF2F7;position:sticky;top:0;z-index:1;font-weight:700;white-space:nowrap;font-size:13px;color:#344054;
   border-bottom:1px solid #D3DBE6}
tbody tr{cursor:pointer}
tbody tr:hover td{background:#F7FAFD}
tbody tr.sel td{background:var(--blue-soft)!important}
tr.warn td{background:var(--warn)}
tr.lv0 td{background:var(--eq);font-weight:700}
tr.lv1 td{background:var(--pos);font-weight:700}
td.c,th.c{text-align:center}
/* tree view: the first column keeps its indent so the 장비 → 포지션 → 자재 levels stay readable */
#bomBody td.tree-label{text-align:left}
td.pn{font-family:var(--mono);white-space:nowrap}
td.amount{font-weight:700}
.empty{padding:26px;color:var(--muted);text-align:center}
.twisty{display:inline-block;width:18px;color:var(--muted)}
.tag{display:inline-block;font-size:12px;padding:1px 8px;border-radius:99px;background:var(--pos);color:var(--muted);white-space:nowrap}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.need{background:var(--warn);color:var(--warn-ink)}
.tag.applied{background:var(--blue);color:#fff}
.bom-actions{margin-top:12px}
.grand{margin-left:auto;font-weight:700;font-size:15px;white-space:nowrap}
.grand b{color:var(--blue-dark);font-size:18px}

/* ---------- combination ---------- */
.combo-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.combo-actions select{max-width:420px}
.combo-actions .right{margin-left:auto}
.eqgroup{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.eqhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#F3F6FA;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
.eqhead .name{font-weight:700;font-size:15px;margin-right:auto}
.eqhead .qty{font-weight:800;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 10px}
.prow,.mrow{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line-soft)}
.prow:first-of-type{border-top:none}
.mrow{padding-left:46px;background:#FCFDFE}
.prow label,.mrow label{display:flex;align-items:center;gap:10px;flex:1;cursor:pointer;min-width:0}
.prow input,.mrow input{width:20px;height:20px;flex:none;accent-color:var(--blue)}
.state{color:var(--muted);font-size:13px;text-align:right}
.state.on{color:var(--ok)} .state.need{color:var(--warn-ink)}
.pn{font-family:var(--mono)}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(16,24,40,.45);display:flex;align-items:flex-start;justify-content:center;padding:6vh 12px;z-index:50;overflow:auto}
.modal{background:#fff;border-radius:14px;padding:22px;width:min(560px,100%);box-shadow:0 20px 50px rgba(16,24,40,.25)}
.modal.wide{width:min(1150px,100%)}
.modal h3{margin:0 0 14px;font-size:17px}
.field{display:grid;grid-template-columns:190px 1fr;gap:12px;align-items:center;margin-bottom:10px}
.field.hide{display:none}
.modal .err{color:var(--danger);min-height:20px;margin:6px 0}
.modal .actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.modal .actions .left{margin-right:auto;display:flex;gap:8px;flex-wrap:wrap}
.keyset{color:var(--ok);font-size:12px}
.badge{display:inline-block;font-size:12px;padding:1px 8px;border-radius:99px;background:var(--pos);color:var(--muted)}
.badge.admin{background:var(--blue-soft);color:var(--blue-dark)}
.badge.files{background:#E7F6EC;color:#166534}
.badge.off{background:#FEE4E2;color:var(--danger)}
.qsum{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.qsum .kpi{min-width:130px}

/* ---------- phone ---------- */
@media (max-width:820px){
  .topbar{flex-wrap:wrap;height:auto;padding:8px 12px 0;gap:6px 10px}
  .brand{font-size:16px}
  .who{display:none}
  .tabs{order:3;width:100%;height:42px}
  .tabs button{padding:0 10px;font-size:13px;flex:1;justify-content:center}
  .hdr-actions{position:fixed;left:12px;right:12px;top:52px;min-width:0}
  .estbar{padding:10px 12px;gap:10px}
  .est-pick{width:100%;gap:6px}
  .est-pick label{display:none}
  .est-pick select{flex:1 1 100%;min-width:0;max-width:none}
  .est-pick button{flex:1}
  .kpis{margin-left:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .kpi{min-width:0;padding:4px 10px}
  .kpi span{font-size:11px}
  .kpi b{font-size:15px}
  .kpi.total{grid-column:1/-1;order:-1;display:flex;align-items:baseline;gap:8px;padding:8px 12px}
  .kpi.total span{font-size:13px;margin-right:auto}
  .intro .t{display:none}
  .bom-actions button:disabled{display:none}
  .subbar{padding:8px 12px}
  .fx #fxLabel{display:none}
  main{padding:10px 12px 30px}
  .intro{font-size:13px;padding:8px 12px}
  .grid2{grid-template-columns:1fr}
  .field{grid-template-columns:1fr;gap:4px}
  .combo-actions select{max-width:none}
  .combo-actions .right{margin-left:0;width:100%}
  /* tables become labelled cards */
  .table-wrap,.table-wrap.short,.table-wrap.tall{max-height:none;min-height:0;overflow:visible;border:none;background:none;border-radius:0}
  .table-wrap table,.table-wrap tbody{display:block}
  .table-wrap thead{display:none}
  .table-wrap tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:6px 0}
  .table-wrap tbody td{display:flex;gap:10px;border:none!important;padding:3px 12px!important;background:none!important;text-align:left;white-space:normal}
  .table-wrap tbody td::before{content:attr(data-l);flex:0 0 96px;color:var(--muted);font:400 12px/1.6 var(--font);word-break:keep-all}
  .table-wrap tbody td:empty{display:none}
  .table-wrap tbody td.empty{display:block;text-align:center}
  .table-wrap tbody td.empty::before{content:none}
  .table-wrap td.pn{word-break:break-all}
  .table-wrap tbody tr.sel{background:var(--blue-soft);border-color:var(--blue)}
  .table-wrap tbody tr.lv0{background:var(--eq)}
  .table-wrap tbody tr.lv1{background:var(--pos)}
  .table-wrap tbody tr.warn{background:var(--warn)}
  #bomBody td:first-child{font-weight:700}
  #bomBody tr[data-lv] td:first-child::before{content:none}
  #bomBody tr[data-lv="1"]{margin-left:12px}
  #bomBody tr[data-lv="2"]{margin-left:24px}
  .bom-actions{position:sticky;bottom:0;z-index:15;background:var(--bg);margin:0 -12px;padding:10px 12px;border-top:1px solid var(--line);gap:6px}
  .bom-actions button{padding:7px 10px;font-size:13px;background:#fff}
  .bom-actions button.primary{background:var(--blue)}
  .grand{width:100%;order:-1;margin:0 0 2px}
  .hide-m{display:none!important}
  .lookup-box{flex-wrap:wrap;padding:10px}
  .lookup-box #lkPn{flex:1 1 100%}
  .lookup-box #lkQty{flex:1;width:auto}
  .lookup-box button{flex:2;padding:10px}
  .tabs button{padding:0 4px;font-size:13px;gap:4px;flex:1 1 0;min-width:0}
  .tabs button i{display:none}
  .fx{flex-wrap:wrap;min-width:0;max-width:100%}
  .topbar{padding:6px 10px;gap:6px}
  .sections{order:3;width:100%;height:auto;gap:2px;padding-bottom:6px}
  .sections button{flex:1;padding:7px 4px;font-size:13px}
  .sections button:first-child{font-size:13px}
  .top-right{margin-left:auto}
  nav.subtabs{position:relative;top:0;height:42px;padding:0 6px}
  .lib-grid{grid-template-columns:1fr}
  .lib-tree{display:none}
  .lib-pick{display:block;flex:1 1 100%;width:100%;min-width:0;max-width:100%;text-overflow:ellipsis}
  .lib-crumbs{overflow-wrap:anywhere}
  .lib-bar .lib-q{min-width:0;flex:1 1 100%}
  .lib-bar button{flex:1}
  .lib-fact{margin-left:0;width:100%}
  .lib-fact button{flex:1}
  tr.lib-dir td::before{content:none!important}
  .fx input{width:64px}
  .acts{grid-template-columns:repeat(3,1fr);width:100%;min-width:0}
  .acts:has(> :only-child){grid-template-columns:1fr}
  td.qnote{max-width:none}
  .table-wrap tbody td:has(> .acts)::before{content:none}
  .tabs button{padding:0 4px;font-size:13px;gap:4px;flex:1 1 0;min-width:0}
  .tabs button i{display:none}
}
.lib-grid.drop{outline:3px dashed #2563eb;outline-offset:6px;border-radius:12px;background:#eff6ff}
.bulk-log{max-height:180px;overflow:auto;font-size:13px;margin:8px 0;text-align:left}
.bulk-log:empty{display:none}
.bulk-log div{padding:3px 0;border-bottom:1px solid var(--line)}
#tab-result .seg + #btnCommon{margin-left:10px}

/* app mode on phones (홈 화면에 추가): keep the top bar below the notch / status bar */
@media (max-width:820px){
  .topbar{padding-top:calc(6px + env(safe-area-inset-top, 0px))}
  body{padding-bottom:env(safe-area-inset-bottom, 0px)}
}
@media (display-mode: standalone){ html,body{overscroll-behavior-y:none} }

/* ---------------------------------------------------------------- top / bottom bars
   PC: unchanged. Phone: one slim top row (title · ☰ 메뉴) + app-style bottom tab bar. */
.m-title{display:none}
.sections .ic,.sections .short{display:none}
@media (max-width:820px){
  .m-title{display:block;margin-right:auto;font-size:18px;font-weight:800;letter-spacing:-.3px;color:#fff;white-space:nowrap}
  .topbar{flex-wrap:nowrap;align-items:center;min-height:52px;height:auto;gap:8px;
          padding:calc(6px + env(safe-area-inset-top, 0px)) 12px 6px}
  .top-right{margin-left:0;gap:8px}
  .menu-btn{padding:7px 12px}
  .hdr-actions{top:calc(56px + env(safe-area-inset-top, 0px))}
  .sections{position:fixed;left:0;right:0;bottom:0;z-index:40;order:0;width:auto;height:auto;display:flex;gap:2px;
            padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
            background:var(--navy);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -4px 14px rgba(14,27,44,.22)}
  .sections button,.sections button:first-child{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
            padding:6px 2px 5px;border-radius:10px;font-size:11.5px;font-weight:600;letter-spacing:0;color:#93A6BF;background:none}
  .sections button.active{color:#fff;background:rgba(255,255,255,.10)}
  .sections button.active .ic{stroke:#F5B83D}
  .sections .ic{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .sections .full{display:none}
  .sections .short{display:block;line-height:1.1}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom, 0px))}
  .bom-actions{bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
  .subbar{gap:6px 10px;padding:6px 12px}
  .status{flex:1 1 100%;min-width:0;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
  .fx{gap:6px;font-size:13px}
  .fx button{padding:5px 9px}
}

/* 공통 부자재 (통합 BOM, left of 일괄 가격 조회): soft amber */
.common-soft{background:#FFF5DE;border-color:#F3D998;color:#7A5300;font-weight:600}
.common-soft:hover:not(:disabled){background:#FFEDC2;border-color:#EBC66B}