/* ════════════════════════════════════════════════════
   재고 관리 뷰 (#stockView) — SPA 편입본
   · 대시보드 셸(main.container) 안에서 다른 뷰(#systemView 등)와 동일한
     .section / .section-title-row / .btn 결을 그대로 차용.
   · 색·간격·반경은 common.css 토큰만 사용(신규 팔레트 발명 금지).
   · JS(stock.js)가 렌더하는 클래스(.stk-edit·.stk-hist·.lvl-*)와
     id/data-* 셀렉터는 마크업에서 불변. CSS는 그 위에 스타일만 입힌다.
   · 라이트 테마 전용. 화면 폭 1440 기준, ≤640 표는 가로 스크롤로 생존.
   전역 유출 방지를 위해 전 규칙을 #stockView로 스코프.
   ════════════════════════════════════════════════════ */

/* ⛔ 뷰 전환 규칙 — 빠뜨리면 "재고 표 밑에 퍼포먼스 대시보드가 같이 나온다".
   switchView("stock")이 .container에 view-stock을 붙이면 퍼포먼스 직계 섹션을 숨기고
   #stockView만 남긴다. system-channel.css:6 / cost.css의 view-cost 패턴과 동일.
   (chat.css:607 주석 — 이 규칙 누락이 과거 "테이블 밑에 챗봇이 같이 나오는" 버그 원인이었다.) */
.container.view-stock > .section:not(#stockView),
.container.view-stock > #bannerSlot,
.container.view-stock > #emptySlot {
  display: none;
}

#stockView { display: block; }
#stockView[hidden] { display: none; }          /* 뷰 미전환 시 숨김 유지 */

/* 섹션 간 리듬 — .section(common) 위 미세 조정 */
#stockView .stk-section { margin-bottom: 22px; }
#stockView .section-title .cap { font-variant-numeric: tabular-nums; }

/* ────────────────────────────────────────────────
   ① 미매칭 경고 — 접이식(details). 기본 접힘 + 건수 배지.
   과한 빨강 배너 대신 앰버(주의) 톤 + 조밀한 한 줄 요약.
   ──────────────────────────────────────────────── */
#stockView .stk-alert {
  margin: 0 0 20px;
  background: var(--surface);
  border: 1px solid #F0DCB0;
  border-left: 3px solid #D9A441;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
#stockView .stk-alert[hidden] { display: none; }

#stockView .stk-alert-sum {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--text);
}
#stockView .stk-alert-sum::-webkit-details-marker { display: none; }
#stockView .stk-alert-sum:hover { background: #FCF7EC; }
#stockView .stk-alert-sum:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

#stockView .stk-alert-ico {
  flex: 0 0 auto; width: 17px; height: 17px;
  fill: none; stroke: #C48A24; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
#stockView .stk-alert-title { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
#stockView .stk-alert-badge {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 700;
  color: #8A5A10; background: #FBF0D8;
  padding: 1px 9px; border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
#stockView .stk-alert-hint { font-size: 11.5px; color: var(--muted); }
#stockView .stk-alert-chev {
  flex: 0 0 auto; margin-left: auto;
  width: 16px; height: 16px;
  fill: none; stroke: var(--muted); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
#stockView .stk-alert[open] .stk-alert-chev { transform: rotate(180deg); }

#stockView .stk-alert-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--line);
}
#stockView .stk-alert-desc {
  margin: 12px 0 12px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.55;
}

/* 미매칭 목록 — 조밀한 반응형 그리드(칩형 클릭 행) */
#stockView .stk-unmapped-list {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 10px;
}
#stockView .stk-unmapped-list li {
  display: flex; align-items: baseline; gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12.5px; color: var(--text);
  line-height: 1.4; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
#stockView .stk-unmapped-list li:hover {
  background: var(--sage-tint);
  border-color: var(--sage-tint-2);
}
#stockView .stk-unmapped-list li small { color: var(--muted); font-size: 11px; white-space: nowrap; }
#stockView .stk-unmapped-list:empty { display: none; }

#stockView .stk-map-toggle { width: auto; }
#stockView .stk-map-toggle svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* 매핑 추가 폼 — 흰 인셋 카드 */
#stockView .stk-map-form {
  margin-top: 14px;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
