@charset "utf-8";

/* 공통 UI 컴포넌트 — 스타일만 모은다. 마크업은 섹션 파일에 직접 쓴다
   (반복은 섹션 안에서 배열 + foreach). 컴포넌트가 늘면 이 파일에 블록을 추가한다 */

/* ============================
   common.css 보정
   팀 공통 원본이라 그 파일을 고치지 않고 여기서 덮는다 — ui.css 가 뒤에 실려
   같은 선택자(0,1,0)로도 이긴다. 보정이 늘면 이 블록에 모은다
============================ */

@media all and (max-width: 639px) {
  /* 모바일에서 라벨↔제목이 과하게 벌어진다 — common.css 가 gap 을 --one-gap-xl(4.7vw)로
     키우는데, 라벨(.sec-hd .cp-txt)이 이미 margin-bottom: --one-gap-sm 을 갖고 있어
     둘이 겹친다. gap 을 지우고 라벨의 margin 만 남긴다 */
  .sec-hd {
    gap: 0;
  }
}


/* ============================
   카드
   <li class="card-item">
     <div class="card-thumb img-box"><img class="card-thumb-img"></div>
     <div class="card-body txt-wrap">
       <h3 class="card-title p-tit"> / <p class="card-desc ft-body"> / <p class="card-meta cp-txt gray-color">
     </div>
   </li>
============================ */

.card-wrap {
  display: flex;
  gap: var(--one-gap-lg);
}

.card-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 라운드는 기본 0 — 필요한 카드만 --card-thumb-radius 로 준다 */
.card-thumb {
  width: 100%;
  overflow: hidden;
}

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

.card-body {
  padding-top: var(--one-gap-r);
}

.card-desc {
  margin-top: var(--one-gap-sm);
}
.card-meta {
  margin-top: var(--one-gap-sm);
}

/* 변형 */
.card-item.card-hor {
  flex-direction: row;
  align-items: var(--card-hor-align, stretch);
}
.card-item.card-hor .card-body {
  padding: 0 0 0 var(--card-hor-gap, var(--one-gap-lg));
}

/* 카드가 가로 폭을 똑같이 나눈다 — 장수가 달라져도 폭을 다시 안 잡아도 된다.
   flex-basis 0 이라 글자 길이와 무관하게 같은 폭이 나온다 */
.card-wrap.card-eq > .card-item {
  flex: 1 1 0;
}

/* 여러 줄로 접히는 격자 — 열 수만 --card-cols 로 준다.
   .card-eq(한 줄 균등)와 달리 줄이 넘어가는 배치라 grid 로 간다 (gap 은 .card-wrap 이 이미 갖고 있다) */
.card-wrap.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--card-cols, 2), 1fr);
}


/* ── 가운데 정렬 카드 (.card-ct) ──
   사진 아래로 제목·설명이 가운데 정렬로 쌓인다. 여백은 --card-ct-* 로 조정하고,
   썸네일 라운드는 카드 종류를 가리지 않는 --card-thumb-radius 를 쓴다 */

.card-item.card-ct {
  text-align: center;
}

.card-item.card-ct .card-body {
  padding-top: var(--card-ct-pad, var(--one-gap-xl));
}

.card-item.card-ct .card-desc {
  margin-top: var(--card-ct-gap, var(--one-gap-r));
}

/* ── 선 카드 (.card-line) ──
   바탕 + 가는 테두리 + 안쪽 여백. 썸네일과 본문이 카드 안에 들어간다.
   테두리 색은 컬러칩의 보더값(--gray-color02)을 기본으로 쓴다 */

.card-item.card-line {
  padding: var(--card-line-pad, 32px);
  border: 1px solid var(--card-line-border, var(--gray-color02));
  border-radius: var(--card-line-radius, 40px);
  background-color: var(--card-line-bg, #fff);
}

.card-item.card-line .card-thumb-img {
  display: block;
  width: 100%;
  height: auto;
}


/* ── 오버레이 카드 (.card-over) ──
   사진 위에 글자를 얹는 형태. 번호는 위, 본문은 아래에 붙는다.

   <li class="card-item card-over">
     <img class="card-thumb-img" …>                     ← 배경. 흐름에 두어 카드 높이를 만든다
     <div class="card-body txt-wrap">
       <p class="card-num sub-ft">01</p>
       <div class="card-txt">                           ← 제목+설명 한 묶음
         <h3 class="card-title p-tit ft-b">…</h3>
         <p class="card-desc cp-txt">…</p>
       </div>
     </div>
   </li>

   글자가 사진 위에 바로 얹히므로 기본은 어두운 사진 + 흰 글자다 — 시안에 스크림(그라데이션)은 없다.
   밝은 사진 위에 어두운 글자를 얹는 카드는 --card-over-color / --card-over-num 만 바꾼다.
   여백·라운드는 변수로 빼 두었으니 페이지에서 바꿔 쓴다.

   ── 호버 ──
   쉴 때는 .card-txt 가 설명 높이만큼 내려가 있어 제목이 카드 바닥에 오고 설명은 카드 밖으로
   밀려 잘린다. 올리면 제자리로 돌아오며 설명이 같이 떠오른다.

   ⚠️ 이 접기는 **제목·설명을 .card-txt 로 묶은 카드에만** 걸린다 (assets/js/ui.js 가 판단).
   번호·제목·설명이 한 덩어리로 붙는 카드는 .card-txt 없이 쓰면 접히지 않는다.

   내려가는 거리(--card-over-shift)는 설명 줄 수에 따라 달라져 CSS 로는 못 구한다.
   assets/js/page/ 아래 JS 가 재서 넣어 주고, 넣은 뒤에 .is-fold 를 붙인다 —
   JS 가 없거나 실패하면 접히지 않아 설명이 그냥 보이는 상태로 남는다(내용이 사라지지 않는다). */

.card-item.card-over {
  position: relative;
  overflow: hidden;
}

.card-item.card-over .card-thumb-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 사진 위 전체를 덮는다. 번호에 margin-bottom:auto 를 줘서
   나머지(제목·설명)를 통째로 아래로 민다 — space-between 을 쓰면 3등분돼 제목이 가운데로 뜬다 */
/* --card-over-scrim 은 글자가 사진에 묻히는 카드만 쓴다 (기본 none) */
.card-item.card-over .card-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--card-over-pad-top, 84px) var(--card-over-pad, 54px) var(--card-over-pad, 54px);
  background: var(--card-over-scrim, none);
  color: var(--card-over-color, #fff);
}

