@charset "utf-8";

/* ============================================================
   ui.css — 공통 UI 패턴
   카탈로그 → analyze/manual/ui-guide.md  (클래스 추가 시 함께 기록)
   ============================================================ */

/* 공통 UI 전용 토큰 */
:root {
  --one-feat-mark: 72px; /* 마커 지름 */
  --one-feat-tit: 90px; /* 제목 고정폭 (PC) */
  --one-bnr-h: 260px; /* 서브 헤더 최소 높이 — 사용자 정의 > 서브 헤더 공통 옵션에서 덮는다 */
  --one-path-ico: 16px; /* 브래드크럼 홈 아이콘 */
  --one-pin-col: 38%; /* pin 리스트 — 제목 열 폭 */
  --one-pin-gap: calc(var(--one-gap-xl) * 2); /* pin 리스트 — 카드 간격 */
  --one-pin-h: 280px; /* pin 리스트 — 카드 최소 높이 */
  --one-lead-w: 1000px; /* 헤더 아래 설명 문단 폭 */
  --one-lead-color: #3e3e3e; /* 헤더 아래 설명 문단 기본 글자색 */
  --one-bnr-wide-h: 27.3%; /* 풀블리드 배너 비율 — 페이지에서 덮는다 */
  --one-hd-mark: 48px; /* 섹션 헤더 위 짧은 선 길이 */
  --one-tile-h: 272px; /* 타일 카드 최소 높이 */
  --one-tile-thumb: 72%; /* 타일 카드 이미지 밴드 높이 (모바일) */
  --one-slide-fade: 0.4s; /* 슬라이드 제목 페이드 시간 */
  --one-feat-num: 64px; /* 숫자형 마커 글자 크기 */
  --one-bnr-cont-h: 400px; /* 내용이 들어가는 풀블리드 배너 최소 높이 */
  --one-cta-h: 550px; /* CTA 배너 최소 높이 */
  --one-stky-col: 52%; /* 고정 타이틀 리스트 — 우측 카드 열 폭 */
  --one-stky-top: 100px; /* 고정 타이틀 리스트 — 붙는 위치 */
  --one-stky-icon: 60px; /* 고정 타이틀 리스트 — 카드 아이콘 */
  --one-shadow-card: 1px 2px 18px rgba(79, 101, 135, 0.28); /* 카드 그림자 */
  --one-stky-bg: rgba(0, 0, 0, 0.3); /* 배경 사진 위에 얹는 카드 패널 */
  --one-check-icon: var(--one-icon-r); /* 체크 리스트 — 체크 아이콘 */
  --one-rec-icon: 27px; /* 권유 리스트 — 체크 아이콘 */
  --one-rec-gap: calc(var(--one-gap-xl) * 2); /* 권유 리스트 — 항목 간격 (점선이 이 한가운데) */
  --one-step-col: 3; /* 단계 카드 — 열 수 */
  --one-step-icon: 129px; /* 단계 카드 — 픽토그램 (크롭 원본 크기) */
  --one-step-line: rgba(34, 60, 122, 0.5); /* 단계 카드 테두리 — --main-color 50% */
  --one-faq-w: var(--one-lead-w); /* 질문 리스트 폭 */
  --one-faq-open: 0.35s; /* 여닫히는 시간 */
  --one-faq-btn: 16px; /* 여닫기 화살표 크기 */
  --one-subj-col: 3; /* 진료과목 리스트 — 열 수 */
  --one-subj-w: var(--one-lead-w); /* 진료과목 리스트 — 전체 폭 */
  --one-subj-icon: 35%; /* 진료과목 리스트 — 원형 아이콘 (칸 대비) */
  --one-subj-row: var(--one-space-lg); /* 진료과목 리스트 — 줄 간격 */
  --one-map-w: 625px; /* 약도 — 크롭 원본 폭 */
  --one-map-pt: #375aa7; /* 약도 — 포인트색상 */
  --one-map-day: 4.1em; /* 진료시간 요일 칸 — 글자를 고르게 벌리는 폭 */
  --one-video-ratio: 16 / 9; /* 영상 밴드 비율 (PC) — 페이지에서 덮는다 */
  --one-video-ratio-mo: 16 / 9; /* 영상 밴드 비율 (모바일) */
}

/* ============================================================
   btn — 버튼   (색상 토큰 · Astra 무력화는 component.css)
   ============================================================ */

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--one-gap-sm);
  padding: 0.75em 2em;
  border: 1px solid transparent;
  border-radius: 50em;
  font-size: var(--one-body);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.btn-primary {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: var(--one-btn-on-fill);
}

.btn-primary:hover {
  background-color: var(--sub-color03);
  border-color: var(--sub-color03);
}

.btn-secondary {
  background-color: var(--sub-color02);
  border-color: var(--sub-color02);
  color: var(--main-color);
}

.btn-secondary:hover {
  background-color: var(--sub-color01);
  border-color: var(--sub-color01);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--main-color);
  color: var(--main-color);
}

.btn-outline:hover {
  background-color: var(--main-color);
  color: var(--one-btn-on-fill);
}

.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--main-color);
}

.btn-ghost:hover {
  background-color: var(--sub-color02);
}

/* ── 수식어 ── */
.btn-sm {
  padding: 0.5em 1.4em;
  font-size: var(--one-caption);
}
.btn-lg {
  padding: 0.95em 2.6em;
}

.btn-full {
  display: flex;
  width: 100%;
}

