/* ============================================================
   VIAL LAB — Design Tokens
   메인 컬러: 연한 그레이 (사장님 지정)
   레퍼런스: rhodeskin.com (미니멀/프리미엄/스킨케어)
   ============================================================ */
:root {
  /* ─── Color ─── */
  --paper:        #f5f5f3;     /* off-white background */
  --canvas:       #ebebe7;     /* warm sand canvas */
  --line:         #d4d4d0;     /* hairline */
  --line-soft:    rgba(64,64,64,0.12);
  --ink:          #1a1a1a;     /* primary text */
  --subink:       #5c5c5c;     /* secondary text */
  --muted:        #8a8a86;     /* tertiary */

  /* 메인 그레이 — 로고 베이스 #B8B8B8 (사장님 지정) */
  --gray-50:      #f5f5f5;
  --gray-100:     #ebebeb;
  --gray-200:     #d4d4d4;
  --gray-300:     #b8b8b8;     /* ★ 브랜드 메인 (로고 톤) */
  --gray-400:     #8a8a8a;
  --gray-500:     #5c5c5c;
  --gray-700:     #3a3a3a;
  --gray-900:     #2a2a2a;

  /* Accent — 제품 패키지에서 자연 추출 */
  --mint:         #c8d5cf;     /* STMX 패키지 톤 */
  --mint-deep:    #9bb3a8;
  --pink:         #f4d9d9;     /* Glow UV 선스크린 톤 */
  --pink-deep:    #d4a8a8;

  /* 호환 alias */
  --accent:       var(--gray-300);
  --accent-deep:  var(--gray-500);
  --accent-bright:var(--gray-200);

  /* Status */
  --success:      #4a6b3e;
  --danger:       #a04141;

  /* ─── Typography ─── */
  --font-serif:   'Cormorant Garamond', 'Noto Serif KR', Georgia, serif;
  --font-sans:    'Pretendard Variable', 'Pretendard', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ─── Spacing ─── */
  --container:    1440px;
  --pad-x:        clamp(20px, 5vw, 80px);
  --gap-section:  clamp(64px, 10vw, 160px);

  /* ─── Motion ─── */
  --ease-out:     cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:     200ms;
  --dur-base:     400ms;
  --dur-slow:     800ms;
}

/* ─── Reset (minimal) ─── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; }