/* NEW file — handoff parity fixes. Does not edit existing CSS files. */

:root {
  --nown-brand-orange: #f16126;
  --nown-brand-orange-hover: #e85a20;
}

/*
 * Brand strip (handoff BrandLogo):
 * Legacy `.sponsor-iten img { height:72px; max-width:160px }` must NOT win.
 * Never force width/height:auto !important — that overrides BrandLogo inline
 * optical-crop sizes and is why logos look correct briefly then “get overwritten”.
 */
@media (max-width: 991.98px) {
  .nsv-landing .sponsor-section--legacy {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .nsv-landing .official-brands {
    display: block !important;
    padding: 4px 0 0 !important;
    background: #fff9f1 !important;
    isolation: auto;
  }
  .nsv-landing .official-brands .container {
    padding-inline: 0;
    max-width: none;
  }
  .nsv-landing .official-brands .sponsor-marquee-wrap {
    overflow: hidden;
  }
  .nsv-landing .official-brands .sponsor-marquee-track {
    animation: none !important;
    mix-blend-mode: multiply;
  }
  .nsv-landing .official-brands .sponsor-iten {
    width: 156px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .nsv-landing .official-brands .brand-logo {
    display: block !important;
    position: relative !important;
    flex: none !important;
    overflow: hidden !important;
  }
  /* Neutralize legacy img rules only — keep BrandLogo inline width/height/left/top */
  .nsv-landing .official-brands .sponsor-iten img.brand-logo-image,
  .nsv-landing .official-brands .brand-logo .brand-logo-image {
    position: absolute !important;
    display: block !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: unset !important;
    /* do NOT set width/height here */
  }

  /* CTA: solid orange start + text-style panel request (feature-story-preview) */
  .nsv-landing.feature-story-preview .banner-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: 440px;
    margin-inline: auto;
  }
  .nsv-landing.feature-story-preview .banner-cta .lab-btn:first-child {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--nown-brand-orange) !important;
    border: 1px solid var(--nown-brand-orange) !important;
    box-shadow: none !important;
  }
  .nsv-landing.feature-story-preview .banner-cta .lab-btn:first-child > span {
    color: #fff !important;
    font-size: 15px;
    font-weight: 650;
  }
  .nsv-landing.feature-story-preview .banner-cta .lab-btn-outline {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .nsv-landing.feature-story-preview
    .banner-cta
    .lab-btn-outline
    > span.feature-story-cta-context {
    display: inline !important;
    color: #71665b !important;
    font-size: 12px !important;
    font-weight: 400 !important;
  }
  .nsv-landing.feature-story-preview
    .banner-cta
    .lab-btn-outline
    > span:last-child {
    color: #755033 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  /* More menu: chevron hugs the trailing edge */
  .nsv-landing .feature-more-links a {
    justify-content: space-between;
    min-width: 168px;
  }
  .nsv-landing .feature-more-links a > span {
    flex: 1;
    min-width: 0;
  }
  .nsv-landing .feature-more-links a > svg {
    margin-left: 12px;
    width: 13px;
    height: 13px;
    color: #8b8c85;
  }
}

/* Native dialog open state (some skins hide dialog by default oddly) */
.location-feature-dialog[open] {
  display: flex;
  flex-direction: column;
}
.location-feature-dialog::backdrop {
  background: rgb(32 39 47 / 48%);
  backdrop-filter: blur(3px);
}
.location-auth-result .location-auth-icon-ok[hidden],
.location-auth-result .location-auth-icon-fail[hidden] {
  display: none !important;
}
.location-auth-result > svg {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

/*
 * Header: nsv-overrides glass(반투명·블러·하단 그림자) 유지.
 * 탑공지 .top_bn_area(#001b47)만 숨겨 GNB 아래 남색 선 방지.
 */
html:has(.nsv-landing) .header,
body:has(.nsv-landing) .header {
  background: transparent !important;
}
html:has(.nsv-landing) .top_bn_area,
body:has(.nsv-landing) #layer_top_notice,
body:has(.nsv-landing) .top_bn_area {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body:has(.nsv-landing) #header_gnb {
  top: 0 !important;
}
/*
 * fixed .header 아래 히어로 시작용 GNB 클리어런스.
 * (JS syncLandingGnbClearance 가 실측으로 재보정)
 */
body:has(.nsv-landing) .nsv-landing {
  padding-top: 92px !important;
}
@media screen and (max-width: 991.98px) {
  body:has(.nsv-landing) .nsv-landing {
    padding-top: 70px !important;
  }
}
@media screen and (max-width: 580px) {
  body:has(.nsv-landing) .nsv-landing {
    padding-top: 56px !important;
  }
}

/* Dialogs live under .banner-content { text-align:center } — reset to handoff left */
.location-feature-dialog,
.location-feature-dialog .location-explainer,
.location-feature-dialog .location-explainer-header,
.location-feature-dialog .location-explainer-content,
.location-feature-dialog .location-step-heading,
.location-feature-dialog .location-auth-result,
.location-feature-dialog #location-feature-summary,
.location-feature-dialog #diagnosis-feature-summary {
  text-align: left !important;
  text-align: start !important;
}
.location-feature-dialog .location-auth-result {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.location-feature-dialog .location-explainer-footer {
  text-align: left !important;
}
.location-feature-dialog .location-explainer-footer a,
.location-feature-dialog .location-explainer-footer button {
  text-align: center !important;
}
/* 자세히 보기: 운영계 링크 색 상속 방지 → 흰 글자 */
.location-feature-dialog .location-explainer-footer a[data-dialog-details],
.location-feature-dialog .location-explainer-footer a[data-dialog-details]:link,
.location-feature-dialog .location-explainer-footer a[data-dialog-details]:visited,
.location-feature-dialog .location-explainer-footer a[data-dialog-details]:hover,
.location-feature-dialog .location-explainer-footer a[data-dialog-details]:active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/*
 * 닫기 X (핸드오프 .location-close):
 * .nsv-landing button{border-radius:0} 이 원형을 사각형으로 덮어씀 → 50% !important.
 */
.location-feature-dialog .location-close,
.nsv-landing .location-feature-dialog .location-close,
.nsv-landing button.location-close {
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  background: #ede9e2 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #43505a !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.location-feature-dialog .location-close:active,
.nsv-landing button.location-close:active {
  background: #e1dbd1 !important;
}
.location-feature-dialog .location-close svg,
.nsv-landing button.location-close svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}
.location-feature-dialog .location-close svg path,
.location-feature-dialog .location-close svg line,
.nsv-landing button.location-close svg path,
.nsv-landing button.location-close svg line {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
}

/*
 * 브랜드 마키 PC/모바일:
 * transparent → 부모 #fff 흰 띠. 패널과 동일 #fff9f1 크림톤으로 연속.
 * legacy PNG 숨김, brands.json 13곳 SVG만 노출.
 * 여백(핸드오프 BrandMarquee): 마키 padding 4px 0 0 /
 *   PC 다음섹션 padding-top 20px / 모바일 40px
 *   (overrides .sponsor-section 28px·panel 40px 을 덮어씀)
 */
.nsv-landing .sponsor-section.official-brands,
.nsv-landing .sponsor-section.official-brands.section-bg {
  display: block !important;
  padding: 4px 0 0 !important;
  margin: 0 !important;
  background: #fff9f1 !important;
  background-color: #fff9f1 !important;
  isolation: auto !important;
}
.nsv-landing .sponsor-section.official-brands .container,
.nsv-landing .sponsor-section.official-brands .sponsor-marquee-wrap,
.nsv-landing .sponsor-section.official-brands .sponsor-marquee-track,
.nsv-landing .sponsor-section.official-brands .brand-group,
.nsv-landing .sponsor-section.official-brands .sponsor-iten {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.nsv-landing .sponsor-section.sponsor-section--legacy {
  display: none !important;
}
@media (min-width: 992px) {
  .nsv-landing .banner-section {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .nsv-landing .official-brands + .nsv-panel-section,
  .nsv-landing .official-brands + .nsv-panel-section.padding-tb,
  .nsv-landing .official-brands + .nsv-plaza-section,
  .nsv-landing .official-brands + .nsv-plaza-section.padding-tb,
  .nsv-landing .official-brands + .course-section.padding-tb,
  .nsv-landing .sponsor-section.official-brands + .course-section.padding-tb {
    padding-top: 20px !important;
  }
}
@media (max-width: 991.98px) {
  .nsv-landing .official-brands + .nsv-panel-section,
  .nsv-landing .official-brands + .nsv-panel-section.padding-tb,
  .nsv-landing .official-brands + .nsv-plaza-section,
  .nsv-landing .official-brands + .nsv-plaza-section.padding-tb,
  .nsv-landing .official-brands + .course-section.padding-tb,
  .nsv-landing .sponsor-section.official-brands + .course-section.padding-tb {
    padding-top: 40px !important;
  }
}
body:has(.nsv-landing) #header_gnb .gnb_logo .logo_link .logo_box.logo_src_nownsurvey {
  content: var(--logo_nownsurvey);
  width: auto !important;
  height: 40px !important;
  max-width: none !important;
  object-fit: contain;
}
@media screen and (max-width: 991.98px) {
  body:has(.nsv-landing) #header_gnb .section_gnb .gnb_logo {
    height: 50px !important;
    align-items: center !important;
  }
}
@media screen and (max-width: 580px) {
  body:has(.nsv-landing) #header_gnb .section_gnb .gnb_logo {
    height: 35px !important;
    align-items: flex-start !important;
  }
}
@media screen and (max-width: 380px) {
  body:has(.nsv-landing) #header_gnb .section_gnb .gnb_logo {
    align-items: center !important;
  }
  body:has(.nsv-landing) #header_gnb .gnb_logo .logo_link .logo_box {
    height: 30px !important;
  }
  body:has(.nsv-landing) #header_gnb .gnb_logo .familysite {
    padding: 0 5px 0 0 !important;
  }
}

