/*
 * Payvit Design Tokens
 *
 * 디자인 언어: Payvit Signature
 *  - 컬러: 절제된 모노톤 + Payvit Pink (#e94560) 액센트 — 브랜드 시그니처
 *  - 라운드: 큰 곡률 (sm 8 / md 12 / lg 16) — 친근하면서 모던
 *  - 그림자: 매우 subtle — 깊이감보다 평면적 정돈
 *  - 여백: generous (4px base, 컴포넌트 padding 후함)
 *  - 인터랙션: 부드러운 transition (0.2s) + tap 시 scale(0.98)
 *  - 타이포: Pretendard (한글 + 라틴 모두 균일)
 *
 * 변경 시: 이 한 파일만 수정하면 admin/pay 전체 페이지 즉시 반영됨.
 * 사용법:
 *   - 관리자 페이지: header.jsp 에서 로드
 *   - 결제 페이지: 각 pay/*.jsp 에서 로드
 */

:root {
    /* ===== Brand — Payvit Signature Pink ===== */
    --brand-primary: #e94560;            /* Payvit 시그니처 핑크-레드 */
    --brand-primary-hover: #d12d4a;      /* hover 시 진해짐 */
    --brand-primary-light: #fce8ec;      /* 옅은 핑크 배경 (alert/badge 용) */

    /* ===== Neutral (Toss 회색 위계) ===== */
    --background: #F9FAFB;               /* 거의 흰색 — 카드와 살짝 차이 */
    --foreground: #191F28;               /* 진한 검정 (#000 보다 부드러움) */
    --card: #FFFFFF;                     /* 카드는 순백 — 배경과 대비 */
    --card-foreground: #191F28;
    --muted: #F2F4F6;                    /* 비활성 배경 */
    --muted-foreground: #4E5968;         /* 보조 텍스트 — Toss 회색 위계 1단계 */
    --muted-foreground-2: #8B95A1;       /* 보조 텍스트 2단계 — placeholder, hint */
    --muted-foreground-3: #B0B8C1;       /* 보조 텍스트 3단계 — 비활성 */
    --accent: #F2F4F6;
    --accent-foreground: #191F28;

    /* ===== Border ===== */
    --border: #E5E8EB;                   /* 옅은 회색 — 거의 안 보임 */
    --border-light: #F2F4F6;             /* 더 옅음 — 내부 구분선 */
    --input: #E5E8EB;
    --ring: #e94560;                     /* focus ring — brand 와 일치 */

    /* ===== Status (Toss 풍 — 채도 절제) ===== */
    --success: #00C73C;                  /* Toss 그린 (긍정/완료) */
    --success-light: #E8FAEF;
    --success-foreground: #008A2E;
    --warning: #FF9F40;                  /* 따뜻한 오렌지 */
    --warning-light: #FFF4E6;
    --warning-foreground: #D97706;
    --danger: #F04452;                   /* Toss 빨강 (위험/실패) */
    --danger-light: #FFEBEE;
    --danger-foreground: #C92231;
    --info: #4078E0;                     /* 정보/안내 — 블루 (brand 와 분리, 의미 충돌 방지) */
    --info-light: #EEF3FB;
    --info-foreground: #2E62C9;

    /* ===== Admin 전용 (사이드바) ===== */
    --admin-sidebar: #17171C;            /* 매우 어두운 네이비 */
    --admin-sidebar-hover: #23232A;
    --admin-sidebar-active: #e94560;     /* brand 와 일치 */

    /* ===== 외부 결제사 브랜드 색 (로고와 일치해야 하는 고정값) ===== */
    --brand-naverpay: #03c75a;
    --brand-naverpay-hover: #02a048;
    --brand-kakaopay: #ffeb00;

    /* ===== Spacing (4px base — 변경 없음, 컴포넌트 padding 늘려서 여유 확보) ===== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;                    /* 신규 — 큰 섹션 간격 */
    --space-16: 64px;                    /* 신규 — 결제창 hero 등 */

    /* ===== Border Radius (톤다운 — 모던하면서 정돈) ===== */
    --radius-sm: 6px;                    /* 작은 chip / badge / code */
    --radius-md: 8px;                    /* 인풋 / 버튼 / 드롭다운 */
    --radius-lg: 12px;                   /* 카드 / 모달 / 결제수단 아이콘 */
    --radius-xl: 16px;                   /* 큰 카드 / 결제창 메인 */
    --radius-2xl: 20px;                  /* hero 카드, 영수증 */
    --radius-full: 9999px;               /* 뱃지, 아바타, 공유 버튼 */

    /* ===== Shadow (Toss 풍 — 매우 subtle) ===== */
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.03);
    --shadow-md: 0 1px 4px rgba(17, 24, 39, 0.04), 0 1px 2px rgba(17, 24, 39, 0.03);
    --shadow-lg: 0 2px 12px rgba(17, 24, 39, 0.05), 0 1px 4px rgba(17, 24, 39, 0.03);
    --shadow-xl: 0 4px 24px rgba(17, 24, 39, 0.06), 0 2px 8px rgba(17, 24, 39, 0.04);
    /* 신규 — brand 색이 살짝 비치는 그림자 (강조 카드용) */
    --shadow-brand: 0 4px 16px rgba(233, 69, 96, 0.14), 0 1px 4px rgba(17, 24, 39, 0.04);

    /* ===== Typography ===== */
    --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Pretendard', monospace;

    --text-xs: 12px;      /* 뱃지, 보조 안내 (Toss 는 더 작은 chip 사용) */
    --text-sm: 13px;      /* 테이블 헤더, 라벨, 보조 텍스트 */
    --text-base: 14px;    /* 테이블 본문, 폼 입력, 기본 텍스트 */
    --text-md: 15px;      /* 카드 타이틀, 섹션명 */
    --text-lg: 17px;      /* 페이지 소제목 */
    --text-xl: 20px;      /* 페이지 제목, 모달 제목 */
    --text-2xl: 24px;     /* 큰 카드 헤더 */
    --text-3xl: 28px;     /* 통계 숫자 */
    --text-4xl: 36px;     /* 결제 금액 강조 (Toss 풍 큰 숫자) */

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* ===== Transition (Toss 풍 — 부드러움) ===== */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== Tap feedback (Toss 풍 — 모바일 우선) ===== */
    --tap-scale: scale(0.98);
}

