/* ==========================================================================
   tokens.css — 값은 전부 여기에만 둔다
   출처: Figma 「바이오액츠_전달」 · 프레임 `메인` (node 37:800, 1920px)
   시안에서 흩어진 값은 가까운 토큰으로 통일했다. 목록은 퍼블리싱_노트.md 참조.
   ========================================================================== */

:root {
  /* --- color: brand ------------------------------------------------------ */
  --c-blue: #0059ff;          /* 그라데이션 끝 · 핵심 파랑 */
  --c-cyan: #00ffcc;          /* 그라데이션 시작 */
  --c-navy: #002e6b;          /* 칩 테두리 · 보조 네이비 */

  /* 시안·블루 그라데이션 — 버튼, 강조 텍스트, 지표 기호에 공통으로 쓴다 */
  --g-brand: linear-gradient(90deg, var(--c-cyan) 0%, var(--c-blue) 59.14%);
  --g-brand-soft: linear-gradient(90deg, #00eabb 0%, #00abe9 67.31%);
  --g-brand-diag: linear-gradient(124deg, var(--c-cyan) 30.03%, var(--c-blue) 60.13%);

  /* 푸터 — 방사형 네이비→블랙 */
  --g-footer: radial-gradient(120% 260% at 29% 38%,
              #003171 0%, #002555 25%, #001838 50%, #000c1c 75%, #00060e 87.5%, #000000 100%);

  /* --- color: text ------------------------------------------------------- */
  --c-text: #323232;          /* 본문 기본 */
  --c-text-strong: #282828;   /* Hero 제목 */
  --c-text-price: #111418;    /* 가격 */
  --c-text-sub: #464646;      /* Hero 설명 */
  --c-text-muted: #656565;    /* 지표 라벨 */
  --c-text-unit: #919191;     /* 가격 단위 */
  --c-text-placeholder: #989898;
  --c-text-chip: #7b7b7b;     /* 비활성 필터 칩 글씨 */
  --c-text-meta: #7c7c7c;     /* 합계 라벨 */
  --c-text-invert: #ffffff;
  --c-text-footer: #b4b4b4;   /* 푸터 사업자정보 */
  --c-text-footer-dim: #6d6d6d; /* 푸터 카피라이트 */

  /* --- color: surface ---------------------------------------------------- */
  --c-bg: #ffffff;
  --c-surface: #f6faff;       /* 브랜드 섹션 · 안내 박스 배경 */
  --c-surface-alt: #f4f6f8;   /* 썸네일 · 선택 제품 카드 배경 */
  --c-surface-note: #f6f6f6;  /* 안내 박스 배경 */
  --c-surface-auth: #e9f0f6;  /* 로그인·회원가입 하단 배경 */
  --c-surface-page: #f0f5f9;  /* 마이페이지 배경 — 위보다 한 톤 밝다 */
  --c-chip-off: #e9eef3;      /* 보조 버튼 배경 */

  /* 칸이 떠 보여야 하는 바탕 — 흰 칸을 얹는다 (마이페이지 주문·견적 목록).
     시안 미정의 — 신규 `[2026-09-21]`. 가진 표면 중 가장 진한 --c-surface-auth
     (#e9f0f6) 로도 흰 칸과 갈리지 않아 한 단계 더 내렸다 */
  --c-surface-sunken: #dde5ee;

  /* --- color: line ------------------------------------------------------- */
  --c-line: #d6dbe0;          /* 썸네일 테두리 */
  --c-line-card: #a2bde4;     /* 제품 카드 테두리 */
  --c-line-input: #d5d5d5;    /* 입력 테두리 */
  --c-line-chip: #bfbfbf;     /* 비활성 필터 칩 테두리 */
  --c-line-soft: #e9eef3;     /* 구분선 */
  --c-blue-deep: #0057c9;     /* INQUIRY 강조 · 선택 칩 · 합계 */
  --c-radio: var(--c-blue-deep);
  --c-radio-off: #d0d0d0;

  /* --- color: state ------------------------------------------------------ */
  --c-danger: #d13438;        /* 폼 에러. 시안 미정의 — 신규 */
  --c-focus: var(--c-blue);

  /* 주의 — 잘못된 입력이 아니라 "지나간 상태" 다 (만료된 견적).
     에러(--c-danger)와 구분해야 해서 따로 둔다. 시안 미정의 — 신규 */
  --c-warn-bg:   #fff8ec;
  --c-warn-text: #8a5a00;
  --c-warn-icon: #b07800;
  --c-warn-strong: #6f4800;

  /* --- 제품 스와치 -------------------------------------------------------- */
  /* 제품 사진의 **바이알 액체 색**이다 `[2026-10-01]`.

     전에는 시안 INQUIRY 의 파장별 5색(파랑·노랑·빨강·초록·보라)을 썼다. 그러면
     675nm 제품에 빨간 점이 붙는데 사진 속 바이알은 하늘색이어서, 같은 카드 안에서
     점과 사진이 따로 놀았다. 보이는 것끼리 맞추기로 했다 — 점은 그 제품 사진에서
     뽑은 색을 쓴다.

     받은 사진 17장이 쓰는 색은 아래 다섯 가지 + 무색이다. 사진을 새로 받으면
     바이알 색을 다시 뽑아 이 목록과 제품별 sw 값을 함께 고친다.

     제품마다 --swatch 를 인라인으로 덮어쓴다 (CLAUDE.md §3 — 인라인 style 금지의 예외) */
  --swatch-yellow: #fcf52e;   /* KOSC2002 · CWS1001 · CWA1001 */
  --swatch-pink:   #f83180;   /* KOSC1003 · PWS1122 · PWA1122 */
  --swatch-blue:   #2b3cfe;   /* KOSC2315 · PWS1215 · PWA1215 */
  --swatch-sky:    #2b80fe;   /* PWS1515 · PWA1515 */
  --swatch-mint:   #29d0a3;   /* PWS1301 · PWA1308 */
  --swatch-red:    #e14c5e;   /* PSC6001 · PSC6002 */
  /* Europium 비드는 바이알이 무색이다. 흰 카드 위에서 사라지지 않을 만큼만 띄운다 */
  --swatch-clear:  #c7ccd1;   /* EPS5001 · EPS5002 */
  --swatch: var(--swatch-yellow);

  /* --- typography -------------------------------------------------------- */
  /* Pretendard 파일은 assets/font/ 에 넣고 base.css 의 @font-face 를 연다.
     CDN 링크는 쓰지 않는다 (카페24에 파일로 올라간다). */
  --ff-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
             "Malgun Gothic", "맑은 고딕", sans-serif;
  --ff-num: "Inter", var(--ff-base);   /* 카탈로그번호 · 가격 */

  --fs-xs:   0.6875rem;  /* 11px — 카탈로그번호 */
  --fs-sm:   0.75rem;    /* 12px — 버튼, 가격 단위, 지표 라벨 */
  --fs-base: 0.875rem;   /* 14px — 폼, 가격, 푸터 카피라이트 */
  --fs-md:   1rem;       /* 16px — GNB, 제품명, 푸터 정보, 브랜드 본문 */
  --fs-lg:   1.125rem;   /* 18px — 칩, 폼 제목, 섹션 설명, send */
  --fs-xl:   1.25rem;    /* 20px — 플로팅 CTA */
  --fs-2xl:  1.5rem;     /* 24px — 섹션 제목 */
  --fs-3xl:  1.6875rem;  /* 27px — 지표 수치 */
  --fs-4xl:  1.9375rem;  /* 31px — 브랜드 제목 */
  --fs-5xl:  2.0625rem;  /* 33px — Hero 제목 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.3;
  --lh-base: 1.45;
  --lh-relaxed: 1.6;

  --ls-1: -1px;          /* 시안이 -1px 절대값을 쓰는 곳 (제목·푸터) */
  --ls-tight: -0.03em;   /* 일반 제목 */
  --ls-sm: -0.01em;      /* GNB tracking -0.16px */

  /* --- space ------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  /* 섹션 사이 간격. 시안 메인의 세로 리듬이 121px · 128px 이다 */
  --sp-30: 120px;
  --sp-32: 128px;

  /* --- radius ------------------------------------------------------------ */
  --radius-sm: 5px;      /* send 버튼 */
  --radius: 10px;        /* 문의 패널 */
  --radius-lg: 16px;     /* 제품 카드 */
  --radius-pill: 999px;  /* 칩, 카드 버튼, 플로팅 CTA */

  /* --- elevation --------------------------------------------------------- */
  --shadow-panel: 0 0 5px rgb(34 39 58 / .15);
  /* 마이페이지·비회원 조회·견적 확인의 흰 카드.
     mypage.css 가 처음부터 var(--shadow-1) 을 썼는데 토큰이 없어
     그림자가 나오지 않고 있었다. CLAUDE.md §5 예시 값으로 채웠다 [2026-09-16] */
  --shadow-1: 0 1px 3px rgb(0 0 0 / .08);

  /* --- layout ------------------------------------------------------------ */
  --container: 1280px;   /* Figma 1920 - 좌우 여백 320 × 2 */
  --gutter: var(--sp-5); /* 모바일 기본. 데스크톱에서 확장 */
  /* 모바일 65px — 아이콘 줄만 남아 75px 은 비어 보인다 `[2026-09-18]`.
     데스크톱은 글자 메뉴가 들어가 시안대로 75px 를 지킨다 */
  --header-h: 65px;
  /* 떠 있는 문의 버튼(.floating-cta__btn)의 높이 `[2026-09-29]`.
     맨 위로 버튼이 같은 모서리를 쓰므로 이 값만큼 비켜 앉아야 한다.
     좁은 화면 min-height 44 / 넓은 화면 --btn-lg 의 행간에서 나온 57 */
  --cta-h: 44px;
  --hero-h: 640px;
}

@media (min-width: 768px)  { :root { --gutter: var(--sp-10); --header-h: 75px; --cta-h: 57px; } }
@media (min-width: 1440px) { :root { --gutter: var(--sp-20); } }