/* ============================================================
       TOKENS
    ============================================================ */
:root {
  /* ── 골드 팔레트 ── */
  --gold: #c9a76c; /* 챔페인 골드 (이미지 참고) */
  --gold-dk: #a67c30; /* 다크 골드 */
  --gold-lt: #e2c88a; /* 라이트 골드 */
  --gold-pale: #faf6ed; /* 페일 골드/크림 */

  /* ── 베이지/크림 팔레트 ── */
  --beige: #faf5ee; /* 아이보리 크림 */
  --beige-md: #f0e8d8; /* 소프트 베이지 */
  --beige-dk: #c8b090; /* 골드-탄 */

  /* ── 딥 네이비 (에스프레소 브라운 → 딥 네이비) ── */
  --navy: #0e0f1c; /* 딥 네이비 블랙 */
  --navy-2: #1a1c2e; /* 다크 네이비 */
  --navy-3: #2c2e4a; /* 미디엄 네이비 */
  --navy-4: #2c2c43;

  /* ── 텍스트 ── */
  --text: #1a1a28; /* 딥 네이비 블랙 */
  --text-md: #36384e; /* 미디엄 네이비 그레이 */
  --text-lt: #8888a0; /* 쿨 라이트 그레이 */

  --white: #ffffff;
  --black: #000000;
  --side-w: 240px;
  --mob-hdr: 56px;
  --mob-bar: 56px;
}

/* ============================================================
       RESET
    ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-break: auto-phrase;
}
html {
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  font-family:
    'Noto Sans KR',
    -apple-system,
    'Apple SD Gothic Neo',
    sans-serif;
  background: #f9f4ed;
  color: var(--text);
  overflow-x: hidden;
}
/* 영어 텍스트(lang="en")에는 Playfair Display 적용 (한글은 Noto Sans KR로 폴백) */
[lang='en'] {
  font-family: 'Playfair Display', 'Noto Sans KR', sans-serif;
}
img {
  max-width: 100%;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ============================================================
       DESKTOP SIDEBAR  (hidden on mobile)
    ============================================================ */
.desk-nav {
  display: none; /* mobile: hidden */
}

/* ============================================================
       MOBILE HEADER
    ============================================================ */
.header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: var(--mob-hdr);
  background: var(--beige);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 700;
  border-bottom: 1px solid var(--beige-md);
}
.ham {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.ham span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--navy);
  transition: all 0.3s;
}
.ham.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.ham.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.ham.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
.hd-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.hd-logo img {
  width: auto;
  height: 35px;
}

.hd-circle {
  width: 35px;
  height: 35px;
  border: 1.5px solid var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hd-circle svg {
  width: 20px;
  height: 20px;
}
.hd-words {
  line-height: 1.25;
}
.hd-words .l1 {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 2px;
}
.hd-words .l2 {
  font-size: 7px;
  color: var(--navy-2);
  letter-spacing: 1.5px;
}
.hd-spacer {
  width: 38px;
}

/* ============================================================
       MOBILE OVERLAY + SIDENAV
    ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 15, 28, 0.65);
  z-index: 800;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.overlay.show {
  opacity: 1;
  visibility: visible;
}

.sidenav {
  position: fixed;
  top: 0;
  left: -100%;
  width: min(55vw, 280px);
  height: 100%;
  background: var(--gold);
  z-index: 900;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidenav.open {
  left: 0;
}
.sn-head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--beige);
}
.sn-brand {
  color: var(--navy);
}

.sn-brand img {
  width: auto;
  height: 28px;
}

.sn-close {
  color: var(--navy);
  font-size: 19px;
  line-height: 1;
  padding: 10px;
  position: absolute;
  top: 10px;
  right: 10px;
}
.sn-emblem {
  background: var(--beige);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
  position: relative;
}
.sn-emblem img {
  width: 70%;
  height: auto;
}

.sn-list {
  flex: 1;
}

.sn-1d {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}
.sn-1d:hover,
.sn-1d.on {
  color: var(--white);
}
.sn-arrow {
  display: flex;
  align-items: center;
  color: var(--white);
  opacity: 0.6;
  transition:
    transform 0.3s ease,
    opacity 0.2s;
  flex-shrink: 0;
}
.sn-1d:hover .sn-arrow {
  opacity: 1;
}
.sn-1d.on .sn-arrow {
  transform: rotate(90deg);
  opacity: 1;
  color: var(--white);
}
.sn-2d {
  max-height: 0;
  overflow: hidden;
  background: var(--beige-md);
  transition: max-height 0.35s ease;
}
.sn-2d.open {
  max-height: 300px;
}
.sn-2d a {
  display: block;
  padding: 11px 20px 11px 32px;
  color: var(--navy-2);
  font-size: 13px;
  transition: color 0.2s;
}
.sn-2d a:hover {
  color: var(--white);
}
.sn-res {
  display: block;
  padding: 14px 20px;
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
}

/* ============================================================
       MAIN (mobile default)
    ============================================================ */
.page {
  max-width: 430px;
  margin: 0 auto;
  background: var(--white);
  min-height: 100vh;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
}
main {
  padding-top: var(--mob-hdr);
  padding-bottom: calc(var(--mob-bar)+8px);
}

/* ============================================================
       BOTTOM BAR (mobile)
    ============================================================ */
.btm-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: var(--mob-bar);
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 700;
  border-top: 1px solid var(--beige-md);
}
.btn-cons {
  background: var(--gold);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: background 0.2s;
}
.btn-cons:hover {
  background: var(--gold-dk);
  color: var(--white);
}
.btn-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  background: var(--navy);
  color: var(--white);
}

/* ============================================================
       SHARED ELEMENTS
    ============================================================ */
