/* ==========================================================================
   SOONG 디자인 하네스 — 유일한 정본(Single Source of Truth)
   --------------------------------------------------------------------------
   규칙 (harness/check.py 가 자동 검사)
   1. 색·크기·간격·글자·곡선·시간 값은 이 파일에만 적는다.
      다른 CSS/JS는 var(--토큰)만 쓴다. (예외: 0, 1px 선, 100%, 퍼센트, em 자간)
   2. 미디어쿼리 폭은 768px / 1024px / 1280px 세 개만 쓴다.
   3. 색은 아래 팔레트 밖으로 나가지 않는다.
   출처
   - 시안: Dribbble "Blog Minimal interior design" (BSTY, by Fred) 375pt 아트보드 실측
   - 움직임: Kinetics(kinetics.colorion.co) 스프링 곡선·시간값
   - 반응형 폭: Tailwind CSS 기본 breakpoint (md 768 / lg 1024 / xl 1280)
   - 터치 크기: Apple HIG 44pt, WCAG 2.2 SC 2.5.8(24px 이상)
   ========================================================================== */

:root {
  /* ---------- 1. 색 팔레트 (시안 실측 기반) ---------- */
  --c-white:        #FFFFFF;  /* 배경 */
  --c-gray-50:      #F7F7F7;  /* 이미지 자리·옅은 면 */
  --c-gray-100:     #EFEFEF;  /* 호버 면·스켈레톤 바탕 */
  --c-gray-200:     #E5E5E5;  /* 구분선 */
  --c-gray-300:     #D4D4D4;  /* 비활성 테두리·메뉴 열림 시 흐린 로고 */
  --c-gray-500:     #8E8E8E;  /* 글자 아닌 장식 (시안 본문 회색) */
  --c-gray-600:     #6E6E6E;  /* 보조 글자 (흰 바탕 대비 5.1:1, AA 통과) */
  --c-gray-800:     #3C3C3C;  /* 본문 강조 */
  --c-black:        #111111;  /* 제목·주 버튼 */
  --c-accent:       #EE2328;  /* 시안 메뉴 점 — 점·표시·큰 글자 전용 */
  --c-accent-strong:#C4161C;  /* 오류 글자·경고 링크 (대비 6.0:1) */

  /* 역할 이름 (컴포넌트는 역할 토큰을 쓴다) */
  --color-bg:            var(--c-white);
  --color-surface:       var(--c-gray-50);
  --color-surface-hover: var(--c-gray-100);
  --color-line:          var(--c-gray-200);
  --color-line-strong:   var(--c-gray-300);
  --color-text:          var(--c-black);
  --color-text-body:     var(--c-gray-800);
  --color-text-muted:    var(--c-gray-600);
  --color-text-faint:    var(--c-gray-500);
  --color-text-disabled: var(--c-gray-300);
  --color-primary:       var(--c-black);
  --color-on-primary:    var(--c-white);
  --color-accent:        var(--c-accent);
  --color-danger:        var(--c-accent-strong);
  --color-focus:         var(--c-black);
  --color-scrim:         rgb(17 17 17 / 0.40);   /* c-black 40% */
  --color-shadow:        rgb(17 17 17 / 0.12);   /* c-black 12% */
  --color-shadow-strong: rgb(17 17 17 / 0.20);   /* c-black 20% */
  --color-skeleton-hi:   var(--c-gray-50);

  /* ---------- 2. 글꼴 ---------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* 임시 비밀번호 표시 전용 */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;

  /* 글자 크기 — 모바일 기준값(시안 375pt 실측), 태블릿·PC는 아래 미디어쿼리에서 덮어씀 */
  --fs-display: 30px;   /* 페이지 제목 (시안 "Interior" 30pt) */
  --fs-h2:      20px;   /* 글·상품 제목 (시안 20pt) */
  --fs-h3:      15px;   /* 목록 항목 제목 (시안 15pt) */
  --fs-body:    14px;   /* 본문 (시안 14pt / 행간 1.66) */
  --fs-small:   13px;   /* 요약·설명 (시안 8pt → 가독성 하한 13px로 올림) */
  --fs-meta:    11px;   /* 날짜·분류 대문자 (시안 10pt → 하한 11px) */
  --fs-label:   11px;   /* MENU·COMMENTS 같은 작은 라벨 */
  --fs-wordmark:16px;   /* 로고 글자 (시안 BSTY) */
  --fs-menu:    16px;   /* 전체 메뉴 항목 */
  --fs-nav:     14px;   /* 상단 1뎁스 메뉴 */
  --fs-tab:     14px;   /* 2뎁스 탭 */
  --fs-button:  14px;
  --fs-input:   16px;   /* iOS 확대 방지 16px 고정 */

  --lh-tight:   1.2;    /* 제목 */
  --lh-normal:  1.5;    /* UI */
  --lh-relaxed: 1.7;    /* 본문 (시안 1.66) */

  --ls-wordmark: 0.24em;
  --ls-label:    0.08em;
  --ls-meta:     0.04em;
  --ls-tight:   -0.01em;

  /* ---------- 3. 간격 (4px 단위) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;

  /* ---------- 4. 레이아웃 ---------- */
  --gutter:        28px;   /* 좌우 여백 — 시안 28pt */
  --header-h:      72px;   /* 헤더 높이 — 시안 로고 중심 36pt */
  --subnav-h:      48px;   /* 2뎁스 탭 줄 높이 */
  --container-max: 1200px;
  --reading-max:   680px;  /* 글·약관 읽기 폭 */
  --thumb-list:    104px;  /* 목록 썸네일 — 시안 105pt */
  --section-gap:   var(--sp-16);
  --grid-gap:      var(--sp-6);
  --grid-cols:     2;      /* 상품 격자 열 수 */

  /* ---------- 5. 컴포넌트 크기 (버튼·메뉴·입력) ---------- */
  --btn-h-sm:   36px;
  --btn-h-md:   44px;      /* 최소 터치 크기 */
  --btn-h-lg:   52px;      /* 주 행동 버튼 */
  --btn-px-sm:  var(--sp-4);
  --btn-px-md:  var(--sp-5);
  --btn-px-lg:  var(--sp-6);
  --input-h:    56px;      /* 떠오르는 라벨 포함 */
  --tap-min:    44px;      /* 아이콘 버튼 누름 영역 */
  --icon-sm:    16px;
  --icon-md:    20px;
  --icon-lg:    24px;
  --nav-item-h: 44px;      /* 1뎁스 메뉴 누름 높이 */
  --nav-gap:    var(--sp-8);
  --menu-row-h: 56px;      /* 전체 메뉴 한 줄 (시안 60pt 간격) */
  --tab-h:      44px;      /* 2뎁스 탭 */
  --chip-h:     36px;
  --switch-w:   44px;
  --switch-h:   24px;
  --knob:       18px;
  --check:      20px;
  --pin-w:      44px;
  --pin-h:      52px;
  --dot:        6px;       /* 활성 표시 점 (시안 빨간 점) */
  --line-w:     1px;
  --line-w-strong: 2px;
  --focus-ring: 2px;

  --radius-0:    0;        /* 시안은 모서리 없음 */
  --radius-pill: 999px;    /* 칩·스위치만 */
  --radius-round:50%;

  /* 이미지 비율 */
  --ratio-hero:    4 / 5;
  --ratio-card:    4 / 5;
  --ratio-thumb:   1 / 1;
  --ratio-wide:    16 / 9;
  --map-h:         360px;

  /* ---------- 6. 움직임 (Kinetics 원본 값) ---------- */
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* Squish·Hover Lift·Switch·Chips */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);       /* Stagger·Accordion·Floating Label·Clip Wipe */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);      /* Underline Draw·Tab Pill Glide */
  --ease-overshoot: cubic-bezier(0.18, 1.25, 0.4, 1);    /* Toast Overshoot */
  --ease-shake:     cubic-bezier(0.36, 0.07, 0.19, 0.97);/* Error Shake */
  --ease-out:       ease-out;

  --dur-press:   80ms;   /* Squish 누름 */
  --dur-fast:    150ms;  /* Delayed Tooltip */
  --dur-color:   200ms;
  --dur-icon:    300ms;  /* Icon Morph Swap */
  --dur-draw:    320ms;  /* Checkbox Draw */
  --dur-std:     400ms;  /* Underline Draw·Tab Glide·Switch */
  --dur-enter:   450ms;  /* Stagger·Accordion·Shake */
  --dur-spring:  500ms;  /* Squish 복귀·Hover Lift·Clip Wipe */
  --dur-toast:   550ms;
  --dur-hold:    800ms;  /* Hold to Confirm */
  --dur-shimmer: 1400ms; /* Skeleton */
  --dur-feedback:1400ms; /* Copy·Submit 완료 표시 유지 */
  --dur-toast-hold: 2600ms; /* 토스트 머무는 시간 */
  --delay-tip:   400ms;
  --stagger:     90ms;
  --delay-menu:  120ms;  /* 2뎁스 드롭다운 들어올 때 지연 */
  --delay-tick:  50ms;   /* Checkbox Draw 체크 지연 */
  --dur-breathe: 2400ms; /* 지도 표시점 숨쉬기 */
  --magnet:      0.35;   /* Magnetic Button 당김 비율 */
  --press-scale: 0.96;   /* Squish (원본 0.88 → 큰 버튼용 완화) */
  --pop-scale:   1.12;   /* Choice Chips pop */
  --lift:        -6px;   /* Hover Lift (원본 -10px → 밝은 화면용 완화) */
  --scale-zoom:  1.04;   /* 사진 호버 확대 */
  --scale-press-sm: 0.9; /* 작은 버튼·체크 누름 */
  --scale-out:   0.8;    /* 상태 전환 시 사라지는 쪽 */
  --scale-hidden:0.5;    /* Copy Button 아이콘 교체 */
  --scale-tip:   0.85;   /* Delayed Tooltip 시작 크기 */
  --scale-toast: 0.9;    /* Toast 시작 크기 */
  --scale-bump:  1.3;    /* Stepper 숫자 튐 */
  --scale-dot:   1.2;    /* 활성 점 */
  --z-header: 50;
  --z-menu:   80;
  --z-toast:  90;
}

