/* ============================================================
   FASSTO Robotics Design System v4 → v5
   - Professional Industrial + Editorial Grid
   - 다크 비중 증대, 섹션 배경 교차로 화이트 단조로움 해소
   - Pretendard (한글) + IBM Plex Mono (숫자·메타)
   - Tabler Icons(자체 호스팅), 절제된 reveal 애니메이션
   - v5: 산업 카드, 3-CTA 스택, YouTube 임베드, Numbers 8-셀 확장
   ============================================================ */

/* ── 자체 호스팅 웹폰트 (2026-08-21) ─────────────────────────
   외부 CDN @import 3개를 제거하고 assets/fonts/ 로 내재화.
   Pretendard v1.3.9 (OFL) — KS X 1001 완성형 2,350자 + 라틴 서브셋
   IBM Plex Mono (OFL) · Tabler Icons v3.31.0 (MIT) — 사용 중인 13종만
   ※ 아이콘을 새로 추가하려면 서브셋 폰트를 다시 만들어야 합니다.
   ──────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Pretendard-Regular.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Pretendard-Medium.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Pretendard-SemiBold.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Pretendard-Bold.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Pretendard-ExtraBold.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'tabler-icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/tabler-icons.subset.woff2') format('woff2');
}
.ti{font-family:"tabler-icons" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ti-arrows-maximize:before{content:"\ea28"}
.ti-bolt:before{content:"\ea38"}
.ti-building-skyscraper:before{content:"\ec39"}
.ti-building-store:before{content:"\ea4e"}
.ti-building-warehouse:before{content:"\ebe3"}
.ti-bulb:before{content:"\ea51"}
.ti-chart-dots-3:before{content:"\f098"}
.ti-flask:before{content:"\ebd2"}
.ti-packages:before{content:"\f2c9"}
.ti-rocket:before{content:"\ec45"}
.ti-route:before{content:"\eb17"}
.ti-ruler-measure:before{content:"\f291"}
.ti-users:before{content:"\ebf2"}

/* ── Root Tokens ─────────────────────────────────────────── */
:root {
  /* v5.5 — 3색 미니멀 원칙 (Charcoal / White / 찐초록) */
  /* Primary Colors (파스토 브랜드) — secondary/accent는 primary로 통합 */
  --primary-green: #02855B;
  --secondary-green: #02855B;   /* v5.5: primary로 통합 (구 #00C186) */
  --accent-teal: #02855B;       /* v5.5: primary로 통합 (구 #009CA6) */

  /* Grays & Neutrals — 토큰 흡수로 단순화 */
  --dark-base: #0B0B0B;     /* 헤드라인·강조 */
  --charcoal: #1F2937;      /* 본문 */
  --warm-gray: #F9FAFB;     /* v5.5: 차분한 라이트 BG로 변경 */
  --cool-gray: #F3F4F6;     /* v5.5: 차분한 라이트 BG로 변경 */
  --light-gray: #D2D6DB;
  --muted-text: #4B5563;    /* 캡션·sub */
  --muted-soft: #6B7280;    /* v5.5: muted-text 근접값으로 일원화 (구 #71788E) */
  --white: #FFFFFF;

  /* Semantic Colors — v5.5: 미사용이므로 정의만 유지(외부 참조 깨짐 방지) */
  --success: #02855B;
  --warning: #4B5563;
  --error: #1F2937;

  /* v5.5 — 섀도·보더: glow 제거, 1px 보더 위주로 단순화 */
  --shadow-card: 0 1px 2px rgba(11,11,11,.04);
  --shadow-card-hover: 0 0 0 1px var(--light-gray);  /* v5.5: 글로우 → 보더 강조 */
  --shadow-cta: none;                                /* v5.5: CTA 글로우 제거 */
  --border-soft: 1px solid rgba(11,11,11,.08);
  --border-strong: 1px solid rgba(11,11,11,.16);

  /* Utilities */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --container: 1320px;
  --gutter: 24px;

  /* Font stacks */
  --sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'Courier New', monospace;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--dark-base);
  background: var(--white);
  line-height: 1.7;
  font-feature-settings: "ss03", "ss04";
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--primary-green); }
ul, ol { list-style: none; padding: 0; margin: 0; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; margin: 0; }
p { margin: 0; }

/* ── Layout ────────────────────────────────────────────── */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 1024px) {
  .wrap { padding: 0 20px; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  align-items: stretch;
}
.grid12 > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.grid12 > div > .card,
.grid12 > div > .frame {
  width: 100%;
  height: 100%;
}
@media (max-width: 1024px) {
  .grid12 { gap: 20px; }
}
@media (max-width: 760px) {
  .grid12 { gap: 16px; grid-template-columns: 1fr; }
}

/* ── Section Frame ─────────────────────────────────────── */
.section {
  position: relative;
  padding: clamp(72px, 8vw, 112px) 0;
  background: var(--white);
  border-top: 1px solid var(--light-gray);
}
.section--alt {
  background: var(--warm-gray);
}
.section--dark {
  background: var(--dark-base);
  color: var(--white);
  border-top-color: rgba(255, 255, 255, 0.12);
}
.section--cool {
  background: var(--cool-gray);
}

@media (max-width: 760px) {
  .section { padding: 80px 0; }
  .hero { padding: 64px 0 48px; }
  .cta { padding: 80px 0; }
}

/* Section meta header (예: "01 / Approach") */
.meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 32px;
}
.meta__num {
  font-weight: 600;
  color: var(--charcoal);
}
.section--dark .meta__num {
  color: var(--white);
}
.meta__rule {
  flex: 0 0 48px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}
.meta__label {
  letter-spacing: 0.15em;
  font-size: 11px;
}
.meta__tag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-soft);
}
.section--dark .meta__label,
.section--dark .meta__tag {
  color: rgba(255, 255, 255, 0.6);
}

/* ── Typography Scale ──────────────────────────────────── */
h1 {
  font-size: clamp(48px, 8vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}
h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
h4 {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

/* Named heading classes — B2B 가독성 우선, 피로도 ↓ */
.h-display {
  font-size: clamp(48px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.h-section {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.h-sub {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}

/* Body text */
.lede {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--muted-text);
  max-width: 64ch;
  line-height: 1.7;
  margin: 0;
}
.body-large {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.65;
}

/* ── Header & Navigation ──────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--light-gray);
}
.header--scrolled {
  background: var(--white);
  border-bottom-color: #B0B5BB;
}
.header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dark-base);
  text-decoration: none;
  transition: opacity 0.2s var(--ease);
}
.brand:hover { opacity: 0.78; color: var(--dark-base); }
.brand__logo {
  height: 22px;
  width: auto;
  display: block;
}
.brand__sub {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-left: 10px;
  border-left: 1px solid var(--light-gray);
  line-height: 1;
  align-self: center;
}
@media (max-width: 480px) {
  .brand__logo { height: 19px; }
  .brand__sub { font-size: 10px; padding-left: 8px; }
}

.nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  position: relative;
  padding: 4px 0;
}
/* v6.6: underline pseudo는 CTA 제외 일반 nav 링크에만 (selector-level 차단으로 .nav__cta 모양 변형 방지) */
.nav a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--primary-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:not(.nav__cta):hover::after,
.nav a:not(.nav__cta).is-active::after {
  transform: scaleX(1);
}
/* v12.7: 현재 페이지 탭 — 호버(1px 밑줄)와 구분되는 확실한 활성 상태 */
.nav a:not(.nav__cta).is-active {
  color: var(--primary-green);
  font-weight: 700;
}
.nav a:not(.nav__cta).is-active::after {
  height: 2px;
}

/* v6.8: CTA 버튼 — selector specificity 강화 (.nav a.nav__cta) 로 .nav a 의 padding 4px 0 상속 차단 */
.nav a.nav__cta {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* Sizing — selector 강화로 .nav a padding 4px 0 패배 */
  height: 46px;
  padding: 0 26px;
  margin: 0 0 0 16px;
  box-sizing: border-box;

  /* Position reset */
  position: static;

  /* No transforms */
  transform: none;

  /* Appearance */
  background: var(--primary-green);
  color: var(--white);
  border: 1px solid var(--primary-green);
  border-radius: 23px;

  /* Typography */
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;

  /* Behavior */
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav a.nav__cta:hover {
  background: #016B49;
  border-color: #016B49;
  color: var(--white);
}
.nav__cta-arrow {
  font-family: inherit;
  font-weight: 600;
  font-size: 1em;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s var(--ease);
}
.nav__cta:hover .nav__cta-arrow {
  transform: translateX(3px);
}

.nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  color: var(--charcoal);
}

@media (max-width: 760px) {
  .nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--light-gray);
    padding: 16px 24px;
    z-index: 100;
  }
  .nav.is-open {
    display: flex;
  }
  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--light-gray);
    font-size: 14px;
  }
  .nav a:last-child {
    border-bottom: 0;
  }
  /* v6.9: 모바일 메뉴 CTA — desktop selector(0,2,1)와 동일 specificity로 강화 */
  .nav a.nav__cta {
    width: 100%;
    height: 52px;
    margin: 8px 0 0 0;
    padding: 0 24px;
    justify-content: center;
  }
  .nav__toggle {
    display: inline-flex;
  }
}

/* ── Hero Section ──────────────────────────────────────── */
/* Cinematic full-bleed video hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--dark-base);
  min-height: 90vh;
  display: flex;
  align-items: flex-start;
  padding: 0;
  color: var(--white);
}
/* 비디오 배경 — viewport-cover 트릭 (16:9 비디오를 풀폭으로 채움) */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.hero__media-video {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 16:9 비디오를 hero 박스에 cover 처리 */
  width: max(100vw, calc(90vh * 16 / 9));
  height: max(90vh, calc(100vw * 9 / 16));
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hero__media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0.25) 45%, rgba(11,11,11,0.85) 100%),
    linear-gradient(90deg, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0.10) 60%, transparent 100%);
  z-index: 1;
}

/* 텍스트 오버레이 콘텐츠 — v7.1: 헤드라인만 살포시 */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(120px, 14vh, 200px) var(--gutter) clamp(64px, 8vh, 110px);
}
.hero__copy { min-width: 0; max-width: 760px; }

/* (구) 2-col 레이아웃 제거 — 잔존 룰 차단 */
.hero__inner, .hero__visual, .hero__visual-tag { display: none; }

.hero__visual-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--white);
  border: var(--border-soft);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--dark-base);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 4;
}
.hero__visual-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-green);
  animation: pulse 2s infinite;
}

/* v5: 산업 카드 탭 (Industry Tabs) */
/* v6.2: WES 역량 스펙 라인 — 산업 세그멘테이션 대신 소프트웨어 중심 표시 */
.hero__wes-spec {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 36px;
  padding: 16px 0;
  border-top: 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);
  animation: heroIn 0.9s 0.24s var(--ease) both;
  flex-wrap: wrap;
}
.hero__wes-spec-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--primary-green);
  padding: 6px 12px;
  border: 1px solid var(--primary-green);
  border-radius: 4px;
  text-transform: uppercase;
  line-height: 1;
}
.hero__wes-spec-list {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: -0.005em;
  line-height: 1.6;
}
.hero__wes-spec-dot {
  margin: 0 10px;
  opacity: 0.5;
}

/* v5 잔존: industry 관련 클래스는 더 이상 사용 안 함 (참조 끊김) */
.hero__industry-tabs,
.hero__tab,
.hero__tab-icon,
.industry-notice { display: none; }

/* v5.2: Demo Video 풀폭 섹션 (Hero 직후) */
.video-section {
  padding: clamp(56px, 6vw, 88px) 0;
  background: var(--warm-gray);
  border-top: 1px solid var(--light-gray);
}
.video-section__frame {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--dark-base);
}
.video-section__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video-section__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.video-section__caption {
  text-align: center;
  margin: 24px auto 0;
  max-width: 60ch;
  font-size: 14px;
  color: var(--muted-text);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  line-height: 1.65;
}
@media (max-width: 760px) {
  .video-section { padding: 48px 0; }
  .video-section__caption { font-size: 13px; }
}

/* v5: 산업별 안내 박스 (풀필먼트 외 — 케이스 준비 중) */
.industry-notice {
  margin-top: 20px;
  padding: 18px 22px;
  background: var(--warm-gray);
  border: var(--border-soft);
  border-left: 3px solid var(--primary-green);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.industry-notice[hidden] { display: none; }
.industry-notice__copy {
  flex: 1;
  min-width: 0;
}
.industry-notice__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark-base);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.industry-notice__desc {
  font-size: 13px;
  color: var(--muted-text);
  line-height: 1.6;
  margin: 0;
}
.industry-notice__cta {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .industry-notice { gap: 12px; padding: 14px 16px; }
  .industry-notice__cta { width: 100%; justify-content: center; }
}

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
}

@media (max-width: 760px) {
  .hero__industry-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 24px;
  }
  .hero__industry-tabs::-webkit-scrollbar {
    display: none;
  }
  .hero__tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--light-gray);
  padding-bottom: 16px;
}
.hero__top .live::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary-green);
  box-shadow: 0 0 0 4px rgba(0, 193, 134, 0.18);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 60%, 100% { opacity: 1; }
  30% { opacity: 0.4; }
}

.hero__byline {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero__byline::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--charcoal);
  display: inline-block;
}

