/* 앱 셸 구조(헤더 · 경로 띠 · 좌측 레일 · 내부 스크롤 창)는 OEM 카탈로그 방식. 색·글자 토큰은 DESIGN.md */
  :root {
    --bg:#e6e9ec; --surface:#fbfcfd; --tool:#dbe0e4; --ink:#15191d; --mute:#525a63; --line:#c4cad0; --hair:#e4e7ea;
    --acc:#c2410c; --acc-d:#9a3412; --sel:#fde7d9; --ok:#1f7a4d; --r:3px;
    --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  }
  * { box-sizing:border-box; }
  html { scrollbar-color:#9aa2ab transparent; }
  body { margin:0; height:100vh; overflow:hidden; display:grid; grid-template:auto auto 1fr / 50px 1fr;
    font:14px/1.45 "Pretendard Variable",Pretendard,"Malgun Gothic",system-ui,sans-serif; color:var(--ink); background:var(--bg); caret-color:var(--acc); }
  ::selection { background:var(--acc); color:#fff; }
  a { color:inherit; text-decoration:none; }
  button, input, select { font:inherit; color:inherit; }
  :focus-visible { outline:2px solid var(--acc); outline-offset:-2px; }
  small { display:block; font-size:12.5px; color:var(--mute); }
  .mono { font-family:var(--mono); font-size:13px; }
  .num, .mono { font-variant-numeric:tabular-nums; }
  .r { text-align:right; }

  header { grid-column:1 / -1; display:flex; align-items:center; gap:16px; height:72px; padding:0 20px; background:#fff; border-bottom:2px solid var(--hair); }
  select { height:44px; padding:0 10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); font-weight:700; min-width:150px; cursor:pointer; }
  header form { display:flex; width:260px; height:36px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
  header form:focus-within { border-color:var(--acc); }
  header input { flex:1; min-width:0; border:0; background:none; padding:0 10px; outline:0; }
  header input::placeholder { color:var(--mute); }
  header form button, .icon { display:inline-flex; align-items:center; justify-content:center; width:36px; border:0; background:none; color:var(--mute); cursor:pointer; border-radius:var(--r); transition:color .15s, background-color .15s; }
  header form button:hover, .icon:hover { color:var(--acc); }
  .cartlink { margin-left:auto; display:flex; align-items:center; gap:6px; height:36px; padding:0 8px; border-radius:var(--r); transition:background-color .15s; }
  .cartlink:hover { background:var(--bg); }
  #cartN { min-width:20px; text-align:center; background:var(--ink); color:#fff; border-radius:2px; padding:0 5px; font-size:12px; font-weight:700; }
  #cartN.bump { animation:bump .3s cubic-bezier(.16,1,.3,1); }
  @keyframes bump { 40% { background:var(--acc); transform:scale(1.2); } }

  .strip { grid-column:1 / -1; display:flex; align-items:center; gap:16px; min-height:52px; padding:6px 20px 6px 60px; }
  nav.crumb { display:flex; flex-wrap:wrap; align-items:center; flex:1; }
  nav.crumb a:hover { text-decoration:underline; text-underline-offset:3px; }
  nav.crumb > * + *::before { content:""; display:inline-block; width:6px; height:6px; margin:0 13px 1px 9px; border:solid var(--ink); border-width:2px 2px 0 0; transform:rotate(45deg); }
  nav.crumb .nav { display:inline-flex; gap:2px; margin-left:8px; }
  nav.crumb .nav::before { display:none; }
  .wordmark { display:flex; align-items:center; gap:6px; font-weight:800; font-size:18px; letter-spacing:-.01em; }
  .wordmark svg { color:var(--acc); }
  .wordmark small { font-weight:500; margin-left:6px; }

  .rail { grid-row:3; background:var(--ink); padding:6px 0 0 4px; display:flex; flex-direction:column; gap:4px; }
  .rail a { display:flex; align-items:center; justify-content:center; height:42px; color:#aeb6be; border-radius:4px 0 0 4px; transition:color .15s, background-color .15s; }
  .rail a:hover { color:#fff; }
  .rail a[aria-current] { background:var(--surface); color:var(--ink); }

  main { grid-row:3; margin:0 10px 0 10px; min-height:0; display:flex; background:var(--surface); }
  .pane { display:flex; flex-direction:column; min-width:0; min-height:0; flex:1; border-right:1px solid var(--hair); position:relative; }
  .pane:last-child { border-right:0; }
  .hd { flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; height:43px; padding:0 16px; font-weight:600; color:var(--mute); border-bottom:2px solid var(--acc); white-space:nowrap; overflow:hidden; }
  .bd { flex:1; min-height:0; overflow:auto; }
  .w-t { flex:0 0 280px; } .w-dia { flex:0 0 28%; min-width:260px; }
  .empty { padding:18px 16px; color:var(--mute); max-width:60ch; }

  a.row { display:flex; gap:16px; padding:9px 16px; border-bottom:1px solid var(--hair); transition:background-color .15s; }
  a.row:hover { background:var(--bg); }
  a.row[aria-current] { background:var(--tool); font-weight:600; }
  a.row .code { flex:0 0 40px; color:var(--mute); font-variant-numeric:tabular-nums; }
  a.row .yr { margin-left:auto; color:var(--mute); font-weight:400; font-variant-numeric:tabular-nums; }
  .tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; padding:16px; }
  .tiles a { display:flex; align-items:center; justify-content:center; height:84px; border:1px solid var(--line); border-radius:var(--r); font-weight:700; font-size:16px; transition:background-color .15s, border-color .15s; }
  .tiles a:hover { background:var(--sel); border-color:var(--acc); }

  table { width:100%; border-collapse:collapse; }
  th, td { padding:9px 12px; text-align:left; vertical-align:top; }
  th.r, td.r { text-align:right; white-space:nowrap; }
  thead th { position:sticky; top:0; z-index:1; height:43px; vertical-align:middle; background:var(--surface); color:var(--mute); font-weight:600; white-space:nowrap; box-shadow:inset 0 -2px var(--acc); }
  tbody tr > * { border-bottom:1px solid var(--hair); }
  tr.fg td { color:var(--mute); font-weight:700; }
  tr.link { cursor:pointer; transition:background-color .15s; }
  tr.link:hover { background:var(--bg); }
  tr.part { cursor:pointer; }
  tr.part > * { background:var(--tool); transition:background-color .15s; }
  tbody.sel tr.part > * { background:var(--sel); }
  .pn { font-weight:600; margin:0 8px; }
  .need { float:right; color:var(--mute); }
  .bom thead th { height:34px; font-size:12.5px; box-shadow:inset 0 -1px var(--line); }
  tr.offer td { vertical-align:middle; white-space:nowrap; padding-top:6px; padding-bottom:6px; }
  tr.offer:hover { background:#f4f6f8; }
  .filter { display:flex; align-items:center; gap:14px; font-weight:400; }
  .filter input[type=search] { width:170px; height:28px; padding:0 8px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
  .filter label { display:flex; align-items:center; gap:5px; cursor:pointer; }
  .filter input[type=checkbox] { accent-color:var(--acc); }
  .q { width:48px; height:28px; margin-right:6px; padding:0 4px; text-align:right; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }

  .tree, .tree ul { list-style:none; margin:0; padding:0; }
  .tree ul { margin-left:15px; border-left:1px solid var(--line); }
  .tree a { display:flex; gap:8px; align-items:baseline; padding:6px 12px 6px 8px; transition:background-color .15s; }
  .tree a::before { content:""; flex:none; width:5px; height:5px; margin:0 3px 2px 2px; border:solid var(--mute); border-width:0 1.5px 1.5px 0; transform:rotate(-45deg); transition:transform .15s; }
  .tree a[aria-expanded=true]::before { transform:rotate(45deg); }
  .tree a:not([aria-expanded])::before { border-color:transparent; }
  .tree a:hover { background:var(--bg); }
  .tree a[aria-expanded=true] { font-weight:600; }
  .tree a.cur, .tree a[aria-current] { background:var(--tool); font-weight:600; }
  .tree .code, .tree .yr { color:var(--mute); font-weight:400; font-variant-numeric:tabular-nums; }
  .tree .yr { margin-left:auto; }
  .no { font-weight:700; white-space:nowrap; }
  .ok { color:var(--ok); }
  .price { font-weight:700; }
  .g { display:inline-block; font-size:11px; font-weight:700; line-height:16px; padding:0 5px; border:1px solid var(--ink); border-radius:2px; }
  .g.OE { background:var(--ink); color:#fff; }
  .g.AM { border-style:dashed; border-color:var(--mute); color:var(--mute); }
  .btn { border:1px solid var(--acc); background:var(--acc); color:#fff; border-radius:var(--r); padding:3px 12px; font-weight:600; cursor:pointer; transition:background-color .15s; }
  .btn:hover { background:var(--acc-d); border-color:var(--acc-d); }
  .btn:active { transform:translateY(1px); }
  .btn:disabled { background:var(--tool); border-color:var(--line); color:var(--mute); cursor:not-allowed; transform:none; }
  .step { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; vertical-align:middle; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); cursor:pointer; }
  .step:hover { background:var(--tool); }
  .qty { display:inline-block; min-width:28px; text-align:center; }
  tr.total td { background:var(--tool); font-weight:700; }
  .pay { padding:12px 16px; display:flex; gap:12px; align-items:center; }

  .dia-wrap { padding:16px; }
  svg.dia { display:block; margin:0 auto; height:auto; }
  .dia line { stroke:#9aa2ab; }
  .dia .hub { fill:var(--tool); stroke:#9aa2ab; }
  .dia .co { cursor:pointer; }
  .dia .co rect { fill:var(--surface); stroke:var(--ink); transition:fill .15s; }
  .dia .co.on rect { fill:var(--acc); stroke:var(--acc); }
  .dia .co.on text { fill:#fff; }
  .dia .cap { fill:var(--mute); font-size:11px; }
  .zoom { position:absolute; left:14px; bottom:14px; display:flex; gap:6px; }
  .zoom button { width:28px; height:28px; border:0; border-radius:50%; background:var(--ink); color:#fff; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
  .zoom button:last-child { width:auto; padding:0 10px; border-radius:14px; font-size:12px; }
  .zoom button:hover { background:var(--acc); }

  #msg { position:fixed; right:20px; bottom:16px; z-index:5; max-width:min(480px,calc(100vw - 90px)); padding:10px 14px; border-radius:var(--r); background:var(--ink); color:#fff; box-shadow:0 6px 18px rgba(21,25,29,.25); transition:opacity .2s, transform .2s cubic-bezier(.16,1,.3,1); }
  #msg:empty { opacity:0; transform:translateY(8px); pointer-events:none; }

  @media (max-width:860px) {
    body { display:block; height:auto; overflow:auto; padding-bottom:52px; }
    header { flex-wrap:wrap; height:auto; padding:10px 12px; gap:8px; }
    header form { flex:1 1 150px; width:auto; }
    .strip { padding:6px 12px; }
    .wordmark small { display:none; }
    .rail { position:fixed; inset:auto 0 0 0; z-index:4; height:52px; flex-direction:row; padding:6px 6px 0; }
    .rail a { flex:1; height:auto; border-radius:4px 4px 0 0; }
    main { margin:0; flex-direction:column; }
    .pane { flex:none !important; min-width:0; border-right:0; }
    .bd { overflow-x:auto; }
    .bom { min-width:560px; }
    .tree-pane { display:none; }
    .hd { height:auto; min-height:43px; flex-wrap:wrap; padding:6px 12px; }
    #msg { right:12px; bottom:64px; }
  }
  @media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }
  @media print { header, .rail, .zoom, #msg { display:none; } body { display:block; height:auto; overflow:visible; } .bd { overflow:visible; } }