/* ============================================================
   Skin G — Trust ("더존티켓" 정식업체 신뢰형 랜딩 역분석 각색 → anti-slop 리디자인)
   콘텐츠·키워드는 무시, 디자인 언어만 각색: 화이트 베이스 + 블루 프라이머리(--a) +
   그린 신뢰 액센트(--b). 역할 분리 고정 — 블루=아이콘/주 액션(버튼), 그린=체크마크/안전 배지 전용.
   색상은 공통 9토큰(var(--bg) 등)만 사용 → themes.json trust-blue 주입으로 색상만 교체됨.
   레이아웃 시그니처: 배경-오버레이 히어로 + 아이콘박스(가로형) 토픽 그리드 +
   번호 절차 스테퍼(대시 커넥터) + 체크마크 리스트 + +/− 아코디언 FAQ.
   하드코딩 색은 accent 위 텍스트 대비 확보용 #fff 하나(9토큰 원칙 준수, 전 스킨 공통 예외).
   box-shadow의 rgba(15,23,42,x)는 전 스킨 공통 관례상 중립(off-black/navy) 그림자 허용 예외.
   ============================================================ */

/* ---------- 리셋 & 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --radius: 14px; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  padding-bottom: 104px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ---------- 진행바 ---------- */
.progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--line); z-index: 9999; }
.progress span { display: block; height: 100%; width: 0; background: var(--a); transition: width .1s linear; }

/* ---------- 상단 유틸리티 바 — 딥네이비 코퍼레이트 톤(G 헤더 시그니처 1/2) ---------- */
.top-strip {
  display: flex; gap: 22px; overflow-x: auto; padding: 9px clamp(14px, 3vw, 40px);
  background: var(--c); border-bottom: 1px solid color-mix(in srgb, var(--c) 60%, black);
  scrollbar-width: none; justify-content: center; justify-content: safe center;
}
.top-strip::-webkit-scrollbar { display: none; }
.top-strip a { font-size: .76rem; font-weight: 600; color: color-mix(in srgb, #fff 76%, transparent); white-space: nowrap; }
.top-strip a:hover { color: #fff; }

/* ---------- 헤더 — 로고 좌 · GNB 중앙 · 상담 전화 필 버튼 우측(시그니처 2/2) ---------- */
.topbar {
  position: sticky; top: 3px; z-index: 100;
  display: flex; align-items: center; gap: 18px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { order: 1; display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; flex-shrink: 0; white-space: nowrap; }
.brand span {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: var(--a);
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--a) 55%, transparent);
}
.brand b { color: var(--text); white-space: nowrap; }

/* 상담 전화 — 주 액션(블루) 필 버튼으로 우측 고정 */
.phone-note {
  order: 3; display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; color: #fff; font-weight: 800; white-space: nowrap;
  padding: 10px 20px; border-radius: 999px; margin-left: auto;
  background: var(--a);
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--a) 60%, transparent);
}
.phone-note::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; flex-shrink: 0; }

.menu-toggle { order: 4; display: none; flex-direction: column; gap: 5px; padding: 4px; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-left: 4px; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { content: ''; display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text); transition: .25s; }
.menu-toggle span::before { transform: translateY(-6px); }
.menu-toggle span::after { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }

/* GNB — 로고와 상담 버튼 사이 중앙에 배치(order + auto margin) */
.nav-links { order: 2; margin: 0 auto; display: flex; gap: 2px; align-items: center; }
.nav-links > a { padding: 9px 14px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: .89rem; white-space: nowrap; }
.nav-links > a:hover { color: var(--a); background: color-mix(in srgb, var(--a) 9%, transparent); }