.btn-primary.is-disabled,
.btn-secondary.is-disabled,
.btn-outline.is-disabled,
.btn-ghost.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ── 버튼 그룹 ── */
.btn-group {
  gap: var(--one-gap-r);
  flex-wrap: wrap;
}

/* 아이콘 버튼 */

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--one-gap-sm);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-icon:hover {
  background-color: var(--sub-color02);
}

/* ============================================================
   bnr-sub — 서브 페이지 헤더 (페이지 메타로 출력)
   마크업 : template-parts/common/sub-hd.php · inc/sub-header.php
   ============================================================ */

.bnr-sub {
  position: relative;
  overflow: hidden;
}

/* 배경은 별도 레이어 — 섹션에 transform 이 걸리면 .con-inner 기준이 바뀐다 */
.bnr-sub .bnr-bg {
  position: absolute;
  inset: 0;
}

/* 모바일 이미지는 639px 이하에서만. 미지정이면 PHP 가 PC 이미지를 채운다 */
.bnr-bg-mo {
  display: none;
}

.bnr-sub .con-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--one-gap-sm);
  min-height: var(--one-bnr-h);
  padding-top: var(--one-space-s);
  padding-bottom: var(--one-space-s);
}

.bnr-title {
  color: var(--one-txt-color);
}

.bnr-cap {
  color: var(--gray-color01);
  letter-spacing: 0.2em;
}

.bnr-desc {
  color: var(--gray-color02);
}

/* ============================================================
   path — 브래드크럼 (서브 헤더 배너 안)
   마크업 : template-parts/common/bcrm.php · inc/breadcrumb.php
   ============================================================ */

.path-lst {
  display: flex;
  flex-wrap: wrap; /* 2뎁스라도 모바일에서 넘칠 수 있다 — 줄바꿈으로 받는다 */
  justify-content: center;
  align-items: center;
  gap: var(--one-gap-xs) var(--one-gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--one-caption);
  color: var(--gray-color01);
}

.path-item {
  display: flex;
  align-items: center;
  gap: var(--one-gap-sm);
}

/* 구분자 — 테두리 두 변을 돌려 만든다 (이미지 없음) */
.path-item + .path-item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

.path-item a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.path-item a:hover {
  color: var(--main-color);
}

.path-item.is-active {
  color: var(--one-txt-color);
}

.path-home {
  display: flex;
  align-items: center;
}

.path-ico {
  display: block;
  width: var(--one-path-ico);
  height: auto;
}

/* ============================================================
   bnr-wide — 화면 폭 전체를 채우는 배너
   비율·이미지는 페이지에서 --one-bnr-wide-h 와 background-image 로 지정
   ============================================================ */

/* .section 의 좌우 safe 패딩을 상쇄해 화면 끝까지 채운다 */
.bnr-wide {
  margin-left: calc(var(--one-space-safe) * -1);
  margin-right: calc(var(--one-space-safe) * -1);
  padding-bottom: var(--one-bnr-wide-h);
}

/* 안에 내용이 들어가는 형 — 비율 대신 min-height.
   상쇄한 safe 패딩을 돌려줘야 안쪽 .con-inner 가 화면 끝에 닿지 않는다 */
.bnr-wide-cont {
  display: flex;
  align-items: center;
  min-height: var(--one-bnr-cont-h);
  padding: 0 var(--one-space-safe);
}

/* ============================================================
   cta-box — 배경 이미지 위에 문구 + 링크가 놓이는 배너
   박스 전체가 <a> 다. .cta-lnk 는 링크가 아니라 화살표 표시용
   ============================================================ */

.cta-box {
  display: flex;
  flex-direction: column;
  min-height: var(--one-cta-h);
  padding: var(--one-space-r) var(--one-space-lg);
  border-radius: 1em;
  overflow: hidden;
  text-decoration: none;
}

.cta-txt {
  padding-top: var(--one-gap-xl);
}

/* 문구와 벌려 배너 하단에 붙인다 */
.cta-lnk {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--one-gap-sm);
  margin-top: auto;
  padding-top: var(--one-space-s);
  transition: opacity 0.2s ease;
}

/* 화살표는 이미지 없이 테두리 두 변을 돌려 만든다 */
.cta-lnk::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: 1.2%;
}
/* 색은 건드리지 않는다 — 마크업의 색상 유틸리티가 그대로 간다 */
.cta-box:hover .cta-lnk {
  opacity: 0.7;
}

.cta-box:hover .cta-lnk::after {
  transform: translateX(0.3em) rotate(45deg);
}

/* ============================================================
   sec-hd-line — 구분선 있는 섹션 헤더  (.sec-hd 와 함께)
   ============================================================ */

.sec-hd-line {
  border-bottom: 1px solid var(--main-color);
  margin-bottom: var(--one-gap-xl);
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-r);
  padding-bottom: var(--one-gap-xl);
}

.sec-hd-line .cp-txt {
  margin-bottom: 0;
}

/* ============================================================
   sec-hd-mark — 제목 위 짧은 선이 있는 섹션 헤더  (.sec-hd 와 함께)
   ============================================================ */

/* .sec-hd 가 flex column 이라 선도 항목 하나로 들어간다 */
.sec-hd-mark::before {
  content: '';
  align-self: flex-start;
  width: var(--one-hd-mark);
  height: 2px;
  margin-bottom: var(--one-gap-lg);
  background-color: var(--main-color);
}

.txt-ct.sec-hd-mark::before {
  align-self: center;
}

/* 헤더 아래 좁은 폭 설명 문단 — 본문보다 먼저 오는 리드 */
.sec-lead {
  max-width: var(--one-lead-w);
  margin: 0 auto;
  color: var(--one-lead-color);
}