/* ===========================================================================
 * 공통 유틸 클래스 (Utility)
 *
 * 모든 Payvit 페이지에서 사용 가능. tokens.css 만 로드해도 동작.
 * 인라인 style 대신 이 클래스를 우선 사용하면 토큰 변경 시 자동 일괄 적용.
 * =========================================================================== */

/* --- 텍스트 사이즈 --- */
.txt-xs   { font-size: var(--text-xs); }
.txt-sm   { font-size: var(--text-sm); }
.txt-base { font-size: var(--text-base); }
.txt-md   { font-size: var(--text-md); }
.txt-lg   { font-size: var(--text-lg); }
.txt-xl   { font-size: var(--text-xl); }
.txt-2xl  { font-size: var(--text-2xl); }
.txt-3xl  { font-size: var(--text-3xl); }

/* --- 텍스트 굵기 --- */
.txt-normal     { font-weight: var(--font-normal); }
.txt-medium     { font-weight: var(--font-medium); }
.txt-semibold   { font-weight: var(--font-semibold); }
.txt-bold       { font-weight: var(--font-bold); }
.txt-extrabold  { font-weight: var(--font-extrabold); }

/* --- 텍스트 색상 --- */
.txt-muted      { color: var(--muted-foreground); }
.txt-success    { color: var(--success-foreground); }
.txt-danger     { color: var(--danger-foreground); }
.txt-warning    { color: var(--warning-foreground); }
.txt-info       { color: var(--info-foreground); }
.txt-brand      { color: var(--brand, var(--brand-primary)); }
.txt-foreground { color: var(--foreground); }
.txt-border     { color: var(--border); }

/* --- 텍스트 스타일 --- */
.txt-mono     { font-family: var(--font-mono); }
.txt-nowrap   { white-space: nowrap; }
.txt-break    { word-break: break-all; }
.txt-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }