/* ==========================================================================
   subpage.css — 헤더 드롭다운(메가메뉴) + 하위 페이지(기능 · 솔루션) 템플릿

   main.css 의 토큰(--navy-900 · --blue-500 · --sh-2 · --e-out …)을 그대로 씁니다.
   여기에는 main.css 에 없던 것만 있습니다. 137KB 짜리 main.css 를 건드리지 않기
   위해 파일을 나눴고, head.php 가 두 파일을 함께 싣습니다.

   목차
     1. 헤더 — 드롭다운 트리거 · 메가메뉴 · 모바일 아코디언
     2. 하위 페이지 — 히어로 · 주요 기능 · 흐름 · 효과 · 미리보기 · FAQ · 관련 · CTA
     3. 반응형
   ========================================================================== */

/* ==========================================================================
   1. 헤더
   ========================================================================== */

/* 하위 페이지에는 다크 히어로가 없습니다. 헤더가 투명한 채로 떠 있으면
   히어로 배경과 겹쳐 읽히지 않으므로, 처음부터 .is-stuck 과 같은 판을 깝니다. */
.nav--sub {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 rgba(15, 42, 92, .07);
}

/* 좁은 패널(솔루션)은 트리거 바로 아래에 붙습니다 → 그룹이 기준점.
   넓은 패널(기능 4열)은 트리거 기준으로 펼치면 화면 왼쪽으로 삐져나갑니다.
   그 그룹만 position:static 으로 두고 .nav__menu 를 기준점으로 씁니다. */
.nav__menu { position: relative; }
.nav__group { position: relative; }
.nav__group--wide { position: static; }

.nav__trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px 9px 15px; border-radius: var(--r-full);
  font-size: 15px; font-weight: 600; color: var(--ink-700);
  transition: color .25s, background .25s;
}
.nav__trigger:hover,
.nav__group.is-open .nav__trigger { color: var(--navy-900); background: rgba(43, 127, 224, .07); }

.nav__caret { width: 15px; height: 15px; transition: transform .3s var(--e-out); }
.nav__group.is-open .nav__caret { transform: rotate(180deg); }

/* 다크 구간 반전 — .nav__link 과 같은 규칙을 트리거에도 */
.nav.is-dark:not(.is-stuck) .nav__trigger,
.nav.is-dark:not(.is-stuck) .nav__out { color: #fff; }

/* 드롭다운을 넘어 랜딩 앵커로 넘어가는 자리의 구분선 */
.nav__sep {
  width: 1px; height: 18px; margin-inline: 8px;
  background: var(--line);
}
.nav.is-dark:not(.is-stuck) .nav__sep { background: rgba(255, 255, 255, .28); }

/* 하위 페이지의 앵커 — 클릭하면 랜딩으로 나갑니다 (.nav__link 과 생김새만 같음) */
.nav__out {
  padding: 9px 15px; border-radius: var(--r-full);
  font-size: 15px; font-weight: 600; color: var(--ink-700);
  transition: color .25s, background .25s;
}
.nav__out:hover { color: var(--navy-900); background: rgba(43, 127, 224, .07); }

/* ---- 메가메뉴 패널 ------------------------------------------------------ */
.mega {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 320px; padding: 14px;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);

  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s var(--e-out), transform .24s var(--e-out);
}
.nav__group.is-open .mega { opacity: 1; transform: none; pointer-events: auto; }

/* 기능 패널은 4열. .nav__logo 의 margin-right:auto 때문에 메뉴는 오른쪽에
   붙어 있습니다 — 왼쪽 기준으로 펼치면 그대로 화면 밖으로 나갑니다.
   오른쪽 끝(도입 문의 버튼 왼쪽)에 맞추고 왼쪽으로 펼칩니다. */
.mega--wide {
  left: auto; right: 0;
  width: min(920px, calc(100vw - var(--gutter) * 2));
}

.mega__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 10px;
}

.mega__label {
  padding: 4px 8px 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--ink-400);
}

.mega__items { display: grid; gap: 2px; }

.mega__item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 8px; border-radius: var(--r-sm);
  transition: background .2s;
}
.mega__item:hover { background: var(--blue-50); }
.mega__item.is-current { background: var(--blue-50); }
.mega__item.is-current .mega__icon { background: var(--blue-500); color: #fff; }

.mega__icon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--blue-50); color: var(--blue-600);
  transition: background .2s, color .2s;
}
.mega__icon svg { width: 18px; height: 18px; }
.mega__item:hover .mega__icon { background: var(--blue-100); }
.mega__icon--lg { width: 42px; height: 42px; border-radius: 12px; }
.mega__icon--lg svg { width: 22px; height: 22px; }