/* 아래 세 규칙은 (0,3,0) 이라 common.css 의 .txt-wrap .{타입클래스}(0,2,0)를 이긴다 */
.card-item.card-over .card-num {
  margin-bottom: auto;
  color: var(--card-over-num, rgba(255, 255, 255, 0.9));
  line-height: 1;
}

/* 타입 스케일에 없는 크기라 변수로 둔다 (.p-tit 24 와 .hd3 32 사이).
   색은 .card-body 에서 물려받는다 — 밝은 사진용 카드도 --card-over-color 하나로 끝난다 */
.card-item.card-over .card-title {
  color: inherit;
  font-size: var(--card-over-title, 28px);
}

.card-item.card-over .card-desc {
  margin-top: var(--one-gap-lg);
  color: inherit;
  line-height: var(--card-over-desc-lh, 2);
}

/* 호버 — 마우스가 있는 환경에서만 접는다.
   터치 기기는 올릴 방법이 없으므로 처음부터 펼친 상태로 둔다 */
@media (hover: hover) {
  .card-item.card-over.is-fold .card-txt {
    transform: translateY(var(--card-over-shift, 0px));
  }

  .card-item.card-over.is-fold .card-desc {
    opacity: 0;
  }

  .card-item.card-over.is-fold:hover .card-txt {
    transform: translateY(0);
  }

  .card-item.card-over.is-fold:hover .card-desc {
    opacity: 1;
  }

  /* transition 은 접은 상태가 한 번 그려진 뒤에 켠다 (JS 가 .is-anim 을 붙인다) —
     처음부터 켜 두면 페이지를 열 때 접히는 과정이 그대로 보인다.
     opacity·transform 만 건드려 레이아웃 재계산이 없다 */
  .card-item.card-over.is-anim .card-txt,
  .card-item.card-over.is-anim .card-desc {
    transition: transform var(--card-over-time, 0.5s) cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity var(--card-over-time, 0.5s) ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-item.card-over .card-txt,
  .card-item.card-over .card-desc {
    transition: none;
  }
}

@media all and (max-width: 639px) {
  .card-wrap {
    flex-direction: column;
  }
  /* 세로로 쌓이면 flex 가 세로축이 된다 — 1 1 0 을 두면 높이가 균등 분배된다 */
  .card-wrap.card-eq > .card-item {
    flex: 0 0 auto;
  }
  /* 격자는 flex-direction 이 안 먹으므로 열 수로 내린다 */
  .card-wrap.card-grid {
    --card-cols: 1;
  }
  /* 세로로 쌓이면 align-items 가 가로축이 된다 — --card-hor-align: center 를 그대로 두면
     글 상자가 내용 폭으로 줄어 가운데로 몰려 카드마다 왼쪽 시작점이 어긋난다 (보험혜택, 2026-10-06) */
  .card-item.card-hor {
    flex-direction: column;
    align-items: stretch;
  }
  .card-item.card-hor .card-body {
    padding: var(--one-gap-r) 0 0;
  }
}

/* ============================
   라운드 버튼 — <a class="btn-round" href=""><span>텍스트</span></a>
   확장은 .btn-round.{고유클래스} 로 보더·타이포·배경을 덮어쓴다
============================ */

.btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--one-gap-sm);
  padding: var(--one-gap-r) var(--one-space-s);
  border: 1px solid var(--gray-color02);
  border-radius: 100px;
  background-color: transparent;
  color: inherit;
  font-size: var(--one-body);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.3s,
    background-color 0.3s,
    color 0.3s;
  -webkit-appearance: none;
  appearance: none;
}

/* hover 는 배경으로만 알린다 — 글자·보더 색은 쓰는 쪽이 정한다.
   컴포넌트가 색을 바꾸면 버튼마다 페이지에서 되돌려야 하고,
   그 색이 --main-color 라 브랜드 컬러가 확정될 때까지 계속 엉뚱하게 보인다 */
.btn-round:hover,
.btn-round:focus-visible {
  background-color: rgba(0, 0, 0, 0.04);
}

/* 채움형 — .btn-round.btn-fill. 보더 없이 배경으로 구분한다
   배경은 --btn-fill-bg / --btn-fill-bg-hover 로 덮는다 (컬러칩 확정 시 common.css 토큰으로 이전) */
.btn-round.btn-fill {
  --btn-fill-bg: #f7f7f7;
  --btn-fill-bg-hover: #efefef;
  border-color: transparent;
  background-color: var(--btn-fill-bg);
}