#stockView .stk-map-form[hidden] { display: none; }
#stockView .stk-map-warn {
  margin: 0 0 14px; padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: #FBF3E6; border: 1px solid #F0DCB0;
  color: #8A5A10; font-size: 12px; line-height: 1.55;
}
#stockView .stk-map-warn b { font-weight: 700; }

#stockView .stk-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
#stockView .stk-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#stockView .stk-field-full { grid-column: 1 / -1; }
#stockView .stk-field-lbl { font-size: 12px; font-weight: 600; color: var(--text-2); }
#stockView .stk-field-lbl em {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  color: var(--brand); background: var(--sage-tint);
  padding: 0 6px; border-radius: var(--radius-pill); margin-left: 4px;
}
#stockView .stk-map-form input {
  font: inherit; font-size: 13.5px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
#stockView .stk-map-form input::placeholder { color: var(--muted); }
#stockView .stk-map-form input:focus-visible {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--sage-tint);
}
#stockView .stk-map-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;
}
#stockView .stk-map-actions .btn { width: auto; }
#stockView .stk-map-save { padding: 9px 18px; }

/* ────────────────────────────────────────────────
   ② 툴바(검색·필터·새로고침) — .section-title-actions 위 stk 전용
   ──────────────────────────────────────────────── */
/* 한 줄 유지(#70) — wrap이면 새로고침이 검색창 아래로 떨어진다.
   검색창은 필요 시 줄어들되(flex: 0 1 260px + min-width) 체크박스·버튼은 안 줄어든다. */
#stockView .stk-tools { gap: 10px; flex-wrap: nowrap; }
#stockView .stk-chk,
/* 검색창과 새로고침 버튼은 같은 높이(#70). 폰트(14 vs 13px)가 달라 패딩만으론 39 vs 35px로 어긋난다.
   한 변수로 묶어 둘이 항상 같이 움직이게 한다. box-sizing: border-box라 패딩과 충돌하지 않는다. */
#stockView .stk-tools { --stk-ctl-h: 38px; }
#stockView .stk-search,
#stockView .stk-refresh { height: var(--stk-ctl-h); box-sizing: border-box; }

#stockView .stk-refresh { flex: 0 0 auto; white-space: nowrap; }

#stockView .stk-search {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 1 260px; min-width: 0;
  padding: 8px 13px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--muted);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#stockView .stk-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--sage-tint);
}
#stockView .stk-search-ico {
  flex: 0 0 auto; width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
#stockView .stk-search input {
  flex: 1 1 auto; min-width: 0;
  border: none; background: transparent; outline: none;
  font: inherit; font-size: 13px; color: var(--text);
}
#stockView .stk-search input::placeholder { color: var(--muted); }
#stockView .stk-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

#stockView .stk-chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer; white-space: nowrap;
}
#stockView .stk-chk input { accent-color: var(--brand); width: 15px; height: 15px; }

#stockView .stk-refresh { width: auto; gap: 6px; }
#stockView .stk-refresh svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* 새로고침 진행 표시 — 눌러도 반응이 없어 되는지 알 수 없다는 지적(2026-07-20).
   진행 중엔 아이콘이 돌고 버튼이 눌리지 않는다(라벨은 JS가 '불러오는 중…'으로 교체). */
#stockView .stk-refresh.is-loading svg { animation: spin .8s linear infinite; }
#stockView .stk-refresh[disabled] { opacity: .6; cursor: default; }

/* 상태 메시지 — 저장/오류 안내(role=status). 비었을 땐 자리 차지 X */
#stockView .stk-msg {
  min-height: 0; margin: 0 0 10px;
  font-size: 12.5px; color: var(--text-2);
}
#stockView .stk-msg:empty { display: none; }

/* ────────────────────────────────────────────────
   ③ 재고 표 — .table-card 결(흰 카드 + soft shadow). 가로 스크롤은 .stk-scroll.
   thead는 sticky 미사용(단순 flat 표 + 혼합 스크롤 컨텍스트 회피).
   ──────────────────────────────────────────────── */
#stockView .stk-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;                 /* 둥근 모서리 클리핑 */
}
#stockView .stk-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
#stockView .stk-scroll::-webkit-scrollbar { height: 10px; }
#stockView .stk-scroll::-webkit-scrollbar-track { background: transparent; }
#stockView .stk-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
#stockView .stk-scroll::-webkit-scrollbar-thumb:hover { background: var(--sage); }

