/* ============================================================
   el_gate — 이온디 관문(Gateway) 메인 v0.4 (EOND UI 에디션)
   eondui.css 토큰(--e-*) 위에서 동작. 구조는 v0.3 토스 문법
   (볼드 한글 타이포 + 보더 없는 라운드 카드)을 유지하되,
   브랜드는 EOND 오렌지 + 딥네이비 + el_imin 뉴트럴.
   다크모드: eondui [data-theme="dark"] 스왑을 그대로 상속.
   선행 로드: /static/el_design/eondui.css
   ============================================================ */

/* ── 1. 브리지: supporterb 베이스(--md-sys-*)를 eondui 토큰으로 연결 ──
   gate.css가 theme.css 뒤에 로드되므로 :root와 [data-theme="dark"]
   양쪽에 같은 var() 참조를 선언해 라이트/다크 모두 eondui가 진실 소스가 된다. */
:root, [data-theme="dark"] {
  --md-sys-color-primary: var(--e-accent);
  --md-sys-color-on-primary: var(--e-on-accent);
  --md-sys-color-primary-container: var(--e-accent-soft);
  --md-sys-color-on-primary-container: var(--e-accent-strong);
  --md-sys-color-secondary-container: var(--e-paper);
  --md-sys-color-on-secondary-container: var(--e-muted);
  --md-sys-color-tertiary: var(--e-success);
  --md-sys-color-tertiary-container: var(--e-success-soft);
  --md-sys-color-on-tertiary-container: var(--e-success-ink);
  --md-sys-color-warning: var(--e-warning);
  --md-sys-color-warning-container: var(--e-warning-soft);
  --md-sys-color-on-warning-container: var(--e-warning-ink);
  --md-sys-color-error: var(--e-danger);
  --md-sys-color-background: var(--e-white);
  --md-sys-color-on-background: var(--e-ink);
  --md-sys-color-surface: var(--e-white);
  --md-sys-color-on-surface: var(--e-ink);
  --md-sys-color-on-surface-variant: var(--e-muted);
  --md-sys-color-surface-container-lowest: var(--e-white);
  --md-sys-color-surface-container-low: var(--e-paper);
  --md-sys-color-surface-container: var(--e-paper);
  --md-sys-color-surface-container-high: var(--e-line);
  --md-sys-color-surface-container-highest: var(--e-border);
  --md-sys-color-outline: var(--e-border);
  --md-sys-color-outline-variant: var(--e-line);
  --md-sys-color-inverse-surface: var(--e-night);
  --md-sys-color-inverse-on-surface: #F5F4EF;
  --md-sys-color-inverse-primary: var(--e-accent);
  --sb-hero-bg: var(--e-night);
  --sb-hero-ink: #F5F4EF;
  --sb-hero-accent: var(--e-accent);
  --sb-font: var(--e-font-sans);
  --sb-ease: var(--e-ease);
}

/* 헤더: 표면색 블러 글래스 */
.sb-header {
  background: color-mix(in srgb, var(--e-white) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: transparent;
}
.sb-logo { font-weight: 800; }
.ga-logo-img { height: 22px; width: auto; display: block; }
[data-theme="dark"] .ga-logo-img { filter: invert(1) brightness(1.6); }

/* 섹션 제목 볼드 유지 (v0.3 계승) */
.sb-h2 { font-weight: 800; letter-spacing: -0.026em; font-size: clamp(26px, 3.6vw, 46px); }
.sb-cta-title { font-weight: 800; letter-spacing: -0.028em; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.24; }

/* ── 2. 히어로: 여백 + 대형 볼드 한 문장 ── */
.ga-hero {
  padding: calc(var(--shell-topbar) + 12svh) var(--e-sp-8) var(--e-sp-16);
  text-align: center;
}
.ga-pill {
  display: inline-flex; align-items: center; gap: var(--e-sp-2);
  padding: 7px 16px; border-radius: var(--e-radius-full);
  background: var(--e-paper);
  font-size: var(--e-text-sm); font-weight: 700; letter-spacing: .02em;
  color: var(--e-muted);
}
.ga-pill i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--e-accent);
}
.ga-h1 {
  margin: var(--e-sp-6) auto 0; max-width: 1040px;
  font-size: clamp(42px, 7.2vw, 100px); line-height: 1.16;
  letter-spacing: -0.032em; font-weight: 800; text-wrap: balance;
  color: var(--e-ink);
}
.ga-h1 strong { font-weight: 800; color: var(--e-accent); }

/* 세로 롤링 단어 (웹으로 / 앱으로 / 데스크탑으로) — 토스식 워드 스와이핑 */
/* 히어로 헤드라인 — 세트 전환마다 3줄이 위에서부터 착착 페이드업(stagger) */
#ga-headline .ga-line { display: block; }
#ga-headline .ga-line em { font-style: normal; color: var(--e-ink); }
#ga-headline .ga-line strong { color: var(--e-accent); font-weight: 800; }