/* filter 대신 배경색으로 — filter 는 box-shadow 까지 같이 어둡게 만든다 */
.btn-round.btn-fill:hover,
.btn-round.btn-fill:focus-visible {
  border-color: transparent;
  background-color: var(--btn-fill-bg-hover);
}

/* ============================
   라운드 배지
   확장은 .badge-round.{고유클래스} / 상태는 .is-active
============================ */

/* 높이를 --badge-h 로 잡으면 글자 상자가 아니라 그 높이 안에서 가운데 정렬된다.
   text-box 는 글자 상자를 캡하이트~베이스라인으로 잘라 어센더·디센더 여백을 없앤다 —
   대문자만 든 배지가 위로 떠 보이는 것을 서체와 무관하게 막아 준다.
   미지원 브라우저는 이 줄만 무시하고 종전대로 행간 기준으로 가운데 정렬된다 */
.badge-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--badge-h, auto);
  padding: var(--badge-pad, var(--one-gap-sm) var(--one-gap-r));
  border: 1px solid var(--badge-border, var(--gray-color02));
  border-radius: var(--badge-radius, 100px);
  font-size: var(--badge-size, var(--one-caption));
  line-height: 1.2;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

/* 채운 배지 — 배경색 + 흰 글자. .badge-fill 은 스크롤로 채우는 연출이라 별개다 */
.badge-round.badge-solid {
  border-color: var(--badge-bg, var(--sub-color02));
  background-color: var(--badge-bg, var(--sub-color02));
  color: var(--white-color);
}

/* 좌 → 우 채움 — .is-active 는 스크롤 트리거가 붙인다 */
.badge-round.badge-fill {
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition:
    border-color 1s,
    color 1s;
  transition-delay: 1s;
}

.badge-round.badge-fill::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  background-color: var(--main-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 1s;
}

.badge-round.badge-fill.is-active {
  border-color: var(--main-color);
  color: var(--white-color);
}

.badge-round.badge-fill.is-active::before {
  transform: scaleX(1);
}


/* ============================
   화살표 버튼 — 원 + 화살표를 CSS 로 그린다
   확장은 .btn-arrow.{고유클래스}
============================ */

.btn-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gray-color02);
  border-radius: 50%;
  background-color: transparent;
  color: var(--gray-color01);
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  -webkit-appearance: none;
  appearance: none;
}

.btn-arrow::before,
.btn-arrow::after {
  content: '';
  position: absolute;
}

/* 화살대 */
.btn-arrow::before {
  width: 18px;
  height: 1px;
  background-color: currentColor;
}

/* 화살촉 */
.btn-arrow::after {
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateX(5px) rotate(45deg);
}

.btn-arrow.btn-prev::after { transform: translateX(-5px) rotate(-135deg); }

.btn-arrow:hover,
.btn-arrow:focus-visible {
  border-color: var(--main-color);
  background-color: var(--main-color);
  color: var(--white-color);
}

.btn-arrow:disabled,
.btn-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}

.btn-arrow:disabled:hover,
.btn-arrow.swiper-button-disabled:hover {
  border-color: var(--gray-color02);
  background-color: transparent;
  color: var(--gray-color01);
}


/* ============================
   외곽선 버튼 — 네이밍 가이드 .btn-outline
   확장은 .btn-outline.{고유클래스} / 보더는 currentColor 라 color 만 덮으면 된다
============================ */

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--one-gap-sm);
  padding: var(--one-gap-sm) var(--one-gap-lg);
  border: 1px solid currentColor;
  background-color: transparent;
  color: inherit;
  font-size: var(--one-body);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.4s,
    background-color 0.4s,
    color 0.4s;
  -webkit-appearance: none;
  appearance: none;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--main-color);
  background-color: var(--main-color);
  color: var(--white-color);
}

/* 버튼 안 화살표 — 화살대(본체) + 화살촉(::after) */
.btn-ico {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 13px;
  height: 1px;
  background-color: currentColor;
}

.btn-ico::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* 화살촉만 그리는 인라인 아이콘 — 화살대 없는 > 형태 */
.btn-chev {
  display: block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}


/* ============================
   영상 임베드 — 메인·진료철학에서 같이 쓴다

   <section class="sec-video">
     <div class="sec-video-box"><iframe …></iframe></div>
   </section>

   비율로 자리를 잡아 두므로 영상이 늦게 붙어도 문서 높이가 안 흔들린다
============================ */

