/* base.css — 농구 점수판 기본 레이아웃 (Phase 1)
 * 다크 기반 레이어드 서피스 + CSS custom properties(Phase 4 테마 시스템 기반).
 * 외부 CDN/폰트 import 금지 — 시스템 monospace fallback(DSEG는 Phase 4 동봉).
 */

/* ============ 디자인 토큰 (Phase 4 테마 확장 기반) ============ */
:root {
  /* 컬러 */
  --bb-bg: #0b0e14;            /* 페이지 배경(가장 어두운 레이어) */
  --bb-surface: #151a23;       /* 카드/패널 서피스 */
  --bb-surface-2: #1d2430;     /* 한 단계 밝은 서피스(input/버튼) */
  --bb-surface-3: #283040;     /* hover 서피스 */
  --bb-accent: #ff7a18;        /* 농구공 오렌지 — 강조색 */
  --bb-accent-2: #ffa94d;      /* 강조 hover */
  --bb-danger: #ff5a5a;        /* -1 / 위험 */
  --bb-text: #f2f5fa;          /* 본문 텍스트 */
  --bb-text-dim: #8b96a8;      /* 보조 텍스트 */
  --bb-border: #2a3240;        /* 보더 */
  --bb-border-strong: #3a4456; /* 강조 보더 */

  /* 타이포 */
  --bb-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --bb-font-mono: 'SF Mono', 'Cascadia Mono', 'Consolas', 'Liberation Mono',
    'Menlo', monospace;
  --bb-score-font-size: clamp(2.25rem, 6vw, 3.6rem);
  --bb-clock-font-size: clamp(1.8rem, 4.5vw, 2.8rem);

  /* 스페이싱 스케일 */
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 24px;
  --bb-space-6: 32px;
  --bb-space-8: 48px;

  /* 라운드 / 섀도 */
  --bb-radius: 12px;
  --bb-radius-sm: 8px;
  --bb-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --bb-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --bb-transition: 140ms ease;

  /* 고대비(forced-colors) 모드에서 OS가 테마 색을 강제 덮어쓰는 것 방지(Pitfall 5).
   * 점수판은 색이 곧 정보(앰버 LED/시안 네온/크로마키)라 색 보존이 필수. */
  forced-color-adjust: none;
}

/* ============ 리셋 / 베이스 ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bb-bg);
  color: var(--bb-text);
  font-family: var(--bb-font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}

/* tabular 숫자 — 점수/클락 흔들림 방지 */
.score-display,
.game-clock-display,
.quarter-display,
.display-score,
.display-clock,
.display-quarter {
  font-family: var(--bb-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.02em;
}

/* ============ 컨트롤 패널 (index.html) ============ */
body[data-role='control'] {
  padding: var(--bb-space-4);
  max-width: 1100px;
  margin: 0 auto;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  margin-bottom: var(--bb-space-3);
  padding-bottom: var(--bb-space-3);
  border-bottom: 1px solid var(--bb-border);
}

.app-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-header h1::before {
  content: '🏀';
  margin-right: var(--bb-space-2);
}

.app-header-actions {
  display: flex;
  gap: var(--bb-space-2);
  align-items: center;
}

/* 컨트롤 레이아웃: 홈팀 | 클락(중앙) | 어웨이팀 3열 */
.control-layout {
  display: block;
}

.team-panels {
  display: grid;
  /* minmax(0,...) 필수 — 기본 1fr(=minmax(auto,1fr))은 긴 팀 이름의 min-content에
     트랙이 끌려 늘어나 점수/클락이 한쪽으로 쏠린다. 0으로 눌러 트랙 폭 고정. */
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1.2fr) minmax(0, 1fr);
  gap: var(--bb-space-4);
  align-items: start;
}

@media (max-width: 860px) {
  .team-panels {
    grid-template-columns: 1fr;
  }
}

/* ---- 팀 패널 ---- */
.team-panel {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: var(--bb-space-4);
  box-shadow: var(--bb-shadow), var(--bb-shadow-inset);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bb-space-3);
  min-width: 0; /* grid 자식 기본 min-width:auto 해제 — 콘텐츠가 트랙을 넘겨 늘리지 못하게 */
}

.team-name-label {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-2);
  width: 100%;
  font-size: 0.8rem;
  color: var(--bb-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.team-name-input {
  width: 100%;
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-sm);
  color: var(--bb-text);
  font-size: 1.05rem;
  font-weight: 600;
  padding: var(--bb-space-3) var(--bb-space-4);
  transition: border-color var(--bb-transition), box-shadow var(--bb-transition);
}

.team-name-input:focus {
  outline: none;
  border-color: var(--bb-accent);
  box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.18);
}

