/* ==========================================================================
   style-ui.css — 롯데멤버스 회사 홈페이지 단일 스타일 파일
   ---------------------------------------------------------------------- */

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Black.ttf") format("truetype"),
    url("../fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Cafe24 Ssurround";
  src: url("../fonts/Cafe24Ssurround.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* COLOR */
  --color-brand-red: #e30413;
  --color-brand-red-solid: #fb1822;
  --color-brand-red-weak: #fff0f1;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-dim-black-80: rgba(0, 0, 0, 0.8);
  --color-dim-black-50: rgba(0, 0, 0, 0.5);
  --color-dim-black-30: rgba(0, 0, 0, 0.3);
  --color-dim-black-20: rgba(0, 0, 0, 0.2);
  --color-dim-black-10: rgba(0, 0, 0, 0.1);
  --color-dim-white-80: rgba(255, 255, 255, 0.8);
  --color-dim-white-50: rgba(255, 255, 255, 0.5);
  --color-dim-white-30: rgba(255, 255, 255, 0.3);
  --color-dim-white-20: rgba(255, 255, 255, 0.2);
  --color-dim-white-10: rgba(255, 255, 255, 0.1);
  --color-bg-gray: #f2f4f6;
  --color-border-black: rgba(0, 27, 55, 0.1);
  --color-border-white: rgba(255, 255, 255, 0.08);
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f2f4f6;
  --color-neutral-200: #e5e8eb;
  --color-neutral-300: #d1d6db;
  --color-neutral-400: #b0b8c1;
  --color-neutral-500: #8b95a1;
  --color-neutral-600: #6b7684;
  --color-neutral-700: #4e5968;
  --color-neutral-800: #222222;  
  --color-neutral-900: #191f28;
  --color-red-50: #ffeeee;
  --color-red-100: #ffd4d6;
  --color-red-200: #feafb4;
  --color-red-300: #fb8890;
  --color-red-400: #f66570;
  --color-red-500: #f04452;
  --color-red-600: #e42939;
  --color-red-700: #d22030;
  --color-red-800: #bc182a;
  --color-red-900: #a51926;
  --color-orange-50: #fff3e0;
  --color-orange-100: #ffe0b0;
  --color-orange-200: #ffcd80;
  --color-orange-300: #ffbd51;
  --color-orange-400: #ffa927;
  --color-orange-500: #fe9800;
  --color-orange-600: #fb8800;
  --color-orange-700: #f57800;
  --color-orange-800: #ed6700;
  --color-orange-900: #e45600;
  --color-yellow-50: #fff9e7;
  --color-yellow-100: #ffefbf;
  --color-yellow-200: #ffe69b;
  --color-yellow-300: #ffdd78;
  --color-yellow-400: #ffd158;
  --color-yellow-500: #ffc342;
  --color-yellow-600: #ffb331;
  --color-yellow-700: #faa131;
  --color-yellow-800: #eebf11;
  --color-yellow-900: #dd7d02;
  --color-light-green-50: #f1f8e9;
  --color-light-green-100: #ddeec9;
  --color-light-green-200: #c5e1a6;
  --color-light-green-300: #aed581;
  --color-light-green-400: #9ccc66;
  --color-light-green-500: #8cc44a;
  --color-light-green-600: #7db343;
  --color-light-green-700: #689f38;
  --color-light-green-800: #558b2f;
  --color-light-green-900: #33691e;
  --color-green-50: #f0faf6;
  --color-green-100: #aeefd5;
  --color-green-200: #76e4b8;
  --color-green-300: #3fd599;
  --color-green-400: #15c47e;
  --color-green-500: #03b26c;
  --color-green-600: #02a262;
  --color-green-700: #029359;
  --color-green-800: #028450;
  --color-green-900: #027648;
  --color-mint-50: #edf8f8;
  --color-mint-100: #bce9e9;
  --color-mint-200: #89d8d8;
  --color-mint-300: #58c7c7;
  --color-mint-400: #30b6b6;
  --color-mint-500: #18a5a5;
  --color-mint-600: #109595;
  --color-mint-700: #0c8585;
  --color-mint-800: #097575;
  --color-mint-900: #076565;
  --color-light-blue-50: #eff9ff;
  --color-light-blue-100: #def1ff;
  --color-light-blue-200: #b6e5ff;
  --color-light-blue-300: #75d3ff;
  --color-light-blue-400: #45c5ff;
  --color-light-blue-500: #00a3f5;
  --color-light-blue-600: #0083d4;
  --color-light-blue-700: #007cc0;
  --color-light-blue-800: #006bad;
  --color-light-blue-900: #00588d;
  --color-blue-50: #e8f3ff;
  --color-blue-100: #c9e2ff;
  --color-blue-200: #90c2ff;
  --color-blue-300: #64a8ff;
  --color-blue-400: #4593fc;
  --color-blue-500: #3182f6;
  --color-blue-600: #2272eb;
  --color-blue-700: #1b64da;
  --color-blue-800: #1957c2;
  --color-blue-900: #194aa6;
  --color-purple-50: #f9f0fc;
  --color-purple-100: #edccf8;
  --color-purple-200: #da9bef;
  --color-purple-300: #c770e4;
  --color-purple-400: #b44bd7;
  --color-purple-500: #a234c7;
  --color-purple-600: #9128b4;
  --color-purple-700: #8222a2;
  --color-purple-800: #73228e;
  --color-purple-900: #65237b;
  --color-deep-purple-50: #f0eafe;
  --color-deep-purple-100: #d7c8fb;
  --color-deep-purple-200: #bda4f7;
  --color-deep-purple-300: #a17df5;
  --color-deep-purple-400: #8a5ff2;
  --color-deep-purple-500: #7242ea;
  --color-deep-purple-600: #663de3;
  --color-deep-purple-700: #5734d8;
  --color-deep-purple-800: #472fd0;
  --color-deep-purple-900: #2c23c1;
  --color-magenta-50: #fee2ed;
  --color-magenta-100: #fab4d3;
  --color-magenta-200: #f881b6;
  --color-magenta-300: #f84397;
  --color-magenta-400: #f12b87;
  --color-magenta-500: #f30064;
  --color-magenta-600: #e10063;
  --color-magenta-700: #ca005d;
  --color-magenta-800: #b4005b;
  --color-magenta-900: #8e0054;
  --color-warm-gray-50: #fafafa;
  --color-warm-gray-100: #f5f5f5;
  --color-warm-gray-200: #eeeeee;
  --color-warm-gray-300: #e0e0e0;
  --color-warm-gray-400: #bdbdbd;
  --color-warm-gray-500: #9e9e9e;
  --color-warm-gray-600: #757575;
  --color-warm-gray-700: #616161;
  --color-warm-gray-800: #424242;
  --color-warm-gray-900: #212121;

  --bg: var(--color-white);
  --bg-subtle: var(--color-neutral-100);
  --bg-muted: var(--color-neutral-100);
  --bg-inverse: var(--color-neutral-900);
  --text: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-muted: var(--color-neutral-500);
  --text-inverse: var(--color-white);
  --text-brand: var(--color-brand-red);
  --border: var(--color-neutral-200);
  --border-strong: var(--color-neutral-300);
  --focus-ring: var(--color-brand-red);

  /* SPACING */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  /* RADIUS */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-40: 40px;
  --radius-full: 9999px;

  --bp-sm: 40rem;
  --bp-lg: 64rem;

  /* LAYOUT */
  --container: 1440px;
  --container-wide: 1440px;
  --header-w: min(var(--container-wide), 80vw);
  --container-text: 720px;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --header-h: clamp(60px, 2.2321vw + 37.14px, 80px);
  --logo-w: clamp(160px, 3.5714vw + 123.43px, 192px);
  --gnb-list-gap: clamp(14px, 0.6696vw + 7.15px, 20px);
  --gnb-pad-x: clamp(20px, 1.5625vw + 4px, 34px);
  --section-y: clamp(3.5rem, 2rem + 6.5vw, 7.5rem);

  /* ELEVATION */
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow-md: 0 4px 8px -2px rgb(16 24 40 / 0.08), 0 2px 4px -2px rgb(16 24 40 / 0.05);
  --shadow-lg: 0 12px 24px -6px rgb(16 24 40 / 0.1), 0 4px 8px -4px rgb(16 24 40 / 0.05);
  --shadow-xl: 0 24px 48px -12px rgb(16 24 40 / 0.16);

  /* MOTION */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* Z-INDEX */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  --font-family-base: "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-size-display-1: 3.75rem;
  --font-size-display-2: 3rem;
  --font-size-display-3: 2.5rem;
  --line-height-display: 1.3;
  --letter-spacing-display-1: -0.075rem;
  --letter-spacing-display: 0;
  --font-size-title-1: 2.5rem;
  --font-size-title-2: 2rem;
  --font-size-title-3: 1.75rem;
  --font-size-title-4: 1.5rem;
  --font-size-title-5: 1.25rem;
  --line-height-title: 1.4;
  --letter-spacing-title: 0;
  --letter-spacing-tight: -0.02em;
  --font-size-body-1: 1.25rem;
  --font-size-body-2: 1.125rem;
  --font-size-body-3: 1rem;
  --font-size-body-4: 0.875rem;
  --font-size-body-5: 0.75rem;
  --line-height-body-1: 1.5;
  --line-height-body-2: 1.6;
  --line-height-body-3: 1.6;
  --line-height-body-4: 1.6;
  --line-height-body-5: 1.5;
  --letter-spacing-body: 0;
  --font-size-caption-1: 2.5rem;
  --font-size-caption-2: 1.5rem;
  --font-size-caption-3: 1.25rem;
  --font-size-caption-4: 1.125rem;
  --font-size-caption-5: 1rem;
  --font-size-caption-6: 0.875rem;
  --font-size-caption-7: 0.75rem;
  --line-height-caption: 1;
  --letter-spacing-caption: 0;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  background: var(--color-white);
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  touch-action: manipulation;
}
html:focus-within { scroll-behavior: smooth; }
:target { scroll-margin-top: calc(var(--header-h) + var(--space-24)); }

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-regular);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }

