/* ===== 폰트: Noto Sans KR(국문) + Montserrat(영문 eyebrow), Google Fonts CDN(각 페이지 head 링크) ===== */
/* 굵기: Light 300 / Regular 400 / Bold 700 / ExtraBold 800 */

:root {
  /* 고운맥 디자인 프리셋 02 — 네이비 단색 + Noto/Montserrat */
  /* ═══ ATOMIC (베이스값) ═══ */
  /* color 팔레트(브랜드 고유) */
  --color-navy-900: #0d2e5c; --color-navy-800: #1f2a3a; --color-navy-950: #091c39; --color-navy-600: #4b546d;
  --color-blue-100: #e6eaee; --color-blue-050: rgba(13,46,92,.04);
  --color-gray-500: #5b6b80; --color-gray-300: #d5d5d5;
  --color-gold-600: #a18156; --color-gold-100: rgba(161,129,86,.1);
  --color-beige-300: rgb(225,209,187); --color-white: #ffffff; --color-overlay-700: rgba(7,23,45,.6);
  --color-blue-400: rgb(134,158,192); --color-beige-200: rgb(235, 224, 210);
  --color-navy-a08: rgba(13,46,92,.08); --color-navy-a20: rgba(13,46,92,.2);
  --color-overlay-300: rgba(7,23,45,.25); --color-overlay-800: rgba(7,23,45,.72); --color-overlay-900: rgba(7,23,45,.8);
  --color-white-a90: rgba(255,255,255,.9); --color-white-a70: rgba(255,255,255,.7); --color-white-a55: rgba(255,255,255,.55);
  --color-white-a18: rgba(255,255,255,.18); --color-white-a92: rgba(255,255,255,.92); --color-white-a97: rgba(255,255,255,.97);
  /* font-size */
  --font-size-44: 44px; --font-size-40: 40px; --font-size-36: 36px; --font-size-29: 29px; --font-size-28: 28px;
  --font-size-27: 27px; --font-size-26: 26px; --font-size-22: 22px; --font-size-21: 21px; --font-size-20: 20px;
  --font-size-19: 19px; --font-size-18: 18px; --font-size-17: 17px; --font-size-16: 16px; --font-size-15: 15px; --font-size-14: 14px; --font-size-13: 13px; --font-size-12: 12px;
  --font-size-38: 38px; --font-size-32: 32px; --font-size-30: 30px; --font-size-24: 24px;
  /* font-weight */
  --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800;
  /* space */
  --space-10: 10px; --space-12: 12px; --space-15: 15px; --space-20: 20px; --space-22: 22px; --space-30: 30px; --space-44: 44px;
  --space-70: 70px; --space-72: 72px; --space-80: 80px; --space-100: 100px; --space-120: 120px; --space-160: 160px; --space-200: 200px;
  /* radius / border */
  --radius-0: 0; --radius-pill: 9999px; --radius-circle: 50%; --border-1: 1px; --border-2: 2px;

  /* ═══ SEMANTIC (= atomic 참조 — 사이트는 이걸 사용) ═══ */
  /* color semantic — 카테고리별(= atomic 참조) */
  --text-primary: var(--color-navy-900); --text-secondary: var(--color-gray-500);
  --text-inverse: var(--color-white); --text-inverse-soft: var(--color-blue-100); --text-brand: var(--color-navy-900);
  --bg-base: var(--color-white); --bg-surface: var(--color-blue-100); --bg-subtle: var(--color-blue-050);
  --bg-inverse: var(--color-navy-950); --bg-accent: var(--color-gold-100); --bg-highlight: var(--color-beige-300); --bg-step-cap: var(--color-navy-600);
  --border-default: var(--color-gray-300); --border-strong: var(--color-navy-900);
  --overlay-scrim: var(--color-overlay-700);
  --interactive-default: var(--color-navy-900); --interactive-hover: var(--color-navy-800);
  --interactive-accent: var(--color-gold-600); --interactive-active: var(--color-beige-300);
  /* on-dark(inverse)·glass·overlay 확장 */
  --text-on-inverse: var(--color-white-a90); --text-on-inverse-muted: var(--color-white-a70); --text-on-inverse-faint: var(--color-white-a55);
  --text-accent-soft: var(--color-blue-400);
  --bg-glass: var(--color-white-a92); --bg-glass-strong: var(--color-white-a97); --bg-subtle-strong: var(--color-navy-a08); --bg-cream: var(--color-beige-200);
  --border-inverse: var(--color-white-a18);
  --overlay-tint: var(--color-navy-a20); --overlay-scrim-soft: var(--color-overlay-300); --overlay-scrim-strong: var(--color-overlay-800); --overlay-scrim-x: var(--color-overlay-900);

  --typo-display: var(--font-size-44); --typo-heading: var(--font-size-40);
  --typo-title-large: var(--font-size-30); --typo-title-medium: var(--font-size-26);
  --typo-body-large: var(--font-size-20); --typo-body-medium: var(--font-size-18);
  --typo-label-large: var(--font-size-18); --typo-label-medium: var(--font-size-16);
  --typo-tag: var(--font-size-14); --typo-numeric: var(--font-size-36);

  --gap-sub: var(--space-44); --gap-rule: var(--space-22); --gap-title: var(--space-30);
  --pad-section: var(--space-100); --pad-block: var(--space-100); --gutter: var(--space-15); --header-h: var(--space-80);

  --shape-image: var(--radius-0); --shape-card: var(--radius-0); --shape-modal: var(--radius-0);
  --shape-button: var(--radius-pill); --shape-avatar: var(--radius-circle);
  --shape-divider: var(--border-2); --shape-hairline: var(--border-1);
}
@media (max-width: 768px) {
  :root {
    --gap-sub: var(--space-30); --pad-section: var(--space-72); --gutter: 14px; --header-h: var(--space-72);
    --typo-display: var(--font-size-38); --typo-heading: var(--font-size-32);
    --typo-title-large: var(--font-size-24); --typo-title-medium: var(--font-size-22);
    --typo-body-large: var(--font-size-18); --typo-body-medium: var(--font-size-16);
    --typo-label-large: var(--font-size-16); --typo-label-medium: var(--font-size-14);
    --typo-tag: var(--font-size-12); --typo-numeric: var(--font-size-27);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* ===== Typography 유틸리티 (시맨틱=클래스 / 폰트=크기+굵기 자동, 색·여백 분리) ===== */
.typo-display { font-size: var(--typo-display); font-weight: var(--font-weight-extrabold); }
.typo-heading { font-size: var(--typo-heading); font-weight: var(--font-weight-bold); }
.typo-title-large, .sub-head h3 { font-size: var(--typo-title-large); font-weight: var(--font-weight-bold); }
.typo-title-medium, .sol-name { font-size: var(--typo-title-medium); font-weight: var(--font-weight-bold); }
.typo-body-large { font-size: var(--typo-body-large); font-weight: var(--font-weight-bold); }
.typo-body-medium, .var-def-body p { font-size: var(--typo-body-medium); font-weight: var(--font-weight-regular); }
.typo-label-large, .cause-item h4 { font-size: var(--typo-label-large); font-weight: var(--font-weight-bold); }
.typo-label-medium, .cause-item p, .sc-list li { font-size: var(--typo-label-medium); font-weight: var(--font-weight-regular); }
.typo-tag { font-size: var(--typo-tag); font-weight: var(--font-weight-semibold); }
.typo-numeric { font-size: var(--typo-numeric); font-weight: var(--font-weight-bold); }

html { scroll-behavior: smooth; }

body {
  font-family: "Montserrat", "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", sans-serif;
  color: var(--text-primary);
  background: var(--bg-base);
  font-size: var(--typo-body-medium);            /* 본문 기본 = body-medium */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* 반응형 줄바꿈: 모바일 전용 br은 기본 숨김(아래 미디어쿼리에서 표시) */
.br-mo { display: none; }

/* 본문 폭 = 최대 1400px, 좌우 거터(gutter) 15px (전 페이지 공통) */
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }

/* ===== 미디어 플레이스홀더 (이미지·영상 들어갈 자리) ===== */
.media-placeholder {
  position: relative;
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(45deg, var(--bg-surface) 0 12px, var(--bg-surface) 12px 24px);
  border: 1px dashed #0d2e5c;
  display: flex; align-items: center; justify-content: center;
  color: #0d2e5c; font-size: 0.85rem; font-weight: 500; text-align: center;
}
.media-placeholder::after {
  content: attr(data-label);
  padding: 0.4rem 0.8rem;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--text-primary); color: var(--text-inverse); padding: 0.7rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ===== 헤더 ===== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;                 /* 기본(최상단): 투명 — 어두운 히어로/배너 위에 오버레이 */
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
/* 스크롤 내리면: 흰 배경 + 검은 텍스트(기존 룩) */
.site-header.scrolled {
  background: var(--bg-glass);
  backdrop-filter: blur(8px);
  border-bottom-color: #d5d5d5;            /* 헤더 하단 stroke = 기준 회색 */
}
/* 기본(투명) 상태: 텍스트·로고·아이콘 흰색 */
.site-header:not(.scrolled) .gnb > ul > li > a { color: var(--text-inverse); }   /* 투명상태 기본=흰색 */
.site-header:not(.scrolled) .gnb > ul > li > a.is-active { color: var(--interactive-active); text-decoration-color: var(--interactive-active); }
.site-header:not(.scrolled) .gnb-more-btn .dot { background: var(--bg-base); }
.site-header:not(.scrolled) .nav-toggle span { background: var(--bg-base); }
.site-header:not(.scrolled) .logo img { filter: brightness(0) invert(1); }
/* 모바일 메뉴 열렸을 땐 흰 패널 가독성 위해 솔리드로 */
.site-header:has(.nav-toggle[aria-expanded="true"]) {
  background: var(--bg-glass-strong); backdrop-filter: blur(8px); border-bottom-color: #d5d5d5;
}
.site-header:has(.nav-toggle[aria-expanded="true"]) .logo img { filter: none; }
.site-header:has(.nav-toggle[aria-expanded="true"]) .nav-toggle span { background: var(--text-primary); }
/* 로고+메뉴 전체 가운데 정렬, 위아래 +3px (76→82px) */
/* 총 헤더 높이 = var(--header-h)(75px). 1px 하단 stroke 포함이라 inner는 -1px */
.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; width: 100%; max-width: none; padding: 0 40px; height: calc(var(--header-h) - 1px); }   /* 고운맥: 풀폭 — 로고 좌끝 / 메뉴 우끝, 좌우 40px */
.logo { display: flex; align-items: center; flex: none; }   /* 좁아져도 로고 안 줄어들게 */
.logo img { width: 198px; height: auto; max-width: none; display: block; }   /* 헤더 로고 */
.logo-w { font-family: "Noto Sans KR", serif; font-style: italic; color: var(--text-primary); }

/* GNB (데스크톱) — 풀하이트 + 호버 드롭다운 */
.gnb { align-self: stretch; }
.gnb > ul { display: flex; flex-wrap: nowrap; gap: 1.8rem; list-style: none; height: 100%; }
.gnb > ul > li { position: relative; display: flex; align-items: center; flex: none; }
.gnb > ul > li > a {
  display: flex; align-items: center; height: 100%; white-space: nowrap;  /* 가로 줄어도 줄바꿈 금지 */
  font-size: var(--typo-body-medium); font-weight: var(--font-weight-medium); color: var(--text-primary); transition: color .2s;
}
.gnb > ul > li > a:hover { color: #0d2e5c; }
/* 현재 보고 있는 섹션의 메뉴: 색 + 2px 밑줄 */
.gnb > ul > li > a.is-active {
  color: #0d2e5c;
  text-decoration: underline;
  text-decoration-color: #0d2e5c;
  text-decoration-thickness: 2px;
  text-underline-offset: 11px;
}
.gnb-sub {
  position: absolute; top: calc(100% - 10px); left: 0;   /* 헤더와 살짝 겹치게 */
  min-width: 170px; background: var(--bg-base);                     /* 테두리·라운드 없음 */
  box-shadow: 0 12px 30px rgba(0, 0, 0, .08); padding: 6px 0; list-style: none;
  opacity: 0; visibility: hidden; transition: opacity .18s ease; z-index: 1;
}
.gnb > ul > li:hover > .gnb-sub,
.gnb > ul > li:focus-within > .gnb-sub { opacity: 1; visibility: visible; }
.gnb-sub li { white-space: nowrap; }
.gnb-sub a {
  display: block; padding: 10px 22px; font-size: 16px; font-weight: 400;   /* 텍스트 16px · 상하 10px */
  color: var(--text-primary); transition: background .15s;
}
.gnb-sub a:hover { background: var(--bg-surface); }

/* 더보기(…) 오버플로 메뉴 — 화면 좁아지면 안 들어가는 대메뉴를 여기로 */
.gnb-more { position: relative; display: flex; align-items: center; flex: none; }
.gnb-more[hidden] { display: none; }
.gnb-more-btn {
  display: flex; align-items: center; gap: 4px; height: 100%;
  background: none; border: 0; cursor: pointer; padding: 0 6px;
}
.gnb-more-btn .dot { width: 5px; height: 5px; border-radius: var(--shape-avatar); background: var(--text-primary); }
.gnb-more-list {
  position: absolute; top: calc(100% - 10px); right: 0;
  min-width: 150px; background: var(--bg-base); box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
  padding: 6px 0; list-style: none;
  opacity: 0; visibility: hidden; transition: opacity .18s ease; z-index: 2;
}
.gnb-more:hover > .gnb-more-list,
.gnb-more:focus-within > .gnb-more-list { opacity: 1; visibility: visible; }
.gnb-more-list > li { position: relative; white-space: nowrap; }
.gnb-more-list > li > a {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 10px 20px; font-size: 16px; font-weight: 400; color: var(--text-primary);
  transition: background .15s;
}
.gnb-more-list > li:hover > a { background: var(--bg-surface); }
/* 하위메뉴 있는 항목엔 우측 화살표(>) */
.gnb-more-list > li.has-children > a::after {
  content: ""; width: 7px; height: 7px; flex: none; margin-left: 6px;
  border-right: 1.5px solid #999; border-top: 1.5px solid #999; transform: rotate(45deg);
}
/* 오버플로 항목의 서브메뉴: 기본은 우측 플라이아웃, 공간 없으면 좌측(flip-left) */
.gnb-more-list .gnb-sub { top: -6px; left: 100%; right: auto; }
.gnb-more-list > li.flip-left > .gnb-sub { left: auto; right: 100%; }
.gnb-more-list > li:hover > .gnb-sub,
.gnb-more-list > li:focus-within > .gnb-sub { opacity: 1; visibility: visible; }

/* 햄버거 버튼 (모바일 전용, 기본 숨김) */
.nav-toggle {
  display: none; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 20px; background: none; border: 0; cursor: pointer; padding: 0;
}
.nav-toggle span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--text-primary);
  transition: transform .25s, opacity .25s;
}
.nav-toggle span:nth-child(1) { top: 1px; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 17px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* 모바일 햄버거 메뉴 (헤더 아래로 펼쳐지는 패널 + 대메뉴 아코디언) */
.mobile-menu {
  display: none;                         /* 데스크톱에선 항상 숨김 */
  position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
  z-index: 40; background: var(--bg-base); overflow-y: auto;
  padding-bottom: 32px;
}
.mmenu { list-style: none; }
/* 선은 대메뉴 사이에만 (대메뉴↔서브·서브↔서브엔 선 없음) */
.mmenu > li { border-bottom: 1px solid #f4f4f4; }
.mmenu > li > a,
.mmenu-parent {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 15px 20px; font-family: inherit; font-size: 14px; font-weight: 500;   /* 모바일 메뉴 텍스트 축소 */
  color: var(--text-primary); background: none; border: 0; text-align: left; cursor: pointer; line-height: 1.4;
}
/* 텍스트 좌측 · 화살표 우측 끝 */
.mmenu-parent { justify-content: space-between; }
/* 펼친(누른) 대메뉴 배경만 강조 */
.mmenu-parent[aria-expanded="true"] { background: var(--bg-surface); }
/* 우측 아래화살표(⌄) — 얇은 선 · 연한 회색, 펼치면 위로(⌃) */
.mmenu-arrow {
  flex: none; width: 9px; height: 9px; margin-top: -4px;
  border-right: 1.5px solid #999; border-bottom: 1.5px solid #999;
  transform: rotate(45deg); transition: transform .2s; transform-origin: center;
}
.mmenu-parent[aria-expanded="true"] .mmenu-arrow { transform: rotate(-135deg); margin-top: 2px; }
/* 하위메뉴 (아코디언) */
.mmenu-sub { list-style: none; overflow: hidden; max-height: 0; transition: max-height .28s ease; background: var(--bg-base); }
.mmenu-parent[aria-expanded="true"] + .mmenu-sub { max-height: 640px; }
.mmenu-sub a {
  display: block; padding: 8px 20px 8px 38px; font-size: 13px; font-weight: 400; color: var(--text-primary);  /* 모바일 서브메뉴 텍스트 축소 */
}

/* ===== 히어로 (풀스크린 / 어떤 해상도에서도 화면 꽉 채움) ===== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;    /* 폴백 */
  height: 100dvh;   /* 헤더가 fixed 오버레이라 히어로는 화면 전체를 채움(헤더가 위에 뜸) */
  overflow: hidden;
  background: var(--text-primary);
}
/* 데스크톱(>768px): YouTube iframe을 화면 꽉 차게 cover (16:9 유지하며 넘치는 부분 crop) */
.hero-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--text-primary); }
/* 인트로 배경영상: 로딩 중 재생버튼을 포스터로 덮고, 자동재생 시작 시간(2s) 뒤 페이드아웃 */

.hero-video iframe, .hero-video video {
  position: absolute; top: 50%; left: 50%; object-fit: cover;          /* 양축 중앙정렬 → 어떤 비율에서도 꽉 채움(여백 없음) */
  transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;     /* 화면 너비 기준 16:9 */
  min-width: 177.78vh; min-height: 100vh; /* 화면 높이 기준 16:9 (둘 중 큰 쪽이 적용돼 cover) */
  border: 0;
}
/* 스크롤 인디케이터 (가운데 하단, 위아래로 바운스) */
.hero-scroll {
  position: absolute; left: 50%; bottom: 26px; z-index: 5;
  text-align: center; text-decoration: none; color: var(--text-inverse);
  font-size: 0.78rem; letter-spacing: 2px; text-transform: lowercase;
  animation: heroScrollBounce 1.4s ease-in-out infinite;
}
.hero-scroll img { display: inline-block; }
@keyframes heroScrollBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* 모바일(≤768px): 배너 슬라이더로 대체 (기본 숨김, 미디어쿼리에서 노출) */
.hero-mobile { position: absolute; inset: 0; display: none; }
/* 모바일 전용 영상: 1:1 풀폭 박스에 cover (16:9 플레이어의 가운데 정사각만 보이게 크롭) */
.hero-mobile-video { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--text-primary); pointer-events: none; }
.hero-mobile-video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: 177.78%; border: 0; }
.hero-slider { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--text-primary); touch-action: pan-y; }
.hero-slides { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; width: 100%; height: 100%; transition: transform .4s ease; }
.hero-slide { flex: 0 0 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.hero-dots { position: absolute; bottom: 18px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.hero-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--shape-avatar); background: var(--text-on-inverse-faint); cursor: pointer; transition: width .25s, background .25s; }
.hero-dot.is-active { width: 22px; border-radius: 4px; background: var(--bg-base); }

/* ===== 섹션 공통 ===== */
.section-eyebrow {
  font-family: "Noto Sans KR", sans-serif; font-size: 0.78rem; letter-spacing: 3px;
  color: var(--text-primary); font-weight: 600; text-align: center; margin-bottom: 0.6rem;
}
.section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 500; text-align: center;
  letter-spacing: -0.5px; margin-bottom: 3rem;
}