.badge {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 14px;
  margin-bottom: 10px;
}
.badge-line {
  display: inline-block;
  border: 1px solid var(--gold);
  color: var(--gold-dk);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
.sec-title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.sec-title.w {
  color: var(--white);
}
.divider {
  width: 28px;
  height: 1.5px;
  background: var(--gold);
  margin: 12px 0 26px;
}

/* ============================================================
       HERO
    ============================================================ */
#story {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
/* 배경 영상 (1920*1080) */
.story-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.story-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 모바일: 위는 투명 → 아래는 네이비 */
  background: linear-gradient(to bottom, transparent 0%, var(--navy) 60%);
  pointer-events: none;
}
#story > .hero-desktop-wrap {
  min-height: 71vh;
}
#story > .hero-desktop-wrap,
#story > .hero-bottom-wrap {
  position: relative;
  z-index: 2;
}
.hero-visual {
  width: 100%;
  height: 370px;
  overflow: hidden;
  position: relative;
}
.hero-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #0e0f1c 0%, #1a1c2e 60%, #0e0f1c 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.hero-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(201, 167, 108, 0.13) 0%, transparent 70%);
  border-radius: 50%;
}
.hero-doc {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-doc-head {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #d4b896, #c09060);
  border-radius: 50%;
}
.hero-doc-body {
  height: 45vh;
  width: 300px;
  border-radius: 150px 150px 0 0;
  background-color: var(--white);
  background-image: url('../img/doctor.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 70% auto;
  border-radius: 150px 150px 0 0;
  margin-top: -12px;
  box-shadow: 0 -8px 32px rgba(201, 167, 108, 0.18);
}
.hero-watermark {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 10px;
  color: rgba(201, 167, 108, 0.4);
  letter-spacing: 1px;
}

.hero-tag {
  background: transparent;
  text-align: center;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}
.hero-tag-label {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 12px;
  margin-bottom: 16px;
  position: relative;
  top: -1px;
  font-family: 'Playfair Display', serif;
}
.hero-copy {
  color: var(--beige-md);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.3px;
  text-align: center;
}
.hero-quote {
  display: block;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 21px;
  color: var(--gold);
  line-height: 1.55;
  text-align: center;
  padding: 12px 0 0;
}

.hero-quote br {
  display: none;
}

.hero-intro {
  background: var(--navy-2);
  padding: 26px 24px;
  color: var(--beige-md);
  border-top: 1px solid #645543;
}
.hi-formula {
  font-size: 11px;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.hi-h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  color: var(--gold);
}
.hi-p {
  font-size: 13px;
  line-height: 1.8;
  word-break: auto-phrase;
}
/* 모바일: br 무시하고 auto-phrase 로 줄바꿈 */
.hi-p br {
  display: none;
}

.hero-strip {
  background: var(--navy-2);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hs-badge {
  width: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hs-badge span {
  color: var(--gold);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.5;
  text-align: center;
}
.hs-text p {
  font-size: 12px;
  color: var(--beige-md);
  line-height: 1.9;
}

/* ============================================================
       DOCTOR
    ============================================================ */
#doctor {
  background: var(--beige);
  padding: 52px 24px;
}
.doc-card {
  background: var(--white);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
.doc-photo {
  width: 100%;
  height: 270px;
  background: linear-gradient(160deg, #ede3d0, #c8b898);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.doc-photo-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.doc-photo-inner img {
  width: 60%;
  height: auto;
  margin: 0 auto;
  display: block;
}

.doc-photo-wm {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 10px;
  color: rgba(160, 120, 60, 0.55);
  letter-spacing: 0.5px;
}
.doc-strip {
  background: var(--gold);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ds-name small {
  font-size: 11px;
  color: var(--navy);
  display: block;
}
.ds-name strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.5px;
}
.ds-label {
  background: var(--navy);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
}
.doc-career {
  padding: 20px 20px 26px;
}
.career-hd {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-dk);
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.career-ul {
  list-style: none;
}
.career-ul li {
  font-size: 12px;
  color: var(--black);
  line-height: 1.95;
  padding-left: 12px;
  position: relative;
}
.career-ul li::before {
  content: '·';
  position: absolute;
  left: 2px;
  color: var(--gold);
}

/* ============================================================
       GALLERY
    ============================================================ */
#gallery {
  background: var(--navy);
  padding: 52px 24px 52px 24px;
}
.gallery-hd {
  margin-bottom: 24px;
}

/* ── 메인 컨테이너 ── */
.gallery-main {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 14px;
  cursor: pointer;
}

/* ── 메인 Swiper ── */
.gallery-swiper {
  width: 100%;
}
.gallery-swiper .swiper-slide {
}
.gm-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gm-label {
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(201, 167, 108, 0.7);
}

/* ── 이전/다음 버튼 (골드 테마) ── */
.gallery-btn-prev,
.gallery-btn-next {
  color: var(--gold) !important;
  transition:
    color 0.2s,
    opacity 0.2s;
}
.gallery-btn-prev::after,
.gallery-btn-next::after {
  font-size: 18px !important;
  font-weight: 700;
}
.gallery-btn-prev:hover,
.gallery-btn-next:hover {
  color: var(--gold-lt) !important;
}

/* ── 페이지네이션 ── */
.gallery-pagination {
  bottom: 10px !important;
}
.gallery-pagination .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
}
.gallery-pagination .swiper-pagination-bullet-active {
  background: var(--gold);
  transform: scale(1.2);
}

/* ── 썸네일 Swiper ── */
.gallery-thumbs {
  overflow: hidden;
  padding-bottom: 4px;
}
.gallery-thumbs-swiper .swiper-slide {
  width: 88px;
  height: 66px;
}
.thumb {
  border-radius: 1px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.25s;
}
.gallery-thumbs-swiper .swiper-slide-thumb-active {
  border-color: var(--gold) !important;
}
.thumb-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
}

/* ============================================================
       DIRECTIONS
    ============================================================ */
#directions {
  background: var(--beige);
  padding: 52px 24px;
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.info-card {
  background: var(--white);
  border-left: 3px solid var(--gold);
  padding: 14px 14px 16px;
}
.info-card.full {
  grid-column: 1/-1;
}
.ic-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold-dk);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.ic-val {
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
  font-weight: 500;
}
.ic-val.big {
  font-size: 19px;
  font-weight: 700;
  color: var(--gold-dk);
}
.map-ph {
  width: 100%;
  height: 178px;
  background: linear-gradient(135deg, #e8e0d5, #d4c8b8);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.kakao-map {
  width: 100%;
  height: 240px;
  margin-bottom: 16px;
  border-radius: 2px;
  overflow: hidden;
}
.map-pin {
  width: 28px;
  height: 28px;
  background: var(--gold);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.map-ph span {
  font-size: 12px;
  color: var(--text-lt);
}
.dir-note {
  background: var(--white);
  border-left: 3px solid var(--gold);
  padding: 16px;
}
.dir-note-hd {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-dk);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.dir-note p {
  font-size: 12px;
  color: var(--text-md);
  line-height: 2;
}

/* ============================================================
       TREATMENT
    ============================================================ */
.tx-hd {
  background: var(--navy);
  padding: 36px 24px 28px;
  border-bottom: 2px solid var(--gold);
  border-top: 1px solid #645543;
  text-align: center;
}
.tx-hd.alt {
  background: var(--navy-3);
  border-color: var(--beige-dk);
}
.tx-hd-tag {
  font-size: 10px;
  color: var(--gold-lt);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 100;
}
.tx-hd h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
}
.tx-hd p {
  font-size: 13px;
  color: var(--beige-dk);
  line-height: 1.5;
  margin-top: 8px;
}
.tx-card {
  background: var(--white);
  padding: 32px 24px;
  border-bottom: 1px solid var(--beige-md);
}
.tx-card.alt {
  background: var(--beige);
}
.tx-img {
  width: 100%;
  height: 200px;
  border-radius: 2px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #aaa;
  letter-spacing: 1px;
}
.tx-img.g1 {
  background: linear-gradient(135deg, #f5edd9, #e8d5a8);
  color: var(--gold-dk);
}
.tx-img.g2 {
  background: linear-gradient(135deg, #ede3d0, #d9c9af);
}
.tx-img.g3 {
  background: linear-gradient(135deg, #f0e8d8, #e0d0b8);
  color: var(--gold-dk);
}
.tx-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.tx-desc {
  font-size: 13px;
  color: var(--text-md);
  line-height: 2;
  margin-bottom: 18px;
}
.feat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--text-md);
  line-height: 1.6;
}
.feat-list li::before {
  content: '✦';
  color: var(--gold);
  font-size: 9px;
  margin-top: 4px;
  flex-shrink: 0;
}

/* ============================================================
       DN톡스 패널
    ============================================================ */
#dn-toxs {
  padding: 0;
  background: #f9f3ea;
}

/* 히어로 */
.dnt-hero {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dnt-hero img {
  max-width: 170%;
  height: auto;
}
.dnt-hero-ph {
  color: rgba(201, 167, 108, 0.4);
  font-size: 12px;
  letter-spacing: 1px;
}

/* 브랜드 타이틀 */
.dnt-brand-sec {
  background: #f9f3ea;
  padding: 24px 0px 20px;
  word-break: auto-phrase;
  border-bottom: 1px solid #d8c8a8;
  border-top: 1px solid #d8c8a8;
}
.dnt-brand-name {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #e0cead;
}
.dnt-en {
  font-size: 34px;
  font-weight: 800;
  color: var(--navy-3);
  letter-spacing: -1.5px;
  font-style: italic;
  line-height: 1;
}
.dnt-en sup {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.dnt-kr {
  font-size: 15px;
  color: var(--navy-3);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 3대 특징 */
.dnt-feats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.dnt-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 6px;
  border-right: 1px solid #e0cead;
}
.dnt-feat:last-child {
  border-right: none;
}
.dnt-feat-ico {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dnt-feat-ico svg {
  width: 50%;
  height: auto;
}

.dnt-feat-main {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--navy-3);
  line-height: 1.45;
  margin-top: 8px;
}
.dnt-feat-sub {
  display: block;
  font-size: 9px;
  color: #8a7060;
  line-height: 1.55;
}

/* 아이라인 문신제거 4대 특징 (첨부 이미지 재현) */
.el-feat-sec {
  background: linear-gradient(180deg, #fdfbf6 0%, #f6efe2 100%);
  padding: 28px 0 26px;
  word-break: keep-all;
}
.el-feats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.el-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 8px;
  border-right: 1px solid #e3d3b3;
}
.el-feat:last-child {
  border-right: none;
}
.el-feat-ico {
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}
.el-feat-ico svg {
  width: 38px;
  height: 38px;
}
.el-feat-main {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-dk);
  line-height: 1.4;
  margin-bottom: 6px;
}
.el-feat-sub {
  display: block;
  font-size: 9.5px;
  color: #9a8468;
  line-height: 1.5;
}

/* 보톡스/필러 시술 추천 대상 5종 (첨부 시안 재현) */
.bf-feat-sec {
  background: var(--white);
  padding: 34px 12px 38px;
  word-break: keep-all;
}
.bf-feats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.bf-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.bf-feat-ico {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.bf-feat-ico svg {
  width: 40px;
  height: 40px;
}
/* 외부 SVG 아이콘 (인라인 스타일 제거 → CSS 상속) — 입술 아이콘과 동일 컬러 */
.bf-ico-css {
  fill: none;
  stroke: var(--gold-dk);
  stroke-width: 15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
/* 채우기(fill) 기반 외부 SVG 아이콘 — 골드로 통일 */
.bf-ico-fill {
  fill: var(--gold-dk);
}
.bf-feat-cap {
  display: block;
  font-size: 10.5px;
  color: #6f6151;
  line-height: 1.5;
}

/* 아이라인 문신제거 가격표 (첨부 이미지 재현) */
.et-price-sec {
  background: var(--beige);
  padding: 30px 16px 36px;
  word-break: keep-all;
}
/* 화살표 장식 타이틀 */
.et-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}
.et-head-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-dk);
  letter-spacing: 1px;
  white-space: nowrap;
}
.et-head-deco {
  position: relative;
  width: 36px;
  height: 1px;
  background: var(--gold);
}
.et-head-deco::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
.et-head-deco:first-child::after {
  right: -1px;
}
.et-head-deco:last-child::after {
  left: -1px;
}

/* 가격표 */
.et-table {
  border: 1px solid #e3d3b3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}
.et-row-head {
  display: none;
}
.et-cell-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(180deg, #8a6e3e, #6f5631);
  color: var(--white);
  padding: 14px 12px;
}
.et-cell-name strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.et-cell-name small {
  font-size: 11.5px;
  font-weight: 400;
  opacity: 0.85;
}
.et-row-body .et-cell:not(.et-cell-name) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid #efe6d3;
}
.et-row-body .et-cell:not(.et-cell-name)::before {
  content: attr(data-label);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold-dk);
  flex: none;
}
.et-cell-pkg {
  flex-wrap: wrap;
  justify-content: flex-end !important;
}
.et-cell-pkg .et-was {
  font-size: 12.5px;
  color: var(--text-lt);
  margin-right: auto;
}
.et-cell-cycle {
  gap: 6px;
}
.et-cell-cycle small {
  font-size: 12px;
  color: var(--text-lt);
}
.et-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 11px;
  letter-spacing: 0.3px;
}
.et-price {
  font-size: 18px;
  font-weight: 800;
  color: #2a2418;
  letter-spacing: -0.5px;
}
.et-price.sm {
  font-size: 16px;
}
.et-price em {
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  margin-left: 1px;
  color: #5a4f43;
}
.et-vat {
  text-align: right;
  font-size: 12px;
  color: var(--text-lt);
  margin-top: 10px;
}
.et-vat-c {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  text-align: right;
}