/* 둘째줄(플랫폼)만 애니메이션 — 아래에서 위로 부드럽게 슬라이드업(opacity+이동) */
#ga-headline .ga-kw[data-kw="2"] {
  display: inline-block; opacity: 0; transform: translateY(0.55em);
  will-change: opacity, transform;
}
#ga-headline.play .ga-kw[data-kw="2"] {
  opacity: 1; transform: none;
  transition: opacity .5s ease-out, transform .8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: .08s;
}

/* 첫줄(대상)은 세트 전환 시 즉시 교체 — 최초 등장의 opacity 0→1은 부모 .sb-reveal 이 담당 */
#ga-headline .ga-kw[data-kw="1"] { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  #ga-headline .ga-kw[data-kw="2"] { opacity: 1; transform: none; transition: none; }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ga-sub {
  margin: var(--e-sp-6) auto 0; max-width: 480px;
  font-size: clamp(15px, 1.8vw, 18px); line-height: 1.7; letter-spacing: -0.01em;
  color: var(--e-muted); text-wrap: pretty;
}
.ga-sub a { color: var(--e-accent); font-weight: 600; }

/* ── 3. 문 카드 4개 — 라운드 3xl 페이퍼 카드 + 원색 아이콘 ── */
.ga-doors {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-sp-5);
  max-width: var(--e-inner); margin: var(--e-sp-16) auto 0;
  padding: 0 var(--e-sp-8) var(--e-sp-20);
}
.ga-doors-3 { grid-template-columns: repeat(3, 1fr); }
.ga-door {
  position: relative; display: flex; flex-direction: column; gap: var(--e-sp-3);
  padding: var(--e-sp-10) var(--e-sp-8); border-radius: var(--e-radius-3xl);
  background: var(--e-paper);
  transition: transform var(--e-dur-slow) var(--e-ease),
              box-shadow var(--e-dur-slow) var(--e-ease),
              background-color var(--e-dur) ease;
}
.ga-door:hover {
  transform: translateY(-6px);
  box-shadow: var(--e-shadow-md);
  background: color-mix(in srgb, var(--e-paper) 72%, var(--e-white));
}
.ga-door-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--e-radius-xl);
  background: var(--acc); color: #fff;
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--acc) 65%, transparent);
}
.ga-door-icon svg { width: 25px; height: 25px; }
.ga-door .who {
  margin-top: var(--e-sp-2);
  font-size: var(--e-text-sm); font-weight: 700; letter-spacing: -0.005em;
  color: var(--acc);
}
.ga-door h3 {
  font-size: clamp(20px, 2.3vw, 26px); font-weight: 700;
  letter-spacing: -0.022em; line-height: 1.4; text-wrap: balance;
  color: var(--e-ink);
}
.ga-door .proof {
  font-size: 14.5px; line-height: 1.7; letter-spacing: -0.008em;
  color: var(--e-muted);
  flex: 1; text-wrap: pretty;
}
.ga-door .go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--e-sp-3);
  font-size: var(--e-text-md); font-weight: 700; letter-spacing: -0.01em;
  color: var(--e-ink);
}
.ga-door .go svg { width: 15px; height: 15px; transition: transform var(--e-dur-fast) ease; }
.ga-door:hover .go svg { transform: translateX(4px); }

/* ── 4. AXAI 플래그십 배너 — 딥네이비 + 오렌지 (radius-hero 관용구) ── */
.ga-flag {
  max-width: var(--e-inner); margin: var(--e-sp-16) auto var(--e-sp-20);
  padding: 0 var(--e-sp-8);
}
.ga-flag-inner {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-sp-6);
  padding: var(--e-sp-10);
  border-radius: var(--e-radius-hero);
  background:
    radial-gradient(560px 300px at 88% -30%, color-mix(in srgb, var(--e-accent) 26%, transparent), transparent 70%),
    var(--e-night);
  color: #F5F4EF;
  box-shadow: var(--e-shadow-lg);
}
.ga-flag-badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: var(--e-radius-full);
  background: color-mix(in srgb, var(--e-accent) 26%, transparent);
  color: #FFC5AC; font-size: var(--e-text-xs); font-weight: 700; letter-spacing: .04em;
}
.ga-flag h2 {
  margin-top: var(--e-sp-4);
  font-size: clamp(22px, 3vw, 34px); font-weight: 800;
  letter-spacing: -0.024em; line-height: 1.3; text-wrap: balance;
}
.ga-flag p {
  margin-top: var(--e-sp-3); max-width: 520px;
  font-size: 14.5px; line-height: 1.75; letter-spacing: -0.008em;
  color: color-mix(in srgb, #F5F4EF 72%, transparent);
}
.ga-flag .sb-btn {
  margin-left: auto; flex: none;
  background: var(--e-accent); color: var(--e-on-accent); font-weight: 700;
  box-shadow: var(--e-shadow-accent);
}
.ga-flag .sb-btn:hover { background: var(--e-accent-strong); opacity: 1; }
.ga-flag > .ga-flag-inner > div:first-child { flex: 1; min-width: 280px; position: relative; }

/* ── 5. 통계·CTA·슬로건 ── */
.ga-stats-section { border-top: 0; background: var(--e-paper); }
.sb-stat-num { font-weight: 700; }
.sb-cta { border-top: 0; }
.sb-cta .sb-btn-light {
  background: var(--e-accent); color: var(--e-on-accent); font-weight: 700;
  box-shadow: var(--e-shadow-accent);
}
.sb-cta .sb-btn-light:hover { background: var(--e-accent-strong); opacity: 1; }
.sb-cta .sb-eyebrow { color: var(--e-accent); }

/* 브랜드 슬로건 아웃트로 — E·ON·D */
.ga-slogan {
  padding: var(--e-sp-20) var(--e-sp-8);
  text-align: center;
  background: var(--e-white);
}
.ga-slogan-en {
  font-family: var(--e-font-display);
  font-size: clamp(15px, 2vw, 21px); font-weight: 500;
  letter-spacing: .04em;
  color: var(--e-faint);
}
.ga-slogan-en strong {
  font-weight: 800;
  color: var(--e-accent);
}
.ga-slogan-ko {
  margin: var(--e-sp-5) auto 0; max-width: 720px;
  font-size: clamp(30px, 4.6vw, 54px); line-height: 1.25;
  letter-spacing: -0.028em; font-weight: 800; text-wrap: balance;
  color: var(--e-ink);
}
.ga-slogan-brand {
  display: inline-flex; align-items: center; gap: var(--e-sp-2);
  margin-top: var(--e-sp-6);
  font-family: var(--e-font-display);
  font-size: var(--e-text-sm); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--e-faint);
}
.ga-slogan-brand::before, .ga-slogan-brand::after {
  content: ''; width: 28px; height: 1px; background: var(--e-line);
}

