/* IPRS 디자인 토큰 — CSS 변수는 이 파일 한 곳에만 값을 둔다(IPRS-110 디자인 적용 1단계).
 * 근거: docs/design/ui/design-tokens.md(IPRS-5) + 예근 결정 10-30「A 토스풍 바탕 + C 열 묶음 머리」· 11-01「디자인부터 입히자」.
 * 규칙: 색 리터럴은 이 파일에만 있다. app.css 의 컴포넌트 규칙은 var() 만 쓴다.
 * 순서: <head> 에서 app.css 보다 먼저 읽는다. 라이트(:root) · [data-theme=dark] · OS 다크 세 블록은 같은 이름을 가진다.
 * POS 표시 모드(:root[data-density="pos"])는 크기 토큰만 바꾸는 블록이라 app.css 에 그대로 둔다(PosHomeTest PH-4).
 */
:root {
  --font: 'Pretendard Variable', 'Pretendard Fallback', Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --fs-1: 12px;
  --fs-2: 13px;
  --fs-3: 15px;
  --fs-4: 17px;
  --fs-5: 20px;
  --fs-6: 26px;
  /* 글자 위계(IPRS-110) — 제목 26/700 · 섹션 15/600 · 본문 14 · 표 머리 13/600 */
  --fs-title: 26px;
  --fs-section: 15px;
  --fs-body: 14px;
  --fs-th: 13px;
  --lh-tight: 1.3;
  --lh: 1.5;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-card: 16px;        /* 카드(필터 · 표) */
  --r-ctl: 10px;         /* 버튼 · 입력칸 */
  --h-sm: 32px;
  --h-md: 40px;
  --h-lg: 48px;
  --h-touch: 56px;
  /* IPRS-31 — 컴포넌트에 박혀 있던 크기를 같은 값의 토큰으로. POS 밀도 블록이 이 값들만 바꾼다 */
  --h-xs: 28px;          /* .btn--sm */
  --h-ctl: 40px;         /* 버튼 기본 높이(IPRS-110) */
  --h-input: 40px;       /* 입력 · 셀렉트(IPRS-110 — 32 → 40) */
  --h-icon: 32px;        /* 아이콘 버튼(LNB 접기 · 페이지 번호) */
  --h-close: 36px;       /* 모달 닫기 */
  --cell-py: 11px;       /* 표 셀 위아래 여백 */
  --row-h: 56px;         /* 목록 표 행 높이(IPRS-110, 예약결제 관리부터) */
  --grp-h: 36px;         /* 열 묶음 머리 줄 높이 */
  --check: auto;         /* 체크박스 · 라디오 */

  /* 바탕 · 면 · 글자 · 선 */
  --bg: #F2F4F6;
  --bg-2: #E9ECEF;
  --surface: #FFFFFF;
  --surface-2: #F9FAFB;
  --card: #FFFFFF;
  --fg: #191F28;
  --fg-2: #4E5968;
  --fg-3: #5F6B78;
  --line: #E5E8EB;
  --line-weak: #F2F4F6;  /* 표 가로 구분선 */
  --line-strong: #D1D6DB;
  --th-bg: #F9FAFB;      /* 표 머리 바탕 */
  --row-canceled: #FFF4E8;

  /* 포인트 */
  --accent: #1B64DA;
  --accent-hover: #1957C2;
  --accent-active: #1957C2;   /* 눌림 · 호버 같은 값(IPRS-110) */
  --accent-fg: #FFFFFF;
  --accent-weak: #E8F3FF;
  --accent-text: #1957C2;

  /* 버튼 — 주(포인트 채움) · 보조(회색 면) · 위험(옅은 빨강 면) */
  --secondary: #E8F3FF;
  --secondary-hover: #D6E9FF;
  --secondary-active: #C3DDFD;
  --secondary-fg: #1650B0;
  --btn-2: #F2F4F6;
  --btn-2-hover: #E5E8EB;
  --btn-2-active: #D1D6DB;
  --btn-2-fg: #191F28;
  --btn-danger: #FFEDED;
  --btn-danger-hover: #FFDCDC;
  --btn-danger-active: #FFD6D6;
  --btn-danger-fg: #C4161C;
  --ghost-hover: #F2F4F6;
  --ghost-active: #E5E8EB;
  --disabled: #E5E8EB;
  --disabled-fg: #4E5968;

  /* 의미 색 */
  --ok: #0A7A4D;
  --ok-weak: #E5F7EE;
  --ok-fg: #FFFFFF;
  --warn: #A35200;
  --warn-weak: #FFF3E0;
  --warn-fg: #FFFFFF;
  --danger: #D22030;
  --danger-hover: #B81A29;
  --danger-active: #9C1522;
  --danger-fg: #FFFFFF;
  --danger-weak: #FFEBEE;

  /* 예약상태 배지(채운 둥근 배지 — 바탕 / 글자, IPRS-110) */
  --rsv-pending-payment: #FFF3D6;  --rsv-pending-payment-fg: #8A5A00;
  --rsv-confirmed: #E8F3FF;        --rsv-confirmed-fg: #1957C2;
  --rsv-ticketed: #EAE8FF;         --rsv-ticketed-fg: #4B3FC2;
  /* 승선완료 글자: 결정 값 #1A7F4B 는 #E3F6EC 위 4.46:1 로 기준(4.5) 미달 — 같은 색상에서 한 단 진하게 #197C49(4.64) */
  --rsv-boarded: #E3F6EC;          --rsv-boarded-fg: #197C49;
  --rsv-cancel-requested: #FFE8D6; --rsv-cancel-requested-fg: #B04B00;
  --rsv-canceled: #F2F4F6;         --rsv-canceled-fg: #4E5968;
  --rsv-no-show: #FBE9EA;          --rsv-no-show-fg: #A1262F;
  /* 결제상태 배지(흰 바탕 + 테두리 + 앞 점 — 테두리 · 점 · 글자 한 색) */
  --pay-bg: #FFFFFF;
  --pay-unpaid: #D22030;
  /* 잔액 입금대기 · 링크 결제대기: 결정 값 #B26B00 은 흰 바탕 4.20:1 로 기준 미달 — 같은 색상에서 진하게 #A86500(4.64) */
  --pay-pending: #A86500;
  --pay-paid-full: #1A7F4B;
  --pay-cancel-pending: #B04B00;
  --pay-canceled: #6B7684;

  /* 항차 칩 */
  --v-on-sale: #DCEBFF;
  --v-on-sale-fg: #0D3C85;
  --v-suspended: #191F28;
  --v-suspended-fg: #FFFFFF;
  --v-sold-out: #E5E8EB;
  --v-sold-out-fg: #333D4B;
  --v-no-capacity: var(--v-closed);
  --v-no-capacity-fg: var(--v-closed-fg);   /* 정원 미설정(IPRS-37) — 마감과 같은 회색 */
  --v-web-hold: #FFE3BF;
  --v-web-hold-fg: #6B3500;
  --v-canceled: #8F0F1A;
  --v-canceled-fg: #FFFFFF;
  --v-closed: #F2F4F6;
  --v-closed-fg: #4E5968;

  /* 위험 띠(IPRS-111 — 항차 예약 관리 결항 띠). 위험 버튼과 같은 짝 */
  --band-danger: #FFEDED;
  --band-danger-fg: #C4161C;
  /* 액션 시트(컨텍센터 하단 시트, IPRS-111) — 흰 면 + 위 모서리 16 */
  --sheet: #FFFFFF;
  --sheet-fg: #191F28;
  /* 좌석 상태(IPRS-111 — 좌석배치도 · 배정). 의미는 지금 화면 그대로: 빈 좌석 · 선택(테두리) · 배정(일부 찬 자리) · 정원 참 */
  --seat-empty: #FFFFFF;     --seat-empty-line: #E5E8EB;
  --seat-used: #F3F8FF;      --seat-used-line: #B5D3FF;
  /* 정원 참: 면을 더 진하게(#D6E6FF)하면 안의 회색 · 초록 글자가 4.5 밑으로 — 면은 #E8F3FF(예전 배정 면)까지, 차이는 진한 테두리로 */
  --seat-full: #E8F3FF;      --seat-full-line: #1B64DA;
  --seat-selected: #A35200;  /* 선택 테두리 2px — 예전 var(--warn) 과 같은 값 */

  --focus: #1B64DA;
  --focus-ring: rgba(27,100,218,.35);
  --overlay: rgba(0,12,30,.48);
  --shadow-1: 0 1px 2px rgba(0,27,55,.06), 0 2px 8px rgba(0,27,55,.06);
  --shadow-2: 0 8px 28px rgba(0,27,55,.16), 0 2px 6px rgba(0,27,55,.08);
  --shadow-card: 0 1px 2px rgba(0,27,55,.04);   /* 카드 — 아주 옅게 */
  color-scheme: light;
}