/* 추가 옵션 + 시술 전/후 */
.et-opt-wrap {
  margin-top: 34px;
}
.et-opt-col:first-child {
  position: relative;
  padding-bottom: 24px;
}
.et-opt-col + .et-opt-col {
  margin-top: 30px;
}
.et-table-opt .et-opt-head {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  background: linear-gradient(180deg, #8a6e3e, #6f5631);
}
.et-table-opt .et-opt-head .et-cell {
  padding: 12px 14px;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.et-table-opt .et-opt-head .et-cell:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.et-opt-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  border-top: 1px solid #efe6d3;
}
.et-opt-row .et-cell {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-md);
  display: flex;
  align-items: center;
}
.et-opt-row .et-cell:first-child {
  border-right: 1px solid #efe6d3;
}
.et-opt-row .et-cell:last-child {
  justify-content: center;
}

/* 시술 전/후 */
.et-ba {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.et-ba-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.et-ba-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(60, 48, 28, 0.82);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.et-ba-img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 1px;
  color: #b6a07a;
}
.et-ba-img.g1 {
  background: linear-gradient(135deg, #f5edd9, #e8d5a8);
}
.et-ba-img.g2 {
  background: linear-gradient(135deg, #ede3d0, #d9c9af);
}
.et-ba-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-lt);
  line-height: 1.6;
  margin-top: 4px;
}

/* 안내사항 */
.et-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 34px;
  padding: 20px 18px;
  background: var(--gold-pale);
  border: 1px solid #ecdcbb;
  border-radius: 8px;
  text-align: left;
}
.et-notice-ico {
  flex: none;
  width: 34px;
}
.et-notice-ico svg {
  width: 100%;
  height: auto;
}
.et-notice-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-dk);
  margin-bottom: 8px;
}
.et-notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.et-notice-list li {
  position: relative;
  padding-left: 12px;
  font-size: 13px;
  color: var(--text-md);
  line-height: 1.55;
}
.et-notice-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* 이마거상 3대 특징 (이미지 재현) */
.fh-feat-sec {
  background: #faf5ec;
  padding: 32px 16px;
}
.fh-feats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.fh-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fh-feat-ico {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1.5px solid #e0cead;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.fh-feat-ico svg {
  width: 58%;
  height: auto;
}
.fh-feat-main {
  font-size: 13px;
  font-weight: 700;
  color: #4a3f33;
  line-height: 1.4;
}
.fh-feat-sub {
  font-size: 11px;
  color: #8a7a66;
  line-height: 1.5;
  margin-top: 4px;
}

/* 이마거상 가격 안내 (이미지 재현) */
.fl-price-sec {
  background: #f0e6d4;
  padding: 30px 16px 36px;
}
.fl-quote {
  text-align: center;
  color: #9c8157;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.3px;
  margin-bottom: 24px;
  position: relative;
  display: inline-block;
  padding: 0 40px;
}
.fl-q-open,
.fl-q-close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 700;
  color: #c2a878;
}
.fl-quote br {
  display: none;
}
.fl-q-open {
  left: 0;
}
.fl-q-close {
  right: 0;
}
.fl-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fl-card {
  background: #faf5ec;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(120, 95, 55, 0.08);
}
.fl-card-hd {
  background: linear-gradient(135deg, #8a7048, #b39a6e);
  color: #fff;
  text-align: center;
  padding: 22px 16px 18px;
}
.fl-card-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
}
.fl-card-en {
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
}
.fl-card-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.fl-card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e7ddca;
  color: #a89472;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.fl-card-img img {
  width: 100%;
}
.fl-price-list {
  list-style: none;
  padding: 8px 22px 20px;
}
.fl-price-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px dashed #ddcfb4;
}
.fl-price-list li:last-child {
  border-bottom: none;
}
.fl-item {
  font-size: 15px;
  color: #4a3f33;
  font-weight: 500;
}
.fl-cost {
  font-size: 20px;
  font-weight: 800;
  color: #3a2f24;
  letter-spacing: -0.5px;
}
.fl-cost em {
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  margin-left: 2px;
  color: #5a4f43;
}
.fl-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fl-mini-feats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 24px 8px;
  background: #faf5ec;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(120, 95, 55, 0.08);
}
.fl-mini-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fl-mini-ico {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #e3d6b8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.fl-mini-ico svg {
  width: 50%;
  height: auto;
}
.fl-mini-main {
  font-size: 13px;
  font-weight: 700;
  color: #4a3f33;
}
.fl-mini-sub {
  font-size: 11px;
  color: #8a7a66;
  line-height: 1.4;
  margin-top: 3px;
}

/* 가슴성형 5대 특징 (이미지 재현) */
.ch-feat-sec {
  background: var(--gold-pale);
  padding: 28px 12px;
}
.ch-feats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.ch-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ch-feat-ico {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.ch-feat-ico svg {
  width: 100%;
  height: auto;
  stroke: var(--gold);
}
.ch-feat-tx {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-md);
  line-height: 1.3;
  letter-spacing: -0.3px;
}

/* 가슴성형 가격 안내 (이미지 재현) */
.cb-price-sec {
  background: var(--beige-md);
  padding: 30px 14px 40px;
}
.cb-cols {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cb-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cb-col:nth-child(1) .cb-card {
  background: #fff url('../img/chest_bg.jpg') no-repeat bottom / 100% auto;
  padding-bottom: 20vh;
}

.cb-col:nth-child(2) .cb-card .cb-sep {
  margin: 5px 0;
}

.cb-body .cb-col:nth-child(3) .cb-body {
  padding: 0px 18px 18px;
}

.cb-col:nth-child(3) .cb-price-row {
  padding: 0;
  margin-top: 10px;
}

.cb-card {
  border: 1px solid #ece0cb;
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}

.cb-hd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 15px 12px 13px;
  border-bottom: 1px solid #e8dcc0;
  background: var(--beige);
}

.cb-no {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--gold);
}
.cb-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--gold-dk);
}
.cb-title small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lt);
}
.cb-body {
  padding: 5px 18px 18px;
}
.cb-sep {
  height: 1px;
  background: repeating-linear-gradient(90deg, #e2d4ba 0 6px, transparent 6px 12px);
  margin: 14px 0;
}
.cb-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
}
.cb-price-center {
  justify-content: center;
}
.cb-item {
  font-size: 15px;
  color: var(--text-md);
  font-weight: 500;
}
.cb-cost {
  font-size: 18px;
  font-weight: 800;
  color: #2a2418;
  letter-spacing: -0.5px;
}
.cb-cost em {
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  margin-left: 2px;
  color: #5a4f43;
}
.cb-consult {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-dk);
}
.cb-brand-block {
  text-align: center;
}
.cb-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
.cb-brand-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-top: 8px;
}
.cb-brand-name sup {
  font-size: 9px;
}
.cb-implant-img {
  margin-top: 16px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece2d0;
  border-radius: 6px;
  color: #a89472;
  font-size: 13px;
}
.cb-reduce {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cb-reduce-ico {
  width: 80px;
  height: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 22px;
}
.cb-reduce-ico svg {
  width: 100%;
  height: auto;
}
.cb-reduce-tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cb-reduce-tx strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-3);
}
.cb-reduce-tx span {
  font-size: 11.5px;
  color: var(--text-lt);
  line-height: 1.35;
}
.cb-reduce .cb-cost {
  flex: none;
}

/* 시그니처 프로그램 */
.dnt-sig-sec {
  background: #eee4d4;
  padding: 26px 24px 24px;
  border-bottom: 1px solid #d8c8a8;
}
.dnt-sig-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #c9a76c;
  letter-spacing: 1px;
  margin-bottom: 24px;
  white-space: nowrap;
}
.dnt-div-line {
  flex: 1;
  height: 1px;
  background: #c9a76c;
}
.dnt-combo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 20px;
}
.dnt-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #4a6a9a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.45;
}
.dnt-plus {
  font-size: 28px;
  font-weight: 300;
  color: #5a4a30;
  line-height: 1;
}
.dnt-prog-box {
  background: #1c1c2e;
  color: var(--white);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  padding: 16px 18px;
  margin-bottom: 18px;
  border-radius: 20px;
}
.dnt-prog-box strong {
  display: block;
  font-size: 20.5px;
  font-weight: 700;
  color: #c9a76c;
}
.dnt-sig-desc {
  font-size: 13px;
  color: var(--navy-2);
  line-height: 1.7;
  margin-bottom: 14px;
}
.dnt-sig-note {
  font-size: 16px;
  color: #8a6a40;
  border-top: 1px solid #cfc0a0;
  padding-top: 12px;
}

