/* Osolar Insight — opti/maxi 세그먼트 토글 (공용 컴포넌트 스타일만)
 * 화면별 opti 동작 규칙은 각 화면 <style> 의 :root[data-view="opti"] 에 둔다.
 * --bw-* 토큰은 각 화면 :root 에 정의돼 있어 그대로 참조한다. */

.vm-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bw-gray-50, #ececee);
  border-radius: var(--bw-radius-200, 8px);
  border: 1px solid var(--bw-border-default, rgba(17, 21, 36, 0.15));
}
.vm-seg-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--bw-font, "Pretendard", sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  padding: 6px 12px;
  border-radius: var(--bw-radius-100, 4px);
  background: transparent;
  color: var(--bw-text-quaternary, #585b66);
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.vm-seg-btn:hover {
  color: var(--bw-text-primary, #1d212f);
}
.vm-seg-btn.on {
  background: var(--bw-surface-default, #fff);
  color: var(--bw-text-primary, #1d212f);
  box-shadow: var(--bw-shadow-01, 0 0 8px rgba(0, 0, 0, 0.08));
}
.vm-seg-btn:focus-visible {
  outline: 2px solid var(--bw-text-brand, #1a66ff);
  outline-offset: 1px;
}

/* opti 전용으로만 보여줄 요소 / maxi 전용으로만 보여줄 요소 (공용 유틸) */
:root[data-view="opti"] .vm-maxi-only { display: none !important; }
:root[data-view="maxi"] .vm-opti-only { display: none !important; }