/* 어두운 배경 섹션 — 부모 색 유틸을 따른다 (예: impl-intro01) */
.w-color .sec-lead,
.sec-lead.w-color {
  color: inherit;
}

/* ============================================================
   feat — 항목 리스트 (제목 | 설명 | 우측 마커)
   ============================================================ */

.feat-lst {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-lg);
}

.feat-item {
  display: flex;
  align-items: center;
  gap: var(--one-gap-lg);
  padding: var(--one-gap-lg) var(--one-space-s);
  border-radius: 0.5em;
  background-color: var(--gray-color03);
}

.feat-tit {
  flex: 0 0 auto;
  width: var(--one-feat-tit);
}

.feat-body {
  flex: 1 1 auto;
  min-width: 0;
}

.feat-desc {
  color: var(--gray-color02);
}

/* 우측 마커 */
.feat-mark {
  flex: 0 0 auto;
  width: var(--one-feat-mark);
  aspect-ratio: 1 / 1;
}

/* 숫자형 — 아이콘 자리에 큰 숫자가 옅게 깔린다 */
.feat-mark-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  aspect-ratio: auto;
  background-image: none;
  font-size: var(--one-feat-num);
  font-weight: 500;
  line-height: 1;
  color: var(--gray-color01);
  opacity: 0.25;
}

/* ============================================================
   card-grid — 2열 카드 그리드
   ============================================================ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--one-gap-xl);
}

.card-item {
  display: flex;
  align-items: flex-end;
  min-height: 200px;
  padding: var(--one-gap-lg);
  border-radius: 0.5em;
}

.card-body {
  width: 100%;
  min-width: 0;
}

.card-label {
  color: var(--gray-color01);
  letter-spacing: 0.05em;
  padding-bottom: var(--one-space-s);
  font-weight: bold;
}

.card-title {
  color: var(--main-color);
  padding-bottom: var(--one-gap-sm);
}

.card-desc {
  color: var(--gray-color02);
}

/* ============================================================
   pin-lst — 고정 제목 + 카드 순차 등장 리스트
   .anim-pin-item 과 .mo-fade-up 은 같은 요소 금지 (1024px 이하 opacity 충돌)
   ============================================================ */

.pin-wrap {
  display: grid;
  grid-template-columns: var(--one-pin-col) 1fr;
  gap: var(--one-gap-xl);
  align-items: start;
}

/* 제목이 카드 첫 장과 윗선을 맞춘다 */
.pin-hd {
  padding-bottom: 0;
}

/* animation.css 가 PC 에서 .anim-pin-scroll 에 padding-top:90px 를 준다 */
.pin-lst {
  display: flex;
  flex-direction: column;
  gap: var(--one-pin-gap);
  padding-top: 0;
}

/* 자리만 잡는다 — 보이는 카드는 .pin-card */
.pin-item {
  display: flex;
}

/* 배경은 카드마다 달라 마크업에서 인라인으로 넣는다 */
.pin-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: var(--one-pin-h);
  padding: var(--one-gap-xl);
  border-radius: 0.5em;
  overflow: hidden;
}

.pin-label {
  color: var(--gray-color01);
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* 라벨과 벌려 카드 하단에 붙인다 */
.pin-tit {
  margin-top: auto;
  padding-bottom: var(--one-gap-sm);
  color: var(--main-color);
}

.pin-desc {
  color: var(--gray-color02);
}

/* ============================================================
   stky-lst — 좌측 고정 타이틀 + 우측 카드 그리드 (배경 사진 위)
   CSS position:sticky 다. GSAP 을 쓰는 .anim-sticky-* 와는 무관하다
   ============================================================ */

/* align-items 는 start 라야 sticky 가 움직인다 —
   stretch 면 타이틀 열이 그리드 높이만큼 늘어나 붙을 자리가 없다 */
.stky-lst {
  display: grid;
  grid-template-columns: 1fr var(--one-stky-col);
  gap: var(--one-gap-xl);
  align-items: start;
}

/* top 은 PC 에서 스크롤 시 fixed 로 올라오는 .one-hd-row2 를 피한 값 */
.stky-hd {
  position: sticky;
  top: var(--one-stky-top);
}

/* auto-rows 1fr — 글 길이가 달라도 카드 높이가 시안처럼 격자로 맞는다 */
.stky-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--one-gap-lg);
}

.stky-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--one-gap-r);
  padding: var(--one-space-s) var(--one-gap-r);
  border-radius: 1em;
  background-color: var(--one-stky-bg);
  text-align: center;
}

/* common.css 의 `.section img { width:100% }`(0,1,1) 를 이겨야 해서 2단 선택자.
   max-width 는 크롭 원본 크기 — 60px 를 넘겨 늘리지 않는다 */
.stky-item .stky-icon {
  width: var(--one-stky-icon);
  max-width: 60px;
  height: auto;
  margin-bottom: var(--one-gap-lg);
}

/* ============================================================
   tile-lst — 이미지가 곁들여진 2열 카드 리스트
   PC 는 이미지가 카드 전체를 덮고, 모바일은 카드 위 밴드로 내려간다
   ============================================================ */

.tile-lst {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--one-gap-xl);
}

.tile-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--one-tile-h);
  border-radius: 0.5em;
  overflow: hidden;
  background-color: var(--white-color);
}

/* 배경은 카드마다 달라 마크업이 --one-tile-bg / --one-tile-bg-mo 로 넘긴다 */
.tile-thumb {
  position: absolute;
  inset: 0;
  background-image: var(--one-tile-bg);
}