.score-display {
  font-size: var(--bb-score-font-size);
  font-weight: 800;
  line-height: 1;
  color: var(--bb-text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  min-width: 1.6ch;
}

.score-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bb-space-2);
  width: 100%;
}

/* ---- 클락 섹션 ---- */
.clock-section {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: var(--bb-space-4);
  box-shadow: var(--bb-shadow), var(--bb-shadow-inset);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bb-space-2);
}

.quarter-display {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bb-accent);
  padding: var(--bb-space-1) var(--bb-space-4);
  background: rgba(255, 122, 24, 0.1);
  border-radius: var(--bb-radius-sm);
}

.game-clock-display {
  font-size: var(--bb-clock-font-size);
  font-weight: 800;
  line-height: 1;
  color: var(--bb-text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.clock-controls,
.quarter-controls {
  display: flex;
  gap: var(--bb-space-2);
  width: 100%;
  justify-content: center;
}

.clock-edit-row {
  display: flex;
  gap: var(--bb-space-2);
  width: 100%;
  justify-content: center;
}

.clock-edit-input {
  width: 90px;
  text-align: center;
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-sm);
  color: var(--bb-text);
  font-family: var(--bb-font-mono);
  font-size: 1rem;
  padding: var(--bb-space-2) var(--bb-space-3);
}

.clock-edit-input:focus {
  outline: none;
  border-color: var(--bb-accent);
}

.clock-edit-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.settings-row {
  display: flex;
  gap: var(--bb-space-3);
  width: 100%;
  justify-content: center;
  margin-top: var(--bb-space-2);
  padding-top: var(--bb-space-3);
  border-top: 1px dashed var(--bb-border);
}

.settings-label {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-1);
  font-size: 0.72rem;
  color: var(--bb-text-dim);
  text-align: center;
}

.settings-input {
  width: 72px;
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-sm);
  color: var(--bb-text);
  font-family: var(--bb-font-mono);
  font-size: 0.95rem;
  text-align: center;
  padding: var(--bb-space-2);
}

.settings-input:focus {
  outline: none;
  border-color: var(--bb-accent);
}

.undo-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: var(--bb-space-2);
}

/* ============ 버튼 ============ */
.btn {
  appearance: none;
  border: 1px solid var(--bb-border);
  background: var(--bb-surface-2);
  color: var(--bb-text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: var(--bb-space-3) var(--bb-space-4);
  border-radius: var(--bb-radius-sm);
  cursor: pointer;
  transition: background var(--bb-transition), border-color var(--bb-transition),
    transform var(--bb-transition);
  user-select: none;
}

.btn:hover {
  background: var(--bb-surface-3);
  border-color: var(--bb-border-strong);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.3);
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn:disabled:hover {
  background: var(--bb-surface-2);
  border-color: var(--bb-border);
  transform: none;
}

.btn-primary {
  background: var(--bb-accent);
  border-color: var(--bb-accent);
  color: #1a1206;
}

.btn-primary:hover {
  background: var(--bb-accent-2);
  border-color: var(--bb-accent-2);
}

.btn-score {
  font-size: 1.05rem;
  font-weight: 700;
  padding: var(--bb-space-3) var(--bb-space-2);
}

.btn-minus {
  color: var(--bb-danger);
  border-color: rgba(255, 90, 90, 0.4);
}

.btn-minus:hover {
  background: rgba(255, 90, 90, 0.12);
  border-color: var(--bb-danger);
}

.btn-clock,
.btn-quarter {
  flex: 1;
}

.btn-undo {
  width: 100%;
}

/* ============ 점수 펄스 (CORE-02) ============ */
@keyframes score-pulse {
  0% {
    transform: scale(1);
    color: var(--bb-text);
  }
  35% {
    transform: scale(1.18);
    color: var(--bb-accent);
  }
  100% {
    transform: scale(1);
    color: var(--bb-text);
  }
}

.score-display.pulse,
.display-score.pulse {
  animation: score-pulse 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  /* 02-03 캐리오버: 송출 점수 펄스도 reduced-motion에서 비활성화 */
  .score-display.pulse,
  .display-score.pulse {
    animation: none;
  }
}

/* ============ 부저 플래시 (KEY-02 B / 02-03) ============ */
/* B 단축키 → BUZZER_TRIGGER → buzzerEpochMs 변경 → display.js triggerBuzzerFlash().
 * 사운드는 Phase 3 — 여기선 일시 시각 플래시만(송출 컨테이너 opacity 펄스). */
@keyframes buzzer-flash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

.buzzer-flash {
  animation: buzzer-flash 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .buzzer-flash {
    animation: none;
  }
}

/* ============ 고급 패널 (index.html, Phase 3) ============ */
.panel-advanced {
  margin-top: var(--bb-space-3);
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: var(--bb-space-4);
  box-shadow: var(--bb-shadow), var(--bb-shadow-inset);
}

/* 고급 모드 전용 압축 — 점수/클락/여백을 더 줄여 고급 위젯까지 한 화면에.
   control.js가 <html data-mode="advanced">를 박는다(기본 모드엔 영향 없음). */
:root[data-mode='advanced'] {
  --bb-score-font-size: clamp(1.8rem, 4vw, 2.6rem);
  --bb-clock-font-size: clamp(1.5rem, 3.2vw, 2.1rem);
}
:root[data-mode='advanced'] .team-panel,
:root[data-mode='advanced'] .clock-section {
  padding: var(--bb-space-3);
  gap: var(--bb-space-2);
}
:root[data-mode='advanced'] .app-header {
  margin-bottom: var(--bb-space-2);
  padding-bottom: var(--bb-space-2);
}
:root[data-mode='advanced'] .shot-clock-display {
  font-size: 1.7rem;
}
:root[data-mode='advanced'] .btn {
  padding: var(--bb-space-2) var(--bb-space-3);
  font-size: 0.88rem;
}
:root[data-mode='advanced'] .quarter-display {
  font-size: 1.3rem;
  padding: 2px var(--bb-space-3);
}
:root[data-mode='advanced'] .settings-row {
  margin-top: var(--bb-space-1);
  padding-top: var(--bb-space-2);
}
:root[data-mode='advanced'] .widget-flip-container {
  gap: var(--bb-space-2);
}
:root[data-mode='advanced'] .panel-advanced {
  margin-top: var(--bb-space-2);
  padding: var(--bb-space-3);
}

.panel-advanced[hidden] {
  display: none;
}

.panel-advanced-title {
  margin: 0 0 var(--bb-space-3);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bb-accent);
  letter-spacing: -0.01em;
}