/* 핵심 효과 */
.dnt-efx-sec {
  background: #f9f3ea;
  padding: 28px 20px 32px;
}
.dnt-efx-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-3);
  text-align: center;
  margin-bottom: 22px;
  letter-spacing: -0.3px;
}
.dnt-efx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 8px;
}
.dnt-efx-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dnt-efx-ico {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1.5px solid #c9a76c;
  background: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 아이콘 SVG: 부모 크기의 50% */
.dnt-efx-ico svg {
  width: 50%;
  height: 50%;
}
.dnt-efx-item p {
  font-size: 11px;
  font-weight: 500;
  color: var(--navy-2);
  text-align: center;
  line-height: 1.55;
}

/* 하단 브랜드 바 */
.dnt-bot-bar {
  background: #1c1c2e;
  padding: 16px 20px 15px;
  text-align: center;
}
.dnt-bot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.dnt-bot-logo {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dnt-bot-logo span {
  font-size: 17px;
  font-weight: 700;
  font-style: italic;
  color: #c9a76c;
  line-height: 1;
}
.dnt-bot-name {
  font-size: 12px;
  font-weight: 100;
  color: #d1af86;
  letter-spacing: 1.2px;
  font-family: 'Playfair Display', serif;
}
.dnt-bot-tag {
  font-size: 14px;
  color: var(--white);
  letter-spacing: 0.2px;
  line-height: 1.7;
  word-break: auto-phrase;
}

/* ============================================================
       쁘띠 탭
    ============================================================ */
.tx-tab-wrap {
  background: var(--white);
}

/* 탭 바 — 헤더와 명확히 구분되는 흰색 라인 */
.tx-tab-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--white);
  border-top: 3px solid var(--gold);
  box-shadow: 0 4px 20px rgba(14, 15, 28, 0.09);
  position: sticky;
  top: var(--mob-hdr);
  z-index: 200;
}
.tx-tab-bar::-webkit-scrollbar {
  display: none;
}

.tx-tab {
  padding: 12px 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-lt);
  text-align: center;
  line-height: 1.35;
  letter-spacing: 0.1px;
  position: relative;
  border-right: 1px solid var(--beige-md);
  border-bottom: 1px solid var(--beige-md);
  transition: color 0.2s;
}
/* 3번째 열: 오른쪽 경계 제거 */
.tx-tab:nth-child(3n) {
  border-right: none;
}
/* 마지막 행(4~6번째): 아래 경계 제거 */
.tx-tab:nth-last-child(-n + 3) {
  border-bottom: none;
}

/* 탭 사이 구분선 — 모바일은 border로 대체, 데스크탑에서만 활성 */
.tx-tab + .tx-tab::before {
  display: none;
}

/* 활성 인디케이터 — 하단 골드 바 */
.tx-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 2.5px;
  background: var(--gold);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tx-tab:hover {
  color: var(--navy-2);
}
.tx-tab.active {
  color: var(--navy);
  font-weight: 700;
}
.tx-tab.active::after {
  transform: scaleX(1);
}

.tx-tab-panel {
  display: none;
}
.tx-tab-panel.active {
  display: block;
  animation: tabFadeIn 0.22s ease;
}
@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
       RESERVATION
    ============================================================ */
#reservation {
  background: var(--navy);
  padding: 52px 24px;
}
.res-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-g {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-g.full {
  grid-column: 1/-1;
}
.form-g label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-lt);
  letter-spacing: 0.5px;
}
.form-g input,
.form-g select,
.form-g textarea {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 167, 108, 0.25);
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  padding: 11px 13px;
  outline: none;
  border-radius: 1px;
  transition: border-color 0.2s;
  width: 100%;
}
.form-g input:focus,
.form-g select:focus,
.form-g textarea:focus {
  border-color: var(--gold);
}
.form-g input::placeholder,
.form-g textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.form-g select option {
  background: var(--navy-2);
}
.form-g textarea {
  resize: none;
  height: 82px;
}
.priv-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: var(--beige-dk);
  line-height: 1.7;
}
.priv-row input[type='checkbox'] {
  margin-top: 2px;
  accent-color: var(--gold);
  flex-shrink: 0;
}
.priv-row a {
  color: var(--gold-lt);
  text-decoration: underline;
}
.btn-submit {
  background: var(--gold);
  color: var(--navy);
  padding: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  width: 100%;
  transition:
    background 0.2s,
    color 0.2s;
}
.btn-submit:hover {
  background: var(--gold-dk);
  color: var(--white);
}

/* ============================================================
       FOOTER
    ============================================================ */
footer {
  background: var(--navy-2);
  padding: 32px 24px 26px;
}
.ft-brand {
  width: 200px;
  margin-bottom: 14px;
}

.ft-info p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 2;
}
.ft-copy {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 167, 108, 0.12);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
       MODAL
    ============================================================ */
.modal-wrap {
  position: fixed;
  inset: 0;
  background: rgba(14, 15, 28, 0.78);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.modal-wrap.show {
  opacity: 1;
  visibility: visible;
}
.modal {
  background: var(--navy-2);
  width: 100%;
  max-width: 520px;
  border-radius: 16px 16px 0 0;
  border-top: 2px solid var(--gold);
  padding: 24px 24px 32px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-wrap.show .modal {
  transform: translateY(0);
}
.modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modal-hd h3 {
  color: var(--gold);
  font-size: 16px;
  font-weight: 700;
}
.modal-cls {
  color: var(--beige-dk);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 8px;
}
.modal-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.mf {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mf label {
  font-size: 11px;
  color: var(--gold-lt);
  font-weight: 700;
}
.mf.full {
  grid-column: 1 / -1;
}
.mf input,
.mf select,
.mf textarea {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 167, 108, 0.25);
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  padding: 10px 12px;
  outline: none;
  border-radius: 1px;
  width: 100%;
}
.mf textarea {
  min-height: 84px;
  resize: vertical;
}
.mf select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23c9a76c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.mf select option {
  color: #222;
}
.mf input:focus,
.mf select:focus,
.mf textarea:focus {
  border-color: var(--gold);
}
.mf input::placeholder,
.mf textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.m-priv {
  font-size: 11px;
  color: var(--beige-dk);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.m-priv a {
  color: var(--gold-lt);
  text-decoration: underline;
}
.modal-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mb-cons {
  background: var(--gold);
  color: var(--navy);
  padding: 13px;
  font-size: 14px;
  font-weight: 700;
}
.mb-call {
  background: var(--navy);
  color: var(--gold-lt);
  border: 1px solid rgba(201, 167, 108, 0.25);
  padding: 13px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
       LIGHTBOX
    ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 20, 0.97);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.lightbox.show {
  opacity: 1;
  visibility: visible;
}
.lb-inner {
  width: 90%;
  max-width: 600px;
  position: relative;
}
.lb-ph {
  width: 100%;
  height: 340px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
}
.lb-close {
  position: absolute;
  top: -38px;
  right: 0;
  color: var(--white);
  font-size: 22px;
  padding: 4px 8px;
}
.lb-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.lb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.2s;
}
.lb-dot.on {
  background: var(--gold);
}

/* ============================================================
       PRIVACY MODAL
    ============================================================ */
.priv-view-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: var(--gold-dk);
  text-decoration: underline;
  cursor: pointer;
  letter-spacing: inherit;
}
.priv-view-btn:hover {
  color: var(--gold);
}

/* 오버레이 */
.priv-modal-wrap {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 20, 0.8);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.priv-modal-wrap.show {
  opacity: 1;
  visibility: visible;
}

/* 팝업 박스 */
.priv-modal {
  background: var(--white);
  width: 100%;
  max-width: 520px;
  max-height: 82vh;
  border-radius: 4px;
  border-top: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.priv-modal-wrap.show .priv-modal {
  transform: translateY(0) scale(1);
}

/* 헤더 */
.priv-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--beige-md);
  flex-shrink: 0;
  background: var(--gold);
}
.priv-modal-hd h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.5px;
}
.priv-modal-cls {
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  padding: 2px 6px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.priv-modal-cls:hover {
  opacity: 1;
}

/* 본문 (스크롤) */
.priv-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 20px;
  -webkit-overflow-scrolling: touch;
}
.priv-modal-body::-webkit-scrollbar {
  width: 4px;
}
.priv-modal-body::-webkit-scrollbar-thumb {
  background: var(--beige-md);
  border-radius: 2px;
}

/* 섹션 */
.priv-section {
  margin-bottom: 22px;
}
.priv-section h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gold-pale);
}
.priv-section p {
  font-size: 12px;
  color: var(--text-md);
  line-height: 1.9;
  margin-bottom: 6px;
}
.priv-section ul {
  margin: 6px 0 0 4px;
  padding-left: 14px;
}
.priv-section ul li {
  font-size: 12px;
  color: var(--text-md);
  line-height: 1.9;
  list-style: disc;
}
.priv-section strong {
  color: var(--navy);
  font-weight: 700;
}

/* 표 */
.priv-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 12px;
}
.priv-table th,
.priv-table td {
  border: 1px solid var(--beige-md);
  padding: 8px 12px;
  text-align: left;
  line-height: 1.6;
  color: var(--text-md);
}
.priv-table thead th {
  background: var(--gold-pale);
  font-weight: 700;
  color: var(--navy);
  font-size: 11px;
  letter-spacing: 0.5px;
}
.priv-table tbody tr:first-child td {
  border-top: 1px solid var(--beige-md);
}

/* 시행일 */
.priv-date {
  font-size: 11px;
  color: var(--text-lt);
  text-align: right;
  margin-top: 8px;
  border-top: 1px solid var(--beige-md);
  padding-top: 14px;
}

