/* ============================================================
   AWZ Global — 전역 토큰/폰트/리셋 (FluentSnippets: "AWZ Global Styles")
   greenshift 글로벌 스타일 + Awesomic 클론 디자인 토큰
   ============================================================ */

/* ---- @font-face: DM Sans variable (SIL OFL) ---- */
@font-face {
  font-family: 'DM Sans';
  src: url('/wp-content/uploads/awesomic/assets/fonts/dm-sans-var.woff2') format('woff2-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/wp-content/uploads/awesomic/assets/fonts/dm-sans-var-italic.woff2') format('woff2-variations');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* -- Colors -- */
  --color-obsidian: #09090b;
  --color-graphite: #18181b;
  --color-slate: #27272a;
  --color-iron: #3f3f46;
  --color-steel: #52525b;
  --color-fog: #71717a;
  --color-ash: #a1a1aa;
  --color-mist: #d4d4d8;
  --color-cloud: #ececee;
  --color-paper: #f4f4f5;
  --color-snow: #ffffff;
  --color-ember: #ff5a00;
  --color-magenta-spark: #fe45e2;

  /* -- Surfaces -- */
  --surface-canvas: #ffffff;
  --surface-card: #ffffff;
  --surface-band: #f4f4f5;

  /* -- Typography -- */
  --font-sans: 'DM Sans', 'Cosmica', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-display: 64px;  --leading-display: 1.12;
  --text-heading-lg: 56px; --leading-heading-lg: 1.14;
  --text-heading: 40px;  --leading-heading: 1.28;
  --text-heading-sm: 28px; --leading-heading-sm: 1.3;
  --text-subheading: 20px; --leading-subheading: 1.4;
  --text-body-lg: 18px;  --leading-body-lg: 1.5;
  --text-body: 15px;     --leading-body: 1.5;
  --text-body-sm: 14px;  --leading-body-sm: 1.5;
  --text-small: 13px;    --leading-small: 1.45;
  --text-caption: 12px;  --leading-caption: 1.45;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* -- Spacing -- */
  --spacing-4: 4px;  --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px;
  --spacing-36: 36px; --spacing-40: 40px; --spacing-48: 48px; --spacing-64: 64px;
  --spacing-80: 80px; --spacing-120: 120px;
  --section-pad: 80px;
  --card-pad: 28px;

  /* -- Layout -- */
  --page-max-width: 1200px;
  --container-pad: 40px;
  --header-height: 70px;
  --band-inset: 8px;
  --band-radius: 40px;

  /* -- Radius -- */
  --radius-tag: 12px;
  --radius-button: 14px;
  --radius-input: 14px;
  --radius-card: 24px;
  --radius-card-lg: 28px;
  --radius-card-xl: 36px;
  --radius-pill: 10000px;

  /* -- Borders & shadows -- */
  --border-hairline: 1px solid var(--color-cloud);
  --shadow-btn-dark: inset 0 0.5px 0 0 rgba(255,255,255,.5), inset 0 9px 14px -5px rgba(117,123,133,.4), 0 0 0 1.5px rgb(44 46 52), 0 4px 6px 0 rgba(0,0,0,.14);
  --shadow-pill-inset: inset 0 1px 0 0 rgb(228 228 231);

  /* -- Motion tokens -- */
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --marquee-duration: 30s;
  --word-cycle: 10s;
  --drift-duration: 22s;
  --ellipse-duration: 7s;
  --spin-duration: 14s;
  --chevron-duration: 1.6s;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--fw-regular);
  color: var(--color-iron);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- 모바일 메뉴 (클론 미리보기에 없던 보완 구현) ---- */
@media (max-width: 1024px) {
  .site-header.menu-open .gnb {
    display: flex;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface-canvas);
    border-bottom: 1px solid var(--color-cloud);
    padding: 8px 16px 16px;
    gap: var(--spacing-4);
  }
  .site-header.menu-open .gnb__link {
    justify-content: space-between;
    padding: 12px;
    font-size: var(--text-body-lg);
    border-radius: var(--radius-button);
  }
  .site-header .hamburger { position: relative; z-index: 60; }
}