.sec-video-box {
  position: relative;
  aspect-ratio: 1920 / 780;
  background-color: var(--sec-video-bg, #f7f7f7);
}

.sec-video-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ============================
   아이콘 — 글자 앞에 붙는 공통 아이콘

   <span class="ico-check" aria-hidden="true"></span>

   mask 라 색이 글자색(currentColor)을 따라간다. 크기는 기본 1em 이고
   글자보다 커야 하면 쓰는 쪽에서 width/height 를 덮는다.
   원본은 Font Awesome Free — assets/images/common/ 아래 SVG
============================ */

.ico-check,
.ico-angles,
.ico-circle-left,
.ico-circle-right {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: currentColor;
}

/* circle-check (regular) */
.ico-check {
  -webkit-mask: url('../images/common/check.svg') no-repeat center / contain;
  mask: url('../images/common/check.svg') no-repeat center / contain;
}

/* angles-right (solid) — 겹화살표 */
.ico-angles {
  -webkit-mask: url('../images/common/angles-right.svg') no-repeat center / contain;
  mask: url('../images/common/angles-right.svg') no-repeat center / contain;
}

/* circle-left / circle-right (regular) — 원 안 화살표. 슬라이더 이전·다음.

   ⚠️ FA 의 원 글리프는 640 박스 안에서 512 만 차지한다(둘레로 64씩 빈칸).
   contain 으로 두면 25px 요소에 원이 20px 로 들어가 링이 1.9px 까지 얇아져 뭉개진다.
   mask-size 125% 로 그 여백을 걷어내 **1em 이 곧 원 지름**이 되게 한다 —
   글리프가 박스 정중앙이라 center 와 같이 쓰면 잘리는 부분이 없다 */
.ico-circle-left {
  -webkit-mask: url('../images/common/circle-left.svg') no-repeat center / 125%;
  mask: url('../images/common/circle-left.svg') no-repeat center / 125%;
}

.ico-circle-right {
  -webkit-mask: url('../images/common/circle-right.svg') no-repeat center / 125%;
  mask: url('../images/common/circle-right.svg') no-repeat center / 125%;
}


/* ============================
   좌우 2단 섹션 — 왼쪽 제목 / 오른쪽 본문

   <div class="con-inner sec-split">
     <div class="sec-hd txt-wrap">…제목…</div>
     <ul  class="lst-check txt-wrap">…</ul>
   </div>

   오른쪽 폭은 쓰는 쪽이 정한다 (flex: 0 0 {폭}).
   태블릿 이하에서는 제목 아래로 내려간다
============================ */

.sec-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--one-space-r);
}

/* 2단에서는 제목 아래 여백이 필요 없다 */
.sec-split > .sec-hd {
  padding-bottom: 0;
}


/* ============================
   체크 목록 — .ico-check + 글자, 항목 사이 점선

   <ul class="lst-check txt-wrap">
     <li class="lst-check-item">
       <span class="ico-check" aria-hidden="true"></span>
       <p class="ft-body">…</p>
     </li>
   </ul>

   아이콘은 em 이라 글자 크기를 따라간다 — 반응형에서 따로 손댈 필요가 없다.
   여백·간격·색은 --lst-check-* 로 조정.

   **아이콘 자리는 체크 아이콘 전용이 아니다** — 그림(<img>)을 넣을 때는 감싸는 칸에
   .lst-check-pic 을 주고 --lst-check-pic 으로 자리 폭을 못 박는다. 글도 한 줄이 아니라
   라벨+설명처럼 여러 줄을 넣을 수 있다(그때는 <p> 대신 <div> 로 감싼다)

   .sec-split 오른쪽에 놓을 때는 --lst-check-top 으로 첫 항목 위 여백만 줄여
   왼쪽 제목 첫 줄과 글자 높이를 맞춘다 (값은 제목 크기에 달려 있어 쓰는 쪽이 정한다)
============================ */

.lst-check {
  --lst-check-gap: 21px;
  --lst-check-pad: 51px;
  --lst-check-y: 30px;
}

.lst-check-item {
  display: flex;
  align-items: center;
  gap: var(--lst-check-gap);
  padding: var(--lst-check-y) 0 var(--lst-check-y) var(--lst-check-pad);
  border-bottom: 1px dashed var(--lst-check-line, var(--gray-color02));
}

/* 첫 항목 위 여백만 따로 — 기본은 나머지와 같다 */
.lst-check-item:first-child {
  padding-top: var(--lst-check-top, var(--lst-check-y));
}

.lst-check-item:last-child {
  border-bottom: 0;
}

.lst-check .ico-check {
  width: 1.4em;
  height: 1.4em;
  color: var(--lst-check-ico, var(--sub-color02));
}

/* 아이콘 자리에 그림을 넣을 때 — 그림마다 크기가 달라도 글자가 같은 자리에서 시작하도록
   자리 폭을 못 박고 가운데에 놓는다. common.css 의 section img{width:100%} 도 여기서 푼다 */
.lst-check-pic {
  flex: 0 0 var(--lst-check-pic, auto);
  text-align: center;
}

.lst-check-pic img {
  width: auto;
  max-width: 100%;
}

.lst-check-item > p {
  margin: 0;
}

@media all and (max-width: 1024px) {
  .sec-split {
    flex-direction: column;
  }

  .lst-check {
    --lst-check-pad: var(--one-gap-lg);
  }

  /* 세로로 쌓이면 맞출 제목이 옆에 없다 — 첫 항목 여백을 되돌린다 */
  .sec-split > .lst-check {
    --lst-check-top: var(--lst-check-y);
  }
}

/* 글자가 두 줄로 넘어가면 아이콘을 첫 줄에 맞춘다 */
@media all and (max-width: 639px) {
  .lst-check {
    --lst-check-pad: 0px;
    --lst-check-gap: var(--one-gap-r);
    --lst-check-y: var(--one-gap-lg);
  }

  .lst-check-item {
    align-items: flex-start;
  }

  .lst-check .ico-check {
    margin-top: 0.1em;
  }
}


/* ============================
   추천 대상 블록 — 「이런 분들께 추천합니다」 / 「이런 경우, … 해야 합니다」

   <section class="section sec-case sec-{하위}-case">
     <div class="con-inner sec-split">
       <div class="sec-hd txt-wrap"><h2 class="hd3 sec-case-tit">…</h2></div>
       <ul class="lst-check txt-wrap sec-case-list">
         <li class="lst-check-item">
           <span class="lst-check-pic"><img …></span>        ← 아이콘 없는 페이지는 생략
           <div class="sec-case-txt">
             <p class="sec-case-num">CASE 01</p>
             <p class="sec-case-desc">…</p>
           </div>
         </li>
       </ul>
     </div>
   </section>

   뼈대는 위 .sec-split + .lst-check. 여기에는 **페이지가 달라도 같은 값**만 두고,
   여백·아이콘처럼 시안마다 다른 것은 쓰는 쪽의 .sec-{하위}-case 가 덮는다.
   심미치료 3종과 일반진료가 같이 쓰기 시작해 page CSS 에서 여기로 올렸다
============================ */

