/* =========================================================
   디자인(퍼블리싱) 페이지 공통 커스텀 CSS
   - design_head.jsp 에서 design.css(Tailwind 정적빌드) 다음에 <link> 로 로드
   - Tailwind 유틸로 표현 못하는 공통 스타일(스크롤바/호버/모달 등)의 단일 관리처
   - 페이지별 인라인 <style> 대신 여기서 공통 관리 (중복 방지)
   ---------------------------------------------------------
   ⚠ 호버 규칙 작성 규칙 (2026-08-05~)
     모바일·태블릿에는 hover 가 없어 탭하면 호버 스타일이 눌러붙는다. 그래서 이 파일과
     design.css 의 모든 `:hover` 규칙은 아래 조건으로 감싸 둔다. 새 호버 규칙도 동일하게 감쌀 것.
         @media (hover: hover) and (min-width: 1024px) { ... }
     design.css(Tailwind 빌드 결과)는 www/css/tailwind/wrap_hover.js 가 빌드 후 자동으로 감싼다.
   ⚠ 중괄호는 반드시 주석 밖에서 짝을 맞출 것. 주석 안에 닫는 `}` 가 들어가면 뒤따르는 모든
     규칙이 통째로 @media 안에 갇힌다(2026-08-05 모바일 스타일 전체 무효화 사고).
   ========================================================= */

html, body {
  overflow-x: clip !important;
}

body {
  background-color: #FFFFFF;
  color: #1A1A1A;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  overflow-x: clip !important;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }

  /* 모바일 화면 본문 텍스트 일괄 14px 조정 (제목 요소 제외, 14px 초과 모든 본문/문단/목록 14px 고정) */
  p,
  li,
  dd,
  dt,
  .hero-lead,
  .sub-hero__desc,
  .hero-desc,
  .tourx__desc,
  .subject-card__desc,
  .phil-card__desc,
  .timeline-desc,
  .doctor-card__bio,
  .doctor-card__bio p,
  .doctor-card__bio li,
  .loc-info__desc,
  .photo-bullet__desc,
  .photo-bullet,
  .facility-card__desc,
  .branch-card__phone,
  .banner-cta-text,
  .notice-title,
  .tabx__panel p,
  .tabx__panel li,
  [class*="__desc"],
  [class*="-desc"],
  [class*="__bio"],
  [class*="__lead"] {
    font-size: 14px !important;
  }

  /* 오시는 길 / 지도 정보 / 진료시간 / 예약 안내 모바일 본문 텍스트 14px 일괄 강제 */
  #map .map-panel .addr-list,
  #map .addr-phone,
  #map .addr-parking-free,
  .loc-section .addr-list,
  .map-panel .addr-list,
  .addr-list,
  .addr-list span,
  .addr-label,
  .addr-phone,
  .hours-list,
  .hours-row,
  .hours-row span,
  .hours-label,
  .hours-strong,
  .hours-value,
  .hours-gray,
  .hours-night,
  .section-side-info,
  .rsv-notes,
  .rsv-note,
  .rsv-tel__num,
  .park-note {
    font-size: 14px !important;
  }

  /* 히어로 배너 뱃지 / 키워드 알약 칩(chip-dot, info-chip) / 라벨 / 아이브로우 텍스트 12px 조정 */
  .eyebrow,
  .hero-eyebrow-text,
  .sub-hero__eyebrow-text,
  .hero-badge,
  .banner-label,
  .stat-cell__label,
  .map-eyebrow,
  .facility-card__no,
  .chip-dot,
  .info-chip,
  .device-tag,
  .keyword-tag,
  .area-tag,
  .wl-chip,
  .link-pill,
  .bty-glance-badge,
  .iv-badge__text {
    font-size: 12px !important;
  }

  /* 모바일 메인 히어로 헤드텍스트(h1) 왼쪽 여백 추가 (하단 설명글 패딩 pl-6과 정렬) */
  .hero-section .page-title {
    padding-left: 24px;
  }
}

/* 피부미용 탭메뉴(.index-strip) 모바일/PC 상단 고정(sticky) 및 스크롤 연동 액티브 스타일 */
.index-strip {
  position: sticky !important;
  top: 88px !important;
  z-index: 35 !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
@media (min-width: 1024px) {
  .index-strip {
    top: 93px !important;
  }
}
.index-strip__link {
  transition: all 0.25s ease-in-out;
}
.index-strip__link.is-active,
.index-strip__link.active {
  color: #D06398 !important;
  background-color: rgba(208, 99, 152, 0.06) !important;
}
.index-strip__link.is-active::after,
.index-strip__link.active::after {
  height: 3px !important;
  background-color: #D06398 !important;
}
.index-strip__link.is-active .index-strip__text,
.index-strip__link.active .index-strip__text {
  color: #D06398 !important;
  font-weight: 700 !important;
}
/* 모바일 화면(1023px 이하)에서 모든 기기 섹션의 이미지를 상단, 텍스트 박스를 하단에 배치 */
@media (max-width: 1023px) {
  .bty-split,
  .device-split,
  .device-dark,
  .device-row {
    display: flex !important;
    flex-direction: column !important;
  }

  .bty-media,
  .bty-media--product,
  .device-split__media,
  .device-dark__media,
  .device-row__media {
    order: 1 !important;
    width: 100% !important;
  }

  .device-split__body,
  .device-dark__body,
  .bty-split__panel,
  .device-row__body {
    order: 2 !important;
    width: 100% !important;
  }
}


/* 수액 클리닉(beauty/iv) 아이콘 전용 반응형 크기 (모바일 88px, PC 115px 고정) */
.iv-icon-box {
  width: 88px !important;
  height: 88px !important;
  max-width: 88px !important;
  max-height: 88px !important;
}
@media (min-width: 1024px) {
  .iv-icon-box {
    width: 115px !important;
    height: 115px !important;
    max-width: 115px !important;
    max-height: 115px !important;
  }
}

/* 피부질환(disease) 수액/진료과목 카드 넘버 모바일 좌상단 배치 (상단/좌측 여백 12px 동등 적용) */
@media (max-width: 767px) {
  .subject-card {
    position: relative !important;
    padding-top: 40px !important;
  }
  .subject-card__no {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: auto !important;
    text-align: left !important;
    margin: 0 !important;
  }
}

/* 백반증 치료 카드 (treat-foot) - 본문/적용부위 사이 선 제거 & 모든 카드 하단 구분선과 여백 100% 동일 적용 */
.treat-foot {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 14px !important;
}

@media (max-width: 767px) {
  .treat-foot {
    border-bottom: 1px solid #EAEAEA !important;
    padding-bottom: 28px !important;
    margin-bottom: 28px !important;
  }
}

/* 텍스트 선택 색 (기존 body 의 selection:bg-mellow-accent selection:text-white 대체) */
::selection { background-color: #D06398; color: #FFFFFF; }

/* 스크롤바 숨김 처리 */
::-webkit-scrollbar { width: 0px; height: 0px; background: transparent; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 호버 효과 모음 */
.row-hover { transition: background-color 0.3s ease; }
@media (hover: hover) and (min-width: 1024px) {
  .row-hover:hover { background-color: rgba(208, 99, 152, 0.05); }
}
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.8s ease; }
@media (hover: hover) and (min-width: 1024px) {
  .group:hover .img-zoom img { transform: scale(1.05); }
}

/* 래퍼 없이 이미지 자체를 확대 (에스테틱 민감성케어 배경 등) */
.img-hover { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) and (min-width: 1024px) {
  .group:hover .img-hover { transform: scale(1.05); }
}

/* 카드 그림자 + hover 부양 (에스테틱 시술 카드) — transform·border-color 동시 전이라 유틸로 불가 */
.card-shadow { box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.03); transition: all 0.4s ease; }
@media (hover: hover) and (min-width: 1024px) {
  .card-shadow:hover {
  box-shadow: 0 30px 60px -15px rgba(208, 99, 152, 0.15);
  transform: translateY(-6px);
  border-color: rgba(208, 99, 152, 0.4);
}
}

/* 장비소개 목록 — 모바일(<640px) 2열.
   design.css(Tailwind) 는 기본 1열 / 640px↑ 2열 / 1024px↑ 4열 이다.
   여기서 640px 미만 구간만 2열로 덮어쓴다. (design_custom.css 는 design.css 뒤에 로드되어 우선함)
   ⚠ 이 블록을 input.css 로 옮기면 매번 build.sh 를 돌려야 반영된다 → 의도적으로 여기 둔다. */
@media (max-width: 639px) {
  .equip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  /* 카드 폭이 절반이라 여백·글자를 함께 줄인다 */
  .equip-card__thumb { padding: 1rem; }
  .equip-card__ph    { font-size: 12px; }
  .equip-card__body  { padding: 1rem; }
  .equip-card__title { font-size: 15px; }
  .equip-card__eng   { font-size: 12px; }
  .equip-card__desc  { font-size: 13px; line-height: 1.7; }
  .equip-card__more  { margin-top: 0.75rem; font-size: 12px; }
}

/* 장비소개 카드 — 브이빔 사진만 축소.
   원본(equip_11_v_beam.png 258x464)은 세로형 장비 사진 중 그림이 가장 꽉 차 있고(높이 98.7%)
   가로 비율도 넓어(0.56 : 덴서티 0.40 · SMARTPS 0.32) 같은 박스에서 유독 크게 보인다.
   ※ 카드 마크업이 DB(product) 로 생성돼 개별 클래스를 줄 수 없어 파일명 선택자로 처리한다.
   design.css 뒤 로드 → 빌드 불필요. */
.equip-card__img[src$="equip_11_v_beam.png"] { transform: scale(0.85); }
/* Gold PTT 도 같은 이유로 축소 (여드름 페이지에서도 .img-contain-zoom--sm 로 줄여 쓰는 컷) */
.equip-card__img[src$="/img/goldptt.png"] { transform: scale(0.85); }

/* 장비소개 탭/페이징 숨김 —
   Tailwind 의 hidden 유틸은 카드에 붙은 block 유틸과 우선순위(specificity)가 같아
   빌드 순서에 좌우된다. 확실히 이기도록 !important 로 둔다. */
.equip-hide { display: none !important; }

/* 장비 상세 본문(에디터 HTML) — 자식 선택자라 Tailwind @apply 로 표현 불가 */
.equip-detail__body p { margin-bottom: 1rem; }
.equip-detail__body p:last-child { margin-bottom: 0; }
.equip-detail__body img { max-width: 100%; height: auto; }

/* 화면 좌측 가장자리를 본문 기준(max-w-1920)과 맞추기 위한 동적 패딩 */
.align-left-edge { padding-left: 1.5rem; }
@media (min-width: 1024px) {
  .align-left-edge { padding-left: max(160px, calc((100vw - 1920px) / 2 + 160px)); }
}

/* 이미지 플레이스홀더 (질환/서브페이지 공통 — 실사진 대신 영역 표시) */
.img-placeholder {
  background-color: #F4F4F4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999999;
  text-align: center;
  transition: background-color 0.5s ease;
  border-radius: 4px;
  overflow: hidden;
}
@media (hover: hover) and (min-width: 1024px) {
  .img-placeholder:hover { background-color: #EBEBEB; }
}

/* 상세정보 모달 (의료진 등 공통) */
#doctorModal { transition: visibility 0.3s, opacity 0.3s; }
#doctorModal.active { visibility: visible; opacity: 1; }
#doctorModal .modal-content {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
  transform: translate(-50%, -45%) scale(0.95);
  opacity: 0;
}
#doctorModal.active .modal-content {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* 단정한 네비게이션 라인 (메인.html 헤더 스타일 적용) */
.anchor-nav a { position: relative; padding-bottom: 4px; transition: color 0.3s; }
.anchor-nav a::after { 
  content: ''; position: absolute; bottom: 0; left: 0; 
  width: 0; height: 1.5px; background: #D06398; transition: width 0.4s ease; 
}
.anchor-nav a.active { color: #1A1A1A; font-weight: 500; }
@media (hover: hover) and (min-width: 1024px) {
  .anchor-nav a:hover { color: #1A1A1A; font-weight: 500; }
}
.anchor-nav a.active::after { width: 100%; }
@media (hover: hover) and (min-width: 1024px) {
  .anchor-nav a:hover::after { width: 100%; }
}

/* Tailwind 미컴파일 클래스 추가 */
@media (min-width: 1024px) {
  .space-x-12 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(3rem * (1 - var(--tw-space-x-reverse)));
    margin-right: calc(3rem * var(--tw-space-x-reverse));
  }
}

.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}

@media (hover: hover) and (min-width: 1024px) {
  .hover\:scale-102:hover {
  transform: scale(1.02);
}
}

/* aesthetic 히어로 배경 이미지 (첨부 스파 이미지) + 좌측 밝은 베일(텍스트 가독성).
   subhero-inner 는 z-10 이라 텍스트가 배경/베일 위에 표시됨. 이미지 파일: /img/aesthetic_hero.jpg */
.aesth-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('/img/aesthetic_hero.png');
  background-size: cover;
  background-position: right 80%;   /* 세로 위치 아래쪽 → 하단의 얼굴이 프레임 위로 올라와 보이게 (값 클수록 더 위로) */
}
.aesth-hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.6) 40%,
    rgba(255, 255, 255, 0) 70%);
}

/* skinbooster 히어로 딤드(bhero__veil-sm) 살짝 완화 — 커스텀 배경 이미지가 덜 가려지게 (skinbooster 전용).
   공용 .bhero__veil-sm(from-white/90…)보다 흰색 농도를 낮춤. 클래스 2개(0,2,0)로 우선. */
.bhero__veil-sm.bhero__veil-sm--light {
  background-image: linear-gradient(to right,
    rgba(255, 255, 255, 0.68) 10%,
    rgba(255, 255, 255, 0.35) 65%,
    rgba(255, 255, 255, 0.04) 100%);
}

/* =========================================================
   공지사항(/board/notice) — 심플 리스트형
   design.css(Tailwind) 뒤에 로드 → 여기 순수 CSS 로 관리(빌드 불필요)
   ========================================================= */
.ntc-wrap { width: 100%; }   /* 상세(read) : section-white-pad 폭(좌우 160px, max 1920)에 꽉 차게 */