/* ── 5-2b. 고객사 신뢰 마퀴 (텍스트 워드마크 무한 스크롤) ──
   로고 이미지가 모이면 .ga-track 안 <span>텍스트</span>를
   <img class="ga-cli-logo" src="...">로 교체하면 됨 (CSS 그대로 호환). */
.ga-marquee {
  padding: var(--e-sp-12) 0;
  border-top: 1px solid var(--e-line);
  border-bottom: 1px solid var(--e-line);
  overflow: hidden;
}
.ga-marquee .cap {
  text-align: center; margin-bottom: var(--e-sp-8);
  font-size: clamp(17px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.02em;
  color: var(--e-ink);
}
.ga-marquee .cap b { color: var(--e-accent); }
.ga-marquee-row {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  overflow: hidden;
}
.ga-track {
  display: flex; align-items: center; gap: var(--e-sp-12); width: max-content;
  animation: ga-marq 34s linear infinite;
}
.ga-track > span {
  font-family: var(--e-font-display);
  font-size: clamp(18px, 2.4vw, 30px); font-weight: 800; letter-spacing: .01em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--e-muted) 60%, transparent);
  transition: color var(--e-dur) ease;
}
.ga-marquee:hover .ga-track > span { color: var(--e-ink); }
/* 로고/썸네일 카드 (스크린샷·로고 혼재를 흰 카드로 정돈) */
.ga-cli {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 184px; height: 90px; padding: var(--e-sp-3) var(--e-sp-4);
  background: var(--e-white);
  border: 1px solid var(--e-line); border-radius: var(--e-radius-lg);
  box-shadow: var(--e-shadow-sm); overflow: hidden;
}
.ga-cli img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: grayscale(1); opacity: .72;
  transition: filter var(--e-dur) ease, opacity var(--e-dur) ease;
}
.ga-marquee:hover .ga-cli img { filter: none; opacity: 1; }
@keyframes ga-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ga-marquee:hover .ga-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ga-track { animation: none; } }

/* ── 5-3. 섹션 인트로 (토스 '사업도 토스와 함께' 패턴) ── */
.ga-intro {
  padding: var(--e-sp-20) var(--e-sp-8) var(--e-sp-12);
  text-align: center;
}
.ga-intro .q {
  font-size: clamp(17px, 2vw, 22px); font-weight: 700;
  color: var(--e-accent);
}
.ga-intro h2 {
  margin: var(--e-sp-4) auto 0; max-width: 760px;
  font-size: clamp(30px, 4.8vw, 62px); line-height: 1.28;
  letter-spacing: -0.028em; font-weight: 800; text-wrap: balance;
  color: var(--e-ink);
}

