/*
  nseo.css
  시공서비스(nseo-1~5) 페이지 전용. tokens.css, header-footer.css, carousel.css 다음에 로드한다.
  페이지마다 히어로·CTA 아키타입만 다르게 하고 나머지 구조는 main.css의 범용 클래스
  (.card, .features-grid/.feature-card, .faq-list/.faq-item, .cta-band, .link-grid/.link-card)를 그대로 재사용한다.
*/

/* ==========================================================================
   공통 — 2×2 전후 이미지 그리드 (§6-3: max-width 980px, gap 20px, 전후 같은 행)
   ========================================================================== */
.n-gallery{
  max-width: 980px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.n-gallery .card{ padding: 0; overflow: hidden; }
.n-gallery .ba-pair{ grid-template-columns: 1fr; }
.n-gallery .ba-frame{ position: relative; height: 0; padding-bottom: 100%; overflow: hidden; }
.n-gallery img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   히어로 1 — /nseo-1 좌우 스플릿 (좌 텍스트 / 우 이미지)
   ========================================================================== */
.nhero-split{
  display: grid;
  gap: 24px;
  padding-block: 32px;
}
@media (min-width: 768px){
  .nhero-split{ grid-template-columns: 6fr 5fr; align-items: center; gap: 40px; padding-block: 48px; }
}
.nhero-split__media{
  position: relative;
  height: 0;
  padding-bottom: 133.333%;
  border-radius: var(--r);
  overflow: hidden;
}
.nhero-split__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nhero-split .eyebrow{ margin-bottom: 14px; }
.nhero-split h1{ margin-bottom: 16px; }
.nhero-split .lead{ margin-bottom: 24px; color: var(--ink-2); }

/* ==========================================================================
   CTA 1 — 중앙 카드 박스
   ========================================================================== */
.ncta-card{
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  padding: 36px 28px;
}
.ncta-card h2{ margin-bottom: 10px; }
.ncta-card p{ margin: 0 auto 22px; max-width: 420px; color: var(--ink-2); }
.ncta-card .btn-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ==========================================================================
   히어로 2 — /nseo-2 이미지 없는 대형 타이포
   ========================================================================== */
.nhero-type{
  background: var(--mist);
  padding-block: 64px;
}
.nhero-type h1{ font-size: clamp(34px, 7vw, 54px); margin-bottom: 18px; }
.nhero-type .lead{ max-width: 620px; color: var(--ink-2); margin-bottom: 26px; }

/* ==========================================================================
   CTA 2 — 좌우 스플릿 (좌 문구 / 우 버튼)
   ========================================================================== */
.ncta-split{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ncta-split p{ margin: 0; max-width: 480px; }
.ncta-split .btn-row{ display: flex; flex-wrap: wrap; gap: 12px; flex: none; }

/* ==========================================================================
   히어로 3 — /nseo-3 전후 대비 스플릿 (좌 시공전 / 우 시공후)
   ========================================================================== */
.nhero-compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 28px;
}
.nhero-compare > div{ position: relative; min-width: 0; height: 0; padding-bottom: 100%; overflow: hidden; }
.nhero-compare img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px){
  .nhero-compare > div{ padding-bottom: 133.333%; }
}
.nhero-compare__label{
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: hsl(24 30% 12% / .6);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
.nhero-3-body{ padding-block: 16px 48px; }

/* ==========================================================================
   CTA 3 — 아웃라인 고스트 블록
   ========================================================================== */
.ncta-ghost{
  border: 2px solid var(--line-2);
  border-radius: var(--r);
  padding: 32px 28px;
  text-align: center;
}
.ncta-ghost h2{ margin-bottom: 10px; }
.ncta-ghost p{ margin: 0 auto 22px; max-width: 480px; color: var(--ink-2); }
.ncta-ghost .btn-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ==========================================================================
   히어로 4 — /nseo-4 보더 프레임
   ========================================================================== */
.nhero-frame{
  border: 2px solid var(--wood);
  border-radius: var(--r);
  padding: 40px 24px;
  margin-block: 32px;
  text-align: center;
}
@media (min-width: 768px){ .nhero-frame{ padding: 56px 40px; } }
.nhero-frame .eyebrow{ justify-content: center; margin-bottom: 14px; }
.nhero-frame h1{ margin-bottom: 16px; }
.nhero-frame .lead{ max-width: 560px; margin-inline: auto 22px; color: var(--ink-2); }
.nhero-frame .btn-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ==========================================================================
   CTA 4 — 2열 듀얼 버튼 (전화 / 문자)
   ========================================================================== */
.ncta-dual{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 560px;
  margin-inline: auto;
}
@media (min-width: 480px){ .ncta-dual{ grid-template-columns: 1fr 1fr; } }
.ncta-dual .btn-primary, .ncta-dual .btn-ghost{ width: 100%; }
.ncta-dual-head{ text-align: center; margin-bottom: 22px; }
.ncta-dual-head p{ margin: 8px auto 0; max-width: 480px; color: var(--ink-2); }

/* ==========================================================================
   히어로 5 — /nseo-5 계단형 타이포
   ========================================================================== */
.nhero-stack{ padding-block: 56px 40px; }
.nhero-stack h1{
  display: block;
  margin-bottom: 20px;
}
.nhero-stack h1 span{ display: block; }
.nhero-stack h1 span:nth-child(2){ margin-left: 32px; }
.nhero-stack h1 span:nth-child(3){ margin-left: 64px; }
.nhero-stack .lead{ max-width: 560px; color: var(--ink-2); }

/* ==========================================================================
   CTA 5 — 다크 밴드
   ========================================================================== */
.ncta-dark{
  background: var(--wood-deep);
  color: var(--white);
  border-radius: var(--r);
  padding: 36px 28px;
  text-align: center;
}
.ncta-dark h2{ color: var(--white); margin-bottom: 10px; }
.ncta-dark p{ margin: 0 auto 22px; max-width: 480px; color: hsl(30 20% 85%); }
.ncta-dark .btn-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ncta-dark .btn-ghost{ background: transparent; border-color: hsl(0 0% 100% / .5); color: var(--white); }
.ncta-dark .btn-ghost:active{ background: hsl(0 0% 100% / .12); }

/* ==========================================================================
   상황별 비교 리스트 (nseo-4 범위 비교용)
   ========================================================================== */
.n-compare-table{ width: 100%; border-collapse: collapse; }
.n-compare-table th, .n-compare-table td{
  text-align: left;
  padding: 14px 12px;
  border-top: 1px solid var(--line);
  vertical-align: top;
  font-size: 15px;
}
.n-compare-table thead th{ border-top: none; font-size: 13px; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.n-compare-table td:first-child, .n-compare-table th:first-child{ width: 28%; font-weight: 700; color: var(--ink); }
.n-compare-table td{ color: var(--ink-2); }

/* ==========================================================================
   히어로 6 — /nseo-6 풀블리드 배너 (이미지 위 텍스트 오버레이)
   ========================================================================== */
.nhero-banner{
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  overflow: hidden;
  border-radius: var(--r);
}
.nhero-banner__media{ position: absolute; inset: 0; z-index: 0; }
.nhero-banner__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.nhero-banner__scrim{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, hsl(24 30% 12% / .1), hsl(24 30% 12% / .78));
}
.nhero-banner__body{ position: relative; z-index: 2; padding: 32px 24px; width: 100%; }
.nhero-banner .eyebrow{ color: hsl(30 25% 94%); }
.nhero-banner h1{ color: var(--white); margin-bottom: 12px; }
.nhero-banner .lead{ color: hsl(30 25% 94%); max-width: 560px; margin-bottom: 20px; }
@media (min-width: 768px){
  .nhero-banner{ min-height: 480px; }
  .nhero-banner__body{ padding: 48px 40px; }
}

/* ==========================================================================
   CTA 6 — 미니멀 상단 라인
   ========================================================================== */
.ncta-minimal{
  text-align: center;
  padding-block: 40px;
  border-top: 1px solid var(--line);
}
.ncta-minimal h2{ margin-bottom: 10px; }
.ncta-minimal p{ margin: 0 auto 22px; max-width: 480px; color: var(--ink-2); }
.ncta-minimal .btn-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ==========================================================================
   진단 리스트 (nseo-5 노후 증상용)
   ========================================================================== */
.n-symptom-list{ display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .n-symptom-list{ grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.n-symptom{ display: flex; gap: 14px; align-items: flex-start; }
.n-symptom svg{ flex: none; color: var(--olive); margin-top: 2px; }
.n-symptom h3{ margin-bottom: 6px; font-size: 17px; }
.n-symptom p{ margin: 0; font-size: 15px; color: var(--ink-2); }