/* 다크 — [data-theme=dark] 와 OS 다크(운영자가 라이트를 고르지 않았을 때)는 같은 값 */
[data-theme="dark"] {
  --bg: #101317;
  --bg-2: #0A0C0F;
  --surface: #1A1E24;
  --surface-2: #22272F;
  --card: #1A1E24;
  --fg: #F2F4F6;
  --fg-2: #C1C8D1;
  --fg-3: #9AA4B1;
  --line: #2C323A;
  --line-weak: #252A32;
  --line-strong: #3A414B;
  --th-bg: #22272F;
  --row-canceled: #2E2210;
  --accent: #5C9DFF;
  --accent-hover: #78AEFF;
  --accent-active: #94BFFF;
  --accent-fg: #07152B;
  --accent-weak: #16253D;
  --accent-text: #8AB8FF;
  --secondary: #1E3354;
  --secondary-hover: #25406A;
  --secondary-active: #2C4C7E;
  --secondary-fg: #CFE2FF;
  --btn-2: #262C35;
  --btn-2-hover: #303742;
  --btn-2-active: #3A414B;
  --btn-2-fg: #F2F4F6;
  --btn-danger: #33161A;
  --btn-danger-hover: #45191E;
  --btn-danger-active: #571C22;
  --btn-danger-fg: #FF8790;
  --ghost-hover: #262C35;
  --ghost-active: #303742;
  --disabled: #2C323A;
  --disabled-fg: #B0B8C1;
  --ok: #3DD68C;
  --ok-weak: #0F2B20;
  --ok-fg: #04170E;
  --warn: #FFB547;
  --warn-weak: #2E2210;
  --warn-fg: #211300;
  --danger: #FF6B76;
  --danger-hover: #FF8790;
  --danger-active: #FFA3AA;
  --danger-fg: #2A0306;
  --danger-weak: #33161A;
  --rsv-pending-payment: #2E2210;  --rsv-pending-payment-fg: #FFC56B;
  --rsv-confirmed: #16253D;        --rsv-confirmed-fg: #8AB8FF;
  --rsv-ticketed: #221F45;         --rsv-ticketed-fg: #B3ABFF;
  --rsv-boarded: #0F2B20;          --rsv-boarded-fg: #5FDCA0;
  --rsv-cancel-requested: #33200F; --rsv-cancel-requested-fg: #FFAD70;
  --rsv-canceled: #22272F;         --rsv-canceled-fg: #C1C8D1;
  --rsv-no-show: #3A1A1D;          --rsv-no-show-fg: #F2B8BD;
  --pay-bg: #1A1E24;
  --pay-unpaid: #FF6B76;
  --pay-pending: #FFB547;
  --pay-paid-full: #3DD68C;
  --pay-cancel-pending: #FFAD70;
  --pay-canceled: #AEB6C0;
  --v-on-sale: #1D3B66;
  --v-on-sale-fg: #DCEBFF;
  --v-suspended: #F2F4F6;
  --v-suspended-fg: #101317;
  --v-sold-out: #2C323A;
  --v-sold-out-fg: #D1D6DB;
  --v-no-capacity: var(--v-closed);
  --v-no-capacity-fg: var(--v-closed-fg);
  --v-web-hold: #4A3010;
  --v-web-hold-fg: #FFD9A8;
  --v-canceled: #5C1219;
  --v-canceled-fg: #FFD6DA;
  --v-closed: #22272F;
  --v-closed-fg: #AEB6C0;
  --band-danger: #33161A;
  --band-danger-fg: #FF8790;
  --sheet: #1A1E24;
  --sheet-fg: #F2F4F6;
  --seat-empty: #1A1E24;     --seat-empty-line: #2C323A;
  --seat-used: #16253D;      --seat-used-line: #2C4C7E;
  --seat-full: #1D3B66;      --seat-full-line: #5C9DFF;
  --seat-selected: #FFB547;
  --focus: #8AB8FF;
  --focus-ring: rgba(138,184,255,.45);
  --overlay: rgba(0,0,0,.62);
  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --shadow-2: 0 12px 32px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101317;
    --bg-2: #0A0C0F;
    --surface: #1A1E24;
    --surface-2: #22272F;
    --card: #1A1E24;
    --fg: #F2F4F6;
    --fg-2: #C1C8D1;
    --fg-3: #9AA4B1;
    --line: #2C323A;
    --line-weak: #252A32;
    --line-strong: #3A414B;
    --th-bg: #22272F;
    --row-canceled: #2E2210;
    --accent: #5C9DFF;
    --accent-hover: #78AEFF;
    --accent-active: #94BFFF;
    --accent-fg: #07152B;
    --accent-weak: #16253D;
    --accent-text: #8AB8FF;
    --secondary: #1E3354;
    --secondary-hover: #25406A;
    --secondary-active: #2C4C7E;
    --secondary-fg: #CFE2FF;
    --btn-2: #262C35;
    --btn-2-hover: #303742;
    --btn-2-active: #3A414B;
    --btn-2-fg: #F2F4F6;
    --btn-danger: #33161A;
    --btn-danger-hover: #45191E;
    --btn-danger-active: #571C22;
    --btn-danger-fg: #FF8790;
    --ghost-hover: #262C35;
    --ghost-active: #303742;
    --disabled: #2C323A;
    --disabled-fg: #B0B8C1;
    --ok: #3DD68C;
    --ok-weak: #0F2B20;
    --ok-fg: #04170E;
    --warn: #FFB547;
    --warn-weak: #2E2210;
    --warn-fg: #211300;
    --danger: #FF6B76;
    --danger-hover: #FF8790;
    --danger-active: #FFA3AA;
    --danger-fg: #2A0306;
    --danger-weak: #33161A;
    --rsv-pending-payment: #2E2210;  --rsv-pending-payment-fg: #FFC56B;
    --rsv-confirmed: #16253D;        --rsv-confirmed-fg: #8AB8FF;
    --rsv-ticketed: #221F45;         --rsv-ticketed-fg: #B3ABFF;
    --rsv-boarded: #0F2B20;          --rsv-boarded-fg: #5FDCA0;
    --rsv-cancel-requested: #33200F; --rsv-cancel-requested-fg: #FFAD70;
    --rsv-canceled: #22272F;         --rsv-canceled-fg: #C1C8D1;
    --rsv-no-show: #3A1A1D;          --rsv-no-show-fg: #F2B8BD;
    --pay-bg: #1A1E24;
    --pay-unpaid: #FF6B76;
    --pay-pending: #FFB547;
    --pay-paid-full: #3DD68C;
    --pay-cancel-pending: #FFAD70;
    --pay-canceled: #AEB6C0;
    --v-on-sale: #1D3B66;
    --v-on-sale-fg: #DCEBFF;
    --v-suspended: #F2F4F6;
    --v-suspended-fg: #101317;
    --v-sold-out: #2C323A;
    --v-sold-out-fg: #D1D6DB;
    --v-no-capacity: var(--v-closed);
    --v-no-capacity-fg: var(--v-closed-fg);
    --v-web-hold: #4A3010;
    --v-web-hold-fg: #FFD9A8;
    --v-canceled: #5C1219;
    --v-canceled-fg: #FFD6DA;
    --v-closed: #22272F;
    --v-closed-fg: #AEB6C0;
    --band-danger: #33161A;
    --band-danger-fg: #FF8790;
    --sheet: #1A1E24;
    --sheet-fg: #F2F4F6;
    --seat-empty: #1A1E24;     --seat-empty-line: #2C323A;
    --seat-used: #16253D;      --seat-used-line: #2C4C7E;
    --seat-full: #1D3B66;      --seat-full-line: #5C9DFF;
    --seat-selected: #FFB547;
    --focus: #8AB8FF;
    --focus-ring: rgba(138,184,255,.45);
    --overlay: rgba(0,0,0,.62);
    --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
    --shadow-2: 0 12px 32px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
    --shadow-card: 0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

/* ══ POS 한 화면 테마(IPRS-114 · 예근 결정 10-30「POS 는 밝은 · 어두운 둘 다」) ══════════════════════════
 * POS 화면(.pos-screen 이 있는 문서)에서만 같은 변수 이름의 값을 바꾼다 — app.css 의 POS 규칙은 var() 만 쓴다.
 * 고르는 법은 어드민과 같다: 사이드바(☰ 서랍 옆 LNB)「다크모드」 체크 = <html data-theme> · 쿠키 iprs_theme, 안 골랐으면 OS 설정.
 * 순서가 뜻을 가진다: 밝은(A) → 어두운(B, 골랐을 때) → 어두운(B, OS 다크 · 밝은을 고르지 않았을 때). 대비 표: docs/design/ui/iprs-114-pos.md
 * --pos-* 는 POS 에만 있는 값(발권 버튼 두 종류 · 직전취소). */
:root:has(.pos-screen) {
  --bg: #F2F4F6;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --surface-2: #F9FAFB;
  --th-bg: #F9FAFB;
  --fg: #191F28;
  --fg-2: #4E5968;
  --fg-3: #5F6B78;
  --line: #E5E8EB;
  --line-weak: #F2F4F6;
  --line-strong: #D1D6DB;
  --accent: #1B64DA;
  --accent-fg: #FFFFFF;
  --accent-weak: #E8F3FF;
  --accent-text: #1957C2;
  --focus: #1B64DA;
  --focus-ring: rgba(27,100,218,.35);
  --btn-2: #F2F4F6;
  --btn-2-hover: #E5E8EB;
  --btn-2-active: #D1D6DB;
  --btn-2-fg: #191F28;
  --pos-card: #1B64DA;      --pos-card-fg: #FFFFFF;      /* 신용카드 발권 — 포인트 채움 */
  --pos-cash: #191F28;      --pos-cash-fg: #FFFFFF;      /* 현금 발권 — 진한 채움 + 흰 글자(카드와 확실히 구분) */
  --pos-void: #FFEDED;      --pos-void-fg: #C4161C;      --pos-void-line: #FFEDED;   /* 직전취소 */
}
[data-theme="dark"]:has(.pos-screen) {
  --bg: #121417;
  --surface: #1C1F24;
  --card: #1C1F24;
  --surface-2: #23272D;
  --th-bg: #23272D;
  --fg: #F1F3F5;
  --fg-2: #A6ADB7;
  --fg-3: #959DA8;
  --line: #2C3138;
  --line-weak: #262A30;
  --line-strong: #3A4048;
  --accent: #2DD4BF;
  --accent-fg: #0B1F1C;
  --accent-weak: #10302C;
  --accent-text: #2DD4BF;
  --focus: #2DD4BF;
  --focus-ring: rgba(45,212,191,.40);
  --btn-2: #2C3138;
  --btn-2-hover: #343A42;
  --btn-2-active: #3A4048;
  --btn-2-fg: #F1F3F5;
  --pos-card: #2DD4BF;      --pos-card-fg: #0B1F1C;
  --pos-cash: #F5B83D;      --pos-cash-fg: #241A00;
  --pos-void: transparent;  --pos-void-fg: #F87171;      --pos-void-line: #F87171;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):has(.pos-screen) {
    --bg: #121417;
    --surface: #1C1F24;
    --card: #1C1F24;
    --surface-2: #23272D;
    --th-bg: #23272D;
    --fg: #F1F3F5;
    --fg-2: #A6ADB7;
    --fg-3: #959DA8;
    --line: #2C3138;
    --line-weak: #262A30;
    --line-strong: #3A4048;
    --accent: #2DD4BF;
    --accent-fg: #0B1F1C;
    --accent-weak: #10302C;
    --accent-text: #2DD4BF;
    --focus: #2DD4BF;
    --focus-ring: rgba(45,212,191,.40);
    --btn-2: #2C3138;
    --btn-2-hover: #343A42;
    --btn-2-active: #3A4048;
    --btn-2-fg: #F1F3F5;
    --pos-card: #2DD4BF;      --pos-card-fg: #0B1F1C;
    --pos-cash: #F5B83D;      --pos-cash-fg: #241A00;
    --pos-void: transparent;  --pos-void-fg: #F87171;      --pos-void-line: #F87171;
  }
}