/* ══════════════════════════════════════════
     DASHBOARD HEADER
     ══════════════════════════════════════════ */
  header { background: var(--c-header); color: #fff; padding: var(--sp-4) var(--sp-8); display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--c-primary); }
  header h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
  header p { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }

  .top-nav { display: flex; gap: 2px; }
  .nav-link { padding: var(--sp-2) var(--sp-4); color: rgba(255,255,255,0.5); cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); transition: all var(--tr-fast); border-bottom: 2px solid transparent; user-select: none; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
  .nav-link:hover { color: rgba(255,255,255,0.85); }
  .nav-link.active { color: #fff; border-bottom-color: var(--c-primary); }

  /* ── Login Gate ── */
  #login-gate {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: var(--c-bg);
  }
  .login-card {
    background: var(--c-surface); border-radius: var(--r-xl); padding: 48px;
    text-align: center; box-shadow: var(--shadow-lg); max-width: 400px; width: 90%;
    border: 1px solid var(--c-border-light);
  }
  .login-card h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); letter-spacing: -0.02em; }
  .login-card p { color: var(--c-text-secondary); margin-bottom: var(--sp-6); }
  .login-card .sub { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-4); }
  .btn-google {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6); border: 1px solid var(--c-border);
    border-radius: var(--r-md); background: var(--c-surface); cursor: pointer;
    font-size: var(--fs-md); font-weight: var(--fw-medium);
    transition: background var(--tr-fast), box-shadow var(--tr-fast);
  }
  .btn-google:hover { background: var(--c-surface-alt); box-shadow: var(--shadow-sm); }
  .no-access { color: var(--c-danger); font-weight: var(--fw-medium); }

  /* Auth UI */
  .header-right { display: flex; align-items: center; gap: var(--sp-4); }
  #auth-area { display: flex; align-items: center; gap: var(--sp-2); }
  .auth-btn { padding: var(--sp-1) var(--sp-4); border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,0.25);
    background: transparent; color: #fff; cursor: pointer; font-size: var(--fs-xs);
    font-family: var(--font-sans); transition: all var(--tr-fast); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--fw-semibold); }
  .auth-btn:hover { background: rgba(255,255,255,0.08); }
  .auth-btn.sign-in { background: var(--c-primary); border-color: var(--c-primary); }
  .auth-btn.sign-in:hover { background: var(--c-primary-hover); }
  .user-name { color: rgba(255,255,255,0.7); font-size: var(--fs-xs); }

  @media (max-width: 640px) {
    header { flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); align-items: flex-start; }
    header h1 { font-size: var(--fs-xl); }
    .header-right { width: 100%; flex-direction: column; gap: var(--sp-2); }
    .top-nav { width: 100%; }
    .nav-link { flex: 1; text-align: center; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
    #auth-area { width: 100%; justify-content: flex-end; }
  }

  /* ══════════════════════════════════════════
     PAGE / SECTION TOGGLE
     ══════════════════════════════════════════ */
  .page { display: none; }
  .page.active { display: block; }
  .section { display: none; }
  .section.active { display: block; animation: ds-fadeIn var(--tr-slow); }

  .container { max-width: 1400px; margin: 0 auto; padding: var(--sp-6) var(--sp-4); }
  #page-assets .container { max-width: none; }
  #page-shipments .container { max-width: none; }

  /* ── Shipments ── */
  .sh-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  .sh-toolbar input[type=text] { flex:1; min-width:200px; padding:6px 10px; border:1px solid var(--c-border); border-radius:6px; font-size:var(--fs-sm); background:var(--c-surface); color:var(--c-text); }
  .sh-add-btn { padding:7px 16px; background:var(--c-primary); color:#fff; border:none; border-radius:6px; font-size:var(--fs-sm); font-weight:var(--fw-semibold); cursor:pointer; white-space:nowrap; }
  .sh-add-btn:hover { opacity:.88; }
  #sh-table-wrap { overflow-x:auto; }
  #sh-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); table-layout:fixed; }
  #sh-table th { background:var(--c-surface); color:var(--c-text-2); font-weight:var(--fw-semibold); padding:8px 10px; text-align:left; border-bottom:2px solid var(--c-border); white-space:nowrap; position:sticky; top:0; z-index:1; }
  #sh-table td { padding:7px 10px; border-bottom:1px solid var(--c-border); vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #sh-table tbody tr:hover { background:var(--c-surface); }
  #sh-table tbody tr.sh-editing { background:color-mix(in srgb, var(--c-primary) 5%, transparent); }
  #sh-table td input, #sh-table td select {
    width:100%; padding:4px 6px; border:1px solid var(--c-primary); border-radius:4px;
    font-size:var(--fs-sm); background:var(--c-bg); color:var(--c-text); box-sizing:border-box;
  }
  .sh-status { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; white-space:nowrap; }
  .sh-status-pending     { background:#fef3c7; color:#92400e; }
  .sh-status-in_transit  { background:#dbeafe; color:#1e40af; }
  .sh-status-customs     { background:#ede9fe; color:#5b21b6; }
  .sh-status-delivered   { background:#d1fae5; color:#065f46; }
  .sh-co-yes { color:#059669; font-weight:600; }
  .sh-co-no  { color:var(--c-text-2); }
  .sh-actions { white-space:nowrap; }
  .sh-btn { padding:3px 10px; border-radius:5px; border:1px solid var(--c-border); font-size:12px; cursor:pointer; background:var(--c-surface); color:var(--c-text); margin-right:4px; }
  .sh-btn:hover { border-color:var(--c-primary); color:var(--c-primary); }
  .sh-btn-save { border-color:var(--c-primary); background:var(--c-primary); color:#fff; }
  .sh-btn-save:hover { opacity:.88; color:#fff; }
  .sh-btn-del { border-color:#e74c3c; color:#e74c3c; }
  .sh-btn-del:hover { background:#e74c3c; color:#fff; }
  .sh-empty { text-align:center; color:var(--c-text-2); padding:40px 0; font-size:var(--fs-sm); }
  .sh-asset-chip { display:inline-block; padding:2px 8px; border-radius:10px; background:var(--c-bg-subtle, #f1f5f9); color:var(--c-text); font-size:11px; font-weight:600; cursor:default; }
  .sh-asset-chip[data-empty="1"] { background:transparent; color:var(--c-text-2); font-weight:400; }
  /* ── shipment modal ── */
  .sh-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
  .sh-modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.45); }
  .sh-modal-panel { position:relative; background:var(--c-surface); border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.25); width:min(900px, 95vw); max-height:90vh; display:flex; flex-direction:column; }
  .sh-modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--c-border-light); }
  .sh-modal-head h2 { margin:0; font-size:17px; font-weight:600; }
  .sh-modal-close { background:transparent; border:none; font-size:18px; cursor:pointer; color:var(--c-text-2); padding:4px 8px; border-radius:6px; }
  .sh-modal-close:hover { background:var(--c-bg-subtle, #f1f5f9); }
  .sh-modal-body { padding:14px 18px; overflow-y:auto; flex:1; }
  .sh-modal-sec { margin-bottom:16px; }
  .sh-modal-sec h3 { margin:0 0 8px; font-size:13px; font-weight:600; color:var(--c-text-2); text-transform:uppercase; letter-spacing:.04em; }
  .sh-modal-selsum { margin-top:8px; font-size:12px; color:var(--c-text-2); font-weight:500; }
  .sh-modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
  .sh-modal-grid label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--c-text-2); font-weight:500; }
  .sh-modal-grid label.full { grid-column:1 / -1; }
  .sh-modal-grid input, .sh-modal-grid select { padding:5px 8px; border:1px solid var(--c-border); border-radius:5px; font-size:13px; background:var(--c-surface); color:var(--c-text); }
  .sh-modal-foot { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--c-border-light); }
  .sh-modal-err { color:#e74c3c; font-size:12px; margin-right:auto; }
  /* ── picker (two-pane) ── */
  .sh-picker-shell { display:grid; grid-template-columns:220px minmax(0,1fr); height:380px; border:1px solid var(--c-border); border-radius:8px; overflow:hidden; background:var(--c-surface); }
  @media (max-width: 720px) { .sh-picker-shell { grid-template-columns:1fr; height:auto; } }
  .sh-picker-left { border-right:1px solid var(--c-border); background:var(--c-bg-subtle, #f7f8fa); display:flex; flex-direction:column; min-width:0; }
  @media (max-width: 720px) { .sh-picker-left { border-right:none; border-bottom:1px solid var(--c-border); } }
  .sh-picker-left-head { padding:8px 10px; border-bottom:1px solid var(--c-border-light); }
  .sh-picker-left-head input { width:100%; box-sizing:border-box; border:1px solid var(--c-border); border-radius:5px; padding:4px 8px; font-size:12px; background:var(--c-surface); color:var(--c-text); }
  .sh-picker-tree { flex:1 1 0; overflow-y:auto; padding:4px 0; min-height:120px; }
  @media (max-width: 720px) { .sh-picker-tree { max-height:200px; } }
  .sh-picker-tree .node { padding:6px 10px; font-size:12.5px; color:var(--c-text); display:flex; align-items:center; gap:6px; cursor:pointer; border-left:2px solid transparent; min-width:0; }
  .sh-picker-tree .node:hover { background:rgba(0,0,0,.04); }
  .sh-picker-tree .node.active { background:var(--c-surface); border-left-color:var(--c-primary); color:var(--c-text); font-weight:600; }
  .sh-picker-tree .node-all { border-bottom:1px solid var(--c-border-light); margin-bottom:4px; padding:8px 10px; }
  .sh-picker-tree .pr-code { font-family:'SF Mono', Menlo, monospace; font-size:11.5px; flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sh-picker-tree .n { color:var(--c-text-2); font-size:11px; font-family:'SF Mono', Menlo, monospace; flex-shrink:0; }
  .sh-picker-tree .node.active .n { color:var(--c-primary); }
  .sh-picker-tree .add-all-btn { background:transparent; border:1px solid transparent; color:var(--c-text-2); font-size:10.5px; padding:1px 5px; border-radius:4px; opacity:0; transition:opacity .12s; flex-shrink:0; }
  .sh-picker-tree .node:hover .add-all-btn { opacity:1; }
  .sh-picker-tree .add-all-btn:hover { border-color:var(--c-primary); color:var(--c-primary); }
  .sh-picker-right { display:flex; flex-direction:column; min-width:0; }
  .sh-picker-toolbar { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--c-border-light); }
  .sh-picker-toolbar input { flex:1 1 0; min-width:0; border:1px solid var(--c-border); border-radius:5px; padding:4px 10px; font-size:12.5px; background:var(--c-surface); color:var(--c-text); }
  .sh-picker-selsum { font-size:11.5px; color:var(--c-primary); font-weight:600; white-space:nowrap; }
  .sh-picker-selsum strong { font-family:'SF Mono', Menlo, monospace; }
  .sh-picker-table { flex:1 1 0; overflow:auto; min-width:0; }
  .sh-picker-table table { width:100%; border-collapse:collapse; font-size:12.5px; }
  .sh-picker-table thead th { position:sticky; top:0; background:var(--c-surface); border-bottom:1px solid var(--c-border); padding:6px 8px; text-align:left; font-weight:500; color:var(--c-text-2); font-size:11px; text-transform:uppercase; letter-spacing:.05em; z-index:1; white-space:nowrap; }
  .sh-picker-table thead th.ck { width:28px; padding-left:12px; }
  .sh-picker-table tbody td { padding:5px 8px; border-bottom:1px solid var(--c-border-light); color:var(--c-text); vertical-align:middle; }
  .sh-picker-table tbody td:first-child { padding-left:12px; }
  .sh-picker-table tbody tr { cursor:pointer; }
  .sh-picker-table tbody tr:hover { background:var(--c-bg-subtle, #f7f8fa); }
  .sh-picker-table tbody tr[data-selected="true"] { background:color-mix(in srgb, var(--c-primary) 8%, transparent); }
  .sh-picker-table tbody tr[data-selected="true"]:hover { background:color-mix(in srgb, var(--c-primary) 13%, transparent); }
  .sh-picker-table input[type="checkbox"] { accent-color:var(--c-primary); width:14px; height:14px; margin:0; vertical-align:middle; }
  .sh-picker-table .ac-code { font-family:'SF Mono', Menlo, monospace; color:var(--c-text); font-weight:600; font-size:11.5px; white-space:nowrap; }
  .sh-picker-table .ac-pr { font-family:'SF Mono', Menlo, monospace; color:var(--c-text-2); font-size:11px; white-space:nowrap; }
  .sh-picker-table .ac-name { font-weight:500; }
  .sh-picker-table .sh-st { font-size:10.5px; padding:1px 7px; border-radius:10px; font-weight:600; white-space:nowrap; }
  .sh-picker-table .sh-st-active   { background:#dcfce7; color:#15803d; }
  .sh-picker-table .sh-st-storage  { background:#fef9c3; color:#a16207; }
  .sh-picker-table .sh-st-disposed { background:#f1f1f2; color:#71717a; }
  .sh-picker-empty { text-align:center; padding:24px 12px; color:var(--c-text-2); font-size:12.5px; }

  @media (min-width: 640px) {
    .container { padding: var(--sp-6); }
  }

  /* ══════════════════════════════════════════
     SUMMARY CARDS
     ══════════════════════════════════════════ */
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
  .cards > .card { padding: var(--sp-4); cursor: pointer; transition: all var(--tr-fast); border-left: 3px solid transparent; border-radius: var(--r-md); }
  .cards > .card:hover { box-shadow: var(--shadow-md); }
  .cards > .card.active { background: var(--c-primary-light); border-left-color: var(--c-primary); }
  .cards > .card .label { font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-1); font-weight: var(--fw-semibold); }
  .cards > .card .value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.2; font-variant-numeric: tabular-nums; }
  .cards > .card .sub { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: var(--sp-1); }

  .cards > .card.total-card { border-left-color: var(--c-cat-total); }
  .cards > .card.robot-arm { border-left-color: var(--c-cat-robot-arm); }
  .cards > .card.robot-hand { border-left-color: var(--c-cat-robot-hand); }
  .cards > .card.robot-body { border-left-color: var(--c-cat-robot-body); }
  .cards > .card.robot-glove { border-left-color: var(--c-cat-robot-glove); }
  .cards > .card.camera { border-left-color: var(--c-cat-camera); }
  .cards > .card.pc { border-left-color: var(--c-cat-pc); }
  .cards > .card.others { border-left-color: var(--c-cat-others); }

  @media (max-width: 640px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
    .cards > .card .value { font-size: var(--fs-xl); }
  }

  /* ══════════════════════════════════════════
     SUB-TABS (PC)
     ══════════════════════════════════════════ */
  .sub-tabs { display: flex; gap: 2px; margin-bottom: var(--sp-5); flex-wrap: wrap; border-bottom: 2px solid var(--c-border); padding-bottom: 0; }
  .sub-tab { padding: var(--sp-2) var(--sp-5); border: none; background: none; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); transition: all var(--tr-fast); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid transparent; margin-bottom: -2px; }
  .sub-tab:hover { color: var(--c-text); }
  .sub-tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
  .sub-section { display: none; }
  .sub-section.active { display: block; animation: ds-fadeIn var(--tr-slow); }

  /* ══════════════════════════════════════════
     FILTER BAR (dashboard overrides)
     ══════════════════════════════════════════ */
  .filter-bar > input[type=text] { flex: 1; min-width: 200px; }

  @media (max-width: 640px) {
    .filter-bar > input[type=text] { min-width: 100%; }
  }

  /* ── 활성 필터 요약 칩 ── */
  .active-filters-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:12px; }
  .filter-chip-lead { font-size:12px; color:var(--c-text-muted); font-weight:600; }
  .filter-chip {
    display:inline-flex; align-items:center; gap:4px; font-size:12px;
    background:rgba(99,102,241,.1); color:#4338ca; border:1px solid rgba(99,102,241,.25);
    border-radius:14px; padding:3px 6px 3px 10px;
  }
  .filter-chip .filter-chip-n {
    background:#6366f1; color:#fff; border-radius:8px; font-size:10px;
    padding:0 5px; font-weight:700;
  }
  .filter-chip button {
    background:none; border:none; cursor:pointer; color:#6366f1; font-size:12px;
    line-height:1; padding:2px 3px; border-radius:50%;
  }
  .filter-chip button:hover { background:rgba(99,102,241,.2); }
  .filter-chip-clearall {
    background:none; border:none; cursor:pointer; color:var(--c-danger,#dc2626);
    font-size:12px; font-weight:600; padding:3px 8px; border-radius:6px;
  }
  .filter-chip-clearall:hover { background:rgba(220,38,38,.08); }

  /* ── 일괄 작업 바 ── */
  .bulk-bar {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:#1f2937; color:#fff; border-radius:8px;
    padding:8px 14px; margin-bottom:12px;
  }
  .bulk-bar .bulk-count { font-size:13px; }
  .bulk-bar .bulk-count strong { color:#a5b4fc; font-size:15px; }
  .bulk-bar .bulk-actions { display:flex; gap:6px; flex-wrap:wrap; }
  .bulk-bar .btn-outline { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:#fff; }
  .bulk-bar .btn-outline:hover { background:rgba(255,255,255,.2); }
  .bulk-bar .btn-ghost { background:none; border:none; color:#cbd5e1; cursor:pointer; font-size:12px; }
  .bulk-bar .btn-ghost:hover { color:#fff; text-decoration:underline; }

  /* ── 선택 행 / 체크박스 컬럼 ── */
  #assets-table tr.asset-row-selected > td { background:rgba(99,102,241,.07); }
  .asset-sel-col input[type=checkbox] { cursor:pointer; width:15px; height:15px; }

  /* ══════════════════════════════════════════
     DASHBOARD TABLE OVERRIDES
     ══════════════════════════════════════════ */
  .table-wrap { margin-bottom: var(--sp-6); }

  /* ✓ 원본 마크 (vat-policy.md original_form) */
  .origin-mark { display: inline-block; margin-left: 4px; font-size: 10px; color: #16a34a; font-weight: var(--fw-semibold); vertical-align: middle; white-space: nowrap; }

  /* ══════════════════════════════════════════
     Explorer (제조사 / 품목 / 가격 추이 3-pane)
     ══════════════════════════════════════════ */
  #page-explorer { padding: 0; }
  /* 전체 제조사 통합 품목 검색 — Explorer 상단 banner */
  .explorer-global-search {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border);
  }
  .explorer-global-search label {
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-muted);
    white-space: nowrap; flex-shrink: 0;
  }
  .explorer-global-search input {
    flex: 1; padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border); border-radius: var(--r-sm);
    font-size: var(--fs-sm); background: var(--c-bg); color: var(--c-text); min-width: 0;
  }
  .explorer-global-search input:focus { outline: none; border-color: var(--c-primary); }
  .explorer-grid { display: grid; grid-template-columns: 280px 340px 1fr; gap: 1px; background: var(--c-border); height: calc(100vh - 64px - 56px); }
  .explorer-pane { background: var(--c-surface); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
  .explorer-pane-header { padding: var(--sp-4); border-bottom: 1px solid var(--c-border); flex-shrink: 0; }
  .explorer-pane-header h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-muted); margin: 0 0 var(--sp-3) 0; font-weight: var(--fw-semibold); }
  .explorer-search { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: var(--fs-sm); background: var(--c-bg); color: var(--c-text); }
  .explorer-search:focus { outline: none; border-color: var(--c-primary); }
  .explorer-pane-body { flex: 1; overflow-y: auto; }

  .explorer-mfr-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); cursor: pointer; border-bottom: 1px solid var(--c-border-light); transition: background var(--tr-fast); }
  .explorer-mfr-row:hover { background: var(--c-surface-alt); }
  .explorer-mfr-row.active { background: var(--c-primary-light, #dbeafe); border-left: 3px solid var(--c-primary); padding-left: calc(var(--sp-4) - 3px); }
  .explorer-mfr-row .name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
  .explorer-mfr-row .meta { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 2px; }
  .explorer-mfr-row .count { background: var(--c-border-light); padding: 2px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }

  .explorer-prod-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; border-bottom: 1px solid var(--c-border-light); transition: background var(--tr-fast); }
  .explorer-prod-row:hover { background: var(--c-surface-alt); }
  .explorer-prod-row.checked { background: #dbeafe; }
  .explorer-prod-row input[type=checkbox] { margin-top: 2px; width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
  .explorer-prod-row .color-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; visibility: hidden; }
  .explorer-prod-row.checked .color-dot { visibility: visible; }
  .explorer-prod-row .info { flex: 1; min-width: 0; }
  .explorer-prod-row .name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin-bottom: 4px; }
  .explorer-prod-row .meta { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-xs); color: var(--c-text-muted); flex-wrap: wrap; }
  .explorer-prod-row .price-range { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); color: var(--c-text); }
  .explorer-prod-row .quote-count { background: var(--c-border-light); padding: 1px 6px; border-radius: var(--r-sm); }

  .explorer-prod-controls { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
  .explorer-prod-controls button { padding: 2px 8px; border: 1px solid var(--c-border); background: var(--c-bg); border-radius: var(--r-sm); cursor: pointer; color: var(--c-text-muted); font-size: var(--fs-xs); }
  .explorer-prod-controls button:hover { background: var(--c-surface-alt); }
  .explorer-selected-count { background: var(--c-primary); color: #fff; padding: 2px 8px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  .explorer-selected-count.zero { background: var(--c-border); color: var(--c-text-muted); }
  .explorer-pane-header h2 { display: flex; align-items: center; justify-content: space-between; }

  .explorer-chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
  .explorer-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 8px; border-radius: var(--r-md); background: var(--c-surface-alt); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
  .explorer-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
  .explorer-chip .x { cursor: pointer; opacity: 0.5; padding: 0 2px; }
  .explorer-chip .x:hover { opacity: 1; }
  .explorer-history-table .product-cell { display: flex; align-items: center; gap: 6px; }
  .explorer-history-table .product-cell .dot { width: 8px; height: 8px; border-radius: 50%; }

  .explorer-empty { padding: var(--sp-6); text-align: center; color: var(--c-text-muted); font-size: var(--fs-sm); }
  .explorer-detail-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--c-text-muted); font-size: var(--fs-base); padding: var(--sp-6); text-align: center; }
  .explorer-detail-body { padding: var(--sp-5); }
  .explorer-detail-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0 0 var(--sp-1); }
  .explorer-detail-sub { color: var(--c-text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
  .explorer-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .explorer-stat { background: var(--c-surface-alt); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
  .explorer-stat .label { font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .explorer-stat .value { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-top: 4px; font-variant-numeric: tabular-nums; }
  .explorer-chart-wrap { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-5); height: 320px; position: relative; }
  .explorer-history-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  .explorer-history-table th, .explorer-history-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-border-light); text-align: left; }
  .explorer-history-table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-muted); font-weight: var(--fw-semibold); background: var(--c-surface-alt); }
  .explorer-history-table td.price { text-align: right; font-variant-numeric: tabular-nums; }
  .explorer-history-table .native { color: var(--c-text-muted); font-size: var(--fs-xs); }

  /* 데스크톱 전용 back 버튼 hide */
  .explorer-back { display: none; background: none; border: none; color: var(--c-text-muted); cursor: pointer; padding: 4px 8px; margin-bottom: var(--sp-2); font-size: var(--fs-sm); align-items: center; gap: 4px; }
  .explorer-back:hover { color: var(--c-text); }

  @media (max-width: 1024px) {
    /* 단일 pane 모드: 한 번에 1 pane 표시, back 버튼으로 이동 */
    .explorer-grid { grid-template-columns: 1fr; height: calc(100vh - 64px - 56px); gap: 0; }
    .explorer-pane { display: none; }
    .explorer-grid[data-step="0"] .explorer-pane:nth-child(1),
    .explorer-grid[data-step="1"] .explorer-pane:nth-child(2),
    .explorer-grid[data-step="2"] .explorer-pane:nth-child(3) { display: flex; }
    .explorer-grid[data-step="1"] .explorer-pane:nth-child(2) .explorer-back,
    .explorer-grid[data-step="2"] .explorer-pane:nth-child(3) .explorer-back { display: inline-flex; }
    #exp-detail-header { display: block !important; padding: var(--sp-3) var(--sp-4) 0; border-bottom: none; }
    .explorer-stat-row { grid-template-columns: repeat(2, 1fr); }
    .explorer-chart-wrap { height: 240px; }
    .top-nav { gap: 0; flex-wrap: nowrap; overflow-x: auto; }
    .nav-link { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); white-space: nowrap; }
  }
  @media (max-width: 600px) {
    .explorer-stat-row { grid-template-columns: 1fr; }
    .explorer-chart-wrap { height: 200px; padding: var(--sp-2); }
    .explorer-detail-body { padding: var(--sp-3); }
  }

  /* Sortable table headers
     ::after는 th에 두어 좁은 컬럼에서 라벨 공간 침범하지 않게 함
     (라벨이 길면 ::after가 다음 줄로 wrap되지만 가시성은 색/굵기로 확보) */
  th[data-sort] { cursor: pointer; user-select: none; }
  th[data-sort]:hover { background: var(--c-surface-alt); }
  th[data-sort]::after {
    content: ' ⇅';
    opacity: 0.4;
    font-size: 11px;
    color: var(--c-text-secondary);
  }
  th[data-sort].sort-asc,
  th[data-sort].sort-desc {
    background: rgba(99,102,241,.13);
    color: #4338ca;
  }
  th[data-sort].sort-asc::after  {
    content: ' ↑';
    opacity: 1;
    color: #4338ca;
    font-size: 13px;
    font-weight: 700;
  }
  th[data-sort].sort-desc::after {
    content: ' ↓';
    opacity: 1;
    color: #4338ca;
    font-size: 13px;
    font-weight: 700;
  }

  /* Column resize handle — th 우측에 inset box-shadow 로 항상 보이는 구분선
     (::after 대신 th box-shadow 사용 → 더 안정적으로 렌더링) */
  #assets-table th {
    position: relative; overflow: hidden; white-space: nowrap;
    box-shadow: inset -1px 0 0 var(--c-border);
    transition: box-shadow var(--tr-fast);
  }
  #assets-table th:last-child { box-shadow: none; }
  #assets-table th:hover { box-shadow: inset -2px 0 0 var(--c-text-muted); }
  #assets-table th:has(.col-resize-handle:hover),
  #assets-table th:has(.col-resize-handle.resizing) {
    box-shadow: inset -3px 0 0 var(--c-primary);
  }
  #assets-table td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .col-resize-handle {
    position: absolute; right: 0; top: 0; width: 8px; height: 100%;
    cursor: col-resize; z-index: 2; user-select: none;
    background: transparent;
    transition: background var(--tr-fast);
  }
  .col-resize-handle:hover, .col-resize-handle.resizing { background: rgba(99,102,241,.12); }

  /* Column filter button inside th */
  .th-inner { display: flex; align-items: center; gap: 4px; padding-right: 4px; }
  .th-inner .th-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .col-filter-btn {
    flex-shrink: 0; border: none; background: none; cursor: pointer;
    font-size: 11px; padding: 1px 2px; border-radius: 3px; line-height: 1;
    color: var(--c-text-secondary); transition: all var(--tr-fast);
  }
  .col-filter-btn:hover { background: var(--c-border); color: var(--c-text); }
  .col-filter-btn.active { color: #fff; background: #6366f1; font-weight: 700; }

  /* 컬럼 메모 버튼 — 기본 숨김, th hover 또는 노트 있을 때 노출 (라벨 공간 회복) */
  .col-memo-btn {
    display: none; margin-left: 2px; font-size: 10px; padding: 1px 3px;
    background: none; border: none; cursor: pointer; color: var(--c-text-muted);
    line-height: 1; transition: color var(--tr-fast);
  }
  #assets-table th:hover .col-memo-btn,
  #sh-table th:hover .col-memo-btn,
  .col-memo-btn.has-note { display: inline-block; }
  .col-memo-btn:hover { color: var(--c-text); }
  .col-memo-btn.has-note { color: var(--c-primary); }
  th.filtered { background: rgba(99,102,241,.07); }

  /* Column filter dropdown items */
  #acf-list label { display: flex; align-items: center; gap: 8px; padding: 4px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #acf-list label:hover { background: var(--c-surface-alt); }
  #acf-list input[type=checkbox] { cursor: pointer; flex-shrink: 0; }
  #acf-list .acf-val { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }

  /* ── Asset Detail Page (Plan β — Tabbed full page) ─────────
     #asset/<code> 해시 라우팅으로 진입. 사이드 패널과 공존(Phase 1).
     Phase 2~7 에서 각 탭 body 채움. */
  #page-asset-detail .ad-back {
    display:inline-flex; align-items:center; gap:6px;
    font-size: 13px; color: var(--c-text-secondary);
    padding: 6px 10px; border:1px solid var(--c-border); border-radius: 4px;
    background:#fff; cursor: pointer;
  }
  #page-asset-detail .ad-back:hover { background: var(--c-surface-alt); }
  .ad-hero {
    background: linear-gradient(135deg, #fdfdff 0%, #f4f6fa 100%);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg, 10px);
    padding: 22px 26px; margin-top: 14px;
  }
  .ad-hero-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; color: var(--c-text-muted);
  }
  .ad-hero-title { font-size: 24px; font-weight: 700; margin: 4px 0 6px; color: var(--c-text); }
  .ad-hero-meta { font-size: 12px; color: var(--c-text-muted); }
  .ad-hero-chips { display:flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
  .ad-completeness {
    display:flex; gap: 16px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px dashed var(--c-border);
    font-size: 11px;
  }
  .ad-cm-item {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--c-text-muted); cursor: pointer; user-select: none;
  }
  .ad-cm-item:hover { color: var(--c-text); }
  .ad-cm-bar {
    width: 44px; height: 4px; background: #e4e6eb;
    border-radius: 2px; overflow: hidden;
  }
  .ad-cm-bar i {
    display: block; height: 100%; background: var(--c-accent, #0366d6);
    transition: width 0.3s;
  }
  .ad-cm-bar.low i { background: var(--c-danger, #dc2626); }
  .ad-cm-bar.mid i { background: var(--c-warning, #d4a017); }
  .ad-cm-pct { font-variant-numeric: tabular-nums; }
  /* hero progress bar 옆 — 현재 상황 라인 */
  .ad-cm-sep {
    width: 1px; align-self: stretch; background: var(--c-border);
    margin: 0 4px;
  }
  .ad-cm-status {
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
    color: var(--c-text); font-size: 11px; font-weight: var(--fw-medium);
  }
  .ad-cm-status-part { color: var(--c-text); }
  .ad-cm-status-dot { color: var(--c-text-muted); margin: 0 2px; }
  /* status 별 강조 — 첫 chip(status label)만 색 입힘 */
  .ad-cm-status-in_use     { color: #047857; font-weight: var(--fw-semibold); }
  .ad-cm-status-idle       { color: #6b7280; font-weight: var(--fw-semibold); }
  .ad-cm-status-in_transit { color: #1d4ed8; font-weight: var(--fw-semibold); }
  .ad-cm-status-in_repair  { color: #b45309; font-weight: var(--fw-semibold); }
  .ad-cm-status-storage    { color: #4b5563; font-weight: var(--fw-semibold); }
  .ad-cm-status-disposed   { color: #991b1b; font-weight: var(--fw-semibold); }
  .ad-chip {
    display:inline-flex; align-items:center; gap:4px;
    padding: 3px 9px; border-radius: 999px; font-size: 12px;
    background: #f1f3f5; border: 1px solid var(--c-border-light, #eee);
  }
  .ad-chip.cat { background: #ede9fe; color: #5b21b6; border-color: transparent; }
  .ad-chip.empty { color: var(--c-text-muted); border-style: dashed; background: transparent; }

  .ad-tabs {
    display:flex; gap: 4px; border-bottom: 1px solid var(--c-border);
    margin-top: 22px; padding: 0 4px;
  }
  .ad-tab {
    padding: 10px 16px; font-size: 14px; color: var(--c-text-secondary);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    cursor: pointer; user-select: none;
  }
  .ad-tab:hover { color: var(--c-text); }
  .ad-tab.active {
    color: var(--c-accent, #0366d6);
    border-bottom-color: var(--c-accent, #0366d6);
    font-weight: 600;
  }
  .ad-tab .ad-tab-badge {
    display:inline-block; margin-left: 4px;
    background:#e4e6eb; color: var(--c-text-muted);
    font-size: 10px; padding: 1px 6px; border-radius: 999px; font-weight: 500;
  }
  .ad-tab.active .ad-tab-badge {
    background: #e8f1fd; color: var(--c-accent, #0366d6);
  }

  .ad-tab-body { padding: 22px 4px; min-height: 240px; }
  .ad-tab-body.hidden { display: none; }

  /* 보류 변경 저장 바 — 정보 탭의 모든 필드 편집 공통 (sticky) */
  .ad-savebar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 10px;
    background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px;
    padding: 8px 14px; margin-top: 12px;
  }
  .ad-savebar[hidden] { display: none; }
  .ad-savebar-msg { font-size: 13px; color: #9a3412; margin-right: auto; }
  .ad-savebar-msg strong { color: #c2410c; }
  .ad-card-h-note {
    font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: none;
    color: var(--c-text-muted); background: var(--c-surface-alt, #f6f7f9);
    border: 1px solid var(--c-border); border-radius: 999px; padding: 1px 8px; cursor: help;
  }
  .ad-placeholder {
    color: var(--c-text-muted); font-size: 13px;
    padding: 60px 20px; text-align: center;
    background: #fafbfc; border: 1px dashed var(--c-border); border-radius: 6px;
  }
  .ad-placeholder b { color: var(--c-text); }

  /* 카드 그리드 — Phase 2 기본 탭 (식별 / 분류 / 연결) */
  .ad-card-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  }
  @media (max-width: 720px) { .ad-card-grid { grid-template-columns: 1fr; } }
  .ad-card {
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-border);
    border-radius: 8px; padding: 14px 16px;
  }
  .ad-card-h {
    font-size: 11px; font-weight: 700;
    color: var(--c-text-muted); letter-spacing: .04em;
    text-transform: uppercase; margin: 0 0 10px;
    display: flex; align-items: center; gap: 6px;
    justify-content: space-between;
  }
  .ad-card-h-title { display: flex; align-items: center; gap: 6px; }
  /* 편집 모드 토글 — 섹터별 [편집] / [저장][취소] 패턴 */
  .ad-edit-btn {
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
    padding: 3px 10px; border-radius: 4px; cursor: pointer;
    background: #fff; color: var(--c-text-2, #4a4a4a);
    border: 1px solid var(--c-border, #e4e4e7);
    text-transform: none;
  }
  .ad-edit-btn:hover { background: var(--c-surface-alt, #f6f7f9); border-color: var(--c-accent, #0366d6); color: var(--c-accent, #0366d6); }
  .ad-card[data-mode="edit"] {
    border-color: var(--c-accent, #0366d6);
    box-shadow: 0 0 0 3px rgba(3, 102, 214, .08);
  }
  .ad-card-footer {
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
    margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed var(--c-border, #e4e4e7);
  }
  .ad-card-saving { font-size: 11px; color: var(--c-text-muted, #8b8b8b); margin-right: auto; }
  .ad-card-saving.pending { color: var(--c-text-muted, #8b8b8b); }
  .ad-card-saving.ok { color: var(--c-success, #16a34a); }
  .ad-card-saving.err { color: var(--c-danger, #dc2626); }
  .ad-card-btn {
    font-size: 12px; font-weight: 600; padding: 5px 14px;
    border-radius: 4px; cursor: pointer; border: 1px solid var(--c-border-strong, #d4d4d8);
    background: #fff; color: var(--c-text-2, #4a4a4a);
  }
  .ad-card-btn:hover { background: var(--c-surface-alt, #f6f7f9); }
  .ad-card-btn.primary {
    background: var(--c-accent, #0366d6); color: #fff; border-color: var(--c-accent, #0366d6);
  }
  .ad-card-btn.primary:hover { background: #024fa3; border-color: #024fa3; }
  .ad-card-btn.primary:disabled { background: #94a3b8; border-color: #94a3b8; cursor: not-allowed; }
  /* edit 모드일 때 dd 편집 표시 + 인라인 호버 효과 제거 */
  .ad-card[data-mode="edit"] .ad-dl dd { cursor: default; background: transparent; }
  .ad-card[data-mode="edit"] .ad-dl dd::after { display: none; }
  /* dl 패턴 — 패널의 ap-dl 와 동일 스펙 (apEnterEdit/apRenderDD 재사용 위함) */
  .ad-dl {
    display: grid; grid-template-columns: 90px 1fr;
    gap: 4px 12px; font-size: 13px;
  }
  .ad-dl dt {
    color: var(--c-text-muted); font-size: 11px;
    align-self: center; padding: 4px 0;
  }
  .ad-dl dd {
    margin: 0; padding: 5px 8px; border-radius: 4px;
    min-height: 28px; cursor: pointer;
    position: relative; transition: background 0.15s;
  }
  .ad-dl dd:hover { background: var(--c-surface-alt, #f6f7f9); }
  .ad-dl dd[data-editing]:hover { background: transparent; }
  .ad-dl dd::after {
    content: '✎'; position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%); opacity: 0; font-size: 10px;
    color: var(--c-text-muted); pointer-events: none;
    transition: opacity 0.15s;
  }
  .ad-dl dd:hover::after { opacity: .7; }
  .ad-dl dd[data-editing]::after { display: none; }
  .ad-dl dd.empty { color: var(--c-text-muted); font-style: italic; }
  .ad-dl dd.derived { cursor: default; }
  .ad-dl dd.derived::after { display: none; }
  .ad-dl dd.derived:hover { background: transparent; }
  /* Vendor 회사 매칭 */
  .ad-vendor-edit { background:none; border:1px solid var(--c-border); border-radius:4px;
    cursor:pointer; font-size:11px; padding:1px 6px; color:var(--c-text-secondary); margin-left:4px; }
  .ad-vendor-edit:hover { background:var(--c-surface-alt); color:var(--c-text); }
  .ad-vendor-raw { color:var(--c-text-secondary); }
  .ad-vp-overlay { position:fixed; inset:0; z-index:650; background:rgba(0,0,0,.45);
    display:flex; align-items:center; justify-content:center; }
  .ad-vp-box { background:var(--c-surface); border-radius:8px; box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.2));
    width:min(420px,92vw); max-height:70vh; display:flex; flex-direction:column; padding:16px; gap:10px; }
  .ad-vp-title { font-size:15px; font-weight:600; }
  .ad-vp-search { border:1px solid var(--c-border); border-radius:6px; padding:7px 10px; font-size:13px;
    background:var(--c-bg); color:var(--c-text); }
  .ad-vp-search:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
  .ad-vp-list { flex:1; overflow-y:auto; border:1px solid var(--c-border-light,var(--c-border)); border-radius:6px; max-height:320px; }
  .ad-vp-opt { padding:8px 10px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--c-border-light,#eee); }
  .ad-vp-opt:last-child { border-bottom:0; }
  .ad-vp-opt:hover { background:#f0f1ff; }
  .ad-vp-opt.cur { background:rgba(99,102,241,.12); font-weight:600; }
  .ad-vp-empty { padding:14px; text-align:center; color:var(--c-text-muted); font-size:12px; }
  .ad-vp-foot { display:flex; gap:8px; }
  .ad-dl dd a { color: var(--c-accent, #0366d6); text-decoration: none; }
  .ad-dl dd a:hover { text-decoration: underline; }
  .ad-dl-full { grid-column: 1 / -1; }
  .ad-dd-editor {
    width: 100%; padding: 4px 6px; border: 1px solid var(--c-accent, #0366d6);
    border-radius: 3px; font-size: 13px; font-family: inherit; background: #fff;
  }

  @media (max-width: 720px) {
    .ad-hero { padding: 16px 18px; }
    .ad-hero-title { font-size: 20px; }
    .ad-tabs { overflow-x: auto; }
    .ad-tab { padding: 9px 12px; font-size: 13px; flex-shrink: 0; }
  }

  /* ── Asset Detail Panel ───────────────────────────────────── */
  .asset-panel-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:499; }
  .asset-panel-overlay.open { display:block; }
  .asset-panel {
    position:fixed; top:0; right:-660px; width:640px; height:100vh;
    background:var(--c-surface); border-left:1px solid var(--c-border);
    box-shadow:-4px 0 24px rgba(0,0,0,.15); z-index:500;
    transition:right .3s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .asset-panel.open { right:0; }
  /* 모바일 풀스크린 — 768px 이하에서 bottom sheet 스타일.
     데스크톱 right-slide → 모바일 bottom-slide (엄지 접근성 + safe-area 친화).
     selector 에 .asset-panel prefix → 뒤에 정의되는 ap-dl/ap-grid/ap-btn 원본을
     specificity (0,2,1) > (0,1,1) 로 이김. */
  @media (max-width: 768px) {
    .asset-panel {
      top:auto; right:0; left:0; bottom:-100vh;
      width:100%; height:100vh; height:100dvh;
      border-left:none; border-top:1px solid var(--c-border);
      box-shadow:0 -4px 24px rgba(0,0,0,.18);
      transition:bottom .3s cubic-bezier(.4,0,.2,1);
      padding-bottom:env(safe-area-inset-bottom);
    }
    .asset-panel.open { right:0; bottom:0; }
    .asset-panel .ap-hero { padding:14px 16px 12px; }
    .asset-panel .ap-hero-name { font-size:16px; }
    .asset-panel .ap-hero-actions button { padding:8px 14px; font-size:13px; min-height:36px; }
    .asset-panel .ap-body { padding:0 16px 32px; }
    .asset-panel .ap-grid { grid-template-columns:1fr; }
    .asset-panel .ap-dl { grid-template-columns:90px 1fr; gap:2px 10px; }
    .asset-panel .ap-dl dd { min-height:36px; padding:8px 10px; }
    .asset-panel .ap-btn { padding:10px 18px; min-height:38px; }
  }
  /* ── Toast 알림 ── */
  .toast {
    position:fixed; bottom:24px; right:24px; padding:12px 20px;
    border-radius:8px; background:#333; color:#fff; font-size:14px;
    opacity:0; transform:translateY(8px);
    transition:opacity .2s, transform .2s; z-index:9999; pointer-events:none;
    max-width:360px;
  }
  .toast.show { opacity:1; transform:none; }
  .toast.toast-error { background:#c0392b; }
  .toast.toast-info  { background:#2980b9; }
  .ap-body { flex:1; overflow-y:auto; padding:0 20px 40px; }
  .ap-section { margin-top:24px; }
  .ap-section h3 { font-size:var(--fs-sm); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-muted); margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid var(--c-border-light); }
  .ap-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .ap-grid.full { grid-template-columns:1fr; }
  .ap-field { display:flex; flex-direction:column; gap:4px; }
  .ap-field label { font-size:11px; font-weight:var(--fw-semibold); color:var(--c-text-muted); text-transform:uppercase; letter-spacing:.04em; }
  .ap-field input, .ap-field select, .ap-field textarea {
    border:1px solid var(--c-border); border-radius:var(--r-sm);
    padding:6px 8px; font-size:var(--fs-sm); background:var(--c-bg); color:var(--c-text);
    transition:border-color var(--tr-fast);
  }
  .ap-field input:focus, .ap-field select:focus, .ap-field textarea:focus { outline:none; border-color:var(--c-primary); }
  .ap-field textarea { resize:vertical; min-height:60px; font-family:inherit; }
  .ap-btn { padding:8px 18px; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:var(--fw-semibold); cursor:pointer; transition:all var(--tr-fast); border:1px solid transparent; }
  .ap-btn-primary { background:var(--c-primary); color:#fff; }
  .ap-btn-primary:hover { opacity:.88; }
  .ap-btn-secondary { background:var(--c-surface); border-color:var(--c-border); color:var(--c-text); }
  .ap-btn-secondary:hover { background:var(--c-surface-alt); }
  .ap-actions { display:flex; gap:8px; margin-top:14px; justify-content:flex-end; }
  /* 이력 타임라인 */
  .ap-timeline { display:flex; flex-direction:column; gap:0; }
  .ap-log { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--c-border-light); }
  .ap-log:last-child { border-bottom:none; }
  .ap-log-content { flex:1; min-width:0; }
  .ap-log-meta { font-size:11px; color:var(--c-text-muted); margin-bottom:4px; }
  .ap-log-changes { font-size:12px; display:flex; flex-direction:column; gap:3px; }
  .ap-log-change { display:flex; gap:6px; align-items:baseline; }
  .ap-log-field { font-weight:var(--fw-semibold); color:var(--c-text-secondary); min-width:80px; flex-shrink:0; }
  .ap-log-from { color:var(--c-text-muted); text-decoration:line-through; }
  .ap-log-to { color:var(--c-text); }
  .ap-log-arrow { color:var(--c-text-muted); }
  #assets-table tbody tr { cursor:pointer; }
  #assets-table tbody tr:hover { background:var(--c-surface-alt); }

  /* Realtime 충돌 배너 — 외부 변경 감지 시 hero 아래 노출. 닫거나 새로고침 전까지 유지. */
  .ap-conflict-banner {
    display:flex; align-items:center; gap:10px;
    margin:0 22px; padding:10px 14px;
    background:#fff7ed; color:#9a3412;
    border:1px solid #fdba74; border-left:4px solid #f97316;
    border-radius:var(--r-sm); font-size:13px;
    flex-shrink:0;
  }
  .ap-conflict-banner[hidden] { display:none; }
  .ap-conflict-banner .ap-conflict-msg { flex:1; }
  .ap-conflict-banner button {
    border:1px solid #fb923c; background:#fff; color:#9a3412;
    padding:4px 10px; border-radius:var(--r-sm); font-size:12px;
    font-weight:var(--fw-semibold); cursor:pointer;
  }
  .ap-conflict-banner button:hover { background:#fed7aa; }
  .ap-conflict-banner button.ap-conflict-dismiss {
    border:none; background:transparent; padding:4px 6px;
    color:#9a3412; opacity:.6; font-size:14px;
  }
  .ap-conflict-banner button.ap-conflict-dismiss:hover { opacity:1; background:transparent; }
  @media (max-width: 768px) {
    .ap-conflict-banner { margin:0 16px; }
  }

  /* ── Asset Panel Phase 1 ─────────────────────────────────────
     Hero / Badge / Linked / Status card / Collapse / Timeline type */
  .ap-hero {
    padding:18px 22px 14px; border-bottom:1px solid var(--c-border);
    background:linear-gradient(180deg, var(--c-surface), var(--c-surface-alt));
    flex-shrink:0;
  }
  .ap-hero-row { display:flex; align-items:flex-start; gap:14px; }
  .ap-hero-id  { font-size:11px; font-weight:var(--fw-semibold); letter-spacing:.08em; color:var(--c-text-muted); text-transform:uppercase; }
  .ap-hero-name { font-size:18px; font-weight:var(--fw-bold); margin-top:2px; overflow:hidden; text-overflow:ellipsis; }
  .ap-hero-meta { font-size:12px; color:var(--c-text-secondary); margin-top:3px; }
  .ap-hero-actions { margin-left:auto; display:flex; gap:6px; flex-shrink:0; }
  .ap-hero-actions button { padding:5px 10px; font-size:12px; }
  .ap-hero-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }

  .ap-badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 9px; border-radius:999px;
    font-size:11px; font-weight:var(--fw-semibold);
    border:1px solid transparent; white-space:nowrap;
  }
  .ap-badge.muted    { background:var(--c-surface-alt); color:var(--c-text-secondary); border-color:var(--c-border); }
  .ap-badge.success  { background:#dff5e6; color:#1a7f37; }
  .ap-badge.warning  { background:#fef3e5; color:#bf6b00; }
  .ap-badge.danger   { background:#fdecea; color:#cf222e; }
  .ap-badge.info     { background:#ddebfc; color:#0366d6; }
  .ap-badge.purple   { background:#f3eafd; color:#8250df; }

  /* Section header (improved) */
  .ap-sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .ap-sec-head h3 { margin:0; padding:0; border:0; }
  .ap-sec-meta { font-size:11px; color:var(--c-text-muted); }

  /* Empty value display */
  .ap-empty { color:var(--c-text-muted); font-style:italic; font-size:12px; }

  /* Linked info rows */
  .ap-linked { display:flex; flex-direction:column; gap:6px; }
  .ap-linked-row {
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; background:var(--c-surface-alt);
    border-radius:var(--r-md); font-size:13px;
  }
  .ap-linked-icon { font-size:15px; flex-shrink:0; width:18px; text-align:center; }
  .ap-linked-label {
    font-size:11px; color:var(--c-text-muted);
    font-weight:var(--fw-semibold); text-transform:uppercase;
    letter-spacing:.04em; min-width:78px;
  }
  .ap-linked-value { color:var(--c-text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ap-linked-value a { color:var(--c-primary); text-decoration:none; font-weight:500; }
  .ap-linked-value a:hover { text-decoration:underline; }
  .ap-linked-value.empty { color:var(--c-text-muted); font-style:italic; }

  /* Status card (highlighted) */
  .ap-status-card {
    background:linear-gradient(135deg, #f0f7ff, var(--c-surface-alt));
    border:1px solid #c8ddf5;
    border-radius:var(--r-md);
    padding:14px 16px;
  }
  .ap-status-card .ap-grid { gap:8px 14px; }

  /* Collapsible details */
  .ap-collapse {
    background:var(--c-surface-alt);
    border-radius:var(--r-md);
    font-size:13px;
    overflow:hidden;
  }
  .ap-collapse summary {
    padding:9px 12px; cursor:pointer;
    color:var(--c-text-secondary); font-weight:500;
    outline:none; list-style:none;
    display:flex; align-items:center; gap:8px;
  }
  .ap-collapse summary::-webkit-details-marker { display:none; }
  .ap-collapse summary::before { content:'▸'; font-size:10px; color:var(--c-text-muted); transition:transform .2s; }
  .ap-collapse[open] summary::before { transform:rotate(90deg); }
  .ap-collapse summary:hover { color:var(--c-text); background:var(--c-border-light); }
  .ap-collapse-body { padding:4px 12px 12px; color:var(--c-text-secondary); }

  /* Timeline type variants */
  .ap-log { gap:10px; align-items:flex-start; }
  .ap-log-icon {
    width:24px; height:24px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:11px; font-weight:var(--fw-bold);
    margin-top:2px;
  }
  .ap-log-icon.info    { background:#ddebfc; color:#0366d6; }
  .ap-log-icon.status  { background:#f3eafd; color:#8250df; }
  .ap-log-icon.mapping { background:#fef3e5; color:#d4711a; }
  .ap-log-icon.create  { background:#dff5e6; color:#1a7f37; }
  .ap-log-icon.note    { background:var(--c-border-light); color:var(--c-text-secondary); }
  .ap-log-icon.shipment { background:#e0f2fe; color:#0369a1; }

  .ap-log-type {
    font-size:11px; font-weight:var(--fw-semibold);
  }
  .ap-log-type.info    { color:#0366d6; }
  .ap-log-type.status  { color:#8250df; }
  .ap-log-type.mapping { color:#d4711a; }
  .ap-log-type.create  { color:#1a7f37; }
  .ap-log-type.note    { color:var(--c-text-secondary); }
  .ap-log-type.shipment { color:#0369a1; }

  /* P-polish: 이력 탭 타임라인 — 수직 라인, 날짜 그룹, 사용자 강조 */
  .ad-tl-day {
    display:flex; align-items:center; gap:10px;
    margin: 18px 0 6px;
    font-size: 11px; color: var(--c-text-muted);
    font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  }
  .ad-tl-day:first-child { margin-top: 4px; }
  .ad-tl-day::after {
    content:''; flex:1; height:1px; background: var(--c-border-light);
  }
  .ad-tl-day b { color: var(--c-text); font-weight: 600; text-transform: none; letter-spacing: 0; }
  #ad-timeline { position: relative; padding-left: 4px; }
  #ad-timeline .ap-log {
    position: relative; padding-left: 30px;
    border-bottom: 1px dashed var(--c-border-light);
  }
  #ad-timeline .ap-log:last-of-type { border-bottom: none; }
  #ad-timeline .ap-log > .ap-log-icon {
    position: absolute; left: 0; top: 12px;
    width: 20px; height: 20px; font-size: 11px;
    margin-top: 0;
  }
  #ad-timeline .ap-log::before {
    content:''; position: absolute; left: 9px; top: 34px; bottom: -1px;
    width: 1px; background: var(--c-border-light);
  }
  #ad-timeline .ap-log:last-of-type::before { display: none; }
  .ad-tl-actor {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px; background: #f1f3f5; border-radius: 3px;
    font-size: 10px; color: var(--c-text-secondary);
    font-weight: 500;
  }
  .ad-tl-actor.system { background: #fef3c7; color: #92400e; }
  .ad-tl-actor.migration { background: #ede9fe; color: #6d28d9; }
  .ap-log-memo {
    margin-top: 4px; padding: 6px 10px;
    background: #fef9e6; border-left: 2px solid #f5d469;
    border-radius: 3px; font-size: 12px; color: var(--c-text);
  }

  .ap-log-line1 { display:flex; gap:8px; align-items:baseline; margin-bottom:4px; }
  .ap-log-line1 .ap-log-meta { margin-left:auto; margin-bottom:0; }
  .ap-log-memo {
    font-size:12px; color:var(--c-text);
    background:var(--c-surface-alt);
    border-left:3px solid var(--c-text-muted);
    padding:6px 10px; border-radius:0 4px 4px 0;
    margin-top:4px;
  }

  /* ── Phase 2 — inline edit / popover / quick memo / chip ─── */
  .ap-dl {
    display:grid; grid-template-columns:110px 1fr;
    gap:2px 14px; font-size:13px;
  }
  .ap-dl dt {
    color:var(--c-text-muted);
    font-size:11px; font-weight:var(--fw-semibold);
    text-transform:uppercase; letter-spacing:.04em;
    align-self:center; padding:5px 0;
  }
  .ap-dl dd {
    position:relative;
    padding:5px 8px;
    border-radius:var(--r-sm);
    cursor:pointer;
    min-height:28px;
    display:flex; align-items:center;
    transition:background var(--tr-fast);
    word-break:break-word;
  }
  .ap-dl dd:hover { background:var(--c-surface-alt); }
  .ap-dl dd[data-editing]:hover { background:transparent; }
  .ap-dl dd::after {
    content:'✎';
    position:absolute; right:8px;
    font-size:11px; color:var(--c-text-muted);
    opacity:0; transition:opacity var(--tr-fast);
    pointer-events:none;
  }
  .ap-dl dd:hover::after { opacity:.7; }
  .ap-dl dd[data-editing]::after { display:none; }
  .ap-dl dd.empty {
    color:var(--c-text-muted); font-style:italic;
  }
  .ap-dl-full { grid-column:1/-1; }
  .ap-dd-editor {
    width:100%;
    border:1px solid var(--c-primary);
    border-radius:var(--r-sm);
    padding:4px 7px;
    font-size:13px; font-family:inherit;
    background:var(--c-bg); color:var(--c-text);
    outline:2px solid rgba(99,102,241,.18);
    outline-offset:-1px;
  }
  textarea.ap-dd-editor { min-height:54px; resize:vertical; }
  /* Pending (unsaved) field highlight */
  dd.ap-dd-pending { background:rgba(245,158,11,.09); border-radius:3px; }
  dd.ap-dd-pending::after { content:'✱'; color:#d97706; font-size:9px; vertical-align:super; margin-left:3px; }

  /* Hero badge clickable */
  .ap-badge.clickable {
    cursor:pointer; user-select:none;
  }
  .ap-badge.clickable::after {
    content:'▾';
    font-size:8px; opacity:.7;
    margin-left:3px;
  }

  /* Popover */
  .ap-popover {
    position:fixed;
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:var(--r-md);
    box-shadow:var(--shadow-lg);
    z-index:600;
    min-width:170px; max-height:260px;
    overflow-y:auto;
    display:none;
  }
  .ap-popover.open { display:block; }
  .ap-popover-item {
    padding:7px 12px;
    font-size:12px; cursor:pointer;
    display:flex; align-items:center; gap:8px;
    color:var(--c-text);
  }
  .ap-popover-item:hover { background:var(--c-surface-alt); }
  .ap-popover-item.current {
    background:rgba(99,102,241,.07);
    font-weight:var(--fw-semibold);
  }
  .ap-popover-item .dot {
    width:8px; height:8px; border-radius:50%;
  }

  /* Quick memo */
  .ap-quick-memo {
    display:flex; gap:8px; align-items:center;
    padding:8px 12px;
    background:linear-gradient(135deg, #fff8e6, var(--c-surface-alt));
    border:1px solid #f0d27a;
    border-radius:var(--r-sm);
    margin-bottom:12px;
  }
  .ap-quick-memo .icon { font-size:14px; }
  .ap-quick-memo input {
    flex:1;
    border:0; background:transparent;
    font-size:13px; outline:none;
    padding:4px 0; font-family:inherit;
    color:var(--c-text);
  }
  .ap-quick-memo button {
    background:#d4a017; color:#fff;
    border:0; padding:4px 10px;
    border-radius:var(--r-sm);
    font-size:11px; cursor:pointer;
    font-weight:var(--fw-semibold);
  }
  .ap-quick-memo button:disabled { opacity:.35; cursor:default; }

  /* Status card change watcher */
  .ap-status-card .ap-btn:disabled {
    opacity:.4; cursor:not-allowed;
    background:var(--c-text-muted);
  }
  .ap-status-meta-changed {
    color:var(--c-primary) !important;
    font-weight:var(--fw-semibold);
  }

  /* Timeline filter chips */
  .ap-tl-filter {
    display:flex; gap:6px; flex-wrap:wrap;
    margin-bottom:12px;
  }
  .ap-chip {
    font-size:11px; padding:3px 9px;
    border-radius:999px;
    border:1px solid var(--c-border);
    background:var(--c-surface);
    cursor:pointer; user-select:none;
    color:var(--c-text-secondary);
    display:inline-flex; align-items:center; gap:4px;
    transition:all var(--tr-fast);
  }
  .ap-chip:hover { color:var(--c-text); }
  .ap-chip.active {
    background:var(--c-text);
    color:#fff;
    border-color:var(--c-text);
  }
  .ap-chip .count {
    background:var(--c-surface-alt);
    color:var(--c-text-muted);
    border-radius:999px;
    padding:0 5px; font-size:10px;
  }
  .ap-chip.active .count {
    background:rgba(255,255,255,.18);
    color:#fff;
  }
  .ap-chip[data-disabled] { opacity:.4; cursor:not-allowed; }

  /* Overview item rows */
  #overview-table { table-layout: fixed; min-width: 1200px; width: 100%; }
  #overview-table th, #overview-table td { white-space: nowrap; }
  .quote-group-start td { border-top: 2px solid var(--c-border); background: var(--c-surface-alt); }
  .quote-sub-row td { border-top: 1px solid var(--c-border-light); }
  .quote-sub-row td:nth-child(-n+3) { color: transparent; }
  .quote-sub-row:hover td:nth-child(-n+3) { color: transparent; }
  .item-name { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

  /* ══════════════════════════════════════════
     DIFFS & LABELS
     ══════════════════════════════════════════ */
  .diff-up { color: var(--c-danger); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  .diff-down { color: var(--c-success); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  .bundle-label { color: var(--c-text-muted); font-style: italic; }
  .total-row { font-weight: var(--fw-bold); }
  .total-row td { border-top: 2px solid var(--c-border); }
  .diff-mark { background: var(--c-warning-bg); padding: 1px var(--sp-1); border-radius: var(--r-sm); }

  /* ══════════════════════════════════════════
     CHARTS
     ══════════════════════════════════════════ */
  .chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); }
  .chart-wrap { background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5); margin-bottom: var(--sp-6); border: 1px solid var(--c-border-light); }
  .chart-wrap h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--sp-4); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-secondary); }
  canvas { max-height: 300px; }

  @media (max-width: 768px) {
    .chart-row { grid-template-columns: 1fr; }
  }

  /* ══════════════════════════════════════════
     QUOTE CARDS (HW)
     ══════════════════════════════════════════ */
  .quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
  .quote-card { background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: all var(--tr-fast); border: 1px solid var(--c-border-light); }
  .quote-card:hover { box-shadow: var(--shadow-md); }
  .quote-card .head { padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: #fff; display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; letter-spacing: 0.04em; }
  .quote-card .head a { color: rgba(255,255,255,0.75); font-weight: var(--fw-normal); font-size: var(--fs-xs); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
  .quote-card .head a:hover { color: #fff; border-bottom-color: #fff; }
  .quote-card .body { padding: var(--sp-3) var(--sp-4); }
  .quote-card .body table { font-size: var(--fs-base); }
  .quote-card .body th { background: transparent; font-weight: var(--fw-medium); color: var(--c-text-muted); width: 90px; padding: 5px var(--sp-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; }
  .quote-card .body td { padding: 5px var(--sp-2); border-bottom: none; }

  .head.robot-arm { background: var(--c-cat-robot-arm); }
  .head.robot-hand { background: var(--c-cat-robot-hand); }
  .head.robot-body { background: var(--c-cat-robot-body); }
  .head.robot-glove { background: var(--c-cat-robot-glove); }
  .head.camera { background: var(--c-cat-camera); }
  .head.others { background: var(--c-cat-others); }

  @media (max-width: 640px) {
    .quote-grid { grid-template-columns: 1fr; }
  }

  /* ══════════════════════════════════════════
     SPEC CARDS (PC)
     ══════════════════════════════════════════ */
  .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
  .spec-card { background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: all var(--tr-fast); border: 1px solid var(--c-border-light); }
  .spec-card:hover { box-shadow: var(--shadow-md); }
  .spec-card .head { padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }
  .spec-card .head.workstation { background: var(--c-cat-workstation); }
  .spec-card .head.inference { background: var(--c-cat-inference); }
  .spec-card .head.control { background: var(--c-cat-control); }
  .spec-card table { font-size: var(--fs-base); }
  .spec-card th { background: transparent; font-weight: var(--fw-medium); color: var(--c-text-muted); width: 110px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; }
  .spec-card td { font-weight: var(--fw-medium); border-bottom: none; }

  @media (max-width: 640px) {
    .spec-grid { grid-template-columns: 1fr; }
  }

  .breakdown-wrap { background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5); margin-bottom: var(--sp-6); border: 1px solid var(--c-border-light); }
  .breakdown-wrap h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--sp-4); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-secondary); }

  /* ══════════════════════════════════════════
     PRODUCT EXPLORER MODAL
     ══════════════════════════════════════════ */
  .item-name.clickable { cursor: pointer; color: var(--c-primary); }
  .item-name.clickable:hover { text-decoration: underline; }
  .explore-btn { padding: var(--sp-2) var(--sp-4); border: 1px solid var(--c-primary); background: var(--c-primary); color: #fff; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; transition: all var(--tr-fast); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.04em; }
  .explore-btn:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }

  .modal-controls { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; align-items: center; }
  .modal-controls select { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-base); min-width: 320px; background: var(--c-surface); font-family: var(--font-sans); }

  #pm-vendor-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-4); }
  .vendor-chip { display: inline-block; padding: 4px var(--sp-3); border-radius: var(--r-sm); background: var(--c-border-light); font-size: var(--fs-xs); cursor: pointer; user-select: none; border: 1px solid transparent; transition: all var(--tr-fast); text-transform: uppercase; letter-spacing: 0.02em; font-weight: var(--fw-medium); }
  .vendor-chip:hover { background: var(--c-border); }
  .vendor-chip.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

  .pm-summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .pm-stat { background: var(--c-surface-alt); border-radius: var(--r-md); padding: var(--sp-3); border: 1px solid var(--c-border-light); }
  .pm-stat .label { font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--fw-semibold); }
  .pm-stat .value { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-top: var(--sp-1); font-variant-numeric: tabular-nums; }
  .pm-empty { text-align: center; color: var(--c-text-muted); padding: 60px var(--sp-5); font-size: var(--fs-md); }

  #pm-chart-wrap { background: var(--c-surface-alt); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-4); border: 1px solid var(--c-border-light); }
  #pm-chart-wrap canvas { max-height: 280px; }
  #pm-table { width: 100%; }

  @media (max-width: 640px) {
    .pm-summary-row { grid-template-columns: repeat(2, 1fr); }
    .modal { margin: 0 var(--sp-2); }
    .modal-head { padding: var(--sp-4); }
    .modal-body { padding: var(--sp-4); }
  }

  /* ══════════════════════════════════════════
     EDIT MODE
     ══════════════════════════════════════════ */
  /* (구 MANUFACTURER VIEW CSS — PR 6 에서 Explorer 다중 비교로 흡수, 제거됨) */

  /* ══════════════════════════════════════════
     상태 & 이력 — 이벤트/사실 분리 2-pane (adx-*)
     🔵 이벤트: 쌓기 / 타임라인 / 읽기전용 도출
     🟡 사실: 정정 / 속성표 (구매·수리)
     ══════════════════════════════════════════ */
  .adx-pane { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-5); align-items: start; }
  @media (max-width: 820px) { .adx-pane { grid-template-columns: 1fr; } }
  .adx-left { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: var(--sp-4); }
  @media (max-width: 820px) { .adx-left { position: static; } }

  /* 🔵 도출 상태 (읽기전용) */
  .adx-state { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 14px 16px;
    background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-surface-alt) 100%); }
  .adx-sec-k { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted);
    font-weight: var(--fw-bold); margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .adx-auto { font-size: 9.5px; background: var(--c-info-bg); color: var(--c-info); border: 1px solid var(--c-info-border);
    padding: 2px 7px; border-radius: var(--r-full); font-weight: var(--fw-bold); white-space: nowrap; }
  .adx-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); font-size: 13px;
    padding: 3px 11px; border-radius: var(--r-full); margin-bottom: 12px;
    background: var(--c-surface-alt); color: var(--c-text-2); border: 1px solid var(--c-border); }
  .adx-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .adx-pill.s-in_use   { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success-border); }
  .adx-pill.s-in_transit { background: var(--c-info-bg); color: var(--c-info); border-color: var(--c-info-border); }
  .adx-pill.s-in_repair { background: var(--c-warning-bg); color: var(--c-warning); border-color: var(--c-warning-border); }
  .adx-pill.s-disposed { background: var(--c-danger-bg); color: var(--c-danger); border-color: var(--c-danger-border); }
  .adx-kv { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: 12.5px;
    border-bottom: 1px dashed var(--c-border-light); }
  .adx-kv .k { color: var(--c-text-muted); }
  .adx-kv .v { font-weight: var(--fw-semibold); text-align: right; }
  .adx-kv .v .temp { color: var(--c-warning); font-size: 11px; font-weight: var(--fw-semibold); }
  .adx-kv .v .overdue { color: var(--c-danger); font-size: 11px; font-weight: var(--fw-bold); }
  .adx-last { font-size: 10.5px; color: var(--c-text-muted); font-family: var(--font-mono); line-height: 1.6;
    margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--c-border-light); }

  /* 🔵 이벤트 추가 */
  .adx-add .adx-sec-k { margin-bottom: 10px; }
  .adx-chips { display: flex; flex-direction: column; gap: 7px; }
  .adx-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--c-border); background: var(--c-surface);
    padding: 8px 12px; border-radius: var(--r-md); font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--c-text-2);
    cursor: pointer; transition: all var(--tr-fast); text-align: left; font-family: var(--font-sans); }
  .adx-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
  .adx-chip.sel { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

  /* 🟡 사실 영역 라벨 */
  .adx-facts-k { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-warning);
    font-weight: var(--fw-bold); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
  .adx-facts .ad-card { margin-bottom: var(--sp-3); }
  .adx-facts .ad-card:last-child { margin-bottom: 0; }

  /* 우측: 타임라인 헤더 */
  .adx-right { min-width: 0; }
  .adx-rhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
  .adx-rhead h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-2);
    font-weight: var(--fw-bold); margin: 0; }
  .adx-rhead .adx-ct { font-size: 11px; color: var(--c-text-muted); font-weight: var(--fw-semibold); }
  .adx-rhead .spacer { flex: 1; }

  /* 인라인 compose */
  .adx-compose { display: none; background: var(--c-primary-light); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 16px; }
  .adx-compose.show { display: block; }
  .adx-compose-h { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--c-primary); margin-bottom: 11px;
    display: flex; align-items: center; gap: 7px; }
  .adx-cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 11px; }
  .adx-fld { display: flex; flex-direction: column; gap: 4px; }
  .adx-fld label { font-size: 10.5px; color: var(--c-text-2); font-weight: var(--fw-semibold); }
  .adx-fld input, .adx-fld select, .adx-fld textarea { padding: 6px 9px; border: 1px solid var(--c-border);
    border-radius: var(--r-md); font-size: 12.5px; font-family: inherit; background: var(--c-surface); color: var(--c-text); }
  .adx-fld textarea { resize: vertical; min-height: 48px; }
  .adx-fld input:focus, .adx-fld select:focus, .adx-fld textarea:focus { outline: none; border-color: var(--c-primary);
    box-shadow: var(--focus-ring); }
  .adx-prefill { font-size: 9.5px; color: var(--c-info); font-weight: var(--fw-semibold); margin-top: 1px; }
  .adx-temprow { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--c-text-2); margin-bottom: 11px; flex-wrap: wrap; }
  .adx-temprow input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--c-primary); }
  .adx-temprow input[type=date] { width: 140px; padding: 4px 8px; border: 1px solid var(--c-border); border-radius: var(--r-sm);
    font-size: 11.5px; font-family: inherit; }
  .adx-cfoot { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
  .adx-cfoot .adx-saving { margin-right: auto; font-size: 11px; }
  .adx-cfoot .adx-saving.err { color: var(--c-danger); } .adx-cfoot .adx-saving.ok { color: var(--c-success); }

  /* ledger 타임라인 (세로 rail + 색 노드, 날짜헤더 없음, 출처 배지) */
  .adx-ledger { display: flex; flex-direction: column; }
  .adx-row { display: grid; grid-template-columns: 52px 24px 1fr auto; gap: 10px; align-items: start;
    padding: 11px 6px; border-bottom: 1px solid var(--c-border-light); position: relative; }
  .adx-row:hover { background: var(--c-surface-alt); }
  .adx-row .adx-gut { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-muted); padding-top: 2px; white-space: nowrap; }
  .adx-railcol { position: relative; align-self: stretch; }
  .adx-railcol::before { content: ""; position: absolute; left: 11px; top: -11px; bottom: -11px; width: 2px; background: var(--c-border); }
  .adx-row:first-child .adx-railcol::before { top: 14px; }
  .adx-row:last-child .adx-railcol::before { bottom: auto; height: 14px; }
  .adx-nd { position: absolute; left: 5px; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-surface);
    border: 2px solid var(--c-border); z-index: 1; }
  .adx-row.t-shipment .adx-nd { border-color: var(--c-info); background: var(--c-info-bg); }
  .adx-row.t-status   .adx-nd { border-color: var(--c-success); background: var(--c-success-bg); }
  .adx-row.t-mapping  .adx-nd { border-color: var(--c-warning); background: var(--c-warning-bg); }
  .adx-row.t-create   .adx-nd { border-color: var(--c-primary); background: var(--c-primary-light); }
  .adx-row.t-note     .adx-nd { border-color: var(--c-text-muted); }
  .adx-row.t-info     .adx-nd { border-color: var(--c-text-2); }
  .adx-main { min-width: 0; }
  .adx-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .adx-tchip { font-size: 9px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 7px; border-radius: var(--r-sm); }
  .adx-tchip.t-shipment { background: var(--c-info-bg); color: var(--c-info); }
  .adx-tchip.t-status   { background: var(--c-success-bg); color: var(--c-success); }
  .adx-tchip.t-mapping  { background: var(--c-warning-bg); color: var(--c-warning); }
  .adx-tchip.t-create   { background: var(--c-primary-light); color: var(--c-primary); }
  .adx-tchip.t-note     { background: var(--c-border-light); color: var(--c-text-2); }
  .adx-tchip.t-info     { background: var(--c-border-light); color: var(--c-text-2); }
  .adx-ttitle { font-weight: var(--fw-semibold); font-size: 13px; }
  .adx-time { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--c-text-muted); }
  .adx-det { font-size: 11.5px; color: var(--c-text-2); margin-top: 4px; }
  .adx-det .who { color: var(--c-text); font-weight: var(--fw-semibold); }
  .adx-srcb { font-size: 9.5px; font-weight: var(--fw-bold); padding: 2px 7px; border-radius: var(--r-full); white-space: nowrap; align-self: start; margin-top: 2px; }
  .adx-srcb.src-human  { background: #f0ece6; color: #6b5020; }
  .adx-srcb.src-auto   { background: var(--c-info-bg); color: var(--c-info); }
  .adx-srcb.src-ship   { background: var(--c-primary-light); color: var(--c-primary); }
  .adx-row.temp { background: linear-gradient(90deg, var(--c-warning-bg), transparent 75%); }
  .adx-tempnote { grid-column: 3 / 5; margin-top: 7px; font-size: 10.5px; color: var(--c-warning-text);
    background: var(--c-surface); border: 1px dashed var(--c-warning); border-radius: var(--r-md); padding: 5px 9px;
    display: inline-flex; gap: 6px; width: fit-content; }
  .adx-tempnote.overdue { border-color: var(--c-danger); color: var(--c-danger-text); }
  .adx-empty { color: var(--c-text-muted); font-size: 12px; padding: 24px; text-align: center; }