#stockView .stk-table {
  width: 100%;
  min-width: 880px;                 /* 이 폭 미만이면 .stk-scroll이 가로 스크롤 */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

/* 열 폭 — 제품명 넉넉히(줄바꿈 금지), 추이 열은 '추이' 세로깨짐 방지 폭 확보 */
#stockView .stk-col-prod  { width: 34%; min-width: 200px; }
#stockView .stk-col-num   { width: 11%; }
#stockView .stk-col-edit  { width: 11%; }
/* 추이 + 숨기기 두 버튼이 들어간다(#71) — 74px면 '추\n이'처럼 세로로 깨진다. */
#stockView .stk-col-trend { width: 158px; }

/* 헤더 */
#stockView .stk-table thead th {
  background: var(--thead-bg);
  color: var(--text-2);
  font-weight: 700; font-size: 12px;
  white-space: nowrap;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
  text-align: right;                /* 숫자 열 기본 우측 */
  vertical-align: middle;
}
#stockView .stk-table thead th.stk-th-prod { text-align: left; }
#stockView .stk-table thead th.stk-th-trend { text-align: center; }

/* 정렬 가능한 헤더(th[data-sort]) — 클릭 어포던스 + 캐럿 */
#stockView .stk-table thead th[data-sort] {
  cursor: pointer; user-select: none;
  transition: color .12s ease;
}
#stockView .stk-table thead th[data-sort]:hover { color: var(--brand); }
#stockView .stk-table thead th[data-sort]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: -2px;
}
#stockView .stk-table thead th[data-sort]::after {
  content: "";
  display: inline-block; width: 0; height: 0; margin-left: 5px;
  vertical-align: middle; opacity: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
}
#stockView .stk-table thead th[aria-sort="ascending"]::after {
  opacity: 1; border-bottom: 4px solid currentColor;
}
#stockView .stk-table thead th[aria-sort="descending"]::after {
  opacity: 1; border-top: 4px solid currentColor;
}

/* 편집 가능 열 헤더 — ✎ 마커로 '수정 가능' 신호 */
#stockView .stk-table thead th.stk-th-edit::before {
  content: "✎";
  margin-right: 5px; font-size: 11px; color: var(--muted);
}

/* 본문 셀 */
#stockView .stk-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
  text-align: right;                                 /* 숫자 열 기본 우측 */
  font-variant-numeric: tabular-nums;
}
#stockView .stk-table tbody td:first-child {         /* 제품명 — 좌측, 한 줄 유지 */
  text-align: left;
  font-variant-numeric: normal;
  font-weight: 600;
  max-width: 0;                                      /* ellipsis 활성화 */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#stockView .stk-table tbody td:last-child { text-align: center; }
#stockView .stk-table tbody tr:last-child td { border-bottom: none; }
#stockView .stk-table tbody tr:nth-child(even) td { background: rgba(243, 244, 246, .5); }
#stockView .stk-table tbody tr:hover td { background: var(--surface-3); }

/* 가용재고 경보 배지(.lvl-* = JS 렌더). 색 + 아이콘(shape)로 위계 구분(접근성). */
#stockView .stk-table .lvl-normal {
  color: var(--text); font-variant-numeric: tabular-nums;
}
#stockView .stk-table .lvl-warning,
#stockView .stk-table .lvl-danger {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--radius-pill);
  font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;              /* 재고 숫자 두 줄 방지 */
}
/* 재고 숫자 셀(가용재고·정상재고)은 어떤 폭에서도 한 줄 유지 */
#stockView .stk-table tbody td:nth-child(2),
#stockView .stk-table tbody td:nth-child(3) { white-space: nowrap; }
#stockView .stk-table .lvl-warning::before,
#stockView .stk-table .lvl-danger::before {
  content: "\26A0";                 /* ⚠ — 색맹 대비 비색상 신호 */
  font-size: 10px; line-height: 1;
}
#stockView .stk-table .lvl-warning { color: #8A5A10; background: #FBF0D8; }
#stockView .stk-table .lvl-danger  { color: var(--neg-strong, #B82828); background: var(--neg-bg); }