/* ==========================================================================
   요소 기본 타이포그래피
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-tight);
  font-weight: var(--font-weight-bold);
  text-wrap: balance;
}
h1 { font-size: var(--font-size-title-1); }
h2 { font-size: var(--font-size-title-2); }
h3 { font-size: var(--font-size-title-3); }
h4 { font-size: var(--font-size-title-4); font-weight: var(--font-weight-semibold); }
h5 { font-size: var(--font-size-title-5); font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--font-size-body-2); font-weight: var(--font-weight-semibold); }

p { text-wrap: pretty; }

a {
  color: var(--text-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dur-fast) var(--ease-out);
}

strong, b { font-weight: var(--font-weight-semibold); }

.numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.t-lead { font-size: var(--font-size-body-1); line-height: var(--line-height-body-2); color: var(--text-secondary); }
.t-muted { color: var(--text-muted); }
.t-secondary { color: var(--text-secondary); }
.eyebrow {
  display: inline-block;
  font-size: var(--font-size-body-3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body-3);
  color: var(--color-brand-red-solid);
}

/* ==========================================================================
   TYPOGRAPHY 유틸리티 클래스
   ========================================================================== */
.text-display-1,
.text-display-2,
.text-display-3,
.text-title-1,
.text-title-2,
.text-title-3,
.text-title-4,
.text-title-5,
.text-body-1,
.text-body-2,
.text-body-3,
.text-body-4,
.text-body-5,
.text-caption-1,
.text-caption-2,
.text-caption-3,
.text-caption-4,
.text-caption-5,
.text-caption-6,
.text-caption-7 {
  font-family: var(--font-family-base);
  margin: 0;
}