.hero__title {
  font-size: clamp(40px, 4.8vw, 60px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  max-width: 16ch;
  font-weight: 700;
  animation: heroIn 0.9s var(--ease) both;
}
.hero__title em {
  font-style: normal;
  font-weight: 700;
  color: var(--primary-green);
  position: relative;
  display: inline-block;
}
.hero__title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.32em;
  background: rgba(0, 193, 134, 0.16);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  animation: heroEmHighlight 0.9s 0.55s var(--ease) forwards;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroEmHighlight {
  to { transform: scaleX(1); }
}
.hero__byline,
.hero__lede,
.hero__cta,
.hero__industry-tabs,
.hero__strip { animation: heroIn 0.9s var(--ease) both; }
.hero__byline { animation-delay: 0.08s; }
.hero__lede   { animation-delay: 0.18s; }
.hero__cta    { animation-delay: 0.32s; }
.hero__strip  { animation-delay: 0.40s; }

.hero__lede {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--muted-text);
  max-width: 52ch;
  line-height: 1.7;
  margin: 0 0 32px;
}

/* v5: 3-CTA 스택 (세로 정렬) */
.hero__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  animation: heroIn 0.9s 0.32s var(--ease) both;
}

/* ── v7.0: Cinematic hero — 다크 배경 위 텍스트·요소 오버라이드 ── */
.hero--cinema .hero__top {
  color: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.15);
  margin-bottom: 36px;
}
.hero--cinema .hero__byline {
  color: rgba(255, 255, 255, 0.85);
}
.hero--cinema .hero__byline::before {
  background: rgba(255, 255, 255, 0.6);
}
.hero--cinema .hero__title {
  color: var(--white);
  font-size: clamp(36px, 4.4vw, 56px);
  max-width: 18ch;
}
.hero--cinema .hero__title em::after {
  background: rgba(2, 133, 91, 0.4);
}
.hero--cinema .hero__lede {
  color: rgba(255, 255, 255, 0.85);
  max-width: 60ch;
}
.hero--cinema .hero__wes-spec {
  border-top-color: rgba(255, 255, 255, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.18);
  margin-bottom: 40px;
}
.hero--cinema .hero__wes-spec-list {
  color: rgba(255, 255, 255, 0.88);
}
.hero--cinema .hero__wes-spec-label {
  background: rgba(2, 133, 91, 0.18);
  border-color: rgba(2, 133, 91, 0.9);
  color: #4ddb9a;
}
.hero--cinema .hero__cta {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
/* Consult 버튼 — outline 흰색 (다크 배경용) */
.hero--cinema .btn--consult {
  background: var(--white);
  color: var(--dark-base) !important;
  border-color: var(--white);
}
.hero--cinema .btn--consult:hover {
  background: var(--primary-green);
  color: var(--white) !important;
  border-color: var(--primary-green);
}
/* Showroom 텍스트링크 — 흰색/연초록 */
.hero--cinema .btn--showroom {
  color: rgba(255, 255, 255, 0.92) !important;
}
.hero--cinema .btn--showroom:hover {
  color: #4ddb9a !important;
}
/* v8.1: Hero CTA — 다크 배경 위 아웃라인 버튼 (discovery action) */
.btn--hero-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  padding: 14px 26px;
}
.btn--hero-outline:hover {
  background: var(--white);
  color: var(--dark-base);
  border-color: var(--white);
}
.btn--hero-outline:hover .btn__arrow {
  transform: translateX(4px);
}
.hero__cta {
  margin-top: clamp(28px, 3vh, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: heroIn 1s var(--ease) 0.2s both;
}
@media (max-width: 760px) {
  .hero--cinema { min-height: 78vh; }
  .hero--cinema .hero__cta { flex-direction: column; align-items: stretch; }
}

/* ── WES Ticker — hero 직하 풀폭 strip ── */
.wes-ticker {
  background: var(--dark-base);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wes-ticker__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px var(--gutter);
  min-height: 56px;
}
.wes-ticker__label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4ddb9a;
  padding: 5px 10px;
  border: 1px solid rgba(2, 133, 91, 0.55);
  border-radius: 999px;
  background: rgba(2, 133, 91, 0.14);
  flex-shrink: 0;
}
.wes-ticker__list {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  overflow: hidden;
}
.wes-ticker__dot {
  margin: 0 12px;
  color: rgba(255, 255, 255, 0.28);
}
@media (max-width: 760px) {
  .wes-ticker__inner {
    align-items: flex-start;
    padding: 14px 16px;
    gap: 12px;
  }
  .wes-ticker__list {
    font-size: 12px;
  }
  .wes-ticker__dot { margin: 0 8px; }
}

.hero__strip {
  grid-column: 1 / -1;
  margin-top: 40px;
  padding: 28px 0;
  border-top: var(--border-soft);
  border-bottom: var(--border-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat__index {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.stat__value {
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  color: var(--dark-base);
}
.stat__value small {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--muted-text);
  margin-left: 3px;
}
.stat__label {
  font-size: 13px;
  color: var(--muted-text);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .hero__strip {
    grid-template-columns: 1fr;
    border-right: 0;
    border-bottom: 1px solid var(--light-gray);
    padding: 24px 0;
  }
  .hero__strip .stat:last-child {
    border-bottom: 0;
  }
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 6px;
  transition: all 0.2s var(--ease);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  justify-content: center;
}
.btn__arrow {
  font-family: var(--mono);
  font-size: 14px;
  transition: transform 0.2s var(--ease);
}
.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* Primary button — 찐초록 솔리드, 호버 시 darker shade */
.btn--primary {
  background: var(--primary-green);
  color: var(--white);
}
.btn--primary:hover {
  background: #016B49;
  color: var(--white);
}

/* Secondary button — outline */
.btn--secondary {
  background: transparent;
  color: var(--dark-base);
  border-color: var(--light-gray);
}
.btn--secondary:hover {
  background: var(--dark-base);
  color: var(--white);
  border-color: var(--dark-base);
}

/* v5: PDF CTA — Primary Green */
.btn--pdf {
  background: var(--primary-green);
  color: var(--white);
  border: none;
  padding: 14px 24px;
  font-size: 15px;
}
.btn--pdf:hover {
  background: #01714d;
  box-shadow: var(--shadow-card-hover);
}

/* v5: Consult CTA — Outline Charcoal */
.btn--consult {
  background: var(--white);
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
  padding: 14px 24px;
  font-size: 15px;
}
.btn--consult:hover {
  border-color: var(--primary-green);
  background: rgba(2,133,91,.08);
}

/* v5: Showroom CTA — Text Link Teal */
.btn--showroom {
  background: transparent;
  color: var(--accent-teal);
  border: none;
  font-weight: 500;
  padding: 8px 0;
  font-size: 15px;
}
.btn--showroom:hover {
  color: var(--primary-green);
  transform: translateX(4px);
}

/* Ghost button — Light backgrounds */
.btn--ghost {
  background: transparent;
  color: var(--charcoal);
  border: 1.5px solid transparent;
}
.btn--ghost:hover {
  background: var(--charcoal);
  color: var(--white);
}
.section--dark .btn--ghost {
  color: var(--white);
}
.section--dark .btn--ghost:hover {
  background: var(--white);
  color: var(--dark-base);
}

/* Paper button — Light text on dark backgrounds */
.btn--paper {
  background: var(--white);
  color: var(--primary-green);
  font-weight: 600;
  box-shadow: var(--shadow-cta);
}
.btn--paper:hover {
  background: var(--primary-green);
  color: var(--white);
}

/* Size variations */
.btn--sm {
  padding: 12px 18px;
  font-size: 13px;
}
.btn--lg {
  padding: 20px 32px;
  font-size: 16px;
}

/* Disabled state */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Cards ────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: var(--border-soft);
  border-radius: 10px;
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.card:hover {
  border-color: var(--primary-green);
  box-shadow: var(--shadow-card-hover);
}

/* WES 다크 섹션 전용 feature 카드 */
.wes-feature {
  padding: 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 193, 134, 0.18);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
  height: 100%;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.wes-feature:hover {
  border-color: var(--secondary-green);
  background: rgba(0, 193, 134, 0.06);
}
.wes-feature__num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--secondary-green);
  font-weight: 600;
  padding-top: 4px;
}
.wes-feature__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 10px;
}
.wes-feature__desc {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* WES 페이지 Result Link 카드 */
.result-card {
  background: var(--white);
  border: var(--border-soft);
  border-radius: 12px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.result-card:hover {
  border-color: var(--primary-green);
  box-shadow: var(--shadow-card-hover);
}
.result-card__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted-soft);
  margin: 0;
}
.result-card__value {
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 700;
  color: var(--primary-green);
  letter-spacing: -0.03em;
  margin: 16px 0 6px;
  font-feature-settings: "tnum";
  line-height: 1;
}
.result-card__value small {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--muted-text);
  margin-left: 4px;
}
.result-card__label {
  font-size: 14px;
  color: var(--dark-base);
  font-weight: 500;
  margin: 0;
}

.why-card {
  width: 100%;
  height: 100%;
  background: var(--white);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: var(--shadow-card);
}
.why-card:hover {
  border-color: var(--primary-green);
  box-shadow: var(--shadow-card-hover);
}
.why-card .meta { margin-bottom: 8px; }
.why-card .meta__num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--primary-green);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.why-card .meta__label {
  color: var(--primary-green);
  font-weight: 600;
}
.why-card h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--dark-base);
  margin: 0;
}
.why-card .lede {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-text);
  margin: 0;
}

.stat-card {
  padding: 32px;
  background: var(--warm-gray);
  border-left: 4px solid var(--primary-green);
  border-radius: 0;
}
.stat-card__value {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  color: var(--primary-green);
  line-height: 1;
  margin: 0 0 8px;
}
.stat-card__label {
  font-size: 13px;
  color: var(--muted-text);
}

.feature-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--light-gray);
}
.feature-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-green);
  font-size: 32px;
}
.feature-card__heading {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}
.feature-card__body {
  font-size: 15px;
  color: var(--muted-text);
  margin: 0;
}

.frame {
  background: var(--warm-gray);
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.frame--dark {
  background: var(--charcoal);
  border-color: rgba(255, 255, 255, 0.12);
}
.frame img,
.frame svg {
  max-width: 100%;
  height: auto;
}

/* ── Icons ────────────────────────────────────────────── */
.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
}
.icon--sm {
  width: 20px;
  height: 20px;
}
.icon--lg {
  width: 32px;
  height: 32px;
}
.icon--xl {
  width: 48px;
  height: 48px;
}

.icon {
  color: var(--charcoal);
}
.icon--primary {
  color: var(--primary-green);
}
.icon--light {
  color: var(--white);
}
.icon--muted {
  color: var(--muted-text);
}

/* ── WES Block ────────────────────────────────────────── */
.wes-block {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 64px;
  align-items: start;
}
.wes-block__visual {
  position: sticky;
  top: 100px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(0,193,134,.20);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
}
.wes-block__visual img {
  width: 100%;
  max-height: 640px;
  object-fit: contain;
}
.section--dark .wes-block__visual {
  background: transparent;
  border-color: var(--light-gray);
}

.wes-block__copy {
  padding: 32px 0;
}
.section--dark .h-section,
.wes-block__copy h2 {
  color: var(--white);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.wes-block__copy h2 .text-accent { color: var(--secondary-green); }
/* v8.3: em 한글 italic 겹침 방지 — 색·웨이트로만 강조 */
.wes-block__copy h2 em {
  font-style: normal;
  color: var(--primary-green);
  font-weight: 800;
  position: relative;
  display: inline-block;
}
.wes-block__copy h2 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 0.28em;
  background: rgba(2, 133, 91, 0.22);
  z-index: -1;
}
.wes-block__copy .lede {
  color: rgba(255,255,255,.72);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  max-width: none;
}

.wes-list {
  display: grid;
  gap: 0;
  margin-top: 40px;
}
.wes-list__item {
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
  transition: padding-left 0.3s var(--ease);
}
.wes-list__item:last-child {
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.wes-list__item:hover {
  padding-left: 8px;
}
.wes-list__num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--secondary-green);
  font-weight: 600;
  padding-top: 4px;
}
.wes-list__h {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 8px;
}
.wes-list__p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.65);
  margin: 0;
}

@media (max-width: 1024px) {
  .wes-block {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .wes-block__visual {
    position: static;
    max-width: 320px;
  }
}

/* ── Numbers Section (v8.2: 12-col + Hero Hierarchy) ───────────────────── */
.numbers {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  margin-top: 64px;
  border-top: 2px solid var(--dark-base);
}
/* 기본 셀: 12-col 중 4칸 = 1/3 폭 (한 row에 3개) */
.numbers__cell {
  grid-column: span 4;
  padding: 48px 36px;
  border-right: 1px solid rgba(11,11,11,.10);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Hero 셀: 6칸 = 1/2 폭 (한 row에 2개) */
.numbers__cell--hero {
  grid-column: span 6;
  padding: 64px 48px;
}
/* Row-start 셀: 좌측 패딩 제거 (wrap 외곽선에 정렬) */
.numbers__cell:nth-child(1),
.numbers__cell:nth-child(3),
.numbers__cell:nth-child(6) {
  padding-left: 0;
}
/* Row-end 셀: 우측 패딩·보더 제거 (wrap 외곽선에 정렬) */
.numbers__cell:nth-child(2),
.numbers__cell:nth-child(5),
.numbers__cell:nth-child(8) {
  padding-right: 0;
  border-right: 0;
}
/* row 2·3에 상단 보더 */
.numbers__cell:nth-child(n+3) {
  border-top: 1px solid rgba(11,11,11,.10);
  padding-top: 48px;
}
.numbers__cell .stat__index {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted-soft);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.numbers__cell .stat__value {
  font-size: clamp(28px, 2.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--dark-base);
  font-feature-settings: "tnum";
}
.numbers__cell .stat__value small {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--muted-text);
  margin-left: 3px;
}
/* v8.2: Hero 셀의 값 폰트 1.6x — 시선 진입점 */
.numbers__cell--hero .stat__value {
  font-size: clamp(48px, 4.6vw, 76px);
  letter-spacing: -0.03em;
}
.numbers__cell--hero .stat__label {
  font-size: 14px;
}
/* v8.1: Editorial Accent — 핵심 4개 셀의 값에 브랜드 그린 적용 */
.numbers__cell--accent .stat__value {
  color: var(--primary-green);
}
.numbers__cell--accent .stat__value small {
  color: rgba(2, 133, 91, 0.7);
}
.numbers__cell .stat__label {
  font-size: 13px;
  color: var(--muted-text);
  line-height: 1.45;
}
.numbers__cell .stat__sub {
  font-size: 12px;
  color: var(--muted-text);
  line-height: 1.5;
}
.numbers__bar {
  height: 4px;
  width: 100%;
  background: rgba(11,11,11,.06);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.numbers__bar-fill {
  height: 100%;
  background: var(--primary-green);
  border-radius: 999px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.2,0.8,0.2,1);
}
.numbers__note {
  margin-top: 32px;
  padding: 16px 20px;
  background: var(--warm-gray);
  border-left: 3px solid var(--primary-green);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted-text);
  letter-spacing: 0;
}
.numbers__note strong {
  color: var(--dark-base);
  font-weight: 600;
}