/* FLIP 대상 컨테이너 — grid auto-fill. transition은 JS(flipReorder)가 직접 제어. */
.widget-flip-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--bb-space-3);
}

.widget-item {
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-sm);
  padding: var(--bb-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-2);
}

.widget-item[hidden] {
  display: none;
}

.widget-item-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bb-text-dim);
}

/* 샷클락 위젯 */
.shot-clock-display {
  font-size: 2rem;
  font-weight: 900;
  font-family: var(--bb-font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--bb-accent);
  text-align: center;
}

.btn-shot-toggle {
  width: 100%;
}

/* 24/14 리셋 — 동등 전면 배치(flex: 1 1 0) */
.shot-clock-resets {
  display: flex;
  gap: var(--bb-space-2);
}

.shot-clock-resets .btn {
  flex: 1 1 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.shot-clock-custom {
  display: flex;
  gap: var(--bb-space-2);
}

.shot-clock-custom .settings-input {
  flex: 1 1 0;
  width: auto;
}

/* 팀파울 위젯 */
.foul-row {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
}

.foul-team-label,
.timeout-team-label {
  font-size: 0.8rem;
  color: var(--bb-text-dim);
  min-width: 2.2em;
}

.foul-count {
  font-family: var(--bb-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  font-weight: 800;
  min-width: 1.4ch;
  text-align: center;
}

.btn-foul-plus,
.btn-foul-minus {
  padding: var(--bb-space-2) var(--bb-space-3);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

.bonus-badge {
  display: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1a1206;
  background: var(--bb-accent);
  border-radius: 4px;
  padding: 2px 6px;
}

.bonus-badge.visible {
  display: inline-block;
}

/* 타임아웃 위젯 */
.timeout-row {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
}

.timeout-pips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

.timeout-btns {
  display: flex;
  gap: var(--bb-space-2);
}

.timeout-btns .btn {
  flex: 1 1 0;
}

.pip {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bb-surface-3);
  border: 1px solid var(--bb-border-strong);
  margin: 2px;
}

.pip.used {
  background: var(--bb-accent);
  border-color: var(--bb-accent);
}

/* 공격 방향 위젯 */
.possession-display {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--bb-accent);
  text-align: center;
}

/* 설정 하단 */
.panel-advanced-settings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--bb-space-4);
  padding-top: var(--bb-space-4);
  border-top: 1px dashed var(--bb-border);
}

.widget-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-4);
}

.widget-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-1);
  font-size: 0.85rem;
  color: var(--bb-text);
  cursor: pointer;
  user-select: none;
}

.buzzer-controls {
  display: flex;
  gap: var(--bb-space-3);
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  /* FLIP JS가 transition 스타일을 직접 제어하므로 CSS transition 금지(중첩 방지). */
  .widget-item {
    transition: none !important;
  }
}