.text-display-1 {
  font-size: var(--font-size-display-1);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display-1);
  font-weight: var(--font-weight-bold);
}
.text-display-2 {
  font-size: var(--font-size-display-2);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  font-weight: var(--font-weight-bold);
}
.text-display-3 {
  font-size: var(--font-size-display-3);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  font-weight: var(--font-weight-bold);
}

.text-title-1 {
  font-size: var(--font-size-title-1);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
  font-weight: var(--font-weight-semibold);
}
.text-title-2 {
  font-size: var(--font-size-title-2);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
  font-weight: var(--font-weight-semibold);
}
.text-title-3 {
  font-size: var(--font-size-title-3);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
  font-weight: var(--font-weight-semibold);
}
.text-title-4 {
  font-size: var(--font-size-title-4);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
  font-weight: var(--font-weight-semibold);
}
.text-title-5 {
  font-size: var(--font-size-title-5);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
  font-weight: var(--font-weight-semibold);
}

.text-body-1 {
  font-size: var(--font-size-body-1);
  line-height: var(--line-height-body-1);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-regular);
}
.text-body-2 {
  font-size: var(--font-size-body-2);
  line-height: var(--line-height-body-2);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-regular);
}
.text-body-3 {
  font-size: var(--font-size-body-3);
  line-height: var(--line-height-body-3);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-regular);
}
.text-body-4 {
  font-size: var(--font-size-body-4);
  line-height: var(--line-height-body-4);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-regular);
}
.text-body-5 {
  font-size: var(--font-size-body-5);
  line-height: var(--line-height-body-5);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-regular);
}