/* ---------- GNB 드롭다운 ---------- */
.nav-dd { position: relative; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 4px; padding: 9px 14px; border-radius: 8px; font-weight: 600; font-size: .89rem; color: var(--muted); white-space: nowrap; background: transparent; }
.nav-dd-btn:hover { color: var(--a); background: color-mix(in srgb, var(--a) 9%, transparent); }
.nav-dd-menu {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 200px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px; z-index: 200; box-shadow: 0 20px 44px -8px rgba(15,23,42,.16);
}
/* 버튼→메뉴 top 100% 플러시 — 갭 데드존 제거로 hover 유지, 클릭 가능 */
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: block; }
.nav-dd-menu a { display: block; padding: 9px 14px; border-radius: 8px; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.nav-dd-menu a:hover { color: var(--a); background: color-mix(in srgb, var(--a) 8%, transparent); }

/* ---------- 리빌 애니메이션 (prefers-reduced-motion 존중) ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 공용 체크마크 배지 (그린 전용 — 신뢰 요소에만 사용) ---------- */
.g-check {
  position: relative; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--b);
}
.g-check::after {
  content: ''; position: absolute; left: 6px; top: 10px; width: 4px; height: 8px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(40deg) translate(-1px, -2px);
}

/* ---------- 공용 버튼(블루 — 주 액션 전용) ---------- */
.g-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px;
  font-size: .88rem; font-weight: 800; color: #fff; background: var(--a);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--a) 55%, transparent);
  transition: transform .2s, box-shadow .2s;
}
.g-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -10px color-mix(in srgb, var(--a) 62%, transparent); }
.g-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px;
  font-size: .86rem; font-weight: 700; color: var(--a); background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--a) 42%, transparent);
  transition: background .2s, border-color .2s;
}
.g-btn-ghost:hover { background: color-mix(in srgb, var(--a) 8%, transparent); border-color: var(--a); }

/* ============================================================
   HERO — 배경-오버레이형(전체 사진 + 딥블루 스크림) + 좌측 카피 + 트러스트 칩
   ============================================================ */