/* 인라인 편집 input(.stk-edit = JS 렌더) — 편집 가능함이 항상 드러나게 */
#stockView .stk-table .stk-edit {
  width: 100%; min-width: 56px;
  font: inherit; font-size: 13px;
  text-align: right; font-variant-numeric: tabular-nums;
  padding: 6px 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
#stockView .stk-table .stk-edit::placeholder { color: var(--muted); }
#stockView .stk-table .stk-edit:hover {
  border-color: var(--line-strong); background: var(--surface-3);
}
#stockView .stk-table .stk-edit:focus-visible {
  outline: none; border-color: var(--brand); background: var(--surface);
  box-shadow: 0 0 0 3px var(--sage-tint);
}
#stockView .stk-table .stk-edit:disabled { opacity: .55; cursor: progress; }

/* 추이 버튼(.stk-hist = JS 렌더) — 글자 세로깨짐 방지(nowrap + 열폭) */
#stockView .stk-table .stk-hist {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
#stockView .stk-table .stk-hist:hover {
  background: var(--sage-tint); border-color: var(--sage-tint-2); color: var(--brand);
}
#stockView .stk-table .stk-hist:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 동작 열 — 추이 + 숨기기(#71) */
#stockView .stk-table td.stk-td-act { text-align: center; white-space: nowrap; }
#stockView .stk-table td.stk-td-act > * + * { margin-left: 6px; }
#stockView .stk-table .stk-hide {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
#stockView .stk-table .stk-hide:hover { background: var(--surface-2); color: var(--text-2); border-color: var(--line-strong); }
#stockView .stk-table .stk-hide:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#stockView .stk-table .stk-hide:disabled { opacity: .5; cursor: default; }
/* 별표(상단 고정) 버튼 — .stk-hide 톤. 미고정=빈 별(회색), 고정=금색 채움. */
#stockView .stk-table .stk-pin {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 5px 8px;
  cursor: pointer; vertical-align: middle;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
#stockView .stk-table .stk-pin svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
#stockView .stk-table .stk-pin:hover { border-color: var(--line-strong); color: var(--text-2); }
#stockView .stk-table .stk-pin.is-pinned { border-color: #f0c000; color: #e0a800; background: #fffbe8; }
#stockView .stk-table .stk-pin.is-pinned svg { fill: #f5c518; stroke: #e0a800; }
#stockView .stk-table .stk-pin:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#stockView .stk-table .stk-pin:disabled { opacity: .5; cursor: default; }

/* ────────────────────────────────────────────────
   ③-2 숨김 드롭다운(#71) — 표 아래. 상단 미매칭 배너(details)와 같은 접힘 패턴,
      톤만 중립(회색)으로. 숨김은 경고가 아니라 사용자의 표시 설정이다.
   ──────────────────────────────────────────────── */
#stockView .stk-hidden {
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
#stockView .stk-hidden[hidden] { display: none; }
#stockView .stk-hidden-sum {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  cursor: pointer; user-select: none;
  list-style: none;
}
#stockView .stk-hidden-sum::-webkit-details-marker { display: none; }
#stockView .stk-hidden-sum:hover { background: var(--surface-2); }
#stockView .stk-hidden-ico {
  width: 15px; height: 15px; flex: 0 0 auto;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
#stockView .stk-hidden-title { font-size: 13px; font-weight: 700; color: var(--text-2); }
#stockView .stk-hidden-badge {
  font-size: 11.5px; font-weight: 700; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
#stockView .stk-hidden-chev {
  width: 15px; height: 15px; margin-left: auto; flex: 0 0 auto;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(-90deg); transition: transform .15s ease;
}
#stockView .stk-hidden[open] .stk-hidden-chev { transform: rotate(0deg); }

#stockView .stk-hidden-list {
  list-style: none; margin: 0;
  padding: 4px 14px 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px;
}
#stockView .stk-hidden-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
#stockView .stk-hidden-name {
  font-size: 12.5px; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#stockView .stk-hidden-qty {
  margin-left: auto; flex: 0 0 auto;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
#stockView .stk-unhide {
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text-2);
  border-radius: var(--radius-pill);
  padding: 4px 10px; font-size: 11.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
#stockView .stk-unhide:hover { background: var(--sage-tint); border-color: var(--sage-tint-2); color: var(--brand); }
#stockView .stk-unhide:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#stockView .stk-unhide:disabled { opacity: .5; cursor: default; }
#stockView .stk-hidden-empty { font-size: 12.5px; color: var(--muted); padding: 6px 2px; }