/* 제목 위 · 설명 아래로 벌린다 */
.tile-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--one-gap-r);
  padding: var(--one-gap-xl);
}

.tile-tit {
  color: var(--main-color);
}

.tile-desc {
  color: var(--gray-color02);
}

/* ============================================================
   slide-wrap — 이미지 · 콘텐츠 분리 슬라이드 (Swiper)
   동작 : assets/js/ui.js — 이미지 Swiper 가 콘텐츠 Swiper 를 끌고 간다
   ============================================================ */

.slide-wrap {
  display: flex;
  flex-direction: column;
}

/* 제목도 같이 넘어가는 경우에만 쓴다 — 아래 여백은 안쪽 .sec-hd 가 갖는다.
   Swiper 가 아니라 .is-active 토글 + 페이드. 겹쳐 쌓아 높이는 가장 긴 장에 맞춘다 */
.slide-hd {
  display: grid;
  width: 100%;
}

.slide-hd-item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--one-slide-fade) ease,
    visibility 0s linear var(--one-slide-fade);
}

.slide-hd-item.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--one-slide-fade) ease,
    visibility 0s;
}

/* 이미지 | 콘텐츠 한 줄 */
.slide-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--one-gap-xl);
  align-items: center;
}

.slide-vis {
  width: 100%;
  min-width: 0;
  border-radius: 1em;
}

/* 이미지 규격은 슬라이드마다 같다 — 높이는 비율대로 따라온다 */
.slide-vis img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1em;
}

.slide-body {
  display: flex;
  flex-direction: column;
  gap: var(--one-space-s);
  min-width: 0;
}

.slide-cont {
  width: 100%;
}

/* align-self 가 없으면 stretch 로 열 전체를 차지한다 */
.slide-nav {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--one-gap-lg);
}

.slide-btn {
  position: relative;
  width: var(--one-icon-xl);
  height: var(--one-icon-xl);
  cursor: pointer;
  transform: scale(1.3);
}

/* 화살표는 이미지 없이 테두리 두 변을 돌려 만든다 */
.slide-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--main-color);
  border-right: 2px solid var(--main-color);
}

.slide-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.slide-next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

.slide-btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* 슬라이드가 1장이면 Swiper 가 lock 클래스를 붙인다 */
.slide-btn.swiper-button-lock,
.slide-pg.swiper-pagination-lock {
  display: none;
}

/* 페이징은 Swiper 기본 점 대신 숫자 — renderBullet 은 ui.js */
.slide-pg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--one-gap-lg);
}

.slide-pg .swiper-pagination-bullet {
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: none;
  opacity: 1;
  font-size: var(--one-body);
  line-height: 1;
  color: var(--gray-color01);
  cursor: pointer;
}

.slide-pg .swiper-pagination-bullet-active {
  color: var(--one-txt-color);
  font-weight: 500;
}

/* 높이는 CSS 로 맞춘다 — 모든 장이 가장 긴 장에 맞춰 늘어난다.
   JS(autoHeight)로 높이를 쓰면 ScrollTrigger 재계산과 맞물려 문서가 계속 길어진다 */
.slide-cont .swiper-wrapper {
  align-items: stretch;
}

.slide-cont .swiper-slide {
  height: auto;
}

.slide-desc {
  padding-top: var(--one-gap-r);
  color: var(--gray-color02);
}

.slide-desc + .check-lst {
  padding-top: var(--one-gap-lg);
}

/* ============================================================
   slide-split — 이미지 좌 / 텍스트 우, 페이징은 텍스트 아래  (.slide-wrap 과 함께)
   .slide-row 를 두지 않고 네 조각을 그리드 영역에 직접 앉힌다.
   버튼 · 페이징 · 페이드 동작은 slide-wrap 것을 그대로 쓴다
   ============================================================ */

.slide-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    'vis hd'
    'vis cont'
    'vis nav';
  column-gap: var(--one-gap-xl);
  row-gap: var(--one-gap-sm);
}

.slide-split .slide-vis {
  grid-area: vis;
  align-self: center;
}

.slide-split .slide-hd {
  grid-area: hd;
}

.slide-split .slide-cont {
  grid-area: cont;
}

/* 마지막 행이 1fr 이라 페이징이 이미지 아랫선까지 내려간다.
   justify-self 가 없으면 열 전체로 늘어난다 — 좌측 정렬은 이쪽이 잡는다 */
.slide-split .slide-nav {
  grid-area: nav;
  align-self: end;
  justify-self: start;
}

.slide-split .slide-hd-item {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-sm);
}

.slide-split .slide-tit {
  color: var(--main-color);
}

/* 제목과의 간격은 그리드 row-gap 이 잡는다 */
.slide-split .slide-desc {
  padding-top: 0;
}

/* ============================================================
   check-lst — 체크 아이콘 리스트
   ============================================================ */

/* margin-left 는 Astra 의 `li>ul{margin-left:1.5em}` 해제 — <li> 안에 들어갈 때 밀린다 */
.check-lst {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-sm);
  margin-left: 0;
}

/* flex 가 아니라 내어쓰기 — 글이 길어져도 아이콘 옆에서 줄글로 이어진다.
   flex 로 두면 텍스트 덩어리가 통째로 다음 줄로 밀린다 */
.check-item {
  position: relative;
  padding-left: calc(var(--one-check-icon) + var(--one-gap-sm));
  font-weight: 500;
}

/* common.css 의 .section img { width:100% } 를 이겨야 해서 2단 선택자.
   top 은 첫 줄 가운데 — 글자 크기나 아이콘 크기가 바뀌어도 따라온다.
   뒤 0.05em 은 눈으로 맞춘 보정 — 계산값 그대로면 글자보다 살짝 높다 */