@media (max-width: 1024px) {
  /* 태블릿: 8개 셀 모두 2-up (한 row 2개씩, 총 4 row) */
  .numbers__cell {
    grid-column: span 6;
    padding: 48px 32px;
    border-right: 1px solid rgba(11,11,11,.10);
  }
  .numbers__cell--hero {
    grid-column: span 6;
    padding: 48px 32px;
  }
  /* 보더 룰 재정의 — 홀수 셀(row 시작)은 좌패딩 0, 짝수 셀(row 끝)은 우보더·우패딩 0 */
  .numbers__cell:nth-child(odd) {
    padding-left: 0;
  }
  .numbers__cell:nth-child(even) {
    padding-right: 0;
    border-right: 0;
  }
  .numbers__cell:nth-child(n+3) {
    border-top: 1px solid rgba(11,11,11,.10);
    padding-top: 48px;
  }
  .numbers__cell--hero .stat__value {
    font-size: clamp(44px, 6vw, 60px);
  }
}

@media (max-width: 760px) {
  .numbers {
    grid-template-columns: 1fr;
    border-top: none;
    border-bottom: 2px solid var(--dark-base);
  }
  .numbers__cell,
  .numbers__cell--hero {
    grid-column: auto;
    border: none;
    padding: 32px 0;
    border-bottom: 1px solid rgba(11,11,11,.10);
  }
  .numbers__cell:last-child {
    border-bottom: none;
  }
  .numbers__cell--hero .stat__value {
    font-size: clamp(36px, 8vw, 48px);
  }
}

/* ── Process Flow ──────────────────────────────────────── */
.process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: transparent;
}
.process__step {
  position: relative;
  padding: 36px 32px 32px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 14px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  overflow: hidden;
}
/* v8.4: 상단 그린 액센트 바 (활성 신호) */
.process__step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-green), rgba(2, 133, 91, 0));
  transform-origin: left center;
  transform: scaleX(0.3);
  transition: transform 0.4s var(--ease);
}
.process__step:hover,
.process__step[data-reveal].is-visible:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(11, 11, 11, 0.08);
  border-color: rgba(2, 133, 91, 0.35);
}
.process__step:hover::before {
  transform: scaleX(1);
}

/* v8.4: 카드 사이 화살표 — 16px 갭 안에 배치, 둥근 뱃지 형태 유지 */
.process__step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--light-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-green);
  z-index: 2;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.process__step:hover:not(:last-child)::after {
  background: var(--primary-green);
  color: var(--white);
  border-color: var(--primary-green);
}

.process__step__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--warm-gray);
  color: var(--primary-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.process__step:hover .process__step__icon {
  background: var(--primary-green);
  color: var(--white);
}

.process__step__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-green);
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.process__step__num::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--primary-green);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(2, 133, 91, 0.14);
}

.process__step h4 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--dark-base);
  margin: 0 0 12px;
}
.process__step p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted-text);
  margin: 0 0 16px;
}

.flow-illust {
  margin: 32px 0 56px;
  background: var(--warm-gray);
  border: var(--border-soft);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  justify-content: center;
}
.flow-illust img {
  width: 100%;
  max-width: 800px;
  height: auto;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px dashed rgba(11, 11, 11, 0.08);
  margin-top: 4px;
}
.tag {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 4px 10px;
  background: var(--cool-gray);
  color: var(--dark-base);
  border-radius: 999px;
}
.tag--ghost {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--light-gray);
}

@media (max-width: 760px) {
  .flow-illust { display: none; }
  .process {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .process__step {
    padding: 28px 24px 24px;
  }
  /* 모바일에선 우측 화살표 숨김 (세로 스택이라 의미 없음) */
  .process__step:not(:last-child)::after {
    display: none;
  }
}

/* ── Flow Diagram ──────────────────────────────────────── */
.flow-diagram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 48px;
  background: var(--warm-gray);
  border-radius: 8px;
  border: 1px solid var(--light-gray);
}
.flow-step {
  flex: 1;
  text-align: center;
  position: relative;
}
.flow-step__num {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-green);
  margin-bottom: 12px;
}
.flow-step__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-text);
  margin-bottom: 8px;
}
.flow-step__desc {
  font-size: 14px;
  color: var(--muted-text);
}
.flow-arrow {
  font-size: 24px;
  color: var(--primary-green);
  align-self: flex-start;
  margin-top: 24px;
}

@media (max-width: 760px) {
  .flow-diagram {
    flex-direction: column;
    gap: 16px;
    padding: 32px;
  }
  .flow-arrow {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    align-self: center;
    margin-top: 0;
  }
}

/* ── FAQ Accordion ────────────────────────────────────── */
.faq {
  border-top: 1px solid var(--charcoal);
}
.faq__item {
  border-bottom: 1px solid var(--light-gray);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 0;
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  gap: 24px;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.faq__item summary:hover {
  color: var(--primary-green);
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.faq__plus {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--light-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--charcoal);
  transition: all 0.2s var(--ease);
  justify-self: end;
}
.faq__item[open] .faq__plus {
  background: var(--charcoal);
  color: var(--white);
  transform: rotate(45deg);
}
.faq__body {
  padding: 0 0 28px 84px;
  color: var(--muted-text);
  line-height: 1.75;
  font-size: 15px;
  max-width: 70ch;
}

@media (max-width: 760px) {
  .faq__item summary {
    grid-template-columns: 40px 1fr 32px;
    gap: 16px;
    font-size: 16px;
  }
  .faq__body {
    padding-left: 56px;
  }
}

/* ── CTA Block ────────────────────────────────────────── */
.cta {
  background: var(--dark-base);
  color: var(--white);
  padding: clamp(80px, 10vw, 140px) 0;
  text-align: left;
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}
.cta::before { display: none; }
.cta::after { display: none; }
/* v6.14: max-width 720px 제거 — 다른 섹션과 컨테이너 폭 일치 (좌측 정렬) */
.cta__inner {
  position: relative;
  z-index: 2;
}
.cta h2 {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 0 0 28px;
  max-width: 16ch;
}
.cta .lede {
  color: rgba(255,255,255,.78);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  max-width: 52ch;
  margin: 0 0 32px;
}

/* v6.15: CTA 버튼 가로 배치 — 시각적 균형 확보 */
.cta__buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}
.cta__buttons .btn {
  flex: 0 0 auto;
}
@media (max-width: 600px) {
  .cta__buttons {
    flex-direction: column;
    align-items: stretch;
  }
}

.cta__buttons .btn {
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
}

.cta .btn--paper {
  background: var(--white);
  color: var(--dark-base);
  font-weight: 600;
  padding: 16px 28px;
  font-size: 15px;
  box-shadow: var(--shadow-cta);
}
.cta .btn--paper:hover {
  background: #016B49;
  color: var(--white);
}
.cta__contact {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.cta__contact span strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 6px;
}

.cta__hint {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.5);
}

@media (max-width: 760px) {
  .cta__contact {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── Sticky CTA (모바일) ───────────────────────────────── */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: var(--primary-green);
  z-index: 80;
  border-top: 1px solid rgba(2, 133, 91, 0.5);
}
.sticky-cta .btn {
  width: 100%;
  padding: 12px 16px;
  font-size: 13px;
  background: var(--white);
  color: var(--primary-green);
}
@media (max-width: 760px) {
  .sticky-cta {
    display: block;
  }
  main {
    margin-bottom: 60px;
  }
  /* v6.10: 모바일 메뉴 열렸을 때 sticky-cta 숨김 — 메뉴 내 도입 문의가 메인 CTA가 됨 */
  body:has(.nav.is-open) .sticky-cta {
    display: none;
  }
}

/* ── Footer ───────────────────────────────────────────── */
.footer {
  background: var(--dark-base);
  color: rgba(255, 255, 255, 0.55);
  padding: 64px 0 32px;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__logo {
  height: 26px;
  width: auto;
  display: block;
  margin-bottom: 8px;
  opacity: 0.92;
}
.footer__brand-line {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer__brand p {
  line-height: 1.7;
  margin: 0;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.55);
}
.footer__col h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 500;
}
.footer__col ul li {
  margin-bottom: 10px;
}
.footer__col a:hover {
  color: var(--secondary-green);
}
.footer__legal {
  padding-top: 24px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.footer__legal a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s var(--ease);
}
.footer__legal a:first-child {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.footer__legal a:hover {
  color: var(--primary-green);
}

.footer__bottom {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 1024px) {
  .footer__top {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  .footer__bottom {
    flex-direction: column;
  }
}

/* ── Page Hero (서브 페이지) ──────────────────────────── */
.page-hero {
  padding: clamp(120px, 14vw, 180px) 0 80px;
  border-bottom: 1px solid var(--light-gray);
  background: var(--white);
}
.page-hero__top {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 32px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.page-hero__top span {
  color: var(--charcoal);
  font-weight: 500;
}
.page-hero h1 {
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: 0 0 24px;
  max-width: 22ch;
  color: var(--dark-base);
}
.page-hero h1 em {
  font-style: normal;
  color: var(--primary-green);
}
.page-hero__desc {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--muted-text);
  max-width: 64ch;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 760px) {
  .page-hero {
    padding: 80px 0 48px;
  }
}

/* ── v9.7: Product page hero — 2-col 그리드 + lineup index ── */
.page-hero--product .page-hero__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 64px;
  align-items: start;
}
.page-hero--product .page-hero__main {
  min-width: 0;
}
.page-hero--product .page-hero__aside {
  padding-top: 56px; /* breadcrumb 만큼 내려서 hero 본문 시작점과 정렬 */
}
@media (max-width: 1024px) {
  .page-hero--product .page-hero__grid { gap: 40px; }
}
@media (max-width: 900px) {
  .page-hero--product .page-hero__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .page-hero--product .page-hero__aside { padding-top: 0; }
}

/* Lineup index — hero 우측 미니 목차 (타입그래픽) */
.lineup-index {
  border-top: 1px solid var(--dark-base);
  padding-top: 18px;
}
.lineup-index__label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-text);
  margin-bottom: 18px;
}
.lineup-index__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lineup-index__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--light-gray);
  color: var(--muted-text);
  transition: color 0.2s ease;
}
.lineup-index__item:last-child {
  border-bottom: none;
}
.lineup-index__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted-text);
  font-variant-numeric: tabular-nums;
}
.lineup-index__name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--charcoal);
}
.lineup-index__status {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-text);
  white-space: nowrap;
}
/* 도입 가능 상태 — 그린 강조 */
.lineup-index__item--ready {
  color: var(--dark-base);
}
.lineup-index__item--ready .lineup-index__num,
.lineup-index__item--ready .lineup-index__name {
  color: var(--dark-base);
}
.lineup-index__item--ready .lineup-index__status {
  color: var(--primary-green);
  font-weight: 700;
}
.lineup-index__item--ready .lineup-index__status::before {
  content: "● ";
  font-size: 0.9em;
}

/* ── v9.8: Case Site Mark — 타이포그래픽 사이트 식별 (illust 대체) ── */
.site-mark {
  padding-top: 18px;
  border-top: 1px solid var(--dark-base);
}
.site-mark__label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-text);
  margin-bottom: 24px;
}
.site-mark__title {
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--dark-base);
  margin: 0 0 20px;
}
.site-mark__sub {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-text);
  margin: 0;
}
.site-mark__accent {
  color: var(--primary-green);
  font-weight: 700;
  margin-right: 4px;
}
@media (max-width: 760px) {
  .site-mark { padding-top: 12px; }
  .site-mark__label { margin-bottom: 18px; }
  .site-mark__title { margin-bottom: 14px; }
}

