/* 샵바이블 디자인 토큰 v1 · 2026-09-26
   출처: 브랜드 가이드 v1.0(03 컬러 · 04 타이포) · 준비 중 화면 v4 · 서체 후보 A(SUIT) · 아이콘 세트 v3
   접두사 --sb- 는 기존 코드베이스 토큰과 충돌하지 않도록 붙인 것. 프로젝트 관례에 맞게 바꿔도 됨. */

:root {
  /* ── 브랜드 컬러 (로고 추출 확정값) ── */
  --sb-navy: #0D2A52;          /* Bible Navy · 심볼 외곽 · 워드마크 · 홈페이지 제목 */
  --sb-yellow: #FDC85A;        /* Shop Yellow · 어닝 · 빈칸 박스 · 아이콘 덩이 */
  --sb-yellow-hover: #F4BA40;  /* 옐로 버튼 hover (어두운 화면 CTA) */
  --sb-page-white: #F7F7F7;    /* 책 페이지 · 스플래시 배경 */
  --sb-primary: #005F8F;       /* UI Primary · 앱 버튼 · 링크 · 활성 · 홈페이지 CTA(밝은 화면) — 유지 결정(D32) */
  --sb-primary-hover: #00527C; /* CTA hover */
  --sb-link-hover: #004E76;    /* 텍스트 링크 hover */
  --sb-navy-hover: #1C3F73;    /* 네이비 버튼 hover · 어두운 화면 차양 짝색 */

  /* ── 홈페이지 뉴트럴 (밝은 화면) ── */
  --sb-bg: #F7F9FB;
  --sb-bg-muted: #FFFFFF;       /* 말풍선 · 카드 */
  --sb-border: #E7EBEE;         /* 구분선 · 배경 격자 80px */
  --sb-border-strong: #B9C3CC;  /* 밑줄 링크 */
  --sb-rule: #C9D2DA;           /* 사전 항목 굵은 괘선 · 비활성 점 */
  --sb-text: #0D2A52;           /* 홈페이지 제목 · 본문 primary */
  --sb-text-secondary: #555555;
  --sb-text-tertiary: #6B6B6B;  /* 라벨 · 각주 · 캡션 (4.5:1 유지) */

  /* ── 앱 뉴트럴 · 시맨틱 (브랜드 가이드 03, 앱 공통) ── */
  --sb-app-text: #1D1D1D;
  --sb-app-text-secondary: #555555;
  --sb-app-caption: #8E8E8E;    /* 캡션 · 탭바 기본 아이콘 선 */
  --sb-app-bg: #F4F6F8;
  --sb-app-border: #E7EBEE;
  --sb-success: #008A1E;
  --sb-warning: #B07700;
  --sb-error: #E71825;
  --sb-emph-low: #C25800;       /* 열위 강조 */
  --sb-emph-high: #3E85AC;      /* 우위 뉴트럴 */

  /* ── 서체 ── */
  --sb-font-brand: 'SUIT Variable', 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; /* 홈페이지 · 마케팅 · 인쇄 */
  --sb-font-app: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;                  /* 점주 앱 · 직원 앱 · 어드민 (유지) */
  --sb-font-wordmark: 'Poppins', var(--sb-font-brand);  /* 영문 워드마크 "shopbible" · 500 · 항상 소문자 */

  /* 굵기 */
  --sb-w-title: 800;   /* 제목 · 표제어 (ExtraBold) */
  --sb-w-bold: 700;    /* 버튼 · 라벨 · 강조 */
  --sb-w-medium: 500;  /* 정의문 · 부제 */
  --sb-w-body: 400;    /* 본문(앱) */
  --sb-w-light: 300;   /* 캡션 보조 */

  /* 타입 스케일 · 기준 16px · 비율 1.25 (홈페이지 · 인쇄) */
  --sb-fs-caption: 13px;   /* 각주 · 항목 번호 라벨 · 카운터 */
  --sb-fs-body: 16px;      /* 본문 · 항목 설명 (lh 1.7) */
  --sb-fs-lead: 20px;      /* 정의문 · 부제 (18~20px) */
  --sb-fs-h4: 25px;
  --sb-fs-h3: 31px;        /* 사전 항목 제목 (30px 사용) */
  --sb-fs-h2: 39px;
  --sb-fs-h1: 49px;
  --sb-fs-d3: 61px;
  --sb-fs-d2: 76px;
  --sb-fs-d1: 96px;        /* 표제어 "샵바이블" */

  /* 행간 · 자간 */
  --sb-lh-tight: 1;        /* 표제 · 큰 글자 빈칸 */
  --sb-lh-title: 1.08;     /* h1 */
  --sb-lh-body: 1.7;       /* 본문(홈페이지) */
  --sb-lh-app-body: 1.55;  /* 본문(앱 15px) */
  --sb-ls-display: -0.06em;  /* 96px↑ */
  --sb-ls-title: -0.05em;    /* h1 · 빈칸 글자 */
  --sb-ls-head: -0.045em;    /* 표제어 · 큰 제목 */
  --sb-ls-h3: -0.03em;       /* 항목 제목 · 부제 */
  --sb-ls-brand: -0.02em;    /* "샵바이블" 로고 옆 글자 */
  --sb-ls-eyebrow: 0.2em;    /* "SHOPBIBLE · 2026. 11" 눈썹 라벨 */
  --sb-ls-eyebrow-sm: 0.14em;/* "01 / 03" 카운터 */

  /* ── 라운드 ── */
  --sb-radius-pill: 999px;   /* CTA · 힌트 칩 */
  --sb-radius-bubble: 14px;  /* 말풍선 */
  --sb-radius-card: 16px;    /* 카드 · 패널 */
  --sb-radius-card-lg: 20px;
  --sb-radius-app-btn: 12px; /* 앱 버튼 44~56px */
  --sb-radius-flap: clamp(14px, 1.8vw, 26px); /* 빈칸 박스 */

  /* ── 크기 ── */
  --sb-content-max: 1200px;
  --sb-gutter: clamp(20px, 5vw, 72px);
  --sb-cta-h: 58px;          /* 홈페이지 CTA 최소 높이 */
  --sb-chip-h: 48px;         /* 힌트 칩 · 터치 최소 48 */
  --sb-awning-stripe: 56px;  /* 차양 줄무늬 1칸 (2칸 = 112px 주기) */
  --sb-awning-scallop: 28px; /* 차양 물결 높이 */
  --sb-awning-rest: clamp(90px, 15vh, 180px); /* 장면 1 차양 휴지 높이 (JS: max(90, min(180, H*0.15))) */
  --sb-awning-rest-2: 34px;  /* 장면 2 차양 휴지 높이 */
  --sb-icon-app: 24px;
  --sb-icon-board: 32px;
  --sb-icon-marketing: 64px;

  /* ── 모션 ── */
  --sb-ease-out: cubic-bezier(.2, .8, .3, 1);       /* 텍스트 등장 · 빈칸 글자 in */
  --sb-ease-awning-up: cubic-bezier(.3, .7, .2, 1); /* 차양 올라가기 */
  --sb-ease-awning-down: cubic-bezier(.4, 0, .2, 1);/* 차양 내려오기 */
  --sb-dur-hover: 150ms;
  --sb-dur-flap-out: 220ms;   /* 빈칸 글자 out (ease-in) */
  --sb-dur-flap-in: 300ms;
  --sb-dur-bubble: 360ms;
  --sb-dur-enter: 700ms;
  --sb-dur-awning-down: 750ms;
  --sb-dur-awning-up: 1100ms;
  --sb-dur-awning-intro: 1500ms;
  --sb-dur-bob: 3000ms;       /* 마스코트 둥실 (0 → -7px → 0, ease-in-out, 무한) */
  --sb-scene-seconds: 8s;     /* 장면 자동 전환 */
  --sb-flap-seconds: 2s;      /* 빈칸 단어 순환 */

  /* ── 준비 중 화면 · 테마 변수 (밝은 화면 기본) ── */
  --cs-bg: #F7F9FB;
  --cs-bg-muted: #FFFFFF;
  --cs-border: #E7EBEE;
  --cs-border-strong: #B9C3CC;
  --cs-grid: #E7EBEE;
  --cs-text-primary: #0D2A52;
  --cs-text-secondary: #555555;
  --cs-text-tertiary: #6B6B6B;
  --cs-accent-text: #005F8F;  /* 각주 번호 · 위첨자 */
  --cs-cta: #005F8F;
  --cs-cta-hover: #00527C;
  --cs-cta-text: #FFFFFF;
  --cs-ring: #0D2A52;         /* 키보드 초점 */
  --cs-chip: #0D2A52;
  --cs-chip-text: #FFFFFF;
  --cs-dot-on: #0D2A52;
  --cs-dot-off: #C9D2DA;
  --cs-awning-a: #0D2A52;     /* 차양 네이비 줄 (옐로 줄은 항상 #FDC85A) */
}