.mega__body { min-width: 0; display: grid; gap: 2px; }
.mega__body b {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--navy-900); letter-spacing: -.01em;
}
.mega__body em {
  font-style: normal; font-size: 12px; color: var(--ink-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mega__badge {
  flex: none; padding: 1px 6px; border-radius: var(--r-full);
  background: var(--blue-100); color: var(--blue-600);
  font-size: 10.5px; font-weight: 800; font-style: normal; letter-spacing: .02em;
}
.mega__badge--hot { background: rgba(140, 198, 63, .18); color: #5C8A22; }

/* ---- 패널 하단 배너 ---- */
.mega__banner {
  display: flex; align-items: center; gap: 13px;
  margin-top: 10px; padding: 13px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--blue-50), var(--blue-25));
  border: 1px solid var(--line-soft);
  transition: border-color .25s, box-shadow .25s;
}
.mega__banner:hover { border-color: var(--blue-200); box-shadow: var(--sh-1); }
.mega__banner .mega__body b { font-size: 15px; }
.mega__banner .mega__body em { white-space: normal; font-size: 12.5px; }
.mega__go { width: 20px; height: 20px; margin-left: auto; flex: none; color: var(--blue-500); transition: transform .3s var(--e-out); }
.mega__banner:hover .mega__go { transform: translateX(4px); }

/* ---- 모바일 드로어 아코디언 ---- */
.drw { border-bottom: 1px solid var(--line-soft); }
.drw__head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 15px 4px; font-size: 17px; font-weight: 700; color: var(--navy-900);
}
.drw__caret { width: 20px; height: 20px; color: var(--blue-300); transition: transform .3s var(--e-out); }
.drw.is-open .drw__caret { transform: rotate(180deg); }

.drw__body { padding: 2px 0 14px; }
.drw__label {
  padding: 12px 4px 4px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--ink-400);
}
.drw__link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; color: var(--ink-700);
}
.drw__link svg { width: 18px; height: 18px; flex: none; color: var(--blue-500); }
.drw__link.is-current { background: var(--blue-50); color: var(--blue-600); }
.drw__link--hot { background: rgba(140, 198, 63, .1); }

/* ==========================================================================
   2. 하위 페이지
   ========================================================================== */

.sub { padding-top: var(--nav-h); }

/* 공통 섹션 리듬 — 랜딩보다 조금 촘촘합니다 (읽는 페이지이므로) */
.psec { padding: clamp(56px, 7vw, 96px) 0; }
.psec--alt { background: var(--blue-25); }
.psec--plain { background: var(--white); }

.psec__head { max-width: 52ch; margin-bottom: clamp(30px, 4vw, 48px); }
.psec__head--center { margin-inline: auto; text-align: center; }
.psec__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-600);
}
.psec__title {
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.28; color: var(--heading);
  letter-spacing: -.02em;
}
.psec__lead { margin-top: 14px; font-size: clamp(14.5px, 1.5vw, 16.5px); color: var(--ink-600); line-height: 1.75; }

/* ---- 히어로 ------------------------------------------------------------ */
.phero {
  position: relative; overflow: hidden;
  padding: clamp(44px, 6vw, 80px) 0 clamp(52px, 7vw, 92px);
  background:
    radial-gradient(60% 90% at 82% 8%, rgba(140, 198, 63, .10), transparent 60%),
    radial-gradient(70% 100% at 8% 0%, rgba(43, 127, 224, .12), transparent 62%),
    var(--blue-25);
}
.phero__inner {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}

.crumb {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 18px; font-size: 12.5px; font-weight: 600; color: var(--ink-500);
}
.crumb a { color: var(--ink-500); transition: color .2s; }
.crumb a:hover { color: var(--blue-600); }
.crumb svg { width: 13px; height: 13px; color: var(--ink-400); }
.crumb b { color: var(--navy-900); font-weight: 700; }

.phero__title {
  font-size: clamp(30px, 4.6vw, 50px); line-height: 1.2; letter-spacing: -.03em;
  color: var(--heading);
}
.phero__title em { color: var(--blue-500); font-style: normal; }