/* ── v9.5: WES Definition — 시네마틱 섹션 (섹션 = hero) ── */
.wes-def-cinema {
  position: relative;
  padding: clamp(88px, 10vw, 140px) 0;
  overflow: hidden;
  background: #060B09;
  border-top: 1px solid rgba(77, 219, 154, 0.10);
  border-bottom: 1px solid rgba(77, 219, 154, 0.10);
}
/* 페이지 hero 역할일 때: 상단 패딩 확장 (네비 높이 + 호흡) */
.wes-def-cinema--hero {
  padding: clamp(140px, 16vw, 200px) 0 clamp(96px, 11vw, 150px);
  border-top: none;
}
/* hero일 때 stage 세로 inset — 섹션이 커져도 이미지 크기는 유지 */
.wes-def-cinema--hero .wes-def-cinema__stage {
  top: clamp(56px, 7vw, 110px);
  bottom: clamp(32px, 4vw, 70px);
}
.wes-def-cinema__crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 28px;
}
.wes-def-cinema__crumb span {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}
.wes-def-cinema__crumb span:nth-child(2) {
  color: rgba(255, 255, 255, 0.32);
}
/* 배경 스테이지 — 우측 68% (좌측 텍스트 영역과 자연스럽게 겹침) */
.wes-def-cinema__stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 68%;
  pointer-events: none;
  z-index: 0;
}
.wes-def-cinema__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
  transform: scale(0.98);
  animation: wesDefCinemaBreathe 16s ease-in-out infinite;
}
@keyframes wesDefCinemaBreathe {
  0%, 100% { transform: scale(0.97); }
  50% { transform: scale(1.01); }
}
/* 이미지 좌측 페이드 (섹션 좌측 다크 영역으로 자연스럽게 녹임) */
.wes-def-cinema__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(6, 11, 9, 0.95) 0%,
    rgba(6, 11, 9, 0.62) 18%,
    rgba(6, 11, 9, 0.18) 42%,
    transparent 72%
  );
}
/* 비네팅 */
.wes-def-cinema__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 55% 50%, transparent 38%, rgba(0, 0, 0, 0.45) 95%);
}
/* AI 칩 글로우 펄스 (stage 안에서 상대 좌표) */
.wes-def-cinema__halo {
  position: absolute;
  top: 52%;
  left: 52%;
  width: 30%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(77, 219, 154, 0.55) 0%, rgba(77, 219, 154, 0.18) 32%, transparent 65%);
  mix-blend-mode: screen;
  filter: blur(14px);
  animation: wesDefCinemaHalo 3.4s ease-in-out infinite;
}
@keyframes wesDefCinemaHalo {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.85); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}
/* 가로 스캔 라인 */
.wes-def-cinema__scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  height: 100px;
  background: linear-gradient(180deg, transparent 0%, rgba(77, 219, 154, 0.14) 50%, transparent 100%);
  mix-blend-mode: screen;
  animation: wesDefCinemaScan 10s linear infinite;
}
@keyframes wesDefCinemaScan {
  0% { top: -15%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}
/* 플로팅 파티클 */
.wes-def-cinema__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.wes-def-cinema__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(77, 219, 154, 0.95);
  box-shadow: 0 0 8px rgba(77, 219, 154, 0.7), 0 0 16px rgba(77, 219, 154, 0.4);
  animation: wesDefCinemaParticle 10s ease-in-out infinite;
  opacity: 0;
}
.wes-def-cinema__particles span:nth-child(1) { left: 48%; top: 75%; animation-delay: 0s; }
.wes-def-cinema__particles span:nth-child(2) { left: 72%; top: 30%; animation-delay: 1.6s; }
.wes-def-cinema__particles span:nth-child(3) { left: 56%; top: 85%; animation-delay: 3.2s; }
.wes-def-cinema__particles span:nth-child(4) { left: 80%; top: 60%; animation-delay: 4.8s; }
.wes-def-cinema__particles span:nth-child(5) { left: 55%; top: 25%; animation-delay: 6.4s; }
.wes-def-cinema__particles span:nth-child(6) { left: 68%; top: 50%; animation-delay: 8s; }
@keyframes wesDefCinemaParticle {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  15% { opacity: 1; transform: translateY(-12px) scale(1); }
  85% { opacity: 1; transform: translateY(-55px) scale(0.9); }
  100% { opacity: 0; transform: translateY(-75px) scale(0.5); }
}

/* 컨텐츠 wrap */
.wes-def-cinema__wrap {
  position: relative;
  z-index: 1;
}
.wes-def-cinema__meta {
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 40px;
}
.wes-def-cinema__meta .meta__num,
.wes-def-cinema__meta .meta__label,
.wes-def-cinema__meta .meta__tag {
  color: rgba(255, 255, 255, 0.7);
}
.wes-def-cinema__meta .meta__rule {
  background: rgba(255, 255, 255, 0.35);
}

.wes-def-cinema__content {
  max-width: 52%;
  color: var(--white);
}
.wes-def-cinema__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #4ddb9a;
  text-transform: uppercase;
  margin: 0 0 26px;
  width: fit-content;
}
.wes-def-cinema__kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ddb9a;
  box-shadow: 0 0 0 3px rgba(77, 219, 154, 0.22);
  animation: wesDefCinemaKickerDot 1.8s ease-in-out infinite;
}
@keyframes wesDefCinemaKickerDot {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
.wes-def-cinema__title {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--white);
  font-weight: 700;
  margin: 0 0 24px;
  max-width: 14ch;
}
.wes-def-cinema--hero .wes-def-cinema__title {
  font-size: clamp(40px, 5.6vw, 72px);
}
.wes-def-cinema__title em {
  font-style: normal;
  color: #4ddb9a;
  position: relative;
  display: inline-block;
}
.wes-def-cinema__title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.28em;
  background: rgba(77, 219, 154, 0.22);
  z-index: -1;
}
.wes-def-cinema__sub {
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 26px;
}
.wes-def-cinema__sub strong {
  color: #4ddb9a;
  font-weight: 700;
}
.wes-def-cinema__body {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 44ch;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 900px) {
  .wes-def-cinema {
    padding: 64px 0 0;
  }
  .wes-def-cinema--hero {
    padding: 104px 0 0;
  }
  .wes-def-cinema__crumb {
    margin-bottom: 22px;
  }
  .wes-def-cinema__stage {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    aspect-ratio: 21 / 12;
    margin-top: 56px;
  }
  .wes-def-cinema__overlay {
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(6, 11, 9, 0.30) 40%,
      rgba(6, 11, 9, 0.95) 100%
    );
  }
  .wes-def-cinema__bg {
    object-position: center;
  }
  .wes-def-cinema__content {
    max-width: 100%;
  }
  .wes-def-cinema__halo {
    width: 45%;
  }
}

/* ── v9.4: WES Definition — Hero 블록 (이미지 + 텍스트 오버레이) ── */
.wes-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 21 / 10;
  min-height: 460px;
  border: 1px solid rgba(77, 219, 154, 0.15);
  box-shadow:
    0 44px 100px rgba(0, 0, 0, 0.50),
    0 0 120px rgba(77, 219, 154, 0.18);
}
/* 배경 이미지 (호흡) */
.wes-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transform: scale(1.04);
  animation: wesHeroBreathe 16s ease-in-out infinite;
  z-index: 0;
}
@keyframes wesHeroBreathe {
  0%, 100% { transform: scale(1.02); }
  50% { transform: scale(1.08); }
}
/* 좌측 다크 그라데이션 (텍스트 가독성) */
.wes-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 14, 12, 0.92) 0%,
    rgba(8, 14, 12, 0.78) 30%,
    rgba(8, 14, 12, 0.35) 55%,
    transparent 75%
  );
  z-index: 1;
  pointer-events: none;
}
/* 비네팅 */
.wes-hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 65% 50%, transparent 35%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 1;
  pointer-events: none;
}
/* AI 칩 글로우 펄스 */
.wes-hero__halo {
  position: absolute;
  top: 50%;
  left: 70%;
  width: 26%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(77, 219, 154, 0.55) 0%, rgba(77, 219, 154, 0.18) 32%, transparent 65%);
  mix-blend-mode: screen;
  filter: blur(12px);
  animation: wesHeroHalo 3.4s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes wesHeroHalo {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.85); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}
/* 가로 스캔 라인 */
.wes-hero__scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, rgba(77, 219, 154, 0.18) 50%, transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  animation: wesHeroScan 9s linear infinite;
}
@keyframes wesHeroScan {
  0% { top: -15%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}
/* 플로팅 파티클 */
.wes-hero__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}
.wes-hero__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(77, 219, 154, 0.95);
  box-shadow: 0 0 8px rgba(77, 219, 154, 0.7), 0 0 16px rgba(77, 219, 154, 0.4);
  animation: wesHeroParticle 9s ease-in-out infinite;
  opacity: 0;
}
.wes-hero__particles span:nth-child(1) { left: 55%; top: 75%; animation-delay: 0s; }
.wes-hero__particles span:nth-child(2) { left: 82%; top: 30%; animation-delay: 1.5s; }
.wes-hero__particles span:nth-child(3) { left: 68%; top: 85%; animation-delay: 3s; }
.wes-hero__particles span:nth-child(4) { left: 90%; top: 60%; animation-delay: 4.5s; }
.wes-hero__particles span:nth-child(5) { left: 60%; top: 25%; animation-delay: 6s; }
.wes-hero__particles span:nth-child(6) { left: 78%; top: 50%; animation-delay: 7.5s; }
@keyframes wesHeroParticle {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  15% { opacity: 1; transform: translateY(-12px) scale(1); }
  85% { opacity: 1; transform: translateY(-55px) scale(0.9); }
  100% { opacity: 0; transform: translateY(-75px) scale(0.5); }
}
/* 코너 프레임 마커 (4 모서리) */
.wes-hero__corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.wes-hero__corners span {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(77, 219, 154, 0.55);
}
.wes-hero__corners span:nth-child(1) {
  top: 14px; left: 14px;
  border-right: none; border-bottom: none;
}
.wes-hero__corners span:nth-child(2) {
  top: 14px; right: 14px;
  border-left: none; border-bottom: none;
}
.wes-hero__corners span:nth-child(3) {
  bottom: 14px; left: 14px;
  border-right: none; border-top: none;
}
.wes-hero__corners span:nth-child(4) {
  bottom: 14px; right: 14px;
  border-left: none; border-top: none;
}

/* 좌측 텍스트 오버레이 */
.wes-hero__content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: clamp(40px, 5vw, 72px) clamp(40px, 4vw, 64px);
  max-width: 56%;
  color: var(--white);
}
.wes-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #4ddb9a;
  text-transform: uppercase;
  margin: 0 0 24px;
  width: fit-content;
}
.wes-hero__kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ddb9a;
  box-shadow: 0 0 0 3px rgba(77, 219, 154, 0.22);
  animation: wesHeroKickerDot 1.8s ease-in-out infinite;
}
@keyframes wesHeroKickerDot {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
.wes-hero__title {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--white);
  font-weight: 700;
  margin: 0 0 22px;
  max-width: 14ch;
}
.wes-hero__title em {
  font-style: normal;
  color: #4ddb9a;
  position: relative;
  display: inline-block;
}
.wes-hero__title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.28em;
  background: rgba(77, 219, 154, 0.22);
  z-index: -1;
}
.wes-hero__sub {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 24px;
}
.wes-hero__sub strong {
  color: #4ddb9a;
  font-weight: 700;
}
.wes-hero__body {
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 44ch;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
  .wes-hero {
    aspect-ratio: auto;
    min-height: 0;
  }
  .wes-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(8, 14, 12, 0.94) 0%,
      rgba(8, 14, 12, 0.85) 45%,
      rgba(8, 14, 12, 0.55) 100%
    );
  }
  .wes-hero__content {
    max-width: 100%;
    padding: 40px 28px 320px;
  }
  .wes-hero__bg {
    object-position: center bottom;
  }
}
.wes-def__text {
  display: flex;
  flex-direction: column;
}
.wes-def__title {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--dark-base);
  font-weight: 700;
  margin: 0 0 24px;
  max-width: 14ch;
}
.wes-def__title em {
  font-style: normal;
  color: var(--primary-green);
  position: relative;
  display: inline-block;
}
.wes-def__title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.28em;
  background: rgba(2, 133, 91, 0.18);
  z-index: -1;
}
.wes-def__sub {
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--charcoal);
  margin: 0 0 28px;
}
.wes-def__sub strong {
  color: var(--primary-green);
  font-weight: 700;
}
.wes-def__body {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.75;
  color: var(--muted-text);
  margin: 0;
  max-width: 52ch;
  padding-top: 24px;
  border-top: 1px solid var(--light-gray);
}

/* AI 칩 보드 일러스트 (SVG 컨테이너) */
.wes-chip-board {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.32),
    0 0 60px rgba(77, 219, 154, 0.10);
}
.wes-chip-board img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── v9.3: 3D 렌더 이미지 + 오버레이 애니메이션 + 호버 인터랙션 ── */
.wes-chip-stage {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(77, 219, 154, 0.15);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(77, 219, 154, 0.08) inset,
    0 0 100px rgba(77, 219, 154, 0.18);
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s var(--ease);
  will-change: transform;
}
.wes-chip-stage:hover {
  transform: perspective(1200px) rotateX(2deg) rotateY(-3deg) translateY(-4px);
  box-shadow:
    0 50px 110px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(77, 219, 154, 0.14) inset,
    0 0 140px rgba(77, 219, 154, 0.30);
}
/* 베이스 이미지 — 호흡 줌 */
.wes-chip-stage img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.02);
  animation: chipStageBreathe 14s ease-in-out infinite;
}
@keyframes chipStageBreathe {
  0%, 100% { transform: scale(1.01); }
  50% { transform: scale(1.06); }
}
/* 코너 프레임 마커 (4 모서리) */
.wes-chip-stage::before,
.wes-chip-stage::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(77, 219, 154, 0.55);
  pointer-events: none;
  z-index: 4;
}
.wes-chip-stage::before {
  top: 12px;
  left: 12px;
  border-right: none;
  border-bottom: none;
}
.wes-chip-stage::after {
  bottom: 12px;
  right: 12px;
  border-left: none;
  border-top: none;
}

/* 중앙 AI 칩 위 펄스 글로우 (강화) */
.wes-chip-stage__halo {
  position: absolute;
  top: 50%;
  left: 60%;
  width: 38%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(77, 219, 154, 0.70) 0%, rgba(77, 219, 154, 0.22) 32%, transparent 65%);
  mix-blend-mode: screen;
  filter: blur(10px);
  animation: chipStageHalo 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chipStageHalo {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.85); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

