/* generated by scripts/bundle-site-css.mjs */
/* /templates/css/shared/header-c.css */
/* 시그니처(C)·프리미엄(B) — 아르의원 layout.css 헤더 구조, 메뉴는 Clara 서브페이지 */

:is(html.main-template-c, html.main-template-c.header-solid, html.main-template-c.main-page, html.main-template-c.sub-page) .site-header--c,
body.main-template-c .site-header--c,
body.main-template-c.header-solid .site-header--c,
html.main-template-b.main-page .site-header--c,
html.main-template-b.main-page.header-solid .site-header--c,
body.main-template-b.main-page .site-header--c {
  position: fixed;
  top: 10px;
  left: 2%;
  right: auto;
  width: 96%;
  height: auto;
  z-index: 10001;
  background: rgba(250, 249, 245, 0.9);
  margin: 5px 0 0;
  border: 0;
  border-radius: 28px;
  animation: header-c-show 1s ease-out 0.2s forwards;
  transform: translateY(0);
  opacity: 1;
}

/* B 메인 헤더: 배경은 B 배경색(#fffff9), 로고 글자·메뉴 줄은 B 대표 컬러(#a33a10) */
html.main-template-b.main-page .site-header--c {
  background: #fffff9;
}

html.main-template-b.main-page .site-header--c #logo-link p,
html.main-template-b.main-page .site-header--c .site-header__wordmark {
  color: #a33a10;
}

html.main-template-b.main-page .site-header--c .hd-menu span {
  background: #a33a10 !important;
}

html.main-template-b.sub-page .site-header--c,
html.main-template-b.sub-page.header-solid .site-header--c,
body.main-template-b.sub-page .site-header--c {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 10001;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--template-page-bg, #fff);
  animation: none;
  transform: none;
  opacity: 1;
}

@keyframes header-c-show {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

html.main-template-b .site-header--c #main-nav,
html.main-template-b.header-solid .site-header--c #main-nav,
html.main-template-b.main-page .site-header--c #main-nav,
html.main-template-b.sub-page .site-header--c #main-nav,
body.main-template-b .site-header--c #main-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 56px;
  margin: 0 auto;
  padding: 0 24px;
  background: transparent;
  border: 0;
  grid-template-columns: none;
  column-gap: 0;
}

/* 서브페이지 헤더 폭: 전체 메뉴(GNB)를 열었을 때와 같게 (좌우 32px, 최대 폭 없음) — 열고 닫을 때 로고·메뉴 버튼이 튀지 않게 */
html.main-template-b.sub-page .site-header--c #main-nav,
html.main-template-b.sub-page.header-solid .site-header--c #main-nav {
  max-width: none;
  margin: 0 auto;
}

@media (min-width: 1025px) {
  html.main-template-b.sub-page .site-header--c #main-nav,
  html.main-template-b.sub-page.header-solid .site-header--c #main-nav {
    padding: 0 32px;
  }
}

:is(html.main-template-c, html.main-template-b) .site-header--c .ht-inner__center,
:is(html.main-template-c, html.main-template-b) .site-header--c .logo,
:is(html.main-template-c, html.main-template-b) .site-header--c .site-header__brand {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
  padding: 0;
}

:is(html.main-template-c, html.main-template-b) .site-header--c .ht-inner__center {
  flex: none;
  justify-content: flex-start;
}

html.main-template-c .site-header--c .site-header__links {
  display: none;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  gap: 28px;
  margin: 0 8px 0 24px;
  padding: 0;
  list-style: none;
}

html.main-template-c .site-header--c .site-header__link {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #333;
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

html.main-template-c .site-header--c .dropdown-menu {
  left: 0;
  right: 0;
  border-radius: 0 0 24px 24px;
  background: var(--template-page-bg, #fff);
}

@media (min-width: 1025px) {
  html.main-template-c .site-header--c .site-header__links {
    display: flex;
  }
}

:is(html.main-template-c, html.main-template-b) .site-header--c .logo {
  width: auto;
}

:is(html.main-template-c, html.main-template-b) .site-header--c #logo-link {
  display: flex;
  align-items: center;
  height: 100%;
}

:is(html.main-template-c, html.main-template-b) .site-header--c #logo-link p,
:is(html.main-template-c, html.main-template-b) .site-header--c .site-header__wordmark {
  margin: 0;
  color: #3c3c3c;
  font-family: Poppins, Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

:is(html.main-template-c, html.main-template-b) .site-header--c #logo-link img,
:is(html.main-template-c, html.main-template-b).main-page .site-header--c #logo-link img,
:is(body.main-template-c, body.main-template-b).main-page .site-header--c #logo-link img,
:is(html.main-template-c, html.main-template-b) .site-header--c #main-nav.menu-active #logo-link img {
  display: block;
  width: auto;
  max-width: 160px;
  max-height: 28px;
  height: auto;
  object-fit: contain;
  filter: none !important;
}

:is(html.main-template-c, html.main-template-b) .site-header--c .ht-inner__right,
:is(html.main-template-c, html.main-template-b) .site-header--c .site-header__actions {
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 0;
}

:is(html.main-template-c, html.main-template-b) .site-header--c .hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 10002;
  flex-shrink: 0;
}

:is(html.main-template-c, html.main-template-b) .site-header--c .hd-menu {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
  flex-shrink: 0;
}

:is(html.main-template-c, html.main-template-b) .site-header--c .hd-menu span,
:is(html.main-template-c, html.main-template-b).main-page .site-header--c .hd-menu span,
:is(body.main-template-c, body.main-template-b).main-page .site-header--c .hd-menu span,
:is(html.main-template-c, html.main-template-b) .site-header--c .hamburger.open .hd-menu span,
:is(html.main-template-c, html.main-template-b) .site-header--c .hamburger.active .hd-menu span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #6a605a !important;
  border-radius: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.25s;
}

:is(html.main-template-c, html.main-template-b) .site-header--c .hd-menu span:first-child { top: 0; }
:is(html.main-template-c, html.main-template-b) .site-header--c .hd-menu span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
:is(html.main-template-c, html.main-template-b) .site-header--c .hd-menu span:nth-child(3) {
  top: 100%;
  transform: translateY(-100%);
}

:is(html.main-template-c, html.main-template-b) .site-header--c .hamburger.open .hd-menu span:first-child,
:is(html.main-template-c, html.main-template-b) .site-header--c .hamburger.active .hd-menu span:first-child {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
:is(html.main-template-c, html.main-template-b) .site-header--c .hamburger.open .hd-menu span:nth-child(2),
:is(html.main-template-c, html.main-template-b) .site-header--c .hamburger.active .hd-menu span:nth-child(2) {
  opacity: 0;
}
:is(html.main-template-c, html.main-template-b) .site-header--c .hamburger.open .hd-menu span:nth-child(3),
:is(html.main-template-c, html.main-template-b) .site-header--c .hamburger.active .hd-menu span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  opacity: 1;
}

html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush,
html.main-template-c.main-page:has(.gnb-container.open) .site-header--c.site-header--flush,
html.main-template-c.sub-page:has(.gnb-container.open) .site-header--c.site-header--flush {
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  border-radius: 0;
  background: rgba(250, 249, 245, 0.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  z-index: 10001;
}

html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush .dropdown-menu {
  display: none;
}

html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush #main-nav {
  background: transparent;
}

:is(html.main-template-b, html.main-template-c) .gnb-container {
  height: 100vh;
  height: 100dvh;
  background-color: #2a1f1b;
}

:is(html.main-template-b, html.main-template-c) .gnb-container.open {
  background-color: #2a1f1b;
}

:is(html.main-template-b, html.main-template-c) .gnb-category--animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

:is(html.main-template-b, html.main-template-c) .gnb-category--animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

:is(html.main-template-b, html.main-template-c) .gnb-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 502px;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  background: transparent;
  transform: translateY(-500px);
  transition: transform 1s, opacity 0.8s;
}

:is(html.main-template-b, html.main-template-c) .gnb-container.open {
  opacity: 1;
  visibility: visible;
  background: var(--template-page-bg, #fff);
  transform: translateY(0);
}

:is(html.main-template-b, html.main-template-c) .gnb-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #132C16;
}

:is(html.main-template-b, html.main-template-c) .gnb-inner {
  display: block;
  justify-content: center;
  width: 100%;
  height: 500px;
  padding: 80px 0 0;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.6s 0.2s, transform 0.6s 0.2s;
}

