/* ==========================================================================
   totalclean site-v2 — tokens.css
   디자인 토큰 + 리셋 + 기본 타이포그래피
   새 팔레트(차콜 + 민트 + 선명한 앰버)와 실용적인 에디토리얼 레이아웃입니다.
   ========================================================================== */

:root {
  /* color — 네이비 잉크(brand) + 클레이 코럴(accent) */
  --c-canvas: #f2f5f4;
  --c-surface: #ffffff;
  --c-surface-alt: #e6efec;
  --c-brand-900: #102a2a;
  --c-brand-800: #16413d;
  --c-brand-700: #19766a;
  --c-brand-600: #248f80;
  --c-brand-500: #53b6a3;
  --c-brand-100: #d3eee7;
  --c-accent: #d97706;
  --c-accent-soft: #fff0d5;
  --c-ink: #142525;
  --c-body: #405452;
  --c-muted: #566966;
  --c-line: #c8d7d3;
  --c-line-strong: #6e918a;
  --c-on-dark: #f7fffd;
  --c-on-dark-muted: #c5ded8;
  --c-focus: #d97706;

  /* typography */
  --font-display: "IBM Plex Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-body: "IBM Plex Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 19px;
  --fs-xl: 22px;
  --fs-2xl: 27px;
  --fs-3xl: 34px;
  --fs-4xl: 42px;
  --fs-display: clamp(34px, 4.6vw, 58px);
  --lh-tight: 1.18;
  --lh-snug: 1.4;
  --lh-normal: 1.62;
  --lh-relaxed: 1.85;
  --ls-tight: -0.02em;
  --ls-display: -0.035em;
  --ls-wide: 0.16em;

  /* space — 8px 그리드 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;
  --section-y: 88px;
  --shell: 1200px;
  --gutter: 24px;

  /* radius */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(16, 42, 42, 0.06), 0 8px 18px rgba(16, 42, 42, 0.05);
  --shadow-md: 0 16px 36px rgba(16, 42, 42, 0.11);
  --shadow-lg: 0 26px 70px rgba(16, 42, 42, 0.16);

  /* motion */
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  --border: 1px solid var(--c-line);
}

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

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

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--c-brand-600);
  text-decoration: none;
}

a:hover {
  color: var(--c-brand-800);
  text-decoration: underline;
  text-underline-offset: 3px;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--c-brand-100);
  color: var(--c-brand-900);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--c-brand-800);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
  color: #fff;
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}