/* css/theme.css  —  브랜드 테마 오버라이드(어두운 왼쪽 패널·포인트 색) — 앞 파일들의 규칙을 덮어쓴다
   로드 순서 5/5: 캐스케이드(나중 규칙이 이긴다)가 원래 순서에 의존하므로 index.html 의 <link> 순서를 바꾸지 않는다. */

/* ═══════════════════════════════════════════════════════
   mnlk.co.kr TONE & MANNER — Left sidebar dark theme
   Site palette: bg #1D2F2F · text #fff · accent #E75656
   ═══════════════════════════════════════════════════════ */

/* ── Left panel dark base ── */
#left {
  background: var(--accent);          /* #1D2F2F */
  border-right: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.85);
}
#left::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }

/* section dividers */
.sec { border-bottom-color: rgba(255,255,255,.07); }
.sec-label {
  color: rgba(255,255,255,.32);
}
.sec-label::after { background: rgba(255,255,255,.1); }

/* module cards */
.mod-icon { background: rgba(255,255,255,.07); }
.mod-name { color: rgba(255,255,255,.88); }
.mod-dim  { color: rgba(255,255,255,.42); }
.mod-price{ color: rgba(255,255,255,.42); }
.mod-card:hover  { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.cat-divider {
  color: rgba(255,255,255,.28);
  border-bottom-color: rgba(255,255,255,.1);
}
.cat-empty { color: rgba(255,255,255,.28); }
.auto-dim  { background: rgba(255,255,255,.1); color: rgba(255,255,255,.45); }

/* wall size inputs */
.space-inp {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.88);
}
.space-inp:focus { border-color: rgba(255,255,255,.4); }
.space-unit, .space-sep { color: rgba(255,255,255,.45); }
.space-hint { color: rgba(255,255,255,.28); }

/* preset cards */
.preset-card { border-color: rgba(255,255,255,.1); }
.preset-card:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.28);
}
.preset-card.active { border-color: var(--red); }
.preset-card-label { color: rgba(255,255,255,.48); }
.preset-card:hover .preset-card-label { color: rgba(255,255,255,.8); }
.preset-card.active .preset-card-label { color: var(--red); font-weight: 500; }
.preset-card-no-img {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.28);
}

/* color swatches */
.sw-group-label { color: rgba(255,255,255,.32); }
.sw-card { border-color: rgba(255,255,255,.12); }
.sw-card:hover { border-color: rgba(255,255,255,.38); }
.sw-card.on { border-color: #fff; border-width: 2px; }
.sw-card.on .sw-card-label { color: #fff; font-weight: 500; }
.sw-card-label { color: rgba(255,255,255,.7); }

/* ── Right sidebar — keep light, tighten brand color usage ── */
#right {
  background: var(--white);
}
.bom-group-label { color: var(--accent); }
.total-v { color: var(--accent); }

/* ── Floating view tabs — match site nav feel ── */
#float-view {
  background: var(--accent);
  border-color: rgba(255,255,255,.12);
}
.vtab {
  color: rgba(255,255,255,.45);
  border-right-color: rgba(255,255,255,.1);
}
.vtab.on { background: var(--red); color: #fff; }
.vtab:not(.on):hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }

/* ── 벽 탭(v35 코너) — 뷰 탭과 같은 활성 색 ── */
.wtab.on { background: var(--red); color: #fff; }

/* ── Sub-accent (#E9D8A0) — 선택/활성 상태 전반 ── */

/* 언어 토글 */
.lang-tab.on { background: var(--red); color: #fff; border-color: var(--red); }

/* 프리셋 카드 활성 */
.preset-card.active { border-color: var(--sub) !important; }
.preset-card.active .preset-card-label { color: var(--sub) !important; font-weight: 500; }

/* 컬러 스와치 카드 활성 */
.sw-card.on { border-color: var(--sub) !important; border-width: 2px; }
.sw-card.on .sw-card-label { color: var(--sub) !important; font-weight: 500; }

/* 왼쪽 사이드바 hover 강조 */
.mod-card:hover  { border-color: rgba(233,216,160,.35) !important; }

/* BOM 그룹 레이블 */
.bom-group-label { color: var(--sub); border-bottom-color: rgba(233,216,160,.25); }