/* 하단 확인 버튼 */
.priv-modal-ft {
  padding: 14px 20px;
  border-top: 1px solid var(--beige-md);
  flex-shrink: 0;
}
.priv-confirm-btn {
  width: 100%;
  background: var(--gold);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 12px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.priv-confirm-btn:hover {
  background: var(--gold-dk);
  color: var(--white);
}

/* ============================================================
       SCROLL REVEAL
    ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}
.reveal.vis {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
       ██████  DESKTOP  ████████████████████████████████████████
       ≥ 900px : 고정 왼쪽 사이드바 + 풀너비 콘텐츠
    ============================================================ */
@media (min-width: 900px) {
  .hero-doc-body {
    background-size: 90% auto;
  }
  .sec-title {
    font-size: 32px;
  }
  .badge {
    font-size: 15px;
    font-weight: 400;
  }
  /* ── 페이지 틀 ─────────────────────────── */
  body {
    background: #09091a;
  }
  .page {
    max-width: 100%;
    margin: 0;
    box-shadow: none;
    display: flex;
  }

  /* ── 모바일 전용 요소 숨김 ─────────────── */
  .header,
  .btm-bar,
  .overlay,
  .sidenav {
    display: none !important;
  }

  /* ── 메인 콘텐츠 오프셋 ────────────────── */
  main {
    flex: 1;
    margin-left: var(--side-w);
    padding-top: 0;
    padding-bottom: 0;
    width: calc(100% - var(--side-w));
    overflow-x: hidden;
  }

  /* ══════════════════════════════════════════
         데스크탑 사이드바
      ══════════════════════════════════════════ */
  .desk-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    width: var(--side-w);
    height: 100vh;
    background: var(--gold);
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    z-index: 500;
    overflow-y: auto;
  }
  /* 스크롤바 */
  .desk-nav::-webkit-scrollbar {
    width: 3px;
  }
  .desk-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
  }

  /* 상단 로고 */
  .dn-logo {
    padding: 20px 38px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex-shrink: 0;
    background: var(--beige);
  }
  .dn-logo-circle {
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .dn-logo-circle svg {
    width: 22px;
    height: 22px;
  }
  .dn-logo-words .dw1 {
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 2px;
  }
  .dn-logo-words .dw2 {
    font-size: 7px;
    color: var(--navy-2);
    letter-spacing: 1.5px;
    margin-top: 2px;
  }

  /* 엠블럼 */
  .dn-emblem {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--beige);
    padding: 6vh 20px;
  }

  .dn-emblem img {
    width: 90%;
    height: auto;
  }

  .dn-emblem span {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 26px;
    color: var(--navy-2);
  }

  /* 메뉴 그룹 */
  .dn-nav {
    flex: 1;
    padding-bottom: 16px;
  }

  /* 카테고리 버튼 */
  .dn-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px 14px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      color 0.2s,
      background 0.2s;
  }
  .dn-cat:hover {
    color: var(--navy);
    background: rgba(0, 0, 0, 0.06);
  }
  .dn-cat.on {
    color: var(--white);
    background: rgba(0, 0, 0, 0.06);
  }

  .dn-cat-arr {
    display: flex;
    align-items: center;
    opacity: 0.45;
    transition:
      opacity 0.2s,
      transform 0.2s;
    flex-shrink: 0;
  }
  .dn-cat:hover .dn-cat-arr {
    opacity: 0.7;
  }
  .dn-cat.on .dn-cat-arr {
    opacity: 1;
    color: var(--gold-lt);
  }

  /* 온라인예약 */
  .dn-res-wrap {
    padding: 12px 16px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
  }
  .dn-res-btn {
    display: block;
    text-align: center;
    background: var(--white);
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 10px;
    transition: all 0.2s;
  }
  .dn-res-btn:hover {
    background: var(--navy);
    color: var(--gold);
  }

  /* 하단 CTA */
  .dn-cta {
    padding: 14px 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
  }
  .dn-cons {
    background: var(--navy);
    color: var(--white);
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    width: 100%;
    transition: background 0.2s;
  }
  .dn-cons:hover {
    background: var(--navy-2);
    color: var(--white);
  }
  .dn-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--navy);
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 8px;
  }

  /* ══════════════════════════════════════════
         섹션 내부 max-width 래퍼
      ══════════════════════════════════════════ */
  .sec-in {
    max-width: 1080px;
    margin: 0 auto;
  }

  /* ── 히어로 (2컬럼) ─────────────────────── */
  #story {
    display: flex;
    flex-direction: column;
  }
  .story-bg-video {
    height: 100%;
    left: 17%;
  }
  .story-bg-overlay {
    background: linear-gradient(to left, transparent 25%, var(--navy) 80%);
  }

  .hero-desktop-wrap {
    /* background: linear-gradient(to left, transparent 30%, var(--navy) 100%); */
  }
  .hero-left {
    padding: 60px 48px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-right {
    position: relative;
    overflow: hidden;
  }
  .hero-visual {
    width: 100%;
    height: 100%;
    min-height: 480px;
  }

  /* hero text 재배치 */
  .hero-tag {
    background: transparent;
    padding: 0;
    margin: 0;
    text-align: left;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    left: 6%;
  }
  .hero-copy {
    text-align: left;
    font-size: 30px;
    color: var(--beige-md);
    padding: 0;
  }
  .hero-quote {
    text-align: left;
    font-size: 24px;
    padding: 16px 0 0;
  }

  /* 소개 + 스트립 그리드 */
  .hero-bottom-wrap {
    display: grid;
    grid-template-columns: 1fr 5fr;
    height: 30vh;
  }
  .hero-intro {
    padding: 40px 48px;
    border-top: none;
    border-left: 1px solid #645543;
  }
  .hi-h2 {
    font-size: 26px;
  }
  .hi-p {
    font-size: 14px;
  }
  .hi-p br {
    display: inline;
  }
  .hero-strip {
    padding: 40px 40px;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .hs-badge {
    width: 130px;
    height: auto;
  }
  .hs-text p {
    font-size: 13px;
  }

  /* ── 의료진소개 (2컬럼) ─────────────────── */
  #doctor {
    padding: 64px 48px;
  }
  #doctor .sec-in {
    max-width: 1080px;
  }
  .doc-card {
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows: auto auto;
  }
  .doc-photo {
    grid-row: 1 / 3;
    height: 100%;
    min-height: 420px;
  }
  .doc-photo-inner img {
    width: 100%;
    margin: 0;
  }
  .doc-strip {
    grid-column: 2;
    align-self: start;
  }
  .doc-career {
    grid-column: 2;
  }

  /* ── 갤러리 ─────────────────────────────── */
  #gallery {
    padding: 64px 44px 64px 48px;
  }

  .gallery-thumbs-swiper .swiper-slide {
    width: 110px;
    height: 82px;
  }

  /* ── 진료안내 ────────────────────────────── */
  #directions {
    padding: 64px 48px;
  }
  #directions .sec-in {
    max-width: 1080px;
  }
  .info-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .info-card.full {
    grid-column: auto;
  }
  .map-ph {
    height: 260px;
  }
  .kakao-map {
    height: 360px;
  }

  /* ── 트리트먼트 헤더 ─────────────────────── */
  .tx-hd {
    padding: 48px 48px 38px;
  }
  .tx-hd-tag {
    font-size: 17px;
  }
  .tx-hd h2 {
    font-size: 45px;
  }
  .tx-hd p {
    font-size: 15px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── 트리트먼트 카드 (2컬럼) ─────────────── */
  .tx-card {
    padding: 40px 48px;
  }
  .tx-card-inner {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 40px;
    align-items: start;
  }
  .tx-img {
    height: 260px;
    margin-bottom: 0;
  }
  .tx-text-col {
    padding-top: 4px;
  }
  .tx-name {
    font-size: 22px;
    margin-bottom: 14px;
  }
  .tx-desc {
    font-size: 14px;
  }
  .feat-list li {
    font-size: 14px;
  }

  /* ── DN톡스 패널 (데스크탑) ──────────────── */
  .dnt-hero {
    height: 420px;
  }

  .dnt-hero img {
    width: 100%;
  }

  /* 섹션 배경은 풀 width, 내부 컨텐츠만 1080px 제한 */
  .dnt-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding-left: 48px;
    padding-right: 48px;
    text-align: center;
  }

  /* 섹션 자체의 가로 패딩 제거 (dnt-inner가 담당) */
  .dnt-brand-sec {
    padding-left: 0;
    padding-right: 0;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .dnt-sig-sec {
    padding-left: 0;
    padding-right: 0;
    padding-top: 36px;
    padding-bottom: 32px;
  }
  .dnt-efx-sec {
    padding-left: 0;
    padding-right: 0;
    padding-top: 36px;
    padding-bottom: 44px;
  }
  .dnt-bot-bar {
    padding-left: 0;
    padding-right: 0;
    padding-top: 20px;
    padding-bottom: 18px;
  }

  .dnt-en {
    font-size: 42px;
  }
  .dnt-feat-ico svg {
    width: 70%;
  }
  .fh-feat-sec {
    padding: 48px 24px;
  }
  .fh-feats {
    max-width: 720px;
    margin: 0 auto;
    gap: 16px;
  }
  .fh-feat-ico {
    width: 96px;
    height: 96px;
    margin-bottom: 18px;
  }
  .fh-feat-main {
    font-size: 19px;
  }
  .fh-feat-sub {
    font-size: 15px;
    margin-top: 6px;
  }
  .ch-feat-sec {
    padding: 44px 24px;
  }
  .ch-feats {
    max-width: 860px;
    margin: 0 auto;
    gap: 16px;
  }
  .ch-feat-ico {
    width: 66px;
    height: 66px;
    margin-bottom: 16px;
  }
  .ch-feat-tx {
    font-size: 15px;
    line-height: 1.6;
  }
  .cb-price-sec {
    padding: 44px 24px 56px;
  }
  .cb-cols {
    flex-direction: row;
    align-items: stretch;
    gap: 18px;
    max-width: 1000px;
    margin: 0 auto;
  }
  .cb-col {
    flex: 1;
    min-width: 0;
    justify-content: space-between;
  }
  /* 단일 카드 컬럼(01·02)은 카드가 컬럼 높이를 꽉 채우도록 */
  .cb-col > .cb-card:only-child {
    flex: 1;
  }
  .cb-col:nth-child(2) .cb-card .cb-sep {
    margin: 25px 0;
  }

  .fl-price-sec {
    padding: 48px 24px 56px;
  }
  .fl-quote {
    font-size: 20px;
    margin-bottom: 34px;
  }
  .fl-quote br {
    display: inline;
  }
  .fl-q-open,
  .fl-q-close {
    font-size: 30px;
  }
  .fl-cards {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
  }
  .fl-card,
  .fl-col {
    flex: 1;
    min-width: 0;
  }
  .fl-col {
    gap: 24px;
  }
  /* 우측 가격 카드가 늘어나 좌측 카드와 전체 높이를 맞춘다 */
  .fl-col > .fl-card {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .fl-col > .fl-card .fl-price-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .dnt-feat-main {
    font-size: 22px;
  }
  .dnt-feat-sub {
    font-size: 14px;
  }
  .el-feat-sec {
    padding: 56px 0 52px;
  }
  .el-feat-ico {
    height: 76px;
  }
  .el-feat-ico svg {
    width: 56px;
    height: 56px;
  }
  .el-feat-main {
    font-size: 20px;
  }
  .el-feat-sub {
    font-size: 15px;
  }

  /* 보톡스/필러 추천 대상 데스크탑 */
  .bf-feat-sec {
    padding: 60px 24px 64px;
  }
  .bf-feats {
    max-width: 920px;
    margin: 0 auto;
    gap: 18px;
  }
  .bf-feat-ico {
    height: 64px;
    margin-bottom: 18px;
  }
  .bf-feat-ico svg {
    width: 56px;
    height: 56px;
  }
  .bf-feat-cap {
    font-size: 14.5px;
  }

  /* 가격표 데스크탑 (이미지 그대로 5열 테이블) */
  .et-price-sec {
    padding: 56px 24px 64px;
  }
  .et-head {
    gap: 18px;
    margin-bottom: 26px;
  }
  .et-head-title {
    font-size: 26px;
  }
  .et-head-deco {
    width: 56px;
  }
  .et-row-head {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.4fr 1.4fr 1.2fr;
    background: linear-gradient(180deg, #8a6e3e, #6f5631);
  }
  .et-row-head .et-cell {
    padding: 18px 14px;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }
  .et-row-head .et-cell:last-child {
    border-right: none;
  }
  .et-row-body {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.4fr 1.4fr 1.2fr;
  }
  .et-cell-name {
    background: var(--beige);
    color: var(--gold-dk);
    justify-content: center;
    padding: 22px 14px;
    border-right: 1px solid #efe6d3;
  }
  .et-cell-name strong {
    font-size: 17px;
  }
  .et-cell-name small {
    color: var(--text-lt);
    opacity: 1;
  }
  .et-row-body .et-cell:not(.et-cell-name) {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    border-top: none;
    border-right: 1px solid #efe6d3;
    text-align: center;
    padding: 22px 14px;
  }
  .et-row-body .et-cell:last-child {
    border-right: none;
  }
  .et-row-body .et-cell:not(.et-cell-name)::before {
    display: none;
  }
  .et-cell-pkg {
    justify-content: center !important;
  }
  .et-cell-pkg .et-was {
    margin-right: 0;
    font-size: 13.5px;
  }
  .et-cell-cycle {
    line-height: 1.5;
  }
  .et-price {
    font-size: 21px;
  }
  .et-price.sm {
    font-size: 17px;
  }
  .et-vat {
    margin-top: 14px;
    font-size: 13px;
  }

  /* 추가 옵션 + 시술 전/후 좌우 배치 */
  .et-opt-wrap {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    align-items: flex-end;
    margin-top: 48px;
  }
  .et-opt-col + .et-opt-col {
    margin-top: 0;
  }
  .et-opt-col:last-child {
    padding-top: 6px;
  }

  .et-table-opt .et-opt-head .et-cell,
  .et-opt-row .et-cell {
    font-size: 15px;
    padding: 14px 16px;
  }
  .et-notice {
    margin-top: 48px;
    padding: 26px 28px;
    gap: 18px;
  }
  .et-notice-ico {
    width: 40px;
  }
  .et-notice-title {
    font-size: 17px;
  }
  .et-notice-list li {
    font-size: 14.5px;
  }

  .dnt-combo-row {
    gap: 28px;
    margin-bottom: 24px;
  }
  .dnt-circle {
    width: 200px;
    height: 200px;
    font-size: 30px;
    line-height: 1.3;
  }
  .dnt-prog-box {
    font-size: 21px;
    padding: 18px 35px;
    width: fit-content;
    margin: 0 auto 10px;
  }
  .dnt-prog-box strong {
    font-size: 38px;
  }
  .dnt-sig-desc {
    font-size: 16px;
  }
  .dnt-efx-title {
    font-size: 32px;
    margin-bottom: 28px;
  }
  .dnt-efx-grid {
    grid-template-columns: repeat(9, 1fr);
    gap: 12px 8px;
  }
  .dnt-efx-ico {
    width: 95px;
    height: 95px;
  }
  .dnt-efx-item p {
    font-size: 16px;
    line-height: 1.3;
  }
  .dnt-bot-name {
    font-size: 22px;
  }
  .dnt-bot-tag {
    font-size: 12px;
    color: var(--white);
    font-weight: 100;
  }

  /* ── 쁘띠 탭 ────────────────────────────── */
  .tx-tab-bar {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    top: 0;
    padding: 0 48px;
    border-bottom: 1px solid var(--beige-md);
  }
  .tx-tab-bar::-webkit-scrollbar {
    display: none;
  }
  .tx-tab {
    flex-shrink: 0;
    white-space: nowrap;
    text-align: left;
    padding: 16px 22px;
    font-size: 16px;
    border-right: none;
    border-bottom: none;
  }
  .tx-tab:nth-child(3n),
  .tx-tab:nth-last-child(-n + 3) {
    border-right: none;
    border-bottom: none;
  }
  /* 데스크탑: 세로 구분선 복원 */
  .tx-tab + .tx-tab::before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    width: 1px;
    background: var(--beige-md);
  }
  /* 데스크탑: 인디케이터를 탭바 border-bottom 위에 */
  .tx-tab::after {
    bottom: -1px;
    left: 12px;
    right: 12px;
  }
  .tx-tab-panel .tx-card-inner {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 40px;
    align-items: start;
  }
  .tx-tab-panel .tx-img {
    height: 260px;
    margin-bottom: 0;
  }
  .tx-tab-panel .tx-name {
    font-size: 22px;
    margin-bottom: 14px;
  }
  .tx-tab-panel .tx-desc {
    font-size: 14px;
  }
  .tx-tab-panel .feat-list li {
    font-size: 14px;
  }

  /* ── 예약 ────────────────────────────────── */
  #reservation {
    padding: 64px 48px;
  }
  #reservation .sec-in {
    max-width: 760px;
  }

  /* ── 푸터 ────────────────────────────────── */
  footer {
    padding: 40px 48px 32px;
  }
}
/* close min-width: 900px */