.sec-case {
  background-color: var(--sec-case-bg, #fef9f3);
}

/* 크림 배경 시작에서 108 (아래는 항목 여백에 딸려 있어 페이지가 정한다) */
.sec-case .con-inner {
  padding-top: 108px;
}

/* 시안 실측 33 — 1섹션 제목(40)보다 작다. 줄 간격 49 = 32 * 1.5 */
.txt-wrap .sec-case-tit {
  line-height: 1.5;
}

/* 목록 폭 592 = 점선 길이. 첫 항목은 위 여백 0 —
   왼쪽 제목 첫 줄과 같은 높이에서 시작해야 한다 */
.sec-case-list {
  flex: 0 0 592px;
  max-width: 592px;
  --lst-check-top: 0px;
  --lst-check-line: #b7b0a0;
}

/* 아이콘 자리를 뺀 나머지를 글이 다 쓴다 — 안 주면 긴 설명이 목록 폭 밖으로 나간다 */
.sec-case-txt {
  flex: 1 1 auto;
  min-width: 0;
}

/* CASE 라벨 아래 16 */
.sec-case-desc {
  margin-top: var(--one-gap-r);
}

/* 컬러칩에 없는 금색 — 심미치료 3종과 사랑니 발치가 모두 같은 값으로 실측됐다 */
.sec-case-num {
  color: #8e7626;
}

/* ⚠️ 아래 두 블록은 특정도를 (0,3,0) 으로 올려 둔다 —
   페이지 CSS 가 뒤에 실리므로 .sec-case .sec-case-list(0,2,0) 로 쓰면
   .sec-{하위}-case .sec-case-list(0,2,0) 에 밀려 반응형이 안 먹는다 */
@media all and (max-width: 1024px) {
  .section.sec-case .con-inner {
    padding: var(--one-space-lg) 0;
  }

  /* 2단 해제는 위 .sec-split 이 한다 */
  .sec-case .sec-split > .sec-case-list {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }
}

@media all and (max-width: 639px) {
  /* 폭이 좁아지면 점선에서 글까지의 들여쓰기를 버린다 */
  .sec-case .sec-split > .sec-case-list {
    --lst-check-pad: 0px;
    --lst-check-gap: var(--one-gap-r);
    --lst-check-pic: 56px;
  }
}


/* ============================
   규격 줄 — 고정 폭 라벨 + 설명

   <dl class="lst-spec txt-wrap">
     <dt class="p-tit ft-b lst-spec-key">지원 대상</dt>
     <dd class="ft-body ft-r lst-spec-val">만 65세 이상<br>…</dd>
   </dl>

   라벨 열을 고정 폭으로 두는 것이 핵심이다 — 항목마다 라벨 길이가 달라도
   설명이 늘 같은 자리에서 시작해야 탭·롤링으로 바뀔 때 글자가 좌우로 흔들리지 않는다.
   폭은 가장 긴 라벨보다 넉넉하게 --lst-spec-key 로 준다
============================ */

.lst-spec {
  display: flex;
  align-items: flex-start;
  gap: var(--lst-spec-gap, var(--one-gap-lg));
  margin: 0;
}

.lst-spec-key {
  flex: 0 0 var(--lst-spec-key, auto);
  margin: 0;
}

.lst-spec-val {
  margin: 0;
}

/* 한 줄에 못 넣는다 — 라벨을 위로 올린다 */
@media all and (max-width: 639px) {
  .lst-spec {
    flex-direction: column;
    gap: var(--one-gap-sm);
  }

  .lst-spec-key {
    flex: 0 0 auto;
  }
}


/* ============================
   슬라이더 컨트롤 — 네이밍 가이드의 pg-* 구조 (이전·다음 + 번호)

   <nav class="pg-wrap" aria-label="…">
     <button type="button" class="pg-btn pg-prev" aria-label="이전">
       <span class="ico-circle-left" aria-hidden="true"></span>
     </button>
     <div class="pg-list"></div>          ← Swiper pagination 이 채운다
     <button type="button" class="pg-btn pg-next" aria-label="다음">
       <span class="ico-circle-right" aria-hidden="true"></span>
     </button>
   </nav>

   Swiper 에 붙일 때는 번들 CSS 가 끼어들지 않게 클래스 이름을 바꿔 넘긴다 —
   bulletClass: 'pg-item' · bulletActiveClass: 'is-active' · modifierClass: 'pg-list-'
   (기본값 그대로 두면 .swiper-pagination-* 규칙이 폭·위치를 덮어쓴다)
============================ */

.pg-wrap {
  display: flex;
  align-items: center;
  gap: var(--pg-gap, var(--one-gap-r));
  color: var(--pg-color, var(--sub-color02));
}

.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--pg-btn-size, 24px);   /* 아이콘이 1em 이라 이 값이 곧 아이콘 크기 */
  cursor: pointer;
}

.pg-list {
  display: flex;
  align-items: center;
  gap: var(--pg-dot-gap, var(--one-gap-r));
}