/* 가로 스캔 라인 (위→아래 천천히) */
.wes-chip-stage__scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, rgba(77, 219, 154, 0.18) 50%, transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: chipStageScan 8s linear infinite;
}
@keyframes chipStageScan {
  0% { top: -15%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}

/* 플로팅 파티클 */
.wes-chip-stage__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.wes-chip-stage__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(77, 219, 154, 0.95);
  box-shadow: 0 0 8px rgba(77, 219, 154, 0.7), 0 0 16px rgba(77, 219, 154, 0.4);
  animation: chipStageParticle 9s ease-in-out infinite;
  opacity: 0;
}
.wes-chip-stage__particles span:nth-child(1) { left: 18%; top: 70%; animation-delay: 0s; }
.wes-chip-stage__particles span:nth-child(2) { left: 80%; top: 55%; animation-delay: 1.5s; }
.wes-chip-stage__particles span:nth-child(3) { left: 35%; top: 85%; animation-delay: 3s; }
.wes-chip-stage__particles span:nth-child(4) { left: 88%; top: 78%; animation-delay: 4.5s; }
.wes-chip-stage__particles span:nth-child(5) { left: 12%; top: 40%; animation-delay: 6s; }
.wes-chip-stage__particles span:nth-child(6) { left: 65%; top: 90%; animation-delay: 7.5s; }
@keyframes chipStageParticle {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  15% { opacity: 1; transform: translateY(-10px) scale(1); }
  85% { opacity: 1; transform: translateY(-50px) scale(0.9); }
  100% { opacity: 0; transform: translateY(-70px) scale(0.5); }
}

/* 가장자리 비네팅 (몰입감) */
.wes-chip-stage__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.32) 100%);
}

/* (legacy) AI 칩셋 모듈 CSS 카드 — 사용 안 함 */
.wes-chip {
  position: relative;
  padding: 24px 28px;
  margin: 16px 12px;
  background:
    radial-gradient(circle at 50% 30%, rgba(2, 133, 91, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, #0E1715 0%, #0A0E0D 100%);
  border: 1px solid rgba(77, 219, 154, 0.30);
  border-radius: 14px;
  color: var(--white);
  box-shadow:
    0 0 0 1px rgba(77, 219, 154, 0.06) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 28px 60px rgba(2, 133, 91, 0.18),
    0 0 80px rgba(77, 219, 154, 0.08);
}
/* 핀 컨넥터 (좌·우·하) */
.wes-chip__pins {
  position: absolute;
  display: flex;
}
.wes-chip__pins span {
  background: #4ddb9a;
  border-radius: 1.5px;
  box-shadow: 0 0 6px rgba(77, 219, 154, 0.5);
}
.wes-chip__pins--left,
.wes-chip__pins--right {
  top: 70px;
  bottom: 70px;
  flex-direction: column;
  justify-content: space-between;
}
.wes-chip__pins--left { left: -3px; }
.wes-chip__pins--right { right: -3px; }
.wes-chip__pins--left span,
.wes-chip__pins--right span {
  width: 6px;
  height: 10px;
}
.wes-chip__pins--bottom {
  bottom: -3px;
  left: 32px;
  right: 32px;
  justify-content: space-between;
}
.wes-chip__pins--bottom span {
  width: 10px;
  height: 6px;
}

/* 칩 헤더 */
.wes-chip__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(77, 219, 154, 0.20);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.wes-chip__led {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4ddb9a;
  font-weight: 700;
}
.wes-chip__led-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ddb9a;
  box-shadow: 0 0 8px rgba(77, 219, 154, 0.8);
  animation: wesLedPulse 1.4s ease-in-out infinite;
}
@keyframes wesLedPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.wes-chip__part {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

/* 칩 다이 (코어 영역) */
.wes-chip__die {
  position: relative;
  margin: 20px 0;
  padding: 28px 20px;
  background:
    radial-gradient(circle at center, rgba(77, 219, 154, 0.10) 0%, transparent 60%),
    rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(77, 219, 154, 0.22);
  border-radius: 6px;
  overflow: hidden;
}
/* 회로 트레이스 그리드 패턴 */
.wes-chip__traces {
  position: absolute;
  inset: 6px;
  background-image:
    linear-gradient(rgba(77, 219, 154, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 219, 154, 0.07) 1px, transparent 1px);
  background-size: 12px 12px;
  border-radius: 3px;
  pointer-events: none;
}
/* 다이 꼭짓점 코너 마커 */
.wes-chip__die-corners {
  position: absolute;
  inset: 8px;
  pointer-events: none;
}
.wes-chip__die-corners span {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1.5px solid rgba(77, 219, 154, 0.55);
}
.wes-chip__die-corners span:nth-child(1) {
  top: 0; left: 0;
  border-right: none; border-bottom: none;
}
.wes-chip__die-corners span:nth-child(2) {
  top: 0; right: 0;
  border-left: none; border-bottom: none;
}
.wes-chip__die-corners span:nth-child(3) {
  bottom: 0; left: 0;
  border-right: none; border-top: none;
}
.wes-chip__die-corners span:nth-child(4) {
  bottom: 0; right: 0;
  border-left: none; border-top: none;
}

.wes-chip__core {
  position: relative;
  text-align: center;
  z-index: 1;
}
.wes-chip__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(11, 11, 11, 0.7);
  border: 1px solid #4ddb9a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ddb9a;
  box-shadow: 0 0 24px rgba(77, 219, 154, 0.45);
}
.wes-chip__icon svg {
  width: 34px;
  height: 34px;
}
.wes-chip__name {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  margin: 0 0 4px;
  text-shadow: 0 0 14px rgba(77, 219, 154, 0.4);
}
.wes-chip__module {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  color: rgba(77, 219, 154, 0.85);
  margin: 0;
  text-transform: uppercase;
  font-weight: 600;
}

/* 스펙 행 */
.wes-chip__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 14px 0;
  border-top: 1px dashed rgba(77, 219, 154, 0.20);
  border-bottom: 1px dashed rgba(77, 219, 154, 0.20);
}
.wes-chip__specs > div {
  text-align: center;
  padding: 0 4px;
  position: relative;
}
.wes-chip__specs > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: rgba(77, 219, 154, 0.18);
}
.wes-chip__specs dt {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
}
.wes-chip__specs dd {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: #4ddb9a;
  margin: 0;
  letter-spacing: 0.04em;
}
.wes-chip__specs dd small {
  font-size: 0.55em;
  margin-left: 1px;
}

/* 칩 푸터 (제조 정보) */
.wes-chip__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  font-weight: 600;
}
.wes-chip__foot-sep {
  color: rgba(77, 219, 154, 0.45);
}

@media (max-width: 900px) {
  .wes-def__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .wes-chip {
    max-width: 420px;
    margin: 16px auto;
  }
}

/* ── v8.9: WES 페이지 — Definition Stage (다크 시네마틱) ── */
.wes-stage {
  position: relative;
  padding: 56px 40px;
  background: linear-gradient(180deg, #0B0B0B 0%, #131313 100%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}
/* 그리드 패턴 백 */
.wes-stage__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
/* 라디얼 글로우 (WES 중심) */
.wes-stage__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(2, 133, 91, 0.30) 0%, rgba(2, 133, 91, 0.08) 40%, transparent 70%);
  pointer-events: none;
  animation: wesStageGlow 4s ease-in-out infinite;
}
@keyframes wesStageGlow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.wes-hub {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 2.4fr auto 1fr;
  align-items: stretch;
  gap: 8px;
}
/* DATA · BODY 위성 카드 — 다크 스테이지 안 변형 */
.wes-hub__sat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  text-align: center;
  align-self: center;
  backdrop-filter: blur(4px);
}
.wes-hub__sat-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}
.wes-hub__sat-name {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-top: 2px;
}
.wes-hub__sat-role {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.wes-hub__sat-quote {
  font-size: 11px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}

/* 흐름 화살표 — 다크 위 그린 + 펄스 */
.wes-hub__flow {
  align-self: center;
  font-family: var(--mono);
  font-size: 28px;
  color: #4ddb9a;
  font-weight: 700;
  padding: 0 8px;
  animation: wesFlowPulse 2s ease-in-out infinite;
}
@keyframes wesFlowPulse {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(3px); }
}

/* WES 코어 — 다크 위에서 빛나는 비주얼 */
.wes-hub__core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 32px;
  background: linear-gradient(180deg, rgba(2, 133, 91, 0.22), rgba(2, 133, 91, 0.08));
  border: 1.5px solid #4ddb9a;
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(77, 219, 154, 0.15),
    0 16px 48px rgba(2, 133, 91, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
}
/* Physical AI 핀 라벨 (상단) */
.wes-hub__pin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #4ddb9a;
  background: rgba(11, 11, 11, 0.6);
  border: 1px solid rgba(77, 219, 154, 0.6);
  border-radius: 999px;
  margin-bottom: 4px;
  backdrop-filter: blur(6px);
}
.wes-hub__pin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(2, 133, 91, 0.22);
  animation: wesDotPulse 1.8s ease-in-out infinite;
}
@keyframes wesDotPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}
/* 두뇌 아이콘 — 다크 위에서 글로우 */
.wes-hub__core-icon {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(11, 11, 11, 0.5);
  border: 1.5px solid #4ddb9a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ddb9a;
  box-shadow:
    0 0 0 6px rgba(2, 133, 91, 0.12),
    0 0 32px rgba(77, 219, 154, 0.4);
}
.wes-hub__core-icon::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(77, 219, 154, 0.3);
  animation: wesIconRing 3s ease-out infinite;
}
@keyframes wesIconRing {
  0% { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}
.wes-hub__core-icon svg {
  width: 48px;
  height: 48px;
}
/* WES 라벨·역할 */
.wes-hub__core-name {
  font-family: var(--mono);
  font-size: clamp(48px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  text-shadow: 0 0 20px rgba(77, 219, 154, 0.4);
  margin: 0;
  line-height: 1;
}
.wes-hub__core-role {
  font-size: 16px;
  font-weight: 700;
  color: #4ddb9a;
  margin: 0;
}
.wes-hub__core-quote {
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 22ch;
}
/* 학습 통계 */
.wes-hub__stat {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px dashed rgba(77, 219, 154, 0.3);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.wes-hub__stat-value {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #4ddb9a;
  font-feature-settings: "tnum";
  text-shadow: 0 0 16px rgba(77, 219, 154, 0.3);
}
.wes-hub__stat-value small {
  font-size: 0.5em;
  font-weight: 600;
  margin-left: 2px;
}
.wes-hub__stat-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .wes-stage {
    padding: 32px 20px;
  }
  .wes-hub {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .wes-hub__flow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
  .wes-hub__core {
    padding: 32px 24px;
  }
}

/* ── v8.7: WES 페이지 — Definition (에디토리얼 스프레드) ── */

.wes-def__spread {
  position: relative;
  padding: 24px 0 32px;
  margin: 0 0 56px;
  overflow: hidden;
}
/* 배경 데코 텍스트 */
.wes-def__bg {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: clamp(140px, 22vw, 320px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(2, 133, 91, 0.10);
  text-stroke: 1.5px rgba(2, 133, 91, 0.10);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  white-space: nowrap;
}

/* Stamps strip (mono 행) */
.wes-def__strip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.wes-def__stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--primary-green);
  text-transform: uppercase;
}
.wes-def__stamp--ghost {
  color: var(--muted-soft);
  font-weight: 500;
}
.wes-def__stamp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(2, 133, 91, 0.18);
  animation: wesDotPulse 1.8s ease-in-out infinite;
}
@keyframes wesDotPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
.wes-def__strip-rule {
  width: 40px;
  height: 1px;
  background: var(--light-gray);
  display: inline-block;
}

/* Display 제목 — 큰 따옴표 디자인 요소 */
.wes-def__display {
  position: relative;
  z-index: 1;
  font-size: clamp(32px, 4.8vw, 64px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--dark-base);
  font-weight: 600;
  margin: 0 0 28px;
  max-width: 18ch;
}
.wes-def__display em {
  font-style: normal;
  color: var(--primary-green);
  font-weight: 800;
  position: relative;
  display: inline-block;
}
.wes-def__display em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.28em;
  background: rgba(2, 133, 91, 0.2);
  z-index: -1;
}
.wes-def__qm {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4em;
  color: var(--primary-green);
  opacity: 0.55;
  font-weight: 400;
  line-height: 0;
  vertical-align: -0.1em;
  display: inline-block;
  margin: 0 0.04em;
}
.wes-def__qm--open {
  margin-right: 0.06em;
}

/* Lead 본문 */
.wes-def__lead {
  position: relative;
  z-index: 1;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.75;
  color: var(--charcoal);
  margin: 0 0 32px;
  max-width: 56ch;
}
.wes-def__lead strong {
  color: var(--primary-green);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 인라인 어노테이션 — 다음 섹션 안내 */
.wes-def__annotate {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--primary-green);
  text-transform: uppercase;
  margin: 0;
  padding: 6px 12px 6px 0;
  border-left: 2px solid var(--primary-green);
  padding-left: 14px;
}
.wes-def__annotate-arrow {
  font-size: 14px;
  animation: wesDownBounce 1.8s ease-in-out infinite;
}
@keyframes wesDownBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@media (max-width: 760px) {
  .wes-def__bg {
    font-size: 160px;
    right: -20px;
    opacity: 0.7;
  }
  .wes-def__display {
    max-width: none;
  }
}