/* ============================================================
     데스크탑 사이드바 Flyout 서브메뉴
   ============================================================ */
.dn-flyout {
  display: none;
}

@media (min-width: 900px) {
  .dn-flyout {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: var(--side-w);
    top: 0;
    height: 100vh;
    width: 220px;
    padding-top: 217px;
    background: rgba(20, 22, 40, 0.7); /* 딥 네이비 + 투명도 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 2px solid rgba(201, 167, 108, 0.5);
    box-shadow: 8px 0 32px rgba(14, 15, 28, 0.4);
    overflow-y: auto;
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
    transition:
      opacity 0.18s ease,
      transform 0.18s ease;
    z-index: 490;
    scrollbar-width: none;
  }
  .dn-flyout::-webkit-scrollbar {
    display: none;
  }
  .dn-flyout.open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }

  /* 카테고리 타이틀 */
  .dn-fly-hd {
    padding: 32px 20px 16px;
    font-size: 10px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(201, 167, 108, 0.2);
    flex-shrink: 0;
  }

  /* 링크 목록 */
  .dn-fly-links {
    flex: 1;
    padding: 8px 0;
  }

  .dn-fly-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    font-size: 13px;
    color: var(--white);
    transition:
      color 0.15s,
      background 0.15s,
      padding-left 0.15s;
  }

  .dn-fly-link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
    padding-left: 24px;
  }
  .dn-fly-link.active {
    color: var(--gold);
    font-weight: 600;
  }
  .dn-fly-link.active::before {
    background: var(--gold);
  }
}

/* ============================================================
     지방줄기세포(SVF) 패널
   ============================================================ */
#stem-cells {
  padding: 0;
  background: #f9f3ea;
}