/* ===== 진료 안내 (좌:이미지 / 우:텍스트, 슬라이드) ===== */
.services { height: 1100px; display: flex; align-items: center; overflow: hidden; }
.svc-slider { position: relative; overflow: visible; touch-action: pan-y; }   /* 화살표 바깥 배치 위해 visible — 슬라이드 클리핑은 .svc-viewport */
.svc-viewport { overflow: hidden; }
.svc-track { display: flex; align-items: flex-start; list-style: none; transition: transform .5s ease; }   /* 슬라이드를 위로 정렬(키 큰 슬라이드에 안 늘어남) */
.svc-slide {
  flex: 0 0 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;   /* 이미지·타이틀 시작점 항상 동일 */
}
/* 좌측 이미지 */
/* 이미지+데코사각형을 figure 박스 안에 담아 잘리지 않게 (우측 30px·하단 34px peek 공간) */
/* 우측 헤딩의 line-height 윗여백만큼 이미지를 내려 글자 윗변과 사진 윗변을 맞춤(텍스트를 올리면 슬라이더 overflow에 잘림) */
.svc-image { margin: 0; position: relative; padding: 9px 30px 34px 0; }
/* 우측 아래 노란(크림) 데코 사각형 — 사진 뒤에서 peek */
.svc-image::after {
  content: ""; position: absolute; z-index: 0;
  left: 16%; top: 22%; right: 0; bottom: 0;
  background: var(--bg-surface);
}
.svc-image .media-placeholder { aspect-ratio: 1 / 1; position: relative; z-index: 1; }
.svc-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; position: relative; z-index: 1; }
/* 우측 텍스트 */
.svc-text { padding-right: 12px; }
.svc-en { font-size: 44px; font-weight: 800; line-height: 1.15; color: var(--text-primary); letter-spacing: -0.5px; }
.svc-divider { display: block; width: 28px; height: 2px; background: #000000; margin: 22px 0 16px; }
.svc-kr { font-size: 32px; font-weight: 700; color: #0d2e5c; margin-bottom: 22px; }
.svc-b1 { font-size: 24px; font-weight: 400; color: var(--text-primary); margin-bottom: 14px; }
.svc-b2 { font-size: 18px; font-weight: 400; color: var(--text-secondary); line-height: 1.7; }
/* 하단 점 (비활성=연한 링, 활성=베이지 채움) — 내용과 56px 간격 */
.svc-dots { display: flex; justify-content: center; gap: 12px; margin-top: 66px; }
.svc-dot {
  width: 11px; height: 11px; padding: 0; border: 1px solid var(--bg-surface); border-radius: var(--shape-avatar);
  background: var(--bg-surface); cursor: pointer; transition: background .2s, border-color .2s;
}
.svc-dot.is-active { background: var(--bg-surface); border-color: var(--text-inverse-soft); }

/* 진료 슬라이더 좌우 화살표 (이미지 양옆, 텍스트와 안 겹침) */
.svc-image a { display: block; }
.svc-arrow { position: absolute; z-index: 6; top: 50%; transform: translateY(-50%);
  border: none; background: none; padding: 0; cursor: pointer; color: #0d2e5c;
  display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.svc-arrow:hover { opacity: .65; }
.svc-arrow svg { width: 44px; height: 31px; display: block; }
.svc-arrow:hover { background: var(--bg-base); }
.svc-prev { left: 6px; }
.svc-next { right: 6px; }
@media (min-width: 769px) {
  .svc-slide { padding-left: 40px; padding-right: 40px; }   /* 그룹 약 10% 확대 */
  .svc-text { padding-top: 40px; }
  .svc-prev { left: -50px; }   /* PC: 그룹에서 더 바깥(컨테이너 밖 허용) */
  .svc-next { right: -50px; }                           /* 우측 텍스트 위에서 20px 내림 */
}
@media (max-width: 768px) {
  .svc-arrow { top: 34%; }
  .svc-arrow svg { width: 36px; height: 26px; }
}


/* ===== 푸터 ===== */
.site-footer { background: var(--bg-inverse); color: var(--text-on-inverse); padding: 2.4rem 0; font-size: 0.82rem; text-align: center; }
.footer-logo { margin-bottom: 0.8rem; text-align: center; }
.footer-logo img { width: 150px; height: auto; display: block; margin: 0 auto; }   /* 푸터 로고 (0.5배) */
/* 비급여항목 — 텍스트 버튼(박스 없음), 색 #e5e7eb */
.footer-btn {
  display: inline-block; margin: 0 auto 0.9rem;
  padding: 12px 6px; background: transparent; color: var(--bg-cream);
  font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; text-underline-offset: 4px; transition: color .2s;
}
.footer-btn:hover { background: transparent; color: var(--bg-cream); text-decoration: underline; }
.footer-biz { text-align: center; }   /* 가운데 정렬 */
.footer-biz address { font-style: normal; font-size: 12px; white-space: nowrap; line-height: 1.9; color: var(--text-on-inverse); margin: 0; }
.footer-biz address a { color: inherit; text-decoration: none; }   /* 지점별 한 줄 */
.footer-scope { max-width: 760px; margin: var(--space-15) auto var(--space-12); color: var(--bg-cream); font-size: var(--font-size-13); line-height: 1.7; text-align: center; }
.footer-copy { margin-top: 0.4rem; color: var(--text-on-inverse-faint); }   /* 상호명~ 텍스트와 거의 붙게 */

/* ===== PC 우측 플로팅 상담 버튼 (연결된 패널 + 가운데 구분선) ===== */
.dmenu {
  position: fixed; right: 55px; top: 50%; transform: translateY(calc(-50% - 100px)); z-index: 99;
  list-style: none; display: flex; flex-direction: column;
  border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18);   /* 본문과 겹쳐도 보이도록 그림자 */
}
.dmenu > li { position: relative; }
.dmenu > li:not(:last-child) { border-bottom: 1px solid #d5d5d5; }   /* 버튼 사이 가운데선 */
.flo-item { display: block; padding: 0; border: 0; background: none; cursor: pointer; }   /* 모달 오픈 버튼 리셋 */
.dmenu .flo-item img { width: 88px; max-width: none; height: auto; display: block; }   /* 실제 이미지 크기(88×112) */
.dmenu > li:first-child .flo-item img { border-radius: 14px 14px 0 0; }
.dmenu > li:last-child .flo-item img { border-radius: 0 0 14px 14px; }
.ddropdown {
  position: absolute; right: 100%; top: 0; margin-right: 8px;
  list-style: none; background: var(--bg-base); box-shadow: 0 8px 24px rgba(0, 0, 0, .14);   /* 라운드 없음 */
  padding: 6px 0; min-width: 108px;
  opacity: 0; visibility: hidden; transform: translateX(8px); transition: opacity .18s, transform .18s;
}
/* 버튼↔서브메뉴 사이 빈공간을 투명 브리지로 덮어 hover 유지 */
.ddropdown::after { content: ""; position: absolute; top: 0; right: -12px; width: 12px; height: 100%; }
.dmenu > li:hover > .ddropdown,
.dmenu > li:focus-within > .ddropdown { opacity: 1; visibility: visible; transform: translateX(0); }
.ddropdown li { white-space: nowrap; }
.ddropdown a { display: block; padding: 9px 18px; font-size: 15px; color: var(--text-primary); transition: background .15s; }
.ddropdown a:hover { background: var(--bg-surface); }   /* hover 시 배경만, 글씨는 기본 어두운색 유지 */

/* ===== 모바일 하단 고정 탭바 (이미지맵) ===== */
.mobile-tabbar { display: none; }
.tabbar-area { position: absolute; top: 0; height: 100%; width: 25%; background: none; border: 0; padding: 0; cursor: pointer; }

/* ===== 반응형 ===== */
@media (max-width: 900px) {
  .value-grid, .branch-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
}

/* 모바일 분기 = 768px (아임웹 원본과 동일) */
@media (max-width: 768px) {
  /* 모바일 헤더 높이 100→92px (상하 각 4px 줄임) */
  :root { --header-h: 72px; }   /* 모바일 헤더 높이 축소 */

  /* 모바일 본문(헤더 포함) 좌우 margin 20px. 단 히어로는 풀블리드(아래에서 inset:0) */

  /* 반응형 줄바꿈 전환 */
  .br-pc { display: none; }
  .br-mo { display: inline; }

  .logo img { width: 166px; }   /* 모바일 헤더 로고 (추가 0.5배) */
  .footer-logo img { width: 65px; }   /* 모바일 푸터 로고 = 81의 -20% */
  .footer-biz { display: none; }   /* 모바일 푸터 사업자정보 숨김 */

  /* 헤더: 로고 왼쪽 + 햄버거 오른쪽, GNB 숨김 */
  .header-inner { justify-content: flex-start; }
  .gnb { display: none; }
  .nav-toggle { display: block; }

  /* 햄버거 메뉴: 열렸을 때만 헤더 아래로 표시 */
  .mobile-menu:not([hidden]) { display: block; }

  /* 우측 플로팅 버튼은 숨기고 하단 탭바 사용 */
  .dmenu { display: none; }

  /* 하단 고정 탭바 — 화면 맨 아래 딱 붙이고, safe-area(주소창/홈인디케이터)까지 같은 배경으로 메워 본문 비침 방지 */
  .mobile-tabbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    line-height: 0; background: #f4f4f4;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .07);
  }
  .mobile-tabbar img { width: 100%; display: block; }
  body { padding-bottom: calc(24vw + env(safe-area-inset-bottom, 0px)); }   /* 탭바(높이 ≈23vw)에 본문이 안 가리도록 */

  /* 히어로(모바일): 데스크톱 영상 숨기고, 모바일 전용 영상(1:1 풀폭) 노출 */
  .hero { height: auto; }
  .hero-video { display: none; }
  .hero-mobile { display: block; position: static; }
  .hero-scroll { display: none; }

  /* 진료 안내: 세로 스택, 이미지-내용 간격 40px */
  .services { height: auto; padding: 56px 0; }
  .svc-slide { grid-template-columns: 1fr; gap: 40px; }
  .svc-en { font-size: 36px; }   /* 타이틀1 */
  .svc-kr { font-size: 28px; margin-bottom: 18px; }   /* 타이틀2 */
  .svc-b1 { font-size: 20px; }
  .svc-b2 { font-size: 16px; }
}

/* ===== About 유테라 페이지 ===== */
.about-hero {
  background: linear-gradient(var(--overlay-tint), var(--overlay-tint)), url("images/about유테라/상단이미지_about유테라.png") center/cover no-repeat;
  color: var(--text-inverse); display: flex; align-items: center;
  padding: calc(80px + var(--header-h)) 0 80px;   /* 상단 = 80 + 고정헤더 높이(오버레이 가림 방지). 좌우 거터는 .container */
}
.about-hero-title { font-size: 44px; font-weight: 800; letter-spacing: -0.5px; color: var(--text-inverse-soft); }
.about-hero-title strong { font-weight: 800; }
.about-hero-sub { margin-top: 1.2rem; font-size: 20px; line-height: 1.65; color: var(--text-on-inverse); }

.about-intro { padding: 150px 0; text-align: center; }
.about-logo img { width: 240px; height: auto; max-width: 100%; display: inline-block; }   /* 이전 400 → -40% */
.about-intro-title { margin-top: 60px; font-size: 32px; font-weight: 500; color: #0d2e5c; letter-spacing: -0.5px; }
.about-intro-title .ink { color: var(--text-primary); }   /* '유테라산부인과'만 기본 검은 텍스트 */
.about-divider { display: block; width: 100%; height: 1px; background: #d5d5d5; margin: 3rem auto 0; }

.about-philosophy {
  background: linear-gradient(var(--overlay-scrim-x), var(--overlay-scrim-x)), url("images/about유테라/about-mid.jpg") center/cover no-repeat;
  background-attachment: fixed;   /* 스크롤해도 이미지 고정(parallax) */
  color: var(--text-inverse); padding: 150px 0; text-align: center;
}
.about-ph-title { font-size: 32px; font-weight: 400; margin-bottom: 1.8rem; letter-spacing: -0.5px; color: var(--text-inverse-soft); }   /* 나머지 medium */
.about-ph-title strong { font-weight: 800; }   /* 임신·출산·피임·노화만 extrabold */
.about-ph-body { max-width: 720px; margin: 0 auto; font-size: 18px; line-height: 1.95; color: var(--text-inverse-soft); }

.about-closing { padding: 150px 0 360px; text-align: center; }   /* 공통 150 / 하단만 360 예외 */
.about-closing-text { font-size: 32px; font-weight: 600; line-height: 1.6; color: var(--text-primary); letter-spacing: -0.5px; }
.about-closing-text .line1 { font-weight: 300; }   /* 윗줄만 light */

@media (max-width: 768px) {
  .about-hero { min-height: 220px; padding: calc(50px + var(--header-h)) 0 50px; }   /* 상단 = 50 + 고정헤더 높이 */
  .about-hero-title { font-size: 29px; }
  .about-hero-sub { font-size: 16px; margin-top: 0.9rem; }
  .about-intro { padding: 98px 0; }
  .about-logo img { width: 90px; }   /* 이전 150 → -40% */
  .about-intro-title { font-size: 24px; margin-top: 1.6rem; }
  .about-divider { margin-top: 2.2rem; }
  .about-philosophy { padding: 98px 0; }
  .about-ph-title { font-size: 26px; margin-bottom: 1.3rem; }
  .about-ph-body { font-size: 16px; line-height: 1.85; text-align: left; }
  .about-closing { padding: 98px 0; }
  .about-closing-text { font-size: 26px; }
}

/* ===== 진료 상세 페이지 공통 (임신/피임 등) ===== */
/* 상단 배너 (사진 위 텍스트 오버레이) — 전 페이지 공통 시스템 표준(about과 동일) */
.page-hero {
  color: var(--text-inverse); display: flex; align-items: center;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* dim = 밝은 크림 .25 (전 페이지 공통) + 페이지별 배너 이미지 */
.preg-hero {
  background-image: linear-gradient(var(--overlay-tint), var(--overlay-tint)), url("images/임신피임/상단이미지_임신.jpg");
}
.exam-hero {
  background-image: linear-gradient(var(--overlay-tint), var(--overlay-tint)), url("images/여성검진/상단이미지_여성검진.jpg");
}
/* 여성검진 섹션 사진(3:2) — 가운데, 라운드 없음 */
.exam-figure { max-width: 600px; margin: 0 auto 36px; overflow: hidden; }
.exam-figure img { width: 100%; height: auto; display: block; }
.page-hero-inner { padding-top: calc(80px + var(--header-h)); padding-bottom: 80px; }   /* 상단 = 80 + 고정헤더 높이. 좌우는 .container(15/20px) 유지 */
.page-hero-title { letter-spacing: -0.5px; color: var(--text-inverse-soft); }   /* 1) 48 EB, 크림 */
.page-hero-rule { display: block; width: 30px; height: 2px; background: var(--text-on-inverse-muted); margin: var(--gap-rule) auto; }   /* 배너 제목 아래 짧은 가로선 */
.page-hero-sub { margin-top: 0; line-height: 1.65; color: var(--text-on-inverse); }  /* 2) 20, 흰색 */

/* 부분 강조 공통: 섹션 내 strong = ExtraBold, .accent = 메인 골드 */
.dept strong { font-weight: 800; }
.accent { color: #0d2e5c; }

/* 진료 섹션 — 상하 패딩 = 페이지 공통 기본(PC 150 / 모바일 98). 마지막 섹션 하단만 360 예외 */
.dept { padding: var(--pad-section) 0; }
.dept:last-of-type { padding-bottom: 360px; }   /* 페이지 마지막 섹션 = 푸터 앞 여백 */
#perineal { padding-bottom: 0; }   /* 마지막 블록이 feature-bg 밴드(자체 패딩 90px) → 하단 패딩 제거, 다음 섹션과 간격 정상화 */
#bleeding { padding-bottom: 0; }   /* 여성질환 마지막 — 회색 밴드로 끝나게(흰 여백 제거) */
.dept-alt { background: var(--bg-base); }      /* 피임 섹션 배경 = 흰색 */
.dept-head { text-align: center; margin-bottom: 104px; }   /* 타이틀↔첫 소제목 간격 2배 */
.sec-title { color: var(--text-primary); margin-bottom: 0; letter-spacing: -0.5px; }  /* 섹션 대제목 40/700 (강조 strong 800) */
.dept-title--partial { font-weight: 400; color: var(--text-primary); }   /* '임신의 증상'처럼 일부(strong)만 ExtraBold, 기본 검은색 */
.dept-divider { display: block; width: 36px; height: 2px; background: #0d2e5c; margin: var(--gap-rule) auto 0; }

/* 하위 블록(섹션) 간 여백 = 200px (공통) */
.dept-block { margin-top: 200px; }
.dept-block:first-of-type { margin-top: 0; }
/* 소제목: 36 ExtraBold, 가운데 정렬(앞 골드바 없음). 부분강조(--partial)는 base 400 + strong 800 */
.dept-sub--partial { font-weight: 400; }

/* 본문/노트 (기본 16) */
.dept-lead { font-size: 18px; color: var(--text-secondary); margin-bottom: 26px; }
.dept-note { font-size: 18px; color: var(--text-secondary); margin-top: 18px; line-height: 1.85; }
.dept-note--lg { font-size: 28px; font-weight: 500; color: var(--text-primary); line-height: 1.5; margin-top: 26px; }  /* 27) 30 */
.dept-note--18 { font-size: 18px; color: var(--text-secondary); }   /* 32) 18 */

/* 임신 증상 — 5칸 카드 그리드 (이미지에 라벨 포함) */
.symptom-lead { font-size: 18px; color: var(--text-secondary); margin-bottom: 26px; text-align: center; }   /* 4) 18, 가운데 */
.symptom-grid { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.symptom-grid figure { margin: 0; overflow: hidden; }   /* 그림자 없음 */
.symptom-grid img { width: 100%; height: auto; display: block; }

/* 임신 검사 — 3칸 카드 */
.exam-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.exam-card { background: var(--bg-base); border: 1px solid #d5d5d5; }
.exam-img { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: #f4f4f4; }
.exam-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exam-name { font-size: 26px; font-weight: 700; color: var(--text-primary); padding: 18px 20px 0; }   /* 6) 26 B */
.exam-tag { font-size: 18px; font-weight: 500; color: #0d2e5c; padding: 8px 20px 0; }          /* 7) 18 */
.exam-body { font-size: 18px; color: var(--text-secondary); line-height: 1.8; padding: 8px 20px 22px; }  /* 본문 18 */

/* 이미지 + 텍스트 좌우 split (임신초기출혈·자궁내장치·임플라논) */
.media-split { display: grid; grid-template-columns: 5fr 7fr; gap: 44px; align-items: center; }
.media-split-img { margin: 0; overflow: hidden; }
.media-split-img img { width: 100%; height: auto; display: block; }
.media-split-text p + p { margin-top: 14px; }
.media-split-text p { font-size: 18px; color: var(--text-secondary); line-height: 1.9; }

/* 가운데 정렬 본문 (임신초기 출혈 등) */
.section-body { font-size: 18px; color: var(--text-secondary); line-height: 1.9; text-align: center; }   /* 10) 18 */
.section-body--left { text-align: left; }
.section-body--pcc { text-align: center; }   /* PC 가운데, 모바일 좌측 (아래 미디어쿼리) */

/* 이미지 섹션 (사진 왼쪽 + 텍스트 오른쪽) — 배경 풀블리드 밴드 */
.feature-bg {
  position: relative; left: 50%; right: 50%; width: 100vw; margin: 200px -50vw 0;   /* 위 섹션과 200px 간격 */
  background: #f4f4f4; padding: 90px 0;
}
.feature-bg:not(.dept-block) { margin-top: 180px; }   /* 루프·임플라논 마무리 밴드 위 패딩 180 */
.feature-bg--gray { background: #f4f4f4; }   /* 장점+스펙 섹션 — 연한 회색 배경 */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.feature-split-img { margin: 0; overflow: hidden; }
.feature-split-img img { width: 100%; height: auto; display: block; }
.feature-title { font-size: 28px; font-weight: 400; color: var(--text-primary); line-height: 1.45; text-align: left; margin-bottom: 22px; letter-spacing: -0.5px; }  /* 11) 30, 강조 EB */
.feature-body { font-size: 18px; color: var(--text-secondary); line-height: 1.9; text-align: left; }   /* 12) 18 */

/* Q&A 리스트 (섹션별 크기 변형) — 질문=베이지 밴드, 답변=하단 골드 라인, 가운데 정렬 */
.qa-list dt { font-weight: 700; color: var(--text-primary); text-align: left; background: var(--bg-surface); padding: 16px 24px; margin-top: 28px; }
.qa-list dt::first-letter { font-weight: 800; }   /* 질문 첫 글자 'Q'만 ExtraBold */
.qa-list dt:first-child { margin-top: 0; }
.qa-list dd { margin: 0; color: var(--text-secondary); line-height: 1.85; text-align: left; padding: 24px; border-bottom: 1px solid #0d2e5c; }
.qa--24-20 dt { font-size: 24px; } .qa--24-20 dd { font-size: 18px; }   /* 경구피임약 — 답변 본문 18 */
.qa--22-20 dt { font-size: 22px; } .qa--22-20 dd { font-size: 18px; }   /* 자궁내 장치 — 답변 본문 18 */
.qa--22-18 dt { font-size: 22px; } .qa--22-18 dd { font-size: 18px; }   /* 임플라논 30)/31) */
/* 자궁내 장치 — 이미지(상단 중앙) + Q&A 3박스 가로 배치 */
.iud-figure { margin: 0 auto 50px; max-width: 500px; }
.iud-figure img { width: 100%; height: auto; display: block; }
.qa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.qa-card { display: flex; flex-direction: column; }
.qa-card .qa-q { background: var(--bg-surface); text-align: left; font-weight: 700; color: var(--text-primary); font-size: 22px; padding: 16px 20px; }
.qa-card .qa-q::first-letter { font-weight: 800; }   /* 'Q'만 ExtraBold */
.qa-card .qa-a { flex: 1; text-align: left; font-size: 18px; color: var(--text-secondary); line-height: 1.85; padding: 28px 20px; border-bottom: 1px solid #0d2e5c; }   /* 좌측정렬 + 하단 골드 스트로크 */

.list-center { text-align: center; }   /* 불릿 리스트(inline-block)를 섹션 가운데로 — 텍스트는 좌측정렬 유지 */
.bullet-list { list-style: none; margin-top: 8px; display: inline-block; text-align: left; }   /* 가운데 dd 안에서 좌측정렬 블록 */
.bullet-list li { position: relative; padding-left: 16px; }
.bullet-list li::before { content: "•"; position: absolute; left: 0; color: #0d2e5c; }

/* 경구피임약의 종류 — 이미지(왼쪽 프레임) + 텍스트(오른쪽) */
.pill-grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 40px; }
.pill-card { display: grid; grid-template-columns: 388px 1fr; gap: 50px; align-items: center; }
.pill-img { margin: 0; border: 1px solid #d5d5d5; background: var(--bg-base); }   /* 이미지 가로 388px (컬럼 고정) */
.pill-img img { width: 100%; height: auto; display: block; }
.pill-name { font-size: 26px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; }   /* 18) 26 B */
.pill-lead { font-size: 18px; color: var(--text-primary); line-height: 1.7; }     /* 19) 18 */
.pill-body { font-size: 18px; color: var(--text-secondary); line-height: 1.85; margin-top: 20px; }   /* 본문 18 */

/* 종합 안내 — 배경 채운 별도 섹션 밴드(풀블리드, 시스템 섹션 패딩 150/98) */
.pill-note-band {
  position: relative; left: 50%; right: 50%; width: 100vw; margin: 200px -50vw 0;   /* 위 섹션과 200px 간격 */
  background: #f4f4f4; padding: 150px 0;
}
.pill-note { text-align: center; }
.pill-note p { font-size: 22px; color: var(--text-primary); line-height: 1.8; }   /* 21) 22 */
.pill-note p + p { margin-top: 1.6em; }

/* 루프 종류 비교표 */
.iud-q { font-size: 32px; font-weight: 400; color: var(--text-primary); text-align: center; margin-top: 200px; margin-bottom: 42px; letter-spacing: -0.5px; }  /* 36, '루프의 종류'만 EB(strong), 나머지 Medium. 위 간격=하위블록 200 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.iud-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--bg-base); font-size: 16px; min-width: 820px; }  /* 26) 16, 데이터 4열 균등 */
.iud-table th, .iud-table td { border: 1px solid #d5d5d5; padding: 14px 16px; vertical-align: top; text-align: left; }
.iud-table thead th { background: var(--bg-surface); color: var(--text-primary); font-weight: 700; text-align: center; }
.iud-table .iud-col-name { width: 80px; }   /* 구분열 너비(첫 행 기준, table-layout:fixed) */
.iud-table .iud-name { padding-left: 6px; padding-right: 6px; text-align: center; vertical-align: middle; background: #f4f4f4; font-weight: 700; }   /* 행머리(구분열)=연회색, 열머리(thead)=핑크그레이 — 서로 다른 색 */
.iud-table .iud-name img { width: 100%; height: auto; margin: 0 auto 8px; display: block; }   /* 이미지 채움 */
.iud-table td ul { list-style: none; }
.iud-table td li { position: relative; padding-left: 14px; color: var(--text-secondary); line-height: 1.7; }
.iud-table td li + li { margin-top: 6px; }
.iud-table td li::before { content: "•"; position: absolute; left: 0; color: #0d2e5c; }

/* 진료 상세 페이지 — 반응형 (모바일 768px, PC −2px 기준) */
@media (max-width: 768px) {
  .page-hero { min-height: 220px; }
  .page-hero-inner { padding-top: calc(50px + var(--header-h)); padding-bottom: 50px; }
  .page-hero-sub { margin-top: 0.9rem; }

  .dept:last-of-type { padding-bottom: 200px; }
  .dept-head { margin-bottom: 72px; }
  .dept-block { margin-top: 120px; }
  .dept-lead { font-size: 16px; }
  .dept-note { font-size: 16px; }
  .dept-note--lg { font-size: 22px; }
  .dept-note--18 { font-size: 16px; }

  /* 증상: 5칸 → 2칸 */
  .symptom-lead { font-size: 16px; }
  .symptom-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* 검사: 3칸 → 1칸 */
  .exam-grid { grid-template-columns: 1fr; gap: 20px; }
  .exam-name { font-size: 22px; }
  .exam-tag { font-size: 16px; }
  .exam-body { font-size: 16px; }

  /* split: 세로 스택 */
  .media-split { grid-template-columns: 1fr; gap: 22px; }
  .media-split-text p { font-size: 16px; line-height: 1.85; }
  .section-body { font-size: 16px; }
  .section-body br { display: none; }   /* 모바일은 자연 줄바꿈 */
  .section-body--pcc { text-align: left; }   /* 모바일은 좌측정렬 */
  .feature-bg { padding: 56px 0; margin-top: 120px; }
  .feature-bg:not(.dept-block) { margin-top: 120px; }   /* 루프·임플라논 밴드 모바일 간격(시스템 120) */
  .feature-split { grid-template-columns: 1fr; gap: 24px; }
  .feature-title { font-size: 22px; }
  .feature-body { font-size: 16px; }
  .feature-body br { display: none; }

  .qa-list dt { padding: 13px 16px; margin-top: 20px; }
  .qa-list dd { padding: 18px 16px; }
  .qa--24-20 dt { font-size: 20px; } .qa--24-20 dd { font-size: 16px; }
  .qa--22-20 dt { font-size: 18px; } .qa--22-20 dd { font-size: 16px; }
  .qa--22-18 dt { font-size: 18px; } .qa--22-18 dd { font-size: 16px; }

  /* 자궁내 장치: 이미지/카드 모바일 */
  .iud-figure { margin-bottom: 32px; max-width: 360px; }
  .qa-cards { grid-template-columns: 1fr; gap: 16px; }
  .qa-card .qa-q { font-size: 18px; padding: 13px 16px; }
  .qa-card .qa-a { font-size: 16px; padding: 20px 16px; }

  .pill-grid { gap: 44px; }
  .pill-card { grid-template-columns: 1fr; gap: 18px; }
  .pill-img { max-width: 320px; }
  .pill-name { font-size: 22px; }
  .pill-lead { font-size: 16px; }
  .pill-body { font-size: 16px; margin-top: 14px; }
  .pill-note-band { padding: 98px 0; margin-top: 120px; }
  .pill-note { text-align: left; }   /* 모바일 본문 좌측정렬 */
  .pill-note p { font-size: 18px; }
  .pill-note br { display: none; }

  .iud-q { font-size: 26px; margin-top: 120px; }
  .iud-table { font-size: 14px; min-width: 680px; }

  /* 밴드(컬러 섹션): 모바일 — 배경은 화면 풀폭, 콘텐츠는 내부 container로 좌우 20px */
  .feature-bg, .pill-note-band {
    position: static; left: auto; right: auto; width: auto;
    margin-left: -20px; margin-right: -20px;   /* 컨테이너 거터(20px) 상쇄 → 배경 풀폭 */
  }
  /* 내부 .container는 기본 좌우 20px(거터) 유지 → 콘텐츠만 20px 들어옴 */
}


/* ===== 지점 소개 페이지 ===== */
.branch-hero { background: linear-gradient(var(--overlay-tint), var(--overlay-tint)), url("images/지점소개/상단이미지_지점소개.png") center/cover no-repeat; }
.branch-sec { padding: 150px 0; }
.branch-logo { text-align: center; margin-bottom: 80px; }
.branch-logo img { width: 240px; height: auto; display: inline-block; }
/* 탭 */
.branch-tabs { display: flex; justify-content: center; margin: 0 auto 25px; background: var(--text-primary); overflow: hidden; }
.branch-tab { flex: 1 1 0; min-width: 0; padding: 16px 8px; text-align: center; font-size: 20px; font-weight: 500; color: var(--text-on-inverse-muted); background: none; border: 0; cursor: pointer; transition: background .2s, color .2s; }
.branch-tab:hover { background: #0d2e5c; color: var(--text-primary); }
.branch-tab.is-active { background: var(--bg-surface); color: var(--text-primary); }
/* 패널 */
.branch-panel[hidden] { display: none; }
/* 갤러리 */
.bgal { position: relative; overflow: hidden; margin: 0 auto; touch-action: pan-y; cursor: grab; user-select: none; }
.bgal:active { cursor: grabbing; }
.bgal img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.bgal-track { display: flex; list-style: none; transition: transform .4s ease; }
.bgal-track > li { flex: 0 0 100%; }
.bgal-track img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.bgal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: var(--shape-avatar); border: 0; background: rgba(0,0,0,.35); color: var(--text-inverse); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bgal-nav.prev { left: 14px; } .bgal-nav.next { right: 14px; }
.bgal-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.bgal-dot { width: 9px; height: 9px; padding: 0; border-radius: var(--shape-avatar); border: 0; background: var(--text-on-inverse-faint); cursor: pointer; }
.bgal-dot.is-active { background: var(--bg-base); }
.branch-cap { text-align: center; color: var(--text-primary); font-size: 28px; margin: 24px 0 0; padding-bottom: 50px; border-bottom: 1px solid #0d2e5c; }
/* 의료진 — 섹션 배경은 브라우저 풀폭(풀블리드), 내부 콘텐츠는 컨테이너 폭으로 정렬 */
.doctor-sec {
  background: #f4f4f4;
  position: relative; left: 50%; right: 50%;
  width: 100vw; max-width: 100vw;
  margin-left: -50vw; margin-right: -50vw;
  margin-top: 70px;
  padding: 100px max(15px, calc(50vw - 575px));
}
.branch-h2 { text-align: center; font-size: 32px; font-weight: 800; margin: 0 0 50px; letter-spacing: -0.5px; }
/* ===== 소개(about) ===== */
.greet { text-align: center; margin-top: var(--gap-sub); }
.greet-text { color: var(--text-primary); line-height: 1.95; margin: 0; }
.greet-sign { color: var(--text-primary); margin-top: 28px; }
/* ===== 베나실(정맥류 치료 템플릿) ===== */
.ven-desc { text-align: center; color: var(--text-primary); line-height: 1.95; margin: var(--gap-sub) 0 0; }
.ven-spec { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; max-width: 1080px; margin: var(--gap-sub) auto 0; text-align: center; }
.ven-spec img { width: 104px; height: 104px; margin: 0 auto 18px; display: block; }
.ven-spec-t { color: var(--text-primary); margin-bottom: 8px; }
.ven-spec p { color: var(--text-secondary); line-height: 1.6; }
.ven-proc { margin: var(--gap-sub) 0 0; text-align: center; }
.ven-proc-imgs { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.ven-proc-imgs img { width: 100%; max-width: 380px; border-radius: var(--shape-image); display: block; }
.ven-proc-src { margin-top: 18px; color: var(--text-secondary); }
.ven-circles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); max-width: 700px; margin: var(--gap-sub) auto 0; }
.ven-circles li { aspect-ratio: 1; border-radius: 50%; background: var(--bg-surface); color: var(--text-primary); display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.5; padding: var(--space-22); }
.caution .sec-title { color: var(--text-inverse); }
.caution-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; max-width: 900px; margin: var(--gap-sub) auto 0; }
.caution-w { background: var(--bg-base); }
.caution-w .eyebrow { color: var(--text-primary); }
.caution-w .caution-grid li { border-bottom-color: var(--border-default); color: var(--text-primary); }
.caution-w .caution-grid li::before { background: var(--interactive-accent); }
.caution-w .cure-banner { max-width: none; }
.caution-w .caution-grid { max-width: none; gap: 4px var(--space-70); margin-top: var(--gap-sub); }
/* 치료 과정 스텝 */
.trt-steps { list-style: none; counter-reset: st; max-width: 760px; margin: var(--gap-sub) auto 0; }
.trt-steps li { counter-increment: st; position: relative; padding: 22px 0 22px 60px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); }
.trt-steps li:first-child { border-top: 1px solid var(--border-default); }
.trt-steps li::before { content: counter(st); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: var(--interactive-default); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); }
/* 특별함 태그라인 */
.trt-tagline { text-align: center; margin: var(--gap-sub) 0 0; color: var(--text-primary); font-size: var(--typo-body-medium); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; }
/* 치료 특징 카드 */
.trt-feat { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 900px; margin: var(--gap-sub) auto 0; }
.trt-feat li { background: var(--bg-subtle); padding: 30px 32px; border-top: 1px solid var(--interactive-default); }
.feat-t { color: var(--text-primary); margin-bottom: 10px; }
.trt-feat li p { color: var(--text-secondary); line-height: 1.7; }
/* 혈관 타입(혈관경화) */
.trt-types { list-style: none; display: flex; gap: 16px; justify-content: center; margin: var(--gap-rule) 0 0; }
.trt-types li { background: var(--bg-cream); color: var(--text-primary); padding: 10px 24px; font-weight: var(--font-weight-bold); }
/* 고운맥 소개 — 인사말/의료진 */
.greet-body { text-align: center; color: var(--text-primary); line-height: 1.95; margin: var(--gap-sub) 0 0; }
.greet-sign { text-align: center; color: var(--text-secondary); margin-top: 24px; }
.br-mo { display: none; }
/* 피지낭종 */
.seb-desc { text-align: center; color: var(--text-primary); line-height: 1.95; margin: var(--gap-sub) 0 0; }
.seb-cost { list-style: none; max-width: 760px; margin: var(--gap-sub) auto 0; }
.seb-cost li { position: relative; padding: var(--space-15) 0 var(--space-15) 32px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); }
.seb-cost li::before { content: "✓"; position: absolute; left: 4px; top: var(--space-15); color: var(--interactive-accent); font-weight: var(--font-weight-bold); }
.seb-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-30); margin-top: var(--gap-sub); }
.seb-steps li { background: var(--bg-subtle); padding: var(--space-30); border-top: 2px solid var(--interactive-accent); }
.seb-step-n { color: var(--interactive-accent); margin-bottom: var(--space-12); }
.seb-steps li p:last-child { color: var(--text-secondary); line-height: 1.7; }
.seb-fig { margin: var(--gap-sub) auto 0; max-width: 480px; }
.seb-fig img, .seb-us img { width: 100%; display: block; }
.seb-us { margin: var(--gap-sub) auto 0; max-width: 680px; }
.self-sec .sec-sub { color: var(--text-on-inverse); }
[data-seb-warn] { padding-bottom: 0; }
.seb-warn { display: flex; flex-direction: column; align-items: center; gap: var(--space-15); background: rgba(75, 84, 109, .65); padding: var(--space-30) var(--gutter) var(--space-44); text-align: center; margin-top: var(--gap-sub); }
.seb-warn-ic { width: 52px; height: auto; }
.seb-warn-tx { color: var(--text-on-inverse); text-align: center; margin: 0; }
.seb-reasons.cause-grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: var(--space-15); margin-top: var(--gap-sub); }
.seb-reasons .cause-item { text-align: center; }
.seb-reasons .cause-item img { width: 210px; height: auto; margin: 0 auto var(--space-20); display: block; }
.seb-reasons .cause-item p { color: var(--text-secondary); line-height: 1.6; }
.seb-ba { list-style: none; display: flex; gap: var(--space-30); justify-content: center; margin: var(--gap-sub) auto 0; }
.seb-ba li { max-width: 400px; text-align: center; }
.seb-ba img { width: 100%; display: block; }
.seb-ba figcaption { margin-top: var(--space-15); color: var(--text-on-inverse); }
.seb-ba-one { margin: var(--gap-sub) auto 0; max-width: 760px; }
.seb-ba2 { display: flex; justify-content: center; align-items: center; gap: 40px; margin-top: var(--gap-sub); }
.seb-ba2-item { margin: 0; max-width: 340px; flex: 0 1 340px; }
.seb-ba2-img { display: block; }
.seb-ba2-img img { width: 100%; display: block; }
.seb-ba2-cap { background: var(--bg-step-cap); color: var(--text-on-inverse); text-align: center; padding: var(--space-15); line-height: 1.5; }
.seb-ba2-arrow { font-size: 50px; line-height: 1; color: var(--text-on-inverse-muted); flex: 0 0 auto; }
.seb-ba-one img { width: 100%; display: block; }
/* 인사말 2단 레이아웃 */
.greet-cols { display: grid; grid-template-columns: 1fr 1.7fr; gap: 60px; margin-top: var(--gap-sub); align-items: start; }
.greet-cols .greet-body { text-align: left; margin-top: 0; }
.greet-cols .greet-sign { text-align: left; margin-top: var(--gap-sub); color: var(--text-primary); }
/* 둘러보기 갤러리 뷰어 */
.gal-viewer { margin-top: var(--gap-sub); }
.gal-main { position: relative; margin: 0 0 var(--space-15); }
.gal-main img { width: 100%; height: 500px; object-fit: cover; display: block; }
.gal-thumbs { list-style: none; display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--space-10); }
.gal-thumb { display: block; width: 100%; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; line-height: 0; opacity: .45; transition: opacity .2s; }
.gal-thumb.is-active, .gal-thumb:hover { opacity: 1; }
.gal-thumb.is-active { border-color: var(--interactive-default); }
.gal-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--text-inverse); font-size: 44px; line-height: 1; cursor: pointer; z-index: 1; padding: 0 10px; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.gal-prev { left: var(--space-15); }
.gal-next { right: var(--space-15); }
/* 연구 썸네일 그리드 + 모달 */
.res-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-44) var(--space-30); margin-top: var(--gap-sub); }
.res-thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.res-thumb-img { display: block; overflow: hidden; border: 1px solid var(--interactive-default); }
.res-thumb-img img { width: 100%; height: auto; display: block; transition: transform .3s; }
.res-thumb:hover .res-thumb-img img { transform: scale(1.04); }
.res-cap { display: block; margin-top: var(--space-15); color: var(--text-primary); }
.res-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.res-modal[hidden] { display: none; }
.res-modal-bg { position: absolute; inset: 0; background: var(--overlay-scrim-strong); }
.res-modal-box { position: relative; background: var(--bg-base); max-width: 900px; width: 90%; max-height: 90vh; overflow: auto; padding: var(--space-30); }
.res-modal-x { position: absolute; top: 6px; right: 14px; border: 0; background: none; font-size: 32px; line-height: 1; cursor: pointer; color: var(--text-primary); }
.res-modal-box img { width: 100%; display: block; }
.res-modal-text { margin-top: var(--space-22); color: var(--text-primary); text-align: center; line-height: 1.8; }
/* 진료안내 지도 + 3단 */
.loc-map { margin-top: var(--gap-sub); }
.loc-map iframe { width: 100%; height: 420px; border: 0; display: block; }
.loc-cols { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-44); margin-top: var(--gap-sub); }
.loc-col-t { color: var(--text-primary); padding-bottom: var(--space-15); border-bottom: 2px solid var(--interactive-default); margin-bottom: var(--space-20); }
.loc-cols p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 8px; display: flex; gap: 8px; }
.loc-k { flex-shrink: 0; min-width: 56px; color: var(--text-primary); font-weight: var(--font-weight-bold); }
.loc-v { flex: 1; }
.loc-cols .loc-note { display: block; }
.loc-note { margin-top: var(--space-15); }
.doc-profile { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-top: var(--space-22); }
.doc-photo { overflow: hidden; }
.doc-photo picture { display: block; }
.doc-photo img { width: 100%; height: auto; display: block; }
.doc-name { color: var(--text-primary); margin-bottom: var(--gap-rule); }
.doc-name span { font-size: 60%; color: var(--text-primary); margin-left: 8px; font-weight: var(--font-weight-bold); }
.doc-career { list-style: none; }
.doc-career li { position: relative; padding: 2px 0 2px 16px; color: var(--text-secondary); }
.doc-career--div { border-top: 1px solid var(--border-strong); padding-top: var(--space-20); margin-top: var(--space-20); }
.doc-career li::before { content: ""; position: absolute; left: 0; top: 17px; width: 5px; height: 5px; border-radius: 50%; background: var(--interactive-accent); }
/* 연구·학회 */
.res-list { list-style: none; max-width: 760px; margin: var(--gap-sub) auto 0; }
.res-list li { display: flex; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--border-default); }
.res-list li:first-child { border-top: 1px solid var(--border-default); }
.res-tag { flex-shrink: 0; background: var(--interactive-default); color: var(--text-inverse); padding: 7px 14px; min-width: 96px; text-align: center; }
.res-list li span:last-child { color: var(--text-primary); }
/* ===== 치료 과정 풀배경 3스텝(.proc-band) ===== */
.proc-band { background-color: #091c39; background-size: cover; background-position: center; color: var(--text-inverse); }
.proc-band .eyebrow { color: var(--interactive-accent); }
.proc-band .sec-title { color: var(--text-inverse); }
.proc-pre { list-style: none; max-width: 1000px; margin: var(--space-30) auto 0; }
.proc-pre li { padding: var(--space-15) 0; border-bottom: 1px solid var(--border-inverse); color: var(--text-on-inverse); text-align: center; }
.proc-pre li::before { content: "\2022"; margin-right: 8px; color: var(--interactive-accent); }
.proc-steps { list-style: none; display: flex; justify-content: center; align-items: flex-start; gap: 56px; max-width: 1132px; margin: var(--gap-sub) auto 0; }
.proc-steps li { position: relative; width: 340px; flex: 0 0 auto; max-width: 340px; }
.proc-img { position: relative; display: block; aspect-ratio: 16 / 9; }
.proc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proc-steps li:not(:last-child) .proc-img::after { content: "\203A"; position: absolute; top: 50%; right: -28px; transform: translate(50%, -50%); font-size: 50px; line-height: 1; color: var(--text-on-inverse-muted); }
.proc-steps figure { margin: 0; }
.proc-steps.proc-one figcaption { min-height: 0; padding: var(--space-12) var(--space-15); }
.proc-steps.proc-seb figcaption { min-height: 0; display: block; line-height: 1.5; }
.proc-steps figcaption { background: var(--bg-step-cap); color: var(--text-on-inverse); padding: var(--space-20) var(--space-15); line-height: 1.65; text-align: center; min-height: calc(2 * 1.65em + 2 * var(--space-20)); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.proc-src { max-width: 1132px; margin: var(--space-12) auto 0; text-align: right; color: var(--text-on-inverse-muted); }
/* 혈관경화 타입 이미지 */
.trt-type-imgs { list-style: none; display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin: var(--gap-sub) 0 0; }
.trt-type-imgs li { max-width: 480px; text-align: center; }
.us-note { text-align: center; max-width: 760px; margin: var(--gap-sub) auto 0; padding: var(--space-30) 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); color: var(--text-primary); }
.trt-type-imgs img { width: 100%; display: block; }
.trt-type-imgs figcaption, .trt-type-imgs .cap { background: var(--bg-inverse); color: var(--text-inverse); padding: var(--space-15); text-align: center; font-weight: var(--font-weight-medium); }
/* 둘러보기 갤러리 */
.gallery-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: var(--gap-sub) 0 0; }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
/* GNB 미세혈관치료 중첩(Depth3) */
/* 미세혈관치료 = 호버 플라이아웃(Depth3) */
.gnb-sub .has-sub { position: relative; }
.gnb-sub .has-sub > a { padding-right: 34px; }
.gnb-sub .has-sub > a::after {
  content: "‹"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 17px; color: var(--text-secondary);
}
.gnb-sub2 {
  position: absolute; top: -6px; right: 100%; left: auto;
  min-width: 150px; background: var(--bg-base);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .08); padding: 6px 0; list-style: none;
  opacity: 0; visibility: hidden; transition: opacity .18s ease; z-index: 2;
}
.gnb-sub .has-sub:hover > .gnb-sub2,
.gnb-sub .has-sub:focus-within > .gnb-sub2 { opacity: 1; visibility: visible; }
.gnb-sub2 a { display: block; padding: 10px 22px; font-size: 16px; color: var(--text-primary); white-space: nowrap; transition: background .15s; }
.gnb-sub2 a:hover { background: var(--bg-surface); }
.gnb-sub2 a.is-active { color: var(--interactive-default); }
.mmenu-sub2 a { padding-left: 36px !important; color: var(--text-secondary) !important; }
.mmenu-sub2 a::before { content: "└ "; opacity: .6; }
.research { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 56px; max-width: 800px; margin: var(--gap-sub) auto 0; text-align: left; }
.research-title { color: var(--text-primary); padding-bottom: 14px; border-bottom: 1px solid var(--border-strong); margin-bottom: 16px; }
.research-list { list-style: none; }
.research-list li { position: relative; padding: 7px 0 7px 16px; font-size: var(--typo-body-medium); color: var(--text-secondary); line-height: 1.6; }
.research-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 4px; height: 4px; border-radius: var(--shape-avatar); background: var(--text-secondary); }
.gallery-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: var(--gap-sub); }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: var(--shape-image); }
.doctor { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; max-width: 880px; margin: var(--gap-sub) auto 0; }
.doctor:last-child { margin-bottom: 0; }
.doctor-photo { margin: 0; overflow: hidden; }
.doctor-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; border-radius: var(--shape-image); background: var(--bg-base); }
.doctor-name { color: var(--text-primary); margin-bottom: 36px; }
.doctor-role { color: var(--text-secondary); margin-left: 8px; }
.doctor-name .role b { font-weight: 800; }   /* "~점" 만 ExtraBold */
.doctor-cred { list-style: none; }
.doctor-cred li { position: relative; padding-left: 14px; font-size: 18px; color: var(--text-secondary); line-height: 1.9; }
.doctor-cred li::before { content: ""; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; border-radius: var(--shape-avatar); background: var(--text-secondary); }
.doctor-cred li.gap-after { margin-bottom: 30px; }
.doctor-cred li.strong { font-size: 18px; color: var(--text-primary); font-weight: 700; }   /* 첫줄: 본문과 같은 18px, bold만 */
.doctor-cred li.strong::before { background: var(--text-primary); }
.doctor-cred li.todo { color: #0d2e5c; }
.doctor-cred li.todo::before { display: none; }
/* 지점 정보 + 지도 — 테두리 없이 좌:지도 / 우:정보 */
.branch-info-row { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 56px; align-items: start; margin: 200px auto 0; }
.branch-map { aspect-ratio: 1 / 1; background: #f4f4f4; overflow: hidden; color: #999; font-size: 14px; }   /* 지도 = 세로에 맞춘 1:1 정사각형 */
.branch-map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.branch-map a { display: block; width: 100%; height: 100%; }
.branch-info { padding: 0; }
.branch-info h3 { font-size: 25px; font-weight: 700; margin-bottom: 15px; letter-spacing: -0.5px; }
.bi-row { display: flex; align-items: center; font-size: 18px; color: var(--text-primary); margin-bottom: 8px; }
.bi-row a { color: inherit; }
.bi-icon { width: 26px; height: auto; flex: none; margin-right: 12px; }
.bi-label { color: var(--text-primary); font-weight: 500; border-right: 1px solid #d9d9d9; padding-right: 14px; margin-right: 14px; }
.bi-hours { margin-top: 40px; background: #f4f4f4; border-radius: 8px; padding: 17px 28px; }
.bi-hours h4 { font-size: 32px; font-weight: 700; margin-bottom: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--border-default); }
.bi-hours li { font-size: 16px; color: var(--text-primary); margin-bottom: 10px; }   /* 진료시간 텍스트 한단계 ↓(18→16) */
.bi-hours li span { display: inline-block; min-width: 120px; font-weight: 700; }
.bi-hours li.bi-strong { font-weight: 700; }   /* 월수·화목금·토요일 = 줄 전체 bold */
.bi-hours li.bi-lunch { font-size: 15px; font-weight: 400; color: #0d2e5c; margin-top: 40px; }   /* 점심시간 = 하단·분홍 */
.bi-hours li.bi-lunch span { font-weight: 400; }
.bi-hours li.bi-sat { margin-top: 0; }
.bi-hours li.bi-note { color: #0d2e5c; font-size: 15px; margin-top: 6px; line-height: 1.7; }   /* 점심시간↔명절 간격 붙임 */

@media (max-width: 768px) {
  .branch-sec { padding: 98px 0; }
  .branch-logo { margin-bottom: 28px; } .branch-logo img { width: 180px; }
  .branch-tabs { margin-bottom: 34px; flex-wrap: wrap; }
  .branch-tab { flex: 0 0 33.333%; padding: 14px 3px; font-size: 16px; }
  .bgal-nav { width: 36px; height: 36px; font-size: 18px; }
  .bgal-track img { aspect-ratio: 3 / 4; }   /* 모바일 지점 사진 = 3:4 (2:3보다 세로 축소) */
  .branch-cap { font-size: 16px; margin-top: 16px; padding-bottom: 28px; }   /* 본문 16 */
  .doctor-sec { padding: 44px 20px; margin-top: 60px; }
  .branch-h2 { font-size: 26px; margin: 0 0 34px; }   /* 섹션제목 26 */
  .doctor { grid-template-columns: 1fr; gap: 28px; } .doctor-photo { max-width: 240px; margin: 0 auto; }
  .research { grid-template-columns: 1fr; gap: 26px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ven-spec { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .ven-spec img { width: 60px; height: 60px; }
  .ven-proc-imgs { flex-direction: column; align-items: center; }
  .ven-circles { grid-template-columns: 1fr 1fr; gap: 16px; max-width: 360px; }
  .ven-circles li { padding: 16px; }
  .caution-grid { grid-template-columns: 1fr; gap: 0; max-width: 360px; }
  .trt-feat { grid-template-columns: 1fr; gap: 16px; }
  .trt-steps li { padding: 18px 0 18px 52px; }
  .trt-types { flex-wrap: wrap; }
  .doc-profile { grid-template-columns: 1fr; gap: 0; max-width: 400px; margin-left: auto; margin-right: auto; }
  .doc-photo img { height: auto; }
  .greet-cols { grid-template-columns: 1fr; gap: 0; }
  .gal-thumbs { grid-template-columns: repeat(5, 1fr); }
  .res-grid { grid-template-columns: 1fr 1fr; gap: var(--space-20) var(--space-15); }
  .gal-main img { height: 240px; }
  .loc-cols { grid-template-columns: 1fr; gap: var(--space-30); }
  .loc-map iframe { height: 300px; }
  .res-list li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .proc-steps { flex-direction: column; align-items: center; gap: 56px; max-width: 320px; }
  .proc-steps li { max-width: 300px; width: 100%; }
  .proc-steps li:not(:last-child)::after { top: auto; bottom: -30px; right: 50%; transform: translate(50%, 0) rotate(90deg); }
  .proc-pre { flex-direction: column; align-items: center; gap: 12px; }
  .trt-type-imgs { flex-direction: column; align-items: center; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .doctor-photo { max-width: 260px; margin: 0 auto; }
  .doctor-name { font-size: 24px; text-align: center; }
  .doctor-name .role { font-size: 24px; }   /* 직책 = 이름과 동일 크기 */
  .doctor-name .role b { display: none; }   /* 모바일에선 "~점" 텍스트 숨김 */
  .doctor-cred li { font-size: 16px; }       /* 본문 16 */
  .doctor-cred li.gap-after { margin-bottom: 18px; }   /* 모바일 약력 공백 = PC보다 작게 */
  .branch-info-row { grid-template-columns: 1fr; gap: 28px; margin-top: 120px; }
  .branch-map { aspect-ratio: 1 / 1; min-height: 0; }   /* 모바일 지도 = 1:1 */
  .branch-map img { min-height: 0; }
  .branch-info { padding: 0; }
  .branch-info h3 { font-size: 22px; margin-bottom: 16px; }
  .bi-row { font-size: 16px; }
  .bi-icon { width: 22px; margin-right: 10px; }
  .bi-hours { padding: 24px 22px; margin-top: 32px; }
  .bi-hours h4 { font-size: 26px; }          /* 섹션제목 26 */
  .bi-hours li { font-size: 14px; }
  .bi-hours li span { min-width: 92px; }
  .bi-hours li.bi-lunch { font-size: 14px; }
  .bi-hours li.bi-note { font-size: 14px; }
}

/* ===== 여성성형 페이지 ===== */
/* 상단 배너 */
.surgery-hero {
  background-image: linear-gradient(var(--overlay-tint), var(--overlay-tint)), url("images/여성성형/상단이미지_여성성형.jpg");   /* 시스템 표준 크림 dim */
  background-position: center top;   /* 꽃 부분이 보이도록 상단 정렬 */
}
/* 소음순성형 인트로 (각종 여성질환 / 소음순 변형이 원인이었다면?) */
.surgery-intro-title { font-size: 44px; font-weight: 800; color: var(--text-primary); line-height: 1.35; letter-spacing: -0.5px; }   /* 섹션 인트로 큰제목 = ExtraBold 기본 */
.surgery-intro-title .accent { color: #0d2e5c; font-weight: 800; }
.surgery-intro-title strong { font-weight: 800; }
.surgery-intro-sub { font-size: 28px; font-weight: 400; color: var(--text-primary); line-height: 1.5; margin-top: 24px; }
.surgery-intro-sub strong { color: var(--text-primary); font-weight: 800; }
.surgery-em { color: var(--text-primary); font-weight: 800; margin-top: 1.4em; }
.intro-rule { border-top: 1px solid #0d2e5c; border-bottom: 1px solid #0d2e5c; padding: 50px 0; }
.intro-light { color: var(--text-primary); font-weight: 400; }
.intro-light strong { font-weight: 400; }
.surgery-figure { margin: 40px auto 0; max-width: 540px; }
.surgery-figure img { width: 100%; height: auto; display: block; }
/* 6가지 고민 — 한 줄씩 번호 리스트 (가운데) */
.worry-list { list-style: none; counter-reset: worry; text-align: center; max-width: 920px; margin: 0 auto; border: 1px solid #0d2e5c; padding: 35px 15px; }
.worry-list li { counter-increment: worry; font-size: 20px; font-weight: 400; color: var(--text-primary); line-height: 2.2; }
.worry-list li::before { content: counter(worry) ". "; }
.worry-list strong { font-weight: 800; font-size: 25px; }
.head-dash { display: block; width: 28px; height: 1px; background: #0d2e5c; margin: 40px auto; }
.surgery-priority { text-align: center; }
.surgery-priority .section-body { margin-top: 24px; }
.dept-note strong { color: var(--text-primary); }
/* 소제목 위 영문 eyebrow (Self Check, Why 유테라 등) */
.dept-sub .eyebrow-en {
  display: block; font-size: 16px; font-weight: 400; color: #0d2e5c;
  letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px;
}

/* 6가지 고민 (번호 카드) */
.worry-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 18px; }
.worry-grid li { display: flex; gap: 14px; align-items: center; background: var(--bg-surface); padding: 24px; font-size: 18px; color: var(--text-secondary); line-height: 1.7; }
.worry-no { flex: none; width: 30px; height: 30px; border-radius: var(--shape-avatar); background: #0d2e5c; color: var(--text-inverse); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.worry-grid strong { color: var(--text-primary); }

/* Self Check (셀프체크 이미지 카드) */
.selfcheck-grid { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.selfcheck-grid figure { margin: 0; text-align: center; }
.selfcheck-grid img { width: 100%; height: auto; border: 1px solid #d5d5d5; display: block; }
.selfcheck-grid figcaption { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-top: 10px; line-height: 1.5; }
.selfcheck-grid .cap-sub { font-weight: 400; color: var(--text-secondary); }

/* 소음순 수술법 비교표 (이미지 셀) */
.surgery-table .iud-col-name { width: 150px; }
.surgery-table .iud-name { padding: 14px 14px; font-size: 16px; vertical-align: middle; }
.surgery-table td img { width: 100%; max-width: 220px; height: auto; margin: 0 auto; display: block; }

/* 3단계 카드 (세밀한수술/봉합/회복) */
.step-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-grid li { background: var(--bg-surface); padding: 36px 24px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.step-grid h4 { font-size: 24px; font-weight: 800; color: var(--text-primary); padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #d5d5d5; }   /* 박스 제목 통일 24, 구분선 #d5d5d5 */
.step-grid p { font-size: 18px; color: var(--text-secondary); line-height: 1.8; }

/* Why 유테라 (01~04) — 2x2 명암 카드 */
.why-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 40px; }
.why-card { padding: 42px 44px; background: var(--bg-surface); color: var(--text-primary); text-align: left; }
.why-card--dark { background: #1f2a3a; color: var(--text-inverse); }
.why-no { font-weight: 800; margin-right: 4px; }
.why-head { font-size: 20px; font-weight: 800; margin-bottom: 18px; letter-spacing: -0.3px; }
.why-body { font-size: 16px; line-height: 1.8; }
.why-card--dark .why-body { color: var(--text-on-inverse); }

/* 체크리스트 (✓) */
.checklist { list-style: none; }
.checklist li { position: relative; padding-left: 30px; font-size: 18px; color: var(--text-secondary); line-height: 1.8; }
.checklist li + li { margin-top: 12px; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: #0d2e5c; font-weight: 800; }
.checklist strong { color: var(--text-primary); }
.checklist--center { width: fit-content; max-width: 100%; margin: 0 auto; }
.checklist--center li { font-size: 25px; }
.checklist--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 44px; max-width: 1000px; margin: 0 auto; }
.checklist--2col li + li { margin-top: 0; }
.checklist--lg li { font-size: 18px; }
.checklist--lg li + li { margin-top: 18px; }

/* 스펙 리스트 (시술시간/마취/회복 등) */
.spec-list { max-width: 760px; margin: 0 auto 28px; border-top: 1px solid #d5d5d5; }
.spec-list > div { display: flex; gap: 24px; padding: 16px 8px; border-bottom: 1px solid #d5d5d5; }
.spec-list dt { flex: 0 0 140px; font-weight: 700; color: var(--text-primary); font-size: 18px; display: flex; align-items: center; }
.spec-icon { width: 22px; height: 22px; object-fit: contain; margin-right: 14px; display: inline-block; }
.spec-list dd { margin: 0; color: var(--text-secondary); font-size: 18px; }

/* Before / After 카드 */
.ba-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ba-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ba-card { text-align: center; }
.ba-img { margin: 0 0 18px; border: 1px solid #d5d5d5; overflow: hidden; }
.ba-img img { width: 100%; height: auto; display: block; }
.ba-name { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.ba-desc { font-size: 16px; color: var(--text-secondary); line-height: 1.7; }

/* 여성성형 — 반응형 (모바일 768px) */
@media (max-width: 768px) {
  .surgery-intro-title { font-size: 32px; }   /* 템플릿 큰제목 모바일 36 */
  .surgery-intro-sub { font-size: 18px; }
  .intro-rule { padding: 36px 0; }   /* PC 50 → 모바일 36 */
  .worry-list { padding: 26px 16px; }
  .worry-list li { font-size: 16px; line-height: 1.9; }
  .worry-list strong { font-size: 20px; }
  .checklist--center li { font-size: 18px; }   /* PC 25 → 모바일 18 */
  .worry-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
  .worry-grid li { font-size: 16px; padding: 18px; }
  .selfcheck-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .selfcheck-grid figcaption { font-size: 13px; }
  .surgery-table .iud-col-name { width: 96px; }
  .surgery-table .iud-name { font-size: 14px; padding: 12px 8px; }
  .step-grid { grid-template-columns: 1fr; gap: 16px; }
  .step-grid li { padding: 28px 20px; }
  .step-grid h4 { font-size: 20px; }
  .step-grid p { font-size: 16px; }
  .lead-30 { font-size: 20px; }
  .lead-22 { font-size: 18px; }
  .why-grid { grid-template-columns: 1fr; margin-bottom: 32px; }
  .why-card { padding: 28px 22px; }
  .why-head { font-size: 18px; }
  .why-body { font-size: 14px; }
  /* 모바일 1열: 노랑(연베이지)·갈색 번갈아 — PC의 2·3번 갈색 연속 방지 */
  .why-grid li:nth-child(odd) { background: var(--bg-surface); color: var(--text-primary); }
  .why-grid li:nth-child(odd) .why-body { color: var(--text-primary); }
  .why-grid li:nth-child(even) { background: #1f2a3a; color: var(--text-inverse); }
  .why-grid li:nth-child(even) .why-body { color: var(--text-on-inverse); }
  .checklist li { font-size: 16px; padding-left: 26px; }
  .checklist--2col { grid-template-columns: 1fr; gap: 12px; }
  .checklist--lg li + li { margin-top: 14px; }
  .spec-list dt { flex-basis: 110px; font-size: 16px; }
  .spec-list dd { font-size: 16px; }
  .ba-grid, .ba-grid--3 { grid-template-columns: 1fr; gap: 28px; }
  .ba-name { font-size: 18px; }
}

/* 철학 섹션 (성형외과가 아닌 산부인과) */
.philo { text-align: center; }
.gold-rule { border: 0; border-top: 1px solid #0d2e5c; margin: 50px 0; }
.philo-arrow { margin: -6px auto; line-height: 0; }
.philo-arrow svg { display: inline-block; }
@media (max-width: 768px) { .gold-rule { margin: 36px 0; } }
.minor-dash { display: block; width: 28px; height: 1px; background: #0d2e5c; margin: 30px auto; }
.lead-30 { font-size: 28px; line-height: 1.5; }
.media-split-text .split-title { text-align: left; margin-bottom: 20px; }
.philo-tight { margin-top: -6px; margin-bottom: -6px; }
#labia-h2 { font-weight: 800; }
#labia-h2 .accent { font-weight: 800; }
#tightening-h2 { font-weight: 800; }
#vagina-h2 { font-weight: 800; }
#perineal-h2 { font-weight: 800; }
.lead-22 { font-size: 22px; line-height: 1.6; }
/* 추천 대상 박스 */
.reco-box { background: #f4f4f4; padding: 44px 40px; max-width: 920px; margin: 0 auto; text-align: center; }
.reco-title { font-size: 24px; font-weight: 800; color: var(--text-primary); margin-bottom: 26px; }
.reco-list { width: fit-content; max-width: 100%; margin: 0 auto; text-align: left; }
.reco-list li { font-size: 18px; }
.reco-box .checklist li::before { color: #0d2e5c; }
@media (max-width: 768px) { .reco-box { padding: 28px 22px; } .reco-title { font-size: 20px; } .reco-list li { font-size: 16px; } }
.checklist--c { max-width: 760px; margin: 0 auto 30px; }
/* ===== 모바일 전용 줄바꿈/정렬 유틸 (PC 불변) ===== */
.br-mo { display: none; }
@media (max-width: 768px) {
  .br-mo { display: inline !important; }    /* 모바일에서만 줄바꿈 표시 */
  .br-pc { display: none !important; }       /* PC 줄바꿈은 모바일에서 숨김 */
  .mo-left { text-align: left !important; }  /* 모바일에서만 왼쪽정렬 */
}

/* WHY 마무리 문구 — WHY 카드 제목(36/26)보다 작게 */
.why-note { font-size: 28px; }
@media (max-width: 768px) { .why-note { font-size: 22px; } }

/* 모바일 히어로 — 꽃(우측 상단)이 중심에 오도록 */
@media (max-width: 768px) { .surgery-hero { background-position: 70% top; } }

/* ===== 여성검진 페이지 — 원본 레이아웃 컴포넌트 ===== */
/* (a) 기본검진 3열 카드 */
.exam-card-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.exam-info-card { background: var(--bg-surface); border-radius: 12px; padding: 42px 30px; text-align: center; }
.exam-info-title { font-size: 24px; font-weight: 800; color: var(--text-primary); padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid #d5d5d5; }
.exam-info-body { font-size: 18px; color: var(--text-secondary); line-height: 1.85; }
.exam-info-note { font-size: 16px; color: var(--text-secondary); line-height: 1.95; margin-top: 22px; }
/* (b) 산전검사 — 텍스트/이미지 체커보드 */
.exam-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }   /* 이미지·박스 높이 맞춤, 사이 공백 없음 */
.exam-row + .exam-row { margin-top: 0; }   /* 윗줄·아랫줄 밀착 */
.exam-row figure { margin: 0; overflow: hidden; }
.exam-row figure img { width: 100%; height: auto; display: block; }
.exam-row--rev .exam-row-text { order: 2; }   /* PC: 이미지 왼쪽 / 텍스트 오른쪽 */
#prenatal { background: #f4f4f4; }   /* 산전검사 섹션 전체 — 연한 노란색(시스템 기본) 풀폭 */
.exam-row-text { background: var(--bg-base); padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; }   /* 텍스트 구간 = 흰색 박스(테두리 없음), 이미지 높이에 맞춰 늘어남 */
.exam-block-title { font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1.45; text-align: left; margin-bottom: 18px; word-break: keep-all; }   /* 어절 단위 줄바꿈(단어 중간 안 깨짐) */
.exam-block-title--ul { padding-bottom: 18px; border-bottom: 1px solid #d5d5d5; margin-bottom: 22px; }
.exam-row-text .bullet-list li { text-align: left; font-size: 16px; color: var(--text-secondary); line-height: 1.8; }
/* (c) 검사 가능 안내(골드) */
.exam-avail { text-align: center; color: #0d2e5c; font-size: 16px; margin-top: 14px; }
@media (max-width: 768px) {
  .exam-card-grid { grid-template-columns: 1fr; gap: 16px; }
  .exam-info-card { padding: 28px 22px; }
  .exam-info-title { font-size: 20px; padding-bottom: 16px; margin-bottom: 18px; }
  .exam-info-body { font-size: 16px; }
  .exam-info-note { font-size: 14px; }
  .exam-row { grid-template-columns: 1fr; gap: 0; }
  .exam-row figure { order: -1; }   /* 모바일: 항상 이미지 먼저 (이미지→텍스트 반복) */
  .exam-row + .exam-row { margin-top: 0; }
  .exam-row-text { padding: 26px 22px; }
  .exam-block-title { font-size: 20px; }
  .exam-row-text .bullet-list li { font-size: 16px; }
  .exam-avail { font-size: 14px; }
}

/* 섹션 리드(인트로 문단) → 첫 콘텐츠 블록 간격 (같은 섹션 내, 블록간 200보다 작게) */
.dept-block--lead + .dept-block { margin-top: 80px; }
@media (max-width: 768px) { .dept-block--lead + .dept-block { margin-top: 48px; } }

/* media-split 이미지를 우측 텍스트 높이에 맞춰 채움(PC) — 유방/갑상선 등 */
@media (min-width: 769px) {
  .media-split--fill { align-items: stretch; }
  .media-split--fill .media-split-img { position: relative; overflow: hidden; min-height: 280px; }
  .media-split--fill .media-split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* 섹션 인트로(리드) — 모바일에서만 어절 단위 줄바꿈(가운데 정렬, 단어 중간 끊김 방지). PC 불변 */
@media (max-width: 768px) {
  .dept-block--lead .section-body { word-break: keep-all; }
}

/* 유방/갑상선 — 섹션 전체 연한 회색 배경(풀폭) + 우측 텍스트 흰 박스 */
#breast { background: #f4f4f4; }
#breast .media-split { gap: 0; }   /* 흰 박스 처리 → 이미지↔박스 여백 0(박스 padding이 간격 담당) */
#breast .media-split-text { background: var(--bg-base); padding: 36px 38px; }
@media (max-width: 768px) { #breast .media-split-text { padding: 26px 22px; } }

/* 여성질환 페이지 상단 배너 (이미지 경로는 사용자 제공 예정) */
.disease-hero {
  background-image: linear-gradient(var(--overlay-tint), var(--overlay-tint)), url("images/여성질환/상단이미지_여성질환.jpg");
}

/* ===== 여성질환 페이지 컴포넌트 ===== */
/* 증상 크림 박스 (질염·방광염 증상) */
.symp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1040px; margin: 0 auto; }
.symp-box { background: var(--bg-surface); border-radius: 10px; padding: 26px 24px; text-align: center; font-size: 18px; color: var(--text-primary); line-height: 1.6; display: flex; align-items: center; justify-content: center; word-break: keep-all; }
.symp-box--full { grid-column: 1 / -1; }
/* 자궁경부염 악순환 사이클 */
.cycle-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; max-width: 1000px; margin: 46px auto 0; }
.cycle-node { width: 128px; height: 128px; border-radius: var(--shape-avatar); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 16px; font-weight: 700; line-height: 1.35; padding: 10px; word-break: keep-all; }
.cycle-node--dark { background: #1f2a3a; color: var(--text-inverse); }
.cycle-node--g1 { background: var(--bg-surface); color: var(--text-primary); }
.cycle-node--g2 { background: #0d2e5c; color: var(--text-primary); }
.cycle-node--g3 { background: #0d2e5c; color: var(--text-inverse); }
.cycle-arrow { color: #0d2e5c; font-size: 22px; line-height: 1; }
/* 성병 종류 카드 (크림/다크 교차 그리드) */
.std-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.std-card { background: var(--bg-surface); padding: 44px 40px; text-align: center; }
.std-card--dark { background: #1f2a3a; color: var(--text-inverse); }
.std-card h4 { font-size: 24px; font-weight: 800; color: inherit; margin-bottom: 12px; }
.std-dash { display: block; width: 24px; height: 2px; background: currentColor; opacity: .55; margin: 0 auto 18px; }
.std-card p { font-size: 17px; line-height: 1.75; color: inherit; word-break: keep-all; }
.std-card--dark p { color: var(--text-on-inverse); }
/* 다크 바 (예방·비정상 월경) */
.dark-bar-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.dark-bar { background: #1f2a3a; color: var(--text-inverse); border-radius: 6px; padding: 20px 24px; text-align: center; font-size: 18px; line-height: 1.5; word-break: keep-all; }
.dark-bar strong { color: var(--text-inverse-soft); }
/* 크림 안내 밴드 (강조 한 줄) */
.note-band { background: var(--bg-surface); padding: 24px 30px; text-align: center; font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0 auto; line-height: 1.6; word-break: keep-all; }   /* 폭 = 컨테이너 전체(골드선과 동일) */
/* media-split 텍스트측 박스 변형 + 좌우반전 */
.media-split--rev { grid-template-columns: 7fr 5fr; }
.media-split--rev .media-split-img { order: 2; }
.media-split-text.is-cream { background: var(--bg-surface); padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; }
.media-split-text.is-dark { background: #1f2a3a; color: var(--text-inverse); padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; }
.media-split-text.is-dark p, .media-split-text.is-dark .feature-body { color: var(--text-on-inverse); }
.media-split-text .ms-title { font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1.45; text-align: left; margin-bottom: 18px; word-break: keep-all; }
.media-split-text.is-dark .ms-title { color: var(--text-inverse); }
.media-split-text .ms-title--ul { padding-bottom: 18px; border-bottom: 1px solid #d5d5d5; margin-bottom: 22px; }
@media (max-width: 768px) {
  .symp-grid { grid-template-columns: 1fr; gap: 12px; }
  .symp-box { font-size: 16px; padding: 20px 18px; }
  .cycle-node { width: 104px; height: 104px; font-size: 13px; }
  .std-grid { grid-template-columns: 1fr; }
  .std-card { padding: 28px 22px; } .std-card h4 { font-size: 20px; } .std-card p { font-size: 15px; }
  .dark-bar { font-size: 16px; padding: 16px 18px; }
  .note-band { font-size: 16px; padding: 18px 20px; }
  .media-split--rev { grid-template-columns: 1fr; }
  .media-split--rev .media-split-img { order: 0; }
  .media-split-text.is-cream, .media-split-text.is-dark { padding: 26px 22px; }
  .media-split-text .ms-title { font-size: 20px; }
}

.exam-info-body strong, .exam-info-note strong { color: var(--text-primary); }

.media-split--box { gap: 0; }   /* 텍스트측이 박스(크림/다크)면 이미지와 여백 0 */

.exam-row-text.is-cream { background: var(--bg-surface); padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 768px) { .exam-row-text.is-cream { padding: 26px 22px; } }

/* ===== 팝업 (비급여안내 모달 / 홈 진료안내) ===== */
.popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: none; }
.popup-overlay.is-open { display: block; }
.popup { position: relative; background: var(--bg-base); box-shadow: 0 12px 44px rgba(0,0,0,.28); }
.popup-img { display: block; width: 100%; height: auto; }
.popup-x { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: 0; background: var(--text-on-inverse-muted); border-radius: var(--shape-avatar); cursor: pointer; font-size: 19px; line-height: 1; color: #555; z-index: 2; }
.popup-bar { display: flex; border-top: 1px solid #d5d5d5; }
.popup-bar button { flex: 1; border: 0; background: var(--bg-base); padding: 16px 10px; font-size: 15px; color: var(--text-primary); cursor: pointer; font-family: inherit; }
.popup-bar button + button { border-left: 1px solid #d5d5d5; }
.popup-bar button:hover { background: var(--bg-surface); }
.popup-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1000px; max-width: calc(100vw - 40px); max-height: 92vh; overflow-y: auto; z-index: 1001; }
.popup-head { text-align: center; padding: 44px 20px 24px; }
.popup-title { margin: var(--space-15) 0 0; color: var(--text-primary); }
.popup-img { padding: 0 24px 8px; box-sizing: border-box; }
.popup-home { position: fixed; top: 15%; left: 40%; width: 500px; max-width: calc(100vw - 32px); z-index: 950; display: none; }
.popup-home.is-open { display: block; }
@media (max-width: 768px) {
  .popup-home { left: 50%; transform: translateX(-50%); top: 12%; width: calc(100vw - 32px); }
  .popup-modal { width: calc(100vw - 32px); }
}

/* 박스(media-split 텍스트측) 흰색 변형 + 박스 안 불릿 본문 18 통일 */
.media-split-text.is-white { background: var(--bg-base); padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; }
.media-split-text .bullet-list li { font-size: 16px; color: var(--text-secondary); line-height: 1.8; }
@media (max-width: 768px) {
  .media-split-text.is-white { padding: 26px 22px; }
  .media-split-text .bullet-list li { font-size: 16px; }
}

.cycle-figure { margin: 46px auto 0; max-width: 1040px; }
.cycle-figure img { width: 100%; height: auto; display: block; }

/* 체커보드 텍스트박스 안 문단 */
.exam-row-text p { font-size: 16px; color: var(--text-secondary); line-height: 1.85; text-align: left; }
.exam-row-text p + p { margin-top: 14px; }
@media (max-width: 768px) { .exam-row-text p { font-size: 16px; } }

/* 체커보드 이미지가 텍스트박스 높이를 채우도록(PC) — 아래 여백 제거 */
@media (min-width: 769px) { .exam-row figure { position: relative; overflow: hidden; min-height: 280px; } .exam-row figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } }

/* 박스 안 본문 = 16px (제목과 분리된 내용). 3단계(제목1·제목2·내용)면 제목2=18 */
.media-split-text.is-white p, .media-split-text.is-cream p, .media-split-text.is-dark p { font-size: 16px; }
.box-subtitle { font-size: 18px; font-weight: 800; color: var(--text-primary); }
/* Q 박스(바톨린 등) = 24px (시스템 QnA dt와 동일) */
.note-band--q { font-size: 24px; }
@media (max-width: 768px) { .note-band--q { font-size: 20px; } }

/* feature-split-text 안 불릿 */
.feature-split-text .bullet-list { margin-top: 6px; }
.feature-split-text .bullet-list li { font-size: 16px; color: var(--text-secondary); line-height: 1.8; }
.feature-split-text .bullet-list li + li { margin-top: 8px; }
/* 여성질환 마지막 회색 밴드 = 시스템 하단 길이(360/200)로 회색이 끝까지 */
#bleeding .feature-bg:last-child { padding-bottom: 360px; }
@media (max-width: 768px) { #bleeding .feature-bg:last-child { padding-bottom: 200px; } }

/* feature-split 이미지 길이 맞춤(세로 긴 사진 crop): 최소 280px, 텍스트가 크면 텍스트 높이 */
@media (min-width: 769px) {
  .feature-split--fill { align-items: stretch; }
  .feature-split--fill .feature-split-img { position: relative; overflow: hidden; min-height: 280px; }
  .feature-split--fill .feature-split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .feature-split--fill .feature-split-text { display: flex; flex-direction: column; justify-content: center; }
}

/* 이미지 높이 캡(340px) — 일러스트 등 큰 이미지 */
.ms-img-340 { display: flex; align-items: center; justify-content: center; }
.ms-img-340 img { max-height: 340px; width: auto; max-width: 100%; }

/* 성병 종류: 모바일 1단일 때 컬러 교차(크림/다크 반복) */
@media (max-width: 768px) {
  .std-grid .std-card:nth-child(odd) { background: var(--bg-surface); color: var(--text-primary); }
  .std-grid .std-card:nth-child(odd) p { color: var(--text-primary); }
  .std-grid .std-card:nth-child(even) { background: #1f2a3a; color: var(--text-inverse); }
  .std-grid .std-card:nth-child(even) p { color: var(--text-on-inverse); }
}

/* ===== 히어로(요실금/중절) 임시 다크 배너 — 이미지 주시면 교체 ===== */
.incont-hero { background-image: linear-gradient(var(--overlay-tint), var(--overlay-tint)), url("images/요실금/상단이미지_요실금.jpg"); }
.abortion-hero { background-image: linear-gradient(var(--overlay-tint), var(--overlay-tint)), linear-gradient(var(--overlay-scrim-x), var(--overlay-scrim-x)), linear-gradient(135deg, #000000, #000000); }

/* ===== 중절수술 아티클(원본 코드 이식, .abortion-article로 스코프) ===== */
.abortion-article { max-width: 1040px; margin: 0 auto; line-height: 1.6; color: #000000; }
.abortion-article h2, .abortion-article h3, .abortion-article p, .abortion-article li { color: #000000; word-break: keep-all; }
.abortion-article .abort-lead { font-size: 40px; font-weight: 800; line-height: 1.4; padding-top: 0; padding-bottom: 8px; }
.abortion-article h2 { font-size: 28px; font-weight: 800; line-height: 1.5; padding-top: 120px; }
.abortion-article hr { border: none; border-top: 1px solid #d5d5d5; margin: 16px 0 26px; }
.abortion-article h3 { font-size: 21px; font-weight: 700; line-height: 1.8; padding-top: 26px; }
.abortion-article h3::before { content:""; display:inline-block; width:4px; height:1em; background:#0d2e5c; margin-right:10px; vertical-align:middle; }
.abortion-article .faq h3::before { content:none; }
.abortion-article .faq h3 { font-weight: 800; }
.abortion-article p { font-size: 18px; line-height: 1.9; }
.abortion-article li p > strong:first-child { display:block; padding-top: 16px; }
.abortion-article img { width: 400px; max-width: 100%; height: auto; margin: 1.4rem 0; display: block; }   /* 원본비율·가로400·좌측 */
.abortion-article ol { padding-left: 22px; margin: 8px 0; }
.abortion-article ol > li { margin-bottom: 10px; }
.abortion-article .categoryblock { border-left: 4px solid #0d2e5c; background:#f4f4f4; padding: 28px 30px; margin: 8px 0 0; }
.abortion-article .categorytitle { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.abortion-article .categorylist { list-style: decimal; padding-left: 20px; margin: 0; }
.abortion-article .categorylist li { margin-bottom: 6px; }
.abortion-article .categorylist a { color:#555; text-decoration:none; }
.abortion-article .categorylist a:hover { text-decoration: underline; color:#000000; }
.abortion-article .custom-button { display:block; width:100%; text-align:center; padding:22px 24px; margin-top:60px; background:#0d2e5c; color: var(--text-inverse); font-size:21px; font-weight:700; text-decoration:none; transition:all .3s ease; }
.abortion-article .custom-button:hover { background:#0d2e5c; color: var(--text-inverse); }
.abortion-article .yellowlg { color:#0d2e5c; font-size:24px; }
.abortion-article .yellowsm { color:#0d2e5c; font-weight:700; font-size:17px; letter-spacing:0.7px; }
.abortion-article .yellow { color:#0d2e5c; }
@media (max-width: 768px) {
  .abortion-article .abort-lead { font-size: 28px; padding-top: 0; }
  .abortion-article h2 { font-size: 22px; padding-top: 80px; }
  .abortion-article h3 { font-size: 18px; }
  .abortion-article p, .abortion-article li { font-size: 16px; line-height: 1.85; }
  .abortion-article .custom-button { font-size: 17px; padding: 18px 20px; margin-top: 44px; }
  .abortion-article .yellowlg { font-size: 20px; }
  .abortion-article .categoryblock { padding: 22px 20px; }
  .abortion-article img { height: auto; }
}

/* ===== 실시간 상담 지점 선택 팝업(중절수술 CTA) ===== */
.consult-modal-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.45); }
.consult-modal-overlay[hidden] { display: none; }
.consult-modal { position: relative; background: var(--bg-base); width: 100%; max-width: 440px; padding: 0; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.consult-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #d5d5d5; }
.consult-modal-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 0; }
.consult-modal-x { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 24px; line-height: 1; color: #333; }
.consult-branch-list { list-style: none; display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.consult-branch-list a { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 20px; background: #0d2e5c; color: var(--text-inverse); text-decoration: none; font-size: 18px; font-weight: 500; transition: background .2s; }
.consult-branch-list a:hover { background: #0d2e5c; color: var(--text-inverse); }
@media (max-width: 768px) { .consult-branch-list { padding: 18px; } .consult-branch-list a { min-height: 80px; } }

/* 크림(노란) 변형 바 — 여성질환 카드 크림(var(--bg-surface))과 동일 */
.dark-bar-list--cream .dark-bar { background: var(--bg-surface); color: var(--text-primary); }
.dark-bar-list--cream .dark-bar strong { color: var(--text-primary); }

/* 인트로 밴드 안 흰색 박스 */
.intro-whitebox { background: var(--bg-base); padding: 36px 44px; max-width: 1040px; margin: 44px auto 0; }
.surgery-priority .intro-whitebox .section-body { margin: 0; }
@media (max-width: 768px) { .intro-whitebox { padding: 24px 22px; margin-top: 32px; } }

/* 마무리 문구 한 단계 큰 사이즈(dept-note--lg 30 → 36 / 모바일 22 → 26) */
.dept-note--xl { font-size: 32px; font-weight: 400; color: var(--text-primary); line-height: 1.5; }
@media (max-width: 768px) { .dept-note--xl { font-size: 26px; } }

/* 요실금 유형 카드: 원인 본문 → 가로선 → 주요증상(한단계 작은 제목) */
.std-card .std-cause { font-size: 17px; line-height: 1.75; color: inherit; word-break: keep-all; }
.std-card--dark .std-cause { color: var(--text-on-inverse); }
.std-card .std-line { border: none; border-top: 1px solid #0d2e5c; margin: 24px 0; }
.std-card--dark .std-line { border-top-color: var(--border-inverse); }
.std-card .std-symptom-title { font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--text-primary); word-break: keep-all; margin: 0 0 10px; }
.std-card--dark .std-symptom-title { color: var(--text-inverse); }
.std-card .std-symptom { font-size: 17px; line-height: 1.75; color: inherit; word-break: keep-all; margin: 0; }
.std-card--dark .std-symptom { color: var(--text-on-inverse); }
@media (max-width: 768px) {
  .std-card .std-cause { font-size: 15px; }
  .std-card .std-symptom-title { font-size: 16px; }
  .std-card .std-symptom { font-size: 15px; }
  .std-card .std-line { margin: 18px 0; }
  .std-grid .std-card:nth-child(odd) .std-line { border-top-color: #0d2e5c; }
  .std-grid .std-card:nth-child(odd) .std-symptom-title { color: var(--text-primary); }
  .std-grid .std-card:nth-child(even) .std-line { border-top-color: var(--border-inverse); }
  .std-grid .std-card:nth-child(even) .std-symptom-title { color: var(--text-inverse); }
}

/* ===== 블로그 (목록 + 상세) ===== */
.blog-hero { background-image: linear-gradient(var(--overlay-tint), var(--overlay-tint)), url("images/surgery/정맥류치료/banner-pc.png"); background-position: center; }
.blog-sec { padding: var(--space-160) 0 360px; }
/* 블로그 카테고리 분류 — 1번(GNB 메뉴) 타일 그리드 + 2번(서브메뉴) 탭 */
.blog-cats { margin-bottom: var(--space-80); }   /* 분류표↔목록 간격(넓게) */
.blog-cat1 { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; }
.cat1-tile { border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: var(--space-20) var(--space-10); text-align: center; font-size: 16px; color: var(--text-primary); cursor: pointer; background: var(--bg-base); transition: background .15s, color .15s; }
.cat1-tile:hover { background: var(--bg-surface); }
.cat1-tile.is-active { background: var(--interactive-default); color: var(--text-inverse); font-weight: 700; }
.blog-cat2 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; margin-top: 0; }
.cat1-count { margin-left: var(--space-10); font-size: var(--font-size-14); font-weight: 700; opacity: .6; }
.cat2-tab { border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: var(--space-20) var(--space-10); text-align: center; font-size: 16px; color: var(--text-primary); cursor: pointer; background: var(--bg-base); transition: background .15s, color .15s; display: block; }
.cat2-tab:hover { background: var(--bg-surface); }
.cat2-tab.is-active { background: var(--interactive-default); color: var(--text-inverse); font-weight: 700; }
.cat2-fill { border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); background: var(--bg-base); }
.cat2-count { margin-left: var(--space-10); font-size: var(--font-size-14); font-weight: 700; opacity: .6; }
.blog-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-70) var(--space-44); }   /* 데스크톱 3열 (세로 줄간격 70 / 가로 44) */
.bcard-link { display: block; }
.bcard-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-surface); }   /* 페슈: 썸네일 4:3 */
.bcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.bcard-link:hover .bcard-thumb img { transform: scale(1.05); }
.bcard-body { display: block; padding: var(--space-15) 0 0; }   /* 섬네일↔제목 간격(좁게) */
.bcard-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 18px; font-weight: 800; color: var(--text-primary); line-height: 1.6; margin-bottom: var(--space-12); }
.bcard-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; color: var(--text-secondary); line-height: 1.55; margin-bottom: var(--space-44); }   /* 부제목↔배지·날짜 간격(넓게, 40에 가장 가까운 토큰) */
/* 카드 하단 메타: 좌측 카테고리 배지(1차)+텍스트(2차), 우측 날짜 */
.bcard-meta { display: flex; align-items: center; gap: var(--space-10); }
.bcard-cat1 { background: var(--color-navy-900); color: var(--text-inverse); font-size: 12px; font-weight: 700; padding: 4px var(--space-10); border-radius: 3px; line-height: 1.5; white-space: nowrap; }
.bcard-cat2 { position: relative; padding-left: var(--space-10); color: var(--text-primary); font-size: 13px; font-weight: 700; white-space: nowrap; }
.bcard-cat2::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 11px; background: var(--border-default); }
.bcard-date { font-size: 15px; color: var(--interactive-accent); letter-spacing: 0.3px; margin-left: auto; white-space: nowrap; }
/* 페이지네이션 (PC 9개 초과 시 노출) — 목록과 간격 넓게 */
.blog-pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-10); margin-top: var(--space-160); }
.blog-pagination .page-btn { min-width: 40px; height: 40px; padding: 0 var(--space-12); border: 1px solid var(--border-default); background: var(--bg-base); color: var(--text-primary); font-size: var(--font-size-15); font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.blog-pagination .page-btn:hover:not(:disabled):not(.is-active) { background: var(--bg-surface); }
.blog-pagination .page-btn.is-active { background: var(--interactive-default); color: var(--text-inverse); border-color: var(--interactive-default); font-weight: 700; }
.blog-pagination .page-btn:disabled { color: var(--border-default); cursor: default; }
.blog-empty { grid-column: 1 / -1; text-align: center; color: var(--text-secondary); padding: var(--space-70) 0; }

/* 상세 (루트 평면 구조: blog-<slug>.html) — 페슈 레이아웃 + 우리 컬러. 본문 최대폭 800px */
.blog-article { padding: var(--space-100) 0 var(--space-160); }
.ba-wrap { max-width: 800px; margin: 0 auto; }
.ba-head { margin-bottom: var(--space-30); }
.ba-title { font-size: 44px; font-weight: 800; color: var(--text-primary); line-height: 1.3; letter-spacing: -0.5px; }
.ba-subtitle { margin-top: var(--space-30); font-size: 19px; color: #1a1a1a; line-height: 1.8; }
.ba-meta { display: flex; align-items: center; gap: var(--space-10); margin-top: var(--space-70); padding-bottom: var(--space-22); border-bottom: 1px solid var(--border-strong); font-size: 14px; color: var(--interactive-accent); }
.ba-body hr { display: none; }
.ba-summary { background: var(--bg-surface); border-radius: 2px; padding: var(--space-22) var(--space-30); margin: var(--space-72) 0 var(--space-70); font-size: 16px; color: var(--text-secondary); line-height: 1.8; }
.ba-thumb { margin: 0 0 var(--space-30); }
.ba-thumb img { width: 100%; height: auto; display: block; }
.ba-body { font-size: 18px; line-height: 1.9; color: #1a1a1a; }   /* 본문 글자 = 검은색 */
.ba-body > *:first-child { margin-top: 0; }
.ba-body h2 { font-size: 28px; font-weight: 800; color: var(--text-primary); margin: 4em 0 .6em; letter-spacing: -0.5px; }
.ba-body h3 { font-size: 22px; font-weight: 700; margin: 1.4em 0 .5em; }
.ba-body p { margin: 0 0 1em; }
.ba-body ul { list-style: disc outside; margin: .4em 0 1.2em; padding-left: 1.4em; }
.ba-body ol { list-style: decimal outside; margin: .4em 0 1.2em; padding-left: 1.5em; }
.ba-body li { margin-bottom: .4em; }
.ba-body img { max-width: 100%; height: auto; display: block; margin: 3em auto 0; }   /* 이미지+캡션 그룹 위 여백 */
.ba-body iframe { display: block; width: 100%; margin: var(--gap-sub) auto; border: 0; }   /* HTML 위젯: 위아래 여백 넉넉히 (높이는 스크립트가 콘텐츠에 맞춤) */
.ba-body h2, .ba-body h3, .ba-faq h2 { scroll-margin-top: 110px; }   /* 목차 클릭 시 헤더에 안 가리게 */
.ba-body strong { font-weight: 800; }
.ba-body a { color: var(--interactive-default); text-decoration: underline; }
.ba-body blockquote { border-left: 3px solid var(--border-strong); margin: 1em 0; padding: 2px 0 2px var(--space-15); color: var(--text-secondary); }
.ba-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95em; }
.ba-body th, .ba-body td { border: 1px solid var(--border-default); padding: .6em .85em; }
.ba-body thead th { background: var(--bg-surface); font-weight: 700; }
/* 의료진(작성처) 카드 */
.ba-author { display: flex; align-items: stretch; background: var(--bg-subtle-strong); border: 1px solid var(--border-default); border-radius: 2px; overflow: hidden; margin-top: var(--space-44); }
.ba-author-photo { width: 230px; align-self: stretch; flex: none; background: var(--bg-subtle-strong) center/cover no-repeat; }   /* 카드 높이에 맞춰 꽉차게(cover) */
.ba-author-info { flex: 1; padding: 6px var(--space-22); display: flex; flex-direction: column; justify-content: center; }
.ba-meta-cat1 { background: var(--color-navy-900); color: var(--text-inverse); font-size: var(--typo-tag); font-weight: 700; padding: 4px var(--space-10); border-radius: 3px; line-height: 1.5; }
.ba-meta-cat2 { color: var(--text-primary); font-size: var(--font-size-15); font-weight: 700; }
.ba-meta-date { margin-left: auto; font-size: var(--font-size-15); }
.ba-author-name { font-size: 19px; font-weight: 800; color: var(--text-primary); display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-10); }
.ba-author-bio { font-size: 15px; color: var(--text-secondary); margin-top: var(--space-10); line-height: 1.6; }
.blog-back { margin: var(--space-80) auto 0; text-align: center; }
.blog-back a { display: inline-block; border: 1px solid var(--interactive-default); padding: var(--space-15) var(--space-44); border-radius: 0; font-size: 15px; font-weight: 600; color: var(--interactive-default); transition: background .2s, color .2s; }
.blog-back a:hover { background: var(--interactive-default); color: var(--text-inverse); }
@media (max-width: 768px) {
  .ba-title { font-size: 27px; }
  .ba-subtitle { font-size: 16px; }
  .ba-author { flex-direction: column; }
  /* 모바일: 전용 모바일 사진(--bg-mo, 4:3)을 풀폭으로. 없으면 PC 사진으로 폴백 */
  .ba-author-photo { width: 100%; aspect-ratio: 4 / 3; background-position: center; background-image: var(--bg-mo, var(--bg-pc)) !important; }
  /* 모바일은 사진↔글이 붙지 않게 상하 패딩 유지(PC만 축소) */
  .ba-author-info { padding: var(--space-22) var(--space-22); }
}

@media (max-width: 768px) {
  .blog-sec { padding: var(--space-100) 0 var(--space-200); }
  .blog-cats { margin-bottom: var(--space-30); }
  .blog-cat1 { grid-template-columns: repeat(2, 1fr); }
  .cat1-tile { font-size: 14px; padding: var(--space-15) var(--space-10); }
  .blog-cat2 { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
  .cat2-tab { font-size: 14px; padding: var(--space-15) var(--space-10); }
  .bcard-title { font-size: 18px; }
  .blog-article { padding: var(--space-72) 0 var(--space-100); }
  .ba-title { font-size: 30px; }
  .ba-body { font-size: 16px; }
  .ba-body h2 { font-size: 24px; }
  .ba-body h3 { font-size: 20px; }
  .ba-summary { font-size: 15px; }
}
/* 블로그 카드 열 수: 데스크톱 4 → 3 → 2 → 1 (페슈식 반응형) */
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .blog-grid { grid-template-columns: 1fr; gap: var(--space-30) 0; } }
/* 모바일: 한 줄에 썸네일 1개 (위 .blog-grid @768) */

/* ===== 블로그 상세 — 페슈 구조(TOC/FAQ/관련글) + 우리 컬러 ===== */
.ba-layout { display: grid; grid-template-columns: 280px minmax(0, 820px); justify-content: center; gap: var(--space-44); align-items: stretch; }   /* 좌 280 목차 + 본문 → 블록 전체를 화면 중앙 배치 */
.ba-side { grid-column: 1; grid-row: 1; }   /* 목차 = 왼쪽 칸(우측 플로팅 버튼과 겹침 방지), 1행 고정 */
.ba-toc { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; }
.ba-toc-h { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid var(--border-strong); }
.ba-toc ul { list-style: none; }
.ba-toc li { margin: 7px 0; line-height: 1.4; }
.ba-toc li.lv-h3 { padding-left: var(--space-12); }
.ba-toc a { font-size: 14px; color: var(--text-primary); }
.ba-toc a:hover { color: var(--text-primary); text-decoration: underline; }
.ba-main { grid-column: 2; grid-row: 1; min-width: 0; }   /* 본문 = 가운데 칸, 1행 고정 */
.ba-toc-mobile { display: none; }   /* 데스크톱은 사이드바 사용, 모바일에서만 본문 안 목차 노출 */
.ba-body p.ba-caption { text-align: center; margin: var(--space-10) 0 4em; }   /* 이미지엔 가깝게(10px), 본문과는 멀게(4em) */
.ba-caption em { font-style: normal; color: var(--text-secondary); font-size: .9em; }
/* 이미지 figure + 캡션(이미지 밑 설명) — 그룹 하단 패딩 크게 줘서 다음 본문과 간격 */
.ba-body figure.ba-figure { margin: 1.6em auto 4em; text-align: center; }
.ba-body figure.ba-figure img { display: block; width: 100%; height: auto; }
.ba-body figure.ba-figure figcaption { text-align: center; color: var(--text-secondary); font-size: .9em; margin-top: var(--space-12); line-height: 1.5; }
.ba-body a.ba-cite { color: var(--text-secondary); font-style: italic; font-size: .82em; text-decoration: none; }
/* 참고 문헌 및 출처 (각주) — 본문 위첨자 마커 + 하단 박스 */
.ba-body .ba-fnref { font-size: .72em; vertical-align: super; line-height: 0; white-space: nowrap; }
.ba-body .ba-fnref a { color: #0d2e5c; font-weight: 700; text-decoration: none; scroll-margin-top: 45vh; }   /* ↩ 클릭 시 본문 위치가 화면 중앙쯤 */
.ba-body .ba-fnref a:hover { text-decoration: underline; }
.ba-footnotes { margin: 40px 0; padding: var(--space-22) var(--space-30); border: 1px solid var(--border-default); border-radius: 2px; }   /* 연한 테두리 박스(관련글과 동일 톤) */
.ba-fn-title { font-size: 1em; font-weight: 700; margin: 0 0 12px; color: var(--text-primary); }   /* 본문 크기 */
.ba-fn-list { list-style: none; margin: 0; padding: 0; }
.ba-fn-list li { font-size: .9em; color: #555; line-height: 1.7; margin: 6px 0; scroll-margin-top: 45vh; }   /* 본문↔출처 클릭 시 화면 중앙쯤 안착(마커와 통일) */
.ba-fn-num { color: #0d2e5c; font-weight: 700; }   /* 본문 마커와 동일 색·(숫자) 형태 */
.ba-fn-list a.ba-fn-url { color: #555; text-decoration: none; word-break: break-all; }
.ba-fn-list a.ba-fn-url:hover { text-decoration: underline; }
.ba-fn-back { color: #0d2e5c; text-decoration: none; margin-left: 4px; }
/* 고지문구 ↔ 의료진 카드 간격 */
.ba-foot .ba-author { margin-top: 64px; }   /* 출처까지 본문으로 보이도록 의료진 카드와 간격 */
/* FAQ */
.ba-faq { margin-top: var(--space-100); }   /* 글 사이(h2) 간격(4em)과 동일하게 */
.ba-faq h2 { font-size: 28px; font-weight: 800; color: var(--text-primary); margin-bottom: var(--space-20); letter-spacing: -0.5px; }
.ba-faq-item { border-top: 1px solid var(--border-default); padding: var(--space-30) 0; }
.ba-faq-item:last-child { border-bottom: none; }
.ba-faq-q { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: var(--space-10); }
.ba-faq-q::before { content: "Q. "; color: var(--text-primary); font-weight: 800; }
.ba-faq-a { font-size: 18px; color: #1a1a1a; line-height: 1.9; }   /* 본문과 동일하게 */
.ba-faq-a::before { content: "A. "; color: var(--text-primary); font-weight: 700; }
/* FAQ 모바일 크기 — base 규칙이 위 미디어쿼리보다 뒤에 있어, 여기서(뒤) 다시 지정해야 적용됨(본문과 동일 16px) */
@media (max-width: 768px) {
  .ba-faq h2 { font-size: 24px; }
  .ba-faq-q, .ba-faq-a { font-size: 16px; }
}
/* 관련글 */
.ba-related { margin-top: var(--space-80); background: none; border: 1px solid var(--border-default); border-radius: 2px; padding: var(--space-22) var(--space-30); }
.ba-related h2 { font-size: 22px; font-weight: 800; margin-bottom: var(--space-15); padding-bottom: var(--space-15); border-bottom: 1px solid var(--border-default); }
.ba-related ul { list-style: none; }
.ba-related li { margin: 7px 0; line-height: 1.5; }
.ba-related a { font-size: 15px; color: var(--text-primary); }
.ba-related a:hover { text-decoration: underline; }
.ba-related-off { font-size: 15px; color: #999; }   /* 미발행 글 — 링크 없이 마케터 문구만 */
@media (max-width: 980px) {
  .ba-layout { display: block; }
  .ba-side { display: none; }
  .ba-main { max-width: none; }
  /* 모바일: 목차를 핵심요약 아래에 박스로 노출(사이드바 대체) */
  .ba-toc-mobile { display: block; background: transparent; border: 1px solid var(--border-strong); border-radius: 2px; padding: var(--space-15) var(--space-20); margin: 0 0 var(--space-30); }
  .ba-toc-mobile .ba-toc { position: static; max-height: none; overflow: visible; }
}

/* 블로그 상세 — 의료진 역할/링크 + 고지문구 */
.ba-author-specialty { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); margin: var(--space-10) 0 0; }
.ba-author-branch { font-size: 16px; font-weight: 400; color: var(--text-primary); margin-right: var(--space-10); }
.ba-author-role { font-size: 17px; font-weight: 400; color: var(--text-primary); }
.ba-author-badge { display: inline-block; padding: 3px var(--space-10); background: var(--bg-subtle-strong); color: var(--text-primary); border-radius: 2px; font-size: 12px; font-weight: 600; vertical-align: middle; }   /* 직함 옆 전문의 배지 */
.ba-author-top { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-15); }   /* 자세히보기 버튼이 카드 우측 끝(안쪽 패딩 유지)으로 */
.ba-author-link { display: inline-block; margin-top: 0; font-size: 14px; color: #000000; flex: none; white-space: nowrap; }
.ba-author-cred { list-style: none; margin: var(--space-20) 0 0; padding: 0; }
.ba-author-cred li { position: relative; padding-left: var(--space-10); font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.ba-author-cred li::before { content: ""; position: absolute; left: 0; top: 11px; width: 3px; height: 3px; background: var(--text-primary); border-radius: var(--shape-avatar); }
.ba-notices { margin: var(--space-70) 0 var(--space-80); padding-top: 0; border-top: none; }
.ba-notices p { font-size: 13px; color: var(--interactive-accent); line-height: 1.7; margin: 0 0 7px; }
@media (max-width: 768px) {
  /* ★ 블로그 섹션 간격 모바일 축소 — .ba-* 본 규칙 뒤에 위치해야 적용됨 */
  .ba-meta { margin-top: var(--space-30); }
  .ba-summary { margin: var(--space-44) 0; }
  .ba-notices { margin: var(--space-44) 0; }
  .ba-author { margin-top: var(--space-30); }
  .ba-related { margin-top: var(--space-44); }
  .ba-faq { margin-top: var(--space-70); }
  .ba-body h2 { margin: 3.2em 0 .5em; }
}

/* 모바일 본문: Noto Sans KR가 커 보여 한 단계 축소(연세w 톤 매칭) */
@media (max-width: 768px) {
  .section-body, .feature-body, .exam-body, .exam-info-body, .pill-body, .pill-lead,
  .dept-lead, .dept-note, .dept-note--18, .symptom-lead, .about-ph-body,
  .media-split-text p, .exam-row-text p, .feature-split-text .bullet-list li,
  .media-split-text .bullet-list li, .worry-list li, .worry-grid li, .step-grid p,
  .checklist li, .spec-list dt, .spec-list dd, .qa-card .qa-a,
  .doctor-cred li, .branch-cap { font-size: 15px; }
}

/* 지점 패널 상단 지점명(h2) + 진료시간 리스트화(간격은 .bi-hours li가 기존 p값 유지) */
.bi-hours-list { list-style: none; }
.branch-name { text-align: center; font-size: 36px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; margin: 0 0 28px; }
@media (max-width: 768px) { .branch-name { font-size: 26px; margin: 0 0 20px; } }

/* ===================================================================== */
/* 고운맥 프리셋 02 — 신규 컴포넌트 (유테라에 없던 것)                      */
/* eyebrow · 원형아이콘 · 소프트원 · 사진밴드 · 네이비 플로팅 · 오시는길     */
/* ===================================================================== */

/* 로고 옆 소제목 (하지정맥류·피부클리닉) */
.logo { display: flex; align-items: center; gap: 12px; }
.logo .logo-sub { font-size: 11px; color: var(--text-primary); letter-spacing: 0.2px; white-space: nowrap; }

/* 폰트는 body 단일 스택("Montserrat","Noto Sans KR")이 라틴=Montserrat·한글=Noto를
   자동 적용 → eyebrow 등 영문 요소에 별도 font-family 선언 불필요(단일 출처) */
.eyebrow { display: block; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-primary); margin-bottom: 14px; }

/* 섹션 제목 아래/위 가로 divider 라인 */
.dept-rule { display: block; width: 30px; height: 2px; background: var(--interactive-default); margin: var(--gap-rule) auto; }   /* 홈과 동일한 짧은 네이비 가로선 */
.dept-rule--top { margin: 0 auto 28px; }
.dept-sub .num, .num { font-weight: 700; color: var(--text-primary); }
.dept--left .dept-head { text-align: left; }
.dept--left .dept-rule { margin-left: 0; }

/* (A) 라인아트 아이콘 원 — 네이비 얇은 테두리 + 선러스트, 3열 */
.icon-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; }
.icon-item { text-align: center; }
.icon-circle { width: 180px; height: 180px; margin: 0 auto 24px; border: 1.5px solid var(--border-strong);
  border-radius: var(--shape-avatar); display: flex; align-items: center; justify-content: center; }
.icon-circle img { width: 88px; height: 88px; }
.icon-name { font-size: 20px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.icon-desc { font-size: 16px; color: var(--text-primary); line-height: 1.75; }

/* (B) 채운 소프트 원 — 특징/장점/합병증 */
.soft-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; justify-items: center; }
.soft-circle { width: 230px; height: 230px; border-radius: var(--shape-avatar); background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; font-size: 18px; font-weight: 500; color: var(--text-primary); line-height: 1.5; }

/* (C) 풀폭 사진 밴드 — 네이비 dim 위 영문 eyebrow + 스텝 pill */
.photo-band { position: relative; padding: 110px 0; color: var(--text-inverse); text-align: center;
  background-position: center; background-size: cover; }
.photo-band::before { content: ""; position: absolute; inset: 0; background: var(--overlay-scrim); }
.photo-band > .container { position: relative; }
.photo-band .en { font-size: 34px; font-weight: 600; letter-spacing: 5px; }
.photo-band .band-sub { margin: 16px 0 36px; font-size: 16px; color: var(--text-on-inverse); }

/* (D) 정보/이미지 카드 — 직각, 소프트 배경 */
.info-card { background: var(--bg-base); border: 1px solid var(--border-default); }
.info-card .ic-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-surface); }
.info-card .ic-img img { width: 100%; height: 100%; object-fit: cover; }
.info-card .ic-body { padding: 20px 22px; }
.info-card .ic-title { font-size: var(--typo-label-medium); font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.info-card .ic-text { font-size: 16px; color: var(--text-primary); line-height: 1.7; }

/* 스텝 pill (CURE PROCESS) + 일반 CTA */
.step-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.step-pill { padding: 12px 26px; border: 1px solid var(--border-strong); border-radius: var(--shape-button); font-size: 16px; color: var(--text-primary); background: var(--text-on-inverse-muted); }
.btn-cta { display: inline-block; padding: 16px 40px; background: var(--interactive-default); color: var(--text-inverse); font-size: 17px; font-weight: 600; border-radius: var(--shape-button); transition: background .2s; }
.btn-cta:hover { background: var(--interactive-hover); color: var(--text-inverse); }

/* PC 우측 네이비 세로바 + 골드 원 (피부클리닉) */
.qbar { position: fixed; right: 0; top: 190px; z-index: 99; display: flex; flex-direction: column; font-size: 0; }
.qbar a { display: block; line-height: 0; }
.qbar a img { width: 100px; height: auto; display: block; vertical-align: top; }
.qbar a:not(:first-child) { margin-top: -5px; }
@media (max-width: 768px) { .qbar { display: none; } }

/* 풀스크린 히어로 — 중앙 로고 오버레이(외과/피부과 공통) + 피부과 이미지 슬라이드 */
.hero-overlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: var(--text-inverse); pointer-events: none; }
.hero-overlay img { height: 64px; width: auto; margin-bottom: 18px; }
.hero-overlay .slogan { font-size: var(--typo-body-large); font-weight: 400; letter-spacing: 1px; }
.hero-slide { position: absolute; inset: 0; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.hero-slide img.is-active { opacity: 1; }

/* 상단 배너(page-hero) — 네이비 dim + eyebrow + breadcrumb */
.page-hero { position: relative; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: var(--overlay-scrim); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { display: block; letter-spacing: 3px; color: var(--text-inverse); margin-bottom: 16px; text-transform: uppercase; }
.page-hero-crumb { margin-top: 18px; font-size: 14px; color: var(--text-on-inverse); }
.page-hero-crumb a { color: var(--text-on-inverse); }

/* 오시는 길 — 지도 + 정보 (단일지점) */
.location-row { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: stretch; }
.location-map { min-height: 420px; background: var(--bg-surface); }
.location-map iframe, .location-map img { width: 100%; height: 100%; border: 0; object-fit: cover; }
.location-info h3 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; }
.li-row { font-size: 16px; color: var(--text-primary); line-height: 1.8; margin-bottom: 6px; }
.li-tel { color: var(--text-primary); margin: 14px 0; }
.li-hours { margin-top: 22px; font-size: 15px; color: var(--text-primary); line-height: 1.9; }
.li-hours .day { display: inline-block; min-width: 88px; font-weight: 700; }

@media (max-width: 768px) {
  .icon-grid, .soft-grid { grid-template-columns: 1fr; gap: 28px; }
  .icon-circle { width: 150px; height: 150px; } .soft-circle { width: 200px; height: 200px; font-size: 16px; }
  .photo-band .en { font-size: 26px; }
  .location-row { grid-template-columns: 1fr; gap: 24px; }
  .logo .logo-sub { display: none; }
}

/* 삼성고운맥의 특별함 — 사진 카드 그리드(3열) */
.spec-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.spec-grid .info-card .ic-img { aspect-ratio: 4 / 3; }
.spec-grid .info-card .ic-body { text-align: center; padding: 18px 16px; }
.spec-grid .info-card .ic-title { margin: 0; font-weight: 600; }
@media (max-width: 768px) { .spec-grid { grid-template-columns: 1fr; gap: 18px; } }

/* 특별함 — 3장씩 페이지 슬라이드 캐러셀 (사진 카드) */
.spec-slider { position: relative; padding: 0 56px; }
.spc .spec-slider { margin-top: var(--gap-sub); }   /* 특별함: 헤더→슬라이더 간격 통일 */
.spec-viewport { overflow: hidden; }
.spec-track { display: flex; transition: transform .5s ease; }
.spec-page { flex: 0 0 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-22); }
.spec-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--text-primary); display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.spec-arrow svg { width: 26px; height: 26px; }
.spec-arrow.prev { left: 0; } .spec-arrow.next { right: 0; }
.spec-arrow:disabled { opacity: .2; cursor: default; }
@media (max-width: 768px) {
  .spec-slider { padding: 0 32px; }
  .spec-page { grid-template-columns: 1fr; gap: 16px; }
  .spec-arrow { width: 30px; } .spec-arrow svg { width: 20px; height: 20px; }
}

/* 인사말 2단 (좌 헤더 / 우 본문) */
.intro-2col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
.intro-2col .dept-eyebrow { margin-bottom: 14px; }
@media (max-width: 768px) { .intro-2col { grid-template-columns: 1fr; gap: 24px; } }

/* ===================================================================== */
/* 홈(/main) 섹션 — 원본 goun.care 시각 복제 (C6, 통이미지는 C9 시맨틱화)   */
/* ===================================================================== */

/* NEWS 바 (히어로 아래 공지) */
.home-news { background: var(--bg-subtle); text-align: center; padding: 18px 15px; }
.home-news p { margin: 0; font-size: 14px; color: var(--text-primary); }
.home-news .news-tag { font-weight: 700; letter-spacing: 2px; margin-right: 16px; }

/* ② 삼성고운맥의 정직한 검사 — 2단(좌 제목 / 우 갤러리 슬라이드) */
.honest { padding: var(--pad-section) 0; }
.honest-row { display: grid; grid-template-columns: 1.03fr 1fr; gap: 56px; align-items: center; }
.honest-title { font-size: var(--typo-heading); font-weight: 700; color: var(--text-primary); line-height: 1.28; letter-spacing: -1px; margin-bottom: var(--gap-rule); }
.honest-head .sec-sub { text-align: left; font-weight: var(--font-weight-medium); color: var(--text-primary); }   /* 좌측정렬 + 미디엄 + 남색 */
.curious .sec-sub { color: var(--text-accent-soft); font-weight: var(--font-weight-bold); }   /* 무엇이 궁금 서브(굵게) */
.honest-galwrap { position: relative; min-width: 0; }
.honest-gallery { position: relative; overflow: hidden; border: 1px solid var(--border-strong); }   /* 정적 프레임 테두리(모든 슬라이드 공통) */
.honest-slides { display: flex; transition: transform .6s ease; }
.honest-slide { flex: 0 0 100%; }
.honest-slide img { width: 100%; aspect-ratio: 8 / 3; object-fit: cover; display: block; }
/* 캡션 = 이미지 아래(제목 + 내용) */
.honest-cap { padding: 24px 24px 28px; color: var(--text-primary); text-align: left; }
.honest-cap .ct { display: block; font-size: var(--typo-label-large); font-weight: 700; color: var(--text-primary); margin-bottom: 12px; letter-spacing: -.5px; }
.honest-cap .cd { display: block; font-size: var(--typo-label-medium); line-height: 1.85; color: var(--text-secondary); }
/* 제목↔서브 사이 작은 가로선 (전 섹션 공통) */
.title-rule { display: block; width: 30px; height: 2px; background: var(--interactive-default); margin: 22px 0; }
.title-rule--center { margin: var(--gap-rule) auto; }
/* 갤러리 좌우 큰 흰 화살표 — 이미지(16:9) 높이에 맞춰 세로 중앙 */
.honest-arrows { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 8 / 3; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; pointer-events: none; z-index: 4; }
.honest-arrow { pointer-events: auto; width: 52px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-inverse); display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.honest-arrow:hover { opacity: .7; }
.honest-arrow svg { width: 46px; height: 46px; display: block; filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)); }
/* PC: 갤러리를 우측 플로팅바(qbar) 폭만큼 당겨 오른쪽 화살표가 가려지지 않게 */
@media (min-width: 769px) { .honest-gallery, .honest-dots { margin-right: 0; } }
@media (min-width: 769px) { .doc-photo { margin-top: -111px; } }
/* 슬라이더 페이지네이션 점 — 전 슬라이더 공통(honest/spec/prim), PC·모바일 모두 표시 */
.honest-dots, .spec-dots { display: flex; gap: 8px; margin-top: 20px; justify-content: center; }
.honest-dots button, .spec-dots button, .prim-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: var(--shape-avatar); background: #c9d2dd; cursor: pointer; transition: width .25s, background .25s; }
.honest-dots button.is-active, .spec-dots button.is-active, .prim-dots button.is-active { width: 24px; border-radius: 5px; background: var(--interactive-default); }

/* ③ 이심전심 + 의료진(이동헌) — 네이비 사진배경 2단 */
.imsim { position: relative; background-size: cover; background-position: center; background-attachment: fixed; overflow: hidden; color: var(--text-inverse); padding: var(--pad-section) 0; }
.imsim::before { content: ""; position: absolute; inset: 0; background: rgba(5,29,63,.78); }
.imsim > .container { position: relative; z-index: 1; }
.imsim-row { display: grid; grid-template-columns: 1fr 1.45fr; gap: 36px; align-items: end; }
.imsim-eyebrow { color: var(--interactive-accent); font-weight: 700; font-size: var(--typo-label-medium); margin-bottom: 20px; }
.imsim-title { font-size: var(--typo-title-large); font-weight: 700; line-height: 1.38; margin-bottom: 44px; letter-spacing: -.5px; }
.imsim-docname { font-size: var(--typo-title-medium); font-weight: 700; margin-bottom: 24px; }
.imsim-docname span { font-size: 78%; font-weight: 700; margin-left: 6px; color: var(--text-inverse); }
.imsim-cred { list-style: none; }
.imsim-cred li { position: relative; padding-left: 16px; font-size: var(--typo-body-medium); line-height: 1.95; color: var(--text-on-inverse); }
.imsim-cred li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 4px; height: 4px; border-radius: var(--shape-avatar); background: var(--text-on-inverse); }
.imsim-cred .hr { padding-left: 0; height: 1px; background: var(--border-inverse); margin: 18px 0; }
.imsim-cred .hr::before { display: none; }
.imsim-photo { text-align: center; align-self: end; margin-top: calc(-1 * var(--space-44)); margin-bottom: calc(-1 * var(--pad-section)); }
.imsim-photo img { width: 100%; max-width: 760px; display: block; margin: 0 auto; }

/* ④ 하지정맥류의 원인 + Solution 01~04 (4그리드) */
.cause { padding: var(--pad-section) 0; }
.cause-head { text-align: center; margin-bottom: var(--gap-sub); }
.cause-rule { display: block; width: 30px; height: 2px; background: var(--interactive-default); margin: var(--gap-rule) auto; }
.sol-grid { list-style: none; display: flex; align-items: flex-start; justify-content: center; gap: 0; }
.sol-item { flex: 1 1 0; text-align: center; }
.sol-item img { width: 100%; max-width: 200px; margin: 0 auto 26px; display: block; }
.sol-conn { flex: 0 0 auto; align-self: flex-start; margin-top: 78px; padding: 0 6px; font-size: 26px; font-weight: 400; color: var(--text-primary); line-height: 1; }
.sol-no { font-size: var(--typo-tag); font-weight: 600; letter-spacing: 1px; color: var(--text-primary); display: block; margin-bottom: 10px; }
.sol-name { color: var(--text-primary); margin-bottom: 16px; line-height: 1.4; }
.sol-desc { color: var(--text-secondary); line-height: 1.75; }

/* ⑤ 하지정맥류의 다양한 치료 — 12타일 6열 그리드(시술6 × 기기/라벨 쌍) */
.treat { padding: var(--pad-section) 0; background: var(--bg-subtle); }
.treat-head { text-align: center; margin-bottom: 60px; }
.treat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; width: calc(100vw - 400px); margin-left: calc(-50vw + 50% + 200px); }
.treat-cell { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--interactive-default); }
.treat-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.treat-cell::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .25s; pointer-events: none; }
.treat-cell:hover::after { background: rgba(0,0,0,.2); }

/* ⑥ 무엇이 궁금하세요 — 사진배경(parallax) + 바로가기 버튼 */
.curious { position: relative; background-size: cover; background-position: center; background-attachment: fixed; color: var(--text-primary); padding: var(--pad-section) 0; text-align: center; }
.curious::before { content: ""; position: absolute; inset: 0; background: var(--text-on-inverse-faint); }   /* 밝은 베일 — 대리석 배경 유지 */
.curious > .container { position: relative; z-index: 1; }
.curious-links { display: flex; flex-wrap: nowrap; justify-content: center; gap: 12px; margin-top: 44px; }
.curious-links a { display: inline-block; white-space: nowrap; padding: 13px 22px; border: 1px solid var(--border-strong); color: var(--text-primary); background: var(--text-on-inverse-muted); font-size: var(--typo-label-medium); transition: background .2s, color .2s; }
.curious-links a:hover { background: var(--interactive-default); color: var(--text-inverse); }

/* ⑦ HONESTY·TRUST·SAFETY 사진밴드 + 협력병원 마크 */
/* 배경 이미지 아래로 내림(상단 더 보임) + 상하 패딩 20px씩 추가. 텍스트는 중앙 유지 */
.honesty { position: relative; background-size: cover; background-position: center 25%; color: var(--text-inverse); padding: 200px 0 160px; text-align: center; }
.honesty::before { content: ""; position: absolute; inset: 0; background: transparent; }   /* dim 제거 */
.honesty > .container { position: relative; z-index: 1; }
.honesty-words { display: flex; justify-content: center; align-items: center; letter-spacing: 5px; font-size: var(--typo-label-large); font-weight: 600; }
.honesty-words .word { padding: 0 30px; }
.honesty-words .word + .word { border-left: 1px solid var(--text-on-inverse-faint); }
.honesty-sub { margin-top: 24px; font-size: var(--typo-body-medium); line-height: 1.95; color: var(--bg-glass); }
.partners { padding: 0; overflow: hidden; background: var(--bg-base); }
.partners-mask { overflow: hidden; }
.partners-track { display: flex; }
.partners-set { display: flex; align-items: center; flex: 0 0 auto; animation: partnerScroll 44s linear infinite; }
.partners-set img { height: 88px; width: auto; display: block; margin-right: 60px; }   /* 컬러 로고 + 항목 간격 */
@keyframes partnerScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

@media (max-width: 768px) {
  .honesty { padding: 72px 0; }
  .curious { background-attachment: scroll; }
  .honest-row, .imsim-row { grid-template-columns: 1fr; gap: 32px; }
  .imsim-photo { display: none; }
  .imsim-title { margin-bottom: 32px; }
  .sol-grid { grid-template-columns: 1fr; gap: 34px; }
  .treat-grid { grid-template-columns: repeat(2, 1fr); }
  .curious-links a { padding: 12px 22px; }
  .home-news .news-tag { display: block; margin: 0 0 4px; }
}

/* ===================================================================== */
/* 시술 상세 (정맥류 치료) 템플릿 — 베나실 외 6종 공용                       */
/* ===================================================================== */

/* 상단배너 breadcrumb 위 카테고리 라벨 */
.page-hero-inner { padding-top: calc(80px + var(--header-h)); padding-bottom: 80px; text-align: center; }
@media (max-width:768px){ .page-hero-inner { padding-top: calc(50px + var(--header-h)); padding-bottom: 50px; } }

/* ② 인트로 */
.trt-intro { padding: 130px 0; text-align: center; }
.trt-intro .eyebrow { letter-spacing: 1.4px; }
.trt-intro-title { font-size: 40px; font-weight: 800; color: var(--text-primary); margin-bottom: 20px; letter-spacing: -.5px; }
.trt-slogan { display: inline-block; font-size: 22px; font-weight: 700; color: var(--text-primary); background: #ebe0d2; padding: 7px 20px; margin-bottom: 36px; }
.trt-lead { max-width: 880px; margin: 0 auto; }
.trt-lead p { font-size: 18px; color: var(--text-secondary); line-height: 1.9; margin-bottom: 16px; }
.spec-box-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 68px; }
.spec-box { border: 1px solid var(--border-default); padding: 38px 18px; }
.spec-box img { width: 58px; height: 58px; margin: 0 auto 18px; }
.spec-box .sb-label { font-size: 15px; color: var(--text-secondary); margin-bottom: 12px; }
.spec-box .sb-val { font-size: 19px; font-weight: 700; color: var(--text-primary); line-height: 1.5; }
.spec-box .sb-val small { display: block; font-size: 14px; font-weight: 400; color: var(--text-secondary); margin-top: 5px; }

/* ③ 치료 과정 (photo-band 재사용 + 출처/이미지) */
.proc .proc-imgs { display: grid; gap: 20px; margin-top: 40px; }
.proc .proc-imgs img { width: 100%; display: block; background: var(--bg-base); }
.proc-cap { margin-top: 16px; font-size: 14px; color: var(--text-on-inverse); text-align: right; }

/* ④ 특별함 소프트 원 (soft-grid 재사용, 6개 2행) */
.trt-special { padding: 130px 0; }
.trt-special .sec-sub { margin-bottom: 60px; }
.trt-special .soft-grid { max-width: 900px; margin: 0 auto; }

/* ⑤ 주의사항 — 사진 위 2열 */
.caution { position: relative; background-size: cover; background-position: center; color: var(--text-inverse); padding: 120px 0; }
.caution::before { content: ""; position: absolute; inset: 0; background: rgba(7, 18, 38, 0.82); }
.caution > .container { position: relative; z-index: 1; }
.caution-head { text-align: center; margin-bottom: 56px; }
.caution-eyebrow { display: block; font-size: 14px; letter-spacing: 2px; color: var(--text-on-inverse); margin-bottom: 14px; }
.caution-title { font-size: 36px; font-weight: 400; color: var(--text-inverse); }
.caution-title strong { font-weight: 800; }
.caution-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 56px; max-width: 940px; margin: 0 auto; }
.caution-grid li { position: relative; padding: var(--space-10) 0 var(--space-10) 32px; border-bottom: 1px solid var(--border-inverse); font-size: 17px; line-height: 1.6; }
.caution-grid li::before { content: ""; position: absolute; left: 6px; top: 18px; width: 7px; height: 7px; border-radius: var(--shape-avatar); background: var(--bg-base); }

/* ⑥ SPC 삼성고운맥의 특별함 (spec-slider 재사용, 사진 + HTML 제목) */
.spc { padding: var(--pad-section) 0; }
.spc .info-card { background: transparent; border: 0; }
.spc .ic-img { aspect-ratio: 1 / 1; position: relative; }
.spc .ic-img .hover { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.spc .info-card:hover .ic-img .hover { opacity: 1; }
.spc .ic-title { text-align: center; margin: 16px 0 0; font-size: var(--typo-label-medium); font-weight: 600; color: var(--text-primary); }

/* ⑦ 오시는 길 — 카카오톡 행 */
.li-kakao { margin-top: 18px; font-size: 15px; color: var(--text-primary); }
.li-kakao b { font-weight: 700; }

@media (max-width: 768px) {
  .trt-intro, .trt-special, .spc, .caution { padding: 72px 0; }
  .trt-intro-title { font-size: 32px; } .trt-slogan { font-size: 18px; }
  .trt-lead p { font-size: 16px; }
  .spec-box-grid { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; }
  .spec-box { padding: 26px 12px; }
  .caution-title { font-size: 26px; }
  .caution-grid { grid-template-columns: 1fr; gap: 0; }
  .caution-grid li { font-size: 15px; }
}

/* ===================================================================== */
/* 홈 모바일 전용 리비전 (2026-06-23, 사용자 피드백) — PC 불변              */
/* ===================================================================== */
.treat-imgmap { display: none; }   /* PC 숨김(모바일에서만 통이미지+이미지맵 노출) */

@media (max-width: 768px) {
  /* #1 섹션 제목↔서브 작은 가로선 전부 삭제 */
  .title-rule, .cause-rule, .dept-rule { display: none !important; }

  /* #2 하지정맥류 원인 — 왼쪽정렬 + Solution 박스(아래화살표 연결) */
  .cause-head { text-align: left; }
  .sol-grid { flex-direction: column; gap: 0; align-items: stretch; }
  .sol-item { flex: none; border: 1px solid var(--border-strong); padding: 8px 20px; min-height: 60px; display: flex; align-items: center; text-align: left; }
  .sol-item img, .sol-item .sol-desc { display: none; }
  .sol-no { margin: 0; padding-right: 16px; border-right: 1px solid var(--border-strong); font-size: 16px; letter-spacing: 0.6px; white-space: nowrap; }
  .sol-name { margin: 0 0 0 16px; font-size: 16px; font-weight: 700; line-height: 1.3; }
  .sol-grid li:last-of-type { background: var(--interactive-default); }
  .sol-grid li:last-of-type .sol-no, .sol-grid li:last-of-type .sol-name { color: var(--text-inverse); }
  .sol-grid li:last-of-type .sol-no { border-right-color: var(--text-on-inverse-faint); }
  .sol-conn { align-self: center; margin: 0; padding: 8px 0; font-size: 0; }
  .sol-conn::after { content: ""; display: inline-block; width: 11px; height: 11px; border-right: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong); transform: rotate(45deg); margin-top: -5px; }

  /* #3 다양한 치료 — 왼쪽정렬 + 통이미지(이미지맵 6구역, 2열×3행) */
  .treat-head { text-align: left; margin-bottom: var(--gap-sub); }
  .cause .sec-sub, .treat .sec-sub, .curious .sec-sub { text-align: left; }
  .treat-grid { display: none; }
  .treat-imgmap { display: block; position: relative; margin-top: 0; }
  .treat-imgmap img { width: 100%; display: block; }
  .treat-imgmap a { position: absolute; width: 50%; height: 33.333%; }
  .treat-imgmap a:nth-of-type(1) { left: 0;   top: 0; }            /* 베나실 */
  .treat-imgmap a:nth-of-type(2) { left: 50%; top: 0; }            /* 클라리베인 */
  .treat-imgmap a:nth-of-type(3) { left: 0;   top: 33.333%; }      /* 고주파 */
  .treat-imgmap a:nth-of-type(4) { left: 50%; top: 33.333%; }      /* 레이저 */
  .treat-imgmap a:nth-of-type(5) { left: 0;   top: 66.666%; }      /* 국소제거술 */
  .treat-imgmap a:nth-of-type(6) { left: 50%; top: 66.666%; }      /* 혈관경화요법 */

  /* 이심전심 모바일 배경 (사용자 제공 이미지) */
  .imsim { background-image: url('/images/surgery/home/imsim-bg-mobile.png') !important; background-position: center; background-attachment: scroll; }

  /* #4 무엇이 궁금 — 왼쪽정렬 + 버튼 2개씩 */
  .curious { text-align: left; }
  .curious-links { flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
  .curious-links a { flex: 0 0 calc(50% - 5px); text-align: center; padding: 13px 8px; }

  /* 정직한 검사 갤러리: 모바일도 화살표 사용(점 숨김) */
  .honest-arrows { display: flex; padding: 0 10px; }
  .honest-arrow { width: 42px; height: 42px; }
  .honest-arrow svg { width: 36px; height: 36px; }

  /* #5 honesty — 한 줄 + 세로선 유지 */
  .honesty-words .word { padding: 0 14px; }

  /* #6 협력병원 로고 띠 상하 패딩 10px */
  .partners { padding: 0; }

  /* #7 푸터 — 사업자정보 표시 + 로고 2배 + 하단 흰여백 제거 */
  body { padding-bottom: 0; }
  .footer-biz { display: block; text-align: center; }
  .footer-biz address { white-space: normal; font-size: 12px; line-height: 1.85; }
  .footer-logo img { width: 130px; }
}

/* ===================================================================== */
/* 하지정맥류 콘텐츠 (원인/증상/진단) 템플릿                                  */
/* ===================================================================== */
/* 소제목(일차성/이차성 등) */
.sub-head { text-align: center; margin-bottom: 10px; }
.sub-head h3 { display: inline-block; color: var(--text-primary); }
.sub-rule { display: block; width: 100%; max-width: 480px; height: 1px; background: var(--border-default); margin: var(--gap-rule) auto; }
/* 섹션 서브·리드 텍스트 = 한 size 역할(PC 17 / 모바일 16, §3 단일 출처).
   색·굵기·정렬만 클래스별로 다름(네이비 밴드 위는 흰색 등 맥락 차이). */
/* 섹션 서브·리드 — 한 역할(--typo-label-large). 색·굵기 변형은 modifier */
.sec-sub { color: var(--text-primary); text-align: center; line-height: 1.7; margin: 0; }
.sec-sub--strong { font-weight: var(--font-weight-medium); }                 /* 홈/CURE 서브(약간 굵게) */
.sec-sub--muted  { color: var(--text-secondary); }               /* 그레이 리드 */
.sec-sub--invert { color: var(--text-inverse); line-height: 1.9; }    /* 네이비 밴드 위 흰색 */

/* ② 하지정맥류란 — 정의 일러스트 + 본문(중앙) */
.var-def { text-align: center; margin-top: var(--gap-sub); }
.var-def-top { color: var(--text-primary); line-height: 1.95; margin: 0 0 40px; }
.var-def-img { max-width: 480px; margin: 0 auto 44px; }   /* 600 → 480 (20% 축소) */
.var-def-img img { width: 100%; display: block; }
.var-def-body p { color: var(--text-primary); line-height: 1.95; margin: 0; }

/* 섹션 가로 풀블리드 구분선 (일차성↔이차성 사이 등) */
.full-rule { display: block; width: 100vw; margin-left: calc(-50vw + 50%); height: 2px; background: var(--border-default); }

/* CURE PROCESS — 하지정맥류 페이지에서만 흰 배경(홈 Solution은 그대로) */
.cause.cure-sec { background: var(--bg-base); }
.cure-sec .eyebrow { margin-bottom: 5px; }   /* eyebrow↔CURE PROCESS 간격 축소 */
/* 타이틀 가로선 제거 → 제목↔서브 간격 보정 */
.sec-title + .sec-sub, .sub-head + .sec-sub { margin-top: var(--gap-rule); }
.sec-title + .sec-sub.seb-sub { margin-top: var(--gap-sub); }

/* CURE PROCESS 개편 — 상단 이미지 + 타이틀 알약버튼(삼각형 흐름) */
.cure-banner { margin: 0 0 var(--gap-sub); }
.cure-banner img { display: block; width: 100%; height: auto; }
.cure-flow { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin-top: var(--gap-sub); }
.cure-flow-step { position: relative; display: inline-flex; align-items: center; padding: 8px 20px; border: 1px solid var(--border-strong); border-radius: var(--shape-tag); color: var(--text-primary); font-size: var(--typo-label-large); font-weight: var(--font-weight-medium); white-space: nowrap; }
.cure-flow-step::before { content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent var(--border-strong); }
.cure-flow-step:last-child::before { display: none; }
@media (max-width: 768px) {
  .cure-flow { flex-direction: column; align-items: stretch; gap: 22px; max-width: 300px; margin-left: auto; margin-right: auto; }
  .cure-flow-step { justify-content: center; padding: 9px 16px; }
  .cure-flow-step::before { right: auto; left: 50%; top: auto; bottom: -8px; transform: translateX(-50%); border-width: 8px 6px 0 6px; border-color: var(--border-strong) transparent transparent transparent; }
}

/* 방치 합병증 — 텍스트 원(PC 첫줄 4개 / 둘째줄 5개, 모바일 2개씩) */
.comp-circles { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 44px; row-gap: 0; margin: var(--gap-sub) auto 0; padding: 0; }
.comp-circles li { display: flex; align-items: center; justify-content: center; width: 156px; height: 156px; border-radius: var(--shape-avatar); background: var(--bg-subtle-strong); color: var(--text-primary); font-size: var(--typo-label-medium); font-weight: 600; text-align: center; }
.comp-circles .comp-break { flex-basis: 100%; width: 100%; height: 30px; background: none; border-radius: 0; }

/* 일차성 — 모바일 1개씩 자동 슬라이더(PC는 그대로 3×3 그리드) */
.prim-dots, .prim-arrow { display: none; }   /* PC는 그리드라 컨트롤 숨김(모바일에서만 슬라이더) */

/* ③ 원인 인트로 — 네이비 적혈구 배경 풀밴드 (높이 -40px) */
.cause-band { background-size: cover; background-position: center; color: var(--text-inverse); padding: var(--pad-section) 0; }
.cause-band .sec-title { color: var(--text-inverse); }
.cause-band .dept-rule { background: var(--text-on-inverse-faint); }

/* ④ 일차성 9 아이콘 — 그룹 400px(3열), 아이콘 210×210 */
.cause-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 400px); justify-content: center; gap: 64px 0; margin-top: var(--gap-sub); }
.cause-item { text-align: center; padding: 0 30px; }
.cause-item img { width: 210px; height: 210px; max-width: 100%; margin: 0 auto 22px; display: block; }
.cause-item h4 { color: var(--text-primary); margin-bottom: 14px; }
.cause-item p { color: var(--text-secondary); line-height: 1.75; }

/* ===== 증상 페이지 ===== */
.asymp { text-align: center; margin-top: var(--gap-sub); }
.asymp-img img { width: 100%; max-width: 460px; margin: 0 auto 44px; display: block; }
.asymp-text { color: var(--text-primary); line-height: 1.95; margin: 0; }
.asymp-text--strong { margin-top: 26px; font-weight: var(--font-weight-medium); }
.self-sec { background-size: cover; background-position: center; }
/* ★ 어두운 배경 섹션: eyebrow(소제목)=갈색(interactive-accent) / 제목=흰색 — 공통 규칙 */
.cause-band .eyebrow, .ct-band .eyebrow, .self-sec .eyebrow, .caution .eyebrow, .caution-eyebrow, .photo-band .eyebrow, .proc .eyebrow { color: var(--interactive-accent); }
.self-sec .sec-title { color: var(--text-inverse); }
.self-sec .sec-sub { color: var(--text-on-inverse); }
.sc-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 64px; max-width: 880px; margin: var(--gap-sub) auto 0; }
.sc-list li { position: relative; padding: 15px 4px 15px 34px; border-bottom: 1px solid var(--border-inverse); color: var(--text-on-inverse); line-height: 1.5; }
.sc-list li::before { content: "\2713"; position: absolute; left: 6px; top: 17px; color: var(--interactive-accent); font-weight: var(--font-weight-bold); }
.self-close { text-align: center; color: var(--text-on-inverse-muted); line-height: 1.9; margin: 52px 0 0; }

/* ===== 진단 페이지 ===== */
.expert-img img { display: block; width: 100%; max-width: 560px; margin: var(--gap-sub) auto 44px; }
.expert-quote { text-align: center; margin: 0 0 36px; }
.expert-lead { text-align: center; color: var(--text-primary); line-height: 1.95; margin: 0; }
.step-list { list-style: none; max-width: 780px; margin: var(--gap-sub) auto 0; }
.step-row { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: var(--space-30) 8px; border-top: 1px solid var(--border-default); }
.step-row:last-child { border-bottom: 1px solid var(--border-default); }
.step-text { flex: 1 1 auto; text-align: left; }
.step-title { color: var(--text-primary); margin-bottom: 16px; }
.step-desc { color: var(--text-secondary); line-height: 1.75; }
.step-img { flex: 0 0 auto; }
.step-img img { display: block; width: 100%; max-width: 190px; border-radius: var(--shape-image); }
/* CT·MRI 네이비 밴드(반전) */
.ct-band { background: var(--bg-inverse); }
.ct-band .sec-title { color: var(--text-inverse); }
.ct-band .dept-rule { background: var(--text-on-inverse-muted); }
.ct-band .ct-body { text-align: center; margin-top: var(--gap-sub); }
.ct-band .ct-body p { color: var(--text-on-inverse); line-height: 1.95; }
.ct-band .ct-body p + p { margin-top: 24px; }

/* ⑤ 이차성 — 다이어그램 그룹 600px(2열, 사이여백 0), 이미지 500 */
.sec-diagrams { display: grid; grid-template-columns: repeat(2, 600px); justify-content: center; gap: 0; margin: var(--gap-sub) 0 56px; }
.sec-diagram { text-align: center; }
.sec-diagram img { width: 500px; max-width: 100%; display: block; margin: 0 auto 18px; }
.sec-diagram .cap { font-size: var(--typo-label-medium); font-weight: 600; color: var(--text-primary); }


/* ===== 텍스트 박스 (강조 박스 공통 규칙) =====
   흰 배경 = 연한 갈색(bg-highlight) / 남색·이미지 배경 = 연한 남색(bg-surface). padding은 원인 cap--hl 기준 */
.text-box { display: inline-block; padding: 0px 4px; background: var(--bg-cream); color: var(--text-primary); font-weight: var(--font-weight-bold); }
.text-box--on-dark { background: var(--bg-surface); color: var(--text-primary); }
.sec-body { text-align: center; }
.sec-body .sec-lead { font-size: 20px; font-weight: 600; color: var(--text-primary); line-height: 1.6; margin-bottom: 30px; }
.sec-body p { font-size: 16px; color: var(--text-secondary); line-height: 1.9; margin: 0; }
.sec-body p.typo-body-medium { font-size: var(--typo-body-medium); }

/* ⑥ 합병증 일러스트 */
.complication-img { max-width: 860px; margin: 44px auto 0; }
.complication-img img { width: 100%; display: block; }

/* ⑦ CURE PROCESS — 무엇이궁금 레이아웃(가운데 + 가로 pill 버튼) */
.cure { color: var(--text-inverse); text-align: center; }
.cure .dept-eyebrow { color: var(--text-on-inverse); }
.cure-title { font-size: 34px; font-weight: 600; letter-spacing: 4px; color: var(--text-inverse); margin-bottom: 18px; }
.cure-lead { font-size: 16px; color: var(--bg-glass); line-height: 1.85; margin-bottom: 44px; }
.cure-steps { display: flex; flex-wrap: nowrap; justify-content: center; gap: 14px; }
.cure-step { display: inline-block; white-space: nowrap; padding: 14px 30px; border: 1px solid var(--text-on-inverse-faint); border-radius: var(--shape-button); font-size: 16px; font-weight: 500; color: var(--text-inverse); transition: background .2s, color .2s; }
.cure-step:hover { background: var(--bg-base); color: var(--text-primary); }

/* SPC 특별함 (cause) — 탄 배경 + 467×281 카드 + 흰 텍스트박스 + 굵은 제목 */
.spc { background: var(--bg-accent); }
.spc .ic-img { aspect-ratio: 467 / 281; }
.spc .ic-title { background: var(--bg-base); text-align: center; margin: 0; padding: 11px 12px; font-size: var(--typo-label-medium); font-weight: 400; color: var(--text-primary); }   /* 카드 제목 기본 굵기 */
.spc .sec-title { font-weight: var(--font-weight-bold); }   /* "삼성고운맥의 특별함" 전체 볼드 */
.spc .sec-title strong { font-weight: var(--font-weight-extrabold); }

/* ⑧ 오시는 길 — 지도 좌측 풀블리드 / 우측 정보(중앙정렬, 확대) */
.loc-sec { padding: 0 !important; }
.loc-wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.loc-wrap .location-map { display: block; min-height: 560px; }
.loc-wrap .location-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-info { align-self: center; padding: 72px 6vw 72px 60px; }
.loc-info .loc-title { font-size: 32px; font-weight: 700; color: var(--text-primary); margin-bottom: 30px; }
.loc-info h3 { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.loc-info .li-addr { font-size: 18px; color: var(--text-primary); line-height: 1.7; font-style: normal; }
.loc-info .li-resv { font-size: 18px; color: var(--text-primary); margin: 0 0 4px; }
.loc-info .li-tel { color: var(--text-primary); margin: 0; }
.loc-info .li-tel a { color: inherit; }
.loc-info .li-hours { margin-top: 22px; font-size: 17px; color: var(--text-primary); line-height: 2; }
.loc-info .li-hours p { margin: 0; }
.loc-info .li-hours .day { display: inline-block; min-width: 92px; font-weight: 700; }
.loc-info .li-sat { margin-top: 8px; font-size: 15px; color: var(--text-secondary); }
.loc-info .li-hr { width: 100%; height: 1px; background: var(--interactive-default); margin: 26px 0; }
.loc-info .li-kakao { color: var(--text-primary); line-height: 1.7; margin: 0; }
.loc-info .li-kakao .kk-label { display: block; font-size: 20px; font-weight: 700; margin-bottom: 10px; }   /* "주소" h3와 동일 크기·간격 */
.loc-info .li-kakao a { display: block; font-size: 18px; font-weight: 400; color: var(--text-primary); }   /* @채널명 기본 굵기 */

@media (max-width: 768px) {
  .var-def-img { max-width: 100%; }
  .cause-grid { grid-template-columns: 1fr 1fr; gap: 36px 16px; }
  .cause-item { padding: 0; } .cause-item img { width: 150px; height: 150px; }
  .asymp-img img { max-width: 300px; margin-bottom: 30px; }
  .sc-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; max-width: 360px; }
  .self-close { margin-top: 40px; }
  .step-row { flex-direction: column; align-items: flex-start; gap: 18px; padding: 30px 0; }
  .step-img { align-self: flex-start; }
  .step-img img { max-width: 150px; }
  .expert-img img { max-width: 360px; margin-bottom: 30px; }
  /* 일차성 — 모바일 1개씩 자동 슬라이더 */
  .prim-slider { overflow: hidden; position: relative; }
  .cause-grid.prim-track { display: flex; flex-wrap: nowrap; justify-content: flex-start; grid-template-columns: none; gap: 0; margin-top: var(--gap-sub); }
  .prim-track .cause-item { flex: 0 0 100%; padding: 0 24px; }
  .prim-track .cause-item img { width: 196px; height: 196px; }
  .prim-track .cause-item h4 { font-size: 21px; }
  .prim-track .cause-item p { font-size: 16px; }
  .prim-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }   /* 점 스타일은 공통 규칙 사용 */
  /* 일차성 좌우 화살표(원 중앙 높이) */
  .prim-arrow { display: flex; position: absolute; top: 138px; transform: translateY(-50%); width: 38px; height: 38px; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--text-primary); cursor: pointer; z-index: 3; }
  .prim-arrow.prev { left: -4px; } .prim-arrow.next { right: -4px; }
  .prim-arrow svg { width: 26px; height: 26px; }
  /* 방치 합병증 원 — 모바일 한 줄 3개 */
  .comp-circles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 360px; margin: var(--gap-sub) auto 0; }
  .comp-circles li { width: 100%; height: auto; aspect-ratio: 1; font-size: 14px; }
  .comp-circles .comp-break { display: none; }
  .sec-diagrams { grid-template-columns: 1fr; gap: 32px; }
  .sec-diagram img { width: 100%; }
  .cure-title { font-size: 26px; } .cure-steps { flex-wrap: wrap; }
  .loc-wrap { grid-template-columns: 1fr; } .loc-wrap .location-map { min-height: 300px; }
  .loc-info { padding: 48px 20px; }
  /* 오시는길 모바일 폰트(PC 크기 그대로 나오던 것 축소) */
  .loc-info .loc-title { font-size: 26px; margin-bottom: 24px; }
  .loc-info h3 { font-size: 18px; }
  .loc-info .li-addr, .loc-info .li-resv, .loc-info .li-kakao a { font-size: 16px; }
  .loc-info .li-hours { font-size: 16px; }
  .loc-info .li-kakao .kk-label { font-size: 18px; }
  /* 디자인시스템: 섹션 서브·리드 모바일 16 단일 규칙(§3, .sub-lead 포함) */
  /* 모바일: 가로선이 숨겨지므로 제목 아래 여백을 직접 부여(제목↔내용 간격) */
  .sec-title, .honest-title { margin-bottom: var(--gap-title); }
  /* 디자인시스템: 모바일 본문 16px (PC 17 → 16) */
  .sec-body .sec-lead { font-size: 18px; }   /* 강조 리드 20→18 */
  /* 디자인시스템: 본문 좌측정렬 + 자연 줄바꿈(타이틀·서브는 가운데 유지) */
  .var-def-top, .var-def-body p, .sec-body p { text-align: left; }
  .var-def-body p br, .sec-body p br, .sec-body .sec-lead br, .cause-item p br, .sec-sub br { display: none; }
  .sec-sub br.br-mo { display: inline; }
  .cause .sec-sub br, .treat .sec-sub br { display: inline; }
}


/* ===== 모바일 추가 수정 (일괄) ===== */
@media (max-width: 768px) {
  /* 1) 헤더: 로고/햄버거 양끝(거터 마진) + 배경 음영 + 스크롤시 네이비 */
  .header-inner { padding: 0 var(--gutter); }
  .site-header { background: rgba(0,0,0,.4); }
  .site-header.scrolled { background: #0d2e5c; border-bottom-color: transparent; }
  .site-header.scrolled .logo img { filter: brightness(0) invert(1); }
  .site-header.scrolled .nav-toggle span { background: #fff; }
  /* 2) 배너 소제목↔타이틀 간격 축소 */
  .page-hero-rule { margin: var(--space-10) auto; }
  /* 3) 의료진: 사진 위 → 이름+약력 흰 박스 */
  .doc-photo { order: -1; }
  .doc-info { background: var(--bg-base); padding: var(--space-30); }
  /* 4) 연구 썸네일 1열 */
  .res-grid { grid-template-columns: 1fr; }
  .seb-ba2 { flex-direction: column; gap: 24px; }
  .seb-ba2-item { max-width: 320px; flex: none; width: 100%; }
  .seb-ba2-arrow { transform: rotate(90deg); }
  /* 6) 화살표 모바일: 캡션 아래 가운데 */
  .proc-steps li:not(:last-child) .proc-img::after { display: none; }
  .proc-steps li:not(:last-child)::after { content: "\203A"; position: absolute; bottom: -34px; left: 50%; transform: translate(-50%, 0) rotate(90deg); font-size: 44px; line-height: 1; color: var(--text-on-inverse-muted); }
  /* 7) 특별함 사각형 1열 유지 */
  .ven-circles { grid-template-columns: 1fr; max-width: 360px; gap: var(--space-12); }
  .ven-circles li { aspect-ratio: auto; border-radius: 0; display: block; padding: var(--space-15); }
  .cure-sec .cause-head { text-align: center; }
  .br-mo { display: inline; }
  .br-pc { display: none; }
  .seb-steps { grid-template-columns: 1fr; }
}
/* ===== 인트로(분기) 페이지 ===== */
.intro-body { margin: 0; min-height: 100vh; }
.intro-bg { position: fixed; inset: 0; background-size: cover; background-position: center; background-color: #1c2430; z-index: -2; }
.intro-bg { overflow: hidden; }
.intro-bg .hero-video { background: transparent; }
.intro-dim { position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.6); }
.intro-wrap { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-100); padding: 48px 20px; transform: translateY(-20px); }
.intro-logo { margin: 0; }
.intro-logo img { width: 350px; height: auto; display: block; }
.intro-cards { display: flex; gap: 200px; }
.intro-head { display: flex; flex-direction: column; align-items: center; gap: 52px; }
.intro-copy { text-align: center; max-width: 560px; }
.intro-copy-sub { color: var(--color-white-a70); font-size: var(--font-size-16); font-weight: var(--font-weight-regular); letter-spacing: .3px; margin: 0 0 var(--space-12); }
.intro-copy-lead { color: var(--color-white); font-size: var(--font-size-24); line-height: 1.5; font-weight: var(--font-weight-bold); margin: 0; }
.intro-copy-kw { color: var(--color-white-a70); font-size: var(--font-size-14); letter-spacing: .5px; margin: var(--space-15) 0 0; }
.intro-card { display: block; width: 400px; aspect-ratio: 5 / 6; text-decoration: none; background-size: cover; background-position: center; background-repeat: no-repeat; }
.intro-card--surgery { background-image: url('/images/intro/surgery.png'); }
.intro-card--surgery:hover { background-image: url('/images/intro/surgery-hover.png'); }
.intro-card--skin { background-image: url('/images/intro/skin.png'); }
.intro-card--skin:hover { background-image: url('/images/intro/skin-hover.png'); }
@media (max-width: 768px) {
  .intro-wrap { gap: 60px; padding: 40px 16px; }
  .intro-logo img { width: 200px; }
  .intro-copy-sub { font-size: var(--font-size-13); margin-bottom: var(--space-10); }
  .intro-copy-lead { font-size: var(--font-size-18); }
  .intro-copy-kw { font-size: var(--font-size-12); }
  .intro-cards { flex-direction: column; gap: 0; width: 100%; max-width: 400px; }
  .intro-card { width: 100%; max-width: none; aspect-ratio: 16 / 9; }
  .intro-card--surgery, .intro-card--surgery:hover { background-image: url('/images/intro/surgery-mo.png'); }
  .intro-card--skin, .intro-card--skin:hover { background-image: url('/images/intro/skin-mo.png'); }
}

@keyframes introUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }
.intro-card { opacity: 0; animation: introUp 1.5s cubic-bezier(.22,.61,.36,1) forwards; }
.intro-card--surgery { animation-delay: .3s; }
.intro-card--skin { animation-delay: .9s; }

/* ===== 모바일 하단 탭바 (intro·home 제외) ===== */
.tabbar-mo { display: none; }
@media (max-width: 768px) {
  .tabbar-mo { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; width: 100%; aspect-ratio: 5 / 1; background: #fff url('/images/quick/tabbar-mo.jpg') center / 100% 100% no-repeat; box-shadow: 0 -2px 10px rgba(0,0,0,.08); }
  .tabbar-mo a { flex: 1; display: block; height: 100%; }
  body:has(.tabbar-mo) { padding-bottom: 20vw; }
  body:has(.tabbar-mo) .qbar { display: none; }
}

/* 피부클리닉 안내 페이지 */
.sk-cta { text-align: center; margin-top: var(--gap-sub); }
.sk-cta a { display: inline-block; background: var(--interactive-default); color: var(--text-inverse); padding: 16px 40px; font-size: var(--font-size-17); font-weight: var(--font-weight-medium); border-radius: var(--shape-button); transition: background .2s; }
.sk-cta a:hover { background: var(--interactive-hover); }

.gnb > ul > li > a[href="/skin-clinic"] { font-size: var(--font-size-17); font-weight: var(--font-weight-regular); color: var(--interactive-accent); }
.gnb > ul > li > a[href="/skin-clinic"].is-active { text-decoration-color: var(--interactive-accent); }
.site-header:not(.scrolled) .gnb > ul > li > a[href="/skin-clinic"] { color: var(--interactive-active); }
.site-header:not(.scrolled) .gnb > ul > li > a[href="/skin-clinic"].is-active { color: var(--interactive-active); }

.sk-cta--light a { background: var(--color-white); color: var(--interactive-default); }
.sk-cta--light a:hover { background: var(--bg-surface); color: var(--interactive-default); }

.img-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:4/3; width:100%; background:var(--bg-surface); border:1px dashed var(--border-default); color:var(--text-secondary); font-size:var(--font-size-13); text-align:center; padding:var(--space-15); box-sizing:border-box; }
.img-ph small { opacity:.65; margin-top:var(--space-10); font-size:var(--font-size-12); word-break:break-all; }

.cause-item .img-ph { width: 210px; height: 210px; aspect-ratio: auto; margin: 0 auto var(--space-20); }

.step-img .img-ph { width: 190px; border-radius: var(--shape-image); }
@media (max-width:768px){ .step-img .img-ph { width: 150px; } }

.proc-steps.proc-seb + .proc-src { max-width: 736px; }   /* 흉터치료 캡션 우측끝=이미지 우측끝 정렬 */
@media (max-width:768px){ .proc-steps.proc-seb + .proc-src { max-width: 320px; } }

.qbar a.qbar-skin { width: 100px; height: 100px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--interactive-accent); color: var(--color-white); text-align: center; text-decoration: none; border-radius: 50%; margin-top: 4px; line-height: 1.4; }
.qbar a.qbar-skin:hover { background: #8f7049; }
.qbar-skin span { display: block; font-size: var(--font-size-12); }
.qbar-skin strong { display: block; font-size: var(--font-size-14); font-weight: 700; }