.text-caption-1 {
  font-size: var(--font-size-caption-1);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  font-weight: var(--font-weight-bold);
}
.text-caption-2 {
  font-size: var(--font-size-caption-2);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  font-weight: var(--font-weight-semibold);
}
.text-caption-3 {
  font-size: var(--font-size-caption-3);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  font-weight: var(--font-weight-semibold);
}
.text-caption-4 {
  font-size: var(--font-size-caption-4);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  font-weight: var(--font-weight-semibold);
}
.text-caption-5 {
  font-size: var(--font-size-caption-5);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  font-weight: var(--font-weight-medium);
}
.text-caption-6 {
  font-size: var(--font-size-caption-6);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  font-weight: var(--font-weight-medium);
}
.text-caption-7 {
  font-size: var(--font-size-caption-7);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  font-weight: var(--font-weight-medium);
}

/* 굵기 오버라이드 */
.fw-bold { font-weight: var(--font-weight-bold); }
.fw-semibold { font-weight: var(--font-weight-semibold); }
.fw-medium { font-weight: var(--font-weight-medium); }
.fw-regular { font-weight: var(--font-weight-regular); }

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--bg-inverse);
  outline-offset: 1px;
  border-radius: var(--radius-6);
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: var(--z-toast);
  padding: var(--space-12) var(--space-24);
  background: var(--color-brand-red);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-8);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-16)));
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); box-shadow: var(--shadow-lg); }
#main { scroll-margin-top: var(--header-h); }
#main:focus { outline: none; }

/* [Mod] 261020  */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *:not(.history-stage__img), *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  *:not(.slide-up, [data-reveal], .scroll-fill__char, .age-bar__bar, .age-bar__value, .home-stats__chart-line, .home-stats__chart-dot, .home-stats__chart-val, .home-stats__chart-peak, .home-card, .char-slide, .main-visual__video, .main-visual__copy), *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --border: var(--color-neutral-500); --border-strong: var(--color-neutral-700); }
}

/* ==========================================================================
   LAYOUT 프리미티브
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--header-w);
  margin-inline: auto;
}
.container--text { max-width: min(var(--container-text), var(--header-w)); }

.section { padding-block: var(--section-y); }
.section--subtle { background: var(--bg-subtle); }

.stack > * + * { margin-top: var(--flow, var(--space-16)); }
.stack--sm { --flow: var(--space-8); }
.stack--lg { --flow: var(--space-32); }
.stack--xl { --flow: var(--space-48); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap, var(--space-16));
}

.grid-auto {
  display: grid;
  gap: var(--gap, var(--space-24));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 17rem), 100%), 1fr));
}

.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

ul.dot-list { list-style: none; margin: 0; padding: 0 0 0 24px; }
ul.dot-list > li { position: relative; }
ul.dot-list > li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: calc(0.5lh - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-neutral-900);
}

/* ==========================================================================
   INTERACTION 기반
   ========================================================================== */
.js-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-enabled [data-reveal].is-revealed { opacity: 1; transform: none; }

/* [Mod] 261020 모션 B안 — 스크롤로 작동하는 모션은 OS 애니메이션 끄기 설정과 무관하게 실행 (reduce 예외 규칙 삭제) */

.js-enabled .slide-up {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: var(--slide-up-delay, 0ms);
}
.js-enabled .slide-up.is-in-view { opacity: 1; transform: translate(0, 0); }

.no-anim, .no-anim *, .no-anim *::before, .no-anim *::after {
  transition: none !important;
  animation: none !important;
}

/* [Mod] 261020 모션 B안 — 스크롤로 작동하는 모션은 OS 애니메이션 끄기 설정과 무관하게 실행 (reduce 예외 규칙 삭제) */

/* ==========================================================================
   DIVIDER
   ========================================================================== */
.divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-16) 0;
}
.divider--strong { border-top-color: var(--color-neutral-900); }
.divider--thick { border-top-width: 2px; border-top-color: var(--color-black); }
.divider--vertical {
  border-top: 0;
  border-left: 1px solid var(--border);
  align-self: stretch;
  margin: 0 var(--space-16);
}
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-16) 0;
}

