/* ===========================================================
   HAEON GROUP — base.css
   Reset + design tokens
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--c-accent); color: #04100F; }

/* ---------- Type scale ---------- */
:root {
  /* 글씨 크기 — 2026-10 전체 확대(가독성 향상) */
  --text-xs:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --text-sm:   clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --text-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-xl:   clamp(1.625rem, 1.35rem + 1.2vw, 2.5rem);
  --text-2xl:  clamp(2.125rem, 1.45rem + 2.8vw, 3.75rem);
  --text-3xl:  clamp(2.625rem, 1.4rem + 4.4vw, 5rem);
  --text-hero: clamp(2.875rem, 1.1rem + 6.6vw, 6.75rem);

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;    --space-40: 10rem;

  --section-y: clamp(4.5rem, 8vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1280px;
  --maxw-narrow: 860px;

  /* ---------- Radius / elevation ---------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms; --dur: 320ms; --dur-slow: 620ms;

  /* ---------- Fonts ---------- */
  --font-body: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system,
               BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-display: 'Satoshi', 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

/* ===========================================================
   THEME — dark is the brand default
   =========================================================== */
:root, [data-theme='dark'] {
  --c-bg:            #07090A;
  --c-bg-deep:       #040506;
  --c-surface:       #0E1214;
  --c-surface-2:     #141A1D;
  --c-surface-3:     #1B2327;
  --c-border:        #222C30;
  --c-border-strong: #334247;

  --c-text:          #E9EFF1;
  --c-text-muted:    #8D9BA1;
  --c-text-faint:    #5E6C72;
  --c-text-invert:   #05100F;

  --c-accent:        #2FD8C3;
  --c-accent-soft:   #1B9E8E;
  --c-accent-deep:   #0C4E54;
  --c-accent-glow:   rgba(47, 216, 195, 0.16);
  --c-accent-line:   rgba(47, 216, 195, 0.34);

  --c-data-1: #2FD8C3; --c-data-2: #4D9BFF; --c-data-3: #BCE2E7;
  --c-data-4: #FFC553; --c-data-5: #A84B2F;

  --c-overlay:  rgba(4, 6, 7, 0.72);
  --c-glass:    rgba(14, 18, 20, 0.72);
  --c-hairline: rgba(233, 239, 241, 0.08);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.8);
  --shadow-md: 0 12px 32px -14px rgba(0, 0, 0, 0.7);
  --grad-accent: linear-gradient(120deg, #2FD8C3 0%, #4D9BFF 100%);
  --grad-fade:   linear-gradient(180deg, rgba(4,6,7,0) 0%, rgba(4,6,7,0.92) 78%, #07090A 100%);
  color-scheme: dark;
}

[data-theme='light'] {
  --c-bg:            #F7F6F2;
  --c-bg-deep:       #EFEEE9;
  --c-surface:       #FFFFFF;
  --c-surface-2:     #F3F2EE;
  --c-surface-3:     #E9E8E3;
  --c-border:        #DDDBD4;
  --c-border-strong: #BFBCB4;

  --c-text:          #191D1E;
  --c-text-muted:    #62696C;
  --c-text-faint:    #9AA0A2;
  --c-text-invert:   #FFFFFF;

  --c-accent:        #0B6F6E;
  --c-accent-soft:   #128C86;
  --c-accent-deep:   #0C4E54;
  --c-accent-glow:   rgba(11, 111, 110, 0.1);
  --c-accent-line:   rgba(11, 111, 110, 0.26);

  --c-overlay:  rgba(255, 255, 255, 0.78);
  --c-glass:    rgba(247, 246, 242, 0.82);
  --c-hairline: rgba(25, 29, 30, 0.09);
  --shadow-lg: 0 24px 56px -22px rgba(24, 30, 32, 0.28);
  --shadow-md: 0 10px 28px -16px rgba(24, 30, 32, 0.24);
  --grad-accent: linear-gradient(120deg, #0B6F6E 0%, #1F5FA8 100%);
  --grad-fade:   linear-gradient(180deg, rgba(247,246,242,0) 0%, rgba(247,246,242,0.9) 78%, #F7F6F2 100%);
  color-scheme: light;
}

/* ===========================================================
   Element defaults
   =========================================================== */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-bg);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.022em;
  word-break: keep-all;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); letter-spacing: -0.012em; }

:lang(ru) h1, :lang(ru) h2, :lang(ru) h3 { letter-spacing: -0.01em; }
:lang(ja), :lang(zh) { word-break: normal; line-break: strict; }

strong { font-weight: 600; color: var(--c-text); }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Utilities ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--maxw-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: var(--space-4); z-index: 999;
  background: var(--c-accent); color: var(--c-text-invert);
  padding: var(--space-3) var(--space-5); border-radius: var(--r-md); font-weight: 600;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }
.hairline { height: 1px; background: var(--c-hairline); border: 0; }
.text-muted { color: var(--c-text-muted); }
.text-accent { color: var(--c-accent); }
.nowrap { white-space: nowrap; }

/* hidden 속성은 어떤 display 값보다 우선 */
[hidden] { display: none !important; }