/* =========================================================
   아뜰리에치과 - 공통 스타일
   컬러/사이즈 값은 Figma 시안에서 MCP로 읽어 채운다.
   ========================================================= */

:root {
  /* 컬러 (Figma 시안) */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text: #3c3c3c;    /* 본문/하위메뉴 텍스트 */
  --color-text2: #3a3a3a;   /* 철학 문단 텍스트 */
  --color-grey-20: #333333; /* 푸터 텍스트 */
  --color-grey-62: #9d9d9d; /* 슬라이드 번호 */
  --color-grey-87: #dddddd; /* 푸터 구분선 */
  --color-grey-92: #e6e9ed; /* 진행바 트랙 */
  --color-grey-95: #f2f2f2; /* 버튼 배경 */
  --color-point: #d1ba9c;   /* 포인트(로그인 텍스트) */

  /* 사이즈 */
  --header-height: 80px;
  --header-pad-x: 63px;
  --hero-radius: 62px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Pretendard", sans-serif;
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* =========================================================
   헤더 (header.header) - Figma 23:1747
   ========================================================= */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: var(--color-white);
  z-index: 100;
}

.header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--header-pad-x);
}

/* 로고 */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo img {
  height: 40px;
  width: auto;
}

/* GNB depth1 */
.gnb__depth1 {
  display: flex;
  align-items: center;
  height: var(--header-height);
}

.gnb__item {
  position: relative;
  height: 100%;
}

.gnb__link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 31.5px;
  font-size: 17px;
  font-weight: 600;
  line-height: 28.9px;
  color: var(--color-black);
  white-space: nowrap;
}

/* GNB depth2 (하위메뉴) — 전 페이지 공통으로 숨김 처리 (마크업은 유지) */
.gnb__depth2 {
  display: none;             /* 드롭다운 비노출 */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 156px;
  padding: 20px 0 9px;
  background: var(--color-white);
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* hover 노출 동작 비활성 (숨김 유지) */
.gnb__item:hover .gnb__depth2 {
  display: none;
}

.gnb__depth2 li {
  width: 100%;
}

.gnb__depth2 a {
  display: block;
  padding: 8px 20px 9px;
  font-size: 15.3px;
  font-weight: 400;
  line-height: 26px;
  color: var(--color-text);
  text-align: center;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.gnb__depth2 a:hover {
  color: var(--color-black);
}

/* 우측 유틸 */
.header__util {
  flex-shrink: 0;
}

.login-btn {
  display: inline-block;   /* a 태그: 기존 button과 동일 박스 유지 */
  line-height: normal;     /* body 1.5 상속 방지 (button 기본값과 동일) */
  text-align: center;
  text-decoration: none;
  padding: 9.1px 15.6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-point);
  background: var(--color-grey-95);
  border: none;
  border-radius: 26px;
  cursor: pointer;
  white-space: nowrap;
}

/* =========================================================
   히어로 (atelier-hero-1) - Figma 23:2016
   ========================================================= */

.hero {
  /* 고정 헤더 높이만큼 아래로 내림 (시안: 헤더 바로 아래 y=80) */
  padding-top: var(--header-height);
}

.hero__inner {
  padding: 0 var(--header-pad-x);
}

.hero__img {
  display: block;
  width: 100%;
  aspect-ratio: 1794 / 802;
  object-fit: cover;
  border-radius: var(--hero-radius);
}

/* 히어로 카피 (1920 전용, 모바일은 기존처럼 이미지만) */
.hero__media {
  position: relative;
}
.hero__copy {
  display: none;
}

@media (min-width: 769px) {
  /* 좌측 하단 가독성용 은은한 그라데이션 (최대 0.25) */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--hero-radius);
    background: linear-gradient(15deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.12) 35%, rgba(0, 0, 0, 0) 65%);
    pointer-events: none;
  }
  .hero__copy {
    position: absolute;
    left: 110px;
    bottom: 100px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--color-white);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
  }
  .hero__copy-eng {
    font-family: "Cormorant Garamond", serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 1;
  }
  .hero__copy-kor {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.5;
  }
}

/* =========================================================
   Atelier Philosophy / 원장 소개 - Figma 26:840
   ========================================================= */