/* ── 5-4. 카테고리(서브 브랜드) 섹션 — 텍스트+이미지 교차 ── */
.ga-cat { padding: var(--e-sp-20) var(--e-sp-8); }
.ga-cat.alt { background: var(--e-paper); }
.ga-cat-inner {
  max-width: var(--e-inner); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: var(--e-sp-16); align-items: center;
}
.ga-cat.flip .ga-cat-copy { order: 2; }
.ga-cat.flip .ga-cat-media { order: 1; }
.ga-cat .who {
  font-size: clamp(15px, 1.7vw, 18px); font-weight: 800; letter-spacing: -0.01em;
  color: var(--acc);
}
.ga-cat h2 {
  margin-top: var(--e-sp-3);
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.34;
  letter-spacing: -0.026em; font-weight: 800; text-wrap: balance;
  color: var(--e-ink);
}
.ga-cat .lead {
  margin-top: var(--e-sp-5); max-width: 440px;
  font-size: clamp(15px, 1.9vw, 18px); line-height: 1.75; letter-spacing: -0.01em;
  color: var(--e-muted); text-wrap: pretty;
}
.ga-cat .link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--e-sp-6);
  font-size: var(--e-text-lg); font-weight: 700; letter-spacing: -0.01em;
  color: var(--acc);
}
.ga-cat .link svg { width: 17px; height: 17px; transition: transform var(--e-dur-fast) ease; }
.ga-cat .link:hover svg { transform: translateX(4px); }
.ga-cat-media img {
  display: block; width: 100%;
  border-radius: var(--e-radius-3xl);
  border: 1px solid var(--e-line);
  box-shadow: var(--e-shadow-lg);
}

/* 푸터 */
.sb-footer { border-top: 1px solid var(--e-line); }

/* ── 5-5. 서브페이지 공통 (약관·공지·서비스 상세) ── */
.ga-subhero {
  padding: calc(var(--shell-topbar) + 7svh) var(--e-sp-8) var(--e-sp-12);
  text-align: center;
  background: var(--e-paper);
  border-bottom: 1px solid var(--e-line);
}
.ga-subhero .eyebrow {
  display: inline-block; margin-bottom: var(--e-sp-3);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--e-accent);
}
.ga-subhero h1 {
  font-size: clamp(30px, 4.6vw, 58px); line-height: 1.2;
  letter-spacing: -0.028em; font-weight: 800; text-wrap: balance;
  color: var(--e-ink);
}
.ga-subhero p {
  margin: var(--e-sp-5) auto 0; max-width: 560px;
  font-size: clamp(15px, 1.8vw, 18px); line-height: 1.7; letter-spacing: -0.01em;
  color: var(--e-muted); text-wrap: pretty;
}
.ga-page {
  max-width: var(--e-content); margin: 0 auto;
  padding: var(--e-sp-16) var(--e-sp-8);
}

/* 법적 문서 (약관·개인정보) */
.ga-legal .updated {
  margin-bottom: var(--e-sp-10); font-size: 13px; color: var(--e-faint);
}
.ga-legal h2 {
  margin: var(--e-sp-12) 0 var(--e-sp-4);
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -0.02em;
  color: var(--e-ink);
}
.ga-legal h2:first-of-type { margin-top: 0; }
.ga-legal h3 {
  margin: var(--e-sp-6) 0 var(--e-sp-2);
  font-size: 16px; font-weight: 700; color: var(--e-ink);
}
.ga-legal p, .ga-legal li {
  font-size: 15px; line-height: 1.85; color: var(--e-content-ink, #333d4b);
}
.ga-legal p { margin: var(--e-sp-3) 0; }
.ga-legal ul, .ga-legal ol { margin: var(--e-sp-3) 0; padding-left: var(--e-sp-6); }
.ga-legal li { margin: var(--e-sp-1) 0; }
.ga-legal strong { font-weight: 700; color: var(--e-ink); }

/* 공지 목록 */
.ga-notice-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--e-line); }
.ga-notice-item {
  display: flex; align-items: center; gap: var(--e-sp-4);
  padding: var(--e-sp-5) var(--e-sp-2);
  border-bottom: 1px solid var(--e-line);
  transition: background-color var(--e-dur) ease;
}
.ga-notice-item:hover { background: var(--e-paper); }
.ga-notice-item .tag {
  flex: none; padding: 3px 10px; border-radius: var(--e-radius-full);
  font-size: 12px; font-weight: 700;
  background: var(--e-accent-soft); color: var(--e-accent-strong);
}
.ga-notice-item .tag.gray { background: var(--e-paper); color: var(--e-muted); }
.ga-notice-item .t { flex: 1; font-size: 15px; font-weight: 600; color: var(--e-ink); min-width: 0; }
.ga-notice-item .d { flex: none; font-size: 13px; color: var(--e-faint); font-variant-numeric: tabular-nums; }

/* 서비스 상세: 프로세스 스텝 */
.ga-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-sp-4); margin-top: var(--e-sp-10); }
.ga-step {
  padding: var(--e-sp-6); border-radius: var(--e-radius-xl);
  background: var(--e-paper);
}
.ga-step .n {
  font-family: var(--e-font-display);
  font-size: 26px; font-weight: 800; color: var(--e-accent); line-height: 1;
}
.ga-step h3 { margin: var(--e-sp-3) 0 var(--e-sp-2); font-size: 16px; font-weight: 700; color: var(--e-ink); }
.ga-step p { font-size: 13.5px; line-height: 1.65; color: var(--e-muted); }

