/* Sub page styles */

/* 서브페이지 GNB: 스크롤과 무관하게 항상 화이트 배경 */
#gnb {
  background-color: #fff;
  box-shadow: 0 1px 0 color-mix(in srgb, #131313 6%, transparent);
}

#gnb .gnb-logo-white {
  display: none;
  opacity: 0;
}

#gnb .gnb-logo-or {
  display: block;
  opacity: 1;
}

#gnb .gnb-nav {
  color: #131313; /* tx_primary / dark */
}

#gnb .gnb-nav > .group > a:hover {
  opacity: 0.7;
}

.hero-clinic-nav summary {
  list-style: none;
}

.hero-clinic-nav summary::-webkit-details-marker {
  display: none;
}

.hero-clinic-nav ul {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.treatment-step-indicator {
  left: 0;
  width: 0;
  transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: left, width;
}

.faq-accordion summary {
  list-style: none;
}

.faq-accordion .faq-icon {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-accordion details[open] .faq-icon,
.faq-accordion details.is-opening .faq-icon {
  transform: rotate(45deg);
}

.faq-accordion .faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-accordion details[open] .faq-panel,
.faq-accordion details.is-opening .faq-panel {
  grid-template-rows: 1fr;
}

.faq-accordion .faq-panel-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.faq-accordion details[open] .faq-panel-inner,
.faq-accordion details.is-opening .faq-panel-inner {
  opacity: 1;
}