/* ===================================================================
   ConfigPanel 공통 스타일 (cp-*)
   - 시안 panel-input-new 의 v4-* 패턴을 cp-* 로 일반화
   - cp 전용 중성(회색) 토큰 — v5 의 보라 tint border 대신 사용
   =================================================================== */

:root {
  /* 라이트: 사이트 토큰(--background/--card/--foreground)과 정렬.
     hsl alias 로 쓰면 라이트/다크 자동 따라감. */
  --cp-surface:       hsl(var(--card));         /* 패널 카드면 = 사이트 카드 */
  --cp-bg-subtle:     hsl(var(--background));   /* 약간 더 어두운 영역 = 사이트 배경 */
  --cp-surface-hover: hsl(var(--accent));
  --cp-text:          hsl(var(--foreground));
  --cp-text-sec:      hsl(var(--foreground) / 0.78);   /* 라벨용 — 밝게 */
  --cp-text-muted:    hsl(var(--foreground) / 0.55);   /* 캡션용 — 가독 OK */
  --cp-border:        hsl(var(--border));
  --cp-border-subtle: hsl(var(--foreground) / 0.06);
  --cp-border-strong: hsl(var(--foreground) / 0.18);
}

/* 다크 — 우측 패널만 luminance 살짝 분리. 카드 박싱은 안 함. */
.dark .inv-right-panel,
html.dark .inv-right-panel {
  --cp-surface:       hsl(220 6% 17%);                /* 카드/입력칸 */
  --cp-bg-subtle:     hsl(220 6% 11%);                /* 패널 외곽 — soft dark */
  --cp-surface-hover: hsl(220 6% 24%);
  --cp-border:        hsl(0 0% 100% / 0.16);
  --cp-border-subtle: hsl(0 0% 100% / 0.15);          /* 섹션 구분선 — 한 단 더 진하게 */
  --cp-border-strong: hsl(0 0% 100% / 0.28);
  --cp-text:          hsl(0 0% 100% / 0.96);          /* 본문 — 거의 흰색 */
  --cp-text-sec:      hsl(0 0% 100% / 0.86);
  --cp-text-muted:    hsl(0 0% 100% / 0.62);
}