/* 서비스 요금 카드 (호스팅) — 내부 패딩/리듬 재정비 */
.ga-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-sp-5); margin-top: var(--e-sp-10); align-items: stretch; }
.ga-plan {
  display: flex; flex-direction: column;
  padding: var(--e-sp-8) var(--e-sp-6);
  border-radius: var(--e-radius-2xl);
  border: 1px solid var(--e-line); background: var(--e-white);
  transition: border-color var(--e-dur) ease, box-shadow var(--e-dur) ease, transform var(--e-dur) ease;
}
.ga-plan:hover { box-shadow: var(--e-shadow-md); transform: translateY(-2px); }
.ga-plan.hot { border: 2px solid var(--e-accent); box-shadow: 0 24px 60px -30px var(--e-shadow-accent); position: relative; }
.ga-plan .flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 14px; border-radius: var(--e-radius-full);
  background: var(--e-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.ga-plan h3 { font-size: 16px; font-weight: 700; color: var(--e-ink); }
.ga-plan-desc { margin-top: var(--e-sp-1); font-size: 12.5px; line-height: 1.5; color: var(--e-muted); min-height: 2.4em; }
.ga-plan .price { margin-top: var(--e-sp-5); white-space: nowrap; font-size: clamp(26px, 2.6vw, 31px); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--e-ink); }
.ga-plan .price small { font-size: 13px; font-weight: 500; color: var(--e-muted); }
.ga-plan .price.won { font-size: clamp(24px, 2.6vw, 30px); }
.ga-plan-year { margin-top: var(--e-sp-2); font-size: 12.5px; color: var(--e-muted); }
.ga-plan-year b { color: var(--e-accent); font-weight: 700; }
.ga-plan ul {
  list-style: none; margin: var(--e-sp-6) 0 0; padding: var(--e-sp-6) 0 0;
  border-top: 1px solid var(--e-line);
  display: flex; flex-direction: column; gap: var(--e-sp-3);
  font-size: 13.5px; line-height: 1.45; color: var(--e-muted); flex: 1;
}
.ga-plan li { display: flex; gap: var(--e-sp-2); align-items: flex-start; }
.ga-plan li::before { content: '✓'; color: var(--e-success); font-weight: 800; flex: none; }
/* 플랜 CTA: 카드 높이가 달라도 버튼 위 여백 확보 + CTA답게 키움 */
.ga-plan .sb-btn { justify-content: center; height: 46px; margin-top: var(--e-sp-6); font-weight: 600; }

/* 실제 상품(매니지드 호스팅) — 넓은 컨테이너 + 4플랜 그리드 */
.ga-page-wide { max-width: 1080px; }
.ga-plans-4 { grid-template-columns: repeat(4, 1fr); gap: var(--e-sp-4); }

/* 추가 서비스(애드온) 그리드 */
.ga-addons { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-sp-4); }
.ga-addon { padding: var(--e-sp-6); border-radius: var(--e-radius-xl); border: 1px solid var(--e-line); background: var(--e-white); }
.ga-addon .d { font-size: 12.5px; line-height: 1.5; color: var(--e-muted); }
.ga-addon h4 { margin: var(--e-sp-2) 0; font-size: 15px; font-weight: 700; color: var(--e-ink); }
.ga-addon .p { font-size: 16px; font-weight: 800; color: var(--e-accent); }
@media (max-width: 960px) { .ga-plans-4 { grid-template-columns: 1fr 1fr; } .ga-addons { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ga-plans-4 { grid-template-columns: 1fr; } .ga-addons { grid-template-columns: 1fr; } }

/* ── 유지보수(관리) 세일즈 섹션 ── */
.ga-sec-divider { margin-top: var(--e-sp-20); padding-top: var(--e-sp-16); border-top: 1px solid var(--e-line); }
.ga-sec-head { text-align: center; max-width: 640px; margin: 0 auto; }
.ga-sec-head .eyebrow {
  display: inline-block; margin-bottom: var(--e-sp-3);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--e-accent);
}
.ga-sec-head h2 {
  font-size: clamp(24px, 3.6vw, 40px); line-height: 1.25; letter-spacing: -0.028em;
  font-weight: 800; color: var(--e-ink); text-wrap: balance;
}
.ga-sec-head p { margin: var(--e-sp-4) auto 0; max-width: 540px; font-size: 15px; line-height: 1.7; color: var(--e-muted); }
.ga-sec-head p b { color: var(--e-ink); font-weight: 700; }

/* 섹션 소제목 — 64px 상단 여백으로 섹션 리듬 확보 */
.ga-subhead { margin: var(--e-sp-16) 0 var(--e-sp-5); font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -0.02em; color: var(--e-ink); text-wrap: balance; }
.ga-subhead-sub { margin: calc(-1 * var(--e-sp-3)) 0 var(--e-sp-5); font-size: 14.5px; line-height: 1.6; color: var(--e-muted); }