/* WMS → WES → WCS 포지셔닝 시각화 (강화) */
.wes-position {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 24px;
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--light-gray);
}
.wes-position__item {
  flex: 1;
  padding: 28px 24px;
  border-radius: 12px;
  background: var(--warm-gray);
  border: 1px solid transparent;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.25s var(--ease);
}
.wes-position__item--active {
  background: rgba(2, 133, 91, 0.07);
  border-color: var(--primary-green);
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(2, 133, 91, 0.14);
}
.wes-position__tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--muted-soft);
  text-transform: uppercase;
}
.wes-position__item--active .wes-position__tag {
  color: var(--primary-green);
}
.wes-position__name {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--dark-base);
  margin-top: 4px;
}
.wes-position__item--active .wes-position__name {
  color: var(--primary-green);
}
.wes-position__role {
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
}
.wes-position__detail {
  font-size: 12px;
  font-style: italic;
  color: var(--muted-text);
  line-height: 1.5;
  margin-top: 4px;
}
.wes-position__arrow {
  font-family: var(--mono);
  font-size: 24px;
  color: var(--primary-green);
  font-weight: 700;
  opacity: 0.7;
  flex-shrink: 0;
  align-self: center;
}

/* Footnote */
.wes-def__footnote {
  margin-top: 40px;
  padding: 24px 28px;
  background: rgba(2, 133, 91, 0.05);
  border-left: 3px solid var(--primary-green);
  border-radius: 4px;
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.7;
  color: var(--charcoal);
  max-width: none;
}
.wes-def__footnote strong {
  color: var(--primary-green);
  font-weight: 700;
}

@media (max-width: 900px) {
  .wes-def__hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 760px) {
  .wes-position {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .wes-position__item {
    padding: 20px 16px;
  }
  .wes-position__item--active {
    transform: none;
  }
  .wes-position__arrow {
    transform: rotate(90deg);
  }
}

/* ── v8.0: APPROACH — 에디토리얼 매니페스토 + 3-axis 지지 라인 ── */
.approach__statement {
  max-width: 920px;
  margin: 0 0 clamp(64px, 7vw, 96px);
}
.approach__statement-line {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.4;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--dark-base);
  margin: 0;
}
.approach__statement-line strong {
  font-weight: 700;
}
.approach__statement-line .accent {
  color: var(--primary-green);
}
.approach__statement-line--sub {
  margin-top: clamp(18px, 1.8vw, 24px);
  font-size: clamp(20px, 2.1vw, 28px);
  color: var(--charcoal);
  font-weight: 400;
}

.approach__axes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--light-gray);
}
.approach__axis {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.approach__axis-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--primary-green);
}
.approach__axis-h {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--dark-base);
  margin: 0;
}
.approach__axis-p {
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.65;
  color: var(--muted-text);
  margin: 0;
  max-width: 36ch;
}
@media (max-width: 900px) {
  .approach__axes {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .approach__axis-p { max-width: none; }
}

/* ── Partners Grid ───────────────────────────────── */
.partners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.partner {
  background: var(--white);
  border: var(--border-soft);
  border-radius: 12px;
  padding: 28px 24px;
  position: relative;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: var(--shadow-card);
}
.partner:hover {
  border-color: var(--primary-green);
  box-shadow: var(--shadow-card-hover);
}
.partner__status {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.partner__status--live {
  background: rgba(0,193,134,.12);
  color: var(--primary-green);
}
.partner__status--review {
  background: rgba(11,11,11,.06);
  color: var(--muted-text);
}
.partner .meta { margin-bottom: 16px; }
.partner__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--dark-base);
  margin: 0 0 6px;
}
.partner__role {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-text);
  margin: 0;
}

@media (max-width: 760px) {
  .partners { grid-template-columns: 1fr; }
}

/* ── Reveal Animation (Scroll Trigger) ───────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-delay="1"] {
  transition-delay: 0.08s;
}
[data-reveal][data-delay="2"] {
  transition-delay: 0.16s;
}
[data-reveal][data-delay="3"] {
  transition-delay: 0.24s;
}
[data-reveal][data-delay="4"] {
  transition-delay: 0.32s;
}
[data-reveal][data-delay="5"] {
  transition-delay: 0.40s;
}
[data-reveal][data-delay="6"] {
  transition-delay: 0.48s;
}
[data-reveal][data-delay="7"] {
  transition-delay: 0.56s;
}

/* ── v6.15: Scroll-to-top 버튼 (전역) ─────────────────── */
.scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--light-gray);
  background: var(--white);
  color: var(--charcoal);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
  box-shadow: 0 2px 8px rgba(11, 11, 11, 0.08);
}
.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top:hover {
  background: var(--primary-green);
  color: var(--white);
  border-color: var(--primary-green);
}
.scroll-top span {
  display: block;
  line-height: 1;
}
/* 모바일에서는 sticky-cta(60px 높이) 위에 위치 */
@media (max-width: 760px) {
  .scroll-top {
    bottom: 76px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
  /* 메뉴 열렸을 때는 scroll-top도 숨김 (sticky-cta와 같은 정책) */
  body:has(.nav.is-open) .scroll-top {
    display: none;
  }
}

/* ── Focus Indicators (Accessibility) ────────────────── */
.btn:focus-visible,
.nav a:focus-visible,
.faq__item summary:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 4px;
}

/* ── Utilities ────────────────────────────────────────── */
.text-green { color: var(--primary-green); }
.text-mono { font-family: var(--mono); }
.text-center { text-align: center; }

/* ── Showroom Page (pages/showroom.html) ─────────────── */
.visit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.visit-card {
  padding: 32px 24px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.visit-card__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.visit-card__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-base);
  margin: 0;
  line-height: 1.4;
}
.visit-card__sub {
  font-size: 14px;
  color: var(--muted-text);
  margin: 0;
  line-height: 1.6;
}

.visit-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.visit-point {
  padding: 40px 32px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  position: relative;
}
.visit-point__num {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  border: 1px solid var(--primary-green);
  border-radius: 50%;
  color: var(--primary-green);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 20px;
}
.visit-point h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--dark-base);
}
.visit-point p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-text);
  margin: 0;
}

.visit-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}
.visit-step {
  text-align: left;
  padding: 32px 24px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 8px;
}
.visit-step__num {
  display: inline-block;
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 700;
  color: var(--primary-green);
  line-height: 1;
  margin-bottom: 16px;
}
.visit-step h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--dark-base);
}
.visit-step p {
  font-size: 14px;
  color: var(--muted-text);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 960px) {
  .visit-grid { grid-template-columns: repeat(2, 1fr); }
  .visit-points,
  .visit-steps { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .visit-grid { grid-template-columns: 1fr; }
}

.rule {
  height: 1px;
  background: var(--light-gray);
  border: 0;
  margin: 64px 0;
}

/* Dark mode text on light backgrounds */
.section--alt .lede,
.section--cool .lede {
  color: var(--muted-text);
}

/* Dark mode text on dark backgrounds */
.section--dark .lede,
.section--dark p {
  color: rgba(255, 255, 255, 0.7);
}

/* ── v9.5: Product — AMR 모델 타일 갤러리 ───────────────── */
.amr-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .amr-tiles { gap: 16px; }
}
@media (max-width: 760px) {
  .amr-tiles { grid-template-columns: 1fr; gap: 16px; }
}

.amr-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 28px 28px 24px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  font: inherit;
  color: inherit;
  min-height: 200px;
}
.amr-tile:hover {
  border-color: var(--primary-green);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}
.amr-tile:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 3px;
}
.amr-tile--pending {
  background: rgba(0, 0, 0, 0.02);
  border-style: dashed;
}
.amr-tile--pending:hover {
  border-style: solid;
}
/* Model A: 배지 없이 상단 그린 라인으로 lead 표시 */
.amr-tile--ready {
  overflow: hidden;
  padding-top: 64px; /* 배지 없는 만큼 상단 여백 확보 → B/C와 라벨 위치 정렬 */
}
.amr-tile--ready::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-green) 0%, rgba(0, 193, 134, 0.45) 100%);
}

.amr-tile__status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.amr-tile__status--ready {
  background: rgba(0, 193, 134, 0.12);
  color: var(--primary-green);
}
.amr-tile__status--pending {
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted-text);
}

.amr-tile__label {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--dark-base);
  margin-bottom: 10px;
  line-height: 1.2;
}
.amr-tile__desc {
  font-size: 14px;
  color: var(--muted-text);
  line-height: 1.6;
  margin: 0 0 24px;
  flex-grow: 1;
}
.amr-tile__cta {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--primary-green);
  margin-top: auto;
}
.amr-tile--pending .amr-tile__cta {
  color: var(--muted-text);
}

/* ── v9.5: Modal 시스템 ─────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 10, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.modal__panel {
  position: relative;
  background: var(--white);
  border-radius: 10px;
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal.is-open .modal__panel {
  transform: translateY(0) scale(1);
}
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--muted-text);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--dark-base);
}
.modal__close:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}
.modal__body {
  padding: 36px 36px 32px;
}
@media (max-width: 600px) {
  .modal__body { padding: 28px 22px 24px; }
}
.modal__header {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--light-gray);
}
.modal__header .amr-tile__status {
  margin-bottom: 14px;
}
.modal__title {
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--dark-base);
  margin: 0 0 12px;
  line-height: 1.2;
}
.modal__lede {
  font-size: 15px;
  color: var(--muted-text);
  line-height: 1.65;
  margin: 0;
  max-width: 56ch;
}
.modal__visual {
  position: relative;
  margin: 0 0 36px;
  padding: 44px 32px 40px;
  background: radial-gradient(ellipse at 50% 30%, rgba(0, 193, 134, 0.08) 0%, rgba(0, 0, 0, 0.02) 60%, transparent 100%), #FAFBFA;
  border: 1px solid var(--light-gray);
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
}
.modal__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 193, 134, 0.05) 50%, transparent 100%) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(0, 193, 134, 0.05) 50%, transparent 100%) 0 100% / 100% 1px no-repeat;
  pointer-events: none;
}
.modal__visual img {
  position: relative;
  max-width: 280px;
  width: 100%;
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.08));
}
@media (max-width: 600px) {
  .modal__visual { padding: 32px 18px 28px; }
  .modal__visual img { max-width: 220px; }
}

/* ── v9.6: Modal — 통합 hero (일러스트 + 메트릭) ── */
.modal__hero {
  margin: 0 0 36px;
  background: linear-gradient(180deg, rgba(0, 193, 134, 0.06) 0%, #FAFBFA 100%);
  border: 1px solid var(--light-gray);
  border-radius: 10px;
  overflow: hidden;
}
.modal__hero-visual {
  position: relative;
  padding: 40px 32px 24px;
  text-align: center;
}
.modal__hero-visual::before,
.modal__hero-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 193, 134, 0.18) 50%, transparent 100%);
  pointer-events: none;
}
.modal__hero-visual::before { top: 0; }
.modal__hero-visual::after { bottom: 0; opacity: 0; }
.modal__hero-visual img {
  position: relative;
  max-width: 240px;
  width: 100%;
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.10));
}
.modal__hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 22px 8px 26px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.5);
}
/* 호환: 옛 .modal__metrics 구조 (단독 메트릭 스트립) */
.modal__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 36px;
  padding: 28px 8px;
  background: linear-gradient(180deg, rgba(0, 193, 134, 0.05) 0%, #FAFBFA 100%);
  border: 1px solid var(--light-gray);
  border-radius: 10px;
}
.modal__metric {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 16px;
}
.modal__metric:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 14%;
  height: 72%;
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
}
.modal__metric-value {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dark-base);
  line-height: 1;
  font-feature-settings: "tnum";
}
.modal__metric-value small {
  font-size: 0.46em;
  font-weight: 500;
  color: var(--muted-text);
  margin-left: 3px;
  letter-spacing: 0;
}
.modal__metric-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-text);
  margin-top: 12px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .modal__metrics,
  .modal__hero-metrics {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
    padding: 22px 8px 24px;
  }
  .modal__hero-visual { padding: 28px 18px 18px; }
  .modal__hero-visual img { max-width: 200px; }
  .modal__metric {
    padding: 0 8px;
  }
  .modal__metric:nth-child(2)::after {
    display: none;
  }
  .modal__metric-label {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}

.modal__highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal__highlights li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--charcoal);
}
.modal__highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(0, 193, 134, 0.18);
}
.modal__highlights li strong {
  color: var(--dark-base);
  font-weight: 700;
}

.modal__section {
  margin-bottom: 24px;
}
.modal__section--specs {
  background: #FAFBFA;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  padding: 22px 24px;
}
.modal__section--specs .modal__section-title {
  color: var(--dark-base);
}
.modal__section--specs .modal__section-title::before {
  background: var(--dark-base);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
@media (max-width: 600px) {
  .modal__section--specs { padding: 18px 18px; }
}
.modal__section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-green);
  margin: 0 0 16px;
}
.modal__section-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(0, 193, 134, 0.18);
}

/* ── v9.5: Spec 테이블 — Product/WES 공용 ───────────────── */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.65;
}
.spec th {
  text-align: left;
  vertical-align: top;
  font-weight: 500;
  color: var(--muted-text);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  padding: 13px 18px 13px 0;
  border-bottom: 1px solid var(--light-gray);
}
/* 2-col label/value 표 (thead 없음, Product 모달) — 라벨 컬럼 고정 폭 */
.spec:not(:has(thead)) th {
  width: 30%;
  white-space: nowrap;
}
.spec td {
  text-align: left;
  vertical-align: top;
  padding: 13px 0;
  color: var(--charcoal);
  border-bottom: 1px solid var(--light-gray);
}
.spec tr:first-child > th,
.spec tr:first-child > td {
  padding-top: 4px;
}
.spec tr:last-child > th,
.spec tr:last-child > td {
  padding-bottom: 4px;
  border-bottom: none;
}
.spec strong {
  color: var(--dark-base);
  font-weight: 700;
}
/* WES 페이지의 3-col 비교 테이블 — thead 헤더는 별도 톤 */
.spec thead th {
  font-weight: 700;
  color: var(--dark-base);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--dark-base);
  width: auto;
}
.spec thead + tbody tr:first-child > th,
.spec thead + tbody tr:first-child > td {
  padding-top: 16px;
}