.g-hero { position: relative; overflow: hidden; }
.g-hero-media { position: absolute; inset: 0; z-index: 0; }
.g-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.g-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--c) 88%, black) 0%, color-mix(in srgb, var(--c) 68%, transparent) 46%, color-mix(in srgb, var(--c) 30%, transparent) 78%, transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--c) 55%, black) 0%, transparent 55%);
}
.g-hero-copy {
  position: relative; z-index: 2;
  max-width: 1220px; margin: 0 auto;
  padding: clamp(72px, 12vw, 132px) clamp(16px, 5vw, 40px) clamp(64px, 10vw, 108px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.g-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px; font-size: .8rem; font-weight: 800;
  color: #fff; background: color-mix(in srgb, #fff 14%, transparent);
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  backdrop-filter: blur(6px);
}
.g-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--b); }
.g-hero-copy h1 { font-size: clamp(2.05rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.24; letter-spacing: -.02em; word-break: keep-all; color: #fff; max-width: 720px; }
.g-hero-copy > p { font-size: clamp(1rem, 1.5vw, 1.14rem); color: color-mix(in srgb, #fff 82%, transparent); max-width: 580px; word-break: keep-all; }
.g-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.g-hero-actions .g-btn-ghost { color: #fff; border-color: color-mix(in srgb, #fff 42%, transparent); }
.g-hero-actions .g-btn-ghost:hover { background: color-mix(in srgb, #fff 12%, transparent); border-color: #fff; }

/* 정식 상담 센터 카드 — 히어로 스크림 위에 얹는 화이트 패널(신뢰 강조, 더존 홈 대응) */
.g-hero-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  margin-top: 16px; max-width: 640px;
  padding: 18px 24px; border-radius: var(--radius);
  background: color-mix(in srgb, #fff 97%, transparent);
  box-shadow: 0 26px 54px -20px rgba(15,23,42,.4);
}
.g-hero-card-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; font-weight: 800; color: var(--a); white-space: nowrap;
  padding-right: 18px; border-right: 1px solid var(--line);
}
.g-hero-card-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.g-trust-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 700; color: var(--text); }
.g-trust-chip .g-check { flex-shrink: 0; }
.g-trust-chip b { font-weight: 800; }
.g-trust-chip span { color: var(--muted); font-weight: 600; }

/* ============================================================
   섹션 밴드 — bg/panel 교차
   ============================================================ */
.g-band { padding: clamp(52px, 8vw, 96px) clamp(16px, 5vw, 48px); border-top: 1px solid var(--line); }
.g-band-tint { background: var(--panel); }

.g-head { max-width: 700px; margin: 0 0 40px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; }
.g-head.g-head-center { max-width: 720px; margin: 0 auto 44px; align-items: center; text-align: center; }
.g-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px;
  font-size: .78rem; font-weight: 800;
  color: var(--a); background: color-mix(in srgb, var(--a) 9%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--a) 22%, transparent);
}
.g-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.32; letter-spacing: -.01em; color: var(--text); word-break: keep-all; }
.g-head p { font-size: .96rem; color: var(--muted); word-break: keep-all; }

.g-section-cta { margin-top: 34px; display: flex; justify-content: flex-start; }
.g-section-cta.g-section-cta-center { justify-content: center; }

/* ============================================================
   ABOUT — 회사 소개 + 운영 철학 (레퍼런스 홈 섹션 2 대응, config 파생)
   좌측 텍스트 헤비 소개 / 우측 운영 철학 체크 리스트 카드
   ============================================================ */
.g-about-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; max-width: 1160px; margin: 0 auto; }
.g-about-copy h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; color: var(--text); margin: 12px 0 16px; word-break: keep-all; }
.g-about-copy p { font-size: .96rem; color: var(--muted); line-height: 1.8; word-break: keep-all; margin-bottom: 12px; }
.g-about-philosophy {
  padding: 28px 26px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line);
}
.g-about-philosophy h3 { font-size: 1.02rem; font-weight: 800; color: var(--text); margin-bottom: 18px; }
.g-about-list { display: flex; flex-direction: column; gap: 18px; }
.g-about-item { display: flex; align-items: flex-start; gap: 12px; }
.g-about-item .g-check { margin-top: 2px; }
.g-about-item-body { display: flex; flex-direction: column; gap: 4px; }
.g-about-item-body b { font-size: .94rem; font-weight: 700; color: var(--text); }
.g-about-item-body span { font-size: .85rem; color: var(--muted); line-height: 1.65; word-break: keep-all; }

/* ============================================================
   BLOCK LIST → 지그재그 롤스크롤 행(레퍼런스 홈의 콘텐츠이용료/상품권/
   신용카드/미납해결 등 반복 h2 토픽 밴드 리듬을 단일 blockList로 재현)
   각 항목을 텍스트+비주얼 행으로 확대, 좌우 교차 배치
   ============================================================ */