/* 어두운 화면 — prefers-color-scheme 자동 + data-theme 강제 (?theme=dark|light 와 동일) */
[data-theme="dark"] {
  --cs-bg: #0D2A52;
  --cs-bg-muted: #15355F;
  --cs-border: #2B4B77;
  --cs-border-strong: #5A7AA6;
  --cs-grid: #1C3F73;
  --cs-text-primary: #FFFFFF;
  --cs-text-secondary: #C6D2E4;
  --cs-text-tertiary: #A9B9D3;
  --cs-accent-text: #FDC85A;
  --cs-cta: #FDC85A;
  --cs-cta-hover: #F4BA40;
  --cs-cta-text: #0D2A52;
  --cs-ring: #FFFFFF;
  --cs-chip: #FDC85A;
  --cs-chip-text: #0D2A52;
  --cs-dot-on: #FDC85A;
  --cs-dot-off: #2B4B77;
  --cs-awning-a: #1C3F73;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cs-bg: #0D2A52; --cs-bg-muted: #15355F; --cs-border: #2B4B77; --cs-border-strong: #5A7AA6; --cs-grid: #1C3F73;
    --cs-text-primary: #FFFFFF; --cs-text-secondary: #C6D2E4; --cs-text-tertiary: #A9B9D3; --cs-accent-text: #FDC85A;
    --cs-cta: #FDC85A; --cs-cta-hover: #F4BA40; --cs-cta-text: #0D2A52; --cs-ring: #FFFFFF;
    --cs-chip: #FDC85A; --cs-chip-text: #0D2A52; --cs-dot-on: #FDC85A; --cs-dot-off: #2B4B77; --cs-awning-a: #1C3F73;
  }
}

/* 웹폰트 로드 (CDN 또는 /home/fonts/ 자체 호스팅 — 배포 규칙상 홈페이지 자산은 /home/ 아래) */
/* SUIT Variable: https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css  (SIL OFL 1.1) */
/* Pretendard Variable: https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css */
/* Poppins 500 (워드마크 전용): https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap */

/* 움직임 줄이기 — 모든 전환 즉시 */
@media (prefers-reduced-motion: reduce) {
  :root { --sb-dur-hover: 0ms; --sb-dur-flap-out: 0ms; --sb-dur-flap-in: 0ms; --sb-dur-bubble: 0ms; --sb-dur-enter: 0ms;
          --sb-dur-awning-down: 0ms; --sb-dur-awning-up: 0ms; --sb-dur-awning-intro: 0ms; --sb-dur-bob: 0ms; }
}