.check-item .check-icon {
  position: absolute;
  top: calc((1em * var(--one-lh-r) - var(--one-check-icon)) / 2 + 0.05em);
  left: 0;
  width: var(--one-check-icon);
  height: auto;
}

/* 항목 아래 강조 줄 — 들여쓰기는 .check-item 의 padding 이 처리한다 */
.check-sub {
  display: block;
}

/* ── 수식어 — 2열 ── */
.check-col2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--one-gap-r);
  row-gap: var(--one-gap-r);
}

/* ============================================================
   rec-lst — 좌측 타이틀 + 우측 체크 리스트  (.check-lst 와 별개)
   글자가 크고 항목 사이가 점선으로 끊긴다. 좌측 타이틀은 .sec-hd 를 그대로 쓴다
   ============================================================ */

.rec-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--one-gap-xl);
  align-items: start;
}

/* margin-left 는 Astra 의 `li>ul{margin-left:1.5em}` 해제 */
.rec-lst {
  display: flex;
  flex-direction: column;
  gap: var(--one-rec-gap);
  margin-left: 0;
}

/* 내어쓰기 — .check-item 과 같은 이유로 flex 가 아니다.
   margin-left 는 점선을 항목보다 왼쪽으로 내보내기 위한 것 (PC 만) */
.rec-item {
  position: relative;
  margin-left: var(--one-gap-xl);
  padding-left: calc(var(--one-rec-icon) + var(--one-gap-r));
}

/* 마크업이 붙이는 p-tit 은 500 이다 — 이 리스트에서만 400 으로 되돌린다.
   common.css 의 `.txt-wrap .p-tit`(0,2,0)를 이겨야 해서 2단 선택자 */
.rec-lst .rec-item {
  font-weight: 400;
}

/* common.css 의 `.section img { width:100% }`(0,1,1) 를 이겨야 해서 2단 선택자.
   top 은 첫 줄 가운데 — 글자 크기나 아이콘 크기가 바뀌어도 따라온다 */
.rec-item .rec-icon {
  position: absolute;
  top: calc((1em * var(--one-lh-r) - var(--one-rec-icon)) / 2);
  left: 0;
  width: var(--one-rec-icon);
  height: auto;
}

/* 항목 사이 점선 — gap 한가운데 띄운다.
   padding 으로 벌리면 절대배치한 .rec-icon 이 같이 밀려 글자와 어긋난다.
   색은 글자색을 따라가므로 어두운 배경에서는 흰 점선이 된다 */
.rec-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: calc(var(--one-rec-gap) / -2);
  left: calc(var(--one-gap-xl) * -1);
  border-bottom: 1px dashed currentColor;
  opacity: 0.45;
}

/* ============================================================
   step-lst — 픽토그램 + 제목 + 설명 테두리 카드 리스트
   열 수는 --one-step-col 로 바꾼다. 배경 없이 테두리만 있는 형
   ============================================================ */

.step-lst {
  display: grid;
  grid-template-columns: repeat(var(--one-step-col), 1fr);
  gap: var(--one-gap-xl);
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--one-gap-lg);
  border: 1px solid var(--one-step-line);
  text-align: center;
}

/* common.css 의 `.section img { width:100% }`(0,1,1) 를 이겨야 해서 2단 선택자.
   max-width 는 카드가 좁아졌을 때 픽토그램이 넘치지 않게 하는 안전선 */
.step-item .step-img {
  width: var(--one-step-icon);
  max-width: 100%;
  height: auto;
}

.step-tit {
  padding-top: var(--one-gap-lg);
}

.step-desc {
  padding-top: var(--one-gap-r);
}

/* ============================================================
   map-info — 약도 + 진료시간·문의전화 한 벌
   기본은 지도가 위 / 정보가 아래. .map-side 를 더하면 좌 정보 / 우 지도
   ============================================================ */

.map-info {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-xl);
  max-width: var(--one-map-w);
  margin: 0 auto;
}

.map-vis img {
  display: block;
  width: 100%;
  height: auto;
}

/* 좌우 끝에 붙인다 — 가운데 남는 폭이 그대로 두 열 사이 간격이 된다 */
.map-body {
  display: flex;
  justify-content: space-between;
  gap: var(--one-gap-xl);
}
.map-pt {
    color: var(--one-map-pt);
    letter-spacing: 0.06em;
}
/* ── 수식어 — 두 열을 왼쪽에 붙인다 ──
   기본은 space-between 이라 열이 좌우 끝으로 벌어진다.
   약도가 좁아 정보 열이 남을 때 쓴다 */
.map-start {
  justify-content: flex-start;
}

.map-col {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-r);
}

/* 줄 간격은 line-height 가 잡는다 — gap 을 더하면 시간표가 성기게 벌어진다 */
.map-time {
  display: flex;
  flex-direction: column;
}

.map-row {
  display: flex;
  gap: var(--one-gap-sm);
}

/* 글자를 하나씩 span 으로 싸고 고정 폭 안에서 고르게 벌린다.
   요일 수가 2개든 4개든 시간 열의 왼쪽선이 맞는다 */
.map-day {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  width: var(--one-map-day);
}

.map-hour {
  flex: 1 1 auto;
  min-width: 0;
  letter-spacing: 0.1em;
}

/* 번호가 중간에서 끊기면 읽기 어렵다 */
.map-tel {
  white-space: nowrap;
}