/*
 * TOP + chat (handoff floating-actions.css).
 * typebot host is width/height 0 so CSS `right` alone won't share a center axis —
 * nsv-mobile-landing.js syncs #nsvTopBtn to the visible chat rect.
 */
html:has(.nsv-landing) {
  --floating-action-size: 48px;
  --floating-action-gap: 12px;
  --floating-action-right: max(20px, env(safe-area-inset-right, 0px));
  --floating-action-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
html:has(.nsv-landing) #nsvTopBtn {
  box-sizing: border-box;
  right: var(--floating-action-right) !important;
  bottom: calc(
    var(--floating-action-bottom) + var(--floating-action-size) +
      var(--floating-action-gap)
  ) !important;
  width: var(--floating-action-size) !important;
  height: var(--floating-action-size) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}
html:has(.nsv-landing) #nsvTopBtn .nsv-top-arrow {
  display: block;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}
html:has(.nsv-landing) #nsvTopBtn .nsv-top-text {
  display: block;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}
html:has(.nsv-landing) typebot-bubble {
  right: var(--floating-action-right) !important;
  bottom: var(--floating-action-bottom) !important;
}
@media (max-width: 767.98px) {
  html:has(.nsv-landing) {
    --floating-action-right: max(16px, env(safe-area-inset-right, 0px));
    --floating-action-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}