/* 방치 신호 체크리스트 */
.ga-checklist { list-style: none; margin: 0; padding: 0; max-width: 860px; display: flex; flex-direction: column; gap: var(--e-sp-3); }
.ga-checklist li {
  display: flex; gap: var(--e-sp-3); align-items: flex-start;
  padding: var(--e-sp-5) var(--e-sp-6); border-radius: var(--e-radius-xl);
  border: 1px solid var(--e-line); background: var(--e-white);
  font-size: 15.5px; line-height: 1.55; color: var(--e-ink);
}
.ga-checklist .x { flex: none; font-weight: 800; color: var(--e-danger); }
.ga-checklist b { font-weight: 700; }
.ga-checklist-note { margin-top: var(--e-sp-5); max-width: 860px; font-size: 14.5px; line-height: 1.6; color: var(--e-muted); }
.ga-checklist-note strong { color: var(--e-danger); font-weight: 700; }

/* 혜택 */
.ga-benefits { list-style: none; margin: 0; padding: 0; max-width: 820px; display: flex; flex-direction: column; gap: var(--e-sp-4); }
.ga-benefits li { display: flex; gap: var(--e-sp-3); align-items: flex-start; font-size: 15.5px; line-height: 1.6; color: var(--e-ink); }
.ga-benefits .ok { flex: none; font-weight: 800; color: var(--e-success); margin-top: 1px; }
.ga-benefits b { font-weight: 700; }

/* 신뢰 지표 3칸 */
.ga-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-sp-4); }
.ga-proof div { padding: var(--e-sp-8) var(--e-sp-6); border-radius: var(--e-radius-xl); border: 1px solid var(--e-line); background: var(--e-paper); text-align: center; }
.ga-proof strong { display: block; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.01em; color: var(--e-accent); }
.ga-proof span { display: block; margin-top: var(--e-sp-3); font-size: 13px; line-height: 1.6; color: var(--e-muted); }

/* 요금 부가 안내 */
.ga-plans-note { margin-top: var(--e-sp-5); font-size: 13.5px; color: var(--e-muted); }

/* 보증 박스 (앰버 톤) */
.ga-guarantee {
  margin-top: var(--e-sp-6); max-width: 860px; padding: var(--e-sp-6) var(--e-sp-8);
  border-radius: var(--e-radius-2xl);
  border: 1px solid var(--e-warning); background: var(--e-warning-soft);
  font-size: 15px; line-height: 1.7; color: var(--e-warning-ink);
}
.ga-guarantee b { font-weight: 800; color: var(--e-warning-ink); }

/* FAQ 아코디언 */
.ga-faq { max-width: 860px; display: flex; flex-direction: column; gap: var(--e-sp-3); }
.ga-faq details { padding: var(--e-sp-5) var(--e-sp-6); border-radius: var(--e-radius-xl); border: 1px solid var(--e-line); background: var(--e-white); }
.ga-faq summary { font-weight: 700; font-size: 15.5px; color: var(--e-ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--e-sp-4); }
.ga-faq summary::-webkit-details-marker { display: none; }
.ga-faq summary::after { content: '+'; color: var(--e-accent); font-weight: 800; font-size: 18px; flex: none; }
.ga-faq details[open] summary::after { content: '\2212'; }
.ga-faq p { margin: var(--e-sp-4) 0 0; font-size: 14.5px; line-height: 1.75; color: var(--e-muted); }

/* ── 섹션 시각 구분: 아이콘 헤더 / 인트로 이미지 / 혜택 카드 ── */
.ga-shead-ico svg, .ga-feature-ico svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 섹션 헤더 (아이콘 뱃지 + 라벨 + 제목) */
.ga-shead { display: flex; align-items: flex-start; gap: var(--e-sp-4); margin: var(--e-sp-16) 0 var(--e-sp-6); }
.ga-shead-ico { flex: none; width: 46px; height: 46px; border-radius: var(--e-radius-lg); display: flex; align-items: center; justify-content: center; background: var(--e-accent-soft); color: var(--e-accent); }
.ga-shead-ico svg { width: 23px; height: 23px; }
.ga-shead-tx { padding-top: 2px; }
.ga-shead .lbl { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--e-accent); }
.ga-shead h3 { margin-top: 4px; font-size: clamp(20px, 2.4vw, 25px); font-weight: 800; letter-spacing: -0.02em; color: var(--e-ink); line-height: 1.25; }
.ga-shead .desc { margin-top: var(--e-sp-2); font-size: 14.5px; line-height: 1.6; color: var(--e-muted); }

/* 인트로: 이미지 + 텍스트 2열 */
.ga-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-sp-12); align-items: center; }
.ga-intro .eyebrow { display: inline-block; margin-bottom: var(--e-sp-3); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--e-accent); }
.ga-intro h2 { font-size: clamp(24px, 3.2vw, 38px); line-height: 1.25; letter-spacing: -0.028em; font-weight: 800; color: var(--e-ink); text-wrap: balance; }
.ga-intro p { margin-top: var(--e-sp-5); font-size: 15.5px; line-height: 1.75; color: var(--e-muted); }
.ga-intro p b { color: var(--e-ink); font-weight: 700; }
.ga-intro-media img { display: block; width: 100%; border-radius: var(--e-radius-2xl); border: 1px solid var(--e-line); box-shadow: var(--e-shadow-lg); }
@media (max-width: 820px) { .ga-intro { grid-template-columns: 1fr; gap: var(--e-sp-8); } .ga-intro-media { order: -1; } }

