/* 빌다 디자인시스템: 선택 칩·하위 탐색·계정 배지. 화면 배치는 제품 CSS가 소유한다. */

.chips {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}


.chip,
.admin-tabs > button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-12);
  font-size: var(--type-ui);
  cursor: pointer;
  font-family: inherit;
  line-height: var(--leading-ui);
}

.chip:where(:hover:not(:disabled):not([aria-disabled="true"])),
.admin-tabs > button:where(:hover:not(:disabled):not([aria-disabled="true"])) { color: var(--text); }

.chip[aria-pressed="true"],
.admin-tabs > button[aria-pressed="true"] {
  background: var(--selected-fill);
  border-color: var(--selected-fill);
  color: var(--selected-text);
}


.dash-subtabs { display: flex; gap: var(--space-20); margin-bottom: var(--space-20); border-bottom: 1px solid var(--border); }
/* 내부 하위 탐색: 관리·제작자·고객이 같은 위치/포커스 상태를 공유한다. */
:is(.admin-subtabs, .dash-subtabs) { overflow-x: auto; }
:is(.admin-subtabs, .dash-subtabs) button { position: relative; flex: 0 0 auto; min-height: var(--control-lg); border: 0; padding: var(--space-8) 0 var(--space-10); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--type-body-sm); font-weight: var(--weight-semibold); white-space: nowrap; cursor: pointer; }
:is(.admin-subtabs, .dash-subtabs) button::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: transparent; }
:is(.admin-subtabs, .dash-subtabs) button:hover:not(:disabled) { color: var(--text); }
:is(.admin-subtabs, .dash-subtabs) button[aria-pressed="true"] { color: var(--text); }
:is(.admin-subtabs, .dash-subtabs) button[aria-pressed="true"]::after { background: var(--selected-fill); }
:is(.admin-subtabs, .dash-subtabs) button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(-1 * var(--focus-ring-offset)); border-radius: var(--radius-xs); }
:is(.admin-subtabs, .dash-subtabs) button:disabled { color: var(--text-disabled); cursor: not-allowed; }

.dash-subtabs[hidden] { display: none; }

.account-plan-badge { display: inline-flex; align-items: center; width: fit-content; padding: var(--space-2) var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-chip); color: var(--text-muted); font-size: var(--type-tiny); font-style: normal; font-weight: var(--weight-bold); line-height: var(--leading-ui); }
.account-plan-badge.is-plus { border-color: var(--action-border); background: var(--action-tint); color: var(--action-text); }
.account-plan-badge.is-pro { border-color: var(--success); background: var(--success-surface); color: var(--success); }

.chip:focus-visible, .admin-tabs > button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
:is(.chip, .admin-tabs > button):is(:disabled, [aria-disabled="true"]) { opacity: var(--disabled-opacity); cursor: not-allowed; }
/* 수평 밑줄 탭과 묶음 탭은 같은 선택·초점·비활성 의미를 공유한다. */
:is(.ce-subtabs, .tabs--underline) { display: flex; gap: var(--space-20); border-bottom: 1px solid var(--border); overflow-x: auto; }
:is(.ce-subtabs, .tabs--underline) button { flex: 0 0 auto; min-height: var(--control-lg); padding: var(--space-8) 0 var(--space-10); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); font: inherit; font-size: var(--type-body-sm); font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap; }
:is(.ce-subtabs, .tabs--underline) button:is(.is-active, [aria-pressed="true"], [aria-selected="true"]) { border-bottom-color: var(--selected-fill); color: var(--text); }
:is(.agent-center-tabs, .probe-view-tabs, .tabs--segmented) { display: flex; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-chip); }
:is(.agent-center-tabs, .probe-view-tabs, .tabs--segmented) button { min-height: var(--control-sm); padding: var(--space-4) var(--space-12); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--type-ui); font-weight: var(--weight-medium); cursor: pointer; }
:is(.agent-center-tabs, .probe-view-tabs, .tabs--segmented) button:is(.is-active, [aria-pressed="true"], [aria-selected="true"]) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-control); }
:is(.ce-subtabs, .tabs--underline, .agent-center-tabs, .probe-view-tabs, .tabs--segmented) button:hover:not(:disabled):not([aria-disabled="true"]) { color: var(--text); }
:is(.ce-subtabs, .tabs--underline, .agent-center-tabs, .probe-view-tabs, .tabs--segmented) button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(-1 * var(--focus-ring-offset)); }
:is(.ce-subtabs, .tabs--underline, .agent-center-tabs, .probe-view-tabs, .tabs--segmented) button:is(:disabled, [aria-disabled="true"]) { opacity: var(--disabled-opacity); cursor: not-allowed; }