@keyframes cp-pop {
  0% { opacity: 0; transform: translateY(-4px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cp-slide-in {
  0% { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes cp-fade-up {
  0% { opacity: 0; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── CPGroup 펼침/접힘 (max-height + opacity) ──────────── */
.cp-group-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.22s var(--v5-ease-enter),
    opacity 0.16s ease-out;
}
.cp-group-content[data-open="true"] {
  max-height: 2000px;
  opacity: 1;
  transition:
    max-height 0.32s var(--v5-ease-enter),
    opacity 0.22s ease-in 0.04s;
}

/* ── CPSelect 트리거 — cp-fmt-trigger 와 모션 통일 ──────── */
.cp-select-trigger {
  transition:
    border-color 0.14s,
    box-shadow 0.14s,
    background-color 0.14s;
}
.cp-select-trigger:hover:not(:disabled):not([data-state="open"]) {
  border-color: var(--v5-primary) !important;
}
.cp-select-trigger[data-state="open"] {
  border-color: var(--v5-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--v5-primary-rgb), 0.12) !important;
}

/* ── CPSelect 옵션 항목 — variable cascade 우회, raw HSL 강제 ──── */
.cp-select-item {
  color: hsl(220 6% 12%);  /* 라이트 모드 — 거의 검정 */
  animation: cp-slide-in 0.18s var(--v5-ease-enter) backwards;
}
.dark .cp-select-item,
html.dark .cp-select-item,
:root.dark .cp-select-item {
  color: hsl(0 0% 100% / 0.95) !important;  /* 다크 모드 — 거의 흰색 */
}
.cp-select-item:hover:not(:disabled) {
  color: hsl(0 0% 0%);  /* 라이트 hover — 진한 검정 */
}
.dark .cp-select-item:hover:not(:disabled),
html.dark .cp-select-item:hover:not(:disabled),
:root.dark .cp-select-item:hover:not(:disabled) {
  color: hsl(0 0% 100%) !important;
}

/* ── CPSelect 검색 박스 ──────────────────────────────────── */
.cp-select-search {
  padding: 5px 5px 4px;
  border-bottom: 1px solid var(--cp-border-subtle);
  position: sticky;
  top: 0;
  background: var(--cp-surface);
  z-index: 1;
}
.cp-select-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  background: var(--cp-bg-subtle) !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: 4px !important;
  color: var(--cp-text) !important;
  font-size: 11.5px !important;
  outline: none;
  font-family: var(--v5-font-sans);
  transition: border-color .14s, box-shadow .14s;
}
.cp-select-search-input:focus,
.cp-select-search-input:focus-visible {
  border-color: var(--v5-primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--v5-primary-rgb), 0.12) !important;
}
.cp-select-search-input::placeholder {
  color: var(--cp-text-muted);
  opacity: 0.7;
}

/* ── 헤더 brumb [kind | type ▾] ── 좌우 보더 없이 패널 폭 통째로 ── */
.cp-bar {
  padding: 0;
  margin: 0 0 12px;
  position: relative;
  border-bottom: 1px solid var(--cp-border-subtle);
}
/* open 시 하단 분리선 transparent — popup 과 이어짐 */
.cp-bar[data-open="true"] {
  border-bottom-color: transparent;
}

/* trigger — 카드 외곽 없음, 그냥 좌/우 영역 분할 */
.cp-crumb-split {
  display: flex; align-items: stretch;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  min-height: 44px;
}
.cp-crumb-side { position: relative; display: flex; min-width: 0; }
/* 좌측 kind slot — popup kinds 컬럼과 동일한 width (112px) */
.cp-crumb-kind-slot {
  flex: 0 0 112px;
  background: var(--cp-bg-subtle);
}
.cp-crumb-type-slot { flex: 1; min-width: 0; }

.cp-crumb-divider {
  width: 1px;
  background: var(--cp-border);
  flex-shrink: 0;
  align-self: stretch;
  margin: 0;
}

/* 영역 버튼 공통 — popup row 와 동일한 padding + min-height */
.cp-crumb-side-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  min-height: 44px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  cursor: default;
  font-family: var(--v5-font-sans);
  text-align: left;
  width: 100%;
  min-width: 0;
  transition: background 0.14s;
}
.cp-crumb-side-btn[data-clickable="true"] { cursor: pointer; }
.cp-crumb-side-btn[data-clickable="true"]:hover { background: rgba(var(--v5-primary-rgb), 0.10); }
.cp-crumb-type-btn { cursor: pointer; }
.cp-crumb-type-btn:hover { background: rgba(var(--v5-primary-rgb), 0.10); }
.cp-crumb-type-btn[data-open="true"],
.cp-crumb-kind-btn[data-open="true"] { background: rgba(var(--v5-primary-rgb), 0.10); }

/* 좌측 : kind (회색 톤, 강조 X) */
.cp-crumb-kind-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-size: 11px; color: var(--cp-text-muted);
  flex-shrink: 0;
}
.cp-crumb-kind-name {
  font-size: 11.5px; font-weight: 700;
  color: var(--cp-text-sec);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.cp-crumb-kind-chev {
  display: inline-flex; color: var(--cp-text-muted);
  transition: transform 0.16s;
  font-size: 8px;
}
.cp-crumb-kind-btn[data-open="true"] .cp-crumb-kind-chev { transform: rotate(180deg); }

/* 우측 : type — 평소 회색, hover/active 시에만 primary 강조 */
.cp-crumb-type-icon {
  width: 24px; height: 24px;
  background: var(--cp-bg-subtle);
  border: 1px solid var(--cp-border);
  color: var(--cp-text-sec);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
  font-family: var(--v5-font-mono);
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.cp-crumb-type-btn[data-open="true"] .cp-crumb-type-icon,
.cp-crumb-type-btn:hover .cp-crumb-type-icon {
  background: var(--v5-primary);
  color: #fff;
  border-color: var(--v5-primary);
  box-shadow: 0 0 8px rgba(var(--v5-primary-rgb), 0.30);
}
.cp-crumb-type-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; flex: 1; }
.cp-crumb-type-name {
  font-size: 12.5px; font-weight: 700; color: var(--cp-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.cp-crumb-type-desc {
  font-size: 9.5px; color: var(--cp-text-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-crumb-type-chev {
  display: inline-flex; color: var(--cp-text-muted);
  flex-shrink: 0;
  transition: transform 0.16s;
  margin-left: auto;
}
.cp-crumb-type-btn[data-open="true"] .cp-crumb-type-chev { transform: rotate(180deg); }

/* 다크 모드 — split 은 카드 아니므로 별도 보정 불필요. divider 만 살짝 톤다운 */
.dark .cp-crumb-divider, html.dark .cp-crumb-divider {
  background: rgba(255, 255, 255, 0.10);
}

/* ── brumb 팝오버 — trigger 와 한 줄로 이어짐, 좌우 보더 없음 ──────── */
.cp-pop {
  position: absolute;
  top: 100%;
  z-index: 50;
  background: var(--cp-surface);
  border: none;
  border-bottom: 1px solid var(--cp-border-subtle);
  border-radius: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,0.14);
  padding: 4px;
  display: flex; flex-direction: column; gap: 0;
  animation: cp-pop 0.14s var(--v5-ease-enter);
}
.dark .cp-pop, html.dark .cp-pop {
  box-shadow: 0 14px 36px rgba(0,0,0,0.50), 0 2px 8px rgba(0,0,0,0.30);
}
/* cp-bar 의 padding (8px 12px) 안쪽으로 정렬 */
.cp-pop-kind {
  left: 12px; min-width: 130px;
}
.cp-pop-type-list {
  left: 12px; right: 12px; min-width: 0;
}

/* 통합 팝오버 — kinds(좌, 작은 컬럼) + types(우, 1fr) */
.cp-pop.cp-pop-combined {
  left: 0; right: 0;
  display: grid;
  grid-template-columns: 112px 1fr;
  padding: 0;
  overflow: hidden;
}
.cp-pop-combined.cp-pop-types-only {
  grid-template-columns: 1fr;
}
.cp-pop-col {
  display: flex; flex-direction: column;
  padding: 6px 4px;
  min-width: 0;
  gap: 1px;
}
.cp-pop-kinds-col {
  background: var(--cp-bg-subtle);
  border-right: 1px solid var(--cp-border);
}
/* kind 변경 시 컬럼 자체에 페이드 (안의 cp-pop-type 들은 stagger 로 들어옴) */
.cp-pop-types-col {
  animation: cp-fade-up 0.18s ease-out;
}

/* kind 팝오버 아이템 — 평면 strip */
.cp-pop-kind-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  min-height: 34px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;     /* layout 안정용 */
  border-radius: 4px;
  cursor: pointer; font-family: var(--v5-font-sans); text-align: left;
  animation: cp-slide-in 0.18s var(--v5-ease-enter) backwards;
  transition:
    background-color 0.12s ease-out,
    border-left-color 0.14s ease-out,
    color 0.14s ease-out;
}
.cp-pop-kind-item:hover { background: var(--cp-surface-hover); }
.cp-pop-kind-item[data-active="true"] {
  background: rgba(var(--v5-primary-rgb), 0.10);
  border-left-color: rgb(var(--v5-primary-rgb));
}
.cp-pop-kind-item-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-size: 11px; color: var(--cp-text-muted);
  flex-shrink: 0;
  transition: color 0.14s ease-out;
}
.cp-pop-kind-item-name {
  font-size: 12px; font-weight: 700;
  color: var(--cp-text);
  letter-spacing: -0.01em;
}
.cp-pop-kind-item[data-active="true"] .cp-pop-kind-item-name {
  color: var(--cp-text);
}
.cp-pop-kind-item[data-active="true"] .cp-pop-kind-item-icon {
  color: var(--v5-primary);
}
.cp-pop-type {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  min-height: 44px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer; font-family: var(--v5-font-sans); text-align: left;
  animation: cp-slide-in 0.18s var(--v5-ease-enter) backwards;
  transition:
    background-color 0.12s ease-out,
    border-left-color 0.14s ease-out;
}
.cp-pop-type:hover { background: var(--cp-surface-hover); }
.cp-pop-type[data-active="true"] {
  background: rgba(var(--v5-primary-rgb), 0.10);
  border-left-color: rgb(var(--v5-primary-rgb));
}
.cp-pop-type-icon {
  width: 24px; height: 24px;
  background: var(--cp-bg-subtle);
  border: 1px solid var(--cp-border);
  color: var(--cp-text-sec);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; font-family: var(--v5-font-mono);
  flex-shrink: 0;
  transition:
    background-color 0.18s ease-out,
    color 0.18s ease-out,
    border-color 0.18s ease-out,
    box-shadow 0.18s ease-out;
}
.cp-pop-type[data-active="true"] .cp-pop-type-icon {
  background: var(--v5-primary); color: #fff;
  border-color: var(--v5-primary);
  box-shadow: 0 0 8px rgba(var(--v5-primary-rgb), 0.35);
}
.cp-pop-type-text { flex: 1; min-width: 0; line-height: 1.25; }
.cp-pop-type-name { font-size: 12px; font-weight: 700; color: var(--cp-text); }
.cp-pop-type-desc { font-size: 10px; color: var(--cp-text-muted); margin-top: 1px; }
.cp-pop-type-col {
  font-size: 8.5px; color: var(--cp-text-muted); font-family: var(--v5-font-mono);
  padding: 1px 4px; background: var(--cp-bg-subtle); border-radius: 3px; flex-shrink: 0;
}

/* ── 형식 트리거 (본문 안 [형식 · ▾]) ──────────────────── */
.cp-fmt-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px dashed var(--cp-border-subtle);
}
.cp-fmt-head-cap {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--cp-text-muted); text-transform: uppercase; flex-shrink: 0;
}
.cp-fmt-head-dot { color: var(--cp-text-muted); flex-shrink: 0; }
.cp-fmt-head-desc {
  font-size: 9.5px; color: var(--cp-text-muted);
  font-family: var(--v5-font-mono);
  margin-left: auto;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 좁은 너비에서 desc 자동 숨김 */
@media (max-width: 340px) {
  .cp-fmt-head-desc { display: none; }
}
.cp-fmt-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; background: var(--cp-bg-subtle);
  border: 1px solid var(--cp-border);
  border-radius: 5px; cursor: pointer;
  font-family: var(--v5-font-sans);
  transition: all 0.14s;
}
.cp-fmt-trigger:hover { border-color: var(--v5-primary); background: var(--cp-surface); }
.cp-fmt-trigger[data-open="true"] {
  border-color: var(--v5-primary);
  box-shadow: 0 0 0 3px rgba(var(--v5-primary-rgb), 0.12);
  background: var(--cp-surface);
}
.cp-fmt-trigger-icon {
  width: 18px; height: 18px;
  background: var(--cp-bg-subtle);
  border: 1px solid var(--cp-border);
  color: var(--cp-text-sec);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; font-family: var(--v5-font-mono);
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.cp-fmt-trigger[data-open="true"] .cp-fmt-trigger-icon,
.cp-fmt-trigger:hover .cp-fmt-trigger-icon {
  background: var(--v5-primary); color: #fff;
  border-color: var(--v5-primary);
}
.cp-fmt-trigger-name { font-size: 11.5px; font-weight: 700; color: var(--cp-text); }
.cp-fmt-trigger-chev {
  color: var(--cp-text-muted); font-size: 8px;
  transition: transform 0.14s; display: inline-flex;
}
.cp-fmt-trigger[data-open="true"] .cp-fmt-trigger-chev { transform: rotate(180deg); }

.cp-fmt-pop {
  position: absolute; z-index: 40;
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: 4px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.16);
  padding: 4px; min-width: 220px;
  animation: cp-pop 0.14s var(--v5-ease-enter);
}
.cp-fmt-pop-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  cursor: pointer; font-family: var(--v5-font-sans); text-align: left;
  transition:
    background-color 0.12s ease-out,
    border-left-color 0.14s ease-out;
}
.cp-fmt-pop-item:hover { background: var(--cp-surface-hover); }
.cp-fmt-pop-item[data-active="true"] {
  background: rgba(var(--v5-primary-rgb), 0.10);
  border-left-color: rgb(var(--v5-primary-rgb));
}
.cp-fmt-pop-item-icon {
  width: 18px; height: 18px;
  background: var(--cp-bg-subtle);
  border: 1px solid var(--cp-border);
  color: var(--cp-text-sec);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; font-family: var(--v5-font-mono);
  flex-shrink: 0;
  transition:
    background-color 0.18s ease-out,
    color 0.18s ease-out,
    border-color 0.18s ease-out,
    box-shadow 0.18s ease-out;
}
.cp-fmt-pop-item[data-active="true"] .cp-fmt-pop-item-icon {
  background: var(--v5-primary); color: #fff;
  border-color: var(--v5-primary);
  box-shadow: 0 0 6px rgba(var(--v5-primary-rgb), 0.30);
}
.cp-fmt-pop-item-text { flex: 1; min-width: 0; line-height: 1.2; }
.cp-fmt-pop-item-name { font-size: 11px; font-weight: 700; color: var(--cp-text); }
.cp-fmt-pop-item-desc { font-size: 9.5px; color: var(--cp-text-muted); margin-top: 1px; }

