/* ──────────────────────────────────────────────
   사이트 수정 사항 (Site Fixes)
   ────────────────────────────────────────────── */

/* [FIX] preview-strip 제거 후 헤더/히어로 위치 보정 */
.site-header {
  top: 0 !important;
}
.hero {
  height: 100svh !important;
  min-height: 700px;
}

/* [FIX] 히어로 이미지가 헤더 위로 넘치지 않도록 */
.hero {
  margin-top: 0;
}

/* ── 데이터센터 드롭다운 메뉴 ── */
.datacenter-dropdown {
  position: relative;
  display: inline-flex;
}

.datacenter-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  padding: 16px 0;
  background: var(--artifact-header-surface, rgba(0,32,65,.97));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 68px rgba(0,20,45,.3);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.datacenter-dropdown:hover .datacenter-menu,
.datacenter-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.datacenter-group-label {
  display: block;
  padding: 8px 24px 6px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  font-weight: 600;
}

.datacenter-group-label:not(:first-child) {
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 14px;
}

.datacenter-link {
  display: block;
  padding: 9px 24px;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.datacenter-link:hover {
  background: rgba(110,55,250,0.15);
  color: #4DD4CE;
}

.datacenter-link small {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

/* 모바일 반응형 */
@media screen and (max-width: 950px) {
  .datacenter-dropdown { display: none; }
}

/* ── 허브 카드 3열 균등 배분 (TAM hidden 상태) ── */
.client-hub .hub-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px;
}
.hub-card[hidden] {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .client-hub .hub-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media screen and (max-width: 480px) {
  .client-hub .hub-grid {
    grid-template-columns: 1fr !important;
  }
}

/* [FIX] 히어로 슬라이드 2 (Beyond Screens) — 얼굴이 텍스트에 가려지지 않게 */
.hero-photo[data-hero-scene="1"] {
  object-position: 85% 50% !important;
}
@media screen and (max-width: 650px) {
  .hero-photo[data-hero-scene="1"] {
    object-position: 15% 25% !important;
  }
}

/* [FIX] 쇼케이스 이미지 하단 캡션 확실히 보이게 */
.showcase-media figcaption {
  position: absolute !important;
  z-index: 2 !important;
  display: block !important;
  visibility: visible !important;
  left: 25px;
  right: 25px;
  bottom: 21px;
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
}

/* [FIX] 쇼케이스 이미지 하단 음영 제거 (캡션 삭제됨) */
.showcase-media:after {
  display: none !important;
}

/* ── 3-Screen 쇼케이스: TV·PC·Mobile 3분할 그리드 ── */
.showcase-editorial-three .three-screen-photo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.showcase-editorial-three .three-screen-scene {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--artifact-navy);
}
.showcase-editorial-three .three-screen-scene .showcase-photo {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  filter: none;
  transform: none;
}
.showcase-slide[data-showcase-slide="3screen"] .three-screen-scene-tv .showcase-photo {
  object-position: 60% 50%;
}
.showcase-slide[data-showcase-slide="3screen"] .three-screen-scene-pc .showcase-photo {
  object-position: 53% 50%;
}
.showcase-slide[data-showcase-slide="3screen"] .three-screen-scene-mobile .showcase-photo {
  object-position: 51% 50%;
}

/* ── [v3] 섹션별 색상 구분 (Section Color Differentiation) ── */
:root {
  --artifact-section-base: var(--artifact-navy);
  --artifact-section-deep: var(--artifact-ink);
  --artifact-section-rule: var(--artifact-line-dark);
}

@media screen {
  /* 쇼케이스: 더 진한 배경 + 상단 경계선 */
  #main > #solutionShowcase {
    --artifact-surface: var(--artifact-section-deep);
    background: var(--artifact-surface);
    color: var(--artifact-white);
    border-top: 1px solid var(--artifact-section-rule);
    padding-top: 64px;
  }

  /* 모든 주요 섹션: 상하 여백 + 상단 경계선 */
  #main > #s-finder,
  #main > #s-insights,
  #main > #s-hub,
  #main > #s-proof,
  #main > #s-contact {
    padding-top: 88px;
    padding-bottom: 88px;
    border-top: 1px solid var(--artifact-section-rule);
    border-bottom: 0;
  }

  /* 기본 배경 섹션 (navy #002041) */
  #main > #s-finder,
  #main > #s-hub {
    background: var(--artifact-section-base);
    color: var(--artifact-white);
  }

  /* 상담 섹션 (v4: 흰 배경 + 네이비 텍스트) */
  #main > #s-contact {
    background: var(--artifact-section-base) !important;
    color: var(--artifact-white) !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
  }

  /* 어두운 배경 섹션 (ink #00162D) */
  #main > #s-insights,
  #main > #s-proof {
    background: var(--artifact-section-deep);
    color: var(--artifact-white);
  }

  /* 푸터: 어두운 배경 + 상단 경계선 */
  .site-footer {
    background: var(--artifact-section-deep) !important;
    color: var(--artifact-white);
    border-top: 1px solid var(--artifact-section-rule);
  }

  /* 솔루션 소개 레이아웃 */
  #s-finder .solutions-intro {
    display: block;
    margin-bottom: 36px;
  }

  /* ── [v3] 닐슨 소개 섹션 (#s-proof) 타이포그래피 ── */
  #s-proof .people-copy .section-title {
    font-size: clamp(36px, 3.2vw, 48px);
    line-height: 1.35;
    letter-spacing: -.055em;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  #s-proof .people-copy > .section-copy {
    font-size: 18px;
    line-height: 1.85;
    margin-top: 20px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  #s-proof .proof-grid {
    gap: 18px 24px;
    margin-top: 26px;
  }

  #s-proof .proof-item {
    padding-top: 14px;
  }

  #s-proof .proof-item b {
    font-size: 17px;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  #s-proof .proof-item p {
    font-size: 16px;
    line-height: 1.85;
    margin-top: 6px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  #s-proof .about-resources {
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
  }

  #s-proof .about-resources .button {
    max-width: 100%;
    min-height: 54px;
    padding: 14px 22px;
    font-size: 16px;
    line-height: 1.6;
    gap: 20px;
    white-space: normal;
  }
}