/* 1920 데스크탑 전용: 시안 좌표를 그대로 절대배치 (반응형 없음) */
.philo {
  position: relative;
  height: 944px;         /* 시안 섹션 높이 */
  margin-top: 162px;     /* 시안: 히어로 하단~섹션 상단 간격 */
  overflow-x: clip;    /* 1920 기준 좌표가 좁은 화면에서 넘쳐도 가로 스크롤 방지 */
  background: var(--color-white) url("../images/philo-bg.jpg") center / cover no-repeat;
}

.philo__inner {
  position: relative;
  width: 1920px;
  height: 944px;
  margin: 0 auto;
}

/* 좌측 철학 텍스트 (시안 x170 y55 w537) */
.philo__intro {
  position: absolute;
  left: 170px;
  top: 55px;
  width: 537px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.philo__eng {
  font-family: "Sorts Mill Goudy", serif;
  font-size: 50px;
  line-height: normal;
  color: var(--color-point);
}
.philo__title {
  font-size: 30px;
  font-weight: 400;
  line-height: normal;
  color: var(--color-text2);
}
.philo__desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--color-text2);
}

/* 우측 원장 정보 (시안 x955 y336 w426) */
.philo__info {
  position: absolute;
  left: 955px;
  top: 336px;
  width: 426px;
  display: flex;
  flex-direction: column;
  gap: 19.5px;
}
.philo__info-eng {
  font-size: 20px;
  font-weight: 600;
  line-height: 34px;
  color: var(--color-point);
}
.philo__name {
  font-size: 45px;
  font-weight: 400;
  line-height: 76.5px;
  color: var(--color-text);
}
.philo__name strong {
  font-weight: 700;
  margin-right: 18px;
}

.philo__career {
  display: flex;
  flex-direction: column;
  gap: 3.6px;
  padding-top: 16.5px;
}
.philo__career li {
  position: relative;
  padding-left: 12.6px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30.6px;
  color: var(--color-text);
}
.philo__career li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10.8px;
  width: 3.59px;
  height: 3.59px;
  border-radius: 50%;
  background: var(--color-black);
}

.philo__more {
  align-self: flex-start;
  margin-top: 16.5px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 16px 23.5px;
  background: var(--color-grey-95);
  border: 1px solid var(--color-grey-95);
  border-radius: 30px;
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 25.5px;
  color: var(--color-point);
}
.philo__more-arrow {
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--color-point);
  border-right: 1.5px solid var(--color-point);
  transform: rotate(45deg);
}

/* 원장 사진 (시안 x1275 y186 w530, 아치는 PNG 자체) */
.philo__photo {
  position: absolute;
  left: 1275px;
  top: 186px;
  width: 530px;
  z-index: 1;   /* 정보 위로 살짝 겹침 */
}
.philo__photo img {
  display: block;
  width: 100%;
  /* doctor.png 흰 배경(불투명)을 사진 속 캡슐 타원 1~2px 안쪽으로 잘라냄 */
  clip-path: inset(3.687% 1.832% 2.458% 6.034% round 46.067% / 37.752%);
}

/* =========================================================
   Why Atelier (진료실 슬라이드) - Figma 24:2300  [1920 정적]
   ========================================================= */
.why {
  position: relative;
  margin-top: -56px;     /* 시안 why_sect y=1932 (철학 박스와 56px 겹침) */
  overflow-x: clip;    /* 우측 peek 썸네일 1920 넘침 클립 */
}
.why__inner {
  position: relative;
  width: 1920px;
  height: 990px;         /* 시안 섹션 높이 990.12 */
  margin: 0 auto;
}

/* 타이틀 (시안 left242 top224) */
.why__head {
  position: absolute;
  left: 242px;
  top: 224px;
}
.why__eng {
  font-family: "Marcellus", serif;
  font-size: 23px;
  line-height: 39.1px;
  color: var(--color-point);
}
.why__tit {
  margin-top: 32.2px;
  font-size: 45px;
  font-weight: 700;
  line-height: 63px;
  color: var(--color-text);
}