.phero__lead {
  margin-top: 18px; max-width: 46ch;
  font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.75; color: var(--ink-600);
}

.phero__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.phero__visual { position: relative; display: grid; place-items: center; }
.phero__visual::before {
  content: ""; position: absolute; inset: -6% -4%;
  background: radial-gradient(closest-side, rgba(43, 127, 224, .16), transparent 72%);
  filter: blur(6px);
}
.phero__card {
  position: relative;
  width: min(360px, 100%);
  padding: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line-soft);
  box-shadow: var(--sh-3);
}

/* ---- 주요 기능 4 ------------------------------------------------------- */
.pcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pcard {
  padding: 24px 22px 26px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line-soft);
  box-shadow: var(--sh-1);
  transition: transform .35s var(--e-out), box-shadow .35s var(--e-out), border-color .3s;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--blue-200); }
.pcard__icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 13px; background: var(--blue-50); color: var(--blue-600);
}
.pcard__icon svg { width: 22px; height: 22px; }
.pcard__title { font-size: 17px; font-weight: 700; color: var(--navy-900); letter-spacing: -.02em; }
.pcard__desc { margin-top: 9px; font-size: 14px; line-height: 1.7; color: var(--ink-600); }

/* ---- 흐름 4단계 -------------------------------------------------------- */
.pflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: step; }
.pstep {
  position: relative; padding: 22px 20px 24px;
  border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line-soft);
}
/* 단계를 잇는 선 — 마지막 칸에는 붙이지 않습니다 */
.pstep::after {
  content: ""; position: absolute; top: 38px; right: -14px; width: 14px; height: 2px;
  background: linear-gradient(90deg, var(--blue-200), var(--blue-100));
}
.pstep:last-child::after { display: none; }

.pstep__no {
  counter-increment: step;
  display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 14px;
  border-radius: 50%;
  background: var(--navy-900); color: #fff;
  font-family: var(--ff-num); font-size: 13.5px; font-weight: 700;
}
.pstep__no::before { content: counter(step, decimal-leading-zero); }
.pstep__title { font-size: 15.5px; font-weight: 700; color: var(--navy-900); }
.pstep__desc { margin-top: 7px; font-size: 13.5px; line-height: 1.65; color: var(--ink-600); }

/* ---- 도입 효과 (이전 → 이후) ------------------------------------------ */
.pfx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pfx__card {
  padding: 22px 22px 24px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--sh-1);
}
.pfx__row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; }
.pfx__row + .pfx__row { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pfx__tag {
  flex: none; margin-top: 1px; padding: 2px 8px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
.pfx__row--before .pfx__tag { background: #F1F4F8; color: var(--ink-500); }
.pfx__row--before span { color: var(--ink-500); }
.pfx__row--after .pfx__tag { background: rgba(140, 198, 63, .18); color: #4E7A18; }
.pfx__row--after span { color: var(--navy-900); font-weight: 600; }

/* ---- 화면 미리보기 ----------------------------------------------------- */
.ppre__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.ppre__list { display: grid; gap: 12px; margin-top: 24px; }
.ppre__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-700); }
.ppre__list svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--green-500); }
.ppre__frame {
  padding: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--sh-3);
}

/* ---- FAQ --------------------------------------------------------------- */
.pfaq { max-width: 860px; margin-inline: auto; display: grid; gap: 10px; }
.pfaq__item {
  border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line-soft); overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.pfaq__item[open] { border-color: var(--blue-200); box-shadow: var(--sh-1); }
.pfaq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 700; color: var(--navy-900); letter-spacing: -.01em;
}
.pfaq__q::-webkit-details-marker { display: none; }
.pfaq__q svg { width: 20px; height: 20px; flex: none; color: var(--blue-400); transition: transform .3s var(--e-out); }
.pfaq__item[open] .pfaq__q svg { transform: rotate(180deg); }
.pfaq__a { padding: 0 22px 20px; font-size: 14.5px; line-height: 1.8; color: var(--ink-600); }