/* ==========================================================================
   COMPONENTS — 전역 (2개 이상 페이지에서 쓰는 것만)
   ========================================================================== */

.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-white);
}
.site-header__inner {
  max-width: var(--header-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  height: var(--header-h);
}
.site-header__logo img { display: block; width: var(--logo-w); height: auto; aspect-ratio: 192 / 32; }
.site-header__logo {
  display: inline-flex;
  align-items: center;
  color: var(--color-brand-red);
  font-weight: var(--font-weight-bold);
}
.gnb { display: flex; align-items: center; gap: 0; }

.gnb__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-h);  
  font-size: clamp(15px, 0.3348vw + 11.57px, 18px);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-caption);  
  color: var(--color-neutral-900);
  text-decoration: none;
  border: 0;
  background: none;
  padding: 0 var(--gnb-pad-x);
  cursor: pointer;
}
.gnb__link[aria-current="page"] { color: var(--color-brand-red-solid); text-align: center; }
.gnb__panel { display: block; }
.gnb__panel-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24) 0 var(--space-32);
  max-width: var(--header-w);
  margin-inline: auto;
}
.gnb__panel-heading {
  margin: var(--space-8) 0 0;
  font-size: clamp(24px, 1.6667vw, 32px);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-title);
  color: var(--color-neutral-900);
  letter-spacing: -0.04em;
  max-width: 648px;
}
.gnb__panel-links,
.gnb__panel-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gnb-list-gap);
}
.gnb__panel-links a,
.gnb__panel-group-title {
  font-size: clamp(15px, 0.8333vw, 16px);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-900);
  text-decoration: none;
}
.gnb__panel-sublist a {
  font-size: clamp(14px, 0.2232vw + 11.72px, 16px);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body-4);
  color: var(--color-neutral-600);
  text-decoration: none;
}
.gnb__panel-group-title { margin: 0 0 var(--gnb-list-gap); }
.gnb__panel-group-title a, .site-menu__subcat a { color: inherit; text-decoration: none; }
.site-menu__subcat a:hover { color: var(--color-brand-red); }
.gnb__panel-groups { display: flex; flex-direction: column; gap: var(--gnb-list-gap); }

@media (min-width: 64rem) {
  .gnb__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
  }

  .gnb.gnb--open .gnb__panel,
  .gnb:has(.gnb__link[data-gnb-panel]:focus-visible) .gnb__panel,
  .gnb:has(.gnb__link[aria-expanded="true"]) .gnb__panel,
  .gnb__panel:hover {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .gnb__link[data-gnb-panel] { position: relative; }
  .gnb__link[data-gnb-panel]::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto;
    height: var(--space-12);
  }

  .gnb__panel-inner { display: none; }
  .gnb__panel[data-active="about"] .gnb__panel-inner[data-gnb-view="about"],
  .gnb__panel[data-active="services"] .gnb__panel-inner[data-gnb-view="services"],
  .gnb__panel[data-active="business"] .gnb__panel-inner[data-gnb-view="business"],
  .gnb:has(.gnb__link[data-gnb-panel="about"]:focus-visible) .gnb__panel-inner[data-gnb-view="about"],
  .gnb:has(.gnb__link[data-gnb-panel="services"]:focus-visible) .gnb__panel-inner[data-gnb-view="services"],
  .gnb:has(.gnb__link[data-gnb-panel="business"]:focus-visible) .gnb__panel-inner[data-gnb-view="business"],
  .gnb:has(.gnb__link[data-gnb-panel="about"][aria-expanded="true"]) .gnb__panel-inner[data-gnb-view="about"],
  .gnb:has(.gnb__link[data-gnb-panel="services"][aria-expanded="true"]) .gnb__panel-inner[data-gnb-view="services"],
  .gnb:has(.gnb__link[data-gnb-panel="business"][aria-expanded="true"]) .gnb__panel-inner[data-gnb-view="business"] {
    display: block;
  }

  .gnb__panel-inner {
    position: relative;
    max-width: var(--header-w);
    margin-inline: auto;
    min-height: clamp(360px, 9.8214vw + 259.43px, 448px);
    padding: 0;
  }
  .gnb__panel-intro {
    position: absolute;
    top: var(--space-28);
  }
  .gnb__panel-inner > .gnb__panel-links,
  .gnb__panel-inner > .gnb__panel-groups {
    position: absolute;
    top: var(--space-28);
    left: clamp(var(--gutter), var(--gnb-links-x, 50%), calc(100% - 18rem));
  }
  .gnb__panel-groups { flex-direction: column; gap: var(--gnb-list-gap); }
  .gnb__panel-sublist {
    display: grid;
    grid-template-columns: repeat(2, minmax(9rem, 1fr));
    gap: var(--gnb-list-gap) clamp(24px, 1.7857vw + 5.71px, 40px);
  }

  .gnb__panel-inner li,
  .gnb__panel-inner .gnb__panel-group {
    opacity: 0;
    animation: gnb-row-in 420ms var(--ease-out) both;
    animation-delay: var(--row-delay, 0ms);
  }
  .gnb__panel-links li:nth-child(1), .gnb__panel-sublist li:nth-child(1) { --row-delay: 0ms; }
  .gnb__panel-links li:nth-child(2), .gnb__panel-sublist li:nth-child(2) { --row-delay: 70ms; }
  .gnb__panel-links li:nth-child(3), .gnb__panel-sublist li:nth-child(3) { --row-delay: 140ms; }
  .gnb__panel-links li:nth-child(4), .gnb__panel-sublist li:nth-child(4) { --row-delay: 210ms; }
  .gnb__panel-links li:nth-child(5), .gnb__panel-sublist li:nth-child(5) { --row-delay: 280ms; }
  .gnb__panel-links li:nth-child(6), .gnb__panel-sublist li:nth-child(6) { --row-delay: 350ms; }
  .gnb__panel-sublist li:nth-child(7) { --row-delay: 420ms; }
  .gnb__panel-sublist li:nth-child(8) { --row-delay: 490ms; }

  @keyframes gnb-row-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (min-width: 64rem) and (prefers-reduced-motion: reduce) {
  .gnb__panel-inner li,
  .gnb__panel-inner .gnb__panel-group {
    opacity: 1;
    animation: none !important;
    transform: none;
  }
}