/* 흐린 점 → 활성만 진하게. 색은 .pg-wrap 이 정한 currentColor 하나로 간다 */
.pg-item {
  width: var(--pg-dot, 7px);
  height: var(--pg-dot, 7px);
  border-radius: 50%;
  background-color: currentColor;
  opacity: var(--pg-dot-opacity, 0.2);
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.pg-item.is-active {
  opacity: 1;
}


/* ============================
   진행 바 — 드래그로 넘기는 슬라이더의 위치 표시 (Swiper scrollbar 로 받는다)

   <div class="pg-bar x-bar" aria-hidden="true">
     <div class="pg-bar-fill"></div>
   </div>

   채움의 폭·위치는 Swiper 가 인라인 style 로 넣는다. 넘길 때 이름을 바꿔야 한다 —
   dragClass: 'pg-bar-fill' · horizontalClass: 'is-x' · lockClass: 'is-lock'.
   기본값 그대로 두면 번들 CSS 의 .swiper-scrollbar-* 가 바를 슬라이더 안 absolute 로 끌어간다.

   바는 감싸는 박스를 그대로 채운다 — 화면 끝까지 흐르는 트랙 안에 두면 바도 끝까지 간다
   (충치치료 보철 종류가 그 구성이다)
============================ */

.pg-bar {
  position: relative;   /* Swiper 가 채움을 이 안에서 움직인다 */
  width: 100%;
  height: var(--pg-bar-h, 4px);
  border-radius: 999px;
  background-color: var(--pg-bar-bg, var(--gray-color03));
  touch-action: none;   /* 바를 끌 때 페이지가 같이 스크롤되지 않게 */
}

/* 넘길 것이 없으면 Swiper 가 잠금 클래스를 붙인다 */
.pg-bar.is-lock,
.pg-bar.is-disabled {
  display: none;
}

.pg-bar-fill {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: inherit;
  background-color: var(--pg-bar-color, var(--sub-color02));
  cursor: grab;
}

.pg-bar-fill:active {
  cursor: grabbing;
}


/* ============================
   아코디언 — 제목 줄을 누르면 아래 패널이 열린다 (FAQ 등)

   <ul class="acc-wrap" data-acc-multi="true">
     <li class="acc-item">
       <button type="button" class="acc-btn" id="x-btn-1" aria-controls="x-panel-1" aria-expanded="false">
         <span class="acc-tit p-tit ft-b">Q. …</span>
         <span class="acc-ico" aria-hidden="true"></span>
       </button>
       <div class="acc-panel" id="x-panel-1" role="region" aria-labelledby="x-btn-1">
         <div class="acc-body txt-wrap">…</div>
       </div>
     </li>
   </ul>

   동작은 assets/js/ui.js (전 페이지 로드). data-acc-multi="true" 면 여러 개를 동시에 열 수 있고,
   없으면 하나만 열린다.

   ⚠️ **닫는 것은 JS 가 한다** — CSS 로 숨기면 JS 가 죽었을 때 답이 통째로 사라진다.
   JS 가 `.is-ready` 를 붙인 뒤에만 전환 효과가 걸리고, 패널은 `hidden` 속성으로 여닫는다.
   높이를 transition 하지 않는 것도 같은 이유다(레이아웃 재계산) — 여는 느낌은 안쪽 글의
   opacity·transform 이 낸다

   조절 변수: --acc-gap(항목 사이) / --acc-radius / --acc-btn-bg·--acc-btn-color / --acc-btn-h
             --acc-btn-pad / --acc-panel-bg / --acc-panel-pad / --acc-ico / --acc-time
============================ */

.acc-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--acc-gap, var(--one-gap-lg));
}

.acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--one-gap-lg);
  width: 100%;
  min-height: var(--acc-btn-h, auto);
  padding: var(--acc-btn-pad, var(--one-gap-lg) var(--one-space-s));
  border: 0;
  border-radius: var(--acc-radius, 20px);
  background-color: var(--acc-btn-bg, var(--sub-color02));
  color: var(--acc-btn-color, var(--white-color));
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-radius var(--acc-time, 0.35s) ease;
}

/* 제목이 길어도 화살표를 밀어내지 않는다 */
.acc-tit {
  min-width: 0;
}

/* 열리면 아래 모서리를 펴서 패널과 한 덩어리로 보이게 한다 */
.acc-item.is-active .acc-btn {
  border-radius: var(--acc-radius, 20px) var(--acc-radius, 20px) 0 0;
}

/* 촉만 그린 화살표. 닫힘 ∧ / 열림 ∨ — 시안이 그 방향이다.
   회전 때문에 시각 중심이 한쪽으로 치우쳐 translateY 로 되돌린다 */
.acc-ico {
  flex-shrink: 0;
  width: var(--acc-ico, 12px);
  height: var(--acc-ico, 12px);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(2px) rotate(-135deg);
  transition: transform var(--acc-time, 0.35s) ease;
}

.acc-item.is-active .acc-ico {
  transform: translateY(-2px) rotate(45deg);
}

.acc-panel {
  border-radius: 0 0 var(--acc-radius, 20px) var(--acc-radius, 20px);
  background-color: var(--acc-panel-bg, var(--bg-color));
}

.acc-body {
  padding: var(--acc-panel-pad, var(--one-gap-lg) var(--one-space-s));
}

/* 전환은 JS 가 붙은 뒤에만 — 그 전에는 전부 펼쳐진 채로 둔다 */
.acc-wrap.is-ready .acc-body {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--acc-time, 0.35s) ease,
              transform var(--acc-time, 0.35s) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acc-wrap.is-ready .acc-item.is-active .acc-body {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .acc-wrap.is-ready .acc-body,
  .acc-btn,
  .acc-ico {
    transition: none;
  }
}