/* ---------- 태블릿 ≥ 768px ---------- */
@media (min-width: 768px) {
  :root {
    --fs-display: 36px;
    --fs-h2:      22px;
    --fs-h3:      16px;
    --fs-body:    15px;
    --fs-wordmark:18px;
    --fs-menu:    20px;
    --gutter:     40px;
    --header-h:   80px;
    --grid-cols:  3;
    --section-gap: var(--sp-20);
    --map-h:      440px;
  }
}

/* ---------- PC ≥ 1024px ---------- */
@media (min-width: 1024px) {
  :root {
    --fs-display: 44px;
    --fs-h2:      26px;
    --fs-h3:      17px;
    --fs-body:    16px;
    --gutter:     64px;
    --header-h:   88px;
    --grid-cols:  4;
    --grid-gap:   var(--sp-8);
    --section-gap: var(--sp-24);
    --map-h:      520px;
  }
}

/* ---------- 넓은 PC ≥ 1280px ---------- */
@media (min-width: 1280px) {
  :root {
    --gutter: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms; --dur-fast: 0ms; --dur-color: 0ms; --dur-icon: 0ms;
    --dur-draw: 0ms; --dur-std: 0ms; --dur-enter: 0ms; --dur-spring: 0ms;
    --dur-toast: 0ms; --stagger: 0ms; --magnet: 0; --dur-breathe: 0ms; --delay-menu: 0ms; --delay-tip: 0ms;
  }
}