.g-rollscroll { display: flex; flex-direction: column; max-width: 980px; margin: 0 auto; border-top: 1px solid var(--line); }
.g-rollrow {
  display: flex; align-items: center; gap: 32px; padding: 30px 4px;
  border-bottom: 1px solid var(--line);
}
.g-rollrow-rev { flex-direction: row-reverse; }
.g-rollrow-visual {
  flex-shrink: 0; width: 88px; height: 88px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.g-rollrow-no { font-size: .74rem; font-weight: 800; letter-spacing: .04em; color: var(--a); font-variant-numeric: tabular-nums; }
.g-rollrow-body { display: flex; flex-direction: column; gap: 6px; }
.g-rollrow-body b { font-size: 1.06rem; font-weight: 700; color: var(--text); }
.g-rollrow-body span { font-size: .9rem; color: var(--muted); line-height: 1.75; word-break: keep-all; }

/* ============================================================
   GUIDE — 정식 상담 채널 확인 가이드 (레퍼런스 홈 섹션 6 대응, config 파생)
   2열 바둑판 체크 그리드
   ============================================================ */
.g-guidegrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  max-width: 900px; margin: 0 auto; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.g-guide-item { display: flex; align-items: flex-start; gap: 14px; padding: 24px 26px; background: var(--bg); }
.g-guide-item .g-check { margin-top: 2px; }
.g-guide-item-body { display: flex; flex-direction: column; gap: 5px; }
.g-guide-item-body b { font-size: .96rem; font-weight: 700; color: var(--text); }
.g-guide-item-body span { font-size: .86rem; color: var(--muted); line-height: 1.7; word-break: keep-all; }

/* ============================================================
   BLOCK CARDS → 허브 h2 + 하위 3열 h3 텍스트 헤비 토픽 밴드(더존티켓 시그니처)
   헤어라인으로만 구획, 박스·그림자·아이콘배지 없음 — 균등 카드 그리드 지양
   ============================================================ */
.g-topicgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 1160px; margin: 0 auto;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.g-topic-col { padding: 30px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.g-topic-col-no { display: block; font-size: .76rem; font-weight: 800; letter-spacing: .04em; color: var(--a); margin-bottom: 12px; }
.g-topic-col h3 { font-size: 1.04rem; font-weight: 700; color: var(--text); margin-bottom: 8px; word-break: keep-all; }
.g-topic-col p { font-size: .88rem; color: var(--muted); line-height: 1.7; word-break: keep-all; }

/* ============================================================
   BLOCK STEPS → 번호 절차 스테퍼(사각 배지 + 대시 커넥터), 가로 4단
   ============================================================ */
.g-steptrack { display: flex; gap: 0; max-width: 1180px; margin: 0; }
.g-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 18px 0 0; }
.g-step::before {
  content: ''; position: absolute; top: 23px; left: -50%; width: 100%; height: 0;
  border-top: 2px dashed var(--line); z-index: 0;
}
.g-step:first-child::before { display: none; }
.g-step-node {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; font-size: .84rem; font-weight: 800; color: #fff;
  background: var(--a);
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--a) 55%, transparent);
}
.g-step-tag { font-size: .74rem; font-weight: 800; letter-spacing: .04em; color: var(--a); }
.g-step-body h3 { font-size: .98rem; font-weight: 700; color: var(--text); margin: 2px 0 6px; }
.g-step-body p { font-size: .86rem; color: var(--muted); line-height: 1.6; word-break: keep-all; }

/* ============================================================
   BLOCK LINKS → 전부 펼친 카드 그리드(.g-linkgrid) · 자동슬라이드 없음
   ============================================================ */
.g-linkgrid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.g-linkcard {
  display: flex; flex-direction: column; text-decoration: none;
  border-radius: var(--radius); overflow: hidden; background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 14px 30px -22px rgba(15,23,42,.22);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.g-linkcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--a) 32%, var(--line)); box-shadow: 0 22px 40px -18px color-mix(in srgb, var(--a) 20%, rgba(15,23,42,.2)); }
.g-linkcard-img { display: block; }
.g-linkcard-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.g-linkcard-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; }
.g-linkcard-eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--a); }
.g-linkcard-body strong { font-size: 1.02rem; font-weight: 800; color: var(--text); }
.g-linkcard-body > span:last-child { font-size: .88rem; color: var(--muted); line-height: 1.6; word-break: keep-all; }

/* ============================================================
   FAQ → +/− 아코디언(구분선, 카드 아님)
   ============================================================ */