/* ============================
   섹션 구분선 — 가로 실선 한 줄

   <div class="section"><div class="sec-line"></div></div>

   폭·색 모두 시안 실측(진료안내 s0104 · 임플란트 s0201 이 같은 값).
   컨테이너 토큰(1200/1400/1680)과 맞는 값이 없어 숫자를 그대로 둔다
============================ */

.sec-line {
  max-width: 1452px;
  margin: 0 auto;
  border-top: 1px solid var(--sec-line-color, #d4d4d4);
}


/* ============================
   탭 — 네이밍 가이드의 tab-* 구조 그대로.
   동작은 assets/js/ui.js (전 페이지 로드)

   <div class="tab-wrap tab-side" data-tab-auto="4000">
     <div class="tab-aside">
       <div class="sec-hd txt-wrap">…제목…</div>

       <ul class="tab-nav txt-wrap" role="tablist">
         <li class="tab-item is-active" role="presentation">
           <button class="tab-btn p-tit ft-b" role="tab" aria-selected="true"
                   id="x-tab-1" aria-controls="x-panel-1">
             <span class="ico-angles" aria-hidden="true"></span>라벨
           </button>
         </li>
       </ul>
     </div>

     <div class="tab-cont">
       <div class="tab-panel is-active" role="tabpanel" id="x-panel-1" aria-labelledby="x-tab-1">…</div>
     </div>
   </div>

   .tab-side  : 왼쪽 네비 / 오른쪽 패널 2단. 패널 폭은 쓰는 쪽이 정한다
   .tab-aside : 제목까지 왼쪽에 둘 때 감싸는 칸 (없으면 .tab-nav 가 바로 왼쪽 칸이 된다)
   data-tab-auto="{ms}" : 자동 전환. 없으면 클릭으로만 바뀐다

   ⚠️ 패널을 겹쳐 쌓는 것과 숨기는 것은 JS 가 .is-roll 을 붙인 뒤에만 한다 —
      JS 가 없거나 죽으면 패널이 그냥 세로로 다 보인다(내용이 사라지지 않는다)
============================ */

.tab-nav {
  display: flex;
  flex-direction: column;
  gap: var(--tab-nav-gap, var(--one-gap-xl));
}

/* 비활성은 색(--tab-color)에 더해 --tab-opacity 로도 눌러 둘 수 있다 —
   아이콘이 currentColor 라 둘 중 무엇으로 연하게 하든 같이 따라온다 */
.tab-btn {
  display: flex;
  align-items: center;
  gap: var(--tab-btn-gap, var(--one-gap-r));
  padding: 0;
  border: 0;
  background: none;
  color: var(--tab-color, var(--gray-color03));
  font-family: inherit;
  text-align: left;
  opacity: var(--tab-opacity, 1);
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.3s ease;
}

/* 아이콘은 currentColor 라 글자와 같이 연해진다 */
.tab-btn .ico-angles {
  width: 1.1em;
  height: 1.1em;
}

.tab-item.is-active .tab-btn {
  color: var(--tab-color-on, var(--sub-color02));
  opacity: 1;
}

/* 겹쳐 쌓기 — JS 가 붙었을 때만. 안 그러면 패널이 한 칸에 다 포개진다 */
.tab-cont.is-roll {
  display: grid;
}

.tab-cont.is-roll > .tab-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(var(--tab-panel-shift, 24px));
  transition: opacity var(--tab-panel-time, 0.5s) ease,
              transform var(--tab-panel-time, 0.5s) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tab-cont.is-roll > .tab-panel.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tab-cont.is-roll > .tab-panel {
    transform: none;
    transition: none;
  }
}

/* 세로 탭 — 왼쪽 네비 / 오른쪽 패널.
   제목까지 왼쪽에 두려면 .tab-aside 로 감싼다 — 그래야 제목 첫 줄과
   패널 위쪽이 같은 선에서 시작한다(제목을 2단 바깥에 두면 패널이 그만큼 내려간다) */
.tab-wrap.tab-side {
  display: flex;
  align-items: flex-start;
  gap: var(--tab-side-gap, var(--one-space-r));
}

.tab-wrap.tab-side > .tab-aside,
.tab-wrap.tab-side > .tab-nav {
  flex: 1 1 auto;
  min-width: 0;
}

@media all and (max-width: 1024px) {
  .tab-wrap.tab-side {
    flex-direction: column;
  }

  .tab-wrap.tab-side .tab-nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
}


/* ============================
   무한 가로 롤링 — CSS 전용 (GSAP 과 무관, .anim-* 체계와 별개)

   <div class="roll-x" aria-hidden="true">
     <div class="roll-x-track">
       <span class="roll-x-item">TAEHWA ALL-DAY</span>   ← 화면을 채울 만큼 반복
       …                                                   같은 묶음을 두 번 넣는다
     </div>
   </div>

   트랙에 같은 묶음을 두 벌 넣고 -50% 까지 밀면 이음매가 안 보인다.
   속도는 --roll-x-time, 방향은 .roll-x-rev(오른쪽으로)

   ⚠️ 한 벌(= 트랙 폭의 절반)이 화면보다 넓어야 한다. 좁으면 -50% 지점에서
   뒤가 비어 롤링이 중간에 끊긴 것처럼 보인다. 항목 수는
   (가장 넓은 화면 ÷ 항목 폭) 보다 크게 — 항목 폭 = 글자 폭 + --roll-x-gap

   --roll-x-time 은 "한 벌을 지나는 시간" 이라 항목 수를 늘리면 그만큼 빨라진다.
   항목 수를 바꿀 때는 시간도 같은 비율로 바꿔야 속도가 유지된다
   장식용이므로 호출부에서 aria-hidden 을 붙인다

   ⚠️ 트랙에 .txt-wrap 을 붙이지 않는다 — 바깥 .roll-x 에 준 font-size·color 가
   .txt-wrap 의 본문값(18px / #101010)으로 덮여 롤링이 작고 까맣게 나온다
============================ */