/* ============ 송출 페이지 (display.html) ============ */
body[data-role='display'] {
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* 1280×200 고정 — OBS 캡처용. overflow:hidden으로 DPI/스케일 변형 차단 */
#scoreboard-container {
  width: 1280px;
  height: 200px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: linear-gradient(180deg, var(--bb-surface) 0%, var(--bb-bg) 100%);
  border-top: 4px solid var(--bb-accent);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6);
  padding: 0 var(--bb-space-8);
  gap: var(--bb-space-6);
}

.display-team {
  display: flex;
  align-items: center;
  gap: var(--bb-space-6);
  min-width: 0;
}

.display-team-left {
  justify-content: flex-start;
}

.display-team-right {
  justify-content: flex-end;
}

.display-team-name {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--bb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.display-score {
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--bb-text);
  min-width: 1.6ch;
  text-align: center;
}

.display-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-2);
  padding: 0 var(--bb-space-5);
}

.display-quarter {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bb-accent);
  letter-spacing: 0.04em;
}

.display-clock {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--bb-text);
}

/* ============ 송출 고급 위젯 영역 (Phase 3) ============ */
/* 1280×200 안에서 가로 배치 — 샷클락 大 / 파울+BONUS / 타임아웃 pip / 방향 화살표.
 * mode=basic이면 #display-widget-area 자체가 hidden(display.js 제어). */
#display-widget-area {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--bb-space-5);
  align-items: center;
  justify-content: center;
  margin-top: var(--bb-space-1);
}

#display-widget-area[hidden] {
  display: none;
}

.display-widget {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
}

.display-widget[hidden] {
  display: none;
}

.display-shot-clock {
  font-size: 2.8rem;
  font-weight: 900;
  font-family: var(--bb-font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--bb-accent);
}

.display-foul-block {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-1);
}

.display-foul-count {
  font-size: 1.3rem;
  font-weight: 800;
  font-family: var(--bb-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--bb-text);
}

.display-foul-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bb-text-dim);
}

.display-bonus-badge {
  display: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1a1206;
  background: var(--bb-accent);
  border-radius: 3px;
  padding: 1px 4px;
}

.display-bonus-badge.visible {
  display: inline-block;
}

.display-timeout-pips {
  display: inline-flex;
  align-items: center;
}

.display-possession {
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
  color: var(--bb-accent);
}

/* ============ 모바일 (≤480px) — 컨트롤 창 전용 (Phase 4 / UI-04) ============ */
/* 송출 창(display.html)은 고정 1280×200 유지(OBS DPI 고정) — body[data-role="control"] 스코프로 한정.
 * 터치 타깃 ≥44px(WCAG 2.5.5), iOS Safari 주소창 보정 100dvh(Pitfall 17). */
@media (max-width: 480px) {
  body[data-role='control'] {
    padding: var(--bb-space-3);
    min-height: 100dvh;
  }

  /* 단일 컬럼 스택(팀-클락-팀-고급) — 860px 브레이크에서 이미 1fr이나 명시 유지. */
  .team-panels {
    grid-template-columns: 1fr;
    gap: var(--bb-space-3);
  }

  .team-panel,
  .clock-section,
  .panel-advanced {
    padding: var(--bb-space-4);
  }

  /* 헤더: 줄바꿈 허용. */
  .app-header {
    flex-wrap: wrap;
    gap: var(--bb-space-2);
  }
  .app-header-actions {
    flex-wrap: wrap;
    gap: var(--bb-space-2);
    width: 100%;
  }

  /* 터치 타깃 ≥44px. */
  .btn,
  .btn-score,
  .btn-clock,
  .btn-quarter,
  .btn-foul-plus,
  .btn-foul-minus,
  .btn-shot-reset,
  .btn-shot-toggle {
    min-height: 44px;
    min-width: 44px;
    padding: var(--bb-space-3) var(--bb-space-4);
    font-size: 1rem;
  }

  .score-buttons {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bb-space-2);
  }
  .btn-score {
    padding: var(--bb-space-3) var(--bb-space-1);
  }

  .clock-controls,
  .quarter-controls {
    flex-wrap: wrap;
    gap: var(--bb-space-2);
  }
  .clock-controls .btn,
  .quarter-controls .btn {
    flex: 1 1 auto;
  }

  /* 고급 위젯도 단일 컬럼 스택. */
  .widget-flip-container {
    grid-template-columns: 1fr;
  }

  /* 설정 행(쿼터/OT/테마/배경)도 줄바꿈. */
  .settings-row {
    flex-wrap: wrap;
  }

  /* 도움말 패널: 좁은 화면에서 여백 축소. */
  .help-panel {
    padding: var(--bb-space-4);
    width: 94%;
  }
}