/* 데스크탑: 닐슨 소개 2열 레이아웃 */
@media screen and (min-width: 901px) {
  #s-proof .people-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 56px);
    align-items: stretch;
  }

  #s-proof .people-visual {
    min-height: 0;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    align-self: stretch;
  }

  #s-proof .people-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    min-width: 0;
  }
}

/* 태블릿: 섹션 여백 축소 */
@media screen and (max-width: 900px) {
  #main > #s-finder,
  #main > #s-insights,
  #main > #s-hub,
  #main > #s-proof,
  #main > #s-contact {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  #main > #solutionShowcase {
    padding-top: 56px;
  }
}

/* 모바일: 섹션 여백 + 타이포그래피 축소 */
@media screen and (max-width: 650px) {
  #main > #s-finder,
  #main > #s-insights,
  #main > #s-hub,
  #main > #s-proof,
  #main > #s-contact {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  #main > #solutionShowcase {
    padding-top: 52px;
  }

  #s-finder .solutions-intro {
    margin-bottom: 28px;
  }

  #s-proof .people-copy .section-title {
    font-size: clamp(30px, 8.6vw, 36px);
    line-height: 1.4;
  }

  #s-proof .people-copy > .section-copy {
    font-size: 17px;
    line-height: 1.9;
    margin-top: 20px;
  }

  #s-proof .proof-grid {
    gap: 20px 20px;
    margin-top: 24px;
  }
}

/* 소형 모바일: 1열 그리드 */
@media screen and (max-width: 480px) {
  #s-proof .proof-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  #s-proof .proof-item {
    padding-top: 14px;
  }
}

@media screen and (max-width: 360px) {
  #s-proof .people-copy .section-title {
    font-size: 30px;
  }
}

/* [FIX] Ad Intel 쇼케이스 이미지 — 얼굴 안 잘리게 위로 */
.showcase-slide[data-showcase-slide="adex"] .showcase-photo {
  object-position: 48% 35% !important;
}