/* 혜택 아이콘 카드 그리드 */
.ga-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-sp-4); }
.ga-feature { display: flex; gap: var(--e-sp-4); padding: var(--e-sp-6); border-radius: var(--e-radius-xl); border: 1px solid var(--e-line); background: var(--e-white); }
.ga-feature-ico { flex: none; width: 42px; height: 42px; border-radius: var(--e-radius-lg); display: flex; align-items: center; justify-content: center; background: var(--e-success-soft); color: var(--e-success); }
.ga-feature-ico svg { width: 21px; height: 21px; }
.ga-feature h4 { font-size: 15px; font-weight: 700; color: var(--e-ink); line-height: 1.35; }
.ga-feature p { margin-top: var(--e-sp-2); font-size: 13.5px; line-height: 1.6; color: var(--e-muted); }
@media (max-width: 640px) { .ga-feature-grid { grid-template-columns: 1fr; } }

/* ── 프리미엄: 풀블리드 섹션 밴드 + 강렬 인트로 + 리빌 + 호버 ── */
.ga-sect { padding: clamp(64px, 9vw, 104px) var(--e-sp-8); }
.ga-sect-inner { max-width: 880px; margin: 0 auto; }
.ga-sect-inner--wide { max-width: 1120px; }
.ga-sect--white { background: var(--e-white); }
.ga-sect--paper { background: var(--e-paper); }
.ga-sect--tint { background: color-mix(in srgb, var(--e-accent) 6%, var(--e-white)); }
/* 섹션 안에서 첫 헤더/CTA의 상단 여백 제거 (밴드 패딩이 담당) */
.ga-sect .ga-shead { margin-top: 0; }
.ga-sect .ga-page-cta { margin-top: 0; }

/* 강렬한 인트로 밴드 — 다크 + 액센트 글로우, 큰 중앙 정렬 */
.ga-band { position: relative; overflow: hidden; padding: clamp(76px, 13vw, 148px) var(--e-sp-8); background: var(--e-night); color: #F6F5F0; text-align: center; }
.ga-band::before { content: ''; position: absolute; left: 50%; top: -22%; width: 900px; height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--e-accent) 42%, transparent), transparent 72%); pointer-events: none; }
.ga-band::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 118%, color-mix(in srgb, var(--e-accent) 15%, transparent), transparent 55%); pointer-events: none; }
.ga-band-inner { position: relative; max-width: 860px; margin: 0 auto; }
.ga-band .eyebrow { display: inline-block; margin-bottom: var(--e-sp-5); padding: 6px 16px; border-radius: var(--e-radius-full); background: color-mix(in srgb, var(--e-accent) 20%, transparent); color: color-mix(in srgb, var(--e-accent) 65%, #fff); font-size: 14px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.ga-band h2 { font-size: clamp(34px, 6.6vw, 68px); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.ga-band h2 em { font-style: normal; background: linear-gradient(120deg, var(--e-accent), color-mix(in srgb, var(--e-accent) 50%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ga-band p { margin: var(--e-sp-6) auto 0; max-width: 580px; font-size: clamp(15px, 1.9vw, 19px); line-height: 1.75; color: rgba(246,245,240,.74); }
.ga-band p b { color: #fff; font-weight: 700; }

/* 스크롤 리빌 스태거 확장 (theme.css 1~3 정의, theme.js가 .is-in 부여) */
.sb-reveal[data-delay="4"] { transition-delay: .4s; }
.sb-reveal[data-delay="5"] { transition-delay: .5s; }

/* 카드 호버 인터랙션 */
.ga-feature, .ga-addon, .ga-checklist li, .ga-faq details { transition: border-color var(--e-dur) ease, box-shadow var(--e-dur) ease, transform var(--e-dur) ease; }
.ga-feature:hover, .ga-addon:hover { border-color: var(--e-accent); box-shadow: var(--e-shadow-md); transform: translateY(-3px); }
.ga-feature:hover .ga-feature-ico { background: var(--e-accent-soft); color: var(--e-accent); }
.ga-checklist li:hover { border-color: color-mix(in srgb, var(--e-danger) 45%, var(--e-line)); box-shadow: var(--e-shadow-md); }
.ga-faq details:hover { border-color: var(--e-accent); }

/* Before / After 대비 (변화 스토리) */
.ga-baw { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-sp-5); }
.ga-baw-col { padding: var(--e-sp-8); border-radius: var(--e-radius-2xl); border: 1px solid var(--e-line); background: var(--e-white); transition: transform var(--e-dur) ease, box-shadow var(--e-dur) ease; }
.ga-baw-col.before { background: var(--e-paper); }
.ga-baw-col.after { border: 2px solid var(--e-accent); box-shadow: 0 24px 60px -34px var(--e-shadow-accent); }
.ga-baw-col:hover { transform: translateY(-3px); box-shadow: var(--e-shadow-md); }
.ga-baw-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--e-radius-full); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.ga-baw-col.before .ga-baw-tag { background: color-mix(in srgb, var(--e-danger) 12%, transparent); color: var(--e-danger); }
.ga-baw-col.after .ga-baw-tag { background: var(--e-accent-soft); color: var(--e-accent); }
.ga-baw-col h4 { margin: var(--e-sp-4) 0 var(--e-sp-6); font-size: clamp(17px, 2vw, 20px); font-weight: 800; letter-spacing: -0.01em; color: var(--e-ink); }
.ga-baw-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-sp-4); }
.ga-baw-col li { display: flex; gap: var(--e-sp-3); align-items: flex-start; font-size: 14.5px; line-height: 1.6; }
.ga-baw-col.before li { color: var(--e-muted); }
.ga-baw-col.after li { color: var(--e-ink); }
.ga-baw-col li .mk { flex: none; font-weight: 800; }
.ga-baw-col.before li .mk { color: var(--e-danger); }
.ga-baw-col.after li .mk { color: var(--e-success); }
.ga-baw-arrow { display: none; }
@media (max-width: 720px) { .ga-baw { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  .ga-proof { grid-template-columns: 1fr; }
}

/* 문의 폼 (el_main /api/request/submit 재사용) */
.ga-form { max-width: 760px; margin: var(--e-sp-10) auto 0; }
.ga-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-sp-5); }
.ga-field { display: flex; flex-direction: column; gap: var(--e-sp-2); }
.ga-field.full { grid-column: 1 / -1; }
.ga-field label {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--e-muted); padding-left: 2px;
}
.ga-field label .req { color: var(--e-accent); }
.ga-field input, .ga-field select, .ga-field textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--e-radius-lg);
  border: 1px solid var(--e-border); background: var(--e-white);
  font-family: inherit; font-size: 15px; color: var(--e-ink);
  transition: border-color var(--e-dur) ease, box-shadow var(--e-dur) ease;
}
.ga-field input::placeholder, .ga-field textarea::placeholder { color: var(--e-faint); }
.ga-field input:focus, .ga-field select:focus, .ga-field textarea:focus {
  outline: none; border-color: var(--e-accent); box-shadow: var(--e-shadow-focus);
}
.ga-field textarea { resize: vertical; min-height: 150px; line-height: 1.7; }
.ga-form .submit { width: 100%; margin-top: var(--e-sp-6); justify-content: center; }
.ga-form .submit[disabled] { opacity: .5; cursor: not-allowed; }
.ga-form-note { margin-top: var(--e-sp-4); text-align: center; font-size: 13px; color: var(--e-faint); }
.ga-form-done { text-align: center; padding: var(--e-sp-12) 0; }
.ga-form-done .ico {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--e-sp-5);
  display: flex; align-items: center; justify-content: center;
  background: var(--e-accent); color: #fff;
}
.ga-form-done .ico svg { width: 32px; height: 32px; }
.ga-form-done h3 { font-size: 24px; font-weight: 800; color: var(--e-ink); }
.ga-form-done p { margin-top: var(--e-sp-3); font-size: 15px; line-height: 1.7; color: var(--e-muted); }