/* ── 푸터 ──────────────────────────────────────────────── */
.cp-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--cp-border-subtle);
  background: var(--cp-bg-subtle);
  display: flex; align-items: center; gap: 10px;
}
.cp-foot-id {
  font-family: var(--v5-font-mono); font-size: 10px;
  color: var(--cp-text-muted); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-foot-btns { display: flex; gap: 6px; }
.cp-foot-btn {
  padding: 5px 10px; font-size: 11px; font-weight: 600; border-radius: 5px;
  cursor: pointer; font-family: var(--v5-font-sans);
  border: 1px solid var(--cp-border);
  background: var(--cp-surface); color: var(--cp-text);
}
.cp-foot-btn:hover { border-color: var(--v5-primary); }
.cp-foot-btn.primary {
  background: var(--v5-primary); color: #fff;
  border-color: var(--v5-primary);
  box-shadow: var(--v5-glow-sm);
}
.cp-foot-btn.primary:hover { box-shadow: var(--v5-glow-md); }

/* ═══════════════════════════════════════════════════════════
   외곽 패널 (inv-right-panel) 전체 cp 톤 통일
   - 사용자 요청: "위/아래 외곽 디자인도 cp 와 같은 톤으로"
   - shadcn 컴포넌트들의 외관(border, background, font-size, height)을
     cp 토큰으로 강제 override.
   ═══════════════════════════════════════════════════════════ */

/* ① 패널 배경 + 라인 — 사이트 main 톤(더 진함). 안의 카드는 cp-surface(살짝 밝음)로 분리 */
.inv-right-panel {
  background: var(--cp-bg-subtle) !important;
  font-family: var(--v5-font-sans);
  color: var(--cp-text);
}
.inv-right-panel,
.inv-right-panel .border-l,
.inv-right-panel .border-r,
.inv-right-panel .border-t,
.inv-right-panel .border-b,
.inv-right-panel .border-border,
.inv-right-panel .border-border\/50,
.inv-right-panel [class*="border-input"] {
  border-color: var(--cp-border) !important;
}

/* ② 입력 필드 외관 통일 (h-7 = 28px, cp-text 12px, cp-surface bg) */
.inv-right-panel input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
.inv-right-panel select,
.inv-right-panel [role="combobox"],
.inv-right-panel [class*="SelectTrigger"] {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  border: 1px solid var(--cp-border) !important;
  background: var(--cp-surface) !important;
  border-radius: 6px !important;
  color: var(--cp-text) !important;
  box-shadow: none !important;
}
.inv-right-panel textarea {
  font-size: 12px !important;
  border: 1px solid var(--cp-border) !important;
  background: var(--cp-surface) !important;
  border-radius: 6px !important;
  color: var(--cp-text) !important;
  padding: 8px !important;
}
.inv-right-panel input:focus-visible,
.inv-right-panel select:focus-visible,
.inv-right-panel textarea:focus-visible,
.inv-right-panel [role="combobox"]:focus-visible,
.inv-right-panel [data-state="open"][class*="SelectTrigger"] {
  border-color: var(--v5-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--v5-primary-rgb), 0.12) !important;
  outline: none !important;
}
.inv-right-panel input::placeholder,
.inv-right-panel textarea::placeholder {
  color: var(--cp-text-muted) !important;
  opacity: 0.7 !important;
}