/* margin-left 는 Astra 의 `li>ul{margin-left:1.5em}` 해제 */
.map-note {
  display: flex;
  flex-direction: column;
  margin-left: 0;
}

/* ── 수식어 — 좌 정보 / 우 지도 ──
   지도가 마크업에서 먼저라 row-reverse 로 오른쪽에 보낸다 */
.map-side {
  flex-direction: row-reverse;
  align-items: center;
  max-width: none;
}

.map-side .map-vis {
  flex: 0 0 var(--one-map-w);
  max-width: 50%;
}

.map-side .map-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* 좌측 열에 제목까지 함께 넣을 때 감싸는 래퍼.
   .map-body 만 넣을 거면 없어도 된다 */
.map-txt {
  flex: 1 1 auto;
  min-width: 0;
}

/* ============================================================
   subj-lst — 원형 아이콘 + 제목 + 설명 리스트 (테두리 없음)
   테두리 카드형은 .step-lst — 이쪽은 배경 없이 열린 형이다
   ============================================================ */

.subj-lst {
  display: grid;
  grid-template-columns: repeat(var(--one-subj-col), 1fr);
  column-gap: var(--one-gap-xl);
  row-gap: var(--one-subj-row);
  max-width: var(--one-subj-w);
  margin: 0 auto;
  padding-top: var(--one-gap-r);
}

.subj-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--one-gap-r);
  text-align: center;
}

/* common.css 의 `.section img { width:100% }`(0,1,1) 를 이겨야 해서 2단 선택자.
   칸 대비 % 라 열 수가 바뀌어도 비율이 유지된다 — max-width 는 크롭 원본 크기 */
.subj-item .subj-img {
  width: var(--one-subj-icon);
  max-width: 111px;
  height: auto;
}

/* ============================================================
   faq-lst — 여닫는 질문·답변 리스트
   여닫기는 CSS grid-template-rows 0fr→1fr — JS(ui.js)는 .is-open 토글만 한다
   ============================================================ */

.faq-lst {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-r);
  max-width: var(--one-faq-w);
  margin: 0 auto;
}

.faq-item {
  border-radius: 0.5em;
  background-color: var(--white-color);
  transition: background-color var(--one-faq-open) ease;
}

.faq-item.is-open {
  background-color: var(--main-color);
  color: var(--white-color);
}

/* 질문 줄 전체가 버튼이다 — 화살표만 누르게 하지 않는다.
   font·letter-spacing 은 브라우저가 button 에서 끊어 다시 이어준다 */
.faq-q {
  display: flex;
  align-items: center;
  gap: var(--one-gap-lg);
  width: 100%;
  padding: var(--one-gap-xl);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

/* component.css 의 `button:hover, button:focus { color }`(0,1,1)가
   위 `color: inherit`(0,1,0)을 이긴다 — 누른 뒤 포커스가 남으면 글자색이 되돌아간다 */
.faq-q:hover,
.faq-q:focus,
.faq-q:active {
  color: inherit;
}

.faq-num {
  flex: 0 0 auto;
  color: var(--main-color);
  font-weight: 700;
  font-size: var(--one-hd3);
}

/* 열리면 배경이 main-color 로 바뀜다 — 번호도 글자색을 따른다 */
.faq-item.is-open .faq-num {
  color: inherit;
}

.faq-tit {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--one-p-tit);
}

/* 여닫기 표시 — 이미지 없이 테두리 두 변을 돌려 만든다.
   currentColor 라 열린 카드에서는 저절로 흰색이 된다 */
.faq-btn {
  position: relative;
  flex: 0 0 auto;
  width: var(--one-icon-xl);
  height: var(--one-icon-xl);
}

.faq-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--one-faq-btn);
  height: var(--one-faq-btn);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -75%) rotate(45deg);
  transition: transform var(--one-faq-open) ease;
}

.faq-item.is-open .faq-btn::before {
  transform: translate(-50%, -25%) rotate(-135deg);
}

/* 높이를 JS 로 재지 않는다 — 0fr→1fr 이라 글이 길어져도 그대로 동작한다 */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--one-faq-open) ease;
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

/* overflow 가 없으면 닫힌 상태에서 글이 샐져나온다 —
   그리드 항목의 최소 높이를 0 으로 만드는 것도 이 줄이다 */
.faq-txt {
  overflow: hidden;
}

/* 여백은 안쪽 문단이 갖는다 — .faq-txt 에 주면 닫혀도 그만큼 남는다 */
.faq-txt > * {
  padding: 0 var(--one-gap-xl) var(--one-gap-xl);
}

/* ============================================================
   pic-lst — 이미지가 위, 본문이 아래인 2열 카드
   ============================================================ */

.pic-lst {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--one-gap-lg);
}

.pic-item {
  display: flex;
  flex-direction: column;
  padding: var(--one-gap-xl);
  border-radius: 1em;
  background-color: var(--white-color);
  box-shadow: var(--one-shadow-card);
}

.pic-img {
  position: relative;
  border-radius: 0.5em;
  overflow: hidden;
}

.pic-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* 이미지 위에 얹는 라벨.
   .cp-txt 를 함께 쓰므로 굵기는 2단 선택자라야 common.css 의 400 을 이긴다 */
.pic-label {
  position: absolute;
  top: var(--one-gap-r);
  left: var(--one-gap-r);
  color: var(--white-color);
  letter-spacing: 0.05em;
}

.txt-wrap .pic-label {
  font-weight: 700;
}

.pic-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--one-gap-r);
  padding-top: var(--one-gap-lg);
}

.pic-tit {
  color: var(--main-color);
}