/* 툴바 : 총 건수(좌) + 검색(우) */
.ntc-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.ntc-total { font-family: "Cinzel", serif; font-size: 14px; letter-spacing: 0.08em; color: #555555; white-space: nowrap; }
.ntc-total b { color: #D06398; font-weight: 600; }

/* 검색 */
.ntc-search { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.ntc-search__select,
.ntc-search__input {
  height: 44px; border: 1px solid #E5E5E5; background: #FFFFFF;
  padding: 0 14px; font-size: 14px; color: #1A1A1A; outline: none;
  transition: border-color 0.2s ease;
}
.ntc-search__input { width: 280px; max-width: 100%; }
.ntc-search__select:focus,
.ntc-search__input:focus { border-color: #D06398; }
.ntc-search__btn {
  height: 44px; padding: 0 24px; border: 0; cursor: pointer;
  background: #1A1A1A; color: #FFFFFF; font-size: 14px; font-weight: 500;
  transition: background-color 0.3s ease;
}
@media (hover: hover) and (min-width: 1024px) {
  .ntc-search__btn:hover { background: #D06398; }
}

/* 목록 */
.ntc-list { display: flex; flex-direction: column; border-top: 1px solid #1A1A1A; }
.ntc-new {
  flex-shrink: 0; font-family: "Cinzel", serif; font-size: 14px; font-weight: 600;
  letter-spacing: 0.08em; color: #D06398;
}
.ntc-empty { text-align: center; padding: 100px 0; color: #888888; font-size: 16px; }

/* 페이징 */
.ntc-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 56px; }
.ntc-pager__btn, .ntc-pager__nav {
  min-width: 40px; height: 40px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Cinzel", serif; font-size: 14px; color: #555555;
  text-decoration: none; border: 1px solid transparent;
  transition: color 0.2s ease, background-color 0.2s ease;
}
@media (hover: hover) and (min-width: 1024px) {
  .ntc-pager__btn:hover, .ntc-pager__nav:hover { color: #D06398; }
}
.ntc-pager__btn.is-active { background: #1A1A1A; color: #FFFFFF; }

@media (max-width: 639px) {
  .ntc-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .ntc-search { justify-content: stretch; }
  .ntc-search__input { flex: 1; width: auto; }
}

/* 공지 상세(read) */
.ntc-read__head {
  display: flex; align-items: center; gap: 20px;
  padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid #E5E5E5;
  font-size: 14px; color: #888888;
}
.ntc-read__date, .ntc-read__views { font-family: "Cinzel", serif; letter-spacing: 0.03em; }
.ntc-read__cover { text-align: center; margin-bottom: 40px; }
.ntc-read__cover img { max-width: 100%; height: auto; display: inline-block; }
.ntc-read__movie { text-align: center; margin-bottom: 40px; }
.ntc-read__body { min-height: 120px; margin-bottom: 8px; }
.ntc-read__files { border-top: 1px solid #E5E5E5; margin-top: 48px; padding-top: 24px; }
.ntc-read__file { font-size: 14px; color: #555555; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.ntc-read__file:last-child { margin-bottom: 0; }
.ntc-read__file a { color: #555555; text-decoration: none; transition: color 0.2s ease; }
@media (hover: hover) and (min-width: 1024px) {
  .ntc-read__file a:hover { color: #D06398; }
}
.ntc-read__answer { margin-top: 40px; background: #FAFAFA; border: 1px solid #EEEEEE; padding: 28px; }
.ntc-read__answer-tit { font-size: 15px; font-weight: 600; color: #1A1A1A; margin-bottom: 14px; }

/* 에디터 본문 타이포 (Tailwind reset 으로 사라진 제목/목록 복원 — 공지·이벤트 상세 공용) */
.ntc-read__body > :first-child { margin-top: 0; }
.ntc-read__body h1, .ntc-read__body h2, .ntc-read__body h3, .ntc-read__body h4 { color: #1A1A1A; font-weight: 600; line-height: 1.4; margin: 28px 0 14px; }
.ntc-read__body h1 { font-size: 26px; }
.ntc-read__body h2 { font-size: 22px; }
.ntc-read__body h3 { font-size: 19px; }
.ntc-read__body h4 { font-size: 17px; }
.ntc-read__body p { margin-bottom: 16px; }
.ntc-read__body ul, .ntc-read__body ol { padding-left: 22px; margin: 0 0 18px; }
.ntc-read__body ul { list-style: disc; }
.ntc-read__body ol { list-style: decimal; }
.ntc-read__body li { margin-bottom: 8px; line-height: 1.8; }
.ntc-read__body strong, .ntc-read__body b { font-weight: 600; color: #1A1A1A; }
.ntc-read__body img { max-width: 100%; height: auto; }

/* =========================================================
   메인 이벤트 배너 슬라이드 (AESTHETIC CLINIC → event 게시판)
   ========================================================= */
.event-banner { position: relative; display: grid; }
/* 슬라이드는 같은 grid 셀에 겹쳐 쌓고 active 만 보이게(fade) — 컨테이너 높이는 가장 큰 슬라이드 기준 */
.event-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.9s ease; min-width: 0; }
.event-slide.is-active { opacity: 1; visibility: visible; }

/* 메인 히어로 프로모션 배너 박스 — 하단 reservation-banner(Contact us) 박스와 동일한 핑크 틴트 배경/보더 적용 */
.hero-banner {
  background-color: rgba(208, 99, 152, 0.05);
  border-color: rgba(208, 99, 152, 0.2);
}
.hero-banner .banner-cta-circle {
  border-color: rgba(208, 99, 152, 0.45);
}
#heroBanner.hero-banner { min-width: 0; }
.hero-banner > .flex { min-width: 0; flex: 1 1 0; margin-right: 2rem; }   /* 제목과 '확인하기' 사이 간격 확보 → 제목이 더 일찍 줄바꿈되어 CTA 와 붙지 않음 */
.hero-banner > .flex > div:last-child { min-width: 0; }
.hero-banner .banner-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-banner .banner-cta-wrap { flex-shrink: 0; }
/* 가로 배치(xl↑)에서 CTA 를 제목 라인에 맞춤 — 왼쪽 블록의 라벨(AESTHETIC CLINIC) 높이만큼 CTA 가
   위로 보이던 것을 상쇄(라벨+여백 ≈ 아래로 조정). 제목이 1줄로 고정이라 값이 안정적. */
@media (min-width: 1280px) {
  .hero-banner .banner-cta-wrap { align-self: center; margin-top: 16px; }
}
/* 프로모션 제목을 더 많이 보이게 — 1줄 말줄임(…) → 최대 2줄 표시 (위 nowrap 규칙 오버라이드).
   2줄이 될 수 있으므로 CTA 는 세로 중앙 정렬만 유지(16px 보정 해제). */
.hero-banner .banner-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 1280px) {
  .hero-banner .banner-cta-wrap { margin-top: 0; }
}
/* 인디케이터(점) — 배너 우하단 (모바일은 좌하단 카드 여백 24px 에 맞춤) */
.event-dots { position: absolute; right: 12px; bottom: 8px; display: flex; align-items: center; gap: 2px; z-index: 3; }
@media (max-width: 767px) {
  .event-dots {
    right: auto;
    left: 20px;
    bottom: 22px;
  }
}
/* 점 자체는 작게 보이되(::before) 버튼 히트영역은 24x24 로 크게 → 누르기 쉽게, 빗나가서 배너 링크가 눌리는 것 방지 */
.event-dot {
  width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.event-dot::before {
  content: ''; display: block; width: 9px; height: 9px; border-radius: 9999px;
  background: rgba(26, 26, 26, 0.25); transition: width 0.3s ease, background-color 0.3s ease;
}
@media (hover: hover) and (min-width: 1024px) {
  .event-dot:hover::before { background: rgba(208, 99, 152, 0.7); }
}
.event-dot.is-active::before { width: 22px; background: #D06398; }

/* Hero section alignment fix */
.hero-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.hero-inner {
  width: 100%;
}
/* 히어로 좌우 여백 (2026-08-10 수정)
   기존: .hero-section 패딩 0(풀블리드) + .hero-inner{max-width:1600px;margin:auto} 로만 여백을 확보했다.
        → 1920px 화면에서만 1600 + 160*2 로 우연히 아래 섹션(.stats-wrap/.floor-wrap 의 좌우 160px)과 맞았고,
          1440·1512(노트북/맥북)에서는 hero-inner 가 화면 폭을 꽉 채워 좌우 여백이 0 → 양옆이 딱 붙어 보였다.
   변경: 데스크톱(1024~)에서 히어로도 다른 섹션과 동일한 160px 좌우 패딩을 갖는다.
        1920 이상에서는 hero-inner 의 max-width:1600px 가 여전히 지배 → 기존 데스크톱 화면은 변화 없음. */
@media (min-width: 1024px) {
  .hero-section {
    padding-left: 160px !important;
    padding-right: 160px !important;
  }
}
/* ⚠ 아래 블록은 과거 `} */` 처럼 닫는 중괄호가 주석 안에 들어가 있어
   @media(min-width:1024px) 가 파일 끝까지 닫히지 않았고, 그 결과 314줄 이후
   모든 커스텀 CSS 가 데스크톱에서만 적용되고 모바일에서 통째로 무시됐다.
   (예: 온라인 문의 배너 전화 아이콘 .rsv-tel__icon 크기 미적용 → 아이콘 거대화)
   중괄호 짝을 반드시 주석 밖에서 맞출 것. */
@media (min-width: 1024px) {
  .hero-inner {
    /* padding-left: 160px !important;
       padding-right: 160px !important; */
  }
}
/* 히어로 영상 우측 상단 로고 잘림 (2026-08-10)
   영상 원본은 1920×1080(16:9) 인데 .hero-media 의 비율이 구간마다 다르다.
     데스크톱(1024~) aspect-ratio:16/9 → 영상과 일치, 잘리지 않음
     모바일(~1023)  aspect-ratio:4/3  → 16:9 영상을 cover 로 채우며 좌우 각 12.5%(합 25%) 손실
                                       → 우측 상단 병원 로고가 그 구간에 걸려 잘렸다.
   → 모바일도 영상과 같은 16:9 로 맞춘다(데스크톱은 이미 16:9 라 변화 없음).
     비율을 맞춘 뒤에도 반올림 오차로 1~2px 이 잘릴 수 있어 영상만 contain 으로 둔다.
     (비율이 같으므로 contain 이어도 상하좌우 여백은 생기지 않는다) */
@media (max-width: 1023px) {
  .hero-media { aspect-ratio: 16 / 9; }
}
.hero-media video.media-cover { object-fit: contain; }

/* 모바일·태블릿 히어로 텍스트 우측 여백 —
   .hero-section 은 좌우 패딩 0(풀블리드)이라 텍스트가 화면 오른쪽 끝에 그대로 닿아
   제목/본문 마지막 글자가 잘린 것처럼 보였다. 왼쪽 인덴트(24px)와 같은 값을 우측에도 준다.
   (제목 padding-left 는 767px 이하에만 있어 태블릿 세로에서 왼쪽도 붙던 것을 1023px 까지 확장) */
@media (max-width: 1023px) {
  .hero-section .page-title { padding-left: 24px; }
  .hero-section .hero-left { padding-right: 24px; }
  /* 상단 라벨(가로 라인 + The 50-Year Heritage) — 제목·본문과 같은 24px 들여쓰기.
     본문(.hero-lead-wrap)은 자체 padding-left:1.5rem 이 있어 이미 맞아 있었고,
     이 라벨만 빠져 있어 검은 라인이 화면 왼쪽 끝에 붙어 보였다. */
  .hero-section .hero-eyebrow { padding-left: 24px; }
}

/* 회사소개(/about/intro) 진료철학 리드 문단 색상 (#555) —
   philosophy-lead 는 해당 페이지 전용. Tailwind 임의 hex(text-[#555])는
   design.css 에 미컴파일이라 여기서 오버라이드(빌드 불필요). */
.philosophy-lead { color: #555555; }

/* =========================================================
   회사연혁(/about/intro) 곡선 스네이크(뱀형) 타임라인
   3줄(6-6-5)로 좌우 왕복, 끝에서 점선 U턴 곡선으로 이어짐 → 스크롤 없이 한 화면.
   원형 포인트 균일. 브랜드 톤(accent #D06398). design.css 뒤 로드 → 빌드 불필요.
   ---- 좌표: 행높이 --stl-h, 점선 라인/점/화살표는 그 값에서 계산, 양끝 R=48px 인셋(U턴 공간) ----

   ⚠ 겹침 수정 (2026-08-10)
   행 높이가 200px 고정이라 라벨(연도+내용)이 쓸 수 있는 높이가 148px 뿐이었다.
   화면이 좁아지면 노드 폭이 줄어 텍스트 줄 수가 늘고(특히 2007년 2개 항목이 3줄씩),
   라벨이 180px 까지 커지면서 위 행의 점선·연도를 침범해 겹쳐 보였다.
     1920(타임라인 1400px) 라벨 132px ✅ / 1512 → 180px ❌ / 1440 → 180px ❌
   → 행 높이를 --stl-h 한 곳에서 관리하고 260px 로 넓힌다(라벨 가용 208px).
      점선·점·화살표·U턴 곡선 좌표를 전부 이 변수에서 calc 로 뽑으므로 값 하나만 바꾸면 전체가 따라온다.
      ※ U턴 SVG(마크업)의 viewBox 높이·path 반지름·pathLength 도 이 값에 맞춰져 있다.
        --stl-h 를 바꾸면 about/intro/index.jsp 의 .stl__turn SVG 도 같이 고쳐야 한다.
   ========================================================= */
.stl { position: relative; max-width: 1400px; margin: 0 auto; --stl-h: 260px; }
.stl__row { position: relative; display: flex; }
.stl__row--rev { flex-direction: row-reverse; }
/* 각 행 점선 라인 (점 높이) — 양끝 48px 인셋(U턴 곡선 공간)
   border-dotted 대신 radial-gradient 로 그린다: 점 지름 2px / 주기 4px 를 명시해
   U턴 SVG 곡선(stroke-width 2, dasharray 0.01 4)과 점 크기·간격이 정확히 일치한다.
   (border-dotted 는 점 간격이 브라우저 재량이라 곡선과 어긋났다)
   top:171px + height:2px → 라인 중심 172px = .stl__dot / .stl__arrow 중심과 일치. */
.stl__row::before {
  content: '';
  position: absolute;
  top: calc(var(--stl-h) - 29px); left: 48px; right: 48px; height: 2px;
  background-image: radial-gradient(circle, #B5B5B5 1px, transparent 1px);
  background-size: 4px 2px;
  background-repeat: repeat-x;
  background-position: left center;
  z-index: 0;
}
/* 1·2행은 오른쪽 끝에서 U턴 곡선이 시작되므로 점 위상을 오른쪽 기준으로 정렬한다.
   (기본 left 정렬이면 행 폭에 따라 오른쪽 끝 점이 잘려 곡선 첫 점과 붙어 보인다)
   마지막 행은 왼쪽 끝이 접점이라 기본 left 정렬 유지. */
.stl__row:not(.stl__row--end)::before { background-position: right center; }
/* 마지막 줄: 점선을 화살표 꼬리(노드7 중앙=92.857%)에서 끝냄(3px 겹침) → 화살표가 라인 끝을 덮어 점선 삐짐 제거.
   ※ 값은 마지막 행 노드 개수에 종속: 반노드 = 100/(노드수)/2. 현재 7노드 → 7.143%. */
.stl__row--end::before { right: calc(7.143% - 3px); }
/* U턴 곡선 (점선 반원) — 행 사이를 이음. 마크업의 SVG path 로 그린다.
   좌표계: viewBox 0 0 48 202, path 는 y=1 에서 시작해 y=201 에서 끝난다.
   → top:171px 이면 시작 172px(1행 라인 중심), 끝 372px(2행 라인 중심)로 정확히 접합.
   (행 높이 200px = .stl__node height) */
.stl__turn {
  position: absolute;
  width: 48px; height: calc(var(--stl-h) + 2px);
  color: #B5B5B5;              /* SVG stroke=currentColor */
  pointer-events: none;
  z-index: 0;
}
.stl__turn svg { display: block; overflow: visible; }  /* 양끝 4px 꼬리가 viewBox 밖으로 나감 */
.stl__turn--right { right: 0; top: calc(var(--stl-h) - 29px); }
.stl__turn--left  { left: 0;  top: calc(var(--stl-h) * 2 - 29px); }

/* 노드 — 균등폭, 하단에서 28px 위에 점 */
.stl__node { position: relative; flex: 1 1 0; min-width: 0; height: var(--stl-h); }
.stl__dot {
  position: absolute; left: 50%; top: calc(var(--stl-h) - 28px);
  width: 13px; height: 13px; border-radius: 9999px;
  background: #FFFFFF; border: 2px solid #D06398;
  transform: translate(-50%, -50%); z-index: 2;
}
/* 라벨(점 위, 가운데 정렬) */
.stl__label { position: absolute; left: 0; width: 100%; bottom: 52px; padding: 0 18px; text-align: center; }
.stl__year { display: block; font-size: 20px; font-weight: 600; color: #1A1A1A; line-height: 1; margin-bottom: 9px; }
/* 내용 목록 — 가운데 블록, 내부는 왼쪽정렬(각 항목 왼쪽 라인 정렬) */
.stl__list { display: inline-block; text-align: left; }
.stl__text { font-size: 16px; line-height: 1.5; color: #555555; font-weight: 300; padding-left: 14px; text-indent: -14px; }
.stl__text::before { content: "\00B7"; color: #D06398; font-weight: 700; margin-right: 6px; }  /* 가운데점 목록 마커 */
.stl__text + .stl__text { margin-top: 7px; }
/* 점선 끝 화살촉(채운 삼각형) — 축 없이 점선 끝에 붙어 점선이 그대로 화살표로 끝남 */
.stl__arrow {
  position: absolute; left: 50%; top: calc(var(--stl-h) - 28px);
  transform: translateY(-50%);   /* 삼각형 밑변(왼쪽)을 화살표 노드 중앙(=라인 끝)에 맞춤. 노드 중앙(left:50%)이라 개수 무관 자동정렬 */
  color: #B5B5B5; z-index: 1;
  width: 12px; height: 24px;
}
.stl__arrow svg { display: block; width: 100%; height: 100%; }

/* 모바일·태블릿·소형 노트북: 세로 리스트 폴백(스네이크·곡선 숨김)
   ⚠ 기준을 767px → 1279px 로 확장(2026-08-10).
      1279px 이하에서는 노드 하나의 텍스트 폭이 124px 아래로 떨어져(1024 화면 기준 81px)
      한 항목이 4~5줄까지 늘어난다. 행 높이를 260px 로 넓혀도 감당이 안 되므로
      이 구간은 스네이크 배치를 포기하고 세로 리스트로 읽게 한다. */
@media (max-width: 1279px) {
  .stl { max-width: none; }
  .stl__row, .stl__row--rev { flex-direction: column; }
  .stl__row::before, .stl__turn, .stl__dot, .stl__arrow { display: none; }
  .stl__node { height: auto; padding: 14px 4px; border-bottom: 1px solid #E8E8E8; }
  .stl__label { position: static; width: 100%; padding: 0; text-align: left; }
  .stl__year { font-size: 18px; color: #D06398; margin-bottom: 5px; }
  .stl__text { font-size: 15px; color: #444444; }
}

/* =========================================================
   전 페이지 히어로 배너 본문 문단 — 좌측 세로 라인 및 텍스트 스타일 통일
   ========================================================= */
.hero-desc-wrap,
.hero-lead-wrap,
.doctors-lead,
.aesth-hero__desc,
.sub-hero__desc {
  border-left: 1px solid #E8E8E8;
  padding-left: 1.5rem;
  text-align: left;
}

.hero-desc,
.sub-hero__desc,
.hero-lead,
.vitiligo-hero-desc,
.doctors-lead,
.aesth-hero__desc { color: #1c1c1c; }

@media (min-width: 768px) {
  .hero-desc,
  .sub-hero__desc,
  .hero-lead,
  .vitiligo-hero-desc { font-size: 20px; }
}

/* doctors-lead 는 lg(1024px)에서 18px로 커지는 구조 → 그 지점만 20px (모바일 16px 유지) */
@media (min-width: 1024px) {
  .doctors-lead { font-size: 20px; }
}

/* =========================================================
   전 페이지 히어로 배너 제목(h1) — /beauty/pigment/index 기준으로 통일
   기준 .bhero__title-sm : 34px / md 48px / lg 58px · font-light(300) · leading 1.3 · tracking-tight
   통일 전에는 페이지마다 5종으로 갈려 있었다.
     page-title 36/56/68 · page-title-sub 36/56/64 · aesth-hero__title 36/56/68
     bhero__title 36/52/64 · sub-hero__title 36/48/56 + font-semibold(굵기까지 상이)
   ※ h1 안의 강조 <span class="text-mellow-accent font-semibold"> 은 유틸리티 클래스라
     여기서 지정한 font-weight 의 영향을 받지 않고 그대로 유지된다.
   design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
.page-title,
.page-title-sub,
.aesth-hero__title,
.bhero__title,
.bhero__title-sm,
.sub-hero__title {
  font-size: 34px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .page-title,
  .page-title-sub,
  .aesth-hero__title,
  .bhero__title,
  .bhero__title-sm,
  .sub-hero__title { font-size: 48px; }
}

@media (min-width: 1024px) {
  .page-title,
  .page-title-sub,
  .aesth-hero__title,
  .bhero__title,
  .bhero__title-sm,
  .sub-hero__title { font-size: 58px; }
}

/* beauty 히어로 키워드/알약 칩(.chip-dot, .info-chip) 12px 설정 */
.info-chip,
.chip-dot { font-size: 12px !important; }

/* beauty '한눈에 보는(At a Glance)' 박스 위아래 가로 라인 제거 (glance-box 는 beauty 전용) */
.glance-box { border-top-width: 0; border-bottom-width: 0; }

/* beauty '주요 효과' 카드(fx-card) 박스 제거 → 테두리 없는 리스트형.
   브이빔 등 회색 패널/박스 안에 흰 테두리 박스가 여러 개 쌓여 답답한(박스 도배) 문제 해소.
   항목 구분은 fx-card__label 의 accent 밑줄 + 여백으로 유지. fx-card 는 beauty 전용. */
.fx-card { border-width: 0; background-color: transparent; }
/* 효과 카드 내용(라벨+텍스트)을 왼쪽정렬 유지한 채 카드 안에서 가운데 배치 (넓은 화면: 내용폭 중앙 / 좁은 화면: 100% 줄바꿈) */
.fx-cc { width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
/* 효과 라벨(fx-card__label) 분홍 영문 아래 accent 밑줄 제거 + 라벨↔내용 간격 축소(18px→6px) (beauty 전용) */
.fx-card__label { border-bottom-width: 0; padding-bottom: 0; margin-bottom: 6px; }
/* 울쎄라피프라임 주요효과 2×2 그리드 간격 — 가로 32px 유지, 세로(효과 간) 축소 12px (lifting 전용) */
.ul-fx-grid { column-gap: 2rem; row-gap: 0.75rem; }
/* 울쎄라피프라임 레이아웃 — 이미지박스(좌, lg:w-1/2 로 가로 축소) 높이를 우측 텍스트 높이에 맞춤(데스크톱).
   모바일은 세로 스택 + bty-banner 기존 aspect(16/9) 유지. .ul-media 는 lifting 전용. */
@media (min-width: 1024px) {
  .ul-media { position: relative; min-height: 320px; }   /* 우측 텍스트 컬럼 높이만큼 stretch */
  .ul-media .bty-banner { position: absolute; inset: 0; aspect-ratio: auto; }  /* 컬럼 전체 채움 → 이미지 높이 = 텍스트 높이 */
}

/* 리니어지(#linearz) 주요효과 — 이미지 내부 우측 상단 세로 오버레이 (박스 없음, 가독성용 옅은 그라데이션, lifting 전용) */
.linearz-fx {
  position: absolute;
  z-index: 2;                                  /* 이미지·스크림 위로 */
  top: 1rem;
  right: 1rem;
  max-width: 78%;
  text-align: left;
  color: #fff;                                 /* 어두운 이미지 위 흰 텍스트 */
}
.linearz-fx .fx-card__text { color: #fff; }    /* 본문 흰색 (제목/라벨은 accent 유지) */
.linearz-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 우측 상단만 어둡게 → 가독성 확보 (텍스트가 놓이는 영역만, 이미지 왼쪽은 그대로) */
  background: linear-gradient(225deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 42%, rgba(0, 0, 0, 0) 70%);
}
@media (min-width: 640px) {
  .linearz-fx { top: 1.5rem; right: 2rem; max-width: 380px; }
}
@media (max-width: 639px) {
  .linearz-img { min-height: 23rem; }          /* 모바일: 세로 오버레이가 잘리지 않도록 이미지 높이 확보 */
}

/* 주요효과를 이미지박스 내부 우측 상단에 세로 오버레이 (박스 없음, 가독성용 옅은 그라데이션, beauty 공용) */
.fx-overlay {
  position: absolute;
  z-index: 2;                                  /* 이미지·스크림 위로 */
  top: 1rem;
  right: 1rem;
  max-width: 78%;
  text-align: left;
  color: #fff;                                 /* 어두운 이미지 위 흰 텍스트 */
}
.fx-overlay .fx-card__text { color: #fff; }    /* 본문 흰색 (제목/라벨은 accent 유지) */
.fx-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 우측 상단만 어둡게 → 가독성 확보 (텍스트가 놓이는 영역만, 이미지 왼쪽은 그대로) */
  background: linear-gradient(225deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 42%, rgba(0, 0, 0, 0) 70%);
}
@media (min-width: 640px) {
  .fx-overlay { top: 1.5rem; right: 2rem; max-width: 380px; }
}
@media (max-width: 639px) {
  .fx-host { min-height: 22rem; }              /* 모바일: 세로 오버레이가 잘리지 않도록 이미지 높이 확보 */
}
/* 검정 패널 안에 주요효과를 넣을 때 본문 텍스트는 흰색 (라벨/제목은 accent 유지).
   .bty-dark(풀섹션)·.bty-dark__panel(split 내부 단독 패널, 예: botox 필러) 모두 커버. */
.bty-dark .fx-card__text,
.bty-dark__panel .fx-card__text { color: rgba(255, 255, 255, 0.85); }

/* vitiligo '백반증 분야의 세계적 권위' 저서 이미지 — 원본 비율 그대로 한 장 노출.
   흰 배경 사진이라 경계가 안 보이므로 얇은 테두리를 준다. */
.book-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #E8E8E8;   /* 흰 배경 사진의 경계 표시 */
}

/* vitiligo 정기 포토미팅 카드(pm-card) 텍스트 — 제목 18px / 내용 16px. pm-card 는 vitiligo 전용. */
.pm-card__title { font-size: 18px; }
.pm-card__desc { font-size: 16px; }
/* vitiligo Treatment(나에게 맞는 치료법) 카드 제목 호버(accent 변색) 제거. treat-card__title 은 해당 카드 전용 */
@media (hover: hover) and (min-width: 1024px) {
  .group:hover .treat-card__title { color: #1A1A1A; }
}
/* 정기 포토미팅 우측 이미지 높이를 좌측 컨텐츠에 맞춤(데스크톱). 모바일은 기존 aspect-[4/3] 유지 */
@media (min-width: 1024px) {
  .pm-row { align-items: stretch; }        /* items-start 오버라이드 → 좌우 컬럼 동일 높이 */
  .pm-photo-col { display: flex; }
  .pm-photo { aspect-ratio: auto; }        /* 4/3 고정 해제 → 컬럼 높이만큼 채움 */
}

/* aesthetic '하이퍼럭스 재생 케어' 섹션 다크→라이트(검정 배경 제거).
   aesth-card-dark(6개)는 이 섹션 전용 → 라이트 카드로 오버라이드. 섹션 배경/제목/설명은 HTML 에서 다크 유틸 제거. */
.aesth-card-dark { background-color: #FFFFFF; border-color: #E8E8E8; }
.aesth-card-dark__title { color: #1A1A1A; }
.aesth-card-dark .aesth-card__desc { color: #555555; }   /* 인라인 text-[#888]/[#A0A0A0] 오버라이드 → #555 통일 */
/* aesthetic 각 섹션 설명(aesth-section__desc) 색상 — 기본 mellow-gray(#888) → #555. aesth-section__desc 는 aesthetic 전용 */
.aesth-section__desc { color: #555555; font-size: 18px; }   /* 기존 16/17px → 전 섹션 설명 18px 통일 */

/* =========================================================
   오시는 길(about/location) 히어로 2단 — 좌: 텍스트(왼쪽정렬) / 우: 영업시간
   sub-hero__inner 의 text-center / items-center 를 왼쪽정렬 2단으로 오버라이드
   ========================================================= */
.loc-hero-inner { text-align: left; align-items: stretch; }
/* '오시는 길' 제목 — 다른 히어로의 분홍 강조 텍스트(text-mellow-accent + font-semibold)와 동일하게.
   크기는 위쪽 히어로 제목 통일 규칙(pigment 기준)을 그대로 따르고, 색·굵기만 여기서 덮는다.
   (통일 규칙이 뒤에 오므로 h1 에 유틸리티 클래스를 붙이면 굵기가 밀린다 → 셀렉터 특이성으로 처리) */
.loc-hero-text .sub-hero__title { color: #D06398; font-weight: 600; }
.loc-hero-text .sub-hero__desc { margin-left: 0; margin-right: 0; }   /* desc 의 mx-auto 해제 → 왼쪽정렬 */
.loc-hero-hours { width: 100%; margin-top: 2.5rem; }
@media (min-width: 1024px) {
  .loc-hero-inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 5rem; }
  .loc-hero-text { flex: 1 1 auto; }
  .loc-hero-hours { width: auto; flex: 0 0 auto; min-width: 420px; margin-top: 0; }
}

/* =========================================================
   백반증(vitiligo) 포토미팅 우측 미디어 — 사진(좌) + 제목·부제(우) 2건 세로 배치.
   기존 단일 대형 사진(pm-photo)을 대체. design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
.pm-media { display: flex; flex-direction: column; justify-content: center; gap: 2rem; flex: 1; width: 100%; }
.pm-media__item { display: flex; align-items: center; gap: 1.75rem; }
.pm-media__thumb { position: relative; width: 52%; flex-shrink: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.pm-media__text { flex: 1; min-width: 0; }
.pm-media__title { font-size: 21px; font-weight: 700; color: #D06398; line-height: 1.4; margin-bottom: 10px; word-break: keep-all; }
.pm-media__en { display: block; font-size: 15px; font-weight: 500; color: #888888; margin-top: 2px; }
.pm-media__sub { font-size: 16px; color: #444444; line-height: 1.7; word-break: keep-all; }
/* 데스크톱: 좌측 카드 3개 높이에 맞춰 두 항목이 높이를 균등 분할하고 사진이 그 높이를 꽉 채움 */
@media (min-width: 1024px) {
  .pm-media__item { flex: 1; align-items: stretch; min-height: 0; }
  .pm-media__thumb { aspect-ratio: auto; height: 100%; }
  .pm-media__text { display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 479px) {
  .pm-media__item { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .pm-media__thumb { width: 100%; }
  .pm-media__title { font-size: 19px; }
}

/* =========================================================
   질환(disease) 진단 시스템 카드 — 가로형 레이아웃
   카드 2개는 세로로 정렬하고, 카드 안에서 좌(이미지 + 제목) / 우(검사 내용) 2단.
   기존 세로형(이미지 풀폭)은 사진이 지나치게 커 보여 폭을 고정한 가로형으로 전환.
   design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
.dg-row { display: flex; flex-direction: column; }
.dg-row__aside { padding: 2rem 2rem 0; }
.dg-row__thumb { position: relative; width: 100%; aspect-ratio: 4 / 2.55; overflow: hidden; }
.dg-row__title { margin-top: 1.25rem; margin-bottom: 0; }
.dg-row__body { padding: 2rem; }
/* ⚠ 좌우 치우침 수정 (2026-08-10)
   이전에는 카드가 넓은 1920px 화면에서 콘텐츠가 왼쪽에 몰려 보이는 것을 보정하려고
   좌측 들여쓰기를 고정 px 로 박아 두었다.
     .dg-row__aside { width:688px; flex-shrink:0; padding-left:18rem(288px) }
     .dg-row__body  { padding-left:12rem(192px) }
   화면 폭과 무관한 고정값이라 카드가 좁아져도 288px 빈 공간이 그대로 남고,
   flex-shrink:0 인 aside 가 688px 를 계속 차지해 우측 본문만 압착됐다.
     1920(카드 1600) → 본문 실폭 680px / 1440(카드 1120) → 본문 실폭 240px
   게다가 좌측 여백 288px 대 우측 여백 40px 의 비대칭이라 전체가 우측으로 밀려 보였다.
   → px 고정값을 '카드 폭에 대한 비율'로 바꾼다. 배치 자체(좌측 들여쓰기 + 본문이 우측 끝까지)는
      그대로 두므로 1920px 데스크톱 화면은 픽셀 단위까지 기존과 동일하고,
      카드가 좁아지면 들여쓰기가 함께 줄어 본문이 압착되지 않는다. */
@media (min-width: 1280px) {
  /* 아래 진료과목/수액치료 섹션 카드와 좌우 라인을 맞추기 위해
     섹션 폭(section-inner, 최대 1600px) 을 그대로 사용한다. (max-width 제한 없음)
     부모가 flex-column + stretch 라 두 카드 폭은 항상 같다. 높이는 내용에 따라 다름. */
  .dg-row {
    flex-direction: row; align-items: flex-start;
    width: 100%;
  }
  /* clamp 의 % 는 카드 폭 기준. 카드 1600px(=1920 화면)에서
       43% = 688px, 18% = 288px, 12% = 192px
     로 계산되어 기존 데스크톱 값과 정확히 일치한다. 그보다 좁아지면 비례해 줄어든다.
     최솟값(400px / 2.5rem / 2rem)은 1280px 화면에서도 본문이 확보되도록 잡은 하한선. */
  .dg-row__aside {
    width: clamp(400px, 43%, 688px);
    flex-shrink: 0;
    padding: 2.5rem 2.5rem 2.5rem clamp(2.5rem, 18%, 288px);
  }
  /* 이미지는 360px 기준. 컬럼이 좁아지면 max-width 로 함께 줄어든다(비율 4/2.55 유지 → 잘림 없음) */
  .dg-row__thumb { width: 360px; max-width: 100%; }
  .dg-row__title { font-size: 18px; }
  /* 본문은 flex:1 로 카드 우측 끝까지 사용한다(축소 고정폭으로 바꾸면 우측에 빈 공간이 생겨
     콘텐츠가 왼쪽으로 몰려 보인다) */
  .dg-row__body { flex: 1; min-width: 0; padding: 2.5rem 2.5rem 2.5rem clamp(2rem, 12%, 192px); }
}
/* 1024~1279 는 가로 2단이 무리다 — 들여쓰기를 최소로 줄여도 이미지 컬럼이 400px 를 먹어 본문이 눌린다.
   이 구간은 기본(세로) 배치를 쓰되, 사진이 지나치게 커 보이지 않도록 폭만 제한한다. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .dg-row__thumb { max-width: 520px; }
}

/* 질환(disease) 카드 본문 16px — 진료 과목 카드(NO.01~07)와 수액 치료 카드 공통.
   subject-card__desc 는 disease 페이지 전용(기본 15px). */
.subject-card__desc { font-size: 16px; }
/* 수액 치료 카드의 분홍 분류 문구 */
.iv-card__cat { font-size: 16px; font-weight: 600; color: #D06398; margin-bottom: 1rem; }
.iv-card__list { font-size: 16px; }

/* =========================================================
   beauty 히어로 우측 — 안전 가이드라인 안내박스 (lifting)
   상단 문구 + 아이콘 2칸 패널. design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
.safety-box { width: 100%; margin-top: 3rem; }
.safety-box__lead {
  text-align: center; font-size: 17px; color: #1C1C1C;
  line-height: 1.7; word-break: keep-all; margin-bottom: 20px;
}
.safety-box__lead strong { font-weight: 700; color: #1A1A1A; }
.safety-box__panel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #E8E8E8; background: #FFFFFF;
}
.safety-item {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 18px; padding: 26px 16px 22px;
}
.safety-item + .safety-item { border-left: 1px solid #EDEDED; }
.safety-item__icon { width: 100%; max-width: 150px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.safety-item__text { font-size: 15px; color: #333333; text-align: center; line-height: 1.6; word-break: keep-all; }
.safety-item__text strong { font-weight: 700; color: #1A1A1A; }
@media (min-width: 1024px) {
  .safety-box { width: 440px; flex-shrink: 0; margin-top: 0; }
}
@media (max-width: 479px) {
  .safety-item__icon { max-width: 110px; }
  .safety-item__text { font-size: 14px; }
}

/* 오시는 길(about/location) 안내 블록 — 하위 구분 라벨(지하철·버스 등)과 문단 간격.
   loc-info__* 는 해당 페이지 전용. design.css 뒤 로드 → 빌드 불필요. */
.loc-info__desc { font-size: 16px; }   /* 기본 15px → 본문 최소 크기 통일 */
.loc-info__sub { display: block; font-size: 16px; font-weight: 500; color: #1A1A1A; margin-bottom: 2px; }
.loc-info__desc--next { margin-top: 1.25rem; }

/* =========================================================
   beauty 치료법 이름 확대 (beauty 전용 클래스)
   - bty-dev__title 25px → 30px  (각 치료법 이름)
     ※ design.css 뒤 로드라 페이지별 인라인 크기(24/28·26/30·26/34 등)까지 눌러
       모든 치료법 이름이 30px 로 통일됨.
   ※ bty-cat-title(시술 카테고리 대제목)은 하단 '섹션 콘텐츠 제목 46px 통일' 블록에서 관리.
   design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
.bty-dev__title { font-size: 30px; }
/* 풀블리드 배너형 치료법 이름(울쎄라피프라임 등, lifting 전용)도 동일하게 30px */
.bty-banner__title { font-size: 30px; }

/* =========================================================
   beauty 페이지 본문 텍스트 확대 — 15px→16px, 17px→18px
   아래 클래스는 모두 beauty 9개 페이지 전용 → design.css 뒤 로드로 오버라이드(빌드 불필요).
   base 와 인라인 변형(text-[17px]/[16px]/[15px])이 섞인 것은 복합 선택자(specificity 0,2,0)로 분리.
   ※ index-strip(카테고리 점프 내비)은 '내용'이 아니라 제외.
   ========================================================= */
/* 15px → 16px (본문/설명/리스트) */
.bty-dev__desc,
.bty-dark__desc,
.glance-cell__desc,
.device-desc,
.device-dark__desc,
.iv-rec,
.bty-bullet__text,
.fx-card__text,
.spec-value,
.bty-dark__check { font-size: 16px; }

/* 17px → 18px (소제목/이름 성격이지만 17px 지정분) */
.bty-glance-name,
.iv-collabel,
.ta-item__title { font-size: 18px; }

/* =========================================================
   제모(hairremoval) 부위별 맞춤 제모 — 2열 카드 레이아웃
   대표 이미지 + 클릭 전환(.ta-item / selectTreatmentArea) 방식에서
   4개 항목을 좌우 2열로 나눠 카드로 나열하는 방식으로 변경.
   썸네일·라벨·제목·설명은 기존 .ta-item__* 스타일을 그대로 재사용한다.
   design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
.ta-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
}

/* ⚠ Tailwind 정적 빌드 누락 유틸 보완 : pb-20
   design.css 는 www 하위 JSP 를 스캔해 "실제로 쓰인 유틸만" 뽑아 만든다. 페이지에 새 유틸을
   쓰고 build.sh 를 재실행하지 않으면 그 클래스는 CSS 에 아예 존재하지 않아 무효가 된다.
   beauty/botox 마지막 섹션(주요 시술 부위)의 pb-20 이 그 경우로, 모바일에서 하단 여백이 0 이 되어
   마지막 카드(마리오네트)가 푸터에 그대로 붙어 잘린 것처럼 보였다.
   (같은 줄의 lg:pb-28 은 다른 페이지에서도 쓰여 빌드에 포함 → PC 는 정상이었다)
   ⚠ lg 미만에서만 보완할 것. 미디어쿼리 없이 .pb-20 을 두면 design_custom.css 가 뒤에 로드되므로
     같은 특이도인 design.css 의 .lg\:pb-28 을 이겨 PC 하단 여백(112px)까지 80px 로 줄어든다.
   근본 해결은 www/css/tailwind/build.sh 재실행. */
@media (max-width: 1023px) {
  .pb-20 { padding-bottom: 5rem; }
}

/* 부위 아이콘 크기·위치 보정 (beauty/botox 필러·보톡스 시술 부위)
   원본 PNG 마다 ① 캔버스 대비 그림(원) 비율이 다르고(79%~92%)
                ② 그림이 캔버스 정중앙에 있지도 않다(좌우 최대 4.7px, 상하 4.8px 어긋남).
   ①은 scale 로 표시 지름을 92px 로 통일하고,
   ②는 translate 로 그림 중심을 썸네일 중앙에 맞춰 카드마다 아이콘~텍스트 간격을 같게 만든다.
   ※ translate 를 scale 앞에 써야 이동값이 배율의 영향을 받지 않는다(화면 px 기준).
   측정값: 그림 바운딩박스 중심 - 캔버스 중심 → × (썸네일 110px / 캔버스 긴 변) */
.ta-icon--forehead   { transform: translate(1.1px, 0)      scale(1.00); }  /* 386/460 · 중심 -4.5,  -0.5 */
.ta-icon--glabella   { transform: translate(1.9px, -2px)   scale(0.91); }  /* 423/460 · 중심 -8.0,  +8.5 */
.ta-icon--eyearea    { transform: translate(-3.6px, 2.4px) scale(1.06); }  /* 382/485 · 중심 +16.0, -10.5 */
.ta-icon--jawline    { transform: translate(0, -1.4px)     scale(0.94); }  /* 409/460 · 중심  0,    +6.0 */
.ta-icon--nasolable  { transform: translate(-2.3px, 0)     scale(0.99); }  /* 388/460 · 중심 +9.5,  -1.5 */
.ta-icon--marionette { transform: translate(0, -2.4px)     scale(0.99); }  /* 390/460 · 중심  0,   +10.0 */

/* 인라인 17px 리드 문단(15px 기본 클래스 위 오버라이드분) → 18px */
.bty-dev__desc.text-\[17px\],
.bty-dark__desc.text-\[17px\] { font-size: 18px; }

/* 인라인 15px 영문 치료명(iv 등) → 16px */
.bty-dev__en.text-\[15px\] { font-size: 16px; }

/* bty-glance-name 중 16px 로 지정된 변형은 그대로 유지(17px 아님) */
.bty-glance-name.text-\[16px\] { font-size: 16px; }

/* =========================================================
   beauty 페이지 14px 미만 텍스트 → 14px (최소 크기 플로어)
   ※ 반응형(md:/lg:) 정의는 건드리지 않음 — 플랫(단일 크기) 클래스만 대상.
   ※ 아래는 beauty 전용 클래스. area-label(→about/location)·spec-label(→vitiligo) 은
     타 페이지 공용이라 여기서 제외하고 beauty HTML 에서 인라인으로 개별 처리.
   ========================================================= */
.device-tag,
.keyword-tag,
.area-tag,
.wl-chip,
.link-pill,
.hp-link,
.img-cap__text,
.point-card__label,
.glance-eyebrow,
.glance-note,
.bty-cat-eyebrow,
.bty-glance-badge,
.iv-badge__text,
.fx-card__label { font-size: 14px; }

/* 울쎄라피프라임 배너 이벌로우(초음파·근막층 타겟, lifting 전용) — 원래 11/12px 반응형이나
   요청에 따라 14px 로 고정. bty-banner__eyebrow 는 lifting 에서만 사용. */
.bty-banner__eyebrow { font-size: 14px; }

/* =========================================================
   전역 최소 글자 크기 플로어 — 10~11px 텍스트를 모두 14px 로 상향 (모든 페이지 공통).
   "가장 작은 글자는 최소 14px" 규칙. design.css 뒤 로드로 오버라이드 → 빌드 불필요.
   ※ 아래는 base 가 10~11px 인 클래스들(일부는 반응형이나 최대 14px 이하라 flat 14px 로 통일해도 무방).
   ※ 12·13px 라벨 계열은 이 블록에 포함하지 않음(디자인 영향 큼) — 필요 시 별도 확장.
   ========================================================= */
.area-label,            /* 시술 부위 라벨 (beauty·about·location) */
.facility-card__no,     /* 시설 카드 번호 */
.doctor-card__role,     /* 의료진 카드 역할 */
.banner-label,          /* 배너 라벨 */
.notice-badge-gray,
.notice-badge-accent,
.notice-badge-dark,     /* 공지 뱃지 3종 */
.badge-today,           /* 오늘 뱃지 (10px) */
.modal-role,            /* 의료진 모달 역할 */
.diff-badge-ref,
.diff-badge-active,     /* 비교 슬라이더 뱃지 */
.foot-sns,              /* 푸터 SNS 아이콘 라벨 */
.device-banner__eyebrow { font-size: 14px; }

/* 다크 배너 위 '홈페이지 바로가기'(hp-link) 흰색 변형.
   basic.css 의 a:link{color:inherit}(specificity 0,1,1)를 이기려면 클래스 2개(0,2,0) 필요.
   화살표 SVG 는 stroke=currentColor 라 함께 흰색이 됨. */
.hp-link.hp-link--light { color: #ffffff; }

/* 줄바꿈 시 단어(어절)가 중간에 끊기지 않도록 — 한글은 공백 기준으로만 줄바꿈 (beauty 본문/제목 텍스트).
   word-break: keep-all → CJK 문자 사이는 끊지 않고 띄어쓰기에서만 줄바꿈. */
.bty-dev__title,
.bty-dev__desc,
.bty-dark__desc,
.bty-banner__title,
.fx-heading,
.fx-card__text,
.bty-bullet__text,
.bty-dark__check span,
.bty-cat-title { word-break: keep-all; }

/* 메인 '오시는 길' 지도 캔버스 높이 축소 (map-canvas--compact 붙은 인스턴스만 — index 전용).
   원래 h-[320px] md:h-[460px] lg:h-[500px] → 축소. 클래스 2개(0,2,0)로 유틸리티 높이 오버라이드. */
.map-canvas.map-canvas--compact { height: 340px; }
@media (min-width: 768px)  { .map-canvas.map-canvas--compact { height: 500px; } }
@media (min-width: 1024px) { .map-canvas.map-canvas--compact { height: 570px; } }
/* 지도 블록을 콘텐츠 전체 폭에 맞춤 → 위 콘텐츠 섹션 라인과 좌우 정렬. 텍스트 패널은 넓게. (index 전용) */
.map-wrap.map-wrap--compact { max-width: none; }
@media (min-width: 1024px) { .map-wrap.map-wrap--compact { grid-template-columns: 1fr 540px; } }
@media (min-width: 1280px) { .map-wrap.map-wrap--compact { grid-template-columns: 1fr 600px; } }
/* 지도 정보 패널 (index 지도 전용) — 상호명은 가운데, 주소 목록은 블록을 가운데 두되 내부는 왼쪽 라인 정렬 */
#map .map-panel { text-align: center; }
#map .map-panel .addr-list {
  width: max-content; max-width: 100%;
  margin-left: auto; margin-right: auto;
  text-align: left;
  font-size: 18px;
}
#map .map-panel-title { font-size: 28px; }
#map .addr-phone { font-size: 20px; }
#map .addr-parking-free { font-size: 16px; }
/* ⚠ 지도 블록 가로 넘침 방지 —
   .map-wrap 은 grid 라 자식(.map-canvas / .map-panel)의 자동 최소 크기(min-width:auto)가
   min-content 로 잡힌다. 패널 안 .addr-list 가 width:max-content 라서 주차 안내 같은
   긴 한 줄이 min-content 를 447px 까지 밀어올렸고, 모바일(342px)에서 지도·패널·버튼의
   오른쪽이 통째로 잘렸다(html/body 가 overflow-x:clip). min-width:0 으로 컬럼을 컨테이너에 가둔다. */
.map-wrap > * { min-width: 0; }
@media (max-width: 1023px) {
  /* 좁은 화면에서는 max-content 폭을 포기하고 줄바꿈시킨다 */
  #map .map-panel .addr-list { width: auto; }
}

/* 오시는 길(about/location) 지도 정보 패널 — 본문 문단은 16px.
   .addr-list 기본값이 14px 이라 그대로 두면 본문 대비 너무 작다.
   (메인 #map 은 위에서 18px 로 따로 키워 쓰고 있어 이 규칙과 별개) */
.loc-section .addr-list { font-size: 16px; }
/* ⚠ 주차비용 안내(.park-note)는 본문보다 한 단계 작게 두어 계층을 유지한다(메인 #map 과 동일한 처리).
   여기까지 16px 로 올리면 상위 문단과 같은 크기가 되어 부가 안내로 읽히지 않는다. → 기본 14px 유지 */

/* 지도 블록 폭 — 상단 히어로(.sub-hero__inner)·다른 섹션과 동일하게 section-inner(최대 1600px)
   를 그대로 채운다. 이전에는 max-width:1240px 상한을 뒀었는데, 지도 자리가 더미
   플레이스홀더였을 땐 문제없었으나 실제 네이버 지도가 들어온 뒤로는 1400px 이상 화면에서
   좌우 각 180px 씩 안쪽으로 들어가 히어로와 라인이 어긋나 보였다. → 상한 제거.
   (높이 .map-canvas 320 / 460 / 500px 는 기본값 그대로) */

/* =========================================================
   메인 #info (NOTICE / CLINIC HOURS) — 태블릿·소형 노트북 정렬 깨짐 (2026-08-10)

   두 블록은 lg(1024~)부터 6:4 로 나뉘는데, 이 비율은 1920px 화면 기준이다.
     1024 화면 → 내부 704px − gap 80px = 624 → 좌 374px / 우 250px
     우측 250px 에 들어가야 할 것
       · "CLINIC HOURS" + "점심시간 13:00-14:00"            ≈ 290px  → 제목과 부가정보가 겹침
       · "토요일 (토요일은 점심시간 없이…)" + "09:00–15:00"  ≈ 350px  → 시간 표기와 겹침
     게다가 #info 의 행은 좌우 줄을 맞추려고 height:64px 로 고정돼 있어
     넘친 글자가 위아래 행까지 침범했다.
   ========================================================= */
/* 1024~1279 : 6:4 2단이 불가능한 폭 → NOTICE 위 / CLINIC HOURS 아래로 쌓는다.
   각 블록이 704px 전체 폭을 쓰므로 한 줄에 모두 들어간다. */
@media (min-width: 1024px) and (max-width: 1279px) {
  #info > .flex:first-child { flex-direction: column; gap: 3rem; }
}
/* 1280~1439 : 2단은 유지 가능하나(우측 352~416px) '토요일' 행이 아슬아슬하다.
   고정 높이만 풀어 두 줄이 되더라도 위아래 행과 겹치지 않게 한다. */
@media (min-width: 1280px) and (max-width: 1439px) {
  #info .notice-row,
  #info .hours-list > .hours-row {
    height: auto;
    min-height: 64px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* 지도 : 정보패널 비율 — 기본값(.map-wrap 의 lg 360px / xl 400px)에서 패널을 넓히고
   지도를 그만큼 줄인다. 주소·지하철·버스·주차 안내가 좁은 폭에서 자주 2줄로 접히던 것을 완화.
   ⚠ lg(1024~1279) 구간은 손대지 않는다 — 이 구간은 섹션 폭 자체가 좁아(약 700px)
      패널을 더 키우면 지도 칸이 260px 대로 무너진다. */
@media (min-width: 1280px) {
  .loc-section .map-wrap { grid-template-columns: 1fr 460px; }
}
@media (min-width: 1536px) {
  .loc-section .map-wrap { grid-template-columns: 1fr 520px; }
}

/* 클리닉아워 — hours-card 박스 제거 후 옆 NOTICE 목록과 4개 행을 정확히 정렬 (index #info 전용).
   두 목록 행에 동일한 고정 높이를 주어 배지·텍스트 높이차와 무관하게 좌우 행이 정확히 맞도록 함.
   (notice-title 은 truncate 로 항상 1줄이라 고정 높이 안전) */
#info .notice-row,
#info .hours-list > .hours-row {
  height: 64px;
  padding: 0 0.5rem;          /* 세로 여백 제거(고정높이가 대체), 좌우 px-2 유지 */
  margin-top: 0;              /* hours-list 의 space-y-4 무력화 */
  border-bottom: 1px solid #E8E8E8;
}

/* =========================================================
   메인 하단 RESERVATION 배너 좌측 — Contact us 안내 (index 전용)
   라벨(기존 reservation-label 스타일 재사용) + 전화번호(아이콘) + 안내 목록.
   우측 '온라인 문의 안내' 버튼은 기존 유지. design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
/* 아이콘은 텍스트 '첫 줄'에 맞춘다 (2026-08-10).
   기존 align-items:center 는 번호/주소가 한 줄일 때만 맞고, 칸이 좁아 두 줄이 되면
   아이콘이 두 줄의 한가운데로 내려가 첫 글자와 어긋났다(태블릿·소형 노트북에서 발생).
   margin-top 은 (텍스트 줄높이 - 아이콘 26px) / 2 = 첫 줄의 광학 중앙. */
.rsv-tel { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; margin-bottom: 16px; }
.rsv-tel__icon { margin-top: 7px; }   /* 34px × line-height 1.2 = 41px → (41-26)/2 */
.rsv-tel__icon { width: 26px; height: 26px; flex-shrink: 0; color: #D06398; }
.rsv-tel__num { font-size: 34px; font-weight: 600; color: #1A1A1A; line-height: 1.2; }
/* Contact us 배너 — 전화 / 이메일 2단 (2026-08-10, '온라인 문의 안내' 버튼 대체).
   .reservation-banner 는 lg 에서 align-items:center 라 두 칸의 높이가 다르면 세로가 어긋난다.
   2단 구성에서는 위쪽 기준으로 맞춰야 라벨·아이콘 줄이 나란히 보인다. */
.rsv-contact-banner { align-items: flex-start; }
.rsv-col { flex: 1 1 0; min-width: 0; }
/* 이메일 글자 크기는 전화번호와 동일하게 둔다(.rsv-tel__num 의 34px / 모바일 28px 를 그대로 상속).
   대신 주소가 길 때 칸을 넘겨 옆 칸과 겹치지 않도록 줄바꿈만 허용한다. */
.rsv-tel__num--mail { overflow-wrap: anywhere; }
/* 이메일 칸의 빈 라벨 자리 — PC 에서만 높이를 차지해 전화번호 줄과 수평을 맞춘다.
   모바일은 두 칸이 세로로 쌓이므로 불필요한 여백이 되어 숨긴다. */
@media (max-width: 1023px) {
  .rsv-label-spacer { display: none; }
  .rsv-tel__icon { margin-top: 4px; }   /* 모바일 텍스트 28px × 1.2 = 33.6px → (33.6-26)/2 */
}
/* 태블릿·소형 노트북(1024~1279)은 2단으로 나뉜 칸이 약 296px 뿐이라
   34px 크기로는 이메일 주소가 두 줄로 접힌다. 전화번호와 이메일을 함께 줄여
   '같은 크기' 는 유지하면서 두 줄이 되지 않게 한다. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .rsv-contact-banner .rsv-tel__num { font-size: 26px; }
  .rsv-contact-banner .rsv-tel__icon { margin-top: 3px; }   /* 26px × 1.2 = 31.2px → (31.2-26)/2 */
}
/* ⚠ 767px 이하는 파일 상단(28행)의 '모바일 본문 일괄 14px' 규칙이
   .rsv-tel__num 까지 font-size:14px !important 로 낮춘다.
   글자(14px)가 아이콘(26px)보다 작아지므로 첫 줄 기준 정렬이 오히려 어색하다.
   이 구간만 원래대로 가운데 정렬로 되돌린다. */
@media (max-width: 767px) {
  .rsv-tel { align-items: center; }
  .rsv-tel__icon { margin-top: 0; }
}
.rsv-notes { display: flex; flex-direction: column; gap: 6px; }
.rsv-note { position: relative; padding-left: 15px; font-size: 16px; color: #444444; line-height: 1.7; }
.rsv-note::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 4px; height: 4px; border-radius: 50%; background: #1A1A1A;
}
@media (max-width: 639px) {
  .rsv-tel__num { font-size: 28px; }
  .rsv-note { font-size: 15px; }
}

/* =========================================================
   메인 프로모션 모달 팝업 (index 히어로 '확인하기' 클릭)
   — 상단 이미지/하단 버튼 없이 텍스트 카드. design.css 뒤 로드 → 빌드 불필요
   ========================================================= */
.promo-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.promo-modal.is-open { display: flex; }
.promo-modal__backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.55); }
.promo-modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 480px;
  max-height: 88vh; overflow-y: auto;
  background: #FFFFFF; border-radius: 18px; padding: 0;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.4);
}
.promo-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); color: #1A1A1A; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .2s, color .2s;
}
@media (hover: hover) and (min-width: 1024px) {
  .promo-modal__close:hover { background: #FFFFFF; }
}
/* 상단 이미지 + 본문 + 하단 버튼 */
.promo-content__img { width: 100%; height: 230px; background-size: cover; background-position: center; }
.promo-content__body { padding: 26px 32px 30px; }
.promo-btn {
  display: block; width: 100%; margin-top: 24px; text-align: center;
  background: #3B322D; color: #FFFFFF; padding: 17px; border-radius: 12px;
  font-size: 15px; font-weight: 600; border: 0; cursor: pointer;
  transition: background .3s; text-decoration: none;
}
@media (hover: hover) and (min-width: 1024px) {
  .promo-btn:hover { background: #4C4139; }
}
.promo-badge { display: inline-block; font-size: 13px; font-weight: 600; color: #C98897; background: rgba(208, 99, 152, 0.15); border-radius: 999px; padding: 5px 14px; margin-bottom: 16px; }
.promo-title { font-size: 23px; font-weight: 700; color: #1A1A1A; line-height: 1.4; margin-bottom: 12px; word-break: keep-all; }
.promo-date { font-size: 14px; color: #999999; margin-bottom: 22px; }
/* 시술 한 줄 소개(따옴표 문구) — 제목 아래 강조 리드 */
.promo-quote { font-size: 15px; font-weight: 600; color: #C98897; line-height: 1.6; margin-bottom: 20px; word-break: keep-all; }
/* 목록 뒤 마무리 문단 — promo-list 와 간격 확보 */
.promo-outro { margin-top: 20px; margin-bottom: 0; }
.promo-desc { font-size: 15px; color: #555555; line-height: 1.75; margin-bottom: 12px; word-break: keep-all; }
.promo-desc strong { color: #1A1A1A; font-weight: 600; }
.promo-list { margin: 20px 0 4px; display: flex; flex-direction: column; gap: 11px; }
.promo-list li { position: relative; padding-left: 26px; font-size: 15px; color: #333333; line-height: 1.5; word-break: keep-all; }
.promo-list li::before { content: "\2714"; position: absolute; left: 0; top: 1px; color: #D06398; font-weight: 700; }
/* 에디터로 작성된 이벤트 본문(관리자 게시판 contents) — promo-desc / promo-list 톤과 동일하게 정규화 */
.promo-editor { font-size: 15px; color: #555555; line-height: 1.75; word-break: keep-all; }
.promo-editor > *:first-child { margin-top: 0; }
.promo-editor > *:last-child { margin-bottom: 0; }
.promo-editor p { font-size: 15px; color: #555555; line-height: 1.75; margin-bottom: 12px; word-break: keep-all; }
.promo-editor strong, .promo-editor b { color: #1A1A1A; font-weight: 600; }
.promo-editor ul, .promo-editor ol { margin: 20px 0 4px; display: flex; flex-direction: column; gap: 11px; padding-left: 0; list-style: none; }
.promo-editor li { position: relative; padding-left: 26px; font-size: 15px; color: #333333; line-height: 1.5; word-break: keep-all; }
.promo-editor li::before { content: "\2714"; position: absolute; left: 0; top: 1px; color: #D06398; font-weight: 700; }
.promo-editor ul + p, .promo-editor ol + p { margin-top: 20px; }
.promo-editor blockquote { font-size: 15px; font-weight: 600; color: #C98897; line-height: 1.6; margin: 0 0 20px; padding: 0; border: 0; word-break: keep-all; }
.promo-editor img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
.promo-editor a { color: #C98897; text-decoration: underline; }
.promo-editor table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.promo-editor th, .promo-editor td { border: 1px solid #E8E2DD; padding: 9px 12px; font-size: 14px; }

.promo-price { margin-top: 22px; padding: 16px 18px; background: #F8F5F2; border-radius: 12px; font-size: 15px; color: #555555; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.promo-price__label { width: 100%; font-size: 13px; color: #999999; margin-bottom: 2px; }
.promo-price__old { color: #B0A9A4; text-decoration: line-through; }
.promo-price__arrow { color: #999999; }
.promo-price__new { color: #1A1A1A; font-weight: 700; font-size: 19px; }
.promo-price__vat { color: #999999; font-size: 13px; }
body.promo-open { overflow: hidden; }

/* =========================================================
   병원 둘러보기(/about/tour) — 층 탭 + 스와이퍼
   ---------------------------------------------------------
   히어로(hero-wide) 아래 section-white-pad 안에 들어가는 갤러리 블록.
   층별로 사진을 세로로 길게 나열하지 않고 [좌 층 탭 + 우 스와이퍼] 한 덩어리로 탐색한다.
   구조 : .tourx > [ .tourx__aside(층 탭) + .tourx__stage(스와이퍼·캡션·썸네일) ]
   동작은 design_tour.js (Swiper 8.4.7 · thumbs/keyboard 모듈 사용).
   design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
.tourx { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1024px) { .tourx { flex-direction: row; align-items: flex-start; gap: 56px; } }

/* ---- 좌측 : 층 탭 ---- */
.tourx__aside { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 1024px) { .tourx__aside { flex: 0 0 300px; width: 300px; } }

.tourx__heading { font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: #1A1A1A; }
.tourx__desc    { margin-top: 14px; font-size: 15px; font-weight: 300; line-height: 1.8; color: #666666; }

.tourx__tabs { display: flex; gap: 8px; margin-top: 24px; overflow-x: auto; }
@media (min-width: 1024px) { .tourx__tabs { flex-direction: column; overflow: visible; margin-top: 32px; } }

.tourx__tab {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
  padding: 14px 16px; border: 1px solid #E8E8E8; background: #FFFFFF;
  text-align: left; white-space: nowrap; cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}
@media (hover: hover) and (min-width: 1024px) {
  .tourx__tab:hover { border-color: #1A1A1A; }
}
.tourx__tab.is-active { background: #1A1A1A; border-color: #1A1A1A; }
.tourx__tab-no   { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: #D06398; }
.tourx__tab-name { flex: 1; font-size: 14px; font-weight: 500; color: #1A1A1A; }
.tourx__tab-cnt  { font-size: 12px; color: #999999; }
.tourx__tab.is-active .tourx__tab-no   { color: #E09ABC; }
.tourx__tab.is-active .tourx__tab-name { color: #FFFFFF; }
.tourx__tab.is-active .tourx__tab-cnt  { color: rgba(255, 255, 255, .6); }
/* lg 이상은 층 이름이 길어 줄바꿈을 허용한다 (가로 탭일 때는 nowrap 유지) */
@media (min-width: 1024px) {
  .tourx__tab { white-space: normal; }
  .tourx__tab-name { line-height: 1.4; }
}

/* 모바일 전용 층 정보 텍스트 (모바일 <768px 에서 탭 대신 텍스트로 노출되고 사진 스와이프 시 자동으로 층 정보 변경) */
.tourx__mobile-floor { display: none; }
@media (max-width: 767px) {
  .tourx__tabs { display: none !important; }
  .tourx__mobile-floor {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 14px;
    padding: 0;
    background: transparent;
  }
  .tourx__mobile-floor-no {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #D06398;
    flex-shrink: 0;
  }
  .tourx__mobile-floor-name {
    font-size: 16px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 1.4;
  }
}



/* ---- 우측 : [메인 스와이퍼 + 오버레이] + 썸네일 ----
   lg 이상 : 뷰어(좌) / 세로 썸네일(우) 가로 배치. 그 아래는 뷰어 위에 가로 썸네일이 쌓인다. */
.tourx__stage { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.tourx__viewer { position: relative; flex: 1; min-width: 0; }

/* lg 이상 : 썸네일을 뷰어 오른쪽에 '절대배치' 한다.
   ⚠ flex-row + stretch 로 두면 세로 썸네일 15장의 총 길이가 행 높이를 밀어올려
     컬럼이 메인 사진보다 아래로 길어진다. top/bottom:0 으로 뷰어 높이에 묶어야
     높이가 정확히 같아지고, 넘치는 썸네일은 스와이퍼 안에서 잘린다(드래그로 접근). */
@media (min-width: 1024px) {
  .tourx__stage { display: block; position: relative; }
  .tourx__viewer { width: calc(100% - 144px); }   /* 썸네일 컬럼 132px + 간격 12px */
}

.tourx-main { width: 100%; aspect-ratio: 16 / 10; border: 1px solid #E8E8E8; background: #F9F9F9; }
.tourx-main .swiper-slide { position: relative; overflow: hidden; }
.tourx-main .swiper-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* lg 이상은 사진 원본에 가까운 16:9 */
@media (min-width: 1024px) { .tourx-main { aspect-ratio: 16 / 9; } }

/* 사진 이름 + 카운터/화살표 — 메인 사진 '위쪽'에 얹는다(상단 그라데이션으로 가독성 확보) */
.tourx__bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px 44px;
  background: linear-gradient(to bottom, rgba(26, 26, 26, .75), rgba(26, 26, 26, .25) 55%, rgba(26, 26, 26, 0));
  pointer-events: none;   /* 사진 드래그(스와이프)를 막지 않도록 */
}
.tourx__bar > * { pointer-events: auto; }

.tourx__cap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tourx__cap-floor { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--brand-on-dark, #E09ABC); }
.tourx__cap-name  { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }

.tourx__nav   { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tourx__count { margin-right: 6px; font-size: 13px; letter-spacing: .12em; color: rgba(255, 255, 255, .6); }
.tourx__count em { font-style: normal; font-weight: 700; color: #FFFFFF; }
.tourx__arrow {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .14);
  color: #FFFFFF; cursor: pointer; backdrop-filter: blur(6px);
  transition: background .25s, border-color .25s, color .25s, opacity .25s;
}
@media (hover: hover) and (min-width: 1024px) {
  .tourx__arrow:hover:not(:disabled) { background: #FFFFFF; border-color: #FFFFFF; color: #1A1A1A; }
}
.tourx__arrow:disabled { opacity: .28; cursor: default; }

/* 썸네일 : 모바일은 사진 아래 가로, lg 이상은 뷰어 오른쪽 세로 컬럼 */
.tourx-thumbs { width: 100%; flex-shrink: 0; padding-bottom: 10px; }   /* 아래 여백 = 가로 스크롤바 자리 */
.tourx-thumbs .swiper-slide { width: 104px; height: 66px; }
@media (min-width: 1024px) {
  /* 썸네일 폭 118px + 스크롤바(4px) 와의 간격 10px = 132px (뷰어 width 계산과 짝) */
  .tourx-thumbs { position: absolute; top: 0; right: 0; bottom: 0; width: 132px; height: auto; padding-right: 14px; }
  .tourx-thumbs .swiper-slide { width: 118px; height: 72px; }
}

/* 썸네일 목록 위치 표시 스크롤바 — 세로(lg)일 때는 목록 오른쪽, 가로(모바일)일 때는 목록 아래 */
.tourx-thumbs__bar { background: #EEEEEE; }
.tourx-thumbs__bar .swiper-scrollbar-drag { background: #D06398; }
.tourx-thumbs.swiper-horizontal > .tourx-thumbs__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; width: 100%; z-index: 3;
}
.tourx-thumbs.swiper-vertical > .tourx-thumbs__bar {
  position: absolute; top: 0; bottom: 0; right: 0; width: 4px; height: 100%; z-index: 3;
}
.tourx-thumb {
  position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid #E8E8E8; opacity: .5;
  transition: opacity .25s, border-color .25s;
}
.tourx-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tourx-thumb__floor {
  position: absolute; left: 0; bottom: 0; padding: 2px 6px;
  background: rgba(26, 26, 26, .72); color: #FFFFFF;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
}
@media (hover: hover) and (min-width: 1024px) {
  .tourx-thumb:hover { opacity: 1; }
}
.tourx-thumb.swiper-slide-thumb-active { opacity: 1; border-color: #D06398; }

@media (max-width: 1023px) {
  .tourx__heading { font-size: 22px; }
  .tourx__tabs { padding-bottom: 4px; }
  .tourx__cap-name { font-size: 16px; }
}

/* =========================================================
   [미사용] 구 시설 갤러리 사진 확대 모달(라이트박스)
   ---------------------------------------------------------
   위 탭+스와이퍼 구성으로 개편하면서 쓰지 않는다. 되돌릴 때를 위해 남겨둔다.
   층별 썸네일(.tour-item, input.css) 클릭 → 원본을 모달로 확대.
   같은 층 안에서 좌우 이동 / ESC·배경클릭 닫기 (design_tour.js).
   모달 골격은 promo-modal·inq-modal 과 동일 패턴(fixed + .is-open 토글).
   design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
.tour-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 64px 20px 20px; }
.tour-modal.is-open { display: flex; }
.tour-modal__backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.86); }
.tour-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 1280px; }
.tour-modal__figure { position: relative; width: 100%; background: #111111; }
.tour-modal__img { display: block; width: 100%; max-height: 76vh; object-fit: contain; }
.tour-modal__cap { margin-top: 16px; text-align: center; color: #FFFFFF; font-size: 16px; font-weight: 600; }
.tour-modal__count {
  margin-top: 6px; text-align: center; color: rgba(255, 255, 255, 0.55);
  font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 13px; letter-spacing: 0.15em;
}
.tour-modal__close {
  position: absolute; top: -48px; right: 0; z-index: 3;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #FFFFFF; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
@media (hover: hover) and (min-width: 1024px) {
  .tour-modal__close:hover { background: rgba(255, 255, 255, 0.3); }
}
.tour-modal__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(26, 26, 26, 0.45); color: #FFFFFF; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
@media (hover: hover) and (min-width: 1024px) {
  .tour-modal__nav:hover { background: #D06398; }
}
.tour-modal__nav--prev { left: 16px; }
.tour-modal__nav--next { right: 16px; }
/* 사진이 1장뿐인 층은 좌우 버튼을 숨긴다 (design_tour.js 가 토글) */
.tour-modal.is-single .tour-modal__nav { display: none; }
body.tour-modal-open { overflow: hidden; }

@media (max-width: 767px) {
  .tour-modal { padding: 56px 12px 12px; }
  .tour-modal__img { max-height: 64vh; }
  .tour-modal__close { top: -44px; }
  .tour-modal__nav { width: 40px; height: 40px; }
  .tour-modal__nav--prev { left: 8px; }
  .tour-modal__nav--next { right: 8px; }
  .tour-modal__cap { font-size: 15px; }
}

/* =========================================================
   온라인 문의 모달 팝업 (index 하단 '온라인 문의 안내')
   ========================================================= */
.inq-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.inq-modal.is-open { display: flex; }
.inq-modal__backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.55); }
.inq-modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 560px;
  max-height: 92vh; overflow-y: auto;
  background: #FFFFFF; border-radius: 20px; padding: 40px 40px 30px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.4);
}
.inq-modal__close {
  position: absolute; top: 26px; right: 28px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #F2EEEA; color: #555555; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s;
}
@media (hover: hover) and (min-width: 1024px) {
  .inq-modal__close:hover { background: #D06398; color: #FFFFFF; }
}
.inq-eyebrow { font-family: "Cinzel", serif; font-size: 13px; letter-spacing: 0.2em; color: #C98897; font-weight: 600; margin-bottom: 6px; }
.inq-title { font-size: 26px; font-weight: 700; color: #1A1A1A; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid #EEEEEE; }
.inq-field { margin-bottom: 20px; }
.inq-label { display: block; font-size: 14px; font-weight: 600; color: #333333; margin-bottom: 8px; }
.inq-req { color: #D06398; }
.inq-input, .inq-textarea {
  width: 100%; border: 1px solid #E8E8E8; border-radius: 12px; background: #FAF8F6;
  padding: 14px 16px; font-size: 15px; color: #1A1A1A; outline: none;
  transition: border-color .2s; font-family: inherit;
}
.inq-input::placeholder, .inq-textarea::placeholder { color: #BBBBBB; }
.inq-input:focus, .inq-textarea:focus { border-color: #D06398; }
.inq-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.inq-types { display: flex; flex-wrap: wrap; gap: 10px; }
.inq-type {
  border: 1px solid #E0DAD6; border-radius: 999px; background: #FFFFFF;
  padding: 10px 18px; font-size: 14px; color: #555555; cursor: pointer; transition: all .2s;
}
@media (hover: hover) and (min-width: 1024px) {
  .inq-type:hover { border-color: #D06398; color: #C98897; }
}
.inq-type.is-active { background: #C98897; border-color: #C98897; color: #FFFFFF; }

/* =========================================================
   aesthetic 시술 카드 — 시간(NN MIN) 라벨은 HTML 흐름대로 카드 좌측 상단에 표시.
   (이전에 :has 로 우측 하단으로 이동시키던 규칙은 제거됨 — 좌측 상단 요청으로 원복)
   ========================================================= */
.inq-actions { display: flex; gap: 12px; margin-top: 28px; }
.inq-btn { border-radius: 999px; padding: 16px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all .3s; border: 0; }
.inq-btn--ghost { flex: 0 0 34%; background: #FFFFFF; border: 1px solid #E0DAD6; color: #555555; }
@media (hover: hover) and (min-width: 1024px) {
  .inq-btn--ghost:hover { border-color: #999999; color: #1A1A1A; }
}
.inq-btn--primary { flex: 1; background: #C0827F; color: #FFFFFF; }
@media (hover: hover) and (min-width: 1024px) {
  .inq-btn--primary:hover { background: #B5716E; }
}
.inq-note { text-align: center; font-size: 13px; color: #AAAAAA; margin-top: 18px; }
@media (max-width: 560px) {
  .inq-modal__dialog { padding: 32px 22px 26px; }
  .inq-title { font-size: 22px; }
}

/* =========================================================
   디자인 GNB(design_header.jsp) 텍스트 크기/색상
   - 1depth(gnb-top) 18px / #1C1C1C  (#mainHeader 스코프로 활성·호버 상태색까지 덮음)
   - 2depth 드롭다운(gnb-drop-link) 16px / #1C1C1C  (호버 accent 강조 효과는 유지)
   design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
#mainHeader .gnb-top { font-size: 18px; color: #1C1C1C; }
.gnb-drop-link { font-size: 16px; color: #1C1C1C; }

/* 오시는 길 — 주차 하위 안내(주차 요금/유의사항). 작게 + 앞에 점(·) 목록 마커 (index 지도) */
.park-notes { display: block; margin-top: 7px; }
.park-note { display: block; font-size: 14px; color: #444; line-height: 1.6; padding-left: 12px; text-indent: -12px; }
.park-note::before { content: "·"; color: #D06398; font-weight: 700; margin-right: 6px; }

/* 푸터 법정 안내 링크 (하단 로고행 우측, 로고와 반대편). 클릭 시 위쪽 접이식 패널 토글 */
.footer-legal-links { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.footer-legal-link {
  font-size: 16px; color: #E8E8E8; background: transparent; border: 0; padding: 0;
  line-height: 1.4; cursor: pointer; transition: color 0.2s;
}
.footer-legal-link.is-open { color: #D06398; }
@media (hover: hover) and (min-width: 1024px) {
  .footer-legal-link:hover { color: #D06398; }
}

/* 의료진 카드 '더보기' — 모바일에서도 표시 (기존 .doctor-card__more 가 hidden md:flex 라 모바일 숨김) */
.doctor-card__more { display: flex; }
/* ⚠ '더보기'가 카드 밖으로 밀려나가지 않게 —
   .doctor-card__meta 는 flex nowrap 이고 왼쪽 이름 블록의 min-width 가 auto(=min-content) 라
   이름이 길면 줄어들지 못한다. 그 상태에서 .doctor-card__more 는 flex-shrink:0 이므로
   모자란 폭만큼 '더보기+화살표'가 통째로 카드 오른쪽 밖으로 밀려났다.
   (모바일 2열 그리드는 카드 폭이 159px 뿐이라 이름이 세 글자만 넘어도 39px 씩 튀어나갔다)
   → 이름 블록이 줄바꿈으로 줄어들 수 있게 min-width:0 을 준다. */
.doctor-card__meta > :first-child { min-width: 0; }

/* =========================================================
   섹션 콘텐츠 제목(H2) 크기 전 페이지 통일 — 데스크톱(≥768px) 46px, 모바일 36px.
   페이지마다 제각각이던 각 콘텐츠 섹션의 대표 제목을 하나의 규칙으로 통일한다.
   대상(실제 사용 중인 섹션 제목만):
     section-title(공통 섹션 h2) · subsection-title(하위 섹션) · map-title(오시는 길) ·
     glance-title(한눈에 보는…) · equip-cat__title(…의 다른 장비) ·
     bty-cat-title(beauty 카테고리 대제목) · treatment-heading(vitiligo 치료법 섹션) ·
     aesth-section__title(aesthetic 섹션, 이미 36/46)
   ※ 히어로 페이지 타이틀(page-title 등 H1)·카드 소제목(subject-card__title·bty-dev__title 등)·
     패널 헤더(info-heading-title 등)는 대상 아님.
   ※ about/tour 층 이름은 섹션 대표 제목이 아니라 블록 소제목이라 .tour-floor__title(24px) 별도 — 대상 아님.
   design.css 및 위 커스텀 블록 뒤 로드 → 인라인 유틸(text-[30px]·lg:text-[32px] 등)과
   기존 커스텀(bty-cat-title 40px)까지 모두 눌러 통일. 빌드 불필요.
   ⚠ 새 섹션 대표 제목 클래스를 추가하면 아래 두 목록에 함께 등록할 것.
   ========================================================= */
.section-title,
.subsection-title,
.map-title,
.glance-title,
.equip-cat__title,
.bty-cat-title,
.treatment-heading,
.aesth-section__title { font-size: 36px; }

@media (min-width: 768px) {
  .section-title,
  .subsection-title,
  .map-title,
  .glance-title,
  .equip-cat__title,
  .bty-cat-title,
  .treatment-heading,
  .aesth-section__title { font-size: 46px; }
}

/* =========================================================
   이미지·다크 배경 위 브랜드 컬러 텍스트 가독성 보정
   ---------------------------------------------------------
   브랜드 메인컬러 #D06398 은 채도·명도가 낮아(흰 배경 대비 3.6:1) 사진이나
   검정 패널 위에 얹히면 배경에 묻혀 읽기 어렵다. 색상(hue 331°)은 그대로 두고
   명도만 올린 같은 계열의 밝은 틴트 #E09ABC 로 치환한다(검정 대비 약 9:1).
   사진 위 텍스트에는 옅은 그림자를 더해 밝은 부분에서도 대비를 확보한다.
   ※ 흰 배경 영역의 메인컬러(#D06398)는 그대로 유지 — 여기서만 밝은 톤을 쓴다.
   design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
:root { --brand-on-dark: #E09ABC; }

/* 1) 이미지 내부 세로 오버레이 '주요 효과'
      — pigment(SPECTRA XT·피코플러스)·acne·mole·vascular / lifting(리니어지) */
.fx-overlay .fx-heading,
.fx-overlay .fx-card__label,
.linearz-fx .fx-heading,
.linearz-fx .fx-card__label {
  color: var(--brand-on-dark);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* 본문(흰 글자)도 사진 밝은 부분에서 뭉개지지 않도록 동일한 그림자 */
.fx-overlay .fx-card__text,
.linearz-fx .fx-card__text { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

/* 2) 이미지 배너 오버레이 (lifting 울쎄라피프라임 등) */
.bty-banner__body .bty-banner__eyebrow,
.device-banner__body .device-banner__eyebrow {
  color: var(--brand-on-dark);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* 3) 다크 패널 공통 훅 — 어두운 사진/검정 배경 섹션의 컨테이너에 on-dark 를 부여하면
      내부 브랜드컬러 텍스트가 일괄 보정된다. (예: skinbooster #re2o 리투오)
      ⚠ 새로 어두운 배경 섹션을 만들면 컨테이너에 on-dark 를 붙일 것. */
.on-dark .fx-heading,
.on-dark .fx-card__label,
.on-dark .area-label,
.on-dark .spec-label,
.on-dark .device-tag,
.on-dark .bty-banner__eyebrow,
.on-dark .bty-dark__check-icon { color: var(--brand-on-dark); }
/* ※ aesthetic 의 aesth-card-dark 는 위 495~499 블록에서 이미 흰 카드로 전환됐으므로
      (이름만 dark) 대상 아님 — 흰 배경에서는 메인컬러 #D06398 이 그대로 맞다. */





/* =========================================================
   백반증(vitiligo) 치료법 카드 썸네일 — 플레이스홀더 → 실사진 교체
   - treat-thumb__img : treat-thumb 영역을 꽉 채우는 시술 사진 (표피/펀치 이식술)
   - treat-thumb__frame : 배경이 투명한 장비 컷(엑시머 벨로시티)용 프레임.
     흰 배경 + 연한 테두리 박스 안에 여백을 두고 장비를 contain 배치.
   design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
.treat-thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.treat-thumb__frame {
  position: absolute; inset: 0;
  background: #FFFFFF; border: 1px solid #E8E8E8; border-radius: 4px;
}
.treat-thumb__frame .treat-thumb__img { object-fit: contain; padding: 7%; }

/* =========================================================
   질환(disease) 핀포인트 레이저 배너 — 장비 사진 박스.
   장비소개(equip-card__thumb)와 동일하게 흰 배경 + contain 배치.
   기기 사진이 흰 배경 세로형이라 object-cover 로 채우면 잘리기 때문.
   design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
.pinpoint-thumb {
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.pinpoint-thumb__img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.7s ease; }
@media (hover: hover) and (min-width: 1024px) {
  .group:hover .pinpoint-thumb__img { transform: scale(1.05); }
}
@media (max-width: 639px) {
  .pinpoint-thumb { padding: 1rem; }
}

/* =========================================================
   에스테틱(aesthetic) 최하단 스페셜 레이저 배너 — 엔진리프팅(N-gine).
   질환(disease) 핀포인트 배너와 같은 마크업/클래스를 재사용하고,
   여기서는 (1) 위 섹션(등 케어)과 상단 여백이 겹치지 않도록 padding-top 제거
        (2) 본문을 점(·) 불릿 목록으로 쓰기 위한 리스트 스타일만 추가한다.
   design.css 뒤 로드 → 빌드 불필요.
   ========================================================= */
.aesth-section--laser { padding-top: 0; }
.pinpoint-desc--list { list-style: none; margin: 0; padding: 0; }
.pinpoint-desc__item { display: block; padding-left: 12px; text-indent: -12px; }
.pinpoint-desc__item + .pinpoint-desc__item { margin-top: 10px; }
.pinpoint-desc__item::before { content: "·"; color: #D06398; font-weight: 700; margin-right: 6px; }

/* 장비 사진 미세 축소 — 원본 여백이 적어 옆 장비보다 커 보이는 컷에만 붙인다.
   (.img-contain-zoom 은 absolute inset-0 이라, transform 대신 inset 을 줘야
    hover 확대(group-hover:scale-105) 와 충돌하지 않는다)
   현재 사용: beauty/vascular 브이빔, beauty/acne Gold PTT. design.css 뒤 로드 → 빌드 불필요. */
/* ⚠ 축소는 inset 이 아니라 padding 으로 준다.
   .img-contain-zoom 은 absolute inset-0 + w-full/h-full 이라
   - inset 만 주면 크기는 그대로 오른쪽 아래로 밀리고,
   - 거기에 width/height:auto 를 더하면 원본 크기 기준으로 왼쪽에 붙는다.
   padding 은 box-sizing:border-box 덕에 표시 영역만 줄여 object-contain 중앙 정렬이 유지된다. */
.img-contain-zoom--sm { padding: 9%; }

/* 수액(beauty/iv) 카드 — 수액 이름 아래 분류 문구.
   같은 카드의 아이콘(iv_icon_0*.svg) 과 동일한 색을 쓴다. */
.iv-name__sub { color: #AF527F; }

/* 보톡스·필러(beauty/botox) 썸네일 — 클릭 시 대표 이미지 교체 기능을 제거해
   더 이상 누를 수 없으므로 .gallery-thumb 의 cursor-pointer 를 되돌린다.
   (해당 클래스는 이 페이지에서만 사용) design.css 뒤 로드 → 빌드 불필요. */
.gallery-thumb { cursor: default; }

/* 제품 사진 박스 4면 테두리 (beauty/botox 보톡스·필러).
   .bty-media--product 는 텍스트 칸과 맞닿는 면의 보더를 지우도록 되어 있어
   (lg:border-l-0 / rev 는 lg:border-r-0) 한쪽만 열려 보인다.
   이 클래스를 함께 주면 사방이 동일하게 보인다.
   ※ 두 번째 셀렉터는 .bty-split--rev .bty-media--product 와 특이성을 맞추기 위한 것.
   design.css 뒤 로드 → 빌드 불필요. */
.bty-media--framed,
.bty-split--rev .bty-media--framed { border: 1px solid #E5E5E5; }

/* =========================================================
   히어로 eyebrow 라인 색 통일 — 검정(#1A1A1A)
   페이지마다 라인 클래스가 달라 색이 검정/핑크로 섞여 있었다.
   - .hero-eyebrow-line  : bg-mellow-black (대부분의 페이지, 기준색)
   - .sub-hero__eyebrow-line : bg-mellow-accent → about/branch·about/location
   - .aesth-hero__line       : bg-mellow-accent → aesthetic
   아래 둘만 기준색으로 맞춘다. 옆의 영문 eyebrow 텍스트는 메인컬러 유지.
   design.css 뒤 로드 → 빌드 불필요. */
.sub-hero__eyebrow-line,
.aesth-hero__line { background-color: #1A1A1A; }

/* =========================================================
   스킨부스터(beauty/skinbooster) 제품컷 — 박스 높이는 텍스트 칸과 맞추고, 이미지 크기만 통일
   제품 이미지 4장의 원본 비율이 제각각(리쥬란 1.18 / 쥬베룩 0.96 / 스컬트라 0.71 / 리투오 1.31)
   이고 원본 여백도 달라(리쥬란·리투오는 여백 있음 / 쥬베룩·스컬트라는 꽉 참),
   .bty-split 의 items-stretch 로 늘어난 박스에 object-contain 을 쓰면
   설명이 긴 블록일수록 이미지가 과하게 확대된다.
   → 박스는 stretch 그대로 두어(=텍스트 칸과 같은 높이) 좌우 단 높이를 맞추고,
     이미지에만 높이 상한 + margin:auto(absolute inset-0 기준 상하좌우 중앙)를 줘서
     네 컷의 표시 크기를 맞춘다. 여백은 .bty-media--product 의 p-8 lg:p-12 와 이 상한이 함께 만든다.
   design.css 뒤 로드 → 빌드 불필요. */
.sb-media .img-contain-zoom {
  margin: auto;
  max-height: 340px;
}
/* 원본 캔버스에 제품이 꽉 차 있는 컷(쥬베룩·스컬트라)은 높이 상한을 조절해 크기를 맞춘다 */
.sb-media .sb-img--sm { max-height: 260px; }
.sb-media .sb-img--md { max-height: 300px; }

/* =========================================================
   섹션 상하 여백 축소 — 백반증(vitiligo)·피부질환(disease) 전용
   두 페이지가 쓰는 섹션 클래스의 기본 상하 패딩이 과해(아래) 스크롤이 길어진다.
     .section-bg-y / .section-white-y  : py-24 lg:py-40 (96 / 160px)
     .section-white-pad / .section-mellow-y : py-20 lg:py-32 (80 / 128px)
   → 화면 크기와 무관하게 80px 로 통일한다.
   ⚠ 위 클래스들은 다른 페이지도 함께 쓰므로 클래스 자체를 고치지 않고,
     두 페이지의 <section> 에만 .sec-tight 를 덧붙여 적용한다.
   design.css 뒤 로드 → 인라인 유틸(py-*)까지 덮으며 빌드 불필요. */
.sec-tight { padding-top: 80px; padding-bottom: 80px; }

/* =========================================================
   공간 안내(index #floor-guide) — 사진 슬라이드 + 좌측 상단 층 라벨
   · 사진 4장은 겹쳐 두고 4초마다 자동 전환(design_main.js). 각 사진에는
     "몇 층 · 어디" 라벨을 좌측 상단에 얹어 자동 전환 중에도 위치를 알 수 있게 한다.
   · PC(lg~)는 우측 목록(.floor-panel) hover 로 직접 고를 수 있고(그동안 자동 전환 정지),
     모바일(≤1023px)은 같은 목록을 사진 박스 아래에 세로로, 크기를 줄여 노출한다.
     hover 가 없으므로 모바일은 탭(click)으로 선택한다(design_main.js).
   · 층 라벨(.floor-shot__label)은 자동 슬라이드 중 현재 사진을 알려주는 모바일 전용.
     PC 는 우측 목록이 현재 층을 보여주므로 라벨을 감춘다.
   ========================================================= */
.floor-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; z-index: 0; transition: opacity .7s ease;
}
.floor-shot.is-active { opacity: 1; z-index: 1; }
.floor-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.floor-shot__label {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: none; align-items: center; gap: 7px;
  max-width: calc(100% - 32px);
  padding: 9px 16px; border-radius: 999px;
  background: rgba(26, 26, 26, 0.6); color: #FFFFFF;
  font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.floor-shot__label b { color: #E09ABC; font-weight: 700; }
@media (max-width: 1023px) {
  /* 모바일 층 목록 — 마크업이 flex-col(order-1 사진 / order-2 목록)이라
     별도 배치 없이 사진 박스 아래에 세로로 붙는다. PC 치수(p-8, 36px 숫자 등)는
     모바일에서 과하므로 여기서 축소한다. */
  .floor-item { padding: 13px 16px; }
  .floor-label-wrap { gap: 14px; }
  .floor-number { font-size: 22px; width: 32px; }
  .floor-title { font-size: 14px; }
  .floor-arrow { font-size: 13px; }
  .floor-shot__label {
    display: inline-flex;
    top: 12px; left: 12px; padding: 8px 14px; font-size: 13px;
  }
}

/* 백반증 페이지(vitiligo) — 백반증 유형별 맞춤 치료법 하단 설명 문단 18px */
.treatment-lead {
  font-size: 18px;
  line-height: 1.8;
}

/* 에스테틱 페이지(aesthetic) — 카드 내부 시간(MIN) 텍스트: 검정 글자 + 핑크 액센트(#D06398) 밑줄 라인 */
.aesth-time,
.aesth-time--line {
  display: inline-block;
  color: #1A1A1A !important;
  font-weight: 600;
  border-bottom: 2px solid #D06398 !important;
  padding-bottom: 2px;
}

/* =========================================================
   ⚠ 노트북·맥북(1024~1919px)에서 가로형 이미지가 정사각형으로 찌그러지는 문제 (2026-08-10)

   증상 : 가로형 사진이 정사각형/세로형이 되며 object-fit:cover 로 좌우가 잘림.
          (메인 '공간 안내', 백반증 정기포토미팅·표피이식, 메인 네이버지도)
   원인 : 세 곳 모두 이미지 높이를 '자기 폭에 대한 비율'이 아니라
          '옆 칸(형제 요소)의 높이' 또는 '고정 px' 로 정해 두었다.
          화면이 좁아지면 이미지 폭만 줄고 높이는 그대로라서 비율이 무너진다.
          결과적으로 1920px 화면에서만 우연히 가로형이 되는 구조였다.

          예) 메인 공간 안내 — 사진 폭은 콘텐츠의 50%, 높이는 우측 층 목록이 결정
              1920 → 800×500 (16:10 가로형)  /  1440 → 560×500 (정사각)  /  1280 → 480×500 (세로형)

   원칙 : 높이를 '폭에 대한 비율'로 되돌린다. 1920px 데스크톱의 현재 화면은 그대로 유지.
   ========================================================= */

/* ---------- ① 메인 '공간 안내'(#floor-guide) 사진 ----------
   ::before 로 폭의 62.5%(=16:10) 만큼 최소 높이를 만들어, 높이가 폭을 따라가게 한다.
   (aspect-ratio 는 flex stretch 아이템에서 무시되므로 padding-top 기법을 쓴다)
   동시에 우측 목록 항목의 세로 패딩을 줄여(2.5rem→1rem) 목록이 사진보다 높아지지 않게 하고,
   flex:1 로 사진 높이를 4등분해 채운다.
   → 1920: 800×500 (기존 499px 과 동일, 화면 변화 없음) / 1512: 596×373 / 1440: 560×350 */
@media (min-width: 1280px) {
  .floor-media::before { content: ''; display: block; padding-top: 62.5%; }
  .floor-panel .floor-item { flex: 1 1 0; padding-top: 1rem; padding-bottom: 1rem; }
}
/* 1024~1279 는 2단 배치 자체가 무리다 — 사진 폭이 480px 인데 층 목록 4개의 최소 높이가 그보다 크다.
   이 구간만 사진(위) / 목록(아래) 세로 배치로 떨어뜨려 사진이 콘텐츠 전체 폭을 4:3 으로 쓰게 한다. */
@media (min-width: 1024px) and (max-width: 1279px) {
  #floor-guide > div:last-child { flex-direction: column; }
  .floor-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-right-width: 0;
    border-bottom-width: 1px;
  }
  .floor-panel { width: 100%; }
  .floor-panel .floor-item { padding: 1.125rem 1.75rem; }
}

/* ---------- ② 백반증(/vitiligo) 정기포토미팅 · 표피이식 사진 ----------
   기존 lg 규칙이 thumb 을 height:100% 로 두어 높이가 '좌측 카드 3개'에 종속됐다.
   화면이 좁아질수록 좌측 카드는 줄바꿈으로 높이가 늘고 사진 폭은 줄어 → 세로형으로 잘렸다.
   (1440 기준 약 266×374 = 세로형). 모바일과 동일하게 4:3 고정으로 되돌린다.
   1920 에서도 기존 비율이 약 1.30 이라 4:3(1.33)과 사실상 같아 데스크톱 변화는 없다. */
@media (min-width: 1024px) {
  .pm-media__item { align-items: center; }
  .pm-media__thumb { aspect-ratio: 4 / 3; height: auto; }
}

/* ---------- ③ 메인 '오시는 길' 네이버지도 ----------
   지도 높이는 570px 고정인데 폭은 (콘텐츠폭 - 정보패널 600px) 이라 화면이 좁을수록 세로로 길어졌다.
   1920: 1000×570(가로형) / 1512: 592×570(정사각) / 1440: 520×570(세로형) / 1280: 360×570(세로 막대)
   → 1920 이상은 현행 유지, 그 미만은 패널 폭과 지도 높이를 함께 줄인다. */
@media (min-width: 1440px) and (max-width: 1919px) {
  .map-wrap.map-wrap--compact { grid-template-columns: 1fr 420px; }
  .map-canvas.map-canvas--compact { height: 460px; }
}
/* 1024~1439 는 지도 칸이 너무 좁아진다 → 지도(위) / 정보패널(아래) 세로 배치 */
@media (min-width: 1024px) and (max-width: 1439px) {
  .map-wrap.map-wrap--compact { grid-template-columns: 1fr; }
  .map-canvas.map-canvas--compact {
    height: 420px;
    border-right-width: 0;
    border-bottom-width: 1px;
  }
}
/* 패널이 좁아지는 구간에서는 주소 목록의 width:max-content(약 447px)를 풀어 줄바꿈시킨다.
   (그대로 두면 .map-wrap > * 의 min-width:0 에 눌려 오른쪽이 잘린다) */
@media (max-width: 1919px) {
  #map .map-panel .addr-list { width: auto; }
}

/* =========================================================
   ⚠ 노트북 디스플레이 배율 125% 에서 줄바꿈이 어색해지는 문제 (2026-08-10)

   증상 : 꼬리 단어가 홀로 다음 줄로 떨어진다.
          예) "시간의 흐름으로 달라진 피부 / 탄력," · "피부 상태와 고민을 종합적으로 / 평가하여,"
   원인 : 제목·본문의 줄 구성이 1920px 화면 기준으로만 맞춰져 있었다.
          125% 배율 노트북은 CSS 뷰포트가 1536px 이 되어 히어로 좌측 컬럼이
          800px → 608px 로 줄어드는데, 폰트 크기(px 고정)와 <br> 위치는 그대로다.
          → <br> 로 고정한 각 조각이 컬럼 폭을 넘겨 한 번 더 접히고, 남은 꼬리가 고아 단어가 된다.
            .aesth-hero__desc 20px × 35자 ≈ 700px  (1920: 768px ✅ / 1536: 608px ❌)
   대응 : ① 줄바꿈 품질 자체를 올린다(전 페이지 공통 안전장치)
          ② 1280~1599 구간은 제목을 한 단계 작은 크기로 되돌려 한 줄 수용량을 늘린다
          ③ 캡처로 확인된 두 페이지는 심미용 <br> 을 해당 구간에서 해제해 자연 줄바꿈에 맡긴다
   ========================================================= */

/* ---------- ① 전 페이지 공통 — 한글 어절 유지 + 고아 단어 방지 ----------
   word-break:keep-all → 한글이 단어 중간에서 끊기지 않는다.
   text-wrap:balance(제목) → 여러 줄의 길이를 고르게 나눠 마지막 줄만 짧아지는 것을 막는다.
   text-wrap:pretty(본문) → 마지막 줄에 단어 하나만 남는 고아 단어를 방지한다.
   ※ 미지원 브라우저는 기존 줄바꿈으로 조용히 폴백된다(레이아웃 영향 없음). */
.page-title,
.page-title-sub,
.bhero__title,
.bhero__title-sm,
.sub-hero__title,
.aesth-hero__title,
.section-title,
.subsection-title,
.map-title {
  word-break: keep-all;
  text-wrap: balance;
}
.hero-desc,
.hero-lead,
.sub-hero__desc,
.aesth-hero__desc,
.vitiligo-hero-desc,
.doctors-lead,
.systematic-desc,
.facility-desc,
.philosophy-lead,
/* 카드 안 설명문 — 폭이 좁아 고아 단어가 특히 잘 생긴다 */
.aesth-card__desc,
.subject-card__desc,
.facility-card__desc,
.diagnosis-card__desc,
.iv-card__list,
.pm-card__desc,
.pm-media__sub,
.treatment-lead {
  word-break: keep-all;
  text-wrap: pretty;
}

/* ---------- ② 1280~1599 : 제목을 한 단계 작은 크기로 ----------
   xl(1280px) 부터 제목이 커지도록 되어 있으나, 그 크기는 컬럼이 800px 인 1920 화면 기준이다.
   1280~1599 에서는 컬럼이 608~700px 뿐이라 같은 크기로는 의도한 줄이 들어가지 않는다.
   → lg 단계 크기로 되돌린다(1600px 이상은 기존 그대로). */
@media (min-width: 1280px) and (max-width: 1599px) {
  .page-title      { font-size: 56px; }
  .page-title-sub  { font-size: 56px; }
  .bhero__title    { font-size: 52px; }
  .bhero__title-sm { font-size: 48px; }
  .sub-hero__title { font-size: 48px; }
}

/* ---------- ③ 심미용 <br> 해제 (해당 구간만) ----------
   의미 단위 줄바꿈은 남기고, 폭 맞추기용 <br> 만 푼다.
   · .bhero__title 은 첫 줄("리프팅 · 탄력 · 주름")의 <br> 을 유지해야 하므로
     강조 문구(span) 안쪽 <br> 만 해제한다.
   · .aesth-hero__desc 의 <br> 은 전부 폭 맞추기용이다.
     (sm~lg 전용 <br class="hidden sm:block lg:hidden"> 은 이 구간에서 이미 숨겨져 있어 영향 없음) */
@media (min-width: 1024px) and (max-width: 1599px) {
  .bhero__title span br { display: none; }
  .aesth-hero__desc br  { display: none; }
}
/* 에스테틱 카드 설명(14곳)의 <br class="hidden lg:block"> — 전 구간 해제.
   카드는 3열 그리드라 1920px 화면에서도 한 칸이 512px(텍스트 448px)뿐인데,
   <br> 로 끊어둔 첫 조각이 29자(≈464px)라 데스크톱에서도 이미 한 번 더 접히고 있었다.
     "…하이퍼럭스 / 기기 관리와" + <br> → "재생 레이저가 포함된 기본 케어"
   → <br> 을 걷어내고 위 text-wrap:pretty 에 맡기면 두 줄이 고르게 나뉜다.
   (카드 desc 안에 <br> 이 있는 페이지는 aesthetic 뿐이라 다른 카드에는 영향이 없다) */
.aesth-card__desc br { display: none; }

/* =========================================================
   ⚠ 소형 모바일(구형 폰 등 폭 좁은 화면) 글자 겹침 수정 (2026-08-10)

   공통 원인 : 이 사이트는 body 에 word-break:keep-all 이 걸려 있다(위 24행 부근).
              한글이 어절 중간에서 끊기지 않아 읽기는 좋지만, 칸보다 긴 단어는
              줄바꿈되지 못하고 그대로 넘쳐 옆 칸 글자와 겹친다.
   ========================================================= */

/* ---------- ① 장비 스펙 3열 표 (파장 / 유형 / 냉각 방식) ----------
   360px 폰 기준 한 칸이 약 104px(패딩 제외 92px)인데
   "알렉산드라이트," 한 단어가 15px × 8자 ≈ 120px 라 옆 칸 "DCD…" 위로 넘쳤다.
   overflow-wrap:anywhere → 어절 단위 줄바꿈은 그대로 두되,
   칸보다 긴 단어일 때만 강제로 끊는다(겹침 제거).
   min-width:0 → grid 자식이 내용 최소폭에 밀려 칸을 넘기지 않게 한다. */
.device-split__body .grid-cols-3 > div,
.device-split__body .grid-cols-3 > div > *,
.spec-label,
.spec-value {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* 아주 좁은 화면에서는 값 글자와 좌우 여백을 조금 줄여 한 칸에 들어갈 확률을 높인다 */
@media (max-width: 479px) {
  .device-split__body .grid-cols-3 > div { padding-left: 8px; padding-right: 8px; }
  .device-split__body .grid-cols-3 > div:first-child { padding-left: 0; }
  .device-split__body .grid-cols-3 > div:last-child { padding-right: 0; }
  .device-split__body .grid-cols-3 strong { font-size: 13px; }
}

/* ---------- ② 의료진 카드(2열 그리드) 이름 · 직책 · '더보기' 겹침 ----------
   .doctor-card__meta 는 flex(space-between) 인데 자식에 min-width:0 이 없어 축소되지 않는다.
   360px 폰 기준 카드 폭이 약 145px 뿐인데
     "한승경"(20px×3=60) + "대표원장"(15px×4=60) + "더보기 ›"(약 55) ≈ 187px
   라 이름·직책·더보기가 서로 겹치고 영문 직책까지 카드 밖으로 밀려났다.
   → 좁은 화면에서는 '더보기' 글자만 감추고(화살표는 남겨 눌러볼 수 있는 카드임을 알린다),
     직책을 이름 아래 줄로 내린다.
     글자 36px 가 빠지면서 이름(60) + 직책줄 + 화살표(12) + gap(12) 로 카드 폭 안에 들어온다. */
@media (max-width: 639px) {
  .doctor-card__more-text { display: none; }
  .doctor-card__meta > div { min-width: 0; }
  .doctor-card__name .role-suffix {
    display: block;
    margin-top: 2px;
    font-size: 13px;
  }
}

/* =========================================================
   ⚠ 피부질환(/disease) 소형 폰에서 문단이 과도하게 길어지는 문제 (2026-08-10)

   원인 : 진료과목 카드(.subject-card)의 일러스트가 120px 로 고정이라
          좁은 화면에서 텍스트가 쓸 폭을 거의 남기지 않는다.
            360px 화면 → 섹션패딩 48 · 카드패딩 64 · 일러스트+gap 140 을 빼면 텍스트 폭 108px
            → 15px 글자 기준 한 줄 7자. "여드름, 모낭염, 아토피피부염…" 목록이 세로로 한없이 늘어난다.
   대응 : 화면 폭에 따라 일러스트·카드 여백·줄간격을 함께 줄여 텍스트 폭을 되찾는다.
          모바일을 한 덩어리로 보지 않고 중형(391~479) / 소형(≤390) 두 단계로 나눈다.
            중형 430px → 텍스트 폭 222px (약 15자/줄)
            소형 360px → 텍스트 폭 186px (약 12자/줄, 기존 7자 대비 약 1.7배)
   ※ width/height 는 JSP 인라인 style 로 박혀 있어 !important 로만 덮을 수 있다.
   ========================================================= */

/* ---------- 중형 폰 (391~479px) ---------- */
@media (max-width: 479px) {
  .subject-card { padding: 1.5rem; }
  .subject-card__no { width: 96px !important; }
  .subject-card .shrink-0 > div {
    width: 96px !important; height: 96px !important;
    max-width: 96px !important; max-height: 96px !important;
  }
  .subject-card__title { font-size: 18px; margin-bottom: 0.625rem; }
  .subject-card__desc,
  .diagnosis-card__desc,
  .systematic-desc,
  .iv-card__list { line-height: 1.7; }
  /* 카드 안쪽 여백 — 본문이 쓸 가로폭 확보 */
  .iv-card { padding: 1.5rem; margin-bottom: 1.5rem; }
  .dg-row__aside { padding: 1.5rem 1.5rem 0; }
  .dg-row__body { padding: 1.5rem; }
}

/* ---------- 메인 '시그니처 프로그램' 카드 (#facility) ----------
   카드 제목이 "울덴서티(Ulthera+Density)" 처럼 공백이 하나도 없는 경우,
   전역 word-break:keep-all 아래에서는 한 덩어리로 취급되어 절대 줄바꿈되지 않는다.
     320px 화면 → 카드 80vw = 256px, body 패딩 64px 을 빼면 텍스트 폭 192px
     제목 실제 폭 ≈ 267px → 75px 넘쳐 잘려 보였다.
   overflow-wrap:anywhere → 칸보다 긴 덩어리일 때만 강제로 끊어 카드 안에 들어오게 한다. */
.facility-card__title,
.facility-card__desc { overflow-wrap: anywhere; }
/* 소형 화면에서는 카드 안쪽 여백도 줄여 글자가 쓸 폭을 넓힌다(320px 기준 192px → 216px) */
@media (max-width: 479px) {
  .facility-card__body { padding: 1.25rem; }
}

/* 썸네일 사진 좌우 잘림 —
   .facility-card__thumb 는 높이가 320px 고정인데 카드 폭은 모바일에서 80vw 라
   화면이 좁을수록 칸이 세로로 길어지고, object-fit:cover 가 사진의 좌우를 잘라낸다.
     320px 화면 → 칸 256×320(비율 0.8) vs 원본 1.10~1.25 → 좌우 각 62px(약 33%) 손실
     → 사진 안에 들어 있는 글자의 왼쪽이 사라져 보였다.
   원본 5장의 가로/세로 비율이 1.10~1.25 이므로, 칸 비율을 그중 가장 넓은 값보다
   조금 크게(1.28) 잡아 어떤 사진도 좌우로는 잘리지 않게 한다.
   (대신 세로로 긴 사진은 위아래가 조금 잘리지만, 글자는 좌우 기준이라 영향이 없다)
   ※ 데스크톱(1024~)은 카드 360×320 = 1.125 로 원본과 거의 맞아 그대로 둔다. */
@media (max-width: 1023px) {
  .facility-card__thumb { height: auto; aspect-ratio: 1.28; }
}

/* ---------- 소형·구형 폰 (≤390px) ---------- */
@media (max-width: 390px) {
  .subject-card { padding: 1.25rem; }
  .subject-card__no { width: 72px !important; }
  .subject-card .shrink-0 > div {
    width: 72px !important; height: 72px !important;
    max-width: 72px !important; max-height: 72px !important;
  }
  /* 일러스트와 글 사이 간격도 함께 축소(기본 gap-5 = 20px) */
  .subject-card .flex { gap: 0.875rem; }
  .subject-card__desc,
  .diagnosis-card__desc,
  .systematic-desc,
  .iv-card__list { line-height: 1.65; }
  .iv-card { padding: 1.25rem; margin-bottom: 1.25rem; }
  .dg-row__aside { padding: 1.25rem 1.25rem 0; }
  .dg-row__body { padding: 1.25rem; }
}