.modal__placeholder {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 28px;
}
.modal__placeholder p {
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.7;
  margin: 0 0 8px;
}
.modal__placeholder p:last-child { margin-bottom: 0; }
.modal__footer {
  padding-top: 8px;
}
/* dual CTA (진단 + 상담) */
.modal__footer--dual {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
}
.modal__footer--dual .btn {
  flex: 1 1 calc(50% - 6px);
  justify-content: center;
  min-width: 0;
}
@media (max-width: 520px) {
  .modal__footer--dual .btn {
    flex: 1 1 100%;
  }
}
.modal__footer-hint {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-text);
  text-align: center;
}

/* 모달 열렸을 때 body 스크롤 잠금 */
body.modal-open {
  overflow: hidden;
}

/* ── v9.9: Calculator — AMR 견적 추정 도구 ─────────────────── */
.calc-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 56px;
}
@media (max-width: 760px) {
  .calc-form { margin-top: 40px; gap: 16px; }
}

.calc-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 10px;
  padding: 28px 32px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.calc-card.is-filled {
  border-color: rgba(0, 193, 134, 0.4);
}
.calc-card.is-filled::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: -1px;
  width: 3px;
  background: var(--primary-green);
  border-radius: 0 3px 3px 0;
}
@media (max-width: 760px) {
  .calc-card { padding: 22px 20px; }
}

.calc-card__head {
  margin-bottom: 22px;
}
.calc-card__num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-green);
  margin-bottom: 12px;
}
.calc-card__title {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--dark-base);
  margin: 0 0 8px;
  line-height: 1.35;
}
.calc-card__hint {
  font-size: 14px;
  color: var(--muted-text);
  line-height: 1.6;
  margin: 0;
}

/* Chip 버튼 (선택지) */
.calc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.calc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.12s ease;
  letter-spacing: -0.005em;
}
.calc-chip small {
  font-size: 0.85em;
  color: var(--muted-text);
  font-weight: 400;
  margin-left: 2px;
}
.calc-chip:hover {
  border-color: var(--primary-green);
  color: var(--dark-base);
}
.calc-chip:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}
.calc-chip[aria-checked="true"] {
  background: var(--primary-green);
  border-color: var(--primary-green);
  color: var(--white);
}
.calc-chip[aria-checked="true"] small {
  color: rgba(255, 255, 255, 0.78);
}
.calc-chip[aria-checked="true"]::before {
  content: "✓";
  font-size: 0.95em;
  font-weight: 700;
}

/* Number input */
.calc-input {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  max-width: 320px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.calc-input:focus-within {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(0, 193, 134, 0.12);
}
.calc-input__field {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  height: 52px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--dark-base);
  background: transparent;
  border: none;
  outline: none;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
  -moz-appearance: textfield;
}
.calc-input__field::-webkit-outer-spin-button,
.calc-input__field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calc-input__field::placeholder {
  color: var(--muted-text);
  font-weight: 400;
  letter-spacing: 0;
}
.calc-input__unit {
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-text);
  background: rgba(0, 0, 0, 0.025);
  border-left: 1px solid var(--light-gray);
  letter-spacing: 0.04em;
}

/* 제출 영역 */
.calc-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--light-gray);
}
.calc-submit .btn {
  min-width: 280px;
  justify-content: center;
}
.calc-submit .btn:disabled,
.calc-submit .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.calc-submit__note {
  font-size: 13px;
  color: var(--muted-text);
  text-align: center;
  margin: 0;
  max-width: 56ch;
  line-height: 1.6;
}

/* Loading 상태 */
.calc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 80px 20px;
  text-align: center;
}
.calc-loading__dots {
  display: flex;
  gap: 10px;
}
.calc-loading__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary-green);
  animation: calcLoadingPulse 1.2s ease-in-out infinite;
}
.calc-loading__dots span:nth-child(2) { animation-delay: 0.2s; }
.calc-loading__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes calcLoadingPulse {
  0%, 60%, 100% { opacity: 0.25; transform: scale(0.7); }
  30% { opacity: 1; transform: scale(1); }
}
.calc-loading__msg {
  font-size: 14px;
  color: var(--muted-text);
  letter-spacing: 0.02em;
  margin: 0;
}

/* Result 영역 */
.calc-result {
  animation: calcResultFadeIn 0.6s var(--ease) both;
}
@keyframes calcResultFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.calc-result__card {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 560px;
}
.calc-result__card .result-card__value {
  font-feature-settings: "tnum";
  letter-spacing: -0.025em;
}
.calc-result__sep {
  color: var(--muted-text);
  font-weight: 500;
  margin: 0 0.12em;
}
.calc-result__effects-title {
  text-align: center;
  margin: 0 0 28px;
  color: var(--dark-base);
}
.calc-result__effects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
@media (max-width: 900px) {
  .calc-result__effects { grid-template-columns: 1fr; gap: 16px; }
}
.calc-effect {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 10px;
  padding: 26px 24px;
}
.calc-effect__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 193, 134, 0.10);
  color: var(--primary-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.calc-effect__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--dark-base);
  margin: 0 0 8px;
}
.calc-effect__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--charcoal);
  margin: 0;
}
.calc-effect__src {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-text);
}

.calc-result__cta {
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid var(--light-gray);
}
.calc-result__cta .btn {
  margin-bottom: 24px;
}
.calc-result__disclaimer {
  font-size: 12.5px;
  color: var(--muted-text);
  line-height: 1.7;
  margin: 0 auto;
  max-width: 64ch;
}

/* ── v9.10: Calculator v2 — 옵션 카드 배지 + ROI/Before-After ── */
.calc-card__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted-text);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 100px;
  vertical-align: middle;
  text-transform: uppercase;
}
.calc-card--optional {
  background: rgba(0, 0, 0, 0.015);
  border-style: dashed;
}
.calc-card--optional.is-filled {
  background: var(--white);
  border-style: solid;
}

/* ROI 카드 — 절감 효과 */
.calc-roi {
  margin: 0 0 48px;
  animation: calcResultFadeIn 0.55s var(--ease) both;
}
.calc-roi-card {
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 193, 134, 0.05) 0%, #FAFBFA 100%);
  border: 1px solid rgba(0, 193, 134, 0.25);
  border-radius: 10px;
  padding: 36px 28px;
  margin: 0 auto 40px;
  max-width: 620px;
}
.calc-roi-card__label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-green);
  margin: 0 0 12px;
}
.calc-roi-card__value {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dark-base);
  line-height: 1.15;
  margin: 0 0 14px;
  font-feature-settings: "tnum";
}
.calc-roi-card__value small {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--muted-text);
  margin-left: 4px;
}
.calc-roi-card__sep {
  color: var(--muted-text);
  font-weight: 500;
  margin: 0 0.12em;
}
.calc-roi-card__note {
  font-size: 12px;
  color: var(--muted-text);
  line-height: 1.7;
  margin: 0;
}

/* Before/After 비교 */
.calc-compare__heading {
  text-align: center;
  margin: 0 0 24px;
  color: var(--dark-base);
}
.calc-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 760px) {
  .calc-compare { grid-template-columns: 1fr; }
}
.calc-compare__card {
  padding: 28px 26px;
  border-radius: 10px;
  background: var(--white);
}
.calc-compare__before {
  border: 1px dashed var(--light-gray);
  color: var(--charcoal);
}
.calc-compare__after {
  border: 1.5px solid var(--primary-green);
  background: rgba(2, 133, 91, 0.03);
}
.calc-compare__meta {
  margin-bottom: 14px;
}
.calc-compare__before .calc-compare__meta .meta__num,
.calc-compare__before .calc-compare__meta .meta__label {
  color: var(--muted-text);
}
.calc-compare__after .calc-compare__meta .meta__num,
.calc-compare__after .calc-compare__meta .meta__label {
  color: var(--primary-green);
}
.calc-compare__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--dark-base);
  margin: 0 0 18px;
  line-height: 1.35;
}
.calc-compare__before .calc-compare__title {
  color: var(--muted-text);
}
.calc-compare__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--charcoal);
}
.calc-compare__before .calc-compare__list { color: var(--muted-text); }
.calc-compare__list li {
  position: relative;
  padding-left: 14px;
}
.calc-compare__list li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--muted-text);
}
.calc-compare__after .calc-compare__list strong {
  color: var(--primary-green);
  font-weight: 700;
}

/* Home Hero 보조 텍스트 링크 — v9.10 */
.hero__secondary-link {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.hero__secondary-link a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease, gap 0.2s ease;
}
.hero__secondary-link a:hover {
  color: var(--primary-green);
  gap: 10px;
}
.hero__secondary-link span {
  display: inline-block;
  transition: transform 0.2s ease;
}
.hero__secondary-link a:hover span {
  transform: translateX(2px);
}

/* ── Print Styles ──────────────────────────────────────── */
@media print {
  .header,
  .nav__toggle,
  .sticky-cta,
  .modal {
    display: none;
  }
  body {
    color: var(--charcoal);
    background: var(--white);
  }
}

/* ── v11.4: Why Now 슬림 스탯 밴드 (배경 지표 — Numbers 대비 위계 낮춤) ── */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
  padding: 28px 0 26px;
  border-top: 2px solid var(--dark-base);
  border-bottom: 1px solid var(--light-gray);
}
.stat-band__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-band__value {
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--dark-base);
}
.stat-band__value small {
  font-size: 0.5em;
  font-weight: 600;
  margin-left: 2px;
}
.stat-band__label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-text);
}
@media (max-width: 760px) {
  .stat-band {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 32px;
  }
}

/* ── v11.5: ① 스크롤 반응형 헤더 — 홈 히어로 위 투명 → 스크롤 시 블러 바 (데스크탑) ── */
.header {
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* v11.8: blur는 데스크탑 한정 — 모바일에서 backdrop-filter가 풀스크린 메뉴(fixed)의
   containing block을 헤더 박스로 바꿔 오버레이가 쪼그라드는 버그 방지 */
@media (min-width: 761px) {
  .header--scrolled {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom-color: var(--light-gray);
  }
  .header--overlay {
    position: fixed;
    left: 0;
    right: 0;
  }
  .header--overlay:not(.header--scrolled) {
    background: transparent;
    border-bottom-color: transparent;
  }
  .header--overlay:not(.header--scrolled) .brand__logo {
    filter: brightness(0) invert(1);
  }
  .header--overlay:not(.header--scrolled) .brand__sub,
  .header--overlay:not(.header--scrolled) .nav a:not(.nav__cta) {
    color: var(--white);
  }
}
main section[id] { scroll-margin-top: 88px; }

/* ── v11.5: ④ 히어로 스크롤 유도 큐 ── */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  z-index: 2;
  pointer-events: none;
}
.hero__scroll-cue-arrow {
  font-size: 14px;
  letter-spacing: 0;
  animation: cueBounce 2s var(--ease) infinite;
}
@keyframes cueBounce {
  0%, 100% { transform: translateY(0); opacity: 0.72; }
  50% { transform: translateY(6px); opacity: 1; }
}
@media (max-width: 760px) {
  /* 하단 고정 문의 바(sticky-cta, ~60px)에 가리지 않도록 위로 */
  .hero__scroll-cue { bottom: 76px; }
}

/* ── v11.5: ⑨ 카드 호버 리프트 (보더 초록은 기존 규칙) ── */
.card:hover,
.why-card:hover {
  transform: translateY(-2px);
}

/* ── v11.5: ⑦ 모션 접근성 — prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__title, .hero__byline, .hero__lede, .hero__cta, .hero__strip,
  .hero__scroll-cue-arrow, .hero__title em::after {
    animation: none !important;
  }
  .card:hover, .why-card:hover, .amr-tile:hover, .process__step:hover {
    transform: none;
  }
}

/* ── v11.6: ③ 모바일 풀스크린 오버레이 메뉴 (Toss 문법) ── */
.nav__contact { display: none; }
@media (max-width: 760px) {
  .nav {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--dark-base);
    border-bottom: 0;
    padding: 96px 28px 40px;
    z-index: 95;
    justify-content: flex-start;
    /* v11.9 (E-2): inset:0 이라 오버레이 높이는 뷰포트에 고정된다. 화면이 낮으면
       (가로 모드 등) 메뉴 항목이 넘쳐 잘리는데, body 스크롤까지 잠겨 있어 하단
       CTA·연락처에 아예 닿을 수 없었다. 오버레이 자체를 스크롤 가능하게 만든다. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav a:not(.nav__cta) {
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateY(12px);
  }
  .nav.is-open a:not(.nav__cta) { animation: navLinkIn 0.45s var(--ease) forwards; }
  .nav.is-open a:nth-child(1) { animation-delay: 0.05s; }
  .nav.is-open a:nth-child(2) { animation-delay: 0.1s; }
  .nav.is-open a:nth-child(3) { animation-delay: 0.15s; }
  .nav.is-open a:nth-child(4) { animation-delay: 0.2s; }
  .nav.is-open a:nth-child(5) { animation-delay: 0.25s; }
  .nav a.nav__cta {
    margin-top: 32px;
    height: 56px;
    font-size: 16px;
  }
  .nav__contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
  }
  .nav__toggle {
    position: relative;
    z-index: 110;
  }
  .nav.is-open ~ .nav__toggle {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.35);
    background: transparent;
  }
}
@keyframes navLinkIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── v11.6: ⑪ 유튜브 포스터 (클릭 재생) ── */
.video-poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.video-poster:hover img {
  transform: scale(1.03);
  opacity: 1;
}
.video-poster__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-green);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease);
}
.video-poster__play::after {
  content: "";
  border-left: 15px solid var(--white);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 5px;
}
.video-poster:hover .video-poster__play {
  transform: scale(1.1);
}
.video-poster:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 3px;
}