.site-header__toggle,
.site-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--color-neutral-900);
  cursor: pointer;
}
.gnb .site-header__toggle,
.site-menu__close {
  width: auto;
  height: var(--header-h);
  padding: 0 var(--gnb-pad-x);
}

.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear, width var(--dur-base) var(--ease-out);
}
.site-header__toggle-icon { position: relative; }
.site-header__toggle-icon::before { position: absolute; left: 0; top: -7px; }
.site-header__toggle-icon::after  { position: absolute; left: 0; top: 7px; width: 15px; }
.site-header__toggle:hover .site-header__toggle-icon::after { width: 22px; }
/* 열림 상태 → X */
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon { background: transparent; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::before { transform: translateY(7px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::after  { width: 22px; transform: translateY(-7px) rotate(-45deg); }

/* 전체메뉴 오버레이 */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--color-white);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.site-menu[data-open] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--dur-base) var(--ease-out);
}
.site-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  max-width: var(--header-w);
  margin-inline: auto;
  height: var(--header-h);
}
/* X 아이콘 (교차 2줄) */
.site-menu__close-icon { position: relative; display: block; width: 22px; height: 2px; }
.site-menu__close-icon::before,
.site-menu__close-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.site-menu__close-icon::before { transform: rotate(45deg); }
.site-menu__close-icon::after  { transform: rotate(-45deg); }
.site-menu__close:hover .site-menu__close-icon { transform: rotate(90deg); transition: transform var(--dur-base) var(--ease-out); }