:is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-inner {
  opacity: 1;
  transform: translateY(0);
}

:is(html.main-template-b, html.main-template-c) .gnb-inner .flex_row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  height: 100%;
  border-top: 1px solid #132C16;
}

:is(html.main-template-b, html.main-template-c) .gnb-menu-list {
  position: relative;
  width: auto;
  min-width: 0;
  flex: 1 1 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid #132C16;
}

:is(html.main-template-b, html.main-template-c) .gnb-menu-list:last-child {
  border-right: 0;
}

:is(html.main-template-b, html.main-template-c) .gnb-menu-depth-1-1 {
  padding: 14px 0 14px 50px;
  margin-bottom: 50px;
  border-bottom: 1px solid #132C16;
}

html.main-template-b .hd-gnb-title-01 {
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 19px;
  font-weight: 500;
  color: #000;
}

:is(html.main-template-b, html.main-template-c) .gnb-menu-depth-1 {
  position: relative;
  padding-left: 50px;
  color: #040000;
}

:is(html.main-template-b, html.main-template-c) .gnb-menu-depth-1 + .gnb-menu-depth-1 {
  margin-top: 21px;
}

:is(html.main-template-b, html.main-template-c) .gnb-menu-depth-inner > a {
  color: #040000;
  font-size: 19px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.4s ease;
}

:is(html.main-template-b, html.main-template-c) .gnb-menu-depth-inner:hover > a {
  color: #132C16;
}

:is(html.main-template-b, html.main-template-c) .gnb-container .upBtn {
  overflow: hidden;
  position: relative;
  margin: 0;
}

:is(html.main-template-b, html.main-template-c) .gnb-container .upBtn span {
  display: block;
  transition: transform 0.4s;
}

:is(html.main-template-b, html.main-template-c) .gnb-container .upBtn span:nth-of-type(1) {
  transform: translateY(0);
}

:is(html.main-template-b, html.main-template-c) .gnb-container .upBtn span:nth-of-type(2) {
  position: absolute;
  top: 0;
  transform: translateY(200%);
}

:is(html.main-template-b, html.main-template-c) .gnb-container a:hover .upBtn span:nth-of-type(1) {
  transform: translateY(-200%);
}

:is(html.main-template-b, html.main-template-c) .gnb-container a:hover .upBtn span:nth-of-type(2) {
  transform: translateY(0);
}

:is(html.main-template-b, html.main-template-c) .gnb-menu-list-m {
  display: none;
}

@media (max-width: 1024px) {
  :is(html.main-template-b, html.main-template-c) .gnb-container {
    height: 100vh;
  }

  :is(html.main-template-b, html.main-template-c) .gnb-inner.pc-cont-1024 {
    display: none;
  }

  :is(html.main-template-b, html.main-template-c) .gnb-wrapper {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: none;
  }

  :is(html.main-template-b, html.main-template-c) .gnb-menu-list-m.m-cont-1024 {
    display: none;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 68px 20px 112px;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    opacity: 0;
  }

  :is(html.main-template-b, html.main-template-c) .gnb-menu-list-m.m-cont-1024 {
    padding-top: 88px;
  }

  :is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m {
    display: block;
    opacity: 1;
  }

  :is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-1 {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  :is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-1-1 {
    padding: 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  :is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-1 > a,
:is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-1 > button {
    position: relative;
    display: block;
    width: 100%;
    padding: 16px 28px 16px 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: Pretendard, 'Noto Sans KR', sans-serif;
    font-size: 18px;
    color: #040000;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
  }

  :is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-1 > a::after,
:is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-1 > button::after {
    content: '+';
    position: absolute;
    top: 50%;
    right: 2px;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    color: var(--color-primary);
    transform: translateY(-50%);
    transition: transform 0.3s;
  }

  :is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-1.on > a::after,
:is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-1.on > button::after {
    transform: translateY(-50%) rotate(45deg);
  }

  /* 메뉴 개수와 상관없이 모두 보이게 (예전엔 5번째까지만 보여 '자주 묻는 질문'이 투명했음) */
  :is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li > a,
:is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li > button {
    opacity: 1;
    transform: translateY(0);
    transition: transform 1s ease, opacity 1s ease;
  }

  :is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li:nth-child(1) > a,
:is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li:nth-child(1) > button { transition-delay: 0.8s; }
  :is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li:nth-child(2) > a,
:is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li:nth-child(2) > button { transition-delay: 0.9s; }
  :is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li:nth-child(3) > a,
:is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li:nth-child(3) > button { transition-delay: 1s; }
  :is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li:nth-child(4) > a,
:is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li:nth-child(4) > button { transition-delay: 1.1s; }
  :is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li:nth-child(5) > a,
:is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li:nth-child(5) > button { transition-delay: 1.2s; }
  :is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li:nth-child(n + 6) > a,
:is(html.main-template-b, html.main-template-c) .gnb-container.open .gnb-menu-list-m > li:nth-child(n + 6) > button { transition-delay: 1.3s; }

  :is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-1.on > a,
:is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-1.on > button {
    color: var(--color-primary);
  }

  :is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-2 {
    display: none;
    position: static;
    height: auto;
    margin: 0;
    padding: 0 0 16px;
    list-style: none;
    transform: none;
  }

  :is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-1.on .gnb-menu-depth-2 {
    display: block;
  }

  :is(html.main-template-b, html.main-template-c) .gnb-menu-list-m .gnb-menu-depth-2 > li > a {
    display: block;
    padding: 6px 16px;
    font-size: 16px;
    font-weight: 400;
    color: #040000;
    text-decoration: none;
  }
}

@media (max-width: 768px) {
  html.main-template-c .site-header--c,
html.main-template-b.main-page .site-header--c {
    margin: 10px 0 0;
    border-radius: 22px;
  }

  html.main-template-b.sub-page .site-header--c {
    margin: 0;
    border-radius: 0;
  }

  html.main-template-b .site-header--c #main-nav,
html.main-template-b.header-solid .site-header--c #main-nav,
html.main-template-b.main-page .site-header--c #main-nav,
html.main-template-b.sub-page .site-header--c #main-nav,
body.main-template-b .site-header--c #main-nav,
html.main-template-b:has(.gnb-container.open) .site-header--c #main-nav {
    height: 37px;
    padding: 0 16px;
  }

  :is(html.main-template-c, html.main-template-b) .site-header--c .hamburger {
    width: 28px;
    height: 28px;
  }

  :is(html.main-template-c, html.main-template-b) .site-header--c #logo-link img {
    max-width: 100px;
    max-height: 22px;
  }

  :is(html.main-template-c, html.main-template-b) .site-header--c .hd-menu {
    width: 18px;
    height: 11px;
  }
}

/**********************************************************
 * C 시그니처 — 동래클리닉형 상단 밀착 헤더 (햄버거는 Clara GNB)
 ***********************************************************/
html.main-template-c .site-header--flush,
html.main-template-c.header-solid .site-header--flush,
html.main-template-c.main-page .site-header--flush,
html.main-template-c.sub-page .site-header--flush {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
  transform: none;
  opacity: 1;
  overflow: visible;
  box-shadow: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

html.main-template-c.main-page .site-header--flush {
  background: transparent;
  background-color: transparent;
}

html.main-template-c.main-page.header-solid .site-header--flush,
html.main-template-c .site-header--c.site-header--flush.scrolled,
html.main-template-c .site-header--c.site-header--flush.on,
html.main-template-c.sub-page .site-header--c.site-header--flush,
html.main-template-c.sub-page.header-solid .site-header--c.site-header--flush {
  background: var(--template-page-bg, #fff);
  background-color: var(--template-page-bg, #fff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush.on,
html.main-template-c.header-solid:has(.gnb-container.open) .site-header--c.site-header--flush.on,
html.main-template-c.sub-page:has(.gnb-container.open) .site-header--c.site-header--flush.on {
  background-color: var(--template-page-bg, #fff);
  border-bottom-color: transparent;
}

html.main-template-c .site-header--c.site-header--flush.scrolled:not(.on) {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.08);
}

html.main-template-c .site-header--c.site-header--flush.on::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ddd;
  z-index: 3;
  pointer-events: none;
}

html.main-template-c .site-header--flush .header_wrap,
html.main-template-c .site-header--flush #main-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1920px;
  height: 80px;
  margin: 0 auto;
  padding: 0 4rem;
  background: transparent;
  border: 0;
  box-sizing: border-box;
  grid-template-columns: none;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

html.main-template-c .site-header--c.site-header--flush .header_left,
html.main-template-c .site-header--c.site-header--flush .hamburger {
  pointer-events: auto;
}

html.main-template-c .site-header--c.site-header--flush .header_left {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
}

html.main-template-c .site-header--c.site-header--flush .header_logo {
  display: block;
  position: relative;
  width: auto;
  min-width: 120px;
  height: 40px;
  flex-shrink: 0;
}

html.main-template-c .site-header--c.site-header--flush #logo-link,
html.main-template-c .site-header--c.site-header--flush #logo-link p,
html.main-template-c .site-header--c.site-header--flush .site-header__wordmark {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  color: #fff;
  font-family: Poppins, Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

html.main-template-c .site-header--c.site-header--flush.scrolled #logo-link p,
html.main-template-c .site-header--c.site-header--flush.on #logo-link p,
html.main-template-c.main-page.header-solid .site-header--c.site-header--flush #logo-link p,
html.main-template-c.sub-page .site-header--c.site-header--flush #logo-link p {
  color: #333;
}

html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush #logo-link p {
  color: #333;
}

html.main-template-c .site-header--c.site-header--flush #logo-link img {
  display: block;
  width: auto;
  max-width: 220px;
  max-height: 40px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1) !important;
}