/* ── [v4] 섹션별 텍스트 색상·밑줄 매칭 (Section Text Color & Underline Matching) ── */

/* --- Issue 1: #s-finder 카테고리 힌트 텍스트 흰색 --- */
#s-finder .category-hint {
  color: #fff !important;
}

/* --- Issue 1-b: 카테고리 카드 하단 경계선 (dark bg에서 보이도록) --- */
#s-finder .category-card {
  border-bottom-color: rgba(255,255,255,0.26) !important;
}

/* --- Issue 2: #s-insights INSIGHTS ARCHIVE 위아래 구분선 --- */
#s-insights .insights-archive-entry {
  border-top-color: rgba(255,255,255,.26) !important;
  border-bottom-color: rgba(255,255,255,.26) !important;
}

/* --- Issue 3: Knowledge Hub / 이용자 문의 우측 정렬 --- */
.hub-support {
  justify-content: flex-end !important;
}
.hub-support-links {
  justify-content: flex-end !important;
}

/* --- Issue 4: #s-proof 프루프 항목 흰색 구분선 --- */
#s-proof .proof-item {
  border-top-color: rgba(255,255,255,.26) !important;
}

/* --- #s-proof (닐슨 소개) --- */
#s-proof .section-copy,
#s-proof .proof-item p {
  color: #D4DEEE !important;
}
#s-proof .proof-item b,
#s-proof .section-title {
  color: #fff !important;
}
#s-proof .eyebrow {
  color: #32BBB9 !important;
}

/* --- #s-contact (상담 섹션 · v4 매칭: 흰 패널 + 네이비 텍스트) --- */
/* global.css 기본 스타일: .contact-panel = white bg, navy text, 모든 폼 요소 light theme */
/* 사용자 요청: step-progress .on 색상을 green/aqua (#32BBB9) 로 변경 */
#s-contact .step-progress li.on {
  border-color: #32BBB9 !important;
  color: #00656C !important;
}

/* --- #s-insights (인사이트) --- */
#s-insights .insights-header {
  border-bottom: 1px solid rgba(255,255,255,0.24) !important;
  padding-bottom: 20px !important;
}
#s-insights .underlined-link {
  color: #fff !important;
  border-color: rgba(255,255,255,0.44) !important;
}
#s-insights .underlined-link:hover {
  color: #32BBB9 !important;
}
#s-insights .insight-small .insight-read {
  color: #32BBB9 !important;
}
#s-insights .insight-feature .insight-tag {
  color: #D4DEEE !important;
}
#s-insights .insight-small .insight-tag {
  color: #D4DEEE !important;
}
#s-insights .insight-small {
  border-top-color: rgba(255,255,255,0.24) !important;
}
#s-insights .insight-small:last-child {
  border-bottom-color: rgba(255,255,255,0.24) !important;
}
#s-insights .eyebrow {
  color: #32BBB9 !important;
}

/* --- #s-hub (고객지원) --- */
#s-hub .hub-link span,
#s-hub .hub-description {
  color: #fff !important;
}
#s-hub .client-heading .eyebrow {
  color: #fff !important;
}
#s-hub .hub-support p {
  color: #fff !important;
}
#s-hub .hub-support-link b {
  color: #fff !important;
}

/* --- #s-finder (솔루션 탐색) --- */
#s-finder .solutions-intro .section-copy {
  color: #D4DEEE !important;
}
#s-finder .category-en,
#s-finder .category-question {
  color: #D4DEEE !important;
}
#s-finder .eyebrow {
  color: #32BBB9 !important;
}
#s-finder .category-hint:before,
#s-finder .panel-heading .eyebrow,
#s-finder .product-label {
  color: #32BBB9 !important;
}
#s-finder .category-panel {
  border-top-color: #32BBB9 !important;
}

/* [FIX] 디자인 시안 안내문 위 구분선 */
#s-contact .contact-footnote {
  border-top: 1px solid rgba(255,255,255,0.25) !important;
}