.site-menu__body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-40);
  max-width: var(--header-w);
  margin-inline: auto;
  padding-block: clamp(24px, 2.19vw + 6px, 48px);
}
.site-menu__cat {
  margin: 0 0 var(--space-24);
  font-size: var(--font-size-title-4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-neutral-900);
}
.site-menu__cat a { color: inherit; text-decoration: none; }
/* [Mod] 261019 hover 컬러 #FB1822 */
.site-menu__cat a:hover { color: var(--color-brand-red-solid); }
.site-menu__list {
  list-style: none;
  margin: 0 0 var(--space-20);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.site-menu__list a {
  font-size: var(--font-size-body-3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body-3);
  color: var(--color-neutral-900);
  text-decoration: none;
}
/* [Mod] 261019 site-menu__list a hover 컬러 변경 없음(hover 규칙 삭제) */
.site-menu__subcat {
  margin: 0 0 var(--space-20);
  font-size: var(--font-size-body-3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
}
.site-menu__list--sub a {
  font-size: clamp(14px, 0.2232vw + 11.72px, 16px);
  color: var(--color-neutral-600);
}
.site-menu__cat-btn,
.site-menu__col--home { display: none; }

.site-menu__col { opacity: 0; }
.site-menu[data-open] .site-menu__col {
  animation: site-menu-col-in var(--dur-slow) var(--ease-out) both;
}
.site-menu[data-open] .site-menu__col:nth-child(2) { animation-delay: 60ms; }
.site-menu[data-open] .site-menu__col:nth-child(3) { animation-delay: 120ms; }
.site-menu[data-open] .site-menu__col:nth-child(4) { animation-delay: 180ms; }
.site-menu[data-open] .site-menu__col:nth-child(5) { animation-delay: 240ms; }
.site-menu[data-open] .site-menu__col:nth-child(6) { animation-delay: 300ms; }
@keyframes site-menu-col-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__toggle-icon,
  .site-header__toggle-icon::before,
  .site-header__toggle-icon::after,
  .site-menu,
  .site-menu__col { transition: none; animation: none; }
  .site-menu__col { opacity: 1; transform: none; }
}

@media (max-width: 63.99rem) {
  .gnb__link,
  .gnb__panel { display: none; }
  .gnb .site-header__toggle,
  .site-menu__close { padding: 0; }
  .gnb .site-header__toggle { margin-left: auto; }
  .site-menu__body { grid-template-columns: 1fr; gap: var(--space-32); padding: var(--space-32) var(--gutter) var(--space-40); }
}

.site-footer {
  background: var(--color-white);
  border-top: 1px solid var(--border);
  color: var(--color-neutral-600);
  font-size: var(--font-size-body-4);
  line-height: var(--line-height-body-4);
}
.site-footer__inner {
  max-width: var(--header-w);
  margin-inline: auto;
  padding-block: clamp(20px, 1.875vw + 4px, 40px) clamp(24px, 2.19vw + 6px, 48px);
  padding-inline: 0;
}
.site-footer__logo {
  display: inline-block;
  margin-bottom: clamp(16px, 0.8929vw + 6.86px, 24px);
}
.site-footer__logo img { display: block; width: var(--logo-w); height: auto; aspect-ratio: 192 / 32; }
.site-footer__utils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 0.2232vw + 7.71px, 12px);
  margin-bottom: clamp(12px, 0.4464vw + 7.43px, 16px);
}
.site-footer__utils :is(a, button) + :is(a, button)::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: clamp(12px, 0.4464vw + 7.43px, 16px);
  margin-right: clamp(10px, 0.2232vw + 7.71px, 12px);
  background: rgba(0, 27, 55, 0.10);
  vertical-align: middle;
}
.site-footer__utils :is(a, button) {
  color: #4E5968;
  font-family: var(--font-family-base);
  font-size: clamp(14px, 0.2232vw + 11.72px, 16px);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  text-decoration: none;
}
.site-footer__menu { padding: 0; border: 0; background: none; cursor: pointer; }
.site-footer__utils :is(a, button):first-child {
  color: #191F28;
  font-weight: var(--font-weight-bold);
}
.site-footer__biz {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: #4E5968;
  font-family: var(--font-family-base);
  font-size: clamp(12px, 0.2232vw + 9.72px, 14px);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}
.site-footer__biz a[x-apple-data-detectors],
.site-footer__biz a[href^="tel:"] { color: inherit; text-decoration: none; font: inherit; }
.site-footer__biz b {
  color: #4E5968;
  font-weight: var(--font-weight-semibold);
  margin-right: var(--space-6);
}
.site-footer__copyright {
  color: #8B95A1;
  font-family: var(--font-family-base);
  font-size: clamp(12px, 0.2232vw + 9.72px, 14px);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
}