/* ---- 함께 보는 기능 ---------------------------------------------------- */
.prel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prel__card {
  display: flex; align-items: center; gap: 14px;
  padding: 20px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-soft);
  transition: transform .3s var(--e-out), box-shadow .3s var(--e-out), border-color .3s;
}
.prel__card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--blue-200); }
.prel__card .mega__icon { width: 40px; height: 40px; border-radius: 12px; }
.prel__card .mega__icon svg { width: 20px; height: 20px; }
.prel__go { width: 19px; height: 19px; margin-left: auto; flex: none; color: var(--blue-400); transition: transform .3s var(--e-out); }
.prel__card:hover .prel__go { transform: translateX(4px); }

/* ---- 페이지 하단 CTA 밴드 ---------------------------------------------- */
.pcta {
  position: relative; overflow: hidden;
  padding: clamp(56px, 7vw, 92px) 0;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700) 62%, var(--blue-600));
  text-align: center; color: #fff;
}
.pcta::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 140%;
  background: radial-gradient(closest-side, rgba(140, 198, 63, .22), transparent 70%);
  transform: translateY(-24%);
}
.pcta__inner { position: relative; }
.pcta__title { font-size: clamp(24px, 3.6vw, 38px); line-height: 1.3; letter-spacing: -.02em; color: #fff; }
.pcta__lead { margin: 16px auto 0; max-width: 52ch; font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.75; color: rgba(255, 255, 255, .78); }
.pcta__acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pcta .btn--ghost { --btn-bg: rgba(255, 255, 255, .08); --btn-fg: #fff; border-color: rgba(255, 255, 255, .32); }
.pcta .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); box-shadow: none; }

/* ---- 404 (없는 slug) --------------------------------------------------- */
.pmiss { padding: clamp(90px, 14vw, 160px) 0; text-align: center; }
.pmiss__code { font-family: var(--ff-num); font-size: 64px; font-weight: 800; color: var(--blue-200); }
.pmiss__title { margin-top: 10px; font-size: clamp(22px, 3vw, 30px); color: var(--heading); }
.pmiss__lead { margin-top: 14px; color: var(--ink-600); }
.pmiss .btn { margin-top: 28px; }

/* ---- 푸터 메뉴 열 (기능 · 솔루션) --------------------------------------

   main.css 는 .foot__inner 를 3열(브랜드 · 메뉴 · 연락처)로 잡아 두었습니다.
   여기서 열이 하나 늘어납니다. 데스크톱 폭에서만 덮어써야 합니다 —
   subpage.css 가 main.css 뒤에 실리므로, 미디어 없이 쓰면 main.css 의
   1024px · 720px 붕괴 규칙까지 이겨 버립니다. */
@media (min-width: 1025px) {
  .foot__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.45fr) auto minmax(0, 1fr); }
}
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.foot__col h4 {
  margin-bottom: 14px; font-size: 13.5px; font-weight: 700; color: #fff; letter-spacing: -.01em;
}
.foot__col ul { display: grid; gap: 9px; }
.foot__col a { font-size: 13.5px; color: rgba(255, 255, 255, .62); transition: color .2s; }
.foot__col a:hover { color: #fff; }

/* ==========================================================================
   3. 반응형
   ========================================================================== */

@media (max-width: 1180px) {
  .mega--wide { width: min(760px, calc(100vw - var(--gutter) * 2)); }
  .mega__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .pcards, .pflow { grid-template-columns: repeat(2, 1fr); }
  .pstep::after { display: none; }
  .phero__inner, .ppre__inner { grid-template-columns: 1fr; }
  .phero__visual { order: -1; }
  .pfx { grid-template-columns: 1fr; }
  .prel { grid-template-columns: 1fr; }
}

/* 드로어가 켜지는 폭 — main.css 2813행이 여기서 .nav__menu 를 감춥니다.
   드롭다운은 그 안에 있으므로 함께 사라지지만, 열려 있던 패널이 잔상으로
   남지 않도록 한 번 더 확실히 끕니다. */
@media (max-width: 1024px) {
  .nav__sep { display: none; }
  .mega { display: none; }
}

@media (max-width: 640px) {
  .pcards, .pflow { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mega { transition: none; }
  .pcard, .prel__card { transition: none; }
}

/* --------------------------------------------------------------------------
   그래픽 가속 꺼짐 (.no-gpu) — main.css 18절과 같은 이유입니다.
   .nav--sub 는 하위 페이지 전 구간에 고정되어 있어 블러 비용이 끊기지 않습니다.
   -------------------------------------------------------------------------- */
.no-gpu .nav--sub,
.no-gpu .mega {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.no-gpu .nav--sub { background: rgba(255, 255, 255, .97); }