/* [FIX] Let's talk 섹션 전체 밝게 */
#s-contact .contact-copy h2 {
  color: #fff !important;
}
#s-contact .contact-copy p {
  color: #D4DEEE !important;
}
#s-contact .contact-copy .eyebrow {
  color: #32BBB9 !important;
}
#s-contact .contact-guide li {
  color: #D4DEEE !important;
}
#s-contact .contact-guide span {
  color: #32BBB9 !important;
}
#s-contact .contact-step h3 {
  color: #fff !important;
}
#s-contact .field label,
#s-contact .field-label {
  color: #D4DEEE !important;
}
#s-contact .field label span {
  color: rgba(255,255,255,0.5) !important;
}
#s-contact .field-help {
  color: #D4DEEE !important;
}
#s-contact .field-help strong {
  color: #fff !important;
}
#s-contact .interest-option b {
  color: #fff !important;
}
#s-contact .interest-option small {
  color: #D4DEEE !important;
}
#s-contact .interest-option {
  border-bottom-color: rgba(255,255,255,0.25) !important;
}
#s-contact .step-progress li {
  color: #D4DEEE !important;
  border-top-color: rgba(255,255,255,0.3) !important;
}
#s-contact .step-progress li.on {
  color: #32BBB9 !important;
  border-color: #32BBB9 !important;
}
#s-contact .step-progress li span {
  color: #32BBB9 !important;
}
#s-contact .contact-row .field-help {
  color: #D4DEEE !important;
}
#s-contact .error {
  color: #FF8296 !important;
}

/* [FIX] Insights 헤더 아래 선 제거 */
#s-insights .insights-header {
  border-bottom: none !important;
}

/* [FIX] 솔루션 메가메뉴 항목 아래 구분선 */
.mega-grid button {
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

/* [FIX] 푸터 섹션 제목 (솔루션, 닐슨, 고객지원) 크게 + 볼드 + 닐슨 초록 */
.site-footer .footer-column h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #32BBB9 !important;
  letter-spacing: 0 !important;
}

/* [FIX] Client Services 제목 닐슨 초록 */
#s-hub .client-heading .eyebrow {
  color: #32BBB9 !important;
}
#s-hub .client-heading h2 {
  color: #fff !important;
}

/* [FIX] Footer PC 레이아웃 강제 (4컬럼 그리드) */
.site-footer {
  width: 100% !important;
  background: var(--artifact-night, #050D22) !important;
  color: #fff !important;
  padding: 70px 0 25px !important;
}
.site-footer .inner {
  width: calc(100% - var(--artifact-page-gutter, 64px) * 2) !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
}
.site-footer .footer-top {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  gap: 36px !important;
}
.site-footer .footer-brand {
  /* no span */
}
.site-footer .footer-logo-link {
  display: inline-block;
}
.site-footer .footer-logo {
  width: 210px !important;
  height: auto !important;
}
.site-footer .footer-column h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #32BBB9 !important;
  margin-bottom: 20px !important;
}
.site-footer .footer-column a,
.site-footer .footer-column button {
  display: block !important;
  font-size: 13px !important;
  margin-bottom: 13px !important;
  color: #fff !important;
}
.site-footer .footer-social-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 38px !important;
  flex-wrap: wrap !important;
  gap: 22px !important;
}
.site-footer .footer-social-links {
  display: flex !important;
  gap: 9px !important;
  margin-left: auto !important;
}
.site-footer .footer-social-link {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
  color: #fff !important;
}
.site-footer .footer-social-link svg {
  width: 19px !important;
  height: 19px !important;
  fill: currentColor !important;
}
.site-footer .footer-bottom {
  margin-top: 31px !important;
  border-top: 1px solid rgba(255,255,255,0.26) !important;
  padding-top: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 30px !important;
  font-size: 10px !important;
  color: rgba(255,255,255,0.6) !important;
}
.site-footer .footer-legal {
  display: flex !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}
.site-footer .footer-legal a,
.site-footer .footer-legal button {
  font-size: 10px !important;
  color: rgba(255,255,255,0.6) !important;
  margin-bottom: 0 !important;
}

/* 모바일 footer */
@media screen and (max-width: 650px) {
  .site-footer .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
  }
  .site-footer {
    padding: 50px 0 25px !important;
  }
}