/* ③ 라벨 (Label / 작은 캡션) */
.inv-right-panel label {
  font-size: 11px !important;
  color: var(--cp-text-sec) !important;
  font-weight: 500 !important;
}

/* ④ 섹션 헤더 (h3/h4 — DIMENSIONS / OPTIONS / LABEL / 컴포넌트 스타일 등) */
.inv-right-panel h3,
.inv-right-panel h4 {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--cp-text-muted) !important;
  font-family: var(--v5-font-sans) !important;
}

/* ⑤ 섹션 좌측 컬러 아이콘 (조건부 표시 ⚡, 컴포넌트 스타일 🎨)
     primary 보라 → 중성 회색으로 다운 */
.inv-right-panel summary svg,
.inv-right-panel summary [class*="lucide"],
.inv-right-panel details > summary svg {
  color: var(--cp-text-muted) !important;
}

/* ⑥ 버튼 외관 통일 (Collapsible trigger 등) */
.inv-right-panel button[class*="rounded-lg"],
.inv-right-panel [data-state][role="button"] {
  border-color: var(--cp-border) !important;
  background: var(--cp-bg-subtle) !important;
}

/* ⑦ Collapsible chevron 작게 + muted */
.inv-right-panel [data-state="closed"] svg.lucide-chevron-down,
.inv-right-panel [data-state="open"] svg.lucide-chevron-down,
.inv-right-panel button svg.lucide-chevron-down {
  width: 12px !important;
  height: 12px !important;
  color: var(--cp-text-muted) !important;
}

/* ⑧ shadcn Select 의 dropdown (열렸을 때 하단 카드) */
[role="listbox"][class*="SelectContent"],
[data-radix-select-content] {
  border-color: var(--cp-border) !important;
  background: var(--cp-surface) !important;
}
[data-radix-select-item][data-highlighted] {
  background: var(--cp-surface-hover) !important;
}

/* ⑨ Separator 색 통일 */
.inv-right-panel [role="separator"],
.inv-right-panel hr {
  background-color: var(--cp-border-subtle) !important;
  border-color: var(--cp-border-subtle) !important;
}
