/* ============================================================
   page-detail.css — D2 Detail page layout (additive scaffolding)
   ------------------------------------------------------------
   적용 대상 (30+ 페이지):
     products/*, solutions/*, industries/*,
     resources/{faq,guides,glossary,comparison,downloads},
     company/news, contact/{consulting,demo,thanks}
   ------------------------------------------------------------
   원칙: 인라인 CSS가 우선. 본 파일은 비어있는 부분만 채움.
   body.tier-detail 스코프로 다른 tier에 새지 않게 격리.
   ============================================================ */

/* --- 상세 페이지 공통 컨테이너 fallback -------------------- */
body.tier-detail .wrap,
body.tier-detail .container,
body.tier-detail .inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* --- 상세 히어로 (제품/솔루션/산업 상세 첫 화면) --------- */
body.tier-detail .hero{
  padding: clamp(72px, 8vw, 120px) 0 clamp(40px, 5vw, 72px);
}

body.tier-detail .hero h1{
  letter-spacing: -0.02em;
}

/* --- 브레드크럼 fallback ---------------------------------- */
body.tier-detail .breadcrumb,
body.tier-detail .breadcrumbs{
  font-size: 13px;
  padding: 12px 0;
}

/* --- 상세 본문 섹션 세로 리듬 ----------------------------- */
body.tier-detail main > section{
  padding: clamp(56px, 6vw, 96px) 0;
}

/* --- 본문 + 사이드 레이아웃 fallback ---------------------- */
body.tier-detail .detail-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 40px;
}

body.tier-detail .detail-sidebar{
  position: sticky;
  top: 96px;
  align-self: start;
}

/* --- FAQ / 비교 / 가이드 등 콘텐츠 폭 보정 ---------------- */
body.tier-detail .article-wrap,
body.tier-detail .doc-wrap{
  max-width: 820px;
  margin: 0 auto;
  padding: 0 28px;
}

/* --- 카드 / 피처 그리드 fallback --------------------------- */
body.tier-detail .feature-grid,
body.tier-detail .spec-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* --- 하단 CTA / 도입 상담 영역 ---------------------------- */
body.tier-detail .bottom-cta,
body.tier-detail .final-cta{
  padding: clamp(56px, 6vw, 96px) 0;
  text-align: center;
}

/* --- 폼 페이지 (contact 계열) 폼 폭 fallback -------------- */
body.tier-detail .form-wrap{
  max-width: 680px;
  margin: 0 auto;
  padding: 0 28px;
}

/* --- 반응형 보정 ----------------------------------------- */
@media (max-width: 980px){
  body.tier-detail .detail-layout{
    grid-template-columns: 1fr;
  }
  body.tier-detail .detail-sidebar{
    position: static;
  }
}

@media (max-width: 768px){
  body.tier-detail .feature-grid,
  body.tier-detail .spec-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}