/* 활성 슬라이드 영역 (시안 left242 top484) */
.why__main {
  position: absolute;
  left: 242px;
  top: 484px;
  width: 971px;
  height: 504.91px;
}
.why__active {           /* Swiper 컨테이너 */
  width: 971px;
  height: 504.91px;
}
.why__slide {            /* 한 슬라이드 = 이미지 + 텍스트 */
  display: flex;
  gap: 48.56px;
  height: 100%;
}
.why__img {
  flex-shrink: 0;
  width: 388.39px;
  height: 504.91px;
  border-radius: 9px;
  overflow: hidden;
}
.why__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why__txt {
  width: 534.05px;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 21.6px;
}
.why__num {
  font-size: 18px;
  font-weight: 700;
  line-height: 30.6px;
  color: var(--color-grey-62);
}
.why__slide-tit {
  padding-top: 13.6px;
  font-size: 36px;
  font-weight: 700;
  line-height: 50.4px;
  color: var(--color-text);
}
.why__slide-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 30.6px;
  color: var(--color-text);
}

/* 좌우 화살표 (시안 left436.95 bottom0, 54px 원형) */
.why__arrows {
  position: absolute;
  left: 436.95px;
  bottom: 0;
  z-index: 2;            /* 슬라이드 위로 */
  display: flex;
  gap: 15px;
}
.why__arrow {
  position: relative;
  width: 54px;
  height: 54px;
  border: 1px solid var(--color-black);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.why__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid var(--color-black);
  border-right: 1.5px solid var(--color-black);
}
.why__arrow--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.why__arrow--next::before { transform: translate(-65%, -50%) rotate(45deg); }

/* 우측 peek 썸네일 (시안 left1248.77 top484) */
.why__peek {
  position: absolute;
  left: 1248.77px;
  top: 484px;
  display: flex;
  gap: 20px;
}
.why__peek-item {
  flex-shrink: 0;
  width: 256.39px;
  height: 504.91px;
  border-radius: 9px;
  overflow: hidden;
}
.why__peek-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   Atelier Dental Clinic (clinic_sect) - Figma 24:2281  [1920 정적]
   ========================================================= */
.clinic {
  position: relative;
  margin-top: 189px;     /* 시안 clinic_sect y=3111 (why 박스 하단 2922 + 189) */
  overflow-x: clip;
}
.clinic__inner {
  position: relative;
  width: 1920px;
  height: 790.36px;      /* 시안 섹션 높이 */
  margin: 0 auto;
}

/* 좌측 텍스트 (시안 left242, 세로중앙 top≈298) */
.clinic__text {
  position: absolute;
  left: 242px;
  top: 298px;
  display: flex;
  flex-direction: column;
}
.clinic__eng {
  font-family: "Marcellus", serif;
  font-size: 23px;
  line-height: 39.1px;
  color: var(--color-point);
  white-space: nowrap;
}
.clinic__tit {
  margin-top: 32.28px;
  font-size: 45px;
  font-weight: 700;
  line-height: 63px;
  color: var(--color-text);
  white-space: nowrap;
}
.clinic__desc {
  margin-top: 17.1px;
  display: flex;
  flex-direction: column;
  gap: 17.095px;
}
.clinic__desc p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30.6px;
  color: var(--color-text);
  white-space: nowrap;
}

/* 우측 이미지 (시안 top225) */
.clinic__img {
  position: absolute;
  top: 225px;
  border-radius: 27px;
  overflow: hidden;
}
.clinic__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.clinic__img--main {
  left: 888.2px;
  width: 565.36px;
  height: 565.36px;
}
.clinic__img--side {
  left: 1480.56px;
  width: 197.44px;
  height: 565.36px;
}

/* =========================================================
   Atelier Equipment (equip_sect) - Figma 24:2541  [1920 정적]
   ========================================================= */
