/* 고객 화면 공통 디자인 값 (2026-10-26) — 메인·국내/해외투어·조인 화면이 같이 쓴다. 다른 CSS 보다 먼저 불러온다.
   값만 정의하고 모양은 바꾸지 않는다(불러오기만 해서는 화면이 그대로). 관리자(work.css)는 따로 둔다.
   이름은 모두 --cg- 로 시작해 기존 변수(--brand, --wk-*, --rv-*, --v4-*)와 겹치지 않게 했다.
   조인 화면을 따로 떼어 갈 때는 이 파일만 같이 가져가면 된다(다른 파일에 기대지 않음). */
:root {
  /* ── 색: 회색 단계 + 강조 파랑 하나. 초록·빨강·주황은 상태 표시에만 ── */
  --cg-gray-50: #f8fafc;  /* 연한 바탕, 정보 상자 */
  --cg-gray-100: #f1f5f9; /* 칩, 구분선(안쪽) */
  --cg-gray-200: #e2e8f0; /* 테두리 */
  --cg-gray-300: #cbd5e1;
  --cg-gray-400: #94a3b8; /* 흐린 글자(지역 경로, 안내) */
  --cg-gray-500: #64748b; /* 보조 글자, 아이콘 */
  --cg-gray-600: #475569;
  --cg-gray-700: #334155; /* 정보 상자 안 글자 */
  --cg-gray-800: #1e293b; /* 본문 */
  --cg-gray-900: #0f172a; /* 제목 */
  --cg-blue-50: #eff6ff;
  --cg-blue-100: #dbeafe;
  --cg-blue-600: #2563eb; /* 강조: 가격, 주요 버튼, 선택 상태 */
  --cg-blue-700: #1d4ed8; /* 강조 눌림·진한 배지 */
  --cg-ok: #047857;     --cg-ok-bg: #ecfdf5;      /* 확정·가능 */
  --cg-warn: #b45309;   --cg-warn-bg: #fffbeb;    /* 마감 임박·유력 */
  --cg-danger: #b91c1c; --cg-danger-bg: #fef2f2;  /* 마감·취소 */

  --cg-bg: var(--cg-gray-50);     /* 화면 바탕 */
  --cg-surface: #fff;             /* 카드 바탕 */
  --cg-line: var(--cg-gray-200);
  --cg-text: var(--cg-gray-900);
  --cg-text-2: var(--cg-gray-500);
  --cg-text-3: var(--cg-gray-400);
  --cg-accent: var(--cg-blue-600);

  /* ── 글자: 역할별 크기. 여기 없는 크기는 쓰지 않는다 ── */
  --cg-fs-badge: 10px;  /* 배지 */
  --cg-fs-label: 11px;  /* 지역 경로, 작은 라벨 */
  --cg-fs-meta: 12px;   /* 정보 상자(골프장·호텔·공항), 보조 정보 */
  --cg-fs-body: 13px;   /* 본문, 버튼 */
  --cg-fs-title: 15px;  /* 카드 상품명 */
  --cg-fs-price: 16px;  /* 카드 가격 */
  --cg-fs-head: 18px;   /* 화면·구역 제목 */
  --cg-fw-normal: 400;
  --cg-fw-medium: 600;
  --cg-fw-bold: 700;
  --cg-fw-heavy: 800;   /* 가격, 화면 제목만 */
  --cg-lh-tight: 1.35;  /* 제목(두 줄 말줄임 높이 계산에 씀) */
  --cg-lh-body: 1.5;

  /* ── 간격: 4의 배수만 ── */
  --cg-sp-1: 4px;
  --cg-sp-2: 8px;
  --cg-sp-3: 12px;
  --cg-sp-4: 16px;
  --cg-sp-5: 20px;
  --cg-sp-6: 24px;
  --cg-pad-card: 12px;     /* 카드 안쪽 여백(폰) — PC 는 아래 미디어쿼리에서 16 */
  --cg-gap-card: 12px;     /* 카드 사이 */

  /* ── 모서리·그림자 ── */
  --cg-r-sm: 6px;    /* 배지, 칩 */
  --cg-r-md: 8px;    /* 버튼, 정보 상자 */
  --cg-r-lg: 12px;   /* 카드, 사진 */
  --cg-r-xl: 16px;   /* 큰 판(조인 상세 카드) */
  --cg-r-pill: 999px;
  --cg-shadow: 0 1px 2px 0 rgb(15 23 42 / 5%);           /* 카드: 이것 하나만 */
  --cg-shadow-pop: 0 8px 24px rgb(15 23 42 / 12%);       /* 떠 있는 창·위에 붙은 줄 */

  /* ── 목록 카드(가로: 사진 왼쪽, 글자 오른쪽 — 폰·PC 같은 배치) ── */
  --cg-card-thumb: 112px;      /* 사진 너비(폰) */
  --cg-card-thumb-ratio: 1 / 1; /* 사진 비율 고정 — 사진 크기가 달라도 틀에 맞춰 잘림 */
  --cg-icon: 14px;             /* 정보 상자 아이콘 */
  --cg-badge-h: 20px;
  --cg-btn-h: 36px;
}
@media (min-width: 768px) {
  :root {
    --cg-pad-card: 16px;
    --cg-gap-card: 16px;
    --cg-card-thumb: 180px;
    --cg-fs-title: 16px;
    --cg-fs-price: 18px;
  }
}

/* ── 말줄임: 한 줄 정보는 cg-clamp1, 상품명은 cg-clamp2(두 줄 넘으면 …) ── */
.cg-clamp1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cg-clamp2 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; overflow-wrap: anywhere; }