/* ── 공통 "스크롤 채워짐" 인터랙션 (main.js 와 함께 동작) ───────────*/
.js-enabled .scroll-fill__char {
  color: var(--scroll-fill-color, #1a1a1a);
  color: color-mix(
    in srgb,
    var(--scroll-fill-color, #1a1a1a) clamp(0%, calc((var(--scroll-fill-progress, 0) * var(--scroll-fill-total, 1) - var(--ci, 0)) * 100%), 100%),
    #aaaaaa
  );
}
/* [Mod] 261020 모션 B안 — 스크롤로 작동하는 모션은 OS 애니메이션 끄기 설정과 무관하게 실행 (reduce 예외 규칙 삭제) */

/* ==========================================================================
   MOBILE (max-width: 63.99rem) — 모바일 시안(360 기준) 공통 레이아웃
   ========================================================================== */
@media (max-width: 63.99rem) {
  :root { --header-h: 60px; --m-gutter: min(5.5556vw, 40px); }
  :root { --m-header-gutter: var(--m-gutter); }

  .container,
  .container--text { max-width: none; padding-inline: var(--m-gutter); }

  .site-footer__inner { max-width: none; padding-inline: var(--m-gutter); }
  .site-header__inner,
  .site-menu__bar { max-width: none; padding-inline: var(--m-header-gutter); }
  .site-header__inner { gap: var(--space-16); }
  :root { --logo-w: clamp(168px, 3.6199vw + 154.97px, 192px); }
  .gnb .site-header__toggle,
  .site-menu__close { width: 40px; height: 40px; padding: 0; margin-right: -8px; }

  .site-menu { --sm-px: min(0.27778vw, 0.050277vw + 0.8189px); }
  .site-menu__body { display: block; max-width: none; padding: 0 var(--m-header-gutter) calc(48 * var(--sm-px)); }
  .site-menu__col { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
  .site-menu__col--home { display: block; }
  .site-menu__cat { margin: 0; font-size: calc(18 * var(--sm-px)); font-weight: var(--font-weight-bold); line-height: 1.5; letter-spacing: -0.01em; color: #333; }
  .site-menu__cat a,
  .site-menu__cat-btn {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: calc(44 * var(--sm-px));
    padding-block: calc(12 * var(--sm-px));
    box-sizing: content-box;
  }
  .site-menu__cat a:hover { color: inherit; }
  .site-menu__cat-btn {
    justify-content: space-between;
    gap: var(--space-16);
    padding-inline: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .site-menu__cat-btn::after {
    content: "";
    flex: none;
    width: calc(24 * var(--sm-px));
    height: calc(24 * var(--sm-px));
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .site-menu__cat-btn[aria-expanded="true"]::after { transform: rotate(180deg); }
  .js-enabled .site-menu__cat-link { display: none; }
  .js-enabled .site-menu__cat-btn { display: flex; }
  .js-enabled .site-menu__col:not(.is-open) .site-menu__group { display: none; }
  .site-menu__group { padding-bottom: calc(28 * var(--sm-px)); }

  .site-menu__list,
  .site-menu__list--sub { gap: 0; margin: 0; }
  .site-menu__list a,
  .site-menu__subcat a {
    display: block;
    padding-block: calc(10 * var(--sm-px));
    font-size: calc(16 * var(--sm-px));
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: #666;
  }
  .site-menu__list a:hover,
  .site-menu__subcat a:hover { color: #666; }
  .site-menu__subcat { margin: 0; }
  .site-menu .site-menu__list--sub {
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding-left: calc(6 * var(--sm-px));   /* [Mod] 261019 들여쓰기 축소 360: 12 → 6 */
  }
  .site-menu__list--sub a { font-size: calc(16 * var(--sm-px)); min-height: calc(24 * var(--sm-px)); box-sizing: content-box; }
  /* [Mod] 261019 360 미만 화면: 하위 메뉴 자간 축소(-0.01em → -0.05em) */
  @media (max-width: 359.98px) {
    .site-menu .site-menu__list--sub a { letter-spacing: -0.05em; }
  }

  .site-footer__inner { --ft-s: min(0.27778vw, 0.050277vw + 0.8189px); padding-block: calc(28 * var(--ft-s)) calc(36 * var(--ft-s)); }
  .site-footer__logo { margin-bottom: var(--space-20); }
  .site-footer__utils { margin-bottom: var(--space-16); }
  .site-footer__utils :is(a, button) { font-size: min(4.4444vw, 0.8044vw + 13.11px); }
  .site-footer__utils :is(a, button) + :is(a, button)::before { height: 12px; }
  .site-footer__biz,
  .site-footer__copyright { font-size: min(3.8889vw, 0.7039vw + 11.46px); }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .container, .container--text { max-width: 760px; }
  .site-header__inner,
  .site-footer__inner,
  .site-menu__bar,
  .site-menu__body { max-width: 760px; margin-inline: auto; }
}