.pic-desc {
  color: var(--gray-color02);
}

.pic-desc + .check-lst {
  padding-top: var(--one-gap-r);
}


/* ============================================================
   video-band — 영상 밴드
   비율은 --one-video-ratio 로 페이지에서 지정. 모바일 영상은 선택
   ============================================================ */

.video-band {
  width: 100%;
}

/* 비율을 고정하고 cover 로 채운다 — 원본 비율이 달라도 시안 밴드가 유지된다 */
.video-item {
  display: block;
  width: 100%;
  aspect-ratio: var(--one-video-ratio);
  object-fit: cover;
}

/* 모바일 전용 영상은 기본으로 숨긴다 — 마크업에 가시성 클래스를 붙이지 않는다 */
.video-mo {
  display: none;
}


/* ============================================================
   stage — 스크롤 동안 붙어 있는 무대 + 본문 교차
   고정은 CSS sticky, 교차 페이드는 ui.js
   ============================================================ */

/* 트랙 — 이 구간을 지나는 동안 안쪽 .stage-body 가 제자리에 붙는다.
   overflow 를 주면 스크롤 컨테이너가 되어 sticky 가 죽는다 */
.stage-track {
  --one-stage-hd: 0px; /* 고정 헤더 높이 — ui.js 가 채운다 */
  --one-stage-len: 3.6; /* 트랙 높이 배수 — ui.js 가 문단 수로 덮어쓴다 (폴백값) */
  position: relative;
  margin-left: calc(var(--one-space-safe) * -1);
  margin-right: calc(var(--one-space-safe) * -1);
  height: calc((100vh - var(--one-stage-hd)) * var(--one-stage-len));
  height: calc((100svh - var(--one-stage-hd)) * var(--one-stage-len));
}

/* GSAP pin(position:fixed)은 모바일에서 해제가 한두 프레임 늦어 다음 섹션과 겹쳐 보인다.
   sticky 는 그 지연이 없다. 상쇄한 safe 패딩은 여기서 돌려준다 */
.stage-body {
  position: sticky;
  top: var(--one-stage-hd);
  height: calc(100vh - var(--one-stage-hd));
  height: calc(100svh - var(--one-stage-hd));
  padding: 0 var(--one-space-safe);
  overflow: hidden;
}

/* 배경은 별도 레이어 — PC · 모바일 이미지를 갈아끼우기 위해 무대와 분리한다 */
.stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* sticky 가 쌓임 맥락을 만들어 두 값끼리만 겨룬다.
   빼면 절대배치한 .stage-bg 가 흐름 안의 글 위에 그려진다 */
.stage-body > .con-inner {
  position: relative;
  z-index: 1;
}

/* 한 칸에 겹쳐 쌓아 높이를 가장 긴 문단에 맞춘다 */
.stage-steps {
  display: grid;
}

/* 노출은 전적으로 ui.js 가 맡는다 — animation.css 의 .anim-fade-up 과 같은 전제 */
.stage-item {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-lg);
  visibility: hidden;
  opacity: 0;
}

.stage-sign {
  padding-top: var(--one-gap-lg);
}


/* ============================================================
   반응형 — 태블릿 (max-width: 1024px)
   ============================================================ */

@media all and (max-width: 1024px) {
  .feat-item {
    padding: var(--one-gap-lg) var(--one-gap-xl);
  }

  :root {
    --one-feat-mark: 56px;
    --one-bnr-h: 180px;
    --one-pin-h: 240px;
    --one-tile-h: 240px;
    --one-feat-num: 52px;
    --one-bnr-cont-h: 340px;
    --one-cta-h: 340px;
  }

  .cta-box {
    padding: var(--one-space-r) var(--one-space-s);
  }

  /* pin 은 PC 비터치 전용 — 여기서는 일반 흐름으로 쌓인다 */
  .pin-wrap {
    grid-template-columns: 1fr;
    gap: var(--one-gap-xl);
  }

  /* 타이틀이 위로 올라오면 붙을 대상이 없다 — sticky 해제 */
  .stky-lst {
    grid-template-columns: 1fr;
    gap: var(--one-gap-r);
  }

  .stky-hd {
    position: static;
  }

  .pin-hd {
    text-align: center;
  }

  .slide-row {
    grid-template-columns: 1fr;
    gap: var(--one-space-s);
  }

  /* 좌우 배치는 PC 전용 — 지도가 좁아지면 약도를 읽을 수 없다 */
  .map-side {
    flex-direction: column;
    align-items: stretch;
  }

  .map-side .map-vis {
    flex: 0 0 auto;
    max-width: none;
  }

  /* 타이틀이 위로 올라온다 — 아래 간격은 .sec-hd 의 padding-bottom.
     점선을 왼쪽으로 내보내던 들여쓰기도 여기서 해제한다 */
  .rec-wrap {
    grid-template-columns: 1fr;
  }

  .rec-item {
    margin-left: 0;
  }

  .rec-item:not(:last-child)::after {
    left: 0;
  }

  .pic-item {
    padding: var(--one-gap-lg);
  }
}

/* ============================================================
   반응형 — 모바일 (max-width: 639px)
   ============================================================ */

