/* ENTER 메가 메뉴 — 지시서 2026-11-03(stitch_export/04_megamenu 기준).
   헤더 공통 토큰(--hp-*)은 static/site.css. 여기는 닫힌 헤더의 3그룹 버튼,
   펼친 메가 패널, 커서 추적 미리보기 카드, 새 모바일 메뉴 구조만 담는다. */

/* ---------- 닫힌 헤더: 01/02/03 그룹 버튼 ----------
   2026-11-03 수정: 현재 그룹 고정 밑줄을 없애고(번호·라벨을 초록 글자로 대신 표시),
   호버/포커스 때만 나타나 미끄러지는 인디케이터 하나로 바꿨다(static/megamenu.js). */
.hp-nav{ display:none; }
.hp-nav-group{ display:none; }
@media (min-width:1024px){
  .hp-nav{ display:flex; align-items:center; margin-left:72px; gap:40px; position:relative; }
  .hp-nav-group{ display:flex; align-items:center; background:none; border:none; padding:0; margin:0; cursor:pointer; font:inherit; color:inherit; }
  .hp-nav-group-num{ font-size:12px; color:var(--hp-ink); margin-right:6px; font-variant-numeric:tabular-nums; line-height:1; transition:color .2s ease; }
  .hp-nav-group-label{ position:relative; display:inline-block; font-size:16px; font-weight:600; color:var(--hp-ink); line-height:1; transition:color .2s ease; }
  /* 초록 글자는 nav의 data-active-group 하나로 결정 — 인디케이터(아래)와 같은 상태값을
     쓰므로 둘은 항상 같은 항목을 가리킨다(static/megamenu.js가 둘 다 같이 바꾼다).
     기본값(호버 전)은 템플릿이 현재 페이지 그룹으로 서버 렌더한다. */
  .hp-nav[data-active-group="01"] .hp-nav-group[data-group="01"] .hp-nav-group-num,
  .hp-nav[data-active-group="01"] .hp-nav-group[data-group="01"] .hp-nav-group-label,
  .hp-nav[data-active-group="02"] .hp-nav-group[data-group="02"] .hp-nav-group-num,
  .hp-nav[data-active-group="02"] .hp-nav-group[data-group="02"] .hp-nav-group-label,
  .hp-nav[data-active-group="03"] .hp-nav-group[data-group="03"] .hp-nav-group-num,
  .hp-nav[data-active-group="03"] .hp-nav-group[data-group="03"] .hp-nav-group-label{ color:var(--hp-green); }

  .hp-nav-indicator{
    position:absolute; top:0; left:0; height:2px; width:0; background:var(--hp-green);
    opacity:0; pointer-events:none;
    transition:transform .25s ease, width .25s ease, opacity .15s ease;
  }
  @media (prefers-reduced-motion:reduce){
    .hp-nav-indicator{ transition:opacity .15s ease; }
    .hp-nav-group-num, .hp-nav-group-label{ transition:none; }
  }
}

/* ---------- 메가 패널 ---------- */
.hp-mega{
  position:absolute; top:100%; left:0; right:0; z-index:45;
  background:var(--hp-white); border-bottom:1px solid var(--hp-line);
  box-shadow:0 12px 32px rgba(16,24,43,.06); /* 지시서 허용 예외(패널 전용) */
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  display:none;
}
@media (min-width:1024px){ .hp-mega{ display:block; } }
.hp-mega.is-open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .18s ease, transform .18s ease, visibility 0s linear 0s; }
.hp-mega-inner{ max-width:1152px; margin:0 auto; padding:28px 24px 40px; }
.hp-mega-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:stretch; }

.hp-mega-card{ width:100%; height:80px; border-radius:var(--radius-card); background:var(--hp-card-bg); padding:0 20px; display:flex; align-items:center; justify-content:space-between; }
.hp-mega-card-text{ display:flex; flex-direction:column; }
.hp-mega-card-label{ font-size:var(--fs-h3); font-weight:800; color:var(--hp-ink); letter-spacing:-.01em; line-height:1.2; }
/* 접근성(마케팅 마무리 지시서 2026-11-12 F) — 카드 배경(--hp-card-bg #F3EEE7) 위 회색은
   --hp-grey(#6B7280)로는 4.19:1로 WCAG AA 미달이라 이 글자만 #5F6673(5.01:1)로 고정. */