/* ── v11.6: ⑫ CTA 3-step 카드 ── */
.cta-steps {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto 40px;
}
.cta-step {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.cta-step__num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--secondary-green);
}
.cta-step__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
}
.cta-step__desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 760px) {
  .cta-steps { flex-direction: column; gap: 10px; }
  .cta-step { flex-direction: row; justify-content: center; gap: 12px; padding: 14px 16px; }
}

/* v11.6: reduced-motion 보강 — 오버레이 메뉴 링크 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
  .nav a:not(.nav__cta) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .video-poster img, .video-poster__play { transition: none; }
}

/* ── v11.7: 온보딩 4단계 — 데스크탑만 4열 (모바일 1열 적층은 기본 .process 규칙 상속) ── */
@media (min-width: 761px) {
  .process--four { grid-template-columns: repeat(4, 1fr); }
}

/* ── v11.7: ⑧ Seamless Flow 스티키 스크롤 스토리 (데스크탑) ── */
@media (min-width: 1025px) {
  .flow-sticky {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 64px;
    align-items: start;
  }
  .flow-sticky__visual {
    position: sticky;
    top: 120px;
  }
  .flow-sticky .flow-illust { margin: 0; }
  .flow-sticky .process {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .flow-sticky .process__step {
    min-height: 44vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 24px;
    opacity: 0.35;
    transition: opacity 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }
  .flow-sticky .process__step.is-active {
    opacity: 1;
    border-color: rgba(2, 133, 91, 0.45);
  }
  .flow-sticky .process__step:not(:last-child)::after { display: none; }
}

/* ── v11.7: ⑩ 3자 비교 — 컬럼 카드 (Toss 요금제 문법) ── */
.compare-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.compare-card {
  position: relative;
  background: var(--white);
  border: var(--border-soft);
  border-radius: 12px;
  padding: 28px 24px;
}
.compare-card__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--muted-text);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--light-gray);
}
.compare-card__name small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  color: var(--muted-soft);
}
.compare-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.compare-card__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.compare-card__k {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted-soft);
}
.compare-card__v {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-text);
}
.compare-card--featured {
  border: 1.5px solid var(--primary-green);
  background: rgba(2, 133, 91, 0.03);
}
.compare-card--featured .compare-card__name {
  color: var(--primary-green);
  border-bottom-color: rgba(2, 133, 91, 0.25);
}
.compare-card--featured .compare-card__v {
  color: var(--charcoal);
  font-weight: 600;
}
.compare-card__badge {
  position: absolute;
  top: -11px;
  right: 20px;
  background: var(--primary-green);
  color: var(--white);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 12px;
  border-radius: 999px;
}
@media (max-width: 900px) {
  .compare-cards { grid-template-columns: 1fr; }
  .compare-card--featured { order: -1; }
}

/* v11.7: reduced-motion — 스티키 스토리 페이드 제거 */
@media (prefers-reduced-motion: reduce) {
  .flow-sticky .process__step { opacity: 1 !important; transition: none !important; }
}

/* ── v11.9: 모바일 줄바꿈 정리 — 본문 카피의 장식용 <br>은 좁은 폭에서 무효화.
   구조적 줄바꿈(케이스 프로필 라벨/값 = .lede strong 뒤)은 복원. 헤드라인(h1/h2)·주소·연락처는 별도 클래스라 영향 없음 ── */
@media (max-width: 760px) {
  .lede br,
  .page-hero__desc br,
  .approach__statement-line br,
  .approach__axis-p br,
  .modal__lede br,
  .numbers__note br,
  .process__step p br,
  .wes-feature__desc br {
    display: none;
  }
  .lede strong + br {
    display: inline;
  }
}

/* ── v12.2: 이미지 슬라이드 갤러리 (scroll-snap + dots) ── */
.gallery {
  position: relative;
  background: var(--warm-gray);
  border-radius: 8px;
  overflow: hidden;
}
.gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 340px;
  padding: 20px 48px;
  box-sizing: border-box;
}
.gallery__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}
.gallery__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--light-gray);
  background: rgba(255, 255, 255, 0.92);
  color: var(--charcoal);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s var(--ease);
}
.gallery__btn:hover { border-color: var(--primary-green); color: var(--primary-green); }
.gallery__btn--prev { left: 10px; }
.gallery__btn--next { right: 10px; }
.gallery__dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.gallery__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--light-gray);
  transition: background 0.2s;
}
.gallery__dot.is-active { background: var(--primary-green); }
@media (max-width: 480px) {
  .gallery__slide { height: 260px; padding: 16px 40px; }
}

/* ── v13.0: 카드 아이콘 액센트 (Flexibility 등 일반 .card용) ── */
.card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(2, 133, 91, 0.08);
  color: var(--primary-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

/* ── v13.2: 섹션5 설비 비교 비주얼 (검수대 직행 프로세스) ── */
.viz-card {
  height: 100%;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.viz-card--fassto {
  border: 1.5px solid var(--primary-green);
  background: rgba(2, 133, 91, 0.02);
}
.viz-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.viz-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted-text);
}
.viz-card--fassto .viz-card__title {
  color: var(--primary-green);
}
.viz-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted-soft);
}
svg.viz {
  width: 100%;
  height: auto;
  display: block;
}
.viz-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}
.viz-chip {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--cool-gray);
  color: var(--muted-text);
}
.viz-card--fassto .viz-chip {
  background: rgba(2, 133, 91, 0.08);
  color: var(--primary-green);
  font-weight: 600;
}
.viz-cap {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-text);
  margin: 0;
}
/* 스크롤 진입 시 요소별 등장 애니메이션 */
svg.viz [data-anim] { opacity: 0; }
[data-reveal].is-visible svg.viz [data-anim] {
  animation: vizIn 0.5s var(--ease) forwards;
}
[data-reveal].is-visible svg.viz [data-anim="pop"] {
  animation: vizPop 0.45s var(--ease) forwards;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes vizIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@keyframes vizPop {
  from { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.15); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  svg.viz [data-anim] { opacity: 1 !important; animation: none !important; }
}

/* ── v14.2 — 섹션5 아이소메트릭 상시 모션 (2026-08-14) ── */
svg.viz .belt { stroke-dasharray: 4 7; animation: vizBelt 1.1s linear infinite; }
@keyframes vizBelt { to { stroke-dashoffset: -22; } }
svg.viz .flow { stroke-dasharray: 5 6; animation: vizFlow 1.5s linear infinite; }
@keyframes vizFlow { to { stroke-dashoffset: -22; } }
svg.viz .ride { animation: vizRide 5.6s linear infinite; opacity: 0; }
svg.viz .ride--2 { animation-delay: 2.8s; }
@keyframes vizRide {
  0% { transform: translate(0, 0); opacity: 0; }
  9% { opacity: 1; }
  86% { opacity: 1; }
  100% { transform: translate(-38.1px, 22px); opacity: 0; }
}
svg.viz .amr-a { animation: amrTripA 12s ease-in-out infinite; }
@keyframes amrTripA {
  0%, 21% { transform: translate(0, 0); }
  48% { transform: translate(-65.8px, 38px); }
  52% { transform: translate(-65.8px, 38px); }
  80%, 100% { transform: translate(0, 0); }
}
svg.viz .amr-b { animation: amrTripB 12s ease-in-out infinite; }
@keyframes amrTripB {
  0%, 26% { transform: translate(0, 0); }
  50% { transform: translate(55.4px, 32px); }
  54% { transform: translate(55.4px, 32px); }
  78%, 100% { transform: translate(0, 0); }
}
svg.viz .amr-c { animation: amrTripC 12s ease-in-out infinite; }
@keyframes amrTripC {
  0%, 32% { transform: translate(0, 0); }
  52% { transform: translate(-22.5px, 13px); }
  56% { transform: translate(-22.5px, 13px); }
  76%, 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  svg.viz .belt, svg.viz .flow, svg.viz .ride, svg.viz .amr-a, svg.viz .amr-b, svg.viz .amr-c { animation: none; }
  svg.viz .ride { opacity: 1; }
}

/* ── v15.0 — 다크 섹션 실측 스탯 스트립 (구 Numbers 흡수) ── */
.stat-strip {
  margin-top: 64px; padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; align-items: center; gap: 28px 56px;
}
.stat-strip__item { display: flex; flex-direction: column; gap: 5px; }
.stat-strip__item strong {
  font-size: 26px; font-weight: 700; color: #fff;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1;
}
.stat-strip__item strong small { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.65); margin-left: 2px; }
.stat-strip__item > span { font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: 0; }
.stat-strip__link { margin-left: auto; font-size: 13px; letter-spacing: 0; color: var(--secondary-green); font-weight: 600; white-space: nowrap; }
.stat-strip__note { margin-top: 18px; font-size: 11.5px; color: rgba(255,255,255,.38); letter-spacing: 0; }
@media (max-width: 760px) {
  .stat-strip { gap: 20px 32px; margin-top: 48px; padding-top: 28px; }
  .stat-strip__item strong { font-size: 22px; }
  .stat-strip__link { margin-left: 0; flex-basis: 100%; }
}



/* ── v17.1 — 설치 타임라인 (12s): 레일이 내려오며 랙이 밀려나고 → 전용 검수대 연결 → 가동 / 로봇 주행 진입 ── */
svg.viz .stg-shift-l { animation: stgShiftL 12s ease-in-out infinite; }
svg.viz .stg-shift-r { animation: stgShiftR 12s ease-in-out infinite; }
@keyframes stgShiftL {
  0%, 10% { transform: translate(13.9px, 8px); }
  22%, 93% { transform: translate(0, 0); }
  99%, 100% { transform: translate(13.9px, 8px); }
}
@keyframes stgShiftR {
  0%, 10% { transform: translate(-13.9px, -8px); }
  22%, 93% { transform: translate(0, 0); }
  99%, 100% { transform: translate(-13.9px, -8px); }
}
svg.viz .stg-conv { animation: stgConv 12s ease-out infinite; }
@keyframes stgConv {
  0%, 12% { opacity: 0; transform: translate(0, -14px); }
  15% { opacity: 1; transform: translate(0, -11px); }
  26%, 92% { opacity: 1; transform: translate(0, 0); }
  98%, 100% { opacity: 0; transform: translate(0, -14px); }
}
svg.viz .stg-desk-old { animation: stgDeskOld 12s ease infinite; }
@keyframes stgDeskOld {
  0%, 30% { opacity: 1; }
  38%, 93% { opacity: 0; }
  99%, 100% { opacity: 1; }
}
svg.viz .stg-desk-new { animation: stgDeskNew 12s ease infinite; }
@keyframes stgDeskNew {
  0%, 32% { opacity: 0; }
  40%, 93% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
svg.viz .stg-flow { animation: stgFlow 12s ease infinite; }
@keyframes stgFlow {
  0%, 42% { opacity: 0; }
  50%, 89% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
/* 로봇: 각자 통로로 주행해 들어와 배치 → 피킹 셔틀, 말미 페이드 후 반복 */
svg.viz .bw-a { animation: botEnterA 12s ease-in-out infinite; }
svg.viz .bw-b { animation: botEnterB 12s ease-in-out infinite; }
svg.viz .bw-c { animation: botEnterC 12s ease-in-out infinite; }
svg.viz .bw-a, svg.viz .bw-b, svg.viz .bw-c { transform-box: fill-box; transform-origin: 50% 62%; }
@keyframes botEnterA {
  0%, 13% { opacity: 0; transform: scale(0.5); }
  16% { opacity: 1; transform: scale(1.25); }
  18% { transform: scale(0.94); }
  20% { transform: scale(1); }
  94% { opacity: 1; transform: scale(1); }
  99%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes botEnterB {
  0%, 18% { opacity: 0; transform: scale(0.5); }
  21% { opacity: 1; transform: scale(1.25); }
  23% { transform: scale(0.94); }
  25% { transform: scale(1); }
  94% { opacity: 1; transform: scale(1); }
  99%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes botEnterC {
  0%, 23% { opacity: 0; transform: scale(0.5); }
  26% { opacity: 1; transform: scale(1.25); }
  28% { transform: scale(0.94); }
  30% { transform: scale(1); }
  94% { opacity: 1; transform: scale(1); }
  99%, 100% { opacity: 0; transform: scale(1); }
}
/* 검수대 핸드오프: 중앙 로봇 토트는 검수대 도착(왕복 주기 50%)에 내려놓고 빈 몸으로 복귀 */
svg.viz .tote-a { animation: toteA 12s linear infinite; }
@keyframes toteA {
  0%, 49% { opacity: 1; }
  52%, 96% { opacity: 0; }
  99%, 100% { opacity: 1; }
}
svg.viz .drop-a { animation: dropA 12s ease infinite; }
@keyframes dropA {
  0%, 50% { opacity: 0; }
  54%, 93% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
/* 점선 경로: 담당 로봇 도킹 직후 순차 등장 */
svg.viz .fp-1 { animation: fpIn1 12s ease infinite; }
svg.viz .fp-2 { animation: fpIn2 12s ease infinite; }
svg.viz .fp-3 { animation: fpIn3 12s ease infinite; }
@keyframes fpIn1 {
  0%, 16% { opacity: 0; }
  21%, 93% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
@keyframes fpIn2 {
  0%, 21% { opacity: 0; }
  26%, 93% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
@keyframes fpIn3 {
  0%, 26% { opacity: 0; }
  31%, 93% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  svg.viz .stg-shift-l, svg.viz .stg-shift-r, svg.viz .stg-conv, svg.viz .stg-flow,
  svg.viz .stg-desk-new, svg.viz .bw-a, svg.viz .bw-b, svg.viz .bw-c,
  svg.viz .fp-1, svg.viz .fp-2, svg.viz .fp-3, svg.viz .tote-a, svg.viz .drop-a { animation: none; }
  svg.viz .stg-desk-old { animation: none; opacity: 0; }
}