@media all and (max-width: 639px) {
  :root {
    --one-bnr-h: 36vw;
  }

  /* 태블릿까지는 PC 영상을 쓴다 — .view-pc(1024 기준)로는 맞지 않아 여기서 직접 잡는다 */
  .video-band:has(.video-mo) .video-pc {
    display: none;
  }

  .video-mo {
    display: block;
    aspect-ratio: var(--one-video-ratio-mo);
  }

  /* 배경 교체 — PC 레이어를 내리고 모바일 레이어를 올린다 */
  .bnr-bg-pc {
    display: none;
  }
  .bnr-bg-mo {
    display: block;
  }

  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-ghost {
    padding: 0.8em 1.6em;
  }

  .btn-group {
    width: 100%;
  }

  .feat-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'tit  mark'
      'body mark';
    align-items: center;
    column-gap: var(--one-gap-r);
    row-gap: var(--one-gap-sm);
    padding: var(--one-gap-lg);
  }

  .feat-tit {
    grid-area: tit;
    width: auto;
  }
  .feat-body {
    grid-area: body;
  }
  .feat-mark {
    grid-area: mark;
  }

  /* 숫자형은 제목 줄에만 놓이고 설명이 아래를 다 쓴다 */
  .feat-item:has(.feat-mark-num) {
    grid-template-areas:
      'tit  mark'
      'body body';
  }

  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--one-gap-r);
  }

  .card-item {
    min-height: 160px;
    padding: var(--one-gap-lg);
  }

  .card-label {
    padding-bottom: var(--one-gap-r);
  }

  /* 아이콘도 타이포처럼 vw 로 — common.css 는 px 고정이라 여기서 덮는다.
     실측으로 잡은 l 을 기준점 삼아 PC 비율(16:20:24:32)을 그대로 옮긴 값 */
  :root {
    --one-icon-s: 3.4vw;
    --one-icon-r: 4.3vw;
    --one-icon-l: 5.1vw;
    --one-icon-xl: 6.8vw;

    --one-pin-h: 220px;
    --one-feat-num: 44px;
    --one-bnr-cont-h: 0px; /* 내용이 높이를 잡는다 */
    --one-cta-h: 0px;
    --one-stky-icon: 9vw;

    /* PC 의 아이콘:글자 비율(27:24)을 그대로 옮긴 값.
       간격은 --one-gap-xl 이 vw 로 줄면 항목이 붙어 보여 따로 잡는다 */
    --one-rec-icon: 5.6vw;
    --one-rec-gap: var(--one-space-lg);
  }

  .cta-box {
    padding: var(--one-space-s) var(--one-gap-lg);
  }

  .pin-card {
    padding: var(--one-gap-lg);
  }

  /* 카드는 시안대로 2열을 유지한다 — 여백만 줄인다 */
  .stky-grid {
    gap: var(--one-gap-r);
  }

  .stky-item {
    gap: var(--one-gap-sm);
    padding: var(--one-space-s) var(--one-gap-r);
  }

  .stky-item .stky-icon {
    margin-bottom: var(--one-gap-r);
  }

  .tile-lst {
    gap: var(--one-gap-r);
  }

  .tile-item {
    min-height: 0;
  }

  /* 모바일 크롭은 이미지가 위, 아래가 흰 여백인 카드 한 장이다.
     100% auto + 위 정렬이라 카드가 크롭보다 길어져도 흰 배경으로 이어진다 */
  .tile-thumb {
    background-image: var(--one-tile-bg-mo, var(--one-tile-bg));
    background-position: center top;
    background-size: 100% auto;
  }

  /* padding-top 이 이미지 밴드 자리를 비운다 */
  .tile-body {
    justify-content: flex-start;
    gap: var(--one-gap-r);
    padding: var(--one-tile-thumb) var(--one-gap-lg) var(--one-gap-lg);
  }

  .tile-sub-tit {
    display: block;
  }

  .slide-row {
    gap: var(--one-gap-lg);
  }

  /* 시안이 좌우 버튼·페이징 없이 다음 장을 살짝 보여주는 형태 */
  .slide-nav {
    display: none;
  }

  .slide-desc {
    padding-top: var(--one-gap-sm);
  }

  /* 시안은 제목이 이미지 위로 올라가고 전체가 가운데 정렬된다 */
  .slide-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      'hd'
      'vis'
      'cont'
      'nav';
    row-gap: var(--one-space-s);
    text-align: center;
  }

  /* 제목 위 짧은 선은 모바일 시안에만 있다 */
  .slide-split .slide-hd-item::before {
    content: '';
    width: var(--one-hd-mark);
    height: 2px;
    margin: 0 auto var(--one-gap-lg);
    background-color: var(--main-color);
  }

  .slide-split .slide-desc {
    padding-top: 0;
  }

  /* 위 .slide-nav 는 gbr03 시안 기준으로 숨긴다 — 이 타입은 시안에 페이징이 있다.
     모바일 시안만 가운데 정렬이다 */
  .slide-split .slide-nav {
    display: flex;
    align-self: auto;
    justify-self: center;
  }

  /* 카드는 1열, 안쪽 체크 리스트는 시안대로 2열 유지 */
  .pic-lst {
    grid-template-columns: 1fr;
    gap: var(--one-gap-r);
  }

  .check-col2 {
    column-gap: var(--one-gap-sm);
  }

  /* 정보가 위, 약도가 아래. reverse 라 마크업 순서는 그대로 두고 보이는 순서만 뒤집는다 */
  .map-info {
    flex-direction: column-reverse;
  }

  /* 카드가 좁아지면 픽토그램만 남고 글이 뭉개진다 — 1열로 편다 */
  :root {
    --one-step-col: 1;

    /* 진료과목은 시안대로 2열을 유지한다 — 아이콘이 % 라 저절로 줄어든다 */
    --one-subj-col: 2;
    --one-subj-row: var(--one-space-s);
  }

  .step-lst {
    gap: var(--one-gap-r);
  }
}