/* =====================================================================
   공통 디자인 변수 — 모든 페이지는 여기 값만 사용해요.
   바꿔야 하면 팀과 먼저 합의하세요.
   ===================================================================== */
:root {
  /* 색상 */
  --color-primary: #9D163A;        /* 핵심 버튼, 선택된 메뉴, 선택한 좌석 */
  --color-primary-hover: #7D122E;  /* 주요 버튼 누름·마우스 올림 */
  --color-primary-soft: #F8EDEF;   /* 선택 영역의 연한 배경 */
  --color-bg: #F6F7F9;             /* 전체 배경 */
  --color-surface: #FFFFFF;        /* 카드·입력창 배경 */
  --color-text: #202124;           /* 기본 글자 */
  --color-text-sub: #666666;       /* 보조 글자 */
  --color-border: #E5E7EB;         /* 테두리·구분선 */
  --color-error: #B42318;          /* 오류·경고 */
  --color-disabled-bg: #E5E7EB;
  --color-disabled-text: #666666;

  /* 좌석 상태 (공통 색상에서만 가져옴) */
  --seat-available-bg: var(--color-surface);
  --seat-available-border: #C9CDD3;   /* 회색 테두리 — 확인 필요: 공통 테두리(#E5E7EB)는 흰 배경에서 너무 흐려서 한 단계 진하게 */
  --seat-taken-bg: var(--color-border);
  --seat-blocked-bg: var(--color-border);

  /* 글꼴 */
  --font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-title: 20px;       /* 페이지 제목 */
  --font-card-title: 18px;  /* 카드 제목 */
  --font-body: 16px;        /* 본문·입력창·버튼 */
  --font-sub: 14px;         /* 보조 설명 */
  --line-height: 1.5;
  --weight-bold: 700;
  --weight-medium: 500;

  /* 간격 (8px 단위) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --page-x: 20px;           /* 화면 좌우 여백 */

  /* 모양 */
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-pill: 999px;
  --control-height: 48px;   /* 버튼·입력창 최소 높이 */
  --touch-min: 44px;        /* 최소 터치 영역 */
  --header-height: 56px;
  --nav-height: 64px;
  --border: 1px solid var(--color-border);
  --focus-ring: 0 0 0 3px var(--color-primary-soft), 0 0 0 5px var(--color-primary);
  --shadow-dialog: 0 8px 32px rgba(32, 33, 36, .16);
}