html.main-template-c .site-header--c.site-header--flush #logo-link img.header-logo--custom {
  filter: none !important;
}

html.main-template-c .site-header--c.site-header--flush.scrolled #logo-link img,
html.main-template-c .site-header--c.site-header--flush.on #logo-link img,
html.main-template-c.main-page.header-solid .site-header--c.site-header--flush #logo-link img,
html.main-template-c.sub-page .site-header--c.site-header--flush #logo-link img {
  filter: none !important;
}

html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush #logo-link img {
  filter: none !important;
}

html.main-template-c .site-header--c.site-header--flush .hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  z-index: 4;
  flex-shrink: 0;
}

html.main-template-c .site-header--c.site-header--flush .hd-menu span,
html.main-template-c.main-page .site-header--c.site-header--flush .hd-menu span {
  background: #fff !important;
}

html.main-template-c .site-header--c.site-header--flush.scrolled .hd-menu span,
html.main-template-c .site-header--c.site-header--flush.on .hd-menu span,
html.main-template-c.main-page.header-solid .site-header--c.site-header--flush .hd-menu span,
html.main-template-c.sub-page .site-header--c.site-header--flush .hd-menu span {
  background: #111 !important;
}

html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush .hd-menu span {
  background: #6a605a !important;
}

html.main-template-c .site-header--c.site-header--flush .header_nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

html.main-template-c .site-header--c.site-header--flush .header_nav .depth1 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  margin: 0 auto;
  padding: 0 calc(4rem + 48px) 0 16rem;
  list-style: none;
  box-sizing: border-box;
  pointer-events: auto;
}

html.main-template-c .site-header--c.site-header--flush .header_nav .depth1 > li {
  position: relative;
  height: 100%;
  pointer-events: auto;
  cursor: pointer;
}

html.main-template-c .site-header--c.site-header--flush .header_nav .depth1 > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 1.25rem;
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

html.main-template-c .site-header--c.site-header--flush.scrolled .header_nav .depth1 > li > a,
html.main-template-c .site-header--c.site-header--flush.on .header_nav .depth1 > li > a,
html.main-template-c.main-page.header-solid .site-header--c.site-header--flush .header_nav .depth1 > li > a {
  color: #333;
}

html.main-template-c .site-header--c.site-header--flush .header_nav .depth1 > li > a:hover,
html.main-template-c .site-header--c.site-header--flush.scrolled .header_nav .depth1 > li > a:hover,
html.main-template-c .site-header--c.site-header--flush.on .header_nav .depth1 > li > a:hover {
  color: var(--color-primary);
}

html.main-template-c .site-header--c.site-header--flush .header_nav .depth2 {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  min-width: 100%;
  padding: 1.5rem 0 0;
  margin: 0;
  list-style: none;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 3;
}

html.main-template-c .site-header--c.site-header--flush.on .header_nav .depth2 {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.08s;
}

html.main-template-c .site-header--c.site-header--flush .header_nav .depth2 > li > a {
  display: block;
  padding: 0.55rem 0.75rem;
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease;
}

html.main-template-c .site-header--c.site-header--flush .header_nav .depth2 > li > a:hover {
  color: var(--color-primary);
}

html.main-template-c .site-header--c.site-header--flush .gnb_bg {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 0;
  background: var(--template-page-bg, #fff);
  transition: height 0.4s ease;
  z-index: 1;
  pointer-events: none;
  box-shadow: rgba(149, 157, 165, 0.1) 0 8px 18px;
  overflow: hidden;
}

html.main-template-c .site-header--c.site-header--flush.on .gnb_bg {
  height: 16rem;
}

html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush .header_nav .depth1 > li > a {
  color: #333;
}

html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush .gnb_bg,
html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush.on .gnb_bg,
html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush:hover .gnb_bg {
  display: none;
  height: 0;
}

html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush .header_nav .depth2,
html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush.on .header_nav .depth2,
html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush:hover .header_nav .depth2 {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush.on::after,
html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush:hover::after {
  display: none;
}

@media (max-width: 1280px) {
  html.main-template-c .site-header--c.site-header--flush .header_nav .depth1 > li > a {
    padding: 0 0.85rem;
    font-size: 16px;
  }
  html.main-template-c .site-header--c.site-header--flush.on .gnb_bg {
    height: 13rem;
  }
}

@media (max-width: 1024px) {
  html.main-template-c .site-header--flush,
html.main-template-c.header-solid .site-header--flush,
html.main-template-c.main-page .site-header--flush,
html.main-template-c.sub-page .site-header--flush {
    height: auto;
  }
  html.main-template-c .site-header--flush .header_wrap,
html.main-template-c .site-header--flush #main-nav {
    height: 50px !important;
    padding: 0 1rem !important;
  }
  html.main-template-c .site-header--c.site-header--flush .header_nav,
html.main-template-c .site-header--c.site-header--flush .gnb_bg {
    display: none;
  }
  html.main-template-c .site-header--c.site-header--flush.on::after {
    display: none;
  }
}

@media (max-width: 768px) {
  html.main-template-c .site-header--flush,
html.main-template-c.header-solid .site-header--flush,
html.main-template-c.main-page .site-header--flush,
html.main-template-c.sub-page .site-header--flush {
    height: auto;
    margin: 0;
    border-radius: 0;
  }
  html.main-template-c .site-header--c.site-header--flush .header_logo {
    height: 28px;
  }
  html.main-template-c .site-header--c.site-header--flush #logo-link img {
    max-width: 154px;
    max-height: 28px;
  }
  html.main-template-c .site-header--c.site-header--flush .hamburger {
    width: 40px;
    height: 40px;
  }
  html.main-template-c .site-header--c.site-header--flush .hd-menu {
    width: 22px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  html.main-template-c .site-header--flush,
html.main-template-c.header-solid .site-header--flush,
html.main-template-c.main-page .site-header--flush,
html.main-template-c.sub-page .site-header--flush {
    height: auto;
  }
  html.main-template-c .site-header--c.site-header--flush .header_logo {
    height: 24px;
  }
  html.main-template-c .site-header--c.site-header--flush #logo-link img {
    max-width: 132px;
    max-height: 24px;
  }
}

/**********************************************************
 * B 프리미엄 — 우측 슬라이드 GNB
 ***********************************************************/

@keyframes gnb-item-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 프리미엄(C) 메뉴를 열면 배경이 밝은 색이라, 흰 글자 병원명이 안 보이지 않도록 메뉴 글자색으로 바꿉니다 */
html.main-template-c body.gnb-open .site-header--c .site-header__wordmark {
  color: #040000;
}