/* ────────────────────────────────────────────────
   ④ 재고 추이 차트
   ──────────────────────────────────────────────── */
#stockView .stk-section-chart { margin-bottom: 8px; }
#stockView .stk-chart {
  padding: 16px 18px 18px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
#stockView .stk-chart[hidden] { display: none; }
/* 추이 차트를 제품 행 바로 아래에 끼워 넣는 host 행 — 셀 기본 여백 제거, 차트 카드만 보이게. */
#stockView .stk-chart-host > td { padding: 6px 0 10px; background: transparent; border: none; }
#stockView .stk-chart-host .stk-chart { margin: 0; }
#stockView .stk-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
/* 추이 기간 세그먼트 — 제목과 닫기 사이, 오른쪽 정렬. .tg-tab 톤 복제(알약·active=brand). */
#stockView .stk-range {
  flex: 0 0 auto; margin-left: auto;
  display: inline-flex; gap: 2px;
  background: var(--main-bg); border-radius: var(--radius-pill); padding: 3px;
}
#stockView .stk-range button {
  border: none; background: transparent;
  padding: 5px 11px; border-radius: var(--radius-pill);
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted); cursor: pointer; white-space: nowrap; transition: all .12s;
}
#stockView .stk-range button:hover { color: var(--text); }
#stockView .stk-range button.is-active {
  background: var(--surface); color: var(--brand);
  box-shadow: 0 1px 2px rgba(46,51,47,.10);
}
#stockView .stk-chart-title {
  margin: 0; min-width: 0;
  font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#stockView .stk-chart-close { flex: 0 0 auto; width: auto; gap: 5px; }
#stockView .stk-chart-close svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
#stockView .stk-chart-body { position: relative; height: 300px; }
#stockView #stockChart { width: 100% !important; height: 100% !important; }

/* ────────────────────────────────────────────────
   ⑤ 반응형 — ≤640: 표는 가로 스크롤로 생존, 툴바/폼은 세로 스택
   ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  #stockView .section-title-row { align-items: flex-start; }
  #stockView .stk-tools { width: 100%; }
  #stockView .stk-search { flex: 1 1 auto; }
  #stockView .stk-refresh-lbl { display: none; }   /* 좁은 폭에선 아이콘만 */
  #stockView .stk-refresh { padding: 8px 11px; }
  #stockView .stk-map-grid { grid-template-columns: 1fr; }
  #stockView .stk-unmapped-list { grid-template-columns: 1fr; }
  /* table-layout:fixed 라야 열 width가 강제된다(auto에선 min-width 표에서 제품명이 나머지 폭을 다 먹음). */
  #stockView .stk-table { font-size: 12.5px; table-layout: fixed; min-width: 760px; }
  #stockView .stk-table thead th { padding: 10px 11px; }
  #stockView .stk-table tbody td { padding: 9px 11px; }
  /* 열 폭은 colgroup의 col로 강제(fixed에선 col width가 우선). 데스크탑 stk-col-prod의 min-width:200 해제가 핵심. */
  #stockView .stk-col-prod  { width: 92px; min-width: 0; }
  #stockView .stk-col-num   { width: 86px; }
  #stockView .stk-col-edit  { width: 86px; }
  #stockView .stk-col-trend { width: 150px; }
  /* 제품명 셀 — 긴 이름 줄바꿈 + sticky 고정(폭은 col-prod가 결정). */
  #stockView .stk-table th.stk-th-prod,
  #stockView .stk-table tbody td:first-child {
    white-space: normal; word-break: break-all;
    position: sticky; left: 0; z-index: 2;   /* 가로 스크롤 시 제품명 열 왼쪽 고정 */
  }
  #stockView .stk-table tbody td:first-child { background: var(--surface); }
  /* 짝수행(반투명 zebra)·hover도 sticky 셀은 불투명이라야 뒤 셀이 안 비친다. */
  #stockView .stk-table tbody tr:nth-child(even) td:first-child { background: #f9fafb; }
  #stockView .stk-table tbody tr:hover td:first-child { background: var(--surface-3); }
  #stockView .stk-table thead th.stk-th-prod { z-index: 3; }   /* 헤더 제품명은 행 위 */
  #stockView .stk-chart-body { height: 240px; }
}