/* ============================================================
   spoonhouse.com · Design Tokens · v3.1
   컨셉: 항공 화물 운송장 (Air Waybill)
   변수 · 폰트 · 리셋만. 컴포넌트는 site.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root {
  /* ── Color ─────────────────────────────────────────── */
  --ink:        #101418;
  --paper:      #FAFAF7;
  --field:      #ECEEE9;
  --rule:       #C9CCC6;
  --air-red:    #C8102E;   /* 주 CTA · 스트라이프 */
  --air-blue:   #12386B;   /* 링크 · 상태 · 스트라이프 */
  --cleared:    #1F7A4C;   /* 통관완료 · 성공 */

  --kakao:      #FEE500;   /* 카카오 CTA 전용 예외 */
  --kakao-ink:  #191919;

  --ink-70:     rgba(16, 20, 24, 0.70);
  --ink-55:     rgba(16, 20, 24, 0.55);
  --ink-40:     rgba(16, 20, 24, 0.40);
  --blue-06:    rgba(18, 56, 107, 0.06);
  --blue-12:    rgba(18, 56, 107, 0.12);

  /* ── Typography ────────────────────────────────────── */
  --font-display: 'IBM Plex Sans KR', 'Pretendard Variable', system-ui, sans-serif;
  --font-body:    'Pretendard Variable', 'Pretendard', 'IBM Plex Sans KR', system-ui, sans-serif;
  --font-data:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fs-h1:    clamp(2.125rem, 5vw, 3.25rem);
  --lh-h1:    1.14;
  --tr-h1:    -0.022em;
  --fs-h2:    clamp(1.5rem, 3vw, 2rem);
  --lh-h2:    1.25;
  --tr-h2:    -0.01em;
  --fs-h3:    1.25rem;
  --lh-h3:    1.35;
  --fs-body:  1rem;
  --lh-body:  1.7;
  --fs-lede:  1.0625rem;
  --fs-small: 0.875rem;
  --lh-small: 1.6;
  --fs-label: 0.6875rem;
  --tr-label: 0.12em;

  --fs-data-xl: clamp(1.75rem, 4vw, 2.375rem);
  --fs-data-lg: 1.75rem;
  --fs-data-md: 1.125rem;

  /* ── Space (4px base) ──────────────────────────────── */
  --sp-0: 2px;  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;
  --sp-8: 40px; --sp-9: 56px; --sp-10: 80px;

  /* ── Shape ─────────────────────────────────────────── */
  --radius:     2px;
  --radius-btn: 6px;
  --border:     1px solid var(--rule);

  /* ── Layout ────────────────────────────────────────── */
  --container:    1120px;
  --gutter:       clamp(20px, 4vw, 40px);
  --grid-gap:     24px;
  --section-y:    clamp(56px, 8vw, 96px);
  --section-y-sm: clamp(40px, 6vw, 64px);

  /* ── Motion ────────────────────────────────────────── */
  --ease:       cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:   150ms;
  --dur:        250ms;
  --dur-stripe: 400ms;

  /* ── 항공우편 스트라이프 (적/청 사선) ────────────────── */
  --airmail: repeating-linear-gradient(
    45deg,
    var(--air-red)  0    10px,
    var(--paper)    10px 14px,
    var(--air-blue) 14px 24px,
    var(--paper)    24px 28px
  );
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--air-blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--air-red); }
a:visited { color: var(--air-blue); }

button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--air-blue); outline-offset: 2px; }

img { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}