/* 진료안내 분류가 많아져 메뉴가 늘어도 로고·햄버거와 겹치지 않게: 메뉴 수에 맞춰 글자·간격을 줄입니다 */
@media (min-width: 1025px) {
  html.main-template-c .site-header--c.site-header--flush .header_nav .depth1 {
    padding-left: 12rem;
  }
  html.main-template-c .site-header--c.site-header--flush .header_nav .depth1 > li {
    min-width: 0;
    flex: 0 1 auto;
  }
  html.main-template-c .site-header--c.site-header--flush .header_nav .depth1:has(> li:nth-child(9)) > li > a {
    padding: 0 clamp(1.1rem, 2.2vw, 2.75rem);
    font-size: clamp(14px, 1vw, 16px);
  }
  html.main-template-c .site-header--c.site-header--flush .header_nav .depth1:has(> li:nth-child(11)) > li > a {
    padding: 0 clamp(0.5rem, 1.1vw, 1.4rem);
    font-size: clamp(13px, 0.9vw, 15px);
    letter-spacing: -0.04em;
  }
  /* 마우스를 올리면 헤더 아래로 모든 분류의 시술이 한꺼번에 펼쳐집니다.
     펼침 목록을 흐름 안에 두어(높이 0) 분류 칸의 너비가 항상 가장 긴 시술 이름에 맞춰지므로, 칸끼리 겹치지 않고 호버 때 위치도 그대로입니다. */
  html.main-template-c .site-header--c.site-header--flush .header_nav .depth1 > li {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  html.main-template-c .site-header--c.site-header--flush .header_nav .depth1 > li > a {
    flex: 0 0 80px;
    height: 80px;
  }
  html.main-template-c .site-header--c.site-header--flush .header_nav .depth2 {
    position: static;
    left: auto;
    transform: none;
    min-width: 0;
    width: auto;
    height: 0;
    overflow: hidden;
    padding: 0;
    visibility: hidden;
    white-space: nowrap;
  }
  html.main-template-c .site-header--c.site-header--flush.on .header_nav .depth2 {
    height: auto;
    overflow: visible;
    padding: 2rem 0 1.5rem;
    visibility: visible;
  }
  html.main-template-c .site-header--c.site-header--flush .header_nav .depth2 > li > a {
    padding: 0.55rem 0.5rem;
    font-size: 15px;
  }
  html.main-template-c .site-header--c.site-header--flush:has(.depth2 > li:nth-child(5)).on .gnb_bg {
    height: 22rem;
  }
  html.main-template-c .site-header--c.site-header--flush:has(.depth2 > li:nth-child(8)).on .gnb_bg {
    height: 31rem;
  }
}

/* 전체 메뉴(햄버거): 분류·시술이 많아도 칸이 좁아지거나 아래로 넘치지 않게 */
@media (min-width: 1025px) {
  :is(html.main-template-b, html.main-template-c) .gnb-inner {
    height: auto;
    min-height: 0;
    padding-bottom: 0;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-inner .flex_row {
    height: auto;
    min-height: 0;
    padding-bottom: 20px;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-inner .flex_row:has(> .gnb-menu-list:nth-child(7)) .gnb-menu-depth-1-1,
:is(html.main-template-b, html.main-template-c) .gnb-inner .flex_row:has(> .gnb-menu-list:nth-child(7)) .gnb-menu-depth-1 {
    padding-left: 20px;
    padding-right: 8px;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-inner .flex_row:has(> .gnb-menu-list:nth-child(7)) .gnb-menu-depth-1-1 {
    margin-bottom: 32px;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-inner .flex_row:has(> .gnb-menu-list:nth-child(7)) .gnb-menu-depth-1 + .gnb-menu-depth-1 {
    margin-top: 14px;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-inner .flex_row:has(> .gnb-menu-list:nth-child(7)) .hd-gnb-title-01,
:is(html.main-template-b, html.main-template-c) .gnb-inner .flex_row:has(> .gnb-menu-list:nth-child(7)) .gnb-menu-depth-inner > a {
    font-size: 16px;
    word-break: keep-all;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-inner .flex_row:has(> .gnb-menu-list:nth-child(11)) .hd-gnb-title-01,
:is(html.main-template-b, html.main-template-c) .gnb-inner .flex_row:has(> .gnb-menu-list:nth-child(11)) .gnb-menu-depth-inner > a {
    font-size: 14px;
  }
}

@media (min-width: 1025px) {
  :is(html.main-template-b, html.main-template-c) .gnb-container--panel {
    height: auto;
    min-height: 0;
    max-height: 100dvh;
    overflow-y: auto;
    transform: translateY(-110%);
  }
  :is(html.main-template-b, html.main-template-c) .gnb-container--panel.open {
    transform: translateY(0);
  }
  :is(html.main-template-b, html.main-template-c) .gnb-container--panel .gnb-wrapper {
    height: auto;
    min-height: 0;
    align-items: flex-start;
  }
}

/* 로고가 글자(p 없이 a 안에 바로)일 때도 흰 배경으로 바뀌면 어두운 색으로: 호버·스크롤·전체 메뉴 열림 */
html.main-template-c .site-header--c.site-header--flush.scrolled #logo-link,
html.main-template-c .site-header--c.site-header--flush.on #logo-link,
html.main-template-c .site-header--c.site-header--flush.scrolled .site-header__wordmark,
html.main-template-c .site-header--c.site-header--flush.on .site-header__wordmark,
html.main-template-c.main-page.header-solid .site-header--c.site-header--flush #logo-link,
html.main-template-c.sub-page .site-header--c.site-header--flush #logo-link,
html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush #logo-link {
  color: #333;
}

/* 공통 header.css 의 "#main-nav.menu-active 로고 = 흰색(!important)" 가 C 의 흰 메뉴 위에서도 로고를 지워서, C 에서는 다시 어둡게 */
html.main-template-c .site-header--c.site-header--flush #main-nav.menu-active #logo-link p,
html.main-template-c .site-header--c.site-header--flush #main-nav.menu-active .site-header__wordmark,
html.main-template-c .site-header--c.site-header--flush.on #logo-link p,
html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush #logo-link p {
  color: #333 !important;
}

/* 분류 메뉴 사이 간격을 넓게 (메뉴가 적을 때 기본값) */
@media (min-width: 1025px) {
  html.main-template-c .site-header--c.site-header--flush .header_nav .depth1:not(:has(> li:nth-child(9))) > li > a {
    padding: 0 clamp(1.75rem, 3vw, 3.5rem);
  }
}

/* 템플릿 B 옆 GNB 메뉴 스크롤바: 둥근 모서리 없이 각지게, 어두운 메뉴 위에서 잘 보이는 흰색 계열 */

/* 템플릿 B 도 햄버거를 누르면 크림색 전체 패널이 열리므로, 메뉴가 열려 있는 동안 로고·햄버거는 어두운 색으로
   (공통 header.css 의 '#main-nav.menu-active 로고 흰색 !important' 보다 세게 #main-nav 까지 적습니다) */
html.main-template-b:has(.gnb-container.open) .site-header--c #main-nav #logo-link p,
html.main-template-b:has(.gnb-container.open) .site-header--c #main-nav .site-header__wordmark {
  color: #333 !important;
}
html.main-template-b:has(.gnb-container.open) .site-header--c #main-nav #logo-link img {
  filter: none !important;
}
html.main-template-b:has(.gnb-container.open) .site-header--c #main-nav .hd-menu span {
  background: #111 !important;
}

/* GNB 전체 메뉴가 내려와 있는 동안에는 헤더의 가로 메뉴는 감추고, 로고와 X 버튼만 보이게 */
html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush .header_nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* ============================================================
   GNB 전체 메뉴 = AR Clinic(arclinic_cafe24/www/css/layout.css) 과 같은 값
   - 패널 502px · 안쪽 500px · 위 여백 64px · 줄 색 #95867e · 배경 #fff (흰색)
   - 제목 줄: 위아래 14px · 왼쪽 50px · 아래 50px, 글자 19px
   - 열려 있는 동안 헤더: 맨 위(top 0) 모서리 없음, 로고 왼쪽 · X 오른쪽 (ht-inner 좌우 32px)
   분류가 7개 이상이면 칸이 좁아 글자를 줄이는 규칙(위쪽)은 그대로 둡니다.
   ============================================================ */
@media (min-width: 1025px) {
  /* 기본 502px, 시술이 많아 열이 길면 그만큼 늘어납니다 (고정 높이라 긴 열이 패널 아래로 넘쳤음). 화면보다 길면 안에서 스크롤 */
  :is(html.main-template-b, html.main-template-c) .gnb-container--panel {
    height: auto;
    min-height: 502px;
    max-height: 100dvh;
    overflow-y: auto;
    transform: translateY(-100%);
  }
  :is(html.main-template-b, html.main-template-c) .gnb-container--panel.open {
    background: var(--template-page-bg, #fff);
    transform: translateY(0);
  }
  :is(html.main-template-b, html.main-template-c) .gnb-container--panel .gnb-wrapper {
    height: auto;
    min-height: 502px;
    align-items: stretch;
    border-bottom: 1px solid #95867e;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-inner {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 500px;
    padding: 64px 0 0;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-inner .flex_row {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding-bottom: 0;
    border-top: 1px solid #95867e;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-menu-list {
    padding-bottom: 40px;
    border-right: 1px solid #95867e;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-menu-list:last-child {
    border-right: 0;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-menu-depth-1-1 {
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #95867e;
    margin-bottom: 50px !important;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-menu-depth-1 + .gnb-menu-depth-1 {
    margin-top: 21px !important;
  }
  :is(html.main-template-b, html.main-template-c) .gnb-menu-depth-inner:hover a.h4,
  :is(html.main-template-b, html.main-template-c) .gnb-menu-depth-inner:hover > a {
    color: #95867e;
  }

  /* 메뉴가 열려 있는 동안 헤더: 맨 위에 붙고 모서리 없이 */
  html.main-template-b:has(.gnb-container.open) .site-header--c,
  html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 60px;
    margin: 0 !important;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
    background: var(--template-page-bg, #fff) !important;
    background-color: var(--template-page-bg, #fff) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html.main-template-b:has(.gnb-container.open) .site-header--c #main-nav,
  html.main-template-c:has(.gnb-container.open) .site-header--c.site-header--flush .header_wrap {
    height: 60px !important;
    padding: 0 32px !important;
    max-width: none;
  }
}

/* 스크롤을 내리면 헤더 아래에 얇은 선 (B 하위 페이지 · C 헤더). B 메인의 떠 있는 둥근 헤더에는 긋지 않습니다 */
html.main-template-b.sub-page.header-scrolled .site-header--c,
html.main-template-c.header-scrolled .site-header--c.site-header--flush {
  box-shadow: inset 0 -1px 0 rgba(17, 17, 17, 0.1);
}

/* B: 서브페이지·전체 메뉴를 열었을 때의 헤더 배경은 B 배경색 */
html.main-template-b.sub-page .site-header--c,
html.main-template-b.sub-page.header-solid .site-header--c,
body.main-template-b.sub-page .site-header--c,
html.main-template-b.main-page:has(.gnb-container.open) .site-header--c {
  background: #fffff9;
}


/* /templates/css/main/banner-a.css */
/* main / banner-a */

/* ============================================
   히어로 — A타입 기본 (왼쪽 하단 카피)
   B타입 오버라이드는 바로 아래 body.main-template-b
   ============================================ */
.main-banner {
    position: relative;
    width: 100%;
}
.main-banner .home-wrap .part-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 30px;
    height: 100dvh;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 0 56px 42px;
}
.main-banner .home-wrap .part-1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--hero-image, url('/homepage/images/main_banner01.png'));
    background-position: center center;
    background-size: cover;
    animation: none;
    transform: none;
    z-index: 0;
}
.main-banner .hero {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.main-banner .home-wrap .part-1 .hero-copy {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 1;
    text-align: left;
    width: 100%;
    max-width: 100%;
    container-type: inline-size;
    container-name: hero-copy;
}
.main-banner .hero-copy {
    position: absolute;
    bottom: 150px;
    left: 250px;
    z-index: 2;
}
.main-banner .hero-sub {
    font-family: 'Marcellus', 'Cormorant', serif;
    font-size: clamp(16px, 2vw, 28px);
    font-weight: 400;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 8px;
}
.main-banner .hero-title {
    /* ?? ???????????? ?????? ???? ??? ??? ????????JS? ?? ?? */
    font-family: 'Marcellus', 'Cormorant', serif;
    font-size: clamp(20px, 5.5cqw, 115px);
    font-weight: 500;
    color: #fff;
    margin-bottom: 0;
    line-height: 1.02;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.main-template-a .main-banner .hero-sub,
.main-template-a .main-banner .hero-title {
    color: #677D7B;
}
.main-banner .hero-desc {
    display: none;
}
@media (max-width: 768px) {
    /* 모바일은 화면 전체 높이 대신 절반 정도로 보여 준다 */
    .main-banner .home-wrap .part-1 {
        height: 50dvh;
        min-height: 360px;
        padding: 0 28px 30px;
    }
    .main-banner .home-wrap .part-1 .hero-copy {
        width: 100%;
        max-width: 100%;
    }
    .main-banner .hero-sub  { font-size: 13px; margin-bottom: 6px; }
    .main-banner .hero-title {
        font-size: clamp(16px, 7cqw, 54px);
        letter-spacing: 0.015em;
        white-space: nowrap;
    }
    .main-banner .hero {
        height: 50dvh;
        min-height: 360px;
    }
}


/* /templates/css/main/banner-b.css */
/* main / banner-b */

/* ----- B타입 히어로 — 타이틀 위, 부타이틀 아래, 중앙 ----- */
.main-template-b .main-banner .home-wrap .part-1 {
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}

.main-template-b .main-banner .home-wrap .part-1 .hero-copy {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    text-align: center !important;
}

.main-template-b .main-banner .hero-title {
    order: 1;
    width: auto;
    margin: 0 0 10px;
    font-family: 'Marcellus', 'Cormorant', serif;
    font-size: clamp(42px, 4vw, 64px) !important;
    font-style: normal;
    font-weight: 300;
    line-height: 1.08;
    overflow: visible;
}

.main-template-b .main-banner .hero-sub {
    order: 2;
    margin: 0;
    font-family: 'Marcellus', 'Cormorant', serif;
    font-size: clamp(26px, 2.3vw, 36px);
    font-weight: 300;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .main-template-b .main-banner .home-wrap .part-1,
    body.main-template-b .main-banner .home-wrap .part-1 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 50dvh;
        min-height: 360px;
        padding: 0 20px 28px;
    }

    .main-template-b .main-banner .home-wrap .part-1 .hero-copy {
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        text-align: center !important;
    }

    .main-template-b .main-banner .hero-title {
        font-size: clamp(28px, 8vw, 36px) !important;
        white-space: normal;
        width: 100%;
        text-align: center;
    }

    .main-template-b .main-banner .hero-sub {
        font-size: 16px;
        width: 100%;
        text-align: center;
    }
}


/* /templates/css/main/director-c.css */
/* 시그니처(C) 원장 소개 */

.main_director_c {
  padding: 110px 0;
  background: #faf9f5;
}

.main_director_c__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 72px;
  width: min(1400px, calc(100% - 80px));
  margin: 0 auto;
}

.main_director_c__text {
  min-width: 0;
}

.main_director_c__media {
  min-width: 0;
}

/* 원본 사진이 세로로 길면 섹션이 통째로 늘어나 미리보기에 글이 안 보입니다 */
.main_director_c__media img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.main_director_c__kicker {
  margin: 0;
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: var(--fs-body, 18px);
  font-weight: 400;
  letter-spacing: normal;
  line-height: var(--lh-body, 1.6);
  color: #333;
}

.main_director_c__title {
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: var(--fs-title, 32px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #596A5A;
  word-break: keep-all;
}

.main_director_c__body {
  margin: 32px 0 0;
  max-width: 34em;
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: var(--fs-body, 18px);
  font-weight: 400;
  letter-spacing: normal;
  line-height: var(--lh-body, 1.6);
  color: #333;
  word-break: keep-all;
}

.main_director_c__person {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 16px;
  margin: 40px 0 0;
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  white-space: nowrap;
}

.main_director_c__role,
.main_director_c__name {
  flex-shrink: 0;
  white-space: nowrap;
  word-break: keep-all;
}

.main_director_c__role {
  font-size: var(--fs-body, 18px);
  font-weight: 400;
  color: #333;
  letter-spacing: 0.7em;
  margin-right: -0.7em;
}

.main_director_c__name {
  font-size: var(--fs-name, 22px);
  font-weight: 700;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  color: #333;
}

.main_director_c__list {
  margin: 45px 0 0;
  padding: 0;
  list-style: none;
}

.main_director_c__list li {
  position: relative;
  padding-left: 16px;
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: var(--fs-body, 18px);
  font-weight: 400;
  letter-spacing: normal;
  line-height: var(--lh-body, 1.6);
  color: #333;
}

.main_director_c__list li::before {
  content: '-';
  position: absolute;
  left: 0;
}

@media (max-width: 1024px) {
  .main_director_c {
    padding: 80px 0;
  }

  .main_director_c__inner {
    gap: 40px;
    width: min(1400px, calc(100% - 48px));
  }
}

@media (max-width: 767px) {
  .main_director_c {
    padding: 64px 0;
  }

  .main_director_c__inner {
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
    gap: 32px;
  }

  .main_director_c__person {
    gap: 12px;
  }

  .main_director_c__media img {
    height: auto;
    max-height: 480px;
    aspect-ratio: 4 / 5;
  }
}

html.main-template-b .main_director_c,
body.main-template-b .main_director_c {
  background: none;
}

html.main-template-b .main_director_c__kicker,
body.main-template-b .main_director_c__kicker {
  color: #a33a10;
}

html.main-template-b .main_director_c__title,
body.main-template-b .main_director_c__title {
  color: #333;
}


/* /templates/css/main/stats-c.css */
.main_stats_c {
  padding: 96px 0 88px;
  background: #faf9f5;
  color: #333;
}

.main_stats_c__inner {
  width: min(1400px, calc(100% - 80px));
  margin: 0 auto;
}

.main_stats_c__head {
  margin: 0 0 56px;
  text-align: center;
}

.main_stats_c__kicker {
  margin: 0 0 12px;
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: var(--fs-body, 18px);
  font-weight: 400;
  letter-spacing: normal;
  line-height: var(--lh-body, 1.6);
  text-transform: uppercase;
  color: #333;
}

.main_stats_c__title {
  margin: 0;
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: var(--fs-title, 32px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #333;
}

.main_stats_c__chart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 20px;
  border-left: 3px solid #3d342f;
}

.main_stats_c__row {
  position: relative;
  width: var(--bar-w, 100%);
  max-width: 100%;
  min-width: min(100%, 18rem);
  overflow: hidden;
}

.main_stats_c__fill {
  position: absolute;
  inset: 0;
  background: #132C16B2;
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.main_stats_c.is-inview .main_stats_c__fill {
  transform: scaleX(1);
}

.main_stats_c__row:nth-child(2) .main_stats_c__fill {
  transition-delay: 0.12s;
}

.main_stats_c__row:nth-child(3) .main_stats_c__fill {
  transition-delay: 0.24s;
}

.main_stats_c__copy {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 32px;
  box-sizing: border-box;
}

.main_stats_c__label,
.main_stats_c__value {
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  color: #fff;
  white-space: nowrap;
}

.main_stats_c__label {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.main_stats_c__value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.main_stats_c.is-counted .main_stats_c__value {
  opacity: 1;
}

.main_stats_c__desc {
  margin: 45px auto 0;
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: var(--fs-body, 18px);
  font-weight: 400;
  line-height: var(--lh-body, 1.6);
  color: #333;
  word-break: keep-all;
}

.main_stats_c__desc p {
  margin: 0;
}

.main_stats_c__desc p + p {
  margin-top: 0.4em;
}

.main_stats_c .count-number {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .main_stats_c__fill {
    transform: none;
    transition: none;
  }

  .main_stats_c__value {
    opacity: 1;
  }
}

@media (max-width: 1024px) {
  .main_stats_c__inner {
    width: min(1400px, calc(100% - 48px));
  }
}

@media (max-width: 767px) {
  .main_stats_c {
    padding: 72px 0 64px;
  }

  .main_stats_c__inner {
    width: calc(100% - 32px);
  }

  .main_stats_c__head {
    margin-bottom: 32px;
  }

  .main_stats_c__chart {
    padding-left: 14px;
  }

  .main_stats_c__copy {
    min-height: 52px;
    padding: 14px 18px;
  }

  .main_stats_c__label {
    font-size: 16px;
  }

  .main_stats_c__value {
    font-size: 24px;
  }

  .main_stats_c__desc {
    margin-top: 28px;
  }
}

html.main-template-b .main_stats_c,
body.main-template-b .main_stats_c {
  background: none;
}

/* B 는 stats-c 마크업에 '+' 를 숫자 밖(statsPlusOutside)에 따로 둡니다 — stats-b 의 .main_stats_b 규칙은 B 가 불러오지 않아 여기에 둡니다 */
html.main-template-b .main_stats_c__value,
body.main-template-b .main_stats_c__value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html.main-template-b .main_stats_c .about-statistics-section__plus,
body.main-template-b .main_stats_c .about-statistics-section__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: inherit;
  color: inherit;
  flex-shrink: 0;
}

html.main-template-b .main_stats_c__value .count-number,
body.main-template-b .main_stats_c__value .count-number {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

html.main-template-b .main_stats_c__kicker,
body.main-template-b .main_stats_c__kicker {
  color: #a33a10;
}

html.main-template-b .main_stats_c__fill,
body.main-template-b .main_stats_c__fill {
  background: #a33a10;
}

/* B 는 막대 왼쪽 세로선 없이 보여 줍니다 */
html.main-template-b .main_stats_c__chart,
body.main-template-b .main_stats_c__chart {
  padding-left: 0;
  border-left: none;
}


/* /templates/css/main/about-b.css */
/* main / about-b */

/* ============================================
   ABOUT — B타입 (main_about_b) 텍스트 좌 + 이미지 우
   ============================================ */
.main_about_b {
  position: relative;
  width: 100%;
  padding: 0;
  background: var(--template-page-bg, #fff);
  border-top: 1px solid rgba(163, 58, 16, 0.2);
  border-bottom: 1px solid rgba(163, 58, 16, 0.2);
  overflow: visible;
}

.main_about_b__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  margin: 0 auto;
  overflow: visible;
}

.main_about_b__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 48px;
  border-right: 1px solid rgba(163, 58, 16, 0.2);
  box-sizing: border-box;
}

.main_about_b__title {
  margin: 0;
  font-family: 'Marcellus', 'Cormorant', serif;
  font-size: 2.313rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.4;
  color: #a33a10;
  text-transform: uppercase;
}

.main_about_b__body {
  margin-top: 2.5rem;
  max-width: 22em;
}

.main_about_b__body p {
  margin: 0;
  font-size: var(--fs-body, 18px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  color: #333;
  word-break: keep-all;
}

.main_about_b__body p + p {
  margin-top: 1.6em;
}

.main_about_b__more {
  display: inline-block;
  margin-top: 2.5rem;
  position: relative;
  padding: 0 1.8em;
  font-family: 'Monik', 'Pretendard', serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: #a33a10;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.main_about_b__more:hover {
  opacity: 0.65;
}

.main_about_b__more::before,
.main_about_b__more::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1em;
  background: currentColor;
}

.main_about_b__more::before {
  left: 0;
}

.main_about_b__more::after {
  right: 0;
}

.main_about_b__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 72px 96px 56px;
  box-sizing: border-box;
  overflow: visible;
}

.main_about_b__media-frame {
  position: relative;
  overflow: visible;
  /* 사진 칸은 항상 587×556 비율 (넓은 화면에서는 587px 까지만 커짐) */
  width: 100%;
  max-width: 587px;
}

.main_about_b__media-offset {
  position: absolute;
  z-index: 0;
  right: -48px;
  bottom: -48px;
  width: 90%;
  height: 86%;
  background: #a33a10;
}

.main_about_b__media-link {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #f3f3f3;
}

.main_about_b__media-link img {
  display: block;
  width: 100%;
  height: auto;
  /* 섹션 높이가 길어져도 사진은 이 비율 그대로, 넘치는 부분만 잘라냅니다 (위쪽 기준이라 얼굴은 늘 보임) */
  aspect-ratio: 587 / 556;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 1024px) {
  .main_about_b__inner {
    min-height: 0;
  }

  .main_about_b__title {
    font-size: 1.75rem;
  }

  .main_about_b__text {
    padding: 48px 28px;
  }

  .main_about_b__media {
    padding: 40px 28px 56px;
  }

  .main_about_b__media-offset {
    right: -16px;
    bottom: -16px;
  }
}

/* 태블릿: 공통 콘텐츠 폭·좌우 여백 */
@media (min-width: 769px) and (max-width: 1024px) {
  .main_program .inner,
  .main_program .tits,
  .main_why_b .tits,
  .main_why_b .panel-wrap,
  .main_insights_b__head,
  .main_map .inner,
  .main_stats_b .about-statistics-section__inner {
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  .main_program .inner,
  .main-template-b .main_program .tits {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .main_why_b .panel-wrap,
  .main_insights_b__head {
    max-width: 100%;
  }

  .main_blog_b {
    padding: 72px 0 80px;
  }

  .main_stats_b {
    padding: 64px 0 80px;
  }

  .main_why_b {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .main_about_b__inner {
    grid-template-columns: 1fr;
  }

  .main_about_b__text {
    border-right: none;
    border-bottom: 1px solid rgba(163, 58, 16, 0.2);
    padding: 56px 24px 48px;
  }

  .main_about_b__title {
    font-size: var(--fs-title, 32px);
  }

  .main_about_b__body {
    margin-top: 2.5rem;
  }

  .main_about_b__more {
    margin-top: 2rem;
    font-size: var(--fs-body, 18px);
  }

  .main_about_b__media {
    padding: 40px 28px 56px;
  }

  .main_about_b__media-offset {
    right: -20px;
    bottom: -20px;
  }
}


/* /templates/css/main/program-b.css */
/* main / program-b — 프리미엄 케어 */

.main_care_b {
  position: relative;
  height: 320vh;
  background: var(--template-page-bg, #fff);
}

.main_care_b__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--template-page-bg, #fff);
}

.main_care_b__intro,
.main_care_b__photos {
  position: absolute;
  inset: 0;
}

.main_care_b__intro {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--template-page-bg, #fff);
}

.main_care_b__slogan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  padding: 80px 40px;
  box-sizing: border-box;
  text-align: center;
}

.main_care_b__ko,
.main_care_b__en {
  margin: 0;
}

.main_care_b__line {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
}

.main_care_b__base,
.main_care_b__copy {
  display: block;
}

.main_care_b__copy {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
}

.main_care_b__ko .main_care_b__line {
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.02em;
  word-break: keep-all;
  color: #555;
  overflow: visible;
}

.main_care_b__en {
  margin-top: 8px;
}

.main_care_b__en .main_care_b__line {
  font-family: 'Marcellus', 'Cormorant', serif;
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.main_care_b__en .main_care_b__base {
  color: color-mix(in srgb, var(--color-primary, #5c2a32) 18%, #fff);
}

.main_care_b__en .main_care_b__copy {
  color: #a33a10;
}

.main_care_b__photos {
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #111;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}

.main_care_b__panel {
  position: relative;
  margin: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #d8d0c8;
  container-type: inline-size;
}

.main_care_b__panel img,
.main_care_b__empty {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.main_care_b__empty {
  background: linear-gradient(180deg, #ece6de, #d4c8bc);
}

.main_care_b__caption {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 28px;
  color: #fff;
  text-align: center;
  background: rgba(20, 12, 12, 0.38);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.main_care_b__panel:hover .main_care_b__caption,
.main_care_b__panel:focus-within .main_care_b__caption {
  opacity: 1;
}

.main_care_b__caption strong,
.main_care_b__caption em {
  margin: 0;
  color: #fff;
  font-style: normal;
  word-break: keep-all;
}

.main_care_b__caption strong {
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: min(26px, calc((100cqi - 56px) / 17));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.main_care_b__caption em {
  font-family: Pretendard, 'Noto Sans KR', sans-serif;
  font-size: var(--fs-body, 18px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.02em;
  max-width: 18em;
}

@media (max-width: 1024px) {
  .main_care_b {
    height: 280vh;
  }

  .main_care_b__slogan {
    padding: 64px 24px;
    gap: 20px;
  }

  .main_care_b__en .main_care_b__line {
    font-size: clamp(26px, 6vw, 40px);
  }
}

@media (max-width: 768px) {
  .main_care_b {
    height: 180vh;
  }

  .main_care_b__stage {
    height: 100dvh;
  }

  .main_care_b__intro {
    box-sizing: border-box;
    padding-top: 56px;
  }

  .main_care_b__slogan {
    padding: 0 20px;
    gap: 16px;
  }

  .main_care_b__photos {
    inset: 0;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }

  .main_care_b__ko .main_care_b__line {
    font-size: var(--fs-body, 18px);
  }

  .main_care_b__panel {
    height: auto;
    min-height: 0;
  }

  .main_care_b__caption {
    padding: 12px 20px;
    gap: 8px;
  }

  .main_care_b__caption em {
    max-width: 22em;
    line-height: 1.45;
  }
}


/* /templates/css/main/why-b.css */
/* main / why-b */

/* ============================================
   WHY CLINIC — 공통 (.main_why_b)
   A타입 아코디언은 아래 .main_why_a
   ============================================ */
.main_why_b {
  background: none;
  padding: 128px 0 80px;
  overflow: hidden;
}

/* CLINIC PROGRAM(.main_program)? ?? ??? ? ??(tit-02) ?, ??(tit-01) ?? */
.main_why_b .tits {
  text-align: center;
  padding: 0 1.25rem;
}

.main_why_b .tit-02 {
  color: #a33a10;
  font-size: 35px;
  font-family: 'Marcellus', 'Cormorant', serif;
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.08em;
}

.main_why_b .tit-01 {
  font-size: var(--fs-body, 18px);
  font-family: 'Pretendard', sans-serif;
  margin: 1.6rem 0 0;
  line-height: 1.5;
}

.main_why_b .inner {
  width: 100%;
}

.main_why_b .panel-wrap {
  max-width: 1670px;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 4rem auto 0;
  position: relative;
  box-sizing: border-box;
}

.main_why_b .panel {
  overflow: hidden;
  transition: 0.3s;
  padding: 2rem 0 2rem 1.5rem;
  border-top: 1px solid rgba(59, 59, 59, 0.5);
  position: relative;
}

.main_why_b .panel:last-of-type {
  border-bottom: 1px solid rgba(59, 59, 59, 0.5);
}

.main_why_b .panel.open {
  background-color: rgba(0, 0, 0, 0.04);
}

.main_why_b .panel-header {
  cursor: pointer;
  position: relative;
  z-index: 1;
  padding-right: 32%;
  box-sizing: border-box;
}

.main_why_b .panel-title {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}

.main_why_b .panel-title .num {
  width: 8%;
  min-width: 2.5rem;
  flex-shrink: 0;
  font-family: 'Marcellus', 'Cormorant', serif;
  font-size: 1.563rem;
  color: #000;
  margin: 0;
}

.main_why_b .panel-title .tit {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 4rem);
  color: #786454;
  font-size: 1.188rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}

.main_why_b .panel-title .tit .why-label {
  display: block;
  margin: 0 0 14px;
  font-family: 'Pretendard', sans-serif;
  font-size: var(--fs-body, 18px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  line-height: 1.4;
}

.main_why_b .panel-title .tit > span:not(.why-label) {
  font-family: 'Marcellus', 'Cormorant', serif;
  font-size: 2rem;
  color: #000;
  display: block;
  font-weight: 400;
  line-height: 1.25;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.main_why_b .panel-title .icon-panel {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  margin-left: auto;
  margin-right: 0;
  margin-top: 0.65rem;
  flex-shrink: 0;
}

.main_why_b .panel-title .icon-panel::before,
.main_why_b .panel-title .icon-panel::after {
  content: '';
  position: absolute;
  background-color: #000;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.main_why_b .panel-title .icon-panel::before {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  margin-left: -1px;
}

.main_why_b .panel-title .icon-panel::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
}

.main_why_b .panel-title .icon-panel.open::before {
  transform: rotate(-45deg);
  opacity: 0;
}

.main_why_b .txtbox {
  padding-left: 6%;
  padding-right: 34%;
  padding-top: 4rem;
  padding-bottom: 2rem;
  font-size: var(--fs-body, 18px);
  line-height: 1.5;
  box-sizing: border-box;
}

.main_why_b .txtbox .txt01 {
  margin: 0;
}

.main_why_b .fimg {
  position: absolute;
  top: 2rem;
  right: 1px;
  overflow: hidden;
  width: 28%;
  max-width: 420px;
  z-index: 0;
  pointer-events: none;
}

.main_why_b .panel .fimg img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: 0.4s;
}

.main_why_b .panel:hover .fimg img {
  transform: scale(1.1);
}

@media (max-width: 1810px) {
  .main_why_b .txtbox {
    padding-left: 5%;
    padding-right: 36%;
    width: 100%;
  }
  .main_why_b .fimg {
    width: 33%;
  }
  .main_why_b .panel-header {
    padding-right: 36%;
  }
}

@media (max-width: 960px) {
  .main_why_b .txtbox {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .main_why_b .fimg {
    width: 25%;
  }
  .main_why_b .panel-header {
    padding-right: 28%;
    box-sizing: border-box;
  }
  .main_why_b .panel-title .num {
    font-size: 1.4rem;
    margin-top: 4px;
  }
  .main_why_b .panel-title .tit {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .main_why_b .panel-title .tit .why-label {
    margin-bottom: 10px;
  }
  .main_why_b .panel-title .tit > span:not(.why-label),
  .main_why_b .panel-title .tit span:not(.why-label) {
    font-size: 1.45rem;
    line-height: 1.3;
    max-width: 100%;
  }
  .main_why_b .panel-wrap .panel {
    position: relative;
  }
  .main_why_b .panel-wrap .panel .icon-panel {
    position: absolute;
    top: 5px;
    right: 0;
    margin: 0;
  }
  .main_why_b .panel-wrap .panel .panel-title {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .main_why_b {
    padding: 64px 0 80px;
  }
  .main_why_b .tits {
    padding: 0 1.25rem;
  }
  .main_why_b .tit-02 {
    font-size: var(--fs-title, 32px);
    letter-spacing: 0.06em;
  }
  .main_why_b .tit-01 {
    margin-top: 1rem;
  }

  .main_why_b .tit-01 br {
    display: none;
  }
  .main_why_b .panel {
    padding: 1rem 0 1rem 0.6rem;
  }
  .main_why_b .panel-header {
    padding-right: 34%;
  }
  .main_why_b .panel-wrap .panel .panel-title {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
  }
  .main_why_b .panel-title .num {
    width: 100%;
    font-size: 1.1rem;
  }
  .main_why_b .panel-title .tit {
    margin-top: 5px;
    width: 100%;
    max-width: 100%;
  }
  .main_why_b .panel-title .tit .why-label {
    margin-bottom: 10px;
  }
  .main_why_b .panel-title .tit > span:not(.why-label),
  .main_why_b .panel-title .tit span:not(.why-label) {
    margin-bottom: 0;
    font-size: 1.2rem;
    line-height: 1.35;
    max-width: 100%;
  }
  .main_why_b .txtbox {
    padding-left: 1%;
    padding-top: 3rem;
    padding-bottom: 0;
    width: 100%;
  }
  .main_why_b .fimg {
    width: 29%;
  }
}

@media (max-width: 480px) {
  .main_why_b .panel-header {
    padding-right: 40%;
  }
  .main_why_b .fimg {
    width: 37%;
    top: 38px;
  }
  .main_why_b .panel-wrap .panel .icon-panel {
    right: 10rem;
    top: 8px;
  }
  .main_why_b .panel-title .tit > span:not(.why-label),
  .main_why_b .panel-title .tit span:not(.why-label) {
    font-size: 1.1rem;
    line-height: 1.35;
  }
}


/* /templates/css/main/blog-b.css */
/* main / blog-b — 프리미엄 OUR INSIGHTS */

.main_blog_b {
  --insights-gap: 18px;
  /* 가운데 3장 + 양옆 앞뒤 카드 30%씩 (3 + 0.3 × 2 = 3.6장, 사이 간격 4개) */
  --insights-frame: 100vw;
  --insights-frame: 100cqi;
  --insights-card-w: calc((var(--insights-frame) - var(--insights-gap) * 4) / 3.6);
  container-type: inline-size;
  position: relative;
  width: 100%;
  padding: 88px 0 96px;
  background: var(--template-page-bg, #fff);
  overflow: hidden;
}

.main_insights_b__inner {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main_insights_b__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  margin: 0 auto 40px;
  max-width: 1670px;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}

.main_insights_b__titles {
  min-width: 0;
  flex: 1 1 auto;
}

.main_insights_b__title {
  margin: 0;
  font-family: 'Marcellus', 'Cormorant', serif;
  font-size: var(--fs-title, 32px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--color-primary, #5c2a32);
  text-transform: uppercase;
}

.main_insights_b__desc {
  margin: 10px 0 0;
  font-family: 'Pretendard', sans-serif;
  font-size: var(--fs-body, 18px);
  font-weight: 400;
  line-height: 1.5;
  word-break: keep-all;
}

.main_insights_b__desc p,
.main_insights_b__desc div,
.main_insights_b__desc span {
  margin: 0;
  font: inherit;
  color: inherit;
}

.main_insights_b__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 28px;
  flex: 0 1 auto;
  max-width: 56%;
}

.main_insights_b__tab {
  appearance: none;
  margin: 0;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: 'Pretendard', sans-serif;
  font-size: var(--fs-body, 18px);
  font-weight: 400;
  line-height: 1.2;
  color: #b0b0b0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.main_insights_b__tab.is-active {
  font-weight: 700;
  color: var(--color-primary, #5c2a32);
  border-bottom-color: var(--color-primary, #5c2a32);
}

.main_insights_b__tab--more {
  font-weight: 400;
}

.main_insights_b__swiper {
  width: 100%;
  overflow: hidden;
  padding: 0;
}

.main_insights_b__swiper.swiper-initialized {
  overflow: hidden;
}

.main_insights_b__swiper > .swiper-wrapper {
  display: flex;
}

.main_insights_b__swiper > .swiper-wrapper > .swiper-slide.main_insights_b__slide {
  flex: 0 0 var(--insights-card-w) !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  width: var(--insights-card-w) !important;
  max-width: var(--insights-card-w) !important;
  min-width: 0;
  height: auto !important;
  box-sizing: border-box;
}

.main_insights_b__swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide.main_insights_b__slide {
  margin-right: var(--insights-gap);
}

.main_insights_b__swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide.main_insights_b__slide:last-child {
  margin-right: 0;
}

@media (min-width: 769px) {
  .main_insights_b__inner {
    overflow: hidden;
  }

  .main_insights_b__swiper.is-fill {
    max-width: 1670px;
    width: 100%;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }

  .main_insights_b__swiper.is-fill > .swiper-wrapper {
    justify-content: flex-start;
    width: 100% !important;
    transform: none !important;
  }
}

.main_insights_b__card {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  text-decoration: none;
  color: inherit;
  background: #f3f3f3;
}

.main_insights_b__img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f3f3f3;
}

.main_insights_b__swiper > .swiper-wrapper > .swiper-slide .main_insights_b__img img,
.main_insights_b__img img,
.main_insights_b__img-empty {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease;
}

.main_insights_b__img-empty {
  background: linear-gradient(135deg, #ececec, #f7f7f7);
}

.main_insights_b__hover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 20px;
  background: rgba(20, 12, 12, 0.38);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.main_insights_b__card:hover .main_insights_b__hover,
.main_insights_b__card:focus-visible .main_insights_b__hover {
  opacity: 1;
}

.main_insights_b__card:hover img,
.main_insights_b__card:focus-visible img {
  transform: scale(1.04);
}

.main_insights_b__hover strong,
.main_insights_b__hover em {
  margin: 0;
  color: #fff;
  text-align: center;
  font-style: normal;
  word-break: keep-all;
}

.main_insights_b__hover strong {
  font-family: 'Pretendard', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.main_insights_b__hover em {
  font-family: 'Pretendard', sans-serif;
  font-size: var(--fs-body, 18px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;
  max-width: 16em;
}

@media (max-width: 1279px) {
  .main_blog_b {
    --insights-gap: 14px;
  }

  .main_insights_b__swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide.main_insights_b__slide {
    margin-right: 14px;
  }
}

@media (max-width: 768px) {
  .main_blog_b {
    --insights-card-w: 82%;
    --insights-gap: 12px;
    padding: 56px 0 64px;
  }

  .main_insights_b__inner {
    overflow: hidden;
  }

  .main_insights_b__swiper,
  .main_insights_b__swiper.swiper-initialized {
    overflow: hidden;
  }

  .main_insights_b__swiper > .swiper-wrapper > .swiper-slide.main_insights_b__slide {
    flex: 0 0 var(--insights-card-w) !important;
    width: var(--insights-card-w) !important;
    max-width: var(--insights-card-w) !important;
  }

  .main_insights_b__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    padding: 0 16px;
  }

  .main_insights_b__tabs {
    max-width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .main_insights_b__tabs::-webkit-scrollbar {
    display: none;
  }

  .main_insights_b__swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide.main_insights_b__slide {
    margin-right: 12px;
  }

  .main_insights_b__hover strong {
    font-size: 16px;
  }
}