@charset "UTF-8";

/* ==========================================================================
   디자인 토큰
   ========================================================================== */
:root {--color-primary: #006573; --color-primary-dark: #0b2a25; --color-accent: #3f9c88; --color-accent-light: #eaf6f2; --color-text: #3c3c3c; --color-muted: #767676; --color-muted-sub: #777777; --color-muted-lighter: #a1a1a1; --color-bg: #ffffff; --color-bg-soft: #f7f7f5; --color-border: #e6e6e1; --container: 1500px; --radius: 8px; --header-h: 80px; --black: #000000; --white: #ffffff;}

/* ==========================================================================
   포커스 스타일 (reset.css에서 제거한 outline을 접근 가능한 형태로 복원)
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {outline: 2px solid var(--color-accent); outline-offset: 2px;}

.text-primary {color: var(--color-primary) !important;}
.text-black {color: var(--black) !important;}
.text-white {color: var(--white) !important;}
.text-highlight {display: inline;background-image: linear-gradient(to top, rgb(197 219 219 / 44%), rgb(197 219 219 / 44%));background-repeat: no-repeat;background-size: 95% 30%;background-position: left 1rem bottom 0.5rem; letter-spacing: -0.05rem;}
.text-muted-sub{color: var(--color-muted-sub) !important;}

.text-center { text-align: center !important;; }
.text-right  { text-align: right !important;; }
.text-left  { text-align: left !important; }

/* 텍스트 굵기 (Font Weight) */
.fw-100 {font-weight: 100 !important;}
.fw-300 {font-weight: 300 !important;}
.fw-400 {font-weight: 400 !important;}
.fw-500 {font-weight: 500 !important;}
.fw-600 {font-weight: 600 !important;}
.fw-700 {font-weight: 700 !important;}
.fw-800 {font-weight: 800 !important;}
.fw-900 {font-weight: 900 !important;}
/* ==========================================================================
   레이아웃 컨테이너
   ========================================================================== */
main{background: #fff;}
.container {width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 4rem;}
/* 기본 컨테이너보다 좁은 섹션용 (container container--sm) */
.container--sm {max-width: 126rem;}

/* ==========================================================================
   헤더
   ========================================================================== */
header#top {position: sticky; top: 0; z-index: 100; background: var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);}
.header-top {width: 100%; margin: 0 auto; height: var(--header-h); padding: 0 4rem; display: flex; align-items: center; justify-content: space-between; gap: 3rem;}
.header-top h1 {height: 3.5rem;flex-shrink: 0;}
.header-top h1 img {height: 3.5rem; width: auto;}
.header-top .main-nav {flex: 1; max-width: 111.5rem;}
.header-top .main-nav ul {display: flex; justify-content: space-between;}
.header-top .main-nav a {font-size: 1.7rem; font-weight: 500; padding: 0.8rem 0; color: var(--color-text);}
.header-top .main-nav a:focus-visible {color: var(--color-primary);}
.main-nav__item {display: flex; align-items: center;}
@media (min-width: 1025px) {
  .main-nav__item:hover .main-nav__link {color: var(--color-primary); font-weight: 700;}
}
.main-nav__item:focus-within .main-nav__link,
.main-nav__item.is-open .main-nav__link {color: var(--color-primary); font-weight: 700;}
.nav-submenu {position: absolute; top: 100%; left: 50%; width: min(83.6rem, calc(100vw - 4rem)); padding-top: 0.8rem; opacity: 0; visibility: hidden; transform: translate(-50%, -0.8rem); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 60;}
.main-nav__item:focus-within .nav-submenu,
.main-nav__item.is-open .nav-submenu {opacity: 1; visibility: visible; transform: translate(-50%, 0);}
.nav-submenu__inner {width: 100%; display: flex; gap: 5.6rem; padding: 4rem; background: var(--white); border-radius: 1.5rem; box-shadow: 0 0 40px rgba(0, 0, 0, 0.17); margin: 0 auto;}
.nav-submenu__col--links {flex: none; width: 20rem;}
.nav-submenu__col--media {flex: 1; min-width: 0; display: flex; gap: 1.6rem;}
.nav-submenu__media-item {flex: 1; min-width: 0;}
.nav-submenu__title {font-size: 2.4rem; font-weight: 500; color: var(--color-text); margin-bottom: 1.5rem;}
.nav-submenu__list {display: flex; flex-direction: column; gap: 0.5rem;}
.nav-submenu__list a {font-size: 1.6rem; color: #4e4e4e;}
.nav-submenu__list a:hover,
.nav-submenu__list a:focus-visible,
.nav-submenu__list a.is-active {color: var(--color-primary);}
.nav-submenu__label {font-size: 1.6rem; font-weight: 500; color: var(--color-text); margin-bottom: 0.5rem;}
.nav-submenu__media {display: block;}
.nav-submenu__thumb {position: relative; display: flex; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-soft);}
.nav-submenu__thumb img {width: 100%; height: 100%; object-fit: cover;}
.nav-submenu__thumb .play-btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.nav-submenu__caption {display: block; margin-top: 1.2rem; font-size: 1.4rem; line-height: 1.2; color: var(--color-text);}

.header-top .user-nav > ul {display: flex; align-items: center; gap: 3rem;}

/* 언어 전환: 지구본 아이콘 버튼(.user-nav__icon-btn 재사용) → 국기+국가코드 드롭다운 */
.lang-switch {position: relative;}
.lang-switch__list {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1.8rem; width: max-content; min-width: 6.7rem; flex-direction: column; gap: 0.8rem; background: rgba(0,0,0,.45); border-radius: 0.7rem; padding: 0.9rem 0.8rem; box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.15); z-index: 10;}
/* hidden 속성이 이기도록 :not([hidden])에만 display 지정 */
.lang-switch__list:not([hidden]) {display: flex;}
.lang-switch__link {display: flex; align-items: center; gap: 0.8rem; border-radius: 0.8rem; font-size: 1.2rem; font-weight: 500; color: var(--white); white-space: nowrap;}
.lang-switch__flag {aspect-ratio: 1 / 1; width: 2.8rem; border-radius: 50%; object-fit: contain; flex: none;}
/* 선택된 언어는 목록에서 숨김 (모바일) */
.lang-switch__item[aria-selected="true"] {display: none;}

/* 검색 / 마이페이지 / 전체메뉴 아이콘 버튼 */
.user-nav__item {display: flex; align-items: center; height: 2.4rem; }
.user-nav__icon-btn {display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; vertical-align: unset;}
.user-nav__icon {width: 100%; height: 100%; object-fit: contain;}
.menu-toggle__icon {position: relative; display: inline-block; width: 2.4rem; height: 2rem;}
.menu-toggle__bar {position: absolute; left: 0; width: 100%; height: 0.2rem; background: var(--color-text); border-radius: 0.1rem; transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;}
.menu-toggle__bar:nth-child(1) {top: 0;}
.menu-toggle__bar:nth-child(2) {top: 50%; transform: translateY(-50%);}
.menu-toggle__bar:nth-child(3) {top: 100%; transform: translateY(-100%);}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {opacity: 0;}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {top: 50%; transform: translateY(-50%) rotate(-45deg);}
.menu-toggle {display: none;}

/* 우측 고정 퀵메뉴 */
aside {position: fixed; right: 2.2rem; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 1.5rem;}
.quick-menu__panel {width: 8rem; background: linear-gradient(180deg, #62cbd0 0%, #005a70 100%); border-radius: var(--radius); box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.08); overflow: hidden;}
aside ul {display: flex; flex-direction: column; gap: 0.4rem; padding: 2.2rem 0.5rem;}
aside ul li {width: 100%;}
.quick-menu__toggle {display: none;}
aside a {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; text-align: center; font-size: 1.4rem; font-weight: 500; border-radius: 0.6rem; color: var(--white); padding: 1rem 0;}
.quick-menu__icon {display: flex; align-items: center; justify-content: center;}
.quick-menu__icon--calendar {width: 2.8rem; height: 2.8rem;}
.quick-menu__icon--location {width: 2.6rem; height: 3rem;}
.quick-menu__icon--youtube {width: 3rem; height: 2.4rem;}
.quick-menu__icon--phone {width: 2.5rem; height: 2.5rem;}
.quick-menu__icon--kakao {width: 3.6rem; height: 3.3rem;}
.quick-menu__icon--chat {width: 2.8rem; height: 2.8rem;}
.quick-menu__icon img {width: 100%; height: 100%;}
aside li a:hover,
aside li a:focus-visible {background: rgba(255, 255, 255, 0.15);}
aside > a {width: 5.2rem; height: 5.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-text);}
.quick-menu__icon--top .icon-arrow {width: 1.2rem; height: 0.7rem; background-color: #fff; -webkit-mask: url('../images/common/arrow_top_rounded.svg') no-repeat center / contain; mask: url('../images/common/arrow_top_rounded.svg') no-repeat center / contain;}

/* 1600px 이하: 퀵메뉴 접기/펼치기 토글 (기본 접힘) */
@media (max-width: 1600px) {
  .quick-menu__panel {border-radius: 8rem; background: linear-gradient(180deg, rgb(98 203 208 / 70%) 0%, rgb(0 90 112 / 70%) 100%);}
  .quick-menu__toggle {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 1.6rem 0.5rem; color: var(--white); font-size: 1.3rem; font-weight: 600; line-height: 1.3;}
  .quick-menu__toggle-arrow {width: 1.2rem; height: 0.7rem; background-color: #fff; -webkit-mask: url('../images/common/arrow_top_rounded.svg') no-repeat center / contain; mask: url('../images/common/arrow_top_rounded.svg') no-repeat center / contain; transition: transform 0.2s ease;}
  .quick-menu__toggle-label {font-family: "Philosopher", serif;}
  .quick-menu__toggle[aria-expanded="false"]{aspect-ratio: 1 / 1;}
  .quick-menu__toggle[aria-expanded="true"] {background: #4ea4a7;}
  .quick-menu__toggle[aria-expanded="true"] .quick-menu__toggle-arrow {transform: rotate(180deg);}
  .quick-menu__toggle[aria-expanded="true"] .quick-menu__toggle-label {display: none;}
  #quick-menu-list {overflow: hidden; opacity: 1; transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;}
  .quick-menu__toggle[aria-expanded="false"] + #quick-menu-list {max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;}
}




/* ==========================================================================
   푸터
   ========================================================================== */
footer {background: #272727; color: #878787; padding: 5.3rem 0 7.6rem; position: relative;}
footer::before {content: ''; width: 100%; height: 100%; display: block; background: url("../images/common/ft_bg.png");opacity: 0.3; z-index: 0; position: absolute; top: 0; left: 0;}
.footer-inner {position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 4rem;}
.footer-body {flex: 1; min-width: 0;}

.footer-nav ul {display: flex; flex-wrap: wrap; margin-bottom: 3.2rem;}
.footer-nav li {display: flex; align-items: center;}
.footer-nav__divider {margin: 0 3rem; font-size: 1.4rem; color: rgba(255, 255, 255, 0.4);}
.footer-nav a {font-size: 1.6rem; color: var(--white); font-weight: 500;}

.footer-address {font-style: normal;}
.footer-address p {font-size: 1.4rem; line-height: 1.78;}
.footer-address__divider {margin: 0 1.5rem; color: rgba(255, 255, 255, 0.3);}
.footer-copyright {margin-top: 2.5rem; font-size: 1.4rem;}

.logo-gray {flex: none; width: 16rem; height: 9.8rem; background-color: #838383; -webkit-mask: url('../images/common/logo_vertical_w.svg') no-repeat center / contain; mask: url('../images/common/logo_vertical_w.svg') no-repeat center / contain;}

/* ==========================================================================
   유틸리티: PC/모바일 전용 노출
   ========================================================================== */
.pc-only {display: block !important;}
.mo-only {display: none !important;}



/* 스크린리더 전용 텍스트 (시각적으로는 숨기되 보조기술에는 노출) */
.visually-hidden,
.sr-only{position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

/* 본문 바로가기 (키보드 사용자 전용, 포커스 시에만 노출) */
.skip-link{position: absolute; top: -6rem; left: 1rem; z-index: 300; padding: 1.2rem 2rem; background: var(--color-primary); color: var(--white); font-size: 1.4rem; font-weight: 600; border-radius: 0.4rem; transition: top 0.2s ease;}
.skip-link:focus{top: 1rem;}



/* prev/next 버튼 디자인 — 위치는 .slider-controls 안에서만 재배치 */
.swiper-button-next,
.swiper-button-prev {border: 1px solid rgb(119 118 118 / 0.8); border-radius: 0.5rem; width: 3.5rem; height: 3.5rem; flex-shrink: 0;}
.swiper-button-next svg,
.swiper-button-prev svg {display: none;}
.swiper-button-next::after,
.swiper-button-prev::after {content: ''; color: transparent; display: inline-block; width: 1.4rem; height: 1.8rem; background: url("../images/common/swiper-arrow.svg") no-repeat center/contain;}
.swiper-button-prev::after {transform: rotate(180deg);}

/* 프라이머리 색 — .slider-controls--primary 또는 버튼에 is-primary */
.slider-controls--primary .swiper-button-next,
.slider-controls--primary .swiper-button-prev,
.swiper-button-next.is-primary,
.swiper-button-prev.is-primary {border-color: var(--color-primary);}
.slider-controls--primary .swiper-button-next::after,
.slider-controls--primary .swiper-button-prev::after,
.swiper-button-next.is-primary::after,
.swiper-button-prev.is-primary::after {background-color: var(--color-primary);-webkit-mask: url("../images/common/swiper-arrow.svg") no-repeat center/contain;mask: url("../images/common/swiper-arrow.svg") no-repeat center/contain;background-image: none; }

/* 화이트 색 — .slider-controls--white 또는 버튼에 is-white */
.slider-controls--white .swiper-button-next,
.slider-controls--white .swiper-button-prev,
.swiper-button-next.is-white,
.swiper-button-prev.is-white {border-color: var(--white);}
.slider-controls--white .swiper-button-next::after,
.slider-controls--white .swiper-button-prev::after,
.swiper-button-next.is-white::after,
.swiper-button-prev.is-white::after {background-color: var(--white);-webkit-mask: url("../images/common/swiper-arrow.svg") no-repeat center/contain;mask: url("../images/common/swiper-arrow.svg") no-repeat center/contain;background-image: none;}

/* prev / next + 카운터 (가로 배치 레이아웃 전용 래퍼) */
.slider-controls {position: relative; width: 17.4rem; display: flex;align-items: center;gap: 2.6rem;}
.slider-controls .swiper-button-next,
.slider-controls .swiper-button-prev,
.slider-controls .swiper-pagination {position: relative; margin: 0; left: 0; right: 0;top: 0;}
.slider-controls .swiper-pagination {color: var(--color-muted-sub); font-size: 1.6rem; font-weight: 400;}
.slider-controls .swiper-pagination-current {color: var(--color-text); font-weight: 700;}
.slider-controls--primary .swiper-pagination {color: var(--color-primary); }
.slider-controls--primary .swiper-pagination-current {color: var(--color-primary);}
.slider-controls--white .swiper-pagination {color: rgba(255, 255, 255, 0.6); }
.slider-controls--white .swiper-pagination-current {color: var(--white); }


/* ==========================================================================
   유튜브 영상 팝업 (.video-modal)
   ========================================================================== */
.video-modal {position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 2rem;}
.video-modal[hidden] {display: none;}
.video-modal__backdrop {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75);}
.video-modal__dialog {position: relative; z-index: 1; width: min(96rem, 92vw); aspect-ratio: 16 / 9;}
.video-modal--vertical .video-modal__dialog {width: auto; height: min(80rem, 85vh); max-width: 92vw; aspect-ratio: 9 / 16;} /* 쇼츠 (data-video-vertical) */
@media (max-width: 768px) {.video-modal--vertical .video-modal__dialog {height: min(60vh, 52rem); max-width: 70vw;}} /* 모바일은 화면을 덜 덮게 */
.video-modal__frame,
.video-modal__frame iframe {width: 100%; height: 100%; border: 0;}
.video-modal__close {position: absolute;top: -4.8rem;right: 0;width: 3.6rem;height: 3.6rem;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: rgba(255, 255, 255, 0.9);cursor: pointer;border: none; text-indent: -9999px;}
.video-modal__close::before,
.video-modal__close::after {content: '';position: absolute;width: 1.6rem;height: 2px;background-color: var(--black);border-radius: 1px;}
.video-modal__close::before {transform: rotate(45deg);}
.video-modal__close::after {transform: rotate(-45deg);}

/* 섹션 대형 타이틀 공통 — 영문은 --en, 크기는 --md/--lg 조합 */
.section-title {font-weight: 400; color: var(--black); font-size: clamp(3rem, 2vw + 2rem, 5rem);}
.section-title--en {font-family: "Philosopher", serif;}
.section-title--md {font-size: clamp(3.6rem, 2.6vw + 2.2rem, 6rem);}
.section-title--lg {font-size: clamp(4rem, 2.8vw + 2.4rem, 6.5rem);}
.section-title--xl {font-size: clamp(4.4rem, 3vw + 2.6rem, 7rem);}
.section-description {font-weight: 500; font-size: 2.4rem; color: var(--color-muted-sub); margin-top: 0.8rem;}

.sub-page .section-title{font-weight: 500;}
.sub-page .section-title b{font-weight: 600;}


/* ==========================================================================
   청담이엘 피부과가 약속드립니다 (.clinic-promise)
   ========================================================================== */
.clinic-promise{padding: 22rem 0;}
.clinic-promise .section-title{font-weight: 300;}
.clinic-promise .section-title b{font-weight: 500;}
.clinic-promise__grid{list-style: none; padding: 0; margin: 5rem auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;}
.clinic-promise__card{position: relative; display: flex; align-items: center; min-height: 26rem; overflow: hidden;}
.clinic-promise__media{position: absolute; inset: 0; z-index: 0;}
.clinic-promise__media img{width: 100%; height: 100%; object-fit: cover; display: block;}
.clinic-promise__text{position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-left: 10%;}
.clinic-promise__title{font-size: 2.6rem; font-weight: 700; color: var(--color-text); margin-bottom: 1rem;}
.clinic-promise__desc{font-size: 2rem; font-weight: 300; color: rgb(60 60 60 / 0.7); line-height: 1.5; letter-spacing: -0.05rem;}
.clinic-promise__tagline{margin-top: 6rem; text-align: center; font-size: clamp(3.8rem, 2vw + 1.64rem, 4.8rem);color: var(--black);}
.clinic-promise__tagline span{color: #7f7f7f;}

@media (max-width: 1024px) {
  .clinic-promise{padding: 9rem 0;}
  .clinic-promise .section-title{font-size: 3.6rem;}
  .clinic-promise__title{font-size: 2rem;}
  .clinic-promise__desc{font-size: 1.6rem;}
  .clinic-promise__tagline{font-size: 2.6rem;}
  .clinic-promise__grid{margin-top: 4rem;}
  /* aspect-ratio가 크기를 전담하도록 min-height 해제 (카드 넘침 방지) */
  .clinic-promise__card{aspect-ratio: 330 / 484; min-height: 0;}
  .clinic-promise__text{padding: 7rem 0 0 3rem; justify-content: flex-start; height: 100%;}
  .clinic-promise__tagline span{color: #7f7f7f;}
}

@media (max-width: 768px) {
  .clinic-promise{padding: clamp(6.5rem, 16.93vw, 13rem) 0;}
  .clinic-promise .section-title{font-size: clamp(2.4rem, 6.6vw, 4.5rem);}
  .clinic-promise__grid{margin-top: clamp(2rem, 5.21vw, 4rem); gap: clamp(1.55rem, 4.04vw, 3.1rem) clamp(1.4rem, 3.65vw, 2.8rem);}
  /* aspect-ratio는 1024 값 그대로 사용 */
  .clinic-promise__text{padding: clamp(3.5rem, 9.11vw, 7rem) 0 0 clamp(1rem, 2.6vw, 2rem);}
  .clinic-promise__title{ font-size: clamp(1.3rem, 3.39vw, 2.6rem);}
  .clinic-promise__desc{font-size: clamp(1.2rem, 2.87vw, 2.2rem);}
  .clinic-promise__tagline{font-size: clamp(1.8rem, 3.91vw, 3rem); margin-top: clamp(2.8rem, 5.86vw, 4.5rem); line-height: 1.46;}
}

/* ==========================================================================
   공통 필터/카테고리 탭 (.tab-pills)
   ========================================================================== */
.tab-pills {display: flex; flex-wrap: wrap; gap: 4.5rem;}
.tab-pills__btn {display: flex; align-items: center; justify-content: center; height: 4rem; font-size: 1.8rem; font-weight: 500; color: var(--color-muted-sub);padding: 0 1.6rem;}
.tab-pills__btn[aria-selected="true"] { border-radius: 2rem; background: var(--color-primary); color: var(--white); font-weight: 900;}
/* 탭 스크롤바는 스와이퍼가 동작하는 1024 이하에서만 노출 */
.swiper-scrollbar {display: none;}

/* swiper 구조의 탭도 기존 스타일 유지 — 간격은 JS spaceBetween */
.tab-pills.swiper {width: 100%;}
/* 개수 등분 모드: 버튼이 슬라이드 폭을 채움 */
.tab-pills.swiper .swiper-slide .tab-pills__btn {width: 100%;}


/* PC: 스와이퍼 기본 CSS를 되돌려 원래 탭 레이아웃으로 */
@media (min-width: 1025px) {
  .tab-pills.swiper {overflow: visible !important;}
  .tab-pills.swiper .swiper-wrapper {display: flex !important; flex-wrap: wrap !important; gap: 4.5rem !important; width: auto !important; height: auto !important; transform: none !important;}
  .tab-pills.swiper .swiper-slide {width: auto !important; height: auto !important; flex-shrink: initial !important; margin: 0 !important;}
  .tab-pills.swiper .swiper-slide .tab-pills__btn {width: auto;}
}

/* 탭 그룹 래퍼 — 가운데 정렬 담당, 알약형 배경은 --filled */
.tab-group{width: max-content;margin: 0 auto;}
.tab-group--filled{background: #f4f5f6; padding: 0.8rem; border-radius: 9999px;}
.tab-group .tab-pills.swiper .swiper-wrapper{gap: 2rem !important; justify-content: space-between;}
/* 스와이퍼가 붙은 탭은 wrapper gap 제거 (spaceBetween과 중복 방지) — 새 탭 스와이퍼도 wrapper에 gap 주지 말 것 */
.tab-pills.swiper.swiper-initialized .swiper-wrapper {gap: unset !important; justify-content: space-between;}
.tab-group .tab-pills__btn{padding: 0 clamp(2rem, 2vw, 4rem); color: var(--color-muted-sub);}
.tab-group .tab-pills__btn[aria-selected="true"]{font-weight: 700; color: var(--white)}

.tab-group--filled .tab-pills__btn{color: var(--color-muted-sub);}

/* --------------------------------------------------------------------------
   게시판형 pagination
   -------------------------------------------------------------------------- */
.pagination{display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 6rem;}
.pagination__arrow{display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; transition: opacity 0.2s ease;}
.pagination__arrow:hover, .pagination__arrow:focus-visible{opacity: 0.6;}
.pagination__arrow::before{content: ''; display: block; width: 1.5rem; height: 2rem; background: url("../images/common/swiper-arrow.svg") no-repeat center/contain;}
.pagination__arrow--prev::before{transform: rotate(180deg);}
.pagination__arrow--first::before,
.pagination__arrow--last::before{width: 1.1rem; background-image: url("../images/common/swiper-arrow.svg"), url("../images/common/swiper-arrow.svg"); background-repeat: no-repeat, no-repeat; background-position: left center, right center; background-size: 1.5rem 2rem, 1.5rem 2rem;}
.pagination__arrow--first::before{transform: rotate(180deg);}
.pagination__list{display: flex; align-items: center; gap: 0.4rem; list-style: none; margin: 0 1rem; padding: 0;}
.pagination__link{display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; font-size: 1.5rem; font-weight: 500; color: var(--color-muted-sub); transition: background 0.2s ease, color 0.2s ease;}
.pagination__link:hover, .pagination__link:focus-visible{color: var(--color-primary);}
.pagination__link.is-active{background: var(--color-text); color: var(--white); font-weight: 500;}



/* ==========================================================================
   공통 버튼 베이스 (.btn)
   ========================================================================== */
.btn {display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 0 5.4rem; height: 6rem; border-radius: 5px; font-size: 1.6rem; font-weight: 700; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;}
.btn--sm {height: 4rem;padding: 0 2.8rem;font-size: 1.5rem; font-weight: 400;}

.btn-line {border: 1px solid var(--black); background: transparent; color: var(--color-text);}
.btn-line__icon {display: inline-block; font-weight: 400; transition: transform 0.25s ease;}
.btn-line:hover,
.btn-line:focus-visible {border-color: var(--color-primary); color: var(--color-primary);}
.btn-line:hover .btn-line__icon {transform: translateX(4px);}
/* --------------------------------------------------
   [추가] 화이트 라인 버튼 버전
   -------------------------------------------------- */
.btn-line--white {border-color: var(--white);color: var(--white);}
.btn-line--white:hover,
.btn-line--white:focus-visible {border-color: var(--white);color: var(--white);opacity: 0.8;}


.btn-primary {border: 1px solid var(--color-primary); background: var(--color-primary); color: var(--white);}
.btn-primary:hover,
.btn-primary:focus-visible {background: var(--color-primary-dark); border-color: var(--color-primary-dark);}
.btn-primary__icon {display: inline-block; font-weight: 400; transition: transform 0.25s ease;}
.btn-primary:hover .btn-primary__icon {transform: translateX(4px);}

/* 다운로드 버튼 (.btn .btn-download) — 아이콘은 mask, 글자색을 따라감 */
.btn-download {gap: 0.6rem; height: 3.6rem; padding: 0 1.6rem; border: 1px solid #afafaf; border-radius: 0.5rem; background: var(--white); font-size: 1.6rem; font-weight: 500; color: var(--color-muted-sub);}
.btn-download::after {content: ""; flex: none; width: 1.6rem; height: 1.6rem; background: currentColor; -webkit-mask: url("../images/common/ico-download.svg") no-repeat center / contain; mask: url("../images/common/ico-download.svg") no-repeat center / contain;}
.btn-download:hover,
.btn-download:focus-visible {border-color: var(--color-primary); color: var(--color-primary);}

/* ==========================================================================
   공통 그라데이션 버튼 (.btn-gradient)
   ========================================================================== */
.btn-gradient {position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; padding: 0 7.3rem; height: 8rem; border-radius: 0.6rem; overflow: hidden;  background: var(--color-primary); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); color: #ffffff; font-size: 2rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease;}

/* Layer 1417: 하단 중앙 방사형 하이라이트 (Radial Glow) */
.btn-gradient::before {content: ""; position: absolute; bottom: -35%; /* 빛의 중심을 하단 더 아래쪽에 배치해 버튼 하단 모서리가 가장 밝게 */ left: 50%; transform: translateX(-50%); width: 45%; height: 75%; background: radial-gradient(ellipse at center, rgba(80, 190, 190, 0.8) 0%, rgba(80, 190, 190, 0.25) 45%, transparent 75%); pointer-events: none;}

/* 텍스트와 화살표가 빛 효과 위로 올라오도록 설정 */
.btn-gradient__text,
.btn-gradient__icon {position: relative; z-index: 1;}

.btn-gradient__icon {display: inline-block; font-style: normal; transition: transform 0.25s ease;}

/* Hover & Focus 효과 */
.btn-gradient:hover,
.btn-gradient:focus-visible {transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);}

.btn-gradient:hover .btn-gradient__icon {transform: translateX(4px);}

/* ==========================================================================
   공통 체크박스 (.checkbox)
   ========================================================================== */
.checkbox {flex: none; appearance: none; -webkit-appearance: none; width: 2.2rem; height: 2.2rem; border: none; border-radius: 0.4rem; background-color: #bebebe; background-image: url("../images/common/check.svg"); background-repeat: no-repeat; background-position: center; background-size: 1.2rem; cursor: pointer; transition: background-color 0.2s ease;}

/* 체크박스 + 동의 라벨 한 줄 조합 — 예약폼/상담폼 등 여러 곳에서 반복되는 패턴이라 공통화 */
.agree-item {display: flex; gap: 0.8rem; font-size: 1.5rem; color: var(--color-text);}
.checkbox:checked {background-color: var(--color-text); background-image: url("../images/common/check.svg");}

/* ==========================================================================
   개인정보/마케팅 동의 약관 팝업 (.terms-modal) — 전 페이지 공통
   ========================================================================== */
.terms-modal {position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 2rem;}
.terms-modal[hidden] {display: none;}
.terms-modal__backdrop {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6);}
.terms-modal__dialog {position: relative; z-index: 1; width: min(52rem, 94vw); max-height: 80vh; display: flex; flex-direction: column; background: var(--white); overflow: hidden;}
.terms-modal__head {display: flex; align-items: center; justify-content: space-between; padding: 2rem 2.4rem; background: linear-gradient(120deg, var(--color-primary), var(--color-accent)); color: var(--white); font-size: 1.8rem; font-weight: 700;}
.terms-modal__close {width: 2.8rem; height: 2.8rem; display: flex; align-items: center; justify-content: center; color: var(--white);}
.terms-modal__close svg {width: 1.6rem; height: 1.6rem;}
.terms-modal__body {flex: 0 1 auto; height: 30rem; min-height: 0; overflow-y: auto; padding: 2.4rem; font-size: 1.4rem; line-height: 1.8; color: var(--color-text);}
.terms-modal__body p + p {margin-top: 1.4rem;}
.terms-modal__footer {display: flex; justify-content: flex-end; padding: 1.6rem 2.4rem; border-top: 1px solid var(--color-border);}

/* ==========================================================================
   시술 선택 팝업 (.procedure-modal) — 전 페이지 공통
   하단 간편 예약 폼(전 페이지)과 상담신청 폼이 같이 쓴다. js/common/procedure-modal.js
   ========================================================================== */
.procedure-modal {position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 2rem;}
.procedure-modal[hidden] {display: none;}
.procedure-modal__backdrop {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6);}
.procedure-modal__dialog {position: relative; z-index: 1; width: min(63rem, 94vw); max-height: 90vh; display: flex; flex-direction: column; background: var(--white);  overflow: hidden;}
.procedure-modal__head {display: flex; align-items: center; justify-content: space-between; height: 6rem; padding: 2rem 2rem 2rem 3rem; background:linear-gradient(120deg, #006573, #81d8d0); color: var(--white); font-size: 2.2rem; font-weight: 500;}
.procedure-modal__head span{font-size: 1.8rem; font-weight: 400;}
.procedure-modal__close {width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; color: var(--white);}
.procedure-modal__close svg {width: 100%; height: 100%;}
.procedure-modal__body {display: flex; flex: 1; gap: 3rem; min-height: 30rem; overflow: hidden; padding: 3rem 3rem 2rem;}
.procedure-modal__cats {flex: none; width: 15rem; display: flex; flex-direction: column; min-height: 0; background: var(--color-bg-soft); overflow-y: auto;}
.procedure-modal__cat {display: block; position: relative; width: 100%; margin-top: -1px; border: 1px solid rgb(0 101 115 / 0.76); height: 5.2rem; text-align: center; font-size: 1.6rem; font-weight: 600; color: var(--color-primary); background: var(--white);}
.procedure-modal__cat:first-child {margin-top: 0;}
.procedure-modal__cat[aria-selected="true"] {position: relative; z-index: 1; background: var(--color-primary); color: var(--white); font-weight: 600;}
.procedure-modal__items {flex: 1; height: 25.7rem; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto;}
.procedure-modal__items[hidden] {display: none;}
.procedure-modal__item {display: flex; align-items: center; gap: 0.7rem; padding: 1.4rem 1.2rem; border-radius: 0.5rem; background: #f8f6f4; font-size: 1.5rem; color: var(--color-text); cursor: pointer;}
.procedure-modal__item:has(.checkbox:disabled) {color: var(--color-muted-lighter); cursor: not-allowed;}
.procedure-modal__item .checkbox{width: 1.8rem; height: 1.8rem;}
.procedure-modal__footer { width: 100%; padding: 0 3rem;}
.procedure-modal__footer_inner{display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--black); padding: 2rem 0 3rem;}
.procedure-modal__tags {flex: 1; display: flex; flex-wrap: wrap; gap: 0.5rem;}
.procedure-modal__tag {display: inline-flex; align-items: center; gap: 1rem; height: 3rem; padding: 0 1.1rem; border-radius: 9999px; background: #eaf4f4; color: var(--color-primary); font-size: 1.3rem; font-weight: 500;}
.procedure-modal__tag button {display: flex; color: inherit;}
.procedure-modal__tag button svg {width: 1.2rem; height: 1.2rem;}
.checkbox:disabled {cursor: not-allowed;}
.checkbox:disabled:checked {opacity: 0.5;}
.procedure-modal__submit {flex: none; padding: 0 4.4rem;}

@media (max-width: 1024px) {
  /* 시술 선택 팝업: 2열 유지, 선택 완료 버튼 전체 폭 */
  .procedure-modal__footer_inner {flex-direction: column; align-items: stretch;}
  .procedure-modal__submit {width: 100%;}
}

@media (max-width: 768px) {
  /* 시술 선택 팝업: 양옆 딤만 남긴 전체 폭, 길면 딤 영역 스크롤 */
  .procedure-modal {padding: clamp(1.6rem, 4.17vw, 3.2rem) clamp(2rem, 5.21vw, 4rem); overflow-y: auto; overscroll-behavior: contain;}
  .procedure-modal__backdrop {position: fixed;}
  .procedure-modal__dialog {flex: none; width: 100%; max-height: none; margin: auto 0;}
  .procedure-modal__head {height: clamp(4.7rem, 12.24vw, 9.4rem); padding: 0 clamp(2rem, 5.21vw, 4rem); font-size: clamp(1.6rem, 4.17vw, 3.2rem);}
  .procedure-modal__head span {font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .procedure-modal__close {width: clamp(1.6rem, 4.17vw, 3.2rem); height: clamp(1.6rem, 4.17vw, 3.2rem);}
  /* 본문/푸터 좌우 패딩 — 768에서 최대값, 폰에서는 절반보다 더 줄도록 기울기를 키움(360에서 최소값) */
  .procedure-modal__body {gap: clamp(1rem, 2.6vw, 2rem); min-height: 0; padding: clamp(1.5rem, calc(7.35vw - 1.15rem), 4.5rem) clamp(1.8rem, calc(9.07vw - 1.47rem), 5.5rem) clamp(1.3rem, calc(6.62vw - 1.08rem), 4rem);}
  /* 카테고리 폭은 시안 비율(768: 260/578)대로 % — 리스트 칸과 같은 비율로 줄어든다 */
  .procedure-modal__cats {width: 45%;}
  .procedure-modal__cat {height: clamp(4.5rem, 11.72vw, 9rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  /* 리스트 높이 = 카테고리 5개 높이 합(겹친 테두리 1px × 4 제외) — PC 25.7rem과 같은 방식 */
  .procedure-modal__items {height: calc(clamp(4.5rem, 11.72vw, 9rem) * 5 - 4px); gap: clamp(0.6rem, 1.56vw, 1.2rem);}
  .procedure-modal__item {flex: none; gap: clamp(0.85rem, 2.21vw, 1.7rem); height: clamp(3.9rem, 10.16vw, 7.8rem); padding: 0 clamp(1rem, 2.6vw, 2rem); font-size: clamp(1.35rem, 3.52vw, 2.7rem);}
  /* 팝업 PC 규칙(1.8rem)이 공통 .checkbox 모바일 크기를 덮으므로 폼 체크박스와 같은 공통 값으로 */
  .procedure-modal__item .checkbox {width: clamp(2rem, 4.3vw, 3.3rem); height: clamp(2rem, 4.3vw, 3.3rem);}
  .procedure-modal__footer {padding: 0 clamp(1.8rem, calc(9.07vw - 1.47rem), 5.5rem);}
  .procedure-modal__footer_inner {gap: clamp(1.2rem, 3.12vw, 2.4rem); padding: clamp(1.2rem, 3.12vw, 2.4rem) 0 clamp(1.6rem, 4.17vw, 3.2rem);}
  .procedure-modal__tags {gap: clamp(0.4rem, 1.04vw, 0.8rem);}
  .procedure-modal__tag {gap: clamp(0.5rem, 1.3vw, 1rem); height: clamp(2.6rem, 6.77vw, 5.2rem); padding: 0 clamp(1.2rem, 3.12vw, 2.4rem); font-size: clamp(1.2rem, 3.12vw, 2.4rem);}
  .procedure-modal__tag button svg {width: clamp(0.95rem, 2.47vw, 1.9rem); height: clamp(0.95rem, 2.47vw, 1.9rem);}
  .procedure-modal__submit {height: clamp(5.2rem, 13.54vw, 10.4rem); font-size: clamp(1.6rem, 4.17vw, 3.2rem); border-radius: clamp(0.5rem, 1.3vw, 1rem);}
}

/* ==========================================================================
   공통 입력 요소 (input[type=text/tel/email/number], select, textarea)
   ========================================================================== */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea {width: 100%; padding: 1.4rem 1.6rem; border: 1px solid #d2d1cf; border-radius: 0.5rem; font-size: 1.6rem; /* input/select 렌더 높이 통일 */ line-height: 1.5; color: var(--color-text); background: var(--white);}
select {appearance: none; background-image: url("../images/common/select.svg"); background-repeat: no-repeat; background-position: right 1.6rem center; background-size: 1.5rem;}

input::placeholder,
textarea::placeholder,
select option.placeholder-option,
select:invalid {color: var(--color-muted-lighter);}

/* ==========================================================================
   공통 다크 버튼 (.btn-dark)
   ========================================================================== */
.btn-dark {display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0 1.8rem; border-radius: 0.5rem; height: 4rem; background: var(--color-text); color: var(--white); font-size: 1.4rem; font-weight: 400;}

/* ==========================================================================
   공통 재생 버튼 (.play-btn)
   ========================================================================== */
.play-btn {display: flex; align-items: center; justify-content: center; width: 6.4rem; height: 6.4rem; border-radius: 50%; border: 0.15rem solid rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.1);}
.play-btn::before {content: ""; margin-left: 0.4rem; border-style: solid; border-width: 1rem 0 1rem 1.6rem; border-color: transparent transparent transparent var(--white);}
.play-btn--sm {width: 3.2rem; height: 3.2rem; border-width: 0.1rem;}
.play-btn--sm::before {margin-left: 0.2rem; border-width: 0.5rem 0 0.5rem 0.8rem;}
.play-btn--lg {width: 10.5rem; height: 10.5rem; border-width: 0.2rem;}
.play-btn--lg::before {margin-left: 0.6rem; border-width: 1.6rem 0 1.6rem 2.6rem;}

/* 아이콘 */
.arrow-wrap{display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.arrow{display: inline-block; width: 1.4rem; height: 2.1rem; background-color: #fff; -webkit-mask: url('../images/common/arrow_right_rounded.svg') no-repeat center / contain; mask: url('../images/common/arrow_right_rounded.svg') no-repeat center / contain; }


@media (max-width: 1024px) {
  /* 주 메뉴: 오프캔버스로 전환 — 목록만 스크롤, 하단 바는 고정 */
  .header-top .main-nav {display: flex; flex-direction: column; flex: none; position: fixed; top: var(--header-h); right: 0; bottom: 0; width: 100%; background: var(--color-bg); box-shadow: -0.4rem 0 2rem rgba(0, 0, 0, 0.1); z-index: 95; transform: translateX(100%); transition: transform 0.25s ease;}
  .header-top .main-nav.is-open {transform: translateX(0);}
  .header-top .main-nav .main-nav__scroll {flex: 1; min-height: 0; overflow-y: auto;}

  /* 오프캔버스 하단 고정 바: 간편예약/오시는길/전화·카톡·온라인 상담 */
  .header-top .main-nav .main-nav__bottom-bar {flex: none; display: flex !important; background: var(--color-primary); border-radius: 1rem 1rem 0 0; box-shadow: 1px 2px 10px;}
  .header-top .main-nav .main-nav__bottom-bar a {flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 1.2rem 0.4rem; font-size: 1.4rem; font-weight: 600; color: var(--white); text-align: center;}
  .main-nav__bottom-bar-icon {display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;}
  .main-nav__bottom-bar-icon img {width: 100%; height: 100%; object-fit: contain;}
  .main-nav__bottom-bar-icon--kakao {border-radius: 0.6rem; overflow: hidden;}


  /* 오프캔버스 상단: 회원가입/로그인 + 언어선택 (.mo-only보다 높은 특이도 필요) */
  .header-top .main-nav .main-nav__utility {display: flex !important;align-items: center;justify-content: space-between;gap: 1.2rem;background-color: #f7f7f7;padding: 1.6rem 2.4rem;border-top: 1px solid #bfbfbf;border-bottom: 1px solid #bfbfbf;}
  .header-top .main-nav__auth {display: flex;align-items: center;gap: 1.6rem;}
  .header-top .main-nav__auth .main-nav__auth-link {font-size: 1.6rem;color: var(--color-text);}
  .main-nav__auth-divider {width: 0.1rem;height: 1.2rem;background: #888888;}
  .header-top .main-nav ul {display: flex;flex-direction: column; padding: 1.6rem 0;}

  /* 언어선택 드롭다운은 hidden 속성이 우선하도록 */
  .header-top .main-nav .main-nav__lang .lang-switch__list {display: flex;}
  .header-top .main-nav .main-nav__lang .lang-switch__list[hidden] {display: none;}
  /* 오프캔버스 언어 목록: 오른쪽 정렬, 버튼과 이어진 흰 박스 (폭은 header.js가 맞춤) */
  .header-top .main-nav .main-nav__lang .lang-switch__list {left: auto; right: 0; min-width: 0; transform: none; margin-top: -1px; padding: 0 1.1rem; background: var(--white); border: 1px solid #bfbfbf; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.1);}
  .header-top .main-nav .main-nav__lang .lang-switch__link {color: var(--color-primary); font-weight: 400; font-size: 1.6rem; gap: 1rem;}
  /* 모바일 언어 버튼: 국기+텍스트+화살표 박스 */
  /* 언어마다 폭이 바뀌지 않게 가장 넓은 CN 기준으로 고정 */
  .main-nav__lang .lang-switch__btn {display: flex; align-items: center; gap: 1rem; width: 10.6rem; font-size: 1.6rem; font-weight: 400; color: var(--color-primary);  background: var(--white); border: 1px solid #bfbfbf;border-radius: 0.5rem; padding: 0 1.1rem; height: 3.5rem; position: relative; z-index: 1;}
  .main-nav__lang .lang-switch__btn[aria-expanded="true"] {border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none;}
  .main-nav__lang .lang-switch__btn .lang-switch__icon {width: 1.4rem; height: 1.4rem; margin-left: auto; transition: transform 0.2s ease;}
  .main-nav__lang .lang-switch__btn[aria-expanded="true"] .lang-switch__icon {transform: rotate(180deg);}
  .main-nav__lang .lang-switch__btn .lang-switch__flag {width: 2.4rem; height: 2.4rem;}
  .header-top .main-nav .main-nav__link {display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.8rem 3rem 1.8rem 2rem;font-size: 1.7rem; font-weight: 500;}
  /* 아코디언 화살표 — 펼침 시 180도 회전 */
  .header-top .main-nav .main-nav__link::after {content: '';flex: none;width: 1.2rem;height: 0.7rem;background-color: rgba(0,0,0,0.24);-webkit-mask: url('../images/common/arrow_top_rounded.svg') no-repeat center / contain;mask: url('../images/common/arrow_top_rounded.svg') no-repeat center / contain;transform: rotate(180deg);transition: transform 0.2s ease;}
  .header-top .main-nav .main-nav__link[aria-expanded="true"]::after {transform: rotate(0deg);background-color: var(--black);}
  .lang-switch__flag{border: 1px solid #bcbcbc;width: 2.4rem; }
  /* 서브메뉴: 오프캔버스 안에서는 아코디언 형태로 링크 아래에 쌓이게 전환 */
  .main-nav__item {display: block;}
  .nav-submenu {position: static;width: auto;opacity: 1;visibility: visible;transform: none;max-height: 0;overflow: hidden;padding-top: 0;transition: max-height 0.25s ease;}
  /* 데스크톱 메가메뉴 transform 해제 (아코디언이 화면 밖으로 밀리지 않게) */
  .main-nav__item.is-open .nav-submenu {max-height: 200rem; width: 100%; transform: none;}
  .nav-submenu__inner {flex-direction: column; gap: 2.4rem; padding: 0 0 2rem 2rem; box-shadow: none; border-radius: 0; background: #f7f7f7;}
  .nav-submenu__col--links {width: auto;padding: 0;}
  .header-top .main-nav ul li a {position: relative;}

  /* 오프캔버스 메뉴 아코디언에서는 유튜브/블로그 미리보기 카드는 숨기고 텍스트 서브메뉴만 노출 */
  .nav-submenu__col--media {display: none;}

  /* 전체메뉴(햄버거): 모바일에서만 노출 */
  .menu-toggle {display: inline-flex;}

  /* 헤더: 데스크톱용 여백/간격이 좁은 화면에서 로고를 밀어내지 않도록 축소 */
  .header-top {padding: 0 2rem;}


  aside {right: 0.8rem;}

  .footer-inner {flex-direction: column; align-items: flex-start; gap: 3.2rem;}

  /* 유틸리티: PC/모바일 전용 노출 (기준점은 헤더 반응형과 동일한 1024px) */
  .pc-only {display: none !important;}
  .mo-only {display: block !important;}


  /* 1024 비율 그룹: 타이틀 → 설명(약 55%) → 탭(설명 이하) — 768 이하는 아래 768 블록이 덮어씀 */
  .section-title {font-size: 3.6rem;}
  .section-description {font-size: 2rem;}

  /* 스와이퍼가 max-content 폭을 읽지 않도록 뷰포트 폭으로 고정 */

  .tab-group {width: 100%;}
  .tab-group--filled{background: transparent;}
  .tab-pills {position: relative; width: 100%; padding-bottom: 0.4rem;}
  .tab-pills::after {content: ''; display: block; width: 100%; height: 0.2rem; background: rgb(136 133 126 / 0.5); position: absolute; bottom: 0.2rem; left: 0;}
  .tab-pills__btn {position: relative; font-size: 1.8rem; padding: 0 0 2rem 0; height: auto;}
  .tab-pills__btn[aria-selected="true"] {background: transparent; border-radius: 0; color: var(--color-primary);}
  /* 선택 밑줄: 버튼 기준, 아래 끝을 회색 라인(.tab-pills padding-bottom 안)에 맞춤 — 스와이퍼 overflow 에 잘리지 않게 컨테이너 안쪽에 그림 */
  .tab-pills__btn[aria-selected="true"]::before {content: ''; display: block; width: 100%; height: 0.4rem; background: var(--color-primary); position: absolute; bottom: -0.2rem; left: 0;}

  /* 알약형(칩) 탭 — 서브페이지 카테고리 필터 */
  .tab-pills--chip {padding-bottom: 0; gap: 3rem;}
  .tab-pills--chip::after {display: none;}
  .tab-pills--chip .tab-pills__btn {height: 4rem; padding: 0 2rem; border-radius: 9999px; background: #f0f0ef; color: var(--color-muted-sub); font-size: 1.6rem; font-weight: 500;}
  .tab-pills--chip .tab-pills__btn[aria-selected="true"] {background: var(--color-primary); color: var(--white); font-weight: 700;}
  .tab-pills--chip .tab-pills__btn[aria-selected="true"]::before {display: none;}
  /* data-slides-mobile="auto": 버튼 콘텐츠 폭만큼 차지 */

  .tab-pills--chip.swiper .swiper-slide {width: auto;}
  .tab-pills--chip.swiper .swiper-slide .tab-pills__btn {width: auto;}
  .tab-pills--chip .swiper-scrollbar {display: block; position: relative; height: 0.3rem; background: #e5e5e3; border-radius: 9999px;}
  .tab-pills--chip .swiper-scrollbar-drag {background: var(--color-primary); border-radius: 9999px;}
  /* 뒤에 탭이 더 있으면 오른쪽 끝 흐림 (끝에 닿으면 .is-end로 해제) */
  .tab-pills--chip.swiper-initialized:not(.is-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6rem), transparent), linear-gradient(#000, #000);
            mask-image: linear-gradient(to right, #000 calc(100% - 6rem), transparent), linear-gradient(#000, #000);
    -webkit-mask-size: 100% calc(100% - 1rem), 100% 1rem;
            mask-size: 100% calc(100% - 1rem), 100% 1rem;
    -webkit-mask-position: top, bottom;
            mask-position: top, bottom;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }

  .user-nav__item.mo-only {display: flex !important;}

}

/* ==========================================================================
   768 PSD 반영: 1024 블록의 축소값을 768 이하에서 원래 디자인 수치로 되돌림
   ========================================================================== */
@media (max-width: 768px) {

  .container {padding: 0 clamp(2rem, 5.21vw, 4rem);}

  /* 모바일 헤더 */
  .header-top {height: clamp(4.8rem, 12.5vw, 9.6rem);}
  .header-top h1,
  .header-top h1 a,
  .header-top h1 img {height: clamp(3rem, 6.25vw, 4.8rem);}
  .user-nav__icon-btn {width: clamp(1.9rem, 4.95vw, 3.8rem);height: clamp(1.9rem, 4.95vw, 3.8rem);}

  .user-nav__icon-btn.menu-toggle {width: clamp(2rem, 5.2vw, 4rem);height: clamp(1.9rem, 4.95vw, 3.8rem);}
  .menu-toggle__bar {height: clamp(0.15rem, 0.39vw, 0.3rem);}
  .menu-toggle__icon {width: clamp(2rem, 5.2vw, 4rem);height: clamp(1.6rem, 4.16vw, 3.2rem);}
  .header-top .user-nav > ul {gap: clamp(1.8rem, 4.68vw, 3.6rem);}
  .header-top .main-nav {top: clamp(4.8rem, 12.5vw, 9.6rem); }
  .header-top .main-nav .main-nav__utility {padding: clamp(0.7rem, 2.3vw, 2rem) clamp(2rem, 5.6vw, 4.3rem) clamp(0.7rem, 2.3vw, 2rem) clamp(2rem, 5.2vw, 4rem); border-top: clamp(0.1rem, 0.26vw, 0.2rem) solid #bfbfbf; border-bottom: clamp(0.1rem, 0.26vw, 0.2rem) solid #bfbfbf;}
  .header-top .main-nav__auth {gap: clamp(1.2rem, 3.8vw, 3.8rem);}
  .header-top .main-nav__auth .main-nav__auth-link {font-size: clamp(1.4rem, 3.65vw, 2.8rem);padding: 0;}
  .main-nav__auth-divider {width: 1px;height: clamp(1rem, 2.47vw, 1.9rem);}
  .lang-switch__link {font-size: clamp(1.3rem, 3.39vw, 2.6rem); gap: clamp(0.6rem, 1.56vw, 1.2rem); padding: clamp(0.4rem, 1.04vw, 0.8rem) clamp(0.5rem, 1.3vw, 1rem);}
  /* 언어 버튼 폭 고정 (768 기준 CN 폭) */
  .main-nav__lang .lang-switch__btn { height: clamp(3.2rem, 7.29vw, 5.6rem); padding: 0 clamp(1.2rem, 2.6vw, 2rem); gap: clamp(0.4rem, 1.04vw, 0.8rem); font-size: clamp(1.4rem, 2.86vw, 2.2rem); width: clamp(8rem, 18.23vw, 14rem); }
  .main-nav__lang .lang-switch__btn .lang-switch__icon { width: clamp(1.5rem, 3.39vw, 2.6rem); height: clamp(1.5rem, 2.86vw, 2.2rem); flex-shrink: 0;}
  .main-nav__lang .lang-switch__btn .lang-switch__flag,
  .lang-switch__flag{ width: clamp(2.2rem, 3.91vw, 3rem); height: clamp(2.2rem, 3.91vw, 3rem); }
  .header-top .main-nav .main-nav__lang .lang-switch__link{gap: clamp(0.4rem, 1.04vw, 0.8rem); font-size: clamp(1.3rem, 2.86vw, 2.2rem);}
  .header-top .main-nav .main-nav__lang .lang-switch__item:last-child .lang-switch__link{padding-bottom: 0;}
  .header-top .main-nav ul {padding: clamp(0.8rem, 2.1vw, 1.6rem) 0;}
  .header-top .main-nav .main-nav__link {padding: clamp(1.2rem, 3vw, 1.8rem) clamp(2rem, 5vw, 3rem) clamp(1.2rem, 3vw, 1.8rem) clamp(1.4rem, 3.5vw, 2rem); font-size: clamp(1.5rem, 3.91vw, 3rem);}
  .nav-submenu__inner {padding-bottom: 0; padding-left: clamp(2rem, 2.3vw, 2.5rem);}
  .header-top .main-nav .nav-submenu__list {padding: clamp(0.6rem, 1.56vw, 1.2rem) 0 clamp(2.1rem, 5.46vw, 4.2rem);gap: clamp(1rem, 2.6vw, 2rem);}
  .header-top .main-nav .nav-submenu__list li a {font-size: clamp(1.4rem, 3.65vw, 2.8rem);font-weight: 400;padding: 0;}
  .header-top .main-nav .main-nav__link::after {width: clamp(1.45rem, 3.78vw, 2.9rem);height: clamp(0.85rem, 2.21vw, 1.7rem);}
  .header-top .main-nav .main-nav__bottom-bar a {padding: clamp(1rem, 2.5vw, 1.8rem) 0; gap: clamp(0.3rem, 0.78vw, 0.6rem); font-size: clamp(1.2rem, 3.4vw, 2.2rem);}
  .main-nav__bottom-bar-icon {width: clamp(2.1rem, 6.5vw, 3.2rem);height: clamp(2.1rem, 6.5vw, 3.2rem);}
  .main-nav__bottom-bar-icon--phone {width: clamp(2.1rem, 6.5vw, 3.2rem);height: clamp(2.1rem, 6.5vw, 3.2rem);}
  .header-top .main-nav .main-nav__lang .lang-switch__list{padding: 0 clamp(1.2rem, 2.6vw, 2rem) clamp(0.8rem, 2.08vw, 1.6rem); gap: 0;}

  /* 모바일 푸터: 3개 링크만 순서 재배치 */
  footer {padding: clamp(1.5rem, 3.91vw, 3rem) 0 clamp(2.75rem, 7.16vw, 5.5rem);}
  footer::before {content: none;}
  .footer-nav {border-bottom: 1px solid rgb(188 183 180 / 0.6); padding-bottom: clamp(1.5rem, 3.91vw, 3rem);}
  .footer-nav ul {margin-bottom: 0;}
  .footer-nav li:nth-child(1), .footer-nav li:nth-child(2) {display: none;}
  .footer-nav li:nth-child(3) {order: 3;}
  .footer-nav li:nth-child(4) {order: 1;}
  .footer-nav li:nth-child(5) {order: 2;}
  .footer-nav li:nth-child(4) .footer-nav__divider {display: none;}
  .footer-nav__divider {margin: 0 clamp(0.75rem, 1.95vw, 1.5rem);}
  .footer-nav a {font-size: clamp(1.3rem, 3.5vw, 2.2rem);}

  .footer-address {margin-top: clamp(1.5rem, 3.91vw, 3rem);}
  .footer-address p {font-size: clamp(1.2rem, 3.2vw, 2rem); letter-spacing: -0.05rem;}
  .footer-address__name {display: block; color: var(--white); font-weight: 700;}
  .footer-address__divider {margin: 0 clamp(0.75rem, 1.95vw, 1.5rem);}
  .footer-address__name + .footer-address__divider {display: none;}
  .footer-copyright {font-size: clamp(1.2rem, 3.2vw, 2rem); margin-top: clamp(0.75rem, 1.95vw, 1.5rem);}
  .logo-gray {display: none;}


  .section-title {font-size: clamp(3.25rem, 8.46vw, 6.5rem);}
  .section-description {font-size: clamp(1.5rem, 3.91vw, 3rem); margin-top: clamp(0.4rem, 1.04vw, 0.8rem); font-weight: 400;}
  .section-title--xl {font-size: clamp(2.4rem, 6.77vw, 5.5rem);}

  .btn-gradient {padding: 0 clamp(3rem, 7.81vw, 6rem); font-size: clamp(1.5rem, 3.12vw, 2.4rem); gap: clamp(0.5rem, 1.3vw, 1rem);height: clamp(4.5rem, 11.72vw, 9rem);}

  aside {top: unset; transform: unset; bottom: clamp(5%, 10vh, 10%); right: 1.5rem; gap: clamp(0.45rem, 1.17vw, 0.9rem);}
  .quick-menu__panel {width: clamp(5.5rem, 14.32vw, 11rem);}
  aside ul {padding: clamp(1.4rem, 3.65vw, 2.8rem) clamp(0.25rem, 0.65vw, 0.5rem); gap: clamp(1.75rem, 4.56vw, 3.5rem);}
  aside a {padding: 0; font-size: clamp(1.2rem, 2.34vw, 1.8rem); font-weight: 600; gap: clamp(0.3rem, 0.78vw, 0.6rem);}
  .quick-menu__toggle[aria-expanded="true"] {padding: clamp(1.2rem, 3.12vw, 2.4rem) clamp(2.2rem, 5.73vw, 4.4rem) clamp(0.6rem, 1.56vw, 1.2rem);}
  .quick-menu__toggle[aria-expanded="false"] {padding: 0;}
  .quick-menu__toggle-label {font-size: clamp(1.2rem, 3.2vw, 2rem); font-weight: 700;}
  .quick-menu__icon--calendar {width: clamp(1.85rem, 4.82vw, 3.7rem); height: clamp(2.05rem, 5.34vw, 4.1rem);}
  .quick-menu__icon--location {width: clamp(1.65rem, 4.3vw, 3.3rem); height: clamp(2.05rem, 5.34vw, 4.1rem);}
  .quick-menu__icon--phone {width: clamp(1.85rem, 4.82vw, 3.7rem); height: clamp(1.85rem, 4.82vw, 3.7rem);}
  .quick-menu__icon--kakao {width: clamp(2.7rem, 7.03vw, 5.4rem); height: clamp(2.5rem, 6.51vw, 5rem);}
  .quick-menu__icon--chat {width: clamp(2.05rem, 5.34vw, 4.1rem); height: clamp(2.05rem, 5.34vw, 4.1rem);}

  aside > a {width: clamp(3.85rem, 10.03vw, 7.7rem);height: clamp(3.85rem, 10.03vw, 7.7rem);}
  aside li a:hover,
  aside li a:focus-visible {background: transparent;}
  .quick-menu__icon--top .icon-arrow ,
  .quick-menu__toggle-arrow {width: clamp(0.9rem, 2.34vw, 1.8rem);height: clamp(0.55rem, 1.43vw, 1.1rem);}



  /* 공통 (인풋/버튼/탭/)*/
  input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea {width: 100%; padding: clamp(1.15rem, 2.99vw, 2.3rem) clamp(1rem, 2.6vw, 2rem); border: 1px solid #d2d1cf; border-radius: clamp(0.25rem, 0.65vw, 0.5rem); font-size: clamp(1.1rem, 2.86vw, 2.2rem); line-height: 1.5; color: var(--color-text); background: var(--white);}
  select {appearance: none; background-image: url("../images/common/select.svg"); background-repeat: no-repeat; background-position: right clamp(1rem, 2.6vw, 2rem) center; background-size: clamp(1.15rem, 2.99vw, 2.3rem);}
  input::placeholder, textarea::placeholder, select option.placeholder-option, select:invalid {color: var(--color-muted-lighter);}


  .btn {height: clamp(5rem, 9.11vw, 7rem); padding: 0 clamp(2.5rem, 6.51vw, 5rem); font-size: clamp(1.4rem, 2.86vw, 2.2rem); font-weight: 500; gap: clamp(0.4rem, 1.04vw, 0.8rem); border-radius: clamp(0.25rem, 0.65vw, 0.5rem);}
  /* .btn--sm은 위 .btn 모바일 규칙보다 뒤에 와야 덮어써지지 않는다 (같은 명시도 → 나중 규칙 승) */
  .btn--sm {height: clamp(2.8rem, 7.29vw, 5.6rem); padding: 0 clamp(1.8rem, 4.69vw, 3.6rem); font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 400;}
  /* 모바일 .btn 크기 규칙이 덮지 않도록 다운로드 버튼 크기를 따로 (768 기준 5.6rem) */
  /* 768 본문 크기에 맞춘 다운로드 버튼 (PC 비율 × 약 1.55) */
  .btn-download {height: clamp(2.8rem, 7.29vw, 5.6rem); padding: 0 clamp(1.2rem, 3.13vw, 2.4rem); font-size: clamp(1.2rem, 3.13vw, 2.4rem); font-weight: 500; gap: clamp(0.5rem, 1.3vw, 1rem); border-radius: clamp(0.4rem, 1.04vw, 0.8rem);}
  .btn-download::after {width: clamp(1.2rem, 3.13vw, 2.4rem); height: clamp(1.2rem, 3.13vw, 2.4rem);}

  /* 약관 팝업 — PC 크기 기준, 폰에서만 살짝 축소, 확인 버튼은 전체 폭 */
  .terms-modal {padding: clamp(1.6rem, 4.17vw, 3.2rem) clamp(2rem, 5.21vw, 4rem);}
  .terms-modal__dialog {width: 100%; max-width: 52rem;}
  .terms-modal__head {padding: clamp(1.6rem, 4.17vw, 2rem) clamp(2rem, 5.21vw, 2.4rem); font-size: clamp(1.6rem, 4.17vw, 1.8rem);}
  .terms-modal__body {height: clamp(26rem, 67.71vw, 30rem); padding: clamp(1.8rem, 4.69vw, 2.4rem); font-size: clamp(1.3rem, 3.39vw, 1.4rem);}
  .terms-modal__body p + p {margin-top: clamp(1.2rem, 3.13vw, 1.4rem);}
  .terms-modal__footer {padding: clamp(1.2rem, 3.13vw, 1.6rem) clamp(1.8rem, 4.69vw, 2.4rem);}
  .terms-modal__footer .btn {width: 100%; height: 4.6rem; font-size: 1.5rem; border-radius: 0.5rem;}
  .btn-dark {gap: clamp(0.3rem, 0.78vw, 0.6rem); padding: 0 clamp(2rem, 5.21vw, 4rem); border-radius: clamp(0.25rem, 0.65vw, 0.5rem); height: clamp(2rem, 5.21vw, 4rem); font-size: clamp(1.3rem, 3.5vw, 1.8rem);}


  .tab-pills {padding-bottom: clamp(0.2rem, 0.52vw, 0.4rem);}
  .tab-pills::after {height: clamp(0.1rem, 0.26vw, 0.2rem); bottom: clamp(0.1rem, 0.26vw, 0.2rem);}
  .tab-pills__btn {font-size: clamp(1.6rem, 4.17vw, 3.2rem); padding-bottom: clamp(1.9rem, 4.95vw, 3.8rem);}
  .tab-pills__btn[aria-selected="true"]::before {height: clamp(0.2rem, 0.52vw, 0.4rem); bottom: clamp(-0.2rem, -0.26vw, -0.1rem);}
  .tab-pills--chip {gap: 3rem;}

  .tab-pills--chip .tab-pills__btn {height: clamp(3.2rem, 8.33vw, 6.4rem);font-size: clamp(1.4rem, 3.65vw, 2.8rem);padding: 0 clamp(1.55rem, 4.04vw, 3.1rem);}

  /* 게시판형 pagination — 768 기준 목록과의 간격 5rem */
  .pagination {margin-top: clamp(2.5rem, 6.51vw, 5rem);}

  .swiper-button-next, .swiper-button-prev {width: clamp(2.25rem, 5.86vw, 4.5rem); height: clamp(2.25rem, 5.86vw, 4.5rem); border-radius: clamp(0.25rem, 0.65vw, 0.5rem);}
  .swiper-button-next::after, .swiper-button-prev::after {width: clamp(1rem, 2.6vw, 2rem); height: clamp(1.2rem, 3.13vw, 2.4rem);}
  .slider-controls {width: max-content; gap: clamp(2.5rem, 6.51vw, 5rem);}
  .slider-controls .swiper-pagination {font-size: clamp(1.3rem, 3.39vw, 2.6rem);}

  .play-btn {width: clamp(4.1rem, 10.68vw, 8.2rem); height: clamp(4.1rem, 10.68vw, 8.2rem); border-width: clamp(0.08rem, 0.2vw, 0.15rem);}
  .play-btn::before {margin-left: clamp(0.2rem, 0.52vw, 0.4rem); border-width: clamp(0.63rem, 1.63vw, 1.25rem) 0 clamp(0.63rem, 1.63vw, 1.25rem) clamp(1rem, 2.6vw, 2rem);}
  .play-btn--sm {width: clamp(3.3rem, 8.59vw, 6.6rem); height: clamp(3.3rem, 8.59vw, 6.6rem); border-width: clamp(0.05rem, 0.13vw, 0.1rem);}
  .play-btn--sm::before {margin-left: clamp(0.2rem, 0.52vw, 0.4rem); border-width: clamp(0.5rem, 1.3vw, 1rem) 0 clamp(0.5rem, 1.3vw, 1rem) clamp(0.8rem, 2.08vw, 1.6rem);}
  .play-btn--lg {width: clamp(4.9rem, 12.76vw, 9.8rem); height: clamp(4.9rem, 12.76vw, 9.8rem); border-width: clamp(0.1rem, 0.26vw, 0.2rem);}
  .play-btn--lg::before {margin-left: clamp(0.3rem, 0.78vw, 0.6rem); border-width: clamp(0.75rem, 1.95vw, 1.5rem) 0 clamp(0.75rem, 1.95vw, 1.5rem) clamp(1.2rem, 3.13vw, 2.4rem);}



  .checkbox {width: clamp(2rem, 4.3vw, 3.3rem); height: clamp(2rem, 4.3vw, 3.3rem);}

}

/* ==========================================================================
   브랜드 마퀴 (.brand-marquee)
   ========================================================================== */
.brand-marquee {width: 100%; overflow: hidden;padding: 5.3rem 0;background: var(--white);border-top: 1px solid #d7d4d2;border-bottom: 1px solid #d7d4d2;}
.brand-marquee__track {display: flex;width: max-content;animation: brand-marquee-scroll 50s linear infinite;}
.brand-marquee__group {display: flex;flex-shrink: 0;}
.brand-marquee__text {flex-shrink: 0;font-family: "Philosopher", serif;font-size: clamp(3rem, 6vw, 14rem);font-weight: 400;color: #8c8c8c;white-space: nowrap;}
@keyframes brand-marquee-scroll {
  from {transform: translateX(0);}
  to {transform: translateX(-50%);}
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee__track {animation: none;}
}

@media (max-width: 1024px) {
  .brand-marquee {padding: 3rem 0;}
}

@media (max-width: 768px) {
  .brand-marquee {padding: clamp(2.4rem, 6.25vw, 4.8rem) 0;}
  .brand-marquee__text {font-size: clamp(4.1rem, 10.68vw, 8.2rem);}
}

/* ==========================================================================
   간편 예약 신청 (.reservation-section)
   ========================================================================== */
.reservation-section {padding: 11.5rem 0;}
.reservation-inner {display: flex;align-items: flex-start; justify-content: space-between;gap: 3rem;}
.reservation-main {width: 60%; max-width: 70rem;}
.reservation-header__title {font-size: 5rem;}
/* 신청 폼 카드(.consult-form-card)는 파일 끝 공통 섹션 참고, 여기선 섹션 안 간격만 */
.reservation-main .consult-form-card {margin-top: 3rem;}

/* 진료시간 안내 */
.reservation-hours {margin-top: 4.3rem;}
.reservation-hours__title {font-size: 3.5rem;font-weight: 500;}

/* 2열 레이아웃 배치 */
.reservation-hours__list {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: auto 1fr; /* 좌측열, 우측열 */
  column-gap: 4rem; /* 좌우 열 사이 간격 */
  row-gap: 1.2rem;
}

.reservation-hours__item {
  display: flex;
  align-items: flex-start; /* 상단 정렬 */
}

/* 우측 휴게시간 아이템 위치 지정 (오른쪽 열, 1~3행 병합) */
.reservation-hours__item:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.reservation-hours__item dt {
  width: 10rem;
  flex-shrink: 0;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: -0.05rem;
}

.reservation-hours__item dd {
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: -0.05rem;
  margin: 0;
  /* 핵심: dd 요소가 세로 줄바꿈되어 내려가도록 100% 폭 적용 */
  width: calc(100% - 10rem);
  white-space: nowrap; /* 글자가 밑으로 지저분하게 꺾이지 않도록 고정 */
}

/* 휴게시간 항목에서 두 번째 dd부터는 왼쪽 여백(dt 너비+gap)을 맞춰서 아래로 쌓이게 처리 */
.reservation-hours__item dd ~ dd {
  margin-left: 10rem;
}
/* 상담 카드 */
.reservation-contact {display: flex;flex-direction: column;gap: 1.4rem; width: 40%; max-width: 52rem;}
.reservation-contact__card {display: flex;align-items: center; justify-content: center; height: 17rem; padding: 0 5rem 0 4rem; gap: 2rem;}
.reservation-contact__card--kakao {background: #f7e9b8;}
.reservation-contact__card--phone {background: #dcefe4;}
.reservation-contact__card--online {background: #f0f0ef;}
.reservation-contact__icon {flex: none;display: flex;align-items: center;justify-content: center;width: 9.2rem;height: 9.2rem;border-radius: 50%;background: var(--white);}
.reservation-contact__icon img {width: 5rem;height: 5rem;object-fit: contain;}
.reservation-contact__card--phone img {width: 4.5rem; height: 4.5rem;}
.reservation-contact__card--online img {width: 4.5rem; height: 4.5rem;}

.reservation-contact__body {flex: 1;display: flex;flex-direction: column;gap: 0.4rem;}
.reservation-contact__title {font-size: 2.4rem;font-weight: 600;}
.reservation-contact__card--kakao .reservation-contact__title {color: #371d1e;}
.reservation-contact__card--phone .reservation-contact__title {color: #4a7265;}
.reservation-contact__card--online .reservation-contact__title {color: #0b0b0b;}
.reservation-contact__desc {font-size: 1.6rem; font-weight: 500; color: var(--color-text);}
.reservation-contact__card--phone .reservation-contact__desc {font-size: 1.8rem;}
.reservation-contact__chevron {flex: none;font-size: 0; width: 1.3rem; height: 2.3rem;-webkit-mask: url('../images/common/arrow_right_rounded.svg') no-repeat center / contain;mask: url('../images/common/arrow_right_rounded.svg') no-repeat center / contain;}
.reservation-contact__card--kakao .reservation-contact__chevron {background-color: #b3a579;}
.reservation-contact__card--phone .reservation-contact__chevron {background-color: #75a696;}
.reservation-contact__card--online .reservation-contact__chevron {background-color: #a5a5a5;}

@media (max-width: 1280px) {
  .reservation-hours__title {font-size: 3.4rem;}
  .reservation-hours__list {grid-template-columns: 1fr;}
  .reservation-hours__item:nth-child(2){grid-column: auto;grid-row: auto;}

}

@media (max-width: 1024px) {
  .reservation-header__title {font-size: 3.6rem;}
  .reservation-hours__title {font-size: 2.4rem;}

  .reservation-inner {flex-direction: column;gap: 3.2rem;}
  .reservation-main {max-width: 100%; width: 100%;}
  .reservation-contact {flex-direction: row-reverse; max-width: 100%; width: 100%; gap: 1.6rem;}
  .reservation-contact__card {flex: 1;flex-direction: column;align-items: center;justify-content: flex-start;height: auto;padding: 3.2rem 0 0 0;gap: 1.6rem;text-align: center;overflow: hidden;}
  .reservation-contact__body {align-items: center;text-align: center;}
  .reservation-contact__chevron {display: none;}
  .reservation-contact .reservation-contact__more {display: flex !important;align-items: center;justify-content: center;gap: 0.4rem;width: 100%;padding: 1.6rem 0;font-size: 1.8rem;font-weight: 400;color: #747474;border-top: 2px solid #fff;}
  .reservation-contact__card--phone .reservation-contact__more {color: #4a7265;}
  .reservation-contact__card--kakao .reservation-contact__more {color: #371d1e;}
}

@media (max-width: 768px) {
  .reservation-section {padding: clamp(8rem, 20.83vw, 16rem) 0 clamp(5rem, 13.02vw, 10rem);}
  .reservation-inner {gap: clamp(2.15rem, 5.6vw, 4.3rem);}
  .reservation-header__title {font-size: clamp(2.5rem, 6.51vw, 5rem);}
  .reservation-section .section-description {font-size: clamp(1.3rem, 3.39vw, 2.6rem);}
  .reservation-main .consult-form-card {margin-top: clamp(1.5rem, 3.91vw, 3rem);}
  .reservation-hours {margin-top: clamp(2.5rem, 6.51vw, 5rem); padding-top: clamp(2.5rem, 6.51vw, 5rem); border-top: 1px solid rgb(188 183 180 / 0.6);}
  .reservation-hours__title {display: none;}
  .reservation-hours__list {margin-top: 0;}
  .reservation-hours__item dt {font-size: clamp(1.2rem, 3.8vw, 2.2rem); width: 30%;}
  .reservation-hours__item dd {font-size: clamp(1.2rem, 3.8vw, 2.2rem);}
  .reservation-hours__item dd + dd {margin-top: 0.3rem;}
  .reservation-contact {gap: clamp(1rem, 2.6vw, 2rem);}
  .reservation-contact__card {height: auto; padding: clamp(1.5rem, 3.91vw, 3rem) clamp(0.5rem, 1.3vw, 1rem) 0; gap: clamp(0.9rem, 2.34vw, 1.8rem);}
  .reservation-contact__icon {width: clamp(4.6rem, 11.98vw, 9.2rem); height: clamp(4.6rem, 11.98vw, 9.2rem);}
  .reservation-contact__icon img {width: clamp(2.05rem, 5.34vw, 4.1rem); height: clamp(1.85rem, 4.82vw, 3.7rem);}
  .reservation-contact__card--online img {width: clamp(1.95rem, 5.08vw, 3.9rem); height: clamp(1.95rem, 5.08vw, 3.9rem);}
  .reservation-contact__card--phone img {width: clamp(1.85rem, 4.82vw, 3.7rem); height: clamp(1.85rem, 4.82vw, 3.7rem);}
  .reservation-contact__title {font-size: clamp(1.6rem, 4vw, 2.4rem);}
  .reservation-contact__desc {font-size: clamp(1.2rem, 3.5vw, 1.8rem);}
  .reservation-contact__card--phone .reservation-contact__desc {font-size: clamp(1.3rem, 3.6vw, 2.2rem); letter-spacing: -0.09rem;}
  .reservation-contact .reservation-contact__more {padding: clamp(0.9rem, 2.34vw, 1.8rem) 0; font-size: clamp(1.2rem, 3vw, 1.8rem); border-width: clamp(0.1rem, 0.26vw, 0.2rem);}
}

/* ==========================================================================
   Location (.location-section)
   ========================================================================== */
.location-section {padding: 9.5rem 0;background: var(--color-text); width: 100%; position: relative;}
.location-section::before {content: ''; width: 100%; height: 100%; display: block; background: url("../images/common/ft_bg.png");opacity: 0.3; z-index: 0; position: absolute; top: 0; left: 0; pointer-events: none;}
.location-inner {position: relative; z-index: 1; display: flex;align-items: flex-start; justify-content: space-between;gap: 10rem; overflow: hidden;}
.location-info {flex: 1;}
.location-info__title {color: var(--white);margin-bottom: 3rem; font-weight: 700;}

.location-info__list {display: flex;flex-direction: column;gap: 3rem;}

/* 모바일 지도 버튼 간격 (dl 밖에 있어 따로 지정) */
.location-info > .mo-only {margin-top: 3rem;}
.location-info__row {display: flex;align-items: flex-start;gap: 5rem;font-size: 1.8rem;line-height: 1.6;}
.location-info__row dt {flex: 0 0 8rem;font-weight: 600;color: #c6c6c6;}
.location-info__row dd {color: var(--white);}
.location-info__row dd a {color: inherit;}

.location-links {display: flex;gap: 1rem; margin-top: 1.7rem;}
.location-links__btn {display: inline-flex;align-items: center;justify-content: center;padding: 0 2.5rem; height: 4.4rem; border: 2px solid var(--white);border-radius: 0.6rem;font-size: 1.4rem;color: var(--white);text-shadow: 0 0 9px rgba(0, 0, 0, 0.79); transition: border-color 0.2s ease;}
.location-links__btn:hover, .location-links__btn:focus-visible {border-color: var(--white);}

.location-info__list--contact{margin-top: 3rem;}
.location-info__list--contact .location-info__row {align-items: center;}
.location-info__list--contact .location-info__row dd,
.location-info__list--contact .location-info__row dd a {display: flex;align-items: center;gap: 0.8rem;font-size: 3rem;font-weight: 700;color: var(--white);}
.location-info__list--contact .location-info__row:last-child dd,
.location-info__list--contact .location-info__row:last-child dd a {color: #c6c6c6; font-size: 1.8rem; font-weight: 400;}
.location-info__kakao-icon {flex: none;display: inline-flex;width: 3.7rem;height: 3.7rem;}
.location-info__kakao-icon img {width: 100%;height: 100%;object-fit: contain;}

.location-map {position: relative; flex: 1.1; height: 40rem;overflow: hidden;background: #2c2c2c;}

@media (max-width: 1024px) {
  .location-inner {flex-direction: column;gap: 3.2rem;}
  .location-info {max-width: 100%; width: 100%;}
  .location-map {flex: none;width: 100%;height: 32rem;}
}

@media (max-width: 768px) {
  .location-section {padding: clamp(5rem, 13.02vw, 10rem) 0 0;}
  .location-inner {gap: clamp(3.5rem, 9.11vw, 7rem); padding: 0;}
  .location-info {padding: 0 clamp(2rem, 5.21vw, 4rem);}
  .location-info__list {gap: clamp(0.5rem, 1.3vw, 1rem);}
  .location-info > .mo-only {margin-top: clamp(0.5rem, 1.3vw, 1rem);}
  .location-info__title {font-size: clamp(3rem, 7.81vw, 6rem); margin-bottom: clamp(0.5rem, 1.3vw, 1rem);}
  .location-info__row {font-size: clamp(1.2rem, 3.5vw, 2.3rem); gap: 0; letter-spacing: -0.05rem;}
  .location-info__row dt {width: 20%; flex: unset;}
  .location-links {gap: clamp(1rem, 2.6vw, 2rem); margin-top: clamp(0.75rem, 1.95vw, 1.5rem);}
  .location-links__btn {flex: 1; height: clamp(4rem, 9.11vw, 7rem); font-size: clamp(1.2rem, 3.5vw, 2rem); font-weight: 300; border-width: clamp(0.1rem, 0.26vw, 0.2rem); border-radius: clamp(0.25rem, 0.65vw, 0.5rem);}
  .location-info__list--contact{margin-top: clamp(1rem, 2.6vw, 2rem);}
  .location-info__list--contact .location-info__row dd a {font-size: clamp(2.2rem, 5.73vw, 4.4rem);}
  .location-info__list--contact .location-info__row:last-child dd a {font-size: clamp(1.2rem, 3.5vw, 2.3rem);}
  .location-info__kakao-icon {width: clamp(2.6rem, 6.77vw, 5.2rem); height: clamp(2.6rem, 6.77vw, 5.2rem);}
  .location-map {height: clamp(21.95rem, 57.16vw, 43.9rem);}
}


/* ==========================================================================
   상담 신청 폼 카드 (.consult-form-card) — 전 페이지 공통
   하단 간편 예약(전 페이지)과 상담신청 페이지가 같이 쓴다. 희망 시술은
   시술 선택 팝업(.procedure-modal, js/common/procedure-modal.js)으로 고른다.
   input.consult-form__field-input 이 공통 input 규칙(같은 우선순위)을 덮어야 해서
   파일 맨 끝에 둔다.
   ========================================================================== */
.consult-form-card {flex: 1; max-width: 58rem;}
.consult-form-card__title {font-size: 3.2rem; font-weight: 500; color: var(--black); margin-bottom: 2.4rem;}
.consult-form__field {display: flex; align-items: center; gap: 3.6rem; margin-bottom: 1rem; padding: 0 2rem; height: 5.2rem; border: 1px solid rgb(127 127 127 / 0.76); border-radius: 0.5rem; background: var(--white);}
.consult-form__field-label {width: 7.5rem; flex: none; font-size: 1.6rem; font-weight: 500; color: var(--black);}
input.consult-form__field-input {flex: 1; min-width: 0; width: auto; padding: 0; border: none; border-radius: 0; background: transparent; font-size: 1.6rem;}
.consult-form__field-control {flex: 1; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; font-size: 1.6rem; color: var(--color-muted-lighter); text-align: left;}
.consult-form__field-control.has-value {color: var(--color-text);}
.consult-form__field-control span {flex: 1; min-width: 0; word-break: keep-all;}
.consult-form__field-control svg {flex: none; width: 1.4rem; height: 1.4rem; margin-top: 0.3rem; color: var(--color-muted-sub);}
.consult-form__actions {display: flex; gap: 1.2rem; margin-top: 2rem;}
.consult-form__actions .btn {flex: 1; padding: 0; font-weight: 500; color: var(--black); background: var(--white)}
.consult-form__actions .btn:hover, .consult-form__actions .btn:focus-visible {border-color: var(--color-primary); color: var(--color-primary);}
.consult-form__agree {display: flex; align-items: center; gap: 4.5rem; padding: 2.5rem 0 3rem; border-bottom: 1px solid var(--black); margin-bottom: 3rem;}
.consult-form__agree-item {align-items: center;}
.consult-form__agree-item label{border-bottom: 1px solid var(--color-text)}
.consult-form__submit {width: 100%; height: 6.2rem; border-radius: 0.5rem; background: var(--black); color: var(--white); font-size: 1.8rem; font-weight: 700;}

@media (max-width: 1024px) {
  .consult-form-card {max-width: none;}
  .consult-form-card__title {font-size: 2.4rem;}
  /* 상담 폼: 769~1024는 PC 크기, 희망 시술 칸은 높이 자동 */
  .consult-form__field:has(.consult-form__field-control) {height: auto; min-height: 5.2rem; padding-top: 1.4rem; padding-bottom: 1.4rem;}
}

@media (max-width: 768px) {
  /* 폼 카드 (768 기준: 입력칸/버튼 9.6rem, 제출 10.4rem) */
  .consult-form-card__title {margin-bottom: clamp(2.4rem, 6.25vw, 4.8rem); font-size: clamp(2.4rem, 6.25vw, 4.8rem);}
  .consult-form__field {gap: clamp(3rem, 7.81vw, 6rem); height: clamp(4.8rem, 12.5vw, 9.6rem); margin-bottom: clamp(0.9rem, 2.34vw, 1.8rem); padding: 0 clamp(1.5rem, 3.91vw, 3rem); border-radius: clamp(0.25rem, 0.65vw, 0.5rem);}
  .consult-form__field-label {width: clamp(6.5rem, 16.93vw, 13rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  input.consult-form__field-input {font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .consult-form__field:has(.consult-form__field-control) {min-height: clamp(4.8rem, 12.5vw, 9.6rem); padding-top: clamp(1.15rem, 2.99vw, 2.3rem); padding-bottom: clamp(1.15rem, 2.99vw, 2.3rem);}
  .consult-form__field-control {font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .consult-form__actions {gap: clamp(0.65rem, 1.69vw, 1.3rem); margin-top: clamp(1rem, 2.6vw, 2rem);}
  .consult-form__actions .btn {font-size: clamp(1.4rem, 3.65vw, 2.8rem); height: clamp(4.8rem, 12.5vw, 9.6rem);}
  .consult-form__agree {gap: clamp(1.5rem, 3.91vw, 3rem); padding: clamp(2.4rem, 6.25vw, 4.8rem) 0 clamp(2.8rem, 7.29vw, 5.6rem); margin-bottom: clamp(2.8rem, 7.29vw, 5.6rem); justify-content: space-between; flex-wrap: wrap;}
  .consult-form__agree-item {gap: clamp(0.4rem, 1.04vw, 0.8rem); font-size: clamp(1.3rem, 3.5vw, 2.2rem);}
  .consult-form__submit {height: clamp(5.2rem, 13.54vw, 10.4rem); font-size: clamp(1.6rem, 4.17vw, 3.2rem); border-radius: clamp(0.5rem, 1.3vw, 1rem);}
}