.roll-x {
  overflow: hidden;
}

.roll-x-track {
  display: flex;
  width: max-content;
  animation: roll-x var(--roll-x-time, 40s) linear infinite;
}

.roll-x-rev .roll-x-track {
  animation-direction: reverse;
}

.roll-x-item {
  flex: 0 0 auto;
  padding-right: var(--roll-x-gap, 72px);
  white-space: nowrap;
}

@keyframes roll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 움직임을 줄여 달라고 설정한 사용자에게는 멈춘다 */
@media (prefers-reduced-motion: reduce) {
  .roll-x-track {
    animation: none;
  }
}


/* ============================
   오시는 길 — sections/_common/loc-info.php
   타이틀은 호출부가 $args['title'] 로 넘긴다
============================ */

.sec-loc-inner {
  display: flex;
  align-items: center;
  gap: var(--one-space-xl);
}

.sec-loc-txt {
  flex: 1 1 0;
  min-width: 0;
}

/* 여백은 시안(pc_main_summary02) 실측 간격에서 행간 leading 을 뺀 값 */
/* 꾸밈 서체(.sub-ft) — 자간은 --one-sub-ft-ls 가 정하므로 여기서 덮지 않는다 */
.sec-loc-tit {
  padding-bottom: var(--one-gap-xl);
}

.sec-loc-addr {
  padding-bottom: var(--one-gap-lg);
}

/* 주차 — 왼쪽 배지(124×30) + 오른쪽 한 열.
   목록과 ※ 안내가 같은 열에 있어야 왼쪽이 맞는다 (시안 x392) */
.sec-loc-park {
  display: flex;
  align-items: flex-start;
  gap: var(--one-gap-lg);
}

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

.sec-loc-badge {
  flex: 0 0 auto;
  padding: var(--one-gap-xs) var(--one-gap-xl);
  border-radius: 4px;
  background-color: var(--sub-color02);
  color: var(--white-color);
  font-size: var(--one-caption);
  line-height: 1.5;
  white-space: nowrap;
}

/* 항목 사이는 행간만 — .lst-dot 기본 하단 여백을 뺀다 */
.sec-loc-list li {
  padding-bottom: 0;
}

/* 목록 항목 아래 보조 설명 — 위 항목 글자와 같은 선에서 시작한다 (시안 x405) */
.sec-loc-sub {
  display: block;
  color: var(--one-txt-color);
}

/* ※ 무료 주차권 — 강조도 같은 회색이고 굵기만 다르다 (시안) */
.sec-loc-help {
  padding-top: var(--one-space-s);
  color: var(--gray-color01);
}

/* 진료시간 */
.sec-loc-time {
  padding-top: var(--one-space-s);
}

.sec-loc-time > div {
  display: flex;
  align-items: baseline;
  gap: var(--one-gap-lg);
  padding-bottom: var(--one-gap-sm);
}

/* 라벨 — 낱자를 span 으로 넣고 양끝 정렬. 폭은 가장 긴 "주말·공휴일" 기준 */
.sec-loc-label {
  display: flex;
  justify-content: space-between;
  flex: 0 0 5.2em;
}

/* 숫자를 고정폭으로 — 기본(비례폭)이면 1 이 좁아 줄마다 끝이 어긋난다.
   시안은 세 줄 모두 181px 로 같다 */
.sec-loc-time dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
}

/* * 주말·공휴일 점심시간 없음 */
.sec-loc-note {
  padding-top: var(--one-gap-sm);
  color: var(--gray-color01);
}

.sec-loc-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--one-gap-r);
  margin-top: var(--one-gap-lg);
  letter-spacing: -0.01em;
}

/* .txt-wrap 을 붙여야 색이 먹는다 — common.css 의 .txt-wrap a { color: inherit }(0,1,1) 가 더 세다 */
.txt-wrap .sec-loc-tel {
  color: var(--sub-color02);
  letter-spacing: -0.02em;
}

/* 아이콘이 글자 색을 따라가도록 mask 로 얹는다 */
.sec-loc-ico {
  width: 0.72em;
  height: 0.72em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('../images/common/phone.svg') no-repeat center / contain;
  mask: url('../images/common/phone.svg') no-repeat center / contain;
}

.sec-loc-map {
  flex: 0 0 54%;
  border-radius: 20px;
  overflow: hidden;
}

.sec-loc-map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 804 / 679;
  border: 0;
}

@media all and (max-width: 1024px) {
  .sec-loc-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--one-space-r);
  }

  .sec-loc-map {
    flex: 0 0 auto;
  }
}

@media all and (max-width: 639px) {
  .sec-loc-park {
    flex-direction: column;
    gap: var(--one-gap-r);
  }

  .sec-loc-time > div {
    gap: var(--one-gap-lg);
  }

  .sec-loc-map iframe {
    aspect-ratio: 4 / 3;
  }
}