/* =========================================================
   네온(neon) — 디자인 토큰
   리빙·침구 브랜드 / 따뜻한 자연광 뉴트럴 + 더스티 블루 액센트
   색·간격·타이포는 항상 이 변수를 통해 사용한다(하드코딩 금지).
   ========================================================= */

/* ---- 웹폰트 ----
   본문: Pretendard (한글)  /  영문 디스플레이 라벨: Cormorant Garamond */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap");

:root {
  /* =======================================================
     1) 원시 팔레트 (raw palette) — 직접 쓰지 말고 시맨틱 토큰을 통해 사용
     ======================================================= */
  --c-cream-50:  #fbf8f2;
  --c-cream-100: #f6f1e8;
  --c-sand-200:  #ece5d8;
  --c-sand-300:  #ded4c3;
  --c-taupe-400: #c7bba7;
  --c-taupe-500: #a89b86;
  --c-warmgray-600: #7c7468;
  --c-ink-800:   #3a3a3e;
  --c-ink-900:   #25272c;

  --c-blue-200:  #cdd8e4;
  --c-blue-300:  #afc1d4;
  --c-blue-400:  #8aa2bc;
  --c-blue-500:  #6c88a6;
  --c-blue-600:  #54708e;

  --c-white: #ffffff;

  /* =======================================================
     2) 시맨틱 컬러 — 실제 사용 토큰
     ======================================================= */
  --color-bg:           var(--c-cream-50);   /* 페이지 기본 배경 */
  --color-bg-alt:       var(--c-cream-100);  /* 교차 섹션 배경 */
  --color-surface:      var(--c-white);      /* 카드·패널 */
  --color-surface-sunken: var(--c-sand-200); /* 살짝 들어간 면 */

  --color-line:         var(--c-sand-300);   /* 구분선·테두리 */
  --color-line-strong:  var(--c-taupe-400);

  --color-ink:          var(--c-ink-900);    /* 기본 텍스트 */
  --color-ink-soft:     var(--c-ink-800);    /* 부제목 */
  --color-ink-muted:    var(--c-warmgray-600); /* 보조 텍스트 */
  --color-ink-inverse:  var(--c-cream-50);   /* 어두운 배경 위 텍스트 */

  --color-accent:        var(--c-blue-500);  /* 액센트(링크·강조) */
  --color-accent-strong: var(--c-blue-600);  /* hover/active */
  --color-accent-soft:   var(--c-blue-300);  /* 옅은 강조 배경 */
  --color-on-accent:     var(--c-white);     /* 액센트 위 텍스트 */

  --color-cta:           var(--c-ink-900);   /* 도매 문의 등 주요 CTA */
  --color-cta-hover:     var(--c-blue-600);
  --color-on-cta:        var(--c-cream-50);

  --color-focus:         var(--c-blue-500);  /* 포커스 링 */
  --color-overlay:       rgba(37, 39, 44, .38); /* 히어로 텍스트 가독용 오버레이 */

  /* =======================================================
     3) 타이포그래피
     ======================================================= */
  --font-sans: "Pretendard Variable", Pretendard, system-ui, -apple-system,
               "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-display: "Cormorant Garamond", "Pretendard Variable", serif;   /* 영문 라벨/숫자 */
  --font-display-ko: "Gowun Batang", "Nanum Myeongjo", serif;           /* 국문 제목/헤드라인 (명조) */

  /* 타입 스케일 (rem 기준, 1rem=16px) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  clamp(2.5rem, 6vw, 4.25rem); /* 히어로 헤드라인 */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.65;   /* 한글 본문 가독 */
  --lh-loose: 1.9;

  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide:  0.04em;
  --ls-label: 0.18em;  /* 영문 섹션 라벨(대문자) 자간 */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* =======================================================
     4) 간격 스케일 (8px 리듬)
     ======================================================= */
  --space-1: 0.25rem; /* 4  */
  --space-2: 0.5rem;  /* 8  */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-5: 1.5rem;  /* 24 */
  --space-6: 2rem;    /* 32 */
  --space-7: 3rem;    /* 48 */
  --space-8: 4rem;    /* 64 */
  --space-9: 6rem;    /* 96 */
  --space-10: 8rem;   /* 128 */
  --section-y: clamp(3.5rem, 8vw, 8rem); /* 섹션 상하 여백 */

  /* =======================================================
     5) 레이아웃
     ======================================================= */
  --container-max: 1280px;
  --container-narrow: 880px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);
  --header-h: 72px;

  /* 브레이크포인트(참고용; CSS @media에 직접 px 사용)
     sm 480 / md 768 / lg 1024 / xl 1280 */

  /* =======================================================
     6) 모서리 · 그림자 · 모션
     ======================================================= */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(37,39,44,.05);
  --shadow-md: 0 6px 24px rgba(37,39,44,.08);
  --shadow-lg: 0 18px 48px rgba(37,39,44,.12);

  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-inout: cubic-bezier(.65, .05, .36, 1);

  --z-header: 10