.equip {
  position: relative;
  margin-top: 293.64px;   /* 시안 equip_sect y=4195 (clinic 박스 하단 3901.36 + 293.64) */
  overflow-x: clip;
}
.equip__inner {
  position: relative;
  width: 1920px;
  height: 726.47px;       /* 시안 섹션 높이 */
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(to right, #cdb8a4 0%, rgba(195, 149, 105, 0.2) 100%);   /* 좌(글씨) #CDB8A4 → 우 크림 베이지(implant.css .im-tb__box 색) */
}

/* 좌측 제목 (흰색, 시안 left242 top224) */
.equip__title {
  position: absolute;
  left: 242px;
  top: 224px;
  display: flex;
  flex-direction: column;
}
.equip__eng {
  font-family: "Marcellus", serif;
  font-size: 23px;
  line-height: 39.1px;
  color: var(--color-white);
  white-space: nowrap;
}
.equip__tit {
  margin-top: 32.28px;
  font-size: 45px;
  font-weight: 700;
  line-height: 63px;
  color: var(--color-white);
  white-space: nowrap;
}
.equip__txt {
  margin-top: 16.8px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30.6px;
  color: var(--color-white);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(90, 70, 55, 0.3);   /* 밝은 배경 위 본문 가독성 */
}

/* View More 버튼 (브라운 테두리, hover 시 브라운 배경·흰 글씨, 시안 left1532.72 top443.47) */
.equip__btn {
  position: absolute;
  left: 1532.72px;
  top: 443.47px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 16px 23.5px;
  border: 1px solid #8c735c;
  border-radius: 30px;
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 25.5px;
  color: #8c735c;
  transition: background-color 0.25s, color 0.25s;
}
.equip__btn:hover {
  background: #8c735c;
  color: var(--color-white);
}
.equip__btn-arrow {
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;    /* 글씨색 따라감 (hover 시 흰색) */
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* 하단 대형 장식 워드마크 (시안 우하단, 배경보다 아주 살짝 진한 베이지, 거의 안 보이게) */
.equip__bgtext {
  position: absolute;
  right: -1.34px;
  bottom: 0.37px;
  font-family: "Marcellus", serif;
  font-size: 134.4px;
  line-height: 147.84px;
  color: rgba(150, 110, 75, 0.06);
  white-space: nowrap;
}

/* =========================================================
   Atelier Location (loca_sect) - Figma 24:2608  [1920 정적+Swiper]
   ========================================================= */
.loca {
  position: relative;
  overflow-x: clip;
}
.loca__inner {
  position: relative;
  width: 1920px;
  height: 956.88px;      /* 시안 섹션 높이 */
  margin: 0 auto;
}

/* 좌측 제목 (시안 left242 top224) */
.loca__title {
  position: absolute;
  left: 242px;
  top: 224px;
  display: flex;
  flex-direction: column;
}
.loca__eng {
  font-family: "Marcellus", serif;
  font-size: 23px;
  line-height: 39.1px;
  color: var(--color-point);
  white-space: nowrap;
}
.loca__tit {
  margin-top: 32.28px;
  font-size: 45px;
  font-weight: 700;
  line-height: 63px;
  color: var(--color-text);
  white-space: nowrap;
}
.loca__txt {
  margin-top: 16.8px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30.6px;
  color: var(--color-text);
  white-space: nowrap;
}

/* 우측 페이징 (시안 left1543 top438.47, 63px 원형) */
.loca__paging {
  position: absolute;
  left: 1543px;
  top: 438.47px;
  display: flex;
  gap: 9px;
}
.loca__nav {
  position: relative;
  width: 63px;
  height: 63px;
  border: 1px solid var(--color-black);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.loca__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 1.5px solid var(--color-black);
  border-right: 1.5px solid var(--color-black);
}
.loca__prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.loca__next::before { transform: translate(-70%, -50%) rotate(45deg); }

/* 갤러리 슬라이더 (시안 left242 top564.47, w1678 h331.91) */
.loca__slider {
  position: absolute;
  left: 242px;
  top: 564.47px;
  width: 1678px;
  height: 331.91px;
  overflow: hidden;
}
.loca__slide { width: 510.63px; }
.loca__img {
  width: 100%;
  height: 331.91px;
  border-radius: 9px;
  overflow: hidden;
}
.loca__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   Footer (div#footer) - Figma 32:1490  [1920 정적]
   ========================================================= */
.footer {
  position: relative;
  margin-top: 184.12px;   /* 시안 footer y=6062 (loca 박스 하단 5877.88 + 184.12) */
  overflow-x: clip;
}
/* 메인(index, body.page-main) 전용 푸터 상단 여백. 모바일(≤768) 64px 유지 위해 데스크탑 한정 */
@media (min-width: 769px) {
  .page-main .footer {
    margin-top: 120px;
  }
}
.footer__inner {
  position: relative;
  width: 1920px;
  height: 485.99px;       /* 시안 섹션 높이 */
  margin: 0 auto;
}

/* 상단 구분선 (1600×1px, 중앙) */
.footer__divider {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1600px;
  height: 1px;
  background: var(--color-grey-87);
}

/* 좌측 (시안 left173 top120) */
.footer__left {
  position: absolute;
  left: 173px;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 49.04px;
}
.footer__logo img {
  display: block;
  height: 78px;
  width: auto;
}
.footer__copyright-wrap {
  display: flex;
  flex-direction: column;
  gap: 14.955px;
}
.footer__addr {
  font-family: "Inter", "Pretendard", sans-serif;
  font-size: 15.9px;
  line-height: 28.8px;
  color: var(--color-grey-20);
  white-space: nowrap;
}
.footer__copyright {
  font-size: 12px;
  line-height: 16.8px;
  color: var(--color-grey-20);
  white-space: nowrap;
}

/* 우측 (시안 left1380 top241, 우측 정렬) */
.footer__right {
  position: absolute;
  left: 1380px;
  top: 241px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: flex-end;
}

/* SNS 아이콘 (스프라이트 42×175) */
.footer__sns {
  display: flex;
}
.footer__sns-item {
  position: relative;
  padding: 0 20px;
}
.footer__sns-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.footer__sns-item:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.footer__sns-icon {
  display: block;
  width: 41.99px;
  height: 35px;
  background-image: url("../images/sns.png");
  background-repeat: no-repeat;
  background-size: 41.99px 175px;
  opacity: 0.7;
}

/* 정책 링크 */
.footer__policy {
  display: flex;
}
.footer__policy a {
  position: relative;
  padding: 10px 16px;
  font-family: "Inter", "Pretendard", sans-serif;
  font-size: 16px;
  line-height: 16px;
  color: var(--color-grey-20);
}
.footer__policy a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--color-grey-87);
}
.footer__policy a:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--color-grey-87);
}