.g-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
details.g-faq { border-bottom: 1px solid var(--line); }
details.g-faq summary {
  list-style: none; display: flex; align-items: baseline; gap: 16px;
  padding: 20px 44px 20px 4px; font-weight: 700; font-size: .96rem; color: var(--text); cursor: pointer; position: relative;
}
details.g-faq summary::-webkit-details-marker { display: none; }
/* +/- 토글: 가로바(항상) + 세로바(닫힘 시만 보임 → 열리면 회전/투명화되어 '−'만 남음) */
details.g-faq summary::before,
details.g-faq summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; background: var(--a);
  transition: transform .25s, opacity .2s, background .25s;
}
details.g-faq summary::before { width: 14px; height: 2px; transform: translateY(-50%); }
details.g-faq summary::after { width: 2px; height: 14px; transform: translate(6px, -50%); }
details.g-faq[open] summary::after { opacity: 0; transform: translate(6px, -50%) rotate(90deg); }
details.g-faq[open] summary::before { background: var(--b); }
details.g-faq[open] summary { color: var(--a); }
.g-faq-no {
  flex-shrink: 0; font-size: .78rem; font-weight: 800; color: var(--a); font-variant-numeric: tabular-nums;
}
details.g-faq p { padding: 0 44px 22px 42px; font-size: .9rem; color: var(--muted); line-height: 1.78; word-break: keep-all; }

/* ============================================================
   FOOTER / CTA
   ============================================================ */
.g-footer {
  padding: 36px clamp(16px, 5vw, 48px); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.g-footer p { font-size: .84rem; color: var(--muted); }

.g-cta {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 200;
  display: flex; gap: 10px; max-width: calc(100vw - 24px);
}
.g-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  padding: 14px 24px; border-radius: 999px; font-size: .96rem; font-weight: 800; color: #fff;
  box-shadow: 0 16px 36px -12px rgba(15,23,42,.42); transition: transform .2s, box-shadow .2s;
}
.g-cta-tel { background: var(--a); }
.g-cta-sms { background: var(--c); }
.g-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -12px rgba(15,23,42,.5); }
.g-cta-ico { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.nav-contact { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .g-cta-dot { animation: g-pulse 2.2s ease-in-out infinite; }
}
@keyframes g-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--b) 55%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--b) 0%, transparent); }
}

/* ============================================================
   상담 접수 대형 밴드 — FAQ 뒤·footer 앞, 풀폭 accent 배경
   config.brand/phone/ctaUrl에서만 파생(콘텐츠 필드 없음). 더존 홈 "365일 24시간 상담접수" 대응.
   ============================================================ */