/* ─ 헤더: 핵심 효과 ─ */
.svf-hd {
  background: var(--navy-2);
  padding: 32px 24px 28px;
  border-bottom: 2px solid var(--gold);
}
.svf-main-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
  line-height: 1.4;
  margin-bottom: 24px;
}
.svf-main-title br {
  display: block;
}
.svf-core-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 8px;
  margin-bottom: 22px;
}
.svf-core-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.svf-core-ico {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 167, 108, 0.45);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 아이콘 SVG: 부모 크기의 50% */
.svf-core-ico svg {
  width: 50%;
  height: 50%;
}
.svf-core-item p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  line-height: 1.4;
}
.svf-hd-desc {
  font-size: 12.5px;
  color: var(--beige-dk);
  text-align: center;
  line-height: 1.5;
  border-top: 1px solid rgba(201, 167, 108, 0.2);
  padding-top: 18px;
}

/* ─ About SVF ─ */
.svf-about {
  background: #f5ede0;
  padding: 28px 15px 24px;
  border-bottom: 1px solid #e0cead;
}
.svf-about-badge {
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}
.svf-about-badge span {
  font-size: 15px;
  color: var(--gold-dk);
  letter-spacing: 1px;
  margin-left: 8px;
}
.svf-about-desc {
  font-size: 12.5px;
  color: var(--navy-2);
  line-height: 1.5;
  margin-bottom: 20px;
}
.svf-about-desc br {
  display: none;
}
.svf-cell-wrap {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.svf-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-2);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  border: 1px solid #d8c8a8;
}
.svf-cell::before {
  content: '';
  width: 30px;
  height: 30px;
}
.svf-cell:nth-child(1)::before {
  background: url('../img/svf_1.png') center / contain no-repeat;
}

.svf-cell:nth-child(2)::before {
  background: url('../img/svf_2.png') center / contain no-repeat;
}

.svf-cell:nth-child(3)::before {
  background: url('../img/svf_3.png') center / contain no-repeat;
}

.svf-cell:nth-child(4)::before {
  background: url('../img/svf_4.png') center / contain no-repeat;
}

.svf-cell:nth-child(5)::before {
  background: url('../img/svf_5.png') center / contain no-repeat;
}

.svf-cell:nth-child(6)::before {
  background: url('../img/svf_6.png') center / contain no-repeat;
}

.svf-cell-main {
  width: 108px;
  height: 108px;
  background: #4a6a9a;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  border-color: #3a567f;
}
.svf-cell-main::before {
  width: 36px;
  height: 36px;
}
.svf-sys-label {
  font-size: 23px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  text-align: center;
}
.svf-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.svf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.svf-step-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gold);
}
.svf-step-ico svg {
  width: 50%;
  height: 50%;
}

.svf-step p {
  font-size: 13px;
  color: var(--navy);
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  width: 65px;
  word-break: auto-phrase;
}
.svf-arr {
  font-size: 20px;
  color: var(--gold);
  font-weight: 300;
  line-height: 1;
  margin-top: -20px;
}

/* ─ 프로그램 라인업 ─ */
.svf-lineup {
  background: var(--white);
  padding: 26px 24px;
  border-bottom: 1px solid var(--beige-md);
}
.svf-lineup-hd {
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.2;
}
.svf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.svf-table thead tr {
  background: var(--navy);
  color: var(--gold-lt);
}
.svf-table th {
  padding: 11px 12px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 11px;
}
.svf-table td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid var(--beige-md);
  color: var(--text-md);
  line-height: 1.5;
}
.svf-table tbody tr:nth-child(even) {
  background: var(--beige);
}
.svf-price {
  font-weight: 700;
  color: var(--navy);
  font-size: 13px;
}
.svf-table-note {
  font-size: 10px;
  color: var(--text-lt);
  margin-top: 10px;
  text-align: right;
}

/* ─ 추천 대상 ─ */
.svf-target {
  background: var(--navy-2);
  padding: 26px 24px;
}
.svf-target-hd {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  text-align: center;
}
.svf-target-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.svf-target-list li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  padding-left: 22px;
  position: relative;
  text-align: left;
}
.svf-target-list li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 11px;
  top: 2px;
}
.svf-target-quote {
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--gold);
  padding: 14px 16px;
  font-size: 18px;
  color: var(--gold-lt);
  line-height: 1.85;
  font-weight: 500;
}

.svf-target-quote br {
  display: none;
}

/* ─ 안전한 SVF SYSTEM ─ */
.svf-safety {
  background: #f9f3ea;
  padding: 26px 24px;
  border-bottom: 1px solid #e0cead;
}
.svf-safety-hd {
  font-size: 23px;
  font-weight: 700;
  color: #bd9868;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.3px;
}
.svf-safety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.svf-safe-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 16px 10px;
}
.svf-safe-ico {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: var(--gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 안전성 아이콘: 선 색을 골드로 (svg는 stroke 기반) */
.svf-safe-ico svg {
  stroke: #c9a76c;
  width: 50%;
  height: 50%;
}
.svf-safe-item p {
  font-size: 13px;
  color: var(--navy-2);
  font-weight: 500;
  line-height: 1.5;
}

/* ─ 주요 효과 15가지 ─ */
.svf-major {
  background: var(--white);
  padding: 28px 24px 32px;
}
.svf-major-hd {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: -0.3px;
}
.svf-major-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--beige-md);
  border: 1px solid var(--beige-md);
  border-radius: 4px;
  overflow: hidden;
}
.svf-major-item {
  background: var(--white);
  padding: 14px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
}
.svf-major-item:nth-child(odd) {
  background: var(--beige);
}
.svf-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.5px;
  flex-shrink: 0;
  margin-top: 1px;
}
.svf-major-item strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  line-height: 1.3;
}
.svf-major-item p {
  font-size: 10px;
  color: var(--text-md);
  line-height: 1.6;
}

/* ─ 데스크탑 오버라이드 ─ */
@media (min-width: 900px) {
  .svf-hd {
    padding: 40px 0 36px;
  }
  .svf-main-title {
    font-size: 28px;
  }
  .svf-main-title br {
    display: none;
  }
  .svf-core-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }
  .svf-core-ico {
    width: 100px;
    height: 100px;
  }
  .svf-hd-desc {
    font-size: 16px;
  }
  .svf-about {
    padding: 36px 0 32px;
  }
  .svf-about-desc {
    font-size: 16px;
  }

  .svf-about-desc br {
    display: block;
  }
  .svf-cell-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .svf-steps {
    gap: 12px;
  }
  .svf-step-ico {
    width: 150px;
    height: 150px;
  }
  .svf-step p {
    font-size: 16px;
  }
  .svf-lineup {
    padding: 36px 0;
  }
  .svf-lineup-hd br {
    display: none;
  }
  .svf-table {
    font-size: 14px;
  }
  .svf-table th {
    font-size: 16px;
    padding: 13px 16px;
  }
  .svf-table td {
    padding: 14px 16px;
    font-size: 16px;
  }
  .svf-target {
    padding: 36px 0;
  }
  .svf-target-hd {
    font-size: 32px;
  }
  .svf-target-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 32px;
  }
  .svf-target-list li {
    font-size: 16px;
  }
  .svf-safety {
    padding: 36px 0;
  }
  .svf-safety-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .svf-safe-item {
    padding: 22px 14px;
  }
  .svf-safe-ico {
    width: 100px;
    height: 100px;
  }

  .svf-safe-item p {
    font-size: 15px;
  }
  .svf-major {
    padding: 36px 0 44px;
  }
  .svf-major-hd {
    font-size: 23px;
    margin-bottom: 24px;
  }
  .svf-major-grid {
    grid-template-columns: 1fr 1fr;
  }
  .svf-major-item {
    padding: 16px 18px;
  }
  .svf-major-item strong {
    font-size: 13px;
  }
  .svf-major-item p {
    font-size: 11px;
  }
  .svf-num {
    font-size: 12px;
  }
}

/* ============================================================
     리투오(Re20) 패널
   ============================================================ */
#re20 {
  padding: 0;
  background: #f9f3ea;
}

.dnt-inner {
  text-align: center;
}

/* ─ 헤더 ─ */
.re-hd {
  background: var(--navy);
  padding: 32px 24px 28px;
  border-bottom: 2px solid var(--gold);
}
.re-main-title {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-size: 18px;
  font-weight: 800;
  padding: 8px 22px;
  border-radius: 30px;
  margin-bottom: 24px;
  letter-spacing: -0.3px;
}
.re-combo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 22px;
}
.re-circle {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #3a4a6a;
  border: 2px solid rgba(201, 167, 108, 0.4);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
}
.re-plus {
  font-size: 32px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}
.re-prog-box {
  background: #10121e;
  color: #e8dcc0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  padding: 10px 18px;
  margin-bottom: 18px;
  border-radius: 4px;
}
.re-prog-box strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  margin-top: 6px;
}
.re-hd-desc {
  font-size: 12.5px;
  color: var(--beige-dk);
  line-height: 1.5;
  text-align: center;
  border-top: 1px solid rgba(201, 167, 108, 0.18);
  padding-top: 16px;
  word-break: auto-phrase;
}

.re-hd-desc br {
  display: none;
}