.hp-mega-card-en{ font-size:12px; color:#5F6673; font-weight:600; margin-top:2px; }
.hp-mega-card-num{ font-size:56px; font-weight:800; color:var(--hp-ink); opacity:.08; line-height:1; }

.hp-mega-links{ margin-top:20px; display:flex; flex-direction:column; gap:18px; }
.hp-mega-link{ display:flex; flex-direction:column; }
.hp-mega-link-title{ font-size:16px; font-weight:800; color:var(--hp-ink); line-height:1.3; transition:color .12s ease; }
.hp-mega-link-desc{ font-size:13px; color:var(--hp-grey); margin-top:4px; line-height:1.3; }
/* 16px 미만(설명 13px)은 밝은 패널 배경 위 대비를 위해 --hp-accent-text(진한 주황)를 쓰고,
   16px 이상(제목)은 --hp-accent(기본 주황)를 쓴다 — 강조색 R2 §4. */
.hp-mega-link.is-current .hp-mega-link-desc{ color:var(--hp-accent-text); }
/* 열 강조: 패널 안에서 마우스가 올라간 열만 잉크, 나머지 두 열은 회색으로 — is-dimmed는
   JS가 비호버 열에만 붙인다. is-current/:hover는 뒤에 와서 어느 상태에서도 주황이 이긴다. */
.hp-mega-col.is-dimmed .hp-mega-link-title{ color:var(--hp-grey); }
.hp-mega-link.is-current .hp-mega-link-title{ color:var(--hp-accent); }
.hp-mega-link:hover .hp-mega-link-title{ color:var(--hp-accent); }
.hp-mega-link:hover .hp-mega-link-desc{ color:var(--hp-accent-text); }

.hp-mega-col--cta{ display:flex; }
.hp-mega-cta{ width:100%; border-radius:var(--radius-card); background:var(--hp-green); padding:24px; display:flex; flex-direction:column; justify-content:space-between; color:var(--hp-white); }
/* 글 영역만 opacity 크로스페이드(0.18s) — 높이는 고정해 카드 전체가 들썩이지 않는다
   (평소 문구는 2줄, 요약은 글머리+2줄 헤드라인+숫자 줄까지 있어 더 길다). */
.hp-mega-cta-text{ display:flex; flex-direction:column; min-height:154px; transition:opacity .18s ease; }
.hp-mega-cta-text.is-fading{ opacity:0; }
.hp-mega-cta-title{ font-size:18px; font-weight:700; line-height:1.3; }
.hp-mega-cta-sub{ font-size:13px; color:rgba(255,255,250,.8); margin-top:4px; }
.hp-mega-cta-eyebrow{ font-size:12px; color:rgba(255,255,250,.7); }
.hp-mega-cta-headline{ font-size:18px; font-weight:700; line-height:1.35; margin:6px 0 0; }
.hp-mega-cta-numbers{ display:flex; gap:20px; margin-top:auto; padding-top:14px; }
.hp-mega-cta-number{ display:flex; flex-direction:column; }
.hp-mega-cta-number-value{ font-size:22px; font-weight:800; color:var(--hp-white); font-variant-numeric:tabular-nums; line-height:1; }
.hp-mega-cta-number-label{ font-size:12px; color:rgba(255,255,250,.7); margin-top:4px; }
.hp-mega-cta-special{ font-size:14px; color:rgba(255,255,250,.9); margin:6px 0 0; }
@media (prefers-reduced-motion:reduce){
  .hp-mega-cta-text{ transition:none; }
}
.hp-mega-cta-actions{ margin-top:24px; display:flex; flex-direction:column; }
.hp-mega-cta-btn{ height:44px; padding:0 16px; border-radius:var(--radius-btn); background:var(--hp-white); color:var(--hp-ink); font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; text-align:center; transition:background-color .15s ease; }
.hp-mega-cta-btn:hover{ background:#F4F4EE; }
.hp-mega-cta-tel{ font-size:12px; color:rgba(255,255,250,.9); text-align:center; margin-top:12px; }
.hp-mega-cta-tel:hover{ text-decoration:underline; }

/* 패널이 열려 있는 동안 "정책 받기"를 테두리 버튼으로(CTA 카드와 겹치지 않게) */
.hp-header.mega-open #hpHeaderCta{ background:transparent; color:var(--hp-ink); border:1px solid var(--hp-ink); }
.hp-header.mega-open #hpHeaderCta:hover{ background:rgba(16,24,43,.05); }

/* 광고 무대(index.html) 위에서도 패널은 항상 흰 바탕 + 잉크 글자로 — 패널이 열리면
   헤더 자체도 흰 바탕/잉크 글자로 돌아와 패널과 이어지는 하나의 UI로 보이게 한다. */
html.ad-pending .hp-header.mega-open{ background:var(--hp-white) !important; border-bottom-color:var(--hp-line) !important; }
html.ad-pending .hp-header.mega-open .hp-brand-svg g{ fill:var(--hp-ink) !important; }
html.ad-pending .hp-header.mega-open .hp-brand-door-leaf{ fill:var(--hp-green) !important; }
html.ad-pending .hp-header.mega-open .hp-nav-group-label{ color:var(--hp-ink) !important; }
html.ad-pending .hp-header.mega-open .hp-nav-toggle{ color:var(--hp-ink) !important; }
html.ad-pending .hp-header.mega-open #hpHeaderCta{ background:transparent !important; color:var(--hp-ink) !important; }

/* ---------- 모바일(≤1023px) 메뉴: 그룹 제목 + 목록 ---------- */
.hp-nav-mobile{ display:none; flex-direction:column; position:absolute; left:0; right:0; top:100%; background:var(--hp-white); border-bottom:1px solid var(--hp-line); padding:8px 20px 20px; max-height:calc(100vh - 76px); overflow-y:auto; }
#hpNavToggle:checked ~ .hp-nav-mobile{ display:flex; }
.hp-nav-mobile-group{ padding:16px 0 6px; border-top:1px solid var(--hp-line); }
.hp-nav-mobile-group:first-child{ border-top:none; }
.hp-nav-mobile-group-title{ margin:0 0 4px; font-size:12px; font-weight:600; color:var(--hp-accent-text); letter-spacing:.04em; }
.hp-nav-mobile-group a{ display:block; padding:10px 0; font-size:15px; color:var(--hp-ink); }
.hp-nav-mobile-group a.active{ font-weight:600; color:var(--hp-accent-text); }
.hp-nav-mobile-sub{ display:block; padding:12px 0; font-size:13px; color:var(--hp-grey); border-top:1px solid var(--hp-line); }
.hp-nav-mobile-cta{ margin-top:12px; padding-top:16px; border-top:1px solid var(--hp-line); display:flex; flex-direction:column; align-items:center; gap:10px; }
.hp-nav-mobile-cta .hp-pill{ width:100%; }
.hp-nav-mobile-tel{ font-size:13px; color:var(--hp-grey); }