.g-consult { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 108px) clamp(16px, 5vw, 48px); background: var(--a); }
.g-consult::before {
  content: ''; position: absolute; right: -70px; top: -90px; width: 320px; height: 320px; border-radius: 50%;
  background: color-mix(in srgb, #fff 12%, transparent);
}
.g-consult::after {
  content: ''; position: absolute; left: -60px; bottom: -110px; width: 260px; height: 260px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
}
.g-consult-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.g-consult-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 999px;
  font-size: .8rem; font-weight: 800; color: #fff;
  background: color-mix(in srgb, #fff 16%, transparent); border: 1px solid color-mix(in srgb, #fff 32%, transparent);
}
.g-consult h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 800; color: #fff; line-height: 1.34; word-break: keep-all; }
.g-consult-phone { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; color: #fff; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.g-consult-note { font-size: .92rem; color: color-mix(in srgb, #fff 82%, transparent); word-break: keep-all; }
.g-consult-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.g-consult .g-btn-invert { background: #fff; color: var(--a); box-shadow: 0 16px 34px -12px rgba(15,23,42,.4); }
.g-consult .g-btn-invert:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -12px rgba(15,23,42,.46); }
.g-consult .g-btn-ghost-invert { color: #fff; border-color: color-mix(in srgb, #fff 46%, transparent); }
.g-consult .g-btn-ghost-invert:hover { background: color-mix(in srgb, #fff 14%, transparent); border-color: #fff; }

/* ============================================================
   로봇 캐러셀 (build.mjs 삽입: <section class="robot-carousel"><ol><li><a>)
   풀폭 accent 리본, 텍스트 대비 확보용 고정 화이트(#fff, 9토큰 예외 허용분)
   ============================================================ */
.robot-carousel { overflow: hidden; background: var(--a); padding: 10px 0; }
.robot-carousel ol { display: flex; gap: 24px; margin: 0; padding: 0 clamp(14px, 3vw, 40px); overflow-x: auto; max-width: none; scrollbar-width: none; justify-content: center; justify-content: safe center; }
.robot-carousel ol::-webkit-scrollbar { display: none; }
.robot-carousel li { flex-shrink: 0; }
.robot-carousel a { font-size: .8rem; font-weight: 800; color: #fff; white-space: nowrap; }
.robot-carousel a:hover { text-decoration: underline; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 980px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .phone-note { order: 3; flex: 0 1 auto; margin-left: auto; font-size: .78rem; padding: 9px 16px; }
  .g-about-grid { grid-template-columns: 1fr; gap: 28px; }
  .g-topicgrid { grid-template-columns: 1fr; }
  .g-guidegrid { grid-template-columns: 1fr; }
  .g-steptrack { flex-wrap: wrap; row-gap: 28px; }
  .g-step { flex: 1 1 45%; }
  .nav-links { order: 4; position: fixed; inset: 78px 12px auto 12px; display: none; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); box-shadow: 0 24px 60px -12px rgba(15,23,42,.22); max-height: calc(100dvh - 100px); overflow-y: auto; }
  .nav-links.is-open { display: flex; }
  .nav-links > a { text-align: left; }
  .nav-dd { position: static; }
  .nav-dd-btn { width: 100%; justify-content: space-between; text-align: left; }
  /* 모바일: 호버 불가 환경이므로 항상 펼쳐 보여줌(전 스킨 공통 원칙) */
  .nav-dd-menu { position: static; transform: none; display: flex; flex-direction: column; min-width: 0; box-shadow: none; padding: 2px 0 2px 14px; margin: 2px 0 6px; background: transparent; border: 0; }
  .menu-toggle { display: flex; }
}
@media (max-width: 720px) {
  .g-hero-copy { padding-top: clamp(88px, 22vw, 120px); }
  .g-hero-scrim { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, black) 0%, color-mix(in srgb, var(--c) 78%, transparent) 55%, color-mix(in srgb, var(--c) 40%, transparent) 100%); }
  .g-hero-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px; }
  .g-hero-card-badge { border-right: 0; padding-right: 0; }
  .g-step { flex: 1 1 100%; }
  .g-step::before { top: -14px; left: 22px; width: 0; height: 14px; border-top: none; border-left: 2px dashed var(--line); }
  .g-rollrow, .g-rollrow-rev { flex-direction: row; gap: 18px; padding: 22px 4px; }
  .g-rollrow-visual { width: 64px; height: 64px; }
  .g-linkgrid { grid-template-columns: 1fr; }
  .g-footer { flex-direction: column; align-items: flex-start; }
  .g-cta { bottom: 12px; gap: 8px; max-width: calc(100vw - 20px); }
  .g-cta-btn { padding: 13px 18px; font-size: .9rem; flex: 1 1 auto; }
  .g-consult-actions { flex-direction: column; align-items: stretch; }
  .g-consult-actions .g-btn, .g-consult-actions .g-btn-ghost-invert { justify-content: center; }
  /* 모바일: 히어로·섹션 상담 버튼 가운데 정렬 */
  .g-hero-actions { justify-content: center; }
  .g-section-cta { display: flex; justify-content: center; }
  /* 모바일: 상단 번호 알약 숨기고, GNB 메뉴 안에 전화 상담 항목 노출 */
  .phone-note { display: none; }
  .nav-contact { display: block; margin-top: 4px; padding: 13px 16px; color: var(--a); font-weight: 800; border-top: 1px solid var(--line); }
}

:root{--bg:#ffffff;--text:#1f2430;--muted:#667085;--line:#e6e9f0;--panel:#f5f8fd;--a:#e6123a;--b:#16a34a;--c:#a50c29;--d:#fce7eb}