/* 서비스 CTA (하단 공통) */
.ga-page-cta {
  margin-top: var(--e-sp-16); padding: var(--e-sp-10);
  border-radius: var(--e-radius-hero); text-align: center;
  background: var(--e-night); color: #F5F4EF;
}
.ga-page-cta h2 { font-size: clamp(22px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.ga-page-cta p { margin: var(--e-sp-3) auto 0; max-width: 460px; font-size: 14.5px; line-height: 1.7; color: #a7adbb; }
.ga-page-cta .sb-btn { margin-top: var(--e-sp-6); background: var(--e-accent); color: #fff; }
.ga-page-cta .sb-btn:hover { background: var(--e-accent-strong); opacity: 1; }

/* ── 6. 반응형 / 모션 ── */
@media (max-width: 960px) {
  .ga-doors, .ga-doors-3 { grid-template-columns: 1fr; }
  .ga-steps { grid-template-columns: 1fr 1fr; }
  .ga-plans { grid-template-columns: 1fr; }
  /* 카테고리: 좁은 화면에선 텍스트↑ / 이미지↓ 1열로 풀어 이미지가 쪼그라들지 않게 */
  .ga-cat-inner { grid-template-columns: 1fr; gap: var(--e-sp-8); }
  .ga-cat.flip .ga-cat-copy, .ga-cat.flip .ga-cat-media { order: 0; }
  .ga-cat-media img { max-width: 600px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 720px) {
  .ga-hero { padding-left: var(--e-sp-4); padding-right: var(--e-sp-4); }
  .ga-doors { padding-left: var(--e-sp-4); padding-right: var(--e-sp-4); }
  .ga-flag { padding-left: var(--e-sp-4); padding-right: var(--e-sp-4); }
  .ga-flag .sb-btn { margin-left: 0; }
  .ga-door { padding: var(--e-sp-6) var(--e-sp-5); }
}
@media (prefers-reduced-motion: reduce) {
  .ga-door { transition: none; }
  .ga-door:hover { transform: none; }
}