/* 햄버거 버튼: 데스크탑에선 숨김 (모바일 미디어쿼리에서 노출) */
.nav-burger {
  display: none;
}

/* =========================================================
   모바일 반응형 (≤768px)
   - PC(1920 절대좌표) 레이아웃은 건드리지 않음
   - absolute 해제 → 1열 세로 스택, 고정 px폭 → 100%
   - 가로 스크롤 방지
   ========================================================= */
@media (max-width: 768px) {
  /* hidden 은 body 를 별도 스크롤 영역(overflow-y auto)으로 만듦 → clip 으로 스크롤 주체는 html 하나만 */
  html,
  body {
    overflow-x: clip;
  }

  :root {
    --header-height: 60px;
    --header-pad-x: 20px;
  }

  /* ---------- 헤더: 햄버거 + 슬라이드 메뉴 ---------- */
  .header__in {
    gap: 12px;
  }
  .logo {
    margin-right: auto;   /* 로고 좌측, 나머지 우측으로 밀기 */
  }
  .logo img {
    height: 30px;
  }

  /* GNB → 우측 슬라이드 패널 */
  .gnb {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: 74%;
    max-width: 300px;
    height: calc(100vh - var(--header-height));
    background: var(--color-white);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    z-index: 110;
  }
  /* 그림자는 열렸을 때만 (닫힌 패널 그림자가 화면 오른쪽 끝에 회색 띠로 번지던 문제) */
  .nav-toggle:checked ~ .gnb {
    transform: translateX(0);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.08);
  }
  /* 메뉴 열린 동안 뒤 페이지 스크롤 잠금 */
  html:has(.nav-toggle:checked) {
    overflow: hidden;
  }

  .gnb__depth1 {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 8px 0;
  }
  .gnb__item {
    height: auto;
  }
  .gnb__link {
    height: auto;
    padding: 16px 24px;
    font-size: 16px;
    border-bottom: 1px solid var(--color-grey-95);
  }
  /* 슬라이드 메뉴 내부 2뎁스는 계속 숨김 */
  .gnb__depth2 {
    display: none;
  }

  /* 로그인 버튼: 톱바에 유지, 살짝 축소 */
  .login-btn {
    padding: 8px 13px;
    font-size: 12px;
  }

  /* 햄버거 버튼 (라벨) */
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    /* z-index 없음: 아래 ::before 바깥 영역이 패널(110) 아래·본문 위에 오도록 쌓임 맥락을 만들지 않음 */
  }
  /* 패널 바깥(헤더 아래 전체)을 덮는 투명 영역 = 햄버거 라벨의 일부 → 누르면 메뉴 닫힘 */
  .nav-toggle:checked ~ .nav-burger::before {
    content: "";
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 105;
  }
  .nav-burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-black);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  /* 열린 상태: X 모양 */
  .nav-toggle:checked ~ .header__util ~ .nav-burger span:nth-child(1),
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ---------- 히어로 ---------- */
  .hero__inner {
    padding: 0 var(--header-pad-x);
  }
  .hero__img {
    border-radius: 20px;
  }

  /* ---------- Atelier Philosophy ---------- */
  .philo {
    height: auto;
    margin-top: 56px;
    padding: 48px 0;
    background-size: cover;
  }
  .philo__inner {
    width: 100%;
    height: auto;
  }
  .philo__intro {
    position: static;
    width: auto;
    padding: 0 20px;
    gap: 14px;
  }
  .philo__eng {
    font-size: 32px;
  }
  .philo__title {
    font-size: 22px;
  }
  .philo__desc {
    font-size: 15px;
    line-height: 25px;
    word-break: keep-all;   /* 한두 글자만 다음 줄로 넘어가지 않게 어절 단위 줄바꿈 */
  }
  .philo__desc br {
    display: none;          /* PC 용 강제 줄바꿈 무시 */
  }
  .philo__info {
    position: static;
    width: auto;
    padding: 0 20px;
    margin-top: 40px;
    gap: 14px;
  }
  .philo__info-eng {
    font-size: 17px;
    line-height: 28px;
  }
  .philo__name {
    font-size: 30px;
    line-height: 1.4;
  }
  .philo__name strong {
    margin-right: 12px;
  }
  .philo__career li {
    font-size: 15px;
    line-height: 26px;
  }
  .philo__career li::before {
    top: 9px;
  }
  .philo__photo {
    position: static;
    width: 100%;
    max-width: 340px;
    margin: 28px auto 0;
  }

  /* ---------- Why Atelier (Swiper: 1장씩) ---------- */
  .why {
    margin-top: 48px;
  }
  .why__inner {
    width: 100%;
    height: auto;
    padding: 0 20px;
  }
  .why__head {
    position: static;
  }
  .why__eng {
    font-size: 18px;
  }
  .why__tit {
    margin-top: 16px;
    font-size: 26px;
    line-height: 1.35;
  }
  .why__main {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 28px;
  }
  .why__active {
    width: 100%;
    height: auto;
  }
  .why__slide {
    flex-direction: column;
    gap: 20px;
    height: auto;
  }
  .why__img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .why__txt {
    width: 100%;
  }
  .why__slide-tit {
    padding-top: 4px;
    font-size: 22px;
    line-height: 1.35;
  }
  .why__slide-desc {
    font-size: 15px;
    line-height: 25px;
  }
  .why__arrows {
    position: static;
    margin-top: 20px;
  }
  /* 우측 peek 썸네일은 모바일에서 숨김 */
  .why__peek {
    display: none;
  }

  /* ---------- Atelier Dental Clinic ---------- */
  .clinic {
    margin-top: 56px;
  }
  .clinic__inner {
    width: 100%;
    height: auto;
    padding: 0 20px;
  }
  .clinic__text {
    position: static;
  }
  .clinic__eng {
    white-space: normal;
  }
  .clinic__tit {
    margin-top: 16px;
    font-size: 26px;
    line-height: 1.35;
    white-space: normal;
  }
  .clinic__desc p {
    font-size: 15px;
    line-height: 25px;
    white-space: normal;
    word-break: keep-all;
  }
  .clinic__desc br {
    display: none;          /* PC 용 강제 줄바꿈 무시 (br 앞 공백으로 어절 구분 유지) */
  }
  .clinic__img {
    position: static;
    width: 100% !important;
    height: auto !important;
    margin-top: 20px;
  }
  .clinic__img img {
    height: auto;
  }
  /* 좁은 세로 장식 사진: 폭 100% 로 늘면 화면 1개 이상 높이를 차지 → 모바일 숨김 */
  .clinic__img--side {
    display: none;
  }

  /* ---------- Atelier Equipment (CTA 배너) ---------- */
  .equip {
    margin-top: 56px;
  }
  .equip__inner {
    width: 100%;
    height: auto;
    padding: 48px 20px;
  }
  .equip__title {
    position: static;
  }
  .equip__eng {
    white-space: normal;
  }
  .equip__tit {
    margin-top: 16px;
    font-size: 26px;
    line-height: 1.35;
    white-space: normal;
  }
  .equip__txt {
    font-size: 15px;
    line-height: 25px;
    white-space: normal;
  }
  .equip__btn {
    position: static;
    margin-top: 24px;
  }
  .equip__bgtext {
    font-size: 34px;        /* 48 → 34: View More 버튼(하단 여백 48px) 아래로만 들어가게 */
    line-height: 1.1;
    right: 12px;
    bottom: 6px;
  }

  /* ---------- Atelier Location (Swiper: auto) ---------- */
  .loca {
    margin-top: 56px;
  }
  .loca__inner {
    width: 100%;
    height: auto;
    padding: 0 20px;
  }
  .loca__title {
    position: static;
  }
  .loca__eng {
    white-space: normal;
  }
  .loca__tit {
    margin-top: 16px;
    font-size: 26px;
    line-height: 1.35;
    white-space: normal;
  }
  .loca__txt {
    font-size: 15px;
    line-height: 25px;
    white-space: normal;
  }
  .loca__paging {
    position: static;
    margin-top: 24px;
  }
  .loca__nav {
    width: 48px;
    height: 48px;
  }
  .loca__slider {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 24px;
  }
  .loca__slide {
    width: 80%;
    max-width: 300px;
  }
  .loca__img {
    height: 220px;
  }

  /* ---------- Footer: 1열 세로 ---------- */
  .footer {
    margin-top: 64px;
  }
  .footer__inner {
    width: 100%;
    height: auto;
    padding: 40px 20px;
  }
  .footer__divider {
    width: 100%;
  }
  .footer__left {
    position: static;
    gap: 24px;
  }
  .footer__logo img {
    height: 56px;
  }
  .footer__addr {
    font-size: 14px;
    line-height: 24px;
    white-space: normal;
    word-break: keep-all;
  }
  /* 병원 정보: 항목마다 한 줄 (상호/주소/대표자/사업자번호/대표번호/FAX) */
  .footer__addr br,
  .footer__addr-sep {
    display: none;
  }
  .footer__addr-item {
    display: block;
  }
  .footer__copyright {
    white-space: normal;
  }
  .footer__right {
    position: static;
    align-items: flex-start;
    margin-top: 32px;
    gap: 24px;
  }
  /* SNS 5개 한 줄 (아이콘 35 → 28px, 좌우 여백 20 → 14px) */
  .footer__sns-item {
    padding: 0 14px;
  }
  .footer__sns-icon {
    zoom: 0.8;
  }
  .footer__sns-item:first-child {
    padding-left: 0;
  }
  .footer__sns-item:first-child::before {
    display: none;
  }
  /* 정책 링크: 줄바꿈돼도 줄 맨 앞 구분선은 잘라냄
     (모든 링크 왼쪽 -1px 에 구분선, 목록을 왼쪽 여백만큼 당기고 overflow 로 줄 첫 구분선 숨김) */
  .footer__policy {
    flex-wrap: wrap;
    margin-left: -16px;
    overflow: hidden;
  }
  .footer__policy a::before {
    left: -1px;
  }
}

/* =========================================================
   공통 스크롤 효과 (js/effects.js) — data-reveal 속성 기반
   제목: overflow 마스크 안에서 아래→위 / 라벨·본문·사진: fade-up / 원장: 좌우 진입
   html.js 일 때만 사전 숨김 → JS 꺼져도 글씨 보임, 동작 줄이기 설정이면 숨기지 않음
   html.js 는 effects.js 를 쓰는 페이지의 head 인라인 스크립트만 붙이므로 다른 페이지 영향 없음
   ========================================================= */
.reveal-mask {
  display: block;
  overflow: hidden;
}
.reveal-mask__in {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal-item],
  html.js [data-reveal="right"],
  html.js [data-reveal="photo"] {
    opacity: 0;
  }
  html.js [data-reveal="text"] .reveal-mask__in {
    transform: translateY(100%);
  }
}