/* ─ 기존 vs Re20 비교 ─ */
.re-about {
  background: #f5ede0;
  padding: 28px 10px;
  border-bottom: 1px solid #e0cead;
}
.re-about-badge {
  display: inline-block;
  background: var(--navy);
  color: var(--gold-lt);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 14px;
  margin-bottom: 12px;
}
.re-about-sub {
  font-size: 12px;
  color: var(--gold-dk);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.re-about-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.4;
  letter-spacing: -0.5px;
  margin-bottom: 22px;
}
.re-vs-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  align-items: center;
  border-radius: 4px;
}
.re-vs-col {
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 10px;
}
.re-vs-old {
  background: #f0e8d8;
}
.re-vs-new {
  background: var(--navy-2);
}
.re-vs-divider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-lt) 100%);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 0 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.re-vs-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 2px;
  text-align: center;
}
.re-vs-old .re-vs-label {
  background: #d8c8a8;
  color: var(--navy);
}
.re-vs-new .re-vs-label {
  background: rgba(201, 167, 108, 0.2);
  color: var(--gold-lt);
}
.re-vs-method {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.re-vs-old .re-vs-method {
  color: var(--navy);
}
.re-vs-new .re-vs-method {
  color: var(--gold-lt);
  word-break: auto-phrase;
}
.re-vs-desc {
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
  flex: 1;
}

.re-vs-desc br {
  display: none;
}
.re-vs-old .re-vs-desc {
  color: var(--text-md);
}
.re-vs-new .re-vs-desc {
  color: rgba(255, 255, 255, 0.75);
}
.re-vs-result {
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  padding: 8px 8px;
  border-radius: 3px;
  line-height: 1.5;
}
.re-vs-r-old {
  background: #e0d0b0;
  color: var(--text-md);
}
.re-vs-r-new {
  background: var(--gold);
  color: var(--navy);
}

/* ─ ECM 성분 ─ */
.re-ecm {
  background: #faf0e0;
  padding: 28px 24px;
  border-bottom: 1px solid #e8d8b8;
}
.re-ecm-title {
  font-size: 25px;
  font-weight: 700;
  color: var(--navy-3);
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}

.re-ecm-title span {
  color: var(--gold);
  display: block;
}
.re-ecm-desc {
  font-size: 16px;
  color: var(--text-md);
  line-height: 1.9;
  text-align: center;
  margin-bottom: 20px;
}
.re-ecm-comps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}
.re-ecm-comp {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  background: var(--beige-md);
  border: 1.5px solid var(--navy-2);
  color: var(--navy-2);
}
.re-ecm-main {
  background: #c9a76c;
  color: var(--white);
  border-color: #a67c30;
}
/* 방사형(원형 둘러싸기) 레이아웃
   --r: 중심에서 카드까지 거리(반지름), --card: 카드 너비 → 값만 바꾸면 원 크기 조절 */
/* ── 모바일: center-cell 풀폭 이미지 + 카드 2열 그리드 ── */
.re-ecm-efx {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* 중앙 이미지: 모바일에선 2열 전체를 차지하는 풀폭 배너 */
.center-cell {
  grid-column: 1 / -1;
  width: 100%;
}
.center-cell img {
  width: 60%;
  margin: 0 auto;
  display: block;
}
/* 사각 카드 */
.re-ecm-efx-item {
  background: var(--gold);
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.re-ecm-efx-ico {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* 아이콘 흰색 통일 (svg는 stroke 기반) */
.re-ecm-efx-ico svg {
  stroke: #fff;
}
.re-ecm-efx-item strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
  line-height: 1.3;
}
.re-ecm-efx-item p {
  font-size: 10px;
  color: var(--white);
  word-break: auto-phrase;
  line-height: 1.6;
}

/* ─ 추천 대상 ─ */
.re-target {
  background: var(--navy);
  padding: 28px 24px;
}
.re-target-hd-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(201, 167, 108, 0.2);
}
.re-target-brand {
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -0.5px;
}
.re-target-label {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  border-left: 2px solid rgba(201, 167, 108, 0.4);
  padding-left: 14px;
  letter-spacing: 1px;
}
.re-target-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.re-target-list li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  padding-left: 22px;
  position: relative;
}
.re-target-list li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 11px;
  top: 2px;
}

/* ─ 핵심 효과 상세 ─ */
.re-efx {
  background: var(--white);
  padding: 28px 24px 32px;
}
.re-efx-title {
  font-size: 23px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  margin-bottom: 22px;
  letter-spacing: -0.3px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--gold);
}
.re-efx-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.re-efx-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--beige-md);
  text-align: left;
}

.re-efx-item svg {
  width: 70%;
  height: auto;
}

.re-efx-item:last-child {
  border-bottom: none;
}
.re-efx-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: var(--gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.re-efx-item strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.4;
}
.re-efx-item p {
  font-size: 12px;
  color: var(--text-md);
  line-height: 1.8;
}

/* ─ 데스크탑 오버라이드 ─ */
@media (min-width: 900px) {
  .re-hd {
    padding: 40px 0 36px;
  }
  .re-main-title {
    font-size: 32px;
  }
  .re-combo-row {
    gap: 32px;
  }
  .re-circle {
    width: 200px;
    height: 200px;
    font-size: 25px;
    line-height: 1.2;
  }
  .re-prog-box {
    font-size: 21px;
    padding: 0 15px;
  }
  .re-prog-box strong {
    font-size: 26px;
  }
  .re-hd-desc {
    font-size: 18px;
  }

  .re-hd-desc br {
    display: block;
  }
  .re-about {
    padding: 36px 0;
  }
  .re-about-sub {
    font-size: 25px;
  }
  .re-about-title {
    font-size: 32px;
  }

  .re-about-title br {
    display: none;
  }

  .re-about-badge {
    font-size: 23px;
  }

  .re-vs-wrap {
    max-width: 1000px;
    margin: 0 auto;
    gap: 25px;
  }
  .re-vs-col {
    padding: 32px 28px;
    gap: 16px;
  }
  .re-vs-label {
    font-size: 16px;
    padding: 7px 14px;
  }
  .re-vs-method {
    font-size: 20px;
  }
  .re-vs-desc {
    font-size: 17px;
    line-height: 1.8;
  }

  .re-vs-desc br {
    display: block;
  }
  .re-vs-result {
    font-size: 16px;
    padding: 12px 12px;
  }
  .re-vs-divider {
    font-size: 18px;
    width: 64px;
    height: 64px;
  }
  .re-ecm {
    padding: 36px 0;
  }
  .re-ecm-title {
    font-size: 32px;
  }
  .re-ecm-title span {
    display: inline;
  }
  .re-ecm-comp {
    font-size: 16px;
  }
  /* 데스크탑: 방사형(원형 둘러싸기) — center-cell 정중앙, 카드 5개 원 둘레 배치 */
  .re-ecm-efx {
    --r: 195px;
    --card: 200px;
    position: relative;
    display: block;
    max-width: 560px;
    aspect-ratio: 1 / 1;
    margin: 45px auto 0;
  }
  .center-cell {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    z-index: 2;
  }
  .center-cell img {
    width: 100%;
  }

  .re-ecm-efx-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--card);
    height: var(--card);
    aspect-ratio: auto;
    border-radius: 50%;
    gap: 8px;
    padding: 18px 12px;
  }
  /* 5개 카드를 72° 간격으로 원 둘레에 배치 (center-cell 다음 2~6번째) */
  .re-ecm-efx-item:nth-child(2) {
    transform: translate(-50%, -50%) rotate(0deg) translateY(calc(-1 * var(--r))) rotate(0deg);
  }
  .re-ecm-efx-item:nth-child(3) {
    transform: translate(-50%, -50%) rotate(72deg) translateY(calc(-1 * var(--r))) rotate(-72deg);
  }
  .re-ecm-efx-item:nth-child(4) {
    transform: translate(-50%, -50%) rotate(144deg) translateY(calc(-1 * var(--r))) rotate(-144deg);
  }
  .re-ecm-efx-item:nth-child(5) {
    transform: translate(-50%, -50%) rotate(216deg) translateY(calc(-1 * var(--r))) rotate(-216deg);
  }
  .re-ecm-efx-item:nth-child(6) {
    transform: translate(-50%, -50%) rotate(288deg) translateY(calc(-1 * var(--r))) rotate(-288deg);
  }
  .re-ecm-efx-ico {
    width: 56px;
    height: 56px;
  }
  .re-ecm-efx-item strong {
    font-size: 17px;
  }
  .re-ecm-efx-item p {
    font-size: 13px;
    line-height: 1.4;
    padding: 0 10px;
  }
  .re-target {
    padding: 36px 0;
  }
  .re-target-brand {
    font-size: 28px;
  }
  .re-target-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 40px;
  }
  .re-target-list li {
    font-size: 14px;
  }
  .re-efx {
    padding: 36px 0 44px;
  }
  .re-efx-title {
    font-size: 23px;
  }
  .re-efx-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .re-efx-item {
    padding: 20px 16px;
    border-bottom: 1px solid var(--beige-md);
    border-right: 1px solid var(--beige-md);
  }
  .re-efx-item:nth-child(even) {
    border-right: none;
  }
  .re-efx-item:nth-last-child(-n + 2) {
    border-bottom: none;
  }
  .re-efx-ico {
    width: 62px;
    height: 62px;
  }
  .re-efx-item strong {
    font-size: 14px;
  }
  .re-efx-item p {
    font-size: 13px;
  }
}

/* ── 1280px+ : 더 넓게 ─────────────────────── */
@media (min-width: 1280px) {
  :root {
    --side-w: 200px;
  }
  #doctor .doc-photo {
    min-height: 500px;
  }
  .doc-card {
    grid-template-columns: 380px 1fr;
  }
}