/*
Theme Name: Essence
Theme URI: https://essencedental.co.kr
Description: 에센스치과(부천 신중동) 리뉴얼 테마. 2026-09-15 신설. GNB 7개 확정안(2026-09-01) 기준.
Author: 플랜씨
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.1
License: GPL v2 or later
Text Domain: essence
*/

/* ── 토큰 ─────────────────────────────────────────────
   ⚠️ 색은 여기서만 정한다. 아트디렉션이 확정되면 이 블록만 갈아끼운다.
      7월 피그마 시안(딥그린+아이보리)은 폐기·개정 미정이라 중립값으로 시작한다. */
:root {
  /* 피그마 노드 103:1104 실측 — text/primary #231f20.
     브랜드 색은 2026-09-15 김치킨 지시로 #0b6fb9 → **#0145B3** (로고 SVG·파비콘도 같이 교체) */
  --ink: #231f20;
  --ink-2: #565153;
  --ink-3: #8b8789;
  /* 피그마 104:1105 — Black #363636 · Primary #333d4b · text/secondary #696969 */
  --black: #363636;
  --primary: #333d4b;
  --text-2: #696969;
  --line: #e6e7e8;
  --bg: #fff;
  --bg-2: #f6f8fa;
  --brand: #0145b3;
  --brand-2: #01337f;
  --brand-tint: #e9eef8;
  /* 본문 폭 — 여기 한 곳만 고치면 전 섹션이 따라온다.
     --in = 글이 들어가는 폭, .wrap 바깥폭 = --in + 좌우 20px (2026-09-16: 1200 → 1300) */
  --in: 1300px;
  --wrap: calc(var(--in) + 40px);
  --radius: 14px;
  /* 섹션 제목 — 시안이 42 라서 기준단위 배수 대신 **고정값**으로 둔다(2026-09-16 지시).
     배수(4.5×--r3)로 두면 화면 폭에 따라 36·40.5·45 로 흔들린다. 폭마다 값을 못 박는다. */
  --tit-sect: 42px;
  /* 서브페이지 기준단위 — 레퍼런스 루트 폰트가 단계형(10/9/8/7/6, ≥3200 12)이라 같은 단계로 재현한다.
     이 값에 배수를 곱해 폭·여백·글자크기를 만든다 */
  --r3: 10px;
  /* 헤더 높이 — 피그마 데스크톱 80px. 좁아질수록 낮춘다 */
  --hd-h: 80px;
  --hd-pad: 2.5%;
  --f-sans: 'Pretendard', 'Pretendard Variable', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}

/* ── 글자 크기 기준 (2026-09-15 전 섹션 통일) ────────────────────
   1600px 기준 네 단계만 쓴다. 레퍼런스마다 값이 조금씩 달라 섞이면 금방 어긋난다.
     페이지 제목 51.2 (6.4) · 섹션 제목 36 (4.5) · 카드 제목 24 (3) · 줄 제목 18 (2.25)
     본문 16 (2) · 캡션·표식 14 (1.75)
   ⚠️ 본문은 **14px 하한 · 18px 상한**(clamp(14px, …, 18px))이다. 하한은 2026-09-21 추가 — 없을 때는 ≤768px 에서 --r3 가 6 이 되어
      본문이 12px 로 내려갔다(섹션마다 14px 덮어쓰기를 따로 넣던 것이 빠진 곳이 많았다).
   ⚠️ (옛 설명) 본문만 **18px 상한**이다. --r3 사다리가 2001px 이상에서 10, 3200 이상에서 12 로
      올라가 본문이 20·24px 까지 커지기 때문이다(2026-09-16 지시). 다른 단계는 상한 없음.
   예외 없음 — 숫자 표시(진료시간 카드의 시각)도 카드 제목 단계를 쓴다.
   ⚠️ 번호 원(치료 단계·생활 가이드)의 배경은 **검정(--black)** 이다. 브랜드색 아님(시안·레퍼런스 모두 검정).
   괄호 안은 var(--r3) 배수다. 새 섹션을 붙일 때 레퍼런스 값을 그대로 쓰지 말고
   이 표에서 가장 가까운 단계를 고를 것. */
* {
  box-sizing: border-box
}

/* 글자 렌더링 — 맥/iOS 는 서브픽셀 대신 그레이스케일로 그려야 두껍게 뭉치지 않는다.
   Pretendard 같은 얇은 한글 폰트에서 차이가 크다. */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility
}

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  word-break: keep-all
}

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

a {
  color: inherit;
  text-decoration: none
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.35;
  font-weight: 700
}

p {
  margin: 0 0 1em
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px
}

@media (max-width:2000px) {
  :root {
    --r3: 9px
  }
}

@media (max-width:1640px) {
  :root {
    --r3: 8px
  }
}

@media (max-width:1640px) {
  :root {
    --tit-sect: 38px
  }
}

@media (max-width:1240px) {
  :root {
    --r3: 7px;
    --tit-sect: 34px
  }
}

@media (max-width:768px) {
  :root {
    --r3: 6px;
    --tit-sect: 26px
  }

  .wrap {
    padding: 0 15px
  }
}

@media (min-width:3200px) {
  :root {
    --r3: 12px
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

/* ── 헤더 (피그마 103:1104) ───────────────────────────
   로고(좌) · GNB(중앙) · 유틸(우). 하위 메뉴는 헤더 아래 흰 패널로 펼쳐진다.
   ⚠️ 메뉴가 7개라 1440px 부터 모바일 메뉴로 접는다 — 그 위에서는 글자가 겹친다. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--brand);
  color: #fff
}

.skip-link:focus {
  left: 0
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  transition: box-shadow .3s, transform .3s ease
}

.site-header.is-stuck {
  box-shadow: 0 0 10px rgba(0, 0, 0, .08)
}

/* 아래로 내리면 치우고, 위로 올리면 되돌린다 — .is-away 는 js 가 붙인다 */
.site-header.is-away {
  transform: translateY(-100%)
}

.header-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--hd-h);
  padding: 0 var(--hd-pad);
  background: #fff
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none
}

.brand-mark {
  width: 36px;
  height: 36px
}

.brand-word {
  width: 131px;
  height: 25px
}

.gnb-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  height: 100%
}

.gnb {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%
}

.gnb-item {
  position: relative;
  height: 100%
}

.gnb-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 2.2em;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap
}

.gnb-link .gnb-label {
  position: relative
}

/* 밑줄이 가운데서 양쪽으로 그어진다 */
.gnb-link .gnb-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--brand);
  transform: translateX(-50%);
  transition: width .4s
}

.gnb-item:hover>.gnb-link .gnb-label::after,
.gnb-item:focus-within>.gnb-link .gnb-label::after,
.gnb-item.is-current>.gnb-link .gnb-label::after {
  width: 100%
}

.gnb-item:hover>.gnb-link,
.gnb-item.is-current>.gnb-link {
  color: var(--brand)
}

/* 2차 메뉴 — GNB 영역에 올리면 **전부 한꺼번에** 열린다(피그마 펼침 상태와 같다).
   ⚠️ 항목별 hover 로 하나만 여는 게 아니다. 레퍼런스도 nav 전체 mouseenter 로 연다.

   간격은 레퍼런스 실측(1600px, 하위 글자 13.875px 기준)을 우리 16px 에 비례로 옮긴 값이다:
     · 목록 위 여백 18.5px = 1.33em  → 16px × 1.33 ≈ 21px
     · 항목 위아래 여백 6.94px = 0.5em → 8px
     · 줄 높이 16.65px = 1.2          → 19.2px  (행 간격 = 19.2 + 16 ≈ 35px, 피그마 37px 과 사실상 같다)
   아래 여백은 레퍼런스·피그마 모두 위보다 넉넉하다(레퍼런스 패널은 내용의 두 배 높이) → 48px.
   ⚠️ 예전에 위 8px 만 두었더니 글자가 헤더에 붙고 4번째 항목이 패널 밖으로 밀렸다. */
.gnb-sub {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  list-style: none;
  margin: 0;
  padding: 21px 0 48px;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s
}

.site-header.is-open .gnb-sub {
  opacity: 1;
  pointer-events: auto;
  transition-delay: .15s
}

.gnb-sub a {
  display: block;
  padding: 8px 18px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--primary);
  transition: color .2s, font-weight .1s
}

.gnb-sub a:hover {
  color: var(--brand);
  font-weight: 600
}

/* 지금 보고 있는 하위 페이지 — 메가 메뉴에서 어디에 있는지 알 수 있게 (2026-09-16) */
.gnb-sub li.is-current>a {
  color: var(--brand);
  font-weight: 700
}

/* 외부 링크 표시 — 이름 오른쪽에 나가는 화살표. 글자색을 따라간다 */
.ext-ico {
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-left: .5em;
  fill: currentColor;
  vertical-align: baseline
}

/* 펼침 패널 — 높이는 **가장 긴 하위 목록에 맞춰 JS 가 정한다**(--panel-h).
   ⚠️ 피그마 시안값 161px 을 그대로 박아두면 메뉴가 한 줄만 늘어도 글자가 패널 밖으로 나간다.
      메뉴가 늘거나 줄 때마다 실제로 어긋났다. 여기 적힌 값은 폴백일 뿐이다.
   ⚠️ 테두리를 상시로 주면 box-sizing 탓에 닫힌 상태에서도 1px 줄이 남아 헤더 밑줄처럼 보인다.
   🔴 **열렸을 때는 마우스를 받아야 한다.** none 으로 두면 메뉴 사이 빈 곳의 히트 대상이
      본문이 되어 헤더 mouseleave 가 뜨고 곧바로 닫힌다. */
.gnb-panel {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 0;
  background: #fff;
  border-top: 0 solid var(--line);
  box-shadow: none;
  transition: height .35s ease, box-shadow .35s;
  pointer-events: none;
  z-index: 1
}

.site-header.is-open .gnb-panel {
  height: var(--panel-h, 208px);
  border-top-width: 1px;
  box-shadow: 0 8px 8px 3px rgba(0, 0, 0, .03);
  pointer-events: auto
}

/* 글자 굴림 — 글자마다 1.5em 아래에 같은 글자를 그림자로 깔아 두고,
   호버 때 한 칸 밀어 올려 아래 글자가 올라오게 한다. 글자 하나씩 0.01초 늦게 출발한다.
   ⚠️ line-height 가 1.5 여야 그림자 위치(1.5em)와 이동 거리(100%)가 맞아떨어진다. */
.gnb-label {
  display: inline-block;
  line-height: 1.5
}

.gnb-char-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top
}

.gnb-char {
  display: inline-block;
  backface-visibility: hidden;
  text-shadow: 0 1.5em 0 currentColor;
  transition: transform .5s linear
}

.gnb-item:hover .gnb-char,
.gnb-item:focus-within .gnb-char {
  transform: translateY(-100%);
  transition-delay: calc(var(--i) * .01s)
}

@media (prefers-reduced-motion:reduce) {
  .gnb-char {
    transition: none
  }
}

.header-util {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none
}

.util-icon {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  overflow: hidden
}

.util-icon .ui-head {
  position: absolute;
  left: 33.33%;
  right: 33.33%;
  top: 12.5%;
  bottom: 54.17%;
  width: 33.34%;
  height: 33.33%
}

.util-icon .ui-body {
  position: absolute;
  left: 16.67%;
  right: 16.67%;
  top: 62.5%;
  bottom: 12.5%;
  width: 66.66%;
  height: 25%
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  padding: 10px;
  cursor: pointer
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform .3s, opacity .2s
}

/* 모바일 전체화면 메뉴 — 오른쪽 밖에서 밀려 들어온다 */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #fff;
  overflow-y: auto;
  padding: 0 0 60px;
  transform: translateX(100%);
  transition: transform .6s ease;
  visibility: hidden
}

.mobile-nav.is-open {
  transform: none;
  visibility: visible
}

.mobile-nav[hidden] {
  display: block
}

.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hd-h);
  padding: 0 var(--hd-pad);
  border-bottom: 1px solid var(--line)
}

.mobile-nav-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand)
}

.mobile-nav-close {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer
}

.m-depth1,
.m-depth2 {
  list-style: none;
  margin: 0;
  padding: 0
}

.m-depth1>li {
  border-bottom: 1px solid var(--line)
}

.m-toggle,
.m-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px var(--hd-pad);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer
}

.m-toggle i {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .3s;
  margin-right: 4px
}

.m-toggle[aria-expanded="true"] {
  color: var(--brand)
}

.m-toggle[aria-expanded="true"] i {
  transform: rotate(-135deg);
  border-color: var(--brand)
}

.m-depth2 {
  max-height: 0;
  overflow: hidden;
  background: var(--bg-2);
  transition: max-height .4s ease
}

.m-depth2 a {
  display: block;
  padding: 13px var(--hd-pad);
  font-size: 16px;
  color: var(--ink-2)
}

.m-depth2 a:hover {
  color: var(--brand)
}

.m-depth2 li.is-current>a {
  color: var(--brand);
  font-weight: 700
}

.m-depth2 a .ext-ico {
  margin-left: .45em
}

/* ── 버튼 ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s
}

.btn-primary {
  background: var(--brand);
  color: #fff
}

.btn-primary:hover {
  background: var(--brand-2)
}

.btn-ghost {
  border-color: var(--line);
  color: var(--ink-2);
  background: #fff
}

.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand)
}

/* ── 히어로 ─────────────────────────────────────────── */
.hero {
  background: linear-gradient(180deg, var(--brand-tint), #fff);
  padding: 84px 0 72px
}

.hero h1 {
  font-size: clamp(28px, 4.4vw, 46px)
}

.hero .lead {
  margin-top: 18px;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-2);
  max-width: 40em
}

.hero .actions {
  margin-top: 30px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

/* ── 섹션 공통 ──────────────────────────────────────── */
.section {
  padding: 78px 0
}

.section.alt {
  background: var(--bg-2)
}

.section-head {
  max-width: 46em;
  margin-bottom: 38px
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 12px
}

.section-head h2 {
  font-size: clamp(23px, 2.9vw, 34px)
}

.section-head p {
  margin-top: 14px;
  color: var(--ink-2)
}

.grid {
  display: grid;
  gap: 18px
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr)
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr)
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr)
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px
}

.card h3 {
  font-size: 19px;
  margin-bottom: 8px
}

.card p {
  color: var(--ink-2);
  font-size: 15.5px;
  margin: 0
}

.card .num {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 14px
}

/* 치료 흐름 */
.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  counter-reset: step
}

.flow li {
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px
}

.flow li b {
  display: block;
  font-size: 17px;
  margin-bottom: 6px
}

.flow li span {
  font-size: 14.5px;
  color: var(--ink-2)
}

/* ── 서브페이지 머리 (피그마 104:1105) ────────────────
   브레드크럼(홈 아이콘 + 단계별 드롭다운) → 서브카피 → 제목.
   시안 실측: 브레드크럼 헤더 아래 53px · 칸 사이 45px · 홈 50px · 글자 17px → **15px 로 변경(2026-09-15 지시)**
              제목 블록은 브레드크럼에서 70px 아래, 가운데, 최대 1018px
              서브카피 Bold 30/1.4 #333d4b · 제목 Bold 64/1.3 #363636 · 둘 사이 16px
              ⚠️ 30·64 는 **시안(2000px 캔버스) 값**이다 — 아래 변환 규칙을 거쳐 24·51.2 로 들어간다 */
.page-hero {
  padding: 53px var(--hd-pad) 0
}

.crumb {
  display: flex;
  align-items: center;
  gap: 45px
}

.crumb-home {
  flex: none;
  display: block
}

.crumb-home img {
  width: 50px;
  height: 50px
}

.crumb-seg {
  position: relative
}

.crumb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap
}

.crumb-seg.is-current .crumb-btn {
  font-weight: 600;
  color: var(--black)
}

/* 화살표는 피그마에서 내보낸 SVG 를 마스크로 써서 글자색을 따라가게 한다 */
.crumb-arrow {
  width: 14px;
  height: 8px;
  flex: none;
  background-color: currentColor;
  transition: transform .25s;
  -webkit-mask: url(img/crumb-arrow.svg) no-repeat center/contain;
  mask: url(img/crumb-arrow.svg) no-repeat center/contain
}

.crumb-btn[aria-expanded="true"] .crumb-arrow {
  transform: rotate(180deg)
}

.crumb-menu {
  position: absolute;
  left: -14px;
  top: calc(100% + 10px);
  z-index: 20;
  min-width: calc(100% + 28px);
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
  white-space: nowrap
}

.crumb-menu[hidden] {
  display: none
}

.crumb-menu a {
  display: block;
  padding: 8px 18px;
  font-size: 15px;
  color: var(--text-2)
}

.crumb-menu a:hover {
  background: var(--bg-2);
  color: var(--brand)
}

.crumb-menu a[aria-current="page"] {
  color: var(--black);
  font-weight: 600
}

/* 시안 세로 좌표 실측 — 브레드크럼 끝 183 → 제목 253(간격 70) · 서브카피와 제목 사이 16 · 블록 폭 1018.
   전부 2000px 캔버스 값이라 ÷1.25 해서 넣는다(= --r3 배수). */
.page-hero-tit {
  max-width: calc(101.8*var(--r3));
  margin: calc(7*var(--r3)) auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: calc(1.6*var(--r3))
}

/* ⚠️ 시안 캔버스는 **2000px** 기준이다. 시안의 px 을 그대로 쓰면 1600px 화면에서 1.25배 커진다.
   변환 규칙: **시안 px ÷ 10 = var(--r3) 배수** (--r3 은 1600px 에서 8).
   실측 대조 — 시안 제목 64 → 51.2 (레퍼런스 A 51.2) · 시안 45 → 36 (레퍼런스 B 36) · 시안 20 → 16. */
.hero-sub {
  margin: 0;
  font-size: calc(3*var(--r3));
  line-height: 1.4;
  font-weight: 700;
  color: var(--primary)
}

.hero-tit {
  font-size: calc(6.4*var(--r3));
  line-height: 1.3;
  font-weight: 700;
  color: var(--black)
}

.entry {
  padding: calc(16*var(--r3)) 0 calc(12*var(--r3))
}

@media (max-width:768px) {
  .entry {
    padding: 100px 0 60px
  }
}

.entry .wrap {
  max-width: 860px
}

/* 게시판처럼 표·목록이 들어가는 화면은 글 읽기 폭(860)보다 넓어야 한다.
   진료안내·위치와 같은 폭으로 통일 — 바깥 1240 · 안쪽 1200 (2026-09-15 지시) */
.entry-wide .wrap {
  max-width: var(--wrap)
}

.entry h2 {
  font-size: 26px;
  margin: 44px 0 14px
}

.entry h3 {
  font-size: 20px;
  margin: 30px 0 10px
}

.entry ul,
.entry ol {
  padding-left: 1.2em;
  color: var(--ink-2)
}

.entry li {
  margin: .4em 0
}

.entry img {
  border-radius: var(--radius);
  margin: 24px 0
}

.notice {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  padding: 16px 20px;
  color: var(--ink-2);
  font-size: 15px
}



/* ── 진료안내·위치 인트로 (LU치과 레퍼런스) ─────────────────────
   실측 1600px: 제목 38.4/700 줄높이 53.76 왼쪽 정렬 · 설명 16px 줄높이 27.2 위 20.8
   768px: 제목 26 · 설명 14(줄높이 23.8) 위 15 */
.visit-intro {
  padding: calc(16*var(--r3)) 0 0
}

@media (max-width:768px) {
  .visit-intro {
    padding-top: 100px
  }
}

.visit-intro .wrap {
  max-width: var(--wrap)
}

.visit-intro .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink)
}

.visit-intro .txt {
  margin: calc(2.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  line-height: 1.7;
  color: var(--ink-2)
}

@media (max-width:768px) {
  .visit-intro .tit {
    font-size: 26px
  }

  .visit-intro .txt {
    font-size: 14px;
    margin-top: 15px
  }
}

/* ── 진료시간 섹션 (LU치과 /luclinic/visit 레퍼런스) ──────────────
   레퍼런스 루트는 단계형이다: 기본 10px · ≤2000 9 · ≤1640 8 · ≤1240 7 · ≤768 6 (≥3200 12).
   같은 단계를 --r3 로 재현해 같은 폭에서 같은 px 이 나오게 한다.
   1600px 실측 대조: 카드 padding 36 · radius 17.76 · 요일 16/700 · 시간 30.4/700 ·
   태그 14(패딩 5.6/14) · 그리드 3열 gap 20 · 섹션 위 40 · 주석 원 30.4 · 주석 글자 14 */
.clinic-hours {
  padding: calc(25*var(--r3)) 0 calc(8.75*var(--r3))
}

@media (max-width:768px) {
  .clinic-hours {
    padding: 100px 0 60px
  }
}

.clinic-hours .wrap {
  max-width: var(--wrap)
}

.clinic-hours .hours-head .tit {
  font-size: var(--tit-sect);
  font-weight: 700;
  color: var(--ink);
  margin: 0
}

.clinic-hours .cont {
  margin-top: calc(5*var(--r3));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(2.5*var(--r3))
}

.clinic-hours .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  padding: calc(4.5*var(--r3));
  border-radius: calc(2.22*var(--r3));
  flex-shrink: 0
}

.clinic-hours .box .yoil {
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 700;
  margin: 0 0 calc(2*var(--r3));
  color: var(--ink)
}

.clinic-hours .box .time {
  font-size: calc(3*var(--r3));
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
  margin: 0
}

.clinic-hours .box .category {
  margin-top: calc(2.22*var(--r3));
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center
}

.clinic-hours .box .category span {
  background: #fff;
  color: var(--brand);
  font-size: calc(1.75*var(--r3));
  font-weight: 600;
  padding: .4em 1em;
  display: inline-block;
  border-radius: 600px;
  white-space: nowrap
}

/* 상담 채널 카드 — 레퍼런스의 예약 카드 자리 */
.clinic-hours .box.reserve {
  background: var(--brand-tint)
}

.clinic-hours .reserve-btn {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--ink);
  border-radius: calc(66.66*var(--r3));
  padding: .5em 1em;
  margin-top: calc(2.5*var(--r3));
  font-size: calc(1.75*var(--r3));
  font-weight: 600;
  transition: color .3s
}

.clinic-hours .reserve-btn:hover {
  color: var(--brand)
}

.clinic-hours .reserve-btn svg {
  width: 1em;
  height: auto;
  margin-left: calc(1.4*var(--r3));
  fill: currentColor
}

.clinic-hours .hours-note {
  margin-top: calc(2.5*var(--r3));
  display: flex;
  align-items: center
}

.clinic-hours .hours-note .one {
  background: var(--ink);
  color: #fff;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(3.8*var(--r3));
  height: calc(3.8*var(--r3));
  flex-shrink: 0;
  border-radius: 50%;
  font-size: calc(1.6*var(--r3));
  font-weight: 700
}

.clinic-hours .hours-note .txt {
  margin-left: 0;
  font-size: calc(1.75*var(--r3));
  color: var(--text-2)
}

.clinic-hours .hours-note .txt p {
  display: flex;
  margin: 0
}

.clinic-hours .hours-note .txt p+p {
  margin-top: 3px
}

.clinic-hours .hours-note .txt p span {
  margin-right: .25em
}

@media (max-width:1000px) {
  .clinic-hours .box {
    padding: 30px 20px
  }
}

@media (max-width:768px) {
  .clinic-hours .cont {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .clinic-hours .box {
    padding: 30px 15px;
    border-radius: 10px
  }

  .clinic-hours .hours-note {
    align-items: flex-start
  }

  /* 다른 섹션 제목·본문과 같은 모바일 값으로 맞춘다(배수만 두면 27·12 로 어긋난다) */
  .clinic-hours .hours-head .tit {
    font-size: 26px
  }

  .clinic-hours .box .yoil {
    font-size: 14px
  }
}

@media (max-width:620px) {
  .clinic-hours .box {
    padding: 20px 10px
  }

  .clinic-hours .box .category span,
  .clinic-hours .reserve-btn {
    font-size: 10px
  }
}

/* ── 공지사항 — **우아미 kboard 스킨(planc-notice) 이식** ─────────
   구조·클래스·간격 동일. 데이터만 워드프레스 기본 글에서 온다(kboard 미설치).
   우아미 rem 은 푸터와 같은 방식으로 되살린다(--r). 브랜드색만 에센스 것으로 바꿨다. */
.notice-board {
  --r: clamp(7.2px, 0.6098vw, 10px)
}

.notice-board .board_list_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(2*var(--r));
  padding-bottom: calc(2*var(--r));
  flex-wrap: wrap
}

.notice-board .board_list_top .total_num {
  font-size: calc(1.8*var(--r));
  color: #555;
  font-weight: 500
}

.notice-board .board_list_top .total_num strong {
  color: var(--brand);
  font-weight: 700
}

.notice-board .board_list_top .bg_sch_box {
  margin: 0
}

.notice-board .board_list_top .bg_sch_box .sch_inp {
  position: relative;
  display: flex;
  align-items: center
}

.notice-board .board_list_top .sch_inp input[type=text] {
  width: calc(36*var(--r));
  max-width: 100%;
  height: calc(6.5*var(--r));
  border: 1px solid #dfe2e8;
  border-radius: 100px;
  padding: 0 calc(5*var(--r)) 0 calc(2*var(--r));
  font-size: calc(1.5*var(--r));
  background: #fff;
  transition: border-color .2s
}

.notice-board .board_list_top .sch_inp input[type=text]:focus {
  outline: 0;
  border-color: var(--brand)
}

.notice-board .board_list_top .sch_inp .btn {
  position: absolute;
  right: calc(1.6*var(--r));
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  color: #8a90a0;
  line-height: 0
}

.notice-board .board_list_top .sch_inp .btn svg {
  height: calc(1.9*var(--r));
  fill: currentColor
}

.notice-board .board_list .list {
  margin: 0;
  padding: 0;
  list-style: none
}

.notice-board .board_list .list li a.list {
  display: flex;
  align-items: center;
  min-height: calc(10*var(--r));
  padding: calc(2*var(--r)) calc(2.4*var(--r));
  border-top: 1px solid #e7e9ef;
  transition: background-color .25s ease
}

.notice-board .board_list .list li:last-child a.list {
  border-bottom: 1px solid #e7e9ef
}

.notice-board .board_list .list li a.list:hover {
  background-color: #f5f7fb
}

.notice-board .board_list .list li a.list:hover .tit {
  color: var(--brand)
}

.notice-board .board_list .list .badge {
  flex: 0 0 auto;
  padding: .45em 1.2em;
  margin-right: calc(1.6*var(--r));
  font-size: calc(1.4*var(--r));
  font-weight: 700;
  line-height: 1;
  border-radius: 100px;
  background: var(--brand);
  color: #fff
}

.notice-board .board_list .list .tit {
  flex: 1;
  min-width: 0;
  font-size: calc(2*var(--r));
  font-weight: 700;
  color: #1a2333;
  padding-right: calc(3*var(--r));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0
}

.notice-board .board_list .list .txt.date {
  flex: 0 0 auto;
  width: 9em;
  text-align: right;
  font-size: calc(1.6*var(--r));
  font-weight: 600;
  color: #bababa;
  margin: 0
}

.notice-board .board_list .list .planc-board-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(14*var(--r));
  border-top: 1px solid #e7e9ef;
  border-bottom: 1px solid #e7e9ef;
  color: #9aa0ad;
  font-size: calc(1.6*var(--r))
}

.notice-board .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(6*var(--r));
  font-size: calc(1.5*var(--r))
}

.notice-board .pagination>a {
  line-height: 1;
  text-decoration: none
}

.notice-board .pagination>a svg {
  fill: #8a90a0;
  height: 1.3em;
  transition: all .3s
}

.notice-board .pagination>a:not(.none):hover svg {
  fill: var(--brand)
}

.notice-board .pagination .next {
  margin-right: calc(2*var(--r))
}

.notice-board .pagination .prev {
  margin-left: calc(2*var(--r))
}

.notice-board .pagination .none {
  opacity: .4;
  cursor: default;
  pointer-events: none
}

.notice-board .pagination .num_list {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 calc(2.5*var(--r));
  padding: 0;
  list-style: none
}

.notice-board .pagination .num_list li {
  position: relative;
  width: 2.45em;
  height: 2.45em;
  margin: 0 .25rem;
  border-radius: 50%;
  text-align: center;
  transition: all .3s;
  z-index: 0
}

.notice-board .pagination .num_list li a {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  line-height: 2.45em;
  color: #555;
  text-decoration: none
}

.notice-board .pagination .num_list li a:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all .4s;
  z-index: -1
}

.notice-board .pagination .num_list li:not(.active):hover a {
  color: var(--brand)
}

.notice-board .pagination .num_list li.active a {
  color: #fff;
  font-weight: 700
}

.notice-board .pagination .num_list li.active a:before {
  background-color: var(--brand)
}

@media (max-width:768px) {
  .notice-board .board_list_top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1.2rem
  }

  .notice-board .board_list_top .total_num,
  .notice-board .board_list_top .total_num strong {
    font-size: 14px
  }

  .notice-board .board_list_top .bg_sch_box {
    flex: 0 1 210px;
    width: 210px;
    max-width: 62%
  }

  .notice-board .board_list_top .sch_inp input[type=text] {
    width: 100%;
    height: 46px;
    font-size: 14px;
    padding: 0 42px 0 16px
  }

  .notice-board .board_list_top .sch_inp .btn {
    right: 14px
  }

  .notice-board .board_list_top .sch_inp .btn svg {
    height: 16px
  }

  .notice-board .board_list .list li a.list {
    min-height: auto;
    padding: 1.8rem 1.2rem;
    flex-wrap: wrap
  }

  .notice-board .board_list .list .tit {
    flex: 1 1 100%;
    order: 2;
    white-space: normal;
    padding-right: 0;
    font-size: 15px;
    margin-top: .8rem
  }

  .notice-board .board_list .list .badge {
    order: 1;
    font-size: 12px
  }

  .notice-board .board_list .list .txt.date {
    order: 1;
    width: auto;
    margin-left: auto
  }

  .notice-board .pagination {
    margin-top: 4rem
  }

  .notice-board .pagination .num_list {
    margin: 0 1.2rem
  }

  .notice-board .pagination .next {
    margin-right: 1.2rem
  }

  .notice-board .pagination .prev {
    margin-left: 1.2rem
  }
}

/* 공지 상세 · 후기 상세 (같은 틀) */
.notice-view, .ess-rv-view {
  --r: clamp(7.2px, 0.6098vw, 10px)
}

.notice-view .view_top, .ess-rv-view .view_top {
  padding-bottom: calc(2.4*var(--r));
  border-bottom: 1px solid #e7e9ef
}

.notice-view .view_top .badge_box, .ess-rv-view .view_top .badge_box {
  margin-bottom: calc(1.6*var(--r))
}

.notice-view .view_top .badge.type2, .ess-rv-view .view_top .badge.type2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5em 1.6em;
  border-radius: 100px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: calc(1.4*var(--r));
  font-weight: 700
}

.notice-view .view_top .tit, .ess-rv-view .view_top .tit {
  font-size: calc(3.4*var(--r));
  font-weight: 700;
  color: #1a2333;
  line-height: 1.4;
  word-break: keep-all;
  margin: 0
}

.notice-view .view_top .user_info .date, .ess-rv-view .view_top .user_info .date {
  font-size: calc(1.5*var(--r));
  margin: calc(1.2*var(--r)) 0 0;
  color: var(--text-2)
}

.notice-view .view_cont, .ess-rv-view .view_cont {
  padding: calc(4*var(--r)) 0;
  min-height: calc(20*var(--r));
  line-height: 1.8
}

.notice-view .board_li_wrap, .ess-rv-view .board_li_wrap {
  border-top: 1px solid #e7e9ef;
  padding-top: calc(2.4*var(--r))
}

.notice-view .board_li_wrap .box_wrap, .ess-rv-view .board_li_wrap .box_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(1.6*var(--r))
}

.notice-view .board_li_wrap .box, .ess-rv-view .board_li_wrap .box {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: calc(1.5*var(--r));
  color: #8a90a0;
  text-decoration: none
}

.notice-view .board_li_wrap .box:not(.none):hover, .ess-rv-view .board_li_wrap .box:not(.none):hover {
  color: var(--brand)
}

.notice-view .board_li_wrap .box svg, .ess-rv-view .board_li_wrap .box svg {
  height: 1em;
  fill: currentColor
}

.notice-view .board_li_wrap .box.none, .ess-rv-view .board_li_wrap .box.none {
  opacity: .4;
  pointer-events: none
}

.notice-view .view_btn, .ess-rv-view .view_btn {
  display: inline-block;
  padding: calc(1.2*var(--r)) calc(3*var(--r));
  background: var(--brand);
  color: #fff;
  border-radius: 100px;
  font-size: calc(1.5*var(--r));
  font-weight: 700;
  text-decoration: none
}

.notice-view .view_btn:hover, .ess-rv-view .view_btn:hover {
  background: var(--brand-2)
}

/* 글 이동 줄 — 동그란 화살표 + 흰 목록 버튼 (2026-09-23, 공지·후기 공용) */
.notice-view .board_li_wrap,
.ess-rv-view .board_li_wrap {
  padding-top: calc(4.5*var(--r))
}

.notice-view .board_li_wrap .box,
.ess-rv-view .board_li_wrap .box {
  gap: calc(1.2*var(--r))
}

.notice-view .board_li_wrap .ico,
.notice-view .board_li_wrap .nav_ico,
.ess-rv-view .board_li_wrap .ico,
.ess-rv-view .board_li_wrap .nav_ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(4*var(--r));
  height: calc(4*var(--r));
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  background: var(--bg-2);
  color: #8a90a0;
  transition: background-color .25s, color .25s
}

.notice-view .board_li_wrap .box:not(.none):hover .ico,
.notice-view .board_li_wrap .box:not(.none):hover .nav_ico,
.ess-rv-view .board_li_wrap .box:not(.none):hover .ico,
.ess-rv-view .board_li_wrap .box:not(.none):hover .nav_ico {
  background: var(--brand-tint);
  color: var(--brand)
}

.notice-view .view_btn,
.ess-rv-view .view_btn {
  padding: calc(1.4*var(--r)) calc(3.6*var(--r));
  border: 1px solid #2b2f38;
  background: #fff;
  color: #2b2f38;
  font-weight: 500
}

.notice-view .view_btn:hover,
.ess-rv-view .view_btn:hover {
  background: #2b2f38;
  color: #fff
}

.ess-rv-view .board_li_wrap .nav_ico svg {
  height: auto;
  fill: none;
  stroke: currentColor
}

@media (max-width:768px) {
  .notice-view .view_top .tit, .ess-rv-view .view_top .tit {
    font-size: 20px
  }

  .notice-view .board_li_wrap .box .nav_label, .ess-rv-view .board_li_wrap .box .nav_label {
    display: none
  }
}

/* ── 푸터 — **우아미 푸터 CSS 이식** (피그마 80:1107 과 같은 구성) ─────
   우아미 루트는 `clamp(7.2px, 0.6098vw, 10px)` — **위아래 모두 한계가 있다.**
   🔴 상한 10px 를 빼먹으면 1640px 보다 넓은 화면에서 글자가 계속 커진다(2560px 에서 1.5배).
   우리 테마는 고정 글자 크기라 푸터 안에서만 그 단위를 되살린다 → --r.
   이렇게 하면 우아미와 **같은 폭에서 같은 px** 이 나온다(1600px 실측 대조 완료).
   구조: 왼쪽 50% 한 칸에 위치정보(1행)·회사정보(2행), 오른쪽 칸은 지도가 두 행을 덮는다. */
/* 레퍼런스 푸터 실측(1600px)에 맞춘 값들 — 기존 유동 단위(--r)가 소수점으로 흔들려
   섹션마다 15.6·17.5 같은 값이 나왔다. 글자는 --r3 단계로 못 박는다. */
.site-footer {
  --r: clamp(7.2px, 0.6098vw, 10px);
  --ft-line: #ddd;
  --ft-pd: 20px;
  background: #fff;
  color: var(--ink)
}

.site-footer .ft_cont {
  width: 100%;
  border-top: 1px solid var(--ft-line)
}

.site-footer .cont_box {
  display: grid;
  grid-template-columns: 50%
}

.site-footer .ft_location {
  padding: calc(8*var(--r)) calc(10*var(--r)) 0
}

.site-footer .map {
  grid-column: 2;
  grid-row: 1/3;
  position: relative;
  background: var(--bg-2)
}

/* 🔴 자리표시자에만 걸어야 한다. `.map a` · `.map img` 로 두면 지도가 들어왔을 때
   네이버가 만든 타일 img 와 로고 a 까지 덮어써 지도가 통째로 깨진다(2026-09-16). */
.site-footer .map .map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

.site-footer .map .map-fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.map-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  color: var(--text-2);
  white-space: nowrap
}

.ft_location .address .txt {
  display: flex;
  align-items: center;
  gap: 1rem
}

.ft_location .copy_target {
  margin: 0;
  font-size: 36px;
  font-weight: 750;
  color: var(--ink)
}

.way_list {
  list-style: none;
  margin: calc(2*var(--r)) 0 0;
  padding: 0
}

.way_list .item {
  display: flex;
  align-items: flex-start
}

.way_list .item+.item {
  margin-top: calc(1.5*var(--r))
}

.way_list .tit {
  flex-shrink: 0;
  padding: .5em .625em;
  line-height: 1;
  margin-right: 1em;
  border-radius: calc(.4*var(--r));
  background: var(--brand);
  color: #fff;
  font-size: max(calc(1.35*var(--r)), 13px);
  font-weight: 600
}

.way_list .txt_box {
  font-size: max(calc(1.8*var(--r)), 15px);
  color: var(--ink);
  font-weight: 500
}

.way_list .txt {
  margin: 0
}

.way_list .info_txt {
  margin: .3em 0 0;
  font-size: max(calc(1.6*var(--r)), 13px);
  color: var(--text-2)
}

.btn_list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .6em;
  margin: calc(3*var(--r)) 0 0;
  padding: 0
}

.btn_list .item {
  display: flex;
  align-items: center
}

.btn_list .item a {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  padding: .6em 1.5em .5em 1.2em;
  border: 1px solid var(--ft-line);
  border-radius: calc(10*var(--r));
  color: var(--ink);
  transition: background .2s, color .2s
}

.btn_list .item a:hover {
  background: #1c1c1c;
  color: #fff
}

.btn_list .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 1.4em;
  margin-right: .3em
}

.btn_list .ico img {
  display: block;
  height: 100%;
  width: auto
}

.btn_list .item:nth-child(-n+3) .ico {
  height: 1.8em
}

.info_cont {
  display: flex;
  margin-top: calc(6*var(--r))
}

.info_cont .tit {
  font-size: max(calc(2*var(--r)), 15px);
  font-weight: 750;
  line-height: 1;
  color: var(--ink);
  margin-bottom: .8em
}

.info_cont .tel {
  margin-right: calc(14*var(--r))
}

.info_cont .tel a {
  font-size: 36px;
  font-weight: 750;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap
}

.info_cont .time_table .table {
  border-collapse: collapse;
  width: auto;
  text-align: left;
  font-size: max(calc(1.7*var(--r)), 14px);
  font-weight: 500;
  margin-bottom: .8em
}

.info_cont .time_table tr {
  display: block
}

.info_cont .time_table tr+tr {
  margin-top: .2em
}

.info_cont .time_table tr td {
  display: inline-block;
  color: var(--ink);
  line-height: 0.5;
}

.info_cont .time_table tr td:last-child {
  white-space: nowrap
}

.info_cont .time_table tr td:first-child {
  min-width: calc(13*var(--r));
  padding-right: .6em;
  white-space: nowrap;
  font-weight: 600
}

.info_cont .time_table em {
  font-style: normal;
  color: var(--brand);
  font-size: .9em
}

.info_cont .time_table .info_txt {
  margin: 0;
  font-size: max(calc(1.6*var(--r)), 13px);
  color: var(--text-2);
  line-height: 1.7
}

.ft_info {
  grid-row: 2;
  margin-top: calc(4*var(--r));
  padding: calc(5*var(--r)) calc(10*var(--r)) calc(5*var(--r));
  border-top: 1px solid var(--ft-line);
  font-size: max(calc(1.6*var(--r)), 14px)
}

.ft_info .top {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.ft_info .ft_logo {
  display: flex;
  align-items: center;
  gap: 5.1%;
  width: 150px;
  max-width: 100%
}

.ft_info .ft_logo img {
  display: block;
  height: auto
}

.ft_info .ft_logo .mark {
  width: 20.4%
}

.ft_info .ft_logo .word {
  width: 74.5%
}

.ft_info .sns_list {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0
}

.ft_info .sns_list .item+.item {
  margin-left: .5em
}

/* 아이콘 svg 는 인라인이라 색을 여기서 준다(2026-09-16) */
.ft_info .sns_list .ico {
  display: block;
  padding: 4px;
  color: var(--text-2);
  transition: color .3s ease
}

.ft_info .sns_list .ico:hover {
  color: var(--brand)
}

.ft_info .sns_list .ico svg {
  display: block;
  width: calc(3.75*var(--r3));
  height: auto
}

.ft_info .btm {
  margin-top: calc(3*var(--r))
}

.ft_info .f_menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0
}

.ft_info .f_menu .item+.item {
  margin-left: 1.6em
}

.ft_info .f_menu a {
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  transition: color .3s ease
}

.ft_info .f_menu a:hover {
  color: var(--brand)
}

.ft_info .biz {
  margin: calc(1.8*var(--r)) 0 0;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.8;
  max-width: 550px
}

.ft_info .copy {
  margin: calc(2.4*var(--r)) 0 0;
  line-height: 1;
  font-size: .9em;
  color: #828282
}

/* 초광폭(2001px+)에서는 좌우 여백을 더 넉넉히 — 우아미와 같은 규칙 */
@media (min-width:2001px) {
  .site-footer .ft_location {
    padding: calc(10*var(--r)) calc(13*var(--r)) 0
  }
}

@media (max-width:1640px) {
  .site-footer .ft_location {
    padding: calc(7*var(--r)) 10% 0
  }

  .ft_info {
    padding: calc(4*var(--r)) 10% calc(7*var(--r))
  }

  .info_cont .tel {
    margin-right: calc(7*var(--r))
  }
}

@media (max-width:1240px) {
  .site-footer .cont_box {
    grid-template-columns: minmax(0, 1fr)
  }

  .site-footer .ft_location {
    grid-row: 1;
    padding: 60px var(--ft-pd)
  }

  .site-footer .map {
    grid-row: 2;
    grid-column: 1;
    aspect-ratio: 5/2
  }

  .ft_info {
    grid-row: 3;
    margin-top: 0;
    padding-left: var(--ft-pd);
    padding-right: var(--ft-pd)
  }
}

@media (max-width:769px) {

  .ft_location .copy_target,
  .info_cont .tel a {
    font-size: 24px
  }

  .btn_list .item a {
    font-size: 14px
  }

  .site-footer .ft_location {
    padding: 50px var(--ft-pd) 40px
  }

  .ft_info {
    padding: 40px var(--ft-pd) 60px
  }

  .site-footer .map {
    aspect-ratio: 20/11
  }
}

@media (max-width:600px) {
  .site-footer .ft_location {
    padding: 40px var(--ft-pd) 30px
  }

  .ft_info {
    margin-top: 0;
    padding: 30px var(--ft-pd) 50px
  }

  .ft_location .copy_target {
    font-size: 18px
  }

  .btn_list {
    gap: 5px
  }

  .btn_list .item a {
    font-size: 12px;
    padding: 10px
  }

  .btn_list .ico {
    margin-right: 5px
  }

  .info_cont {
    flex-direction: column
  }

  .info_cont .tel {
    margin-right: 0
  }

  .info_cont .tel a {
    font-size: 20px
  }

  .info_cont .time_table {
    margin-top: 30px
  }

  .info_cont .tit {
    margin-bottom: 10px
  }

  .ft_info .top {
    flex-direction: column;
    align-items: flex-start
  }

  .ft_info .sns_list {
    margin-top: 30px
  }

  .ft_info .f_menu {
    overflow-x: auto;
    width: calc(100% + var(--ft-pd)*2);
    margin-left: calc(var(--ft-pd)*-1);
    padding: 0 var(--ft-pd)
  }

  .ft_info .f_menu::-webkit-scrollbar {
    display: none
  }

  .ft_info .f_menu .item a {
    white-space: nowrap
  }

  .ft_info .biz {
    max-width: 100%;
    font-size: 14px
  }
}

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width:1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr)
  }

  .flow {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* 메뉴 7개가 겹치기 시작하는 지점에서 모바일 메뉴로 넘긴다 */
@media (max-width:1440px) {
  :root {
    --hd-h: 70px
  }

  .page-hero {
    padding-top: 40px
  }

  .crumb {
    gap: 28px
  }

  .crumb-home img {
    width: 42px;
    height: 42px
  }

  .page-hero-tit {
    margin-top: 52px
  }

  .gnb-wrap,
  .gnb-panel {
    display: none
  }

  .nav-toggle {
    display: block
  }

  .brand-mark {
    width: 32px;
    height: 32px
  }

  .brand-word {
    width: 116px;
    height: 22px
  }
}

@media (max-width:860px) {

  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr
  }

  .hero {
    padding: 56px 0 48px
  }

  .section {
    padding: 54px 0
  }
}

@media (max-width:768px) {
  :root {
    --hd-h: 54px;
    --hd-pad: 15px
  }

  .page-hero {
    padding-top: 28px
  }

  .crumb {
    gap: 18px
  }

  .crumb-home img {
    width: 34px;
    height: 34px
  }

  .crumb-btn {
    font-size: 14px;
    gap: 7px
  }

  .crumb-arrow {
    width: 11px;
    height: 6px
  }

  .crumb-menu a {
    font-size: 14px;
    padding: 7px 14px
  }

  .page-hero-tit {
    margin-top: 34px;
    gap: 10px
  }

  .brand-mark {
    width: 28px;
    height: 28px
  }

  .brand-word {
    width: 100px;
    height: 19px
  }

  .util-icon {
    width: 26px;
    height: 26px
  }

  .m-toggle,
  .m-link {
    padding: 16px var(--hd-pad);
    font-size: 16px
  }
}

/* ── 오시는 길 (주소 · 지도 바로가기 · 지도 · 주차/대중교통) ────────
   1600px 실측: 주소 30/700 줄높이 48 · 복사아이콘 24 · 바로가기 버튼 위 32,
   패딩 14.4/25.6/12.8, 반경 80, 테두리 1px #ddd, 글자 16/600, 아이콘칸 22(오른쪽 11.2), 버튼 사이 16
   지도 위 56 · 반경 19.2 · 가로세로 2:1 · 소제목 위 128, 36/700
   카드 3열 · 원 130 (아래 16) · 아이콘 44 · 제목 14/700 · 본문 17/700(아래 12.8) · 주석 16
   칩 14/700 패딩 7/12.6 반경 6.4 오른쪽 14
   390px: 18 / 14 / 20 / 8·10 / 60 / 10 / 14(7) / 5 / 30 / 15 / 10:9 / 80 / 26 / 1열 / 75 / 31 / 10 / 15 / 14 / 12 */
.loc-sect {
  padding: calc(16*var(--r3)) 0 calc(12*var(--r3))
}

.loc-sect .wrap {
  max-width: var(--wrap)
}

.loc-addr {
  display: flex;
  align-items: center;
  gap: 6px
}

/* 주소 줄 — 섹션 제목(36)보다 아래, 카드 제목(24)과 같은 단계로 둔다.
   레퍼런스는 30 이지만 이 사이트의 네 단계에 맞춘다. */
.loc-addr-txt {
  margin: 0;
  font-size: calc(3*var(--r3));
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink)
}

.loc-copy {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  transition: color .2s
}

.loc-copy:hover {
  color: var(--brand)
}

.loc-copy svg {
  width: calc(2.4*var(--r3));
  height: calc(2.4*var(--r3))
}

.loc-copy-msg {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--black);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s
}

.loc-copy:hover .loc-copy-msg,
.loc-copy:focus-visible .loc-copy-msg,
.loc-copy.is-done .loc-copy-msg {
  opacity: 1;
  visibility: visible
}

.loc-copy-msg .on-done,
.loc-copy.is-done .loc-copy-msg .on-idle {
  display: none
}

.loc-copy.is-done .loc-copy-msg .on-done {
  display: inline
}

.loc-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(2*var(--r3));
  margin: calc(4*var(--r3)) 0 0;
  padding: 0;
  list-style: none
}

.loc-links a {
  display: inline-flex;
  align-items: center;
  padding: calc(1.8*var(--r3)) calc(3.2*var(--r3)) calc(1.6*var(--r3));
  border: 1px solid var(--line);
  border-radius: 80px;
  background: #fff;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  transition: border-color .2s, color .2s
}

.loc-links a:hover {
  border-color: var(--brand);
  color: var(--brand)
}

.loc-links .ico {
  flex: none;
  width: calc(2.75*var(--r3));
  margin-right: calc(1.4*var(--r3));
  display: flex;
  align-items: center;
  justify-content: center
}

.loc-links .ico img {
  width: 100%;
  height: auto
}

.loc-map {
  --map-ratio: 2;
  margin: calc(7*var(--r3)) 0 0;
  border-radius: calc(2.4*var(--r3));
  overflow: hidden;
  background: var(--bg-2)
}

/* 지도는 칸 크기에 맞춰 js 가 그린다 — 여기서 늘리면 축척이 틀어진다 */
.loc-map .root_daum_roughmap {
  margin: 0 !important
}

.loc-tit {
  margin: calc(16*var(--r3)) 0 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink)
}

.way-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: calc(4*var(--r3)) 0 0;
  padding: 0;
  list-style: none
}

.way-mark {
  width: calc(16.25*var(--r3));
  height: calc(16.25*var(--r3));
  margin-bottom: calc(2*var(--r3));
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--brand);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.way-mark .ico {
  display: block;
  width: calc(5.5*var(--r3));
  height: calc(5.5*var(--r3))
}

.way-mark .ico svg {
  width: 100%;
  height: 100%;
  display: block
}

.way-mark .tit {
  margin-top: calc(.85*var(--r3));
  font-size: calc(1.75*var(--r3));
  font-weight: 700;
  line-height: 1;
  color: var(--brand)
}

.way-body .txt {
  margin: 0 0 calc(1.6*var(--r3));
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink)
}

.way-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(1.75*var(--r3));
  margin: 0 0 calc(1.6*var(--r3));
  padding: 0;
  list-style: none
}

.way-tags .tag {
  display: inline-block;
  padding: calc(.875*var(--r3)) calc(1.575*var(--r3));
  border-radius: calc(.8*var(--r3));
  font-size: calc(1.75*var(--r3));
  font-weight: 700;
  line-height: 1;
  color: #fff
}

.way-tags .tone-line7 {
  background: #747f00
}

.way-tags .tone-stop {
  background: var(--brand)
}

.way-body .note {
  margin: 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  line-height: 1.2;
  color: var(--text-2)
}

@media (max-width:768px) {
  .loc-sect {
    padding: 100px 0 60px
  }

  .loc-addr-txt {
    font-size: 18px
  }

  .loc-copy svg {
    width: 15px;
    height: 15px
  }

  .loc-links {
    gap: 5px;
    margin-top: 20px
  }

  .loc-links a {
    padding: 8px 10px;
    border-radius: 60px;
    font-size: 10px
  }

  .loc-links .ico {
    width: 14px;
    margin-right: 7px
  }

  .loc-map {
    --map-ratio: 1.111;
    margin-top: 30px;
    border-radius: 15px
  }

  .loc-tit {
    margin-top: 80px;
    font-size: 26px
  }

  .way-list {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 20px
  }

  .way-item {
    position: relative;
    min-height: 75px;
    padding: 10px 0 0 90px
  }

  .way-mark {
    position: absolute;
    left: 0;
    top: 0;
    width: 75px;
    height: 75px;
    margin: 0
  }

  .way-mark .ico {
    width: 31px;
    height: 31px
  }

  .way-mark .tit {
    margin-top: 3px;
    font-size: 10px
  }

  .way-body .txt {
    margin-bottom: 9.6px;
    font-size: 14px
  }

  .way-tags {
    gap: 8px;
    margin-bottom: 9.6px
  }

  .way-tags .tag {
    padding: 6px 10.8px;
    border-radius: 4.8px;
    font-size: 12px
  }

  .way-body .note {
    font-size: 14px
  }
}

/* ── 자주 묻는 질문 (아코디언) ────────────────────────────────
   1600px 실측: 섹션 위 128 · 제목 36/700 줄높이 1.5 · 목록 위 56
   칸 사이 19.2 · 닫힘 반경 48(알약) 배경 #f6f8fa · 열림 반경 19.2 배경 브랜드
   질문칸 패딩 35.2/43.2 (열리면 아래 19.2) · 질문 18/700 · Q 표식 왼쪽 30
   화살표 16 (닫힘 #aaa · 열림 흰색, 열리면 180°)
   답변 패딩 0/73.2/40 · 16/500 줄높이 1.6
   390px: 80 / 26 / 30 / 15 / 36 / 15 / 20·16(15) / 16 / 25 / 14 / 0·41·25 / 14 */
.faq-sect {
  padding: calc(16*var(--r3)) 0 calc(12*var(--r3))
}

.faq-sect .wrap {
  max-width: var(--wrap)
}

/* 머리말은 시안 87:2671 — 제목 45/700 줄높이 1.5, 20px 아래에 설명 20/400 줄높이 1.7 */
.faq-head .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink)
}

.faq-head .txt {
  margin: calc(2*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink)
}

.faq-list {
  margin: calc(7*var(--r3)) 0 0;
  padding: 0;
  list-style: none
}

.faq-row {
  background: var(--bg-2);
  border-radius: calc(6*var(--r3));
  transition: background-color .3s, border-radius .3s
}

.faq-row+.faq-row {
  margin-top: calc(2.4*var(--r3))
}

.faq-row.is-open {
  background: var(--brand);
  border-radius: calc(2.4*var(--r3))
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(2.25*var(--r3));
  width: 100%;
  padding: calc(4.4*var(--r3)) calc(5.4*var(--r3));
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: color .3s, padding .3s
}

.faq-row.is-open .faq-q {
  padding-bottom: calc(2.4*var(--r3));
  color: #fff
}

.faq-q .tit {
  position: relative;
  padding-left: calc(3.75*var(--r3));
  font-size: calc(2.25*var(--r3));
  font-weight: 700;
  line-height: 1.6
}

/* 닫힌 줄의 Q 표식은 브랜드색, 열린 줄은 흰색 (시안 80:1532 · 레퍼런스 동일) */
.faq-q .tit::before {
  content: 'Q.';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--brand);
  transition: color .3s
}

.faq-row.is-open .faq-q .tit::before {
  color: #fff
}

/* 화살표는 브레드크럼과 같은 SVG 를 마스크로 써서 글자색을 따라가게 한다 */
.faq-ico {
  flex: none;
  width: calc(2*var(--r3));
  height: calc(2*var(--r3));
  background-color: #aaa;
  transition: transform .3s, background-color .3s;
  -webkit-mask: url(img/crumb-arrow.svg) no-repeat center/contain;
  mask: url(img/crumb-arrow.svg) no-repeat center/contain
}

.faq-row.is-open .faq-ico {
  background-color: #fff;
  transform: rotate(180deg)
}

.faq-a {
  padding: 0 calc(9.15*var(--r3)) calc(5*var(--r3))
}

.faq-a[hidden] {
  display: none
}

/* 답변 글자는 시안대로 흰색이다 — 브랜드색 위라 별도 색을 만들면 통일이 깨진다 */
.faq-a .txt {
  margin: 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, .8)
}

@media (max-width:768px) {
  .faq-sect {
    padding: 80px 0 60px
  }

  .faq-head .tit {
    font-size: 26px
  }

  .faq-head .txt {
    margin-top: 12px;
    font-size: 14px
  }

  .faq-list {
    margin-top: 30px
  }

  .faq-row {
    border-radius: 36px
  }

  .faq-row+.faq-row {
    margin-top: 15px
  }

  .faq-row.is-open {
    border-radius: 15px
  }

  .faq-q {
    gap: 16px;
    padding: 20px 16px
  }

  .faq-row.is-open .faq-q {
    padding-bottom: 15px
  }

  .faq-q .tit {
    padding-left: 25px;
    font-size: 17px
  }

  .faq-ico {
    width: 14px;
    height: 14px
  }

  .faq-a {
    padding: 0 41px 25px
  }

  .faq-a .txt {
    font-size: 14px
  }
}

/* ── 히어로 섹션 (시안 87:2550 · 동작은 레퍼런스 히어로) ──────────────
   시안(2000px 캔버스) 값 ÷10 = --r3 배수:
     위아래 160 → 16 · 카피와 이미지 사이 50 → 5 · 이미지와 칩 사이 90 → 9
     제목 48 → 4.8 (줄높이 1.5) · 설명 18 → 1.8 (줄높이 1.7) · 칩 24 → 2.4 (줄높이 1.4)
     칩 패딩 20/35 → 2/3.5 · 칩 사이 30 → 3 · 이미지 반경 25 → 2.5 · 이미지 비율 1600:576
   동작: 카피가 화면에 들어오면 50px 아래에서 0.6s ease-in-out 으로 떠오르고
         설명이 0.3s 늦게 따라온다. 칩 줄은 같은 목록 두 벌을 정확히 절반만큼 밀어 순환한다. */
/* 제목 블록 끝 394 → 히어로 시작 488, 시안 간격 94 ÷1.25 = 9.4 단위 */
.hero-sect {
  margin-top: calc(9.4*var(--r3));
  padding: calc(16*var(--r3)) 0;
  background: var(--brand);
  color: #fff;
  overflow: hidden
}

.hero-sect .wrap {
  max-width: var(--wrap)
}

.hero-copy .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.5
}

.hero-copy .txt {
  margin: calc(2*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7
}

/* 떠오르는 등장 — .is-in 은 화면에 들어올 때 js 가 붙인다 */
.hero-copy>* {
  opacity: 0;
  transform: translateY(calc(6.25*var(--r3)));
  transition: opacity .6s ease-in-out, transform .6s ease-in-out
}

.hero-copy.is-in>* {
  opacity: 1;
  transform: translateY(0)
}

.hero-copy.is-in .txt {
  transition-delay: .3s
}

.hero-img {
  margin: calc(5*var(--r3)) 0 0;
  border-radius: calc(2.5*var(--r3));
  overflow: hidden;
  aspect-ratio: 1600/576
}

.hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* 이미지를 받기 전 빈 자리 — 시안의 반투명 판과 같은 자리를 잡아 둔다 */
.hero-img.is-empty {
  background: rgba(0, 0, 0, .2)
}

.hero-chips {
  margin: calc(9*var(--r3)) 0 0;
  overflow: hidden
}

.hero-track {
  --chip-gap: calc(3*var(--r3));
  display: flex;
  align-items: center;
  gap: var(--chip-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: essence-roll var(--roll-dur, 60s) linear infinite
}

.hero-track li {
  flex: none;
  padding: calc(2*var(--r3)) calc(3.5*var(--r3));
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-size: calc(2.4*var(--r3));
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap
}

/* 둘째 줄은 반대로 흐른다 */
.hero-track+.hero-track {
  margin-top: calc(3.1*var(--r3));
  animation-direction: reverse
}

/* 목록이 두 벌이라 「절반 + 사이 간격의 절반」만큼 밀면 이음매가 없다 */
@keyframes essence-roll {
  to {
    transform: translateX(calc(-50% - var(--chip-gap) / 2))
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-track {
    animation: none
  }

  .hero-copy>* {
    opacity: 1;
    transform: none;
    transition: none
  }
}

@media (max-width:768px) {
  .hero-sect {
    margin-top: 56px;
    padding: 80px 0 60px
  }

  .hero-copy .tit {
    font-size: 26px
  }

  .hero-copy .txt {
    margin-top: 12px;
    font-size: 14px
  }

  .hero-copy>* {
    transform: translateY(30px)
  }

  .hero-img {
    margin-top: 24px;
    border-radius: 15px
  }

  .hero-chips {
    margin-top: 40px
  }

  .hero-track {
    --chip-gap: 10px
  }

  .hero-track+.hero-track {
    margin-top: 15px
  }

  .hero-track li {
    padding: 10px 18px;
    font-size: 14px
  }
}

/* ── 푸터 지도 (네이버 지도 v3) ────────────────────────────────
   지도가 뜨기 전·인증 실패 때는 링크 자리표시자가 보이고,
   js 가 지도를 올리면 .is-live 가 붙어 링크가 사라진다. */
.site-footer .map {
  position: relative
}

/* 네이버가 인증 실패 시 이 칸에 인라인 position 을 덮어쓴다 — 폭·높이는 따로 못 박아 둔다 */
.site-footer .map .map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .4s ease
}

.site-footer .map.is-live .map-canvas {
  opacity: 1
}

.site-footer .map.is-live .map-fallback {
  display: none
}

/* ── 약관 모달 (푸터 개인정보처리방침 · 이용약관) ────────────────
   레퍼런스 실측: 화면 가운데 · 오버레이 rgba(0,0,0,.5) · 상자 최대 600 / 높이 최대 80vh
   반경 16 · 그림자 0 10 40 rgba(0,0,0,.2) · 열릴 때 20px 아래에서 올라오며 0.3s
   머리 패딩 24/24/16 + 아래 경계선 · 제목 20/700 · 닫기 40×40 반경 8 (호버 회색)
   본문 패딩 24 · 14/1.7 · 세로 스크롤 · 확인 버튼 여백 16/24/24 패딩 16 반경 12 16/600
   768 이하: 상자가 화면 전체를 덮고 모서리를 없앤다 */
.terms-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease
}

.terms-modal[hidden] {
  display: none
}

.terms-modal.is-open {
  opacity: 1;
  visibility: visible
}

.terms-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5)
}

.terms-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
  transform: translateY(20px);
  transition: transform .3s ease
}

.terms-modal.is-open .terms-modal-content {
  transform: translateY(0)
}

.terms-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0
}

.terms-modal-tit {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink)
}

.terms-modal-close {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .2s ease
}

.terms-modal-close:hover {
  background: var(--bg-2)
}

.terms-modal-close svg {
  width: 24px;
  height: 24px
}

.terms-modal-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2)
}

.terms-modal-body:focus {
  outline: none
}

.terms-modal-body p {
  margin: 0 0 12px
}

.terms-modal-body h3,
.terms-modal-body h4 {
  margin: 20px 0 12px;
  font-size: 16px;
  color: var(--ink)
}

.terms-modal-body ul,
.terms-modal-body ol {
  margin: 0 0 12px;
  padding-left: 1.2em
}

.terms-modal-ok {
  margin: 16px 24px 24px;
  padding: 16px;
  flex-shrink: 0;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease
}

.terms-modal-ok:hover {
  background: var(--brand-2)
}

@media (max-width:768px) {
  .terms-modal-content {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0
  }

  .terms-modal-head {
    padding: 20px 16px 16px
  }

  .terms-modal-body {
    padding: 16px
  }

  .terms-modal-ok {
    margin: 16px
  }
}

@media (prefers-reduced-motion:reduce) {

  .terms-modal,
  .terms-modal-content {
    transition: none
  }
}

/* ── 질환 설명 섹션 (시안 87:2590 · 치수는 레퍼런스 섹션에 맞춤) ──────
   ⚠️ 시안값(제목 42·본문 18)을 ÷1.25 해서 넣었더니 33.6/14.4 로,
      이 사이트의 다른 섹션(진료시간·인트로 38.4/16)보다 혼자 작았다.
      레퍼런스 실측이 38.4/16 이라 그쪽에 맞춘다 — 사이트 전체가 한 스케일이 된다.
   1600px 실측 대조: 섹션 위 200 · 글 44.5% · 이미지 45%(3:2) 사이 48 · 반경 26.64
                     제목 38.4/700 줄높이 1.4 · 본문 16 줄높이 1.7 위 20.8 · **위 맞춤**
   390px: 100 / 세로 쌓기 / 이미지 위 30 (5:3) 반경 10 / 26 / 14 위 15 */
.def-sect {
  padding: calc(25*var(--r3)) 0 0
}

.def-sect .wrap {
  max-width: var(--wrap);
  display: flex;
  align-items: flex-start;
  justify-content: space-between
}

/* 글을 사진 세로 가운데에 둔다(2026-10-07 김치킨). 좁은 화면은 세로 쌓기라 제외 */
@media (min-width:769px) {
  .def-sect .wrap {
    align-items: center
  }
}

.def-copy {
  flex: 0 0 44.5%;
  min-width: 0
}

.def-copy .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.def-copy .txt {
  margin: calc(2.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary);
  text-wrap: pretty
}

/* 손으로 넣은 줄바꿈은 글 칸이 534px 로 고정되는 구간에서만 살린다.
   그 밖에서는 칸이 줄거나 글자가 커져 오히려 어긋나므로 브라우저에 맡긴다.
   (1240 이하 = 칸이 줄어듦 · 2000 초과 = 글자가 20px 이상으로 커짐) */
.def-copy .txt br {
  display: none
}

@media (min-width:1241px) and (max-width:2000px) {
  .def-copy .txt br {
    display: inline
  }
}

.def-copy>* {
  opacity: 0;
  transform: translateY(calc(6.25*var(--r3)));
  transition: opacity .6s ease-in-out, transform .6s ease-in-out
}

.def-copy.is-in>* {
  opacity: 1;
  transform: translateY(0)
}

.def-copy.is-in .txt {
  transition-delay: .3s
}

.def-img {
  flex: 0 0 45%;
  aspect-ratio: 3/2;
  border-radius: calc(3.33*var(--r3));
  overflow: hidden
}

.def-img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.def-img.is-empty {
  background: #d9d9d9
}

@media (prefers-reduced-motion:reduce) {
  .def-copy>* {
    opacity: 1;
    transform: none;
    transition: none
  }
}

@media (max-width:768px) {
  .def-sect {
    padding-top: 100px
  }

  .def-sect .wrap {
    flex-direction: column;
    align-items: stretch
  }

  .def-copy {
    flex: none
  }

  .def-copy .tit {
    font-size: 26px
  }

  .def-copy .txt {
    margin-top: 15px;
    font-size: 14px
  }

  .def-copy>* {
    transform: translateY(30px)
  }

  .def-img {
    flex: none;
    width: 100%;
    margin-top: 30px;
    aspect-ratio: 5/3;
    border-radius: 10px
  }
}

/* ── 원인 슬라이드 섹션 (시안 87:2589 · 구조와 동작은 레퍼런스 슬라이더) ──
   레퍼런스 1600px 실측을 우리 단위(--r3, 1600 에서 8px)로 옮긴 값:
     카드 이미지 468×289(1.62:1) 반경 23.4 오른쪽 58.5 · 옆 카드 흐리게(0.3)
     ⚠️ 카드 글자는 레퍼런스 실측(29.3/17.6)이 이 사이트 본문(16)보다 커서 쓰지 않았다.
        시안의 카드 제목 30 ÷1.25 = 24 와 사이트 본문 16 으로 맞춘다.
     컨트롤: 원형 버튼 50.7 테두리 1px #bfbfbf · 진행바 64×4 반경 999 배경 #e6e6e6
             번호 14.6/600 · 진행바 왼쪽 11.7 · 버튼묶음 왼쪽 31.2 · 버튼 사이 10.7
   제목·부제는 이 사이트의 다른 섹션과 같은 크기로 맞춘다(38.4 / 16).
   ⚠️ 카드 왼쪽 끝은 제목과 같은 선에서 시작한다 — 화면 폭에서 컨테이너를 뺀 절반만큼 민다. */
.causes-sect {
  padding: calc(25*var(--r3)) 0 0;
  overflow: hidden
}

.causes-sect .wrap {
  max-width: var(--wrap)
}

/* 섹션 아래 단서 한 줄 — 대조표·재료 섹션의 ※ 줄과 같은 톤 */
.causes-note {
  margin: calc(4*var(--r3)) 0 0;
  font-size: calc(1.75*var(--r3));
  line-height: 1.7;
  color: var(--text-2)
}

.guide-note {
  margin: calc(4*var(--r3)) 0 0;
  font-size: calc(1.75*var(--r3));
  line-height: 1.7;
  color: var(--text-2)
}

.causes-tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.causes-sub {
  margin: calc(2.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

/* 카드 줄의 왼쪽 시작점 — 제목과 같은 선. 컨트롤도 이 선을 기준으로 놓는다 */
.causes-slide {
  --strip-pd: max(20px, calc((100% - var(--in)) / 2));
  position: relative;
  margin-top: calc(6*var(--r3));
  padding-left: var(--strip-pd)
}

/* ⚠️ overflow 를 풀면 앞 카드가 왼쪽으로 새어 나온다.
   보여야 할 0.4장은 컨테이너 안에 이미 들어와 있으므로 기본 클리핑을 그대로 둔다. */
.causes-swiper {
  overflow: hidden
}

/* 가운데 카드만 또렷하게, 옆 카드는 흐리게 — 레퍼런스 실측 0.3 */
.cause-item {
  opacity: .3;
  transition: opacity .6s ease-in-out
}

.cause-item.swiper-slide-active {
  opacity: 1
}

.cause-item {
  display: flex;
  align-items: center
}

.cause-item .img_box {
  position: relative;
  flex: 0 0 46.5%;
  margin-right: calc(7.3*var(--r3));
  aspect-ratio: 570/351;
  border-radius: calc(2.93*var(--r3));
  overflow: hidden
}

.cause-item .img_box.is-empty {
  background: #d9d9d9
}

.cause-item .img_box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* 아래쪽을 비워 둔다 — 그 자리에 컨트롤이 얹힌다(레퍼런스 실측 87.8) */
.cause-item .txt_box {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: calc(6*var(--r3))
}

.cause-item .cont-tit {
  margin: 0;
  font-size: calc(3*var(--r3));
  font-weight: 700;
  line-height: 1.5;
  color: var(--black)
}

.cause-item .txt {
  margin: calc(1.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

/* 컨트롤 — 카드의 글 칸 아래에 맞춘다. 카드 폭은 슬라이더가 정하므로 js 가 --slide-w 로 알려준다 */
/* 컨트롤은 카드 줄 위에 얹혀 글 칸 아래에 붙는다 — 레퍼런스 실측 bottom 37.1
   카드 폭은 슬라이더가 정하므로 js 가 --slide-w 로 알려준다 */
/* 🔴 슬라이더 본체에 z-index:1 이 걸려 있어 그냥 얹으면 컨트롤이 그 아래로 깔린다.
   보이기는 하는데(배경이 투명하니까) 클릭이 슬라이드로 가서 버튼이 안 눌린다. */
.causes-ctrl {
  position: absolute;
  z-index: 2;
  left: var(--strip-pd);
  bottom: calc(4.6*var(--r3));
  display: flex;
  align-items: center;
  padding-left: calc(var(--slide-w, 0px) * .465 + 7.3*var(--r3))
}

.causes-ctrl .paging {
  display: flex;
  align-items: center
}

.causes-ctrl .current,
.causes-ctrl .total {
  min-width: calc(3.3*var(--r3));
  text-align: center;
  font-size: calc(1.83*var(--r3));
  font-weight: 600;
  line-height: 1.75;
  color: var(--ink)
}

.causes-ctrl .swiper-pagination-progressbar {
  position: relative;
  width: calc(8*var(--r3));
  height: 4px;
  margin: 0 calc(1.46*var(--r3));
  border-radius: 999px;
  overflow: hidden;
  background: #e6e6e6
}

.causes-ctrl .swiper-pagination-progressbar-fill {
  background: var(--brand)
}

.causes-ctrl .btn-wrap {
  display: flex;
  align-items: center;
  margin-left: calc(3.9*var(--r3))
}

.causes-ctrl .sbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(6.34*var(--r3));
  height: calc(6.34*var(--r3));
  padding: 0;
  margin-right: calc(1.33*var(--r3));
  background: transparent;
  border: 1px solid #bfbfbf;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease
}

.causes-ctrl .sbtn:last-child {
  margin-right: 0
}

.causes-ctrl .sbtn:hover {
  border-color: var(--brand);
  background: var(--brand)
}

.causes-ctrl .sbtn .ico {
  width: 25%;
  height: 25%;
  background-color: var(--ink);
  transition: background-color .3s ease;
  -webkit-mask: url(img/slide-arrow.svg) no-repeat center/contain;
  mask: url(img/slide-arrow.svg) no-repeat center/contain
}

.causes-ctrl .sbtn:hover .ico {
  background-color: #fff
}

.causes-ctrl .sbtn.prev .ico {
  transform: rotate(180deg)
}

@media (max-width:768px) {
  .causes-sect {
    padding-top: 100px
  }

  .causes-tit {
    font-size: 26px
  }

  .causes-sub {
    margin-top: 15px;
    font-size: 14px
  }

  .causes-slide {
    margin-top: 30px;
    padding-left: 15px
  }

  .cause-item {
    flex-direction: column;
    align-items: stretch
  }

  .cause-item .img_box {
    flex: none;
    width: 100%;
    margin: 0 0 20px;
    border-radius: 15px
  }

  .cause-item .cont-tit {
    font-size: 20px
  }

  .cause-item .txt {
    margin-top: 10px;
    font-size: 14px
  }

  .cause-item .txt_box {
    padding-bottom: 0
  }

  .causes-ctrl {
    position: static;
    margin-top: 24px;
    padding-left: 0
  }
}

/* ── 이런 분에게 추천합니다 (히어로 바로 아래 · 레퍼런스 3단 격자) ──────
   사진 + 제목 + 설명을 가운데로 모은 담백한 격자. 슬라이더가 아니라 한눈에 다 보인다.
   레퍼런스 실측 → 우리 단위: 3열 · 줄 사이 60 → 7.5 · 칸 사이 30 → 3.75
      사진 세로 62% · 반경 24 → 3 · 글 상자 위 25 → 3.125 · 설명 위 15 → 1.875
   ≤768 은 2열, 줄 25 · 칸 15(레퍼런스 동일). */
.rec-sect {
  padding: calc(25*var(--r3)) 0 0
}

.rec-sect .wrap {
  max-width: var(--wrap)
}

.rec-head .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.rec-head .txt {
  margin: calc(2.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

.rec-list {
  margin: calc(5.625*var(--r3)) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(7.5*var(--r3)) calc(3.75*var(--r3))
}

.rec-item .img {
  position: relative;
  width: 100%;
  padding-top: 62%;
  border-radius: calc(3*var(--r3));
  overflow: hidden
}

.rec-item .img.is-empty {
  background: #d9d9d9
}

.rec-item .img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.rec-item .txt_box {
  margin-top: calc(3.125*var(--r3));
  text-align: center
}

.rec-item .cont-tit {
  margin: 0;
  font-size: calc(3*var(--r3));
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.rec-item .txt {
  margin: calc(1.875*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

.rec-note {
  margin: calc(5*var(--r3)) 0 0;
  font-size: calc(1.75*var(--r3));
  line-height: 1.7;
  color: var(--text-2)
}

/* 위에서부터 차례로 떠오른다 — .is-in 은 js 가 붙인다 */
.rec-list .rec-item {
  opacity: 0;
  transform: translateY(calc(5*var(--r3)));
  transition: opacity .6s ease-in-out, transform .6s ease-in-out
}

.rec-list.is-in .rec-item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i) * .12s)
}

@media (max-width:768px) {
  .rec-sect {
    padding: calc(18*var(--r3)) 0 0
  }

  .rec-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 15px
  }

  .rec-item .txt_box {
    margin-top: calc(2*var(--r3))
  }

  .rec-item .txt {
    margin-top: calc(1*var(--r3))
  }

  .rec-item .txt br {
    display: none
  }
}

@media (prefers-reduced-motion:reduce) {
  .rec-list .rec-item {
    opacity: 1;
    transform: none;
    transition: none
  }
}

/* ── 치료 방법 탭 (충치 전용 · 레퍼런스 탭 문법) ─────────────────────
   탭 알약 → 내용(좌 글 / 우 이미지) → 번호 포인트 3개.
   ⚠️ 이 섹션과 아래 대조표는 **페이지마다 하나씩 두는 고유 섹션**이다.
      형제 페이지가 같은 모양만 반복해 지루하다는 지적(2026-09-16)에서 나왔다.
   레퍼런스 실측 → 우리 단위: 탭 최소폭 200 → 25 · 패딩 .8em 2.2em · 반경 16 → 2
      탭 사이 12 → 1.5 · 활성 배경 검정 · 내용 위 여백 45 → 5.625 */
.mth-sect {
  padding: calc(25*var(--r3)) 0 0
}

.mth-sect .wrap {
  max-width: var(--wrap)
}

.mth-head .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.mth-head .txt {
  margin: calc(2.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

.mth-tabs {
  margin: calc(5.625*var(--r3)) 0 0
}

.tab-bar {
  display: flex;
  justify-content: center;
  gap: calc(1.5*var(--r3));
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: calc(.75*var(--r3));
  background: var(--bg-2);
  border-radius: calc(2.5*var(--r3))
}

.tab-bar .tab {
  min-width: calc(25*var(--r3));
  padding: .8em 2.2em;
  border: 0;
  border-radius: calc(2*var(--r3));
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background .3s, color .3s
}

.tab-bar .tab.is-on {
  background: var(--black);
  color: #fff;
  font-weight: 700
}

.tab-panel {
  margin: calc(6.25*var(--r3)) 0 0
}

.mth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6.25*var(--r3))
}

/* ⚠️ flex 기본값(0 1 auto)이면 글 칸이 글자 폭까지만 줄어든다. space-between 과 겹쳐
   선언한 gap 50px 자리에 266px 구멍이 났다(2026-09-16 실측). 남는 폭을 글 칸이 먹게 한다. */
.mth-top .txt_box {
  flex: 1 1 auto;
  min-width: 0
}

.mth-top .cont-tit {
  margin: 0;
  font-size: calc(3.75*var(--r3));
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.mth-top .txt {
  margin: calc(2.5*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

.mth-top .img_box {
  position: relative;
  flex: 0 0 48%;
  padding-top: 27%;
  border-radius: calc(3*var(--r3));
  overflow: hidden
}

.mth-top .img_box.is-empty {
  background: #d9d9d9
}

.mth-top .img_box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

@media (max-width:768px) {
  .mth-sect {
    padding: calc(18*var(--r3)) 0 0
  }

  .tab-bar {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none
  }

  .tab-bar::-webkit-scrollbar {
    display: none
  }

  .tab-bar .tab {
    min-width: 0;
    padding: .8em 1.4em
  }

  .mth-top {
    flex-direction: column;
    gap: calc(4*var(--r3))
  }

  .mth-top .img_box {
    flex: none;
    width: 100%;
    padding-top: 56%;
    order: -1
  }
}

/* ── 에센스치과가 지켜 온 것 (전 진료 페이지 공통 띠) ────────────────
   2열 엇갈림 세로 포토카드. 사진 아래 절반에 어두운 그라데이션을 깔고 흰 글자를 얹는다.
   ⚠️ 이 띠는 **병원이 갖춘 것**이다. 페이지별 「왜 에센스」(진료 태도)와 역할이 다르다.

   레퍼런스 1600px 실측 → 우리 단위(--r3, 1600 에서 8px):
     섹션 위·안쪽 여백 200 → 25 · 안쪽 폭 **832**(카드 382 두 장 + 사이 28)
     카드 사이 28 → 3.5 · 목록 위 72 → 9 · 카드 세로 130% · 반경 16 → 2
     글 상자 패딩 40 → 5 · 카드 제목 24 → 3 · 본문 16 → 2
   ⚠️ 엇갈림은 **grid-row 를 겹쳐** 만든다(1/3, 2/4, 3/5, 4/6). 단순히 짝수 칸에
      음수 margin 만 주면 줄이 통째로 밀려 계단이 과하게 벌어진다(2026-09-16 실사고).
   등장: 흐릿(blur 10px) + 아래 100px 에서 또렷해지며, 카드마다 0.2초 간격. */
.spc-sect {
  position: relative;
  margin: calc(25*var(--r3)) 0 0;
  padding: calc(25*var(--r3)) 0;
  overflow: hidden;
  background: linear-gradient(0deg, var(--brand) 0%, var(--brand-2) 100%)
}

.spc-sect .wrap {
  position: relative;
  z-index: 1
}

/* 카드 뒤로 흐르는 영문 띠 — 같은 문구 네 벌을 가로로 늘어놓고 각자 제 폭만큼(-100%)
   왼쪽으로 밀어 끊김 없이 이어지게 한다. 로고는 제자리에서 돈다.
   ⚠️ 글자색은 레퍼런스가 흰색 50% 지만 우리는 배경이 진한 파랑이라 그대로 쓰면 카드보다 튄다 → 14%. */
.spc-flow {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  width: 100%;
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  color: rgba(255, 255, 255, .14);
  user-select: none;
  pointer-events: none
}

.spc-flow p {
  display: flex;
  align-items: center;
  margin: 0;
  padding-right: 1.5vw;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: calc(9*var(--r3));
  font-weight: 400;
  line-height: 1;
  animation: spcLoop 30s linear infinite
}

.spc-flow p span {
  width: 1em;
  margin-left: .5em;
  flex-shrink: 0;
  perspective: 500px
}

.spc-flow p img {
  width: 100%;
  height: auto;
  opacity: .2;
  filter: brightness(0) invert(1);
  animation: spcSpin 4s linear infinite;
  transform-style: preserve-3d
}

@keyframes spcLoop {
  from {
    transform: translate3d(0, 0, 0)
  }

  to {
    transform: translate3d(-100%, 0, 0)
  }
}

@keyframes spcSpin {
  from {
    transform: rotateY(0)
  }

  to {
    transform: rotateY(360deg)
  }
}

/* 832(레퍼런스 실측)로는 글 칸이 302px 밖에 안 남아 줄바꿈이 잘게 끊긴다.
   960 으로 키워 카드 446 · 글 칸 366 을 확보한다(2026-09-16 지시). */
.spc-sect .wrap {
  max-width: 960px
}

/* 이 띠만 제목을 가운데로 둔다 — 레퍼런스도 여기서만 center 다(좁은 화면에서는 왼쪽) */
.spc-head {
  text-align: center
}

.spc-head .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.4;
  color: #fff
}

.spc-head .txt {
  margin: calc(2.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82)
}

.spc-list {
  margin: calc(9*var(--r3)) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(3.5*var(--r3));
  align-items: center
}

.spc-item {
  position: relative;
  width: 100%;
  padding-top: 130%;
  border-radius: calc(2*var(--r3));
  overflow: hidden
}

/* 오른쪽 칸만 105px(카드 폭의 27.5%) 내려 계단을 만든다.
   같은 크기의 음수 margin-bottom 으로 줄 높이는 그대로 둔다 — 이게 없으면
   다음 줄이 통째로 밀려 두 번째 줄의 엇갈림이 사라진다(2026-09-16 실측 확인). */
.spc-item:nth-child(2n) {
  margin-top: 27.5%;
  margin-bottom: -27.5%
}

.spc-item .img {
  position: absolute;
  inset: 0
}

.spc-item .img.is-empty {
  background: rgba(255, 255, 255, .18)
}

.spc-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.spc-item .shade {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 62%;
  z-index: 1;
  /* 음영을 검정 대신 브랜드색으로 — 띠 배경과 한 톤으로 이어진다(2026-10-07 김치킨) */
  background: linear-gradient(to bottom, rgba(1, 51, 127, 0) 1%, rgba(1, 51, 127, .9) 100%)
}

.spc-item .txt_box {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: calc(5*var(--r3));
  color: #fff
}

.spc-item .cont-tit {
  margin: 0;
  font-size: calc(3*var(--r3));
  font-weight: 700;
  line-height: 1.4;
  color: #fff
}

.spc-item .txt {
  margin: calc(1.25*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88)
}

/* 등장 — .is-in 은 js 가 붙인다 */
.spc-list .spc-item {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(calc(12.5*var(--r3)));
  transition: opacity 1s ease-in-out, transform 1s ease-in-out, filter 1s ease-in-out
}

.spc-list.is-in .spc-item {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: calc(var(--i) * .2s)
}

/* 좁은 화면은 엇갈림을 풀고 가로로 넘겨 보게 한다(레퍼런스 동일) */
@media (max-width:768px) {
  .spc-sect {
    margin: calc(18*var(--r3)) 0 0;
    padding: calc(16*var(--r3)) 0
  }

  .spc-head {
    text-align: left
  }

  .spc-flow p {
    font-size: calc(7*var(--r3))
  }

  .spc-list {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    width: calc(100% + 30px);
    margin-left: -15px;
    padding: 0 15px
  }

  .spc-list::-webkit-scrollbar {
    display: none
  }

  .spc-item {
    flex: 0 0 auto;
    width: 55%;
    min-width: 250px;
    padding-top: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    opacity: 1;
    filter: none;
    transform: none
  }

  .spc-item+.spc-item {
    margin-left: 15px
  }

  .spc-item .img {
    position: relative;
    inset: auto;
    width: 100%;
    padding-top: 130%
  }

  .spc-item .img img {
    position: absolute;
    inset: 0
  }

  .spc-item .shade {
    height: 65%
  }

  .spc-item .txt_box {
    padding: calc(2.5*var(--r3))
  }
}

@media (prefers-reduced-motion:reduce) {
  .spc-list .spc-item {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none
  }

  .spc-flow p,
  .spc-flow p img {
    animation: none
  }
}

/* ── 재료 카드 (신경치료 전용 · 레퍼런스 라인업 카드 문법) ───────────
   ⚠️ 페이지마다 하나씩 두는 고유 섹션 — 잇몸=대조표 · 충치=탭 · 신경=이 카드.
   이 섹션만 **색 띠**를 깔아 앞뒤와 끊어 준다. 히어로 말고 색이 들어가는 유일한 자리다.
   레퍼런스 실측 → 우리 단위: 카드 사이 40 → 5 · 이미지 정사각(1:1) 흰 바탕 · 반경 24 → 3
      글 상자 위 32 → 4 · 등장은 왼쪽부터 0.4초 간격 */
.mat-sect {
  margin: calc(25*var(--r3)) 0 0;
  padding: calc(20*var(--r3)) 0;
  background: var(--bg-2)
}

.mat-sect .wrap {
  max-width: var(--wrap)
}

.mat-head .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.mat-head .txt {
  margin: calc(2.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

.mat-list {
  margin: calc(5.625*var(--r3)) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(5*var(--r3))
}

.mat-item .img_box {
  position: relative;
  width: 100%;
  padding-top: 100%;
  border-radius: calc(3*var(--r3));
  overflow: hidden;
  background: #fff
}

.mat-item .img_box.is-empty {
  background: #fff
}

.mat-item .img_box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.mat-item .txt_box {
  margin-top: calc(4*var(--r3))
}

.mat-item .cont-tit {
  margin: 0;
  font-size: calc(3*var(--r3));
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.mat-item .txt {
  margin: calc(1.25*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

.mat-note {
  margin: calc(5*var(--r3)) 0 0;
  font-size: calc(1.75*var(--r3));
  line-height: 1.7;
  color: var(--text-2)
}

/* 왼쪽부터 차례로 떠오른다 — .is-in 은 js 가 붙인다 */
.mat-list .mat-item {
  opacity: 0;
  transform: translateY(calc(6.25*var(--r3)));
  transition: opacity .6s ease-in-out, transform .6s ease-in-out
}

.mat-list.is-in .mat-item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc((var(--i) + 1) * .4s)
}

@media (max-width:768px) {
  .mat-sect {
    margin: calc(18*var(--r3)) 0 0;
    padding: calc(14*var(--r3)) 0
  }

  .mat-list {
    grid-template-columns: 1fr;
    gap: calc(4*var(--r3))
  }

  .mat-item .img_box {
    padding-top: 62%
  }
}

@media (prefers-reduced-motion:reduce) {
  .mat-list .mat-item {
    opacity: 1;
    transform: none;
    transition: none
  }
}

/* ── 경우에 따른 대조 (잇몸 전용 · 레퍼런스 비교표 문법) ──────────────
   가운데 항목 이름을 둔 3열 그리드(1fr · 20 · 1fr). 좌우 배경만 다르다.
   ⚠️ 다른 병원과의 비교표가 아니다 — 같은 병원 안에서 경우를 나눈 것이다(의료법 56조).
   좁은 화면(≤768)에서는 항목 이름이 위로 올라가고 좌우가 아래로 쌓인다. */
.cmp-sect {
  padding: calc(25*var(--r3)) 0 0
}

.cmp-sect .wrap {
  max-width: var(--wrap)
}

.cmp-head .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.cmp-head .txt {
  margin: calc(2.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

.cmp-table {
  margin: calc(5.625*var(--r3)) 0 0
}

.cmp-top,
.cmp-body .row {
  display: grid;
  grid-template-columns: 1fr calc(20*var(--r3)) 1fr;
  gap: calc(2*var(--r3))
}

.cmp-top {
  margin-bottom: calc(2*var(--r3))
}

.cmp-top .cap {
  grid-column: 1;
  padding: calc(1.75*var(--r3)) calc(1.25*var(--r3));
  border-radius: calc(1.5*var(--r3));
  background: #bfbfbf;
  color: #fff;
  text-align: center;
  font-size: calc(3*var(--r3));
  font-weight: 700;
  line-height: 1.4
}

.cmp-top .cap.is-brand {
  grid-column: 3;
  background: var(--brand)
}

.cmp-body .row>* {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: calc(3*var(--r3)) calc(1.25*var(--r3));
  text-align: center;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 500;
  line-height: 1.7;
  color: var(--primary)
}

.cmp-body .row .side {
  background: #f6f6f6
}

.cmp-body .row .side.is-brand {
  background: var(--brand-tint);
  font-weight: 600;
  color: var(--black)
}

.cmp-body .row .label {
  border: 1px solid var(--line);
  font-weight: 700;
  color: var(--black)
}

.cmp-body .row:first-child .side {
  border-radius: calc(1.5*var(--r3)) calc(1.5*var(--r3)) 0 0
}

.cmp-body .row:last-child .side {
  border-radius: 0 0 calc(1.5*var(--r3)) calc(1.5*var(--r3))
}

.cmp-body .row:not(:first-child) .side {
  border-top: 1px solid #ddd
}

.cmp-body .row:not(:first-child) .side.is-brand {
  border-top: 1px solid #cfd9ee
}

.cmp-body .row:not(:first-child) .label {
  border-top: none
}

/* 'even' — 좌우가 우열이 아닌 표. 왼쪽도 오른쪽과 같은 파란색으로 */
.cmp-table.is-even .cmp-top .cap {
  background: var(--brand)
}

.cmp-table.is-even .cmp-body .row .side {
  background: var(--brand-tint);
  font-weight: 600;
  color: var(--black)
}

.cmp-table.is-even .cmp-body .row:not(:first-child) .side {
  border-top-color: #cfd9ee
}

.cmp-note {
  margin: calc(2.5*var(--r3)) 0 0;
  font-size: calc(1.75*var(--r3));
  line-height: 1.7;
  color: var(--text-2)
}

/* 화면에 들어오면 떠오른다 — .is-in 은 js 가 붙인다 */
.cmp-table {
  opacity: 0;
  transform: translateY(calc(6.25*var(--r3)));
  transition: opacity .6s ease-in-out, transform .6s ease-in-out
}

.cmp-table.is-in {
  opacity: 1;
  transform: translateY(0)
}

@media (max-width:768px) {
  .cmp-sect {
    padding: calc(18*var(--r3)) 0 0
  }

  .cmp-top {
    display: none
  }

  .cmp-body .row {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: calc(2.5*var(--r3))
  }

  .cmp-body .row .label {
    order: -1;
    border-radius: calc(1.5*var(--r3)) calc(1.5*var(--r3)) 0 0;
    border: 0;
    background: var(--black);
    color: #fff;
    padding: calc(1.5*var(--r3))
  }

  .cmp-body .row .side {
    border-radius: 0
  }

  .cmp-body .row .side.is-brand {
    border-radius: 0 0 calc(1.5*var(--r3)) calc(1.5*var(--r3))
  }

  .cmp-body .row:not(:first-child) .side {
    border-top: 1px solid #ddd
  }
}

@media (prefers-reduced-motion:reduce) {
  .cmp-table {
    opacity: 1;
    transform: none;
    transition: none
  }
}

/* ── 진행 단계 섹션 (시안 87:2588 · 등장 방식은 레퍼런스 4단 카드줄) ────
   카드 4단, 사진 비율 73%, 아래에 STEP 표식 → 제목 → 설명.
   등장(레퍼런스 실측):
     ① 표식 — 알약 배경(::before)과 흰 글자(::after)를 clip-path 로 왼쪽부터 0.6s ease-in-out 에 채운다
     ② 잇는 선 — 점선 위에 브랜드색 실선(::after)이 0.8s linear 로 자란다
     ③ 둘이 번갈아 늦는다: 표식 .3s → 선 .7s → 표식 1.5s → 선 2s → 표식 2.9s → 선 3.3s → 표식 4.3s
   선은 줄의 마지막 칸(데스크톱 4n, 모바일 2n)에서는 빼야 허공으로 삐져나가지 않는다.
   ⚠️ 표식 세로 가운데 = 패딩 .8em×2 + 줄높이 1em → 1.3em. 선을 그 높이에 맞추려면
      선 가상요소에도 표식과 **같은 글자크기**를 줘야 한다(em 기준이 달라지면 어긋난다). */
.stage-sect {
  padding: calc(25*var(--r3)) 0 0
}

.stage-sect .wrap {
  max-width: var(--wrap)
}

.stage-head .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.stage-head .txt {
  margin: calc(2.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

.stage-list {
  margin: calc(5.625*var(--r3)) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(6.25*var(--r3)) calc(2*var(--r3))
}

.stage-item .img_box {
  position: relative;
  width: 100%;
  padding-top: 73%;
  border-radius: calc(3*var(--r3));
  overflow: hidden
}

.stage-item .img_box.is-empty {
  background: #d9d9d9
}

.stage-item .img_box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.stage-item .txt_box {
  position: relative;
  margin-top: calc(3.75*var(--r3));
  text-align: center
}

.stage-item .cont-tit {
  margin: calc(2.5*var(--r3)) 0 0;
  font-size: calc(3*var(--r3));
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.stage-item .txt {
  margin: calc(1.25*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

/* STEP 표식 — 바탕은 연한 브랜드 톤, 채워지면 브랜드색 위 흰 글자 */
.stage-item .num {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin: 0 auto;
  padding: .8em 1em;
  border-radius: 999px;
  z-index: 3;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: calc(1.75*var(--r3));
  font-weight: 700;
  line-height: 1
}

.stage-item .num::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .6s ease-in-out .3s
}

.stage-item .num::after {
  content: attr(data-step);
  position: absolute;
  inset: 0;
  padding: .8em 1em;
  color: #fff;
  z-index: 3;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .6s ease-in-out .3s
}

/* 칸과 칸을 잇는 선 — 점선이 깔리고 그 위로 실선이 자란다 */
.stage-item .txt_box::before,
.stage-item .txt_box::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 1.3em;
  height: 2px;
  font-size: calc(1.75*var(--r3))
}

.stage-item .txt_box::before {
  width: 100%;
  z-index: 1;
  background: repeating-linear-gradient(to right, rgba(0, 0, 0, .1) 0 4px, transparent 4px 8px)
}

.stage-item .txt_box::after {
  width: 0;
  z-index: 2;
  background: var(--brand);
  transition: width .8s linear
}

.stage-item:nth-child(4n) .txt_box::before,
.stage-item:nth-child(4n) .txt_box::after {
  display: none
}

/* 왼쪽부터 차례로 — 표식과 선이 번갈아 늦는다 */
.stage-item:nth-child(1) .txt_box::after {
  transition-delay: .7s
}

.stage-item:nth-child(2) .num::before,
.stage-item:nth-child(2) .num::after {
  transition-delay: 1.5s
}

.stage-item:nth-child(2) .txt_box::after {
  transition-delay: 2s
}

.stage-item:nth-child(3) .num::before,
.stage-item:nth-child(3) .num::after {
  transition-delay: 2.9s
}

.stage-item:nth-child(3) .txt_box::after {
  transition-delay: 3.3s
}

.stage-item:nth-child(4) .num::before,
.stage-item:nth-child(4) .num::after {
  transition-delay: 4.3s
}

.stage-list.is-in .num::before,
.stage-list.is-in .num::after {
  clip-path: inset(0 0 0 0)
}

.stage-list.is-in .txt_box::after {
  width: 100%
}

@media (max-width:768px) {
  .stage-sect {
    padding: calc(18*var(--r3)) 0 0
  }

  .stage-list {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(5*var(--r3)) calc(2*var(--r3))
  }

  .stage-item:nth-child(4n) .txt_box::before,
  .stage-item:nth-child(4n) .txt_box::after {
    display: block
  }

  .stage-item:nth-child(2n) .txt_box::before,
  .stage-item:nth-child(2n) .txt_box::after {
    display: none
  }

  .stage-item .cont-tit {
    font-size: calc(2.83*var(--r3))
  }

  .stage-item .txt {
    font-size: calc(2.33*var(--r3))
  }
}

/* ── 치료 단계 섹션 (시안 87:2587 · 치수와 등장은 레퍼런스 번호목록) ────
   레퍼런스 1600px 실측 → 우리 단위(--r3, 1600 에서 8px):
     목록 위 45 → 5.625 · 줄 사이 18 → 2.25 · 줄 패딩 24/30 → 3/3.75 · 알약(반경 750)
     번호 원 40.5 → 5.06 글자 15 → 1.875 오른쪽 18 → 2.25 · 세로 가운데 맞춤
     줄 제목 18 → 2.25 줄높이 1.7 · 설명 15 → 1.875 줄높이 1.7
     등장: 37.5px 아래에서 0.6s ease-in-out, **지연 없음**(레퍼런스도 한꺼번에 뜬다)
   390px 은 레퍼런스 실측 그대로 — 패딩 20/15 · 반경 20 · 번호 25(글자 10) · 제목 17 · 설명 14
   색은 사이트 기준을 쓴다(레퍼런스 회색 대신 브랜드 톤). */
.proc-sect {
  padding: calc(25*var(--r3)) 0 0
}

.proc-sect .wrap {
  max-width: var(--wrap)
}

.proc-head .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.proc-head .txt {
  margin: calc(2.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

/* 알약 줄 — 치료 단계와 치료 방법 탭이 같은 모양을 쓴다.
   값을 복사하지 않고 선택자를 묶는다(2026-09-16). */
.proc-list,
.mth-points {
  margin: calc(5.625*var(--r3)) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(2.25*var(--r3))
}

.proc-row,
.mth-points li {
  display: flex;
  align-items: center;
  padding: calc(3*var(--r3)) calc(3.75*var(--r3));
  border-radius: 999px;
  background: var(--brand-tint)
}

.proc-row .num,
.mth-points .num {
  flex: none;
  width: calc(5.06*var(--r3));
  height: calc(5.06*var(--r3));
  margin-right: calc(2.25*var(--r3));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  font-size: calc(1.875*var(--r3));
  font-weight: 700;
  line-height: 1
}

/* 크기는 임플란트 「Point 01」 뱃지(css/reasons.css .rs-badge)에 맞췄다 */
.mth-points .num.is-pill {
  width: auto;
  height: auto;
  padding: .45em 1em;
  border-radius: 2em;
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums
}

.proc-row .body,
.mth-points .body {
  min-width: 0
}

.proc-row .body .tit,
.mth-points .body .tit {
  margin: 0;
  font-size: calc(2.25*var(--r3));
  font-weight: 700;
  line-height: 1.7;
  color: var(--black)
}

.proc-row .body .txt,
.mth-points .body .txt {
  margin: 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

/* 화면에 들어오면 위에서부터 차례로 떠오른다 — .is-in 은 js 가 붙인다.
   ⚠️ 레퍼런스의 transition-delay 는 0 으로 읽히지만 실제로는 줄마다 늦게 뜬다.
      화면 진입 순간을 0.15초 간격으로 찍어 확인한 값이 **줄당 0.15초**다.
      계산된 값만 보고 「지연 없음」으로 판단하지 말 것. */
.proc-list .proc-row {
  opacity: 0;
  transform: translateY(calc(4.7*var(--r3)));
  transition: opacity .6s ease-in-out, transform .6s ease-in-out
}

.proc-list.is-in .proc-row {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i) * .15s)
}

@media (prefers-reduced-motion:reduce) {
  .proc-list .proc-row {
    opacity: 1;
    transform: none;
    transition: none
  }
}

@media (max-width:768px) {
  .proc-sect {
    padding-top: 100px
  }

  .proc-head .tit {
    font-size: 26px
  }

  .proc-head .txt {
    margin-top: 15px;
    font-size: 14px
  }

  .proc-list {
    margin-top: 30px;
    gap: 12px
  }

  /* 글이 여러 줄로 접히므로 알약 대신 둥근 상자로 — 레퍼런스도 같다 */
  .proc-row {
    align-items: flex-start;
    padding: 20px 15px;
    border-radius: 20px
  }

  .proc-row .num {
    width: 25px;
    height: 25px;
    margin: 1px 8px 0 0;
    font-size: 10px
  }

  .proc-row .body .tit {
    font-size: 17px
  }

  .proc-row .body .txt {
    font-size: 14px
  }
}

/* ── 「왜 이곳인가」 섹션 (시안 87:2592 · 치수와 동작은 레퍼런스 섹션) ──────
   레퍼런스 1600px 실측 → 우리 단위(--r3, 1600 에서 8px):
     왼쪽 글 500 → 62.5 (위 80 → 10) · 글과 카드 사이 71 → 8.875
     제목 36 → 4.5 줄높이 1.5 · 부제 16 → 2 (500) 줄높이 1.6 위 16 → 2
     컨트롤 위 56 → 7 · 진행바 80×2 (배경 검정 30%) 왼쪽 9.6 → 1.2
     버튼 51.2 → 6.4 테두리 1px 흰배경 · 버튼 사이 12.8 → 1.6 · 화살표 26.9%
     카드 462.8 → 57.85 · 카드 사이 30 · 이미지 정사각 반경 25.6 → 3.2
     카드 제목 30/600 줄높이 1.4 왼쪽 24 → 3 (앞에 9px 점) · 본문 16 줄높이 1.6 위 16
   동작: 무한 반복 + 3초 자동재생, 전환 1초. 카드는 오른쪽 화면 밖까지 이어진다. */
.why-sect {
  padding: calc(25*var(--r3)) 0 0;
  overflow: hidden
}

.why-in {
  display: flex;
  align-items: flex-start;
  gap: calc(8.875*var(--r3));
  padding-left: max(20px, calc((100% - var(--in)) / 2))
}

.why-left {
  flex: 0 0 calc(62.5*var(--r3));
  padding-top: calc(10*var(--r3))
}

.why-copy .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.5;
  color: var(--black)
}

.why-copy .txt {
  margin: calc(2*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--primary)
}

.why-ctrl {
  display: flex;
  align-items: center;
  margin-top: calc(7*var(--r3))
}

.why-ctrl .paging {
  display: flex;
  align-items: center
}

.why-ctrl .current,
.why-ctrl .total {
  min-width: calc(3.3*var(--r3));
  text-align: center;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink)
}

.why-ctrl .swiper-pagination-progressbar {
  position: relative;
  width: calc(10*var(--r3));
  height: 2px;
  margin: 0 calc(1.2*var(--r3));
  overflow: hidden;
  background: rgba(0, 0, 0, .3)
}

.why-ctrl .swiper-pagination-progressbar-fill {
  background: var(--brand)
}

.why-ctrl .btn-wrap {
  display: flex;
  align-items: center;
  margin-left: calc(3*var(--r3))
}

.why-ctrl .sbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(6.4*var(--r3));
  height: calc(6.4*var(--r3));
  padding: 0;
  margin-right: calc(1.6*var(--r3));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease
}

.why-ctrl .sbtn:last-child {
  margin-right: 0
}

.why-ctrl .sbtn:hover {
  border-color: var(--brand);
  background: var(--brand)
}

.why-ctrl .sbtn .ico {
  width: 26.9%;
  height: 26.9%;
  background-color: var(--ink);
  transition: background-color .3s ease;
  -webkit-mask: url(img/slide-arrow.svg) no-repeat center/contain;
  mask: url(img/slide-arrow.svg) no-repeat center/contain
}

.why-ctrl .sbtn:hover .ico {
  background-color: #fff
}

.why-ctrl .sbtn.prev .ico {
  transform: rotate(180deg)
}

.why-cards {
  flex: 1 1 auto;
  min-width: 0
}

.why-swiper {
  overflow: hidden
}

.why-card {
  width: calc(57.85*var(--r3));
  flex-shrink: 0
}

.why-card .img_box {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: calc(3.2*var(--r3));
  overflow: hidden
}

.why-card .img_box.is-empty {
  background: #d9d9d9
}

.why-card .img_box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* ⚠️ 카드 제목은 레퍼런스가 30 이지만 이 사이트에서는 크다.
      원인 슬라이드 카드와 같은 24 로 맞춘다(사이트 카드 제목 기준). */
.why-card .cont-tit {
  position: relative;
  margin: calc(2.5*var(--r3)) 0 0;
  padding-left: calc(3*var(--r3));
  font-size: calc(3*var(--r3));
  font-weight: 650;
  line-height: 1.4;
  color: var(--black)
}

.why-card .cont-tit::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(1.55*var(--r3));
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand)
}

.why-card .txt {
  margin: calc(1.5*var(--r3)) 0 0;
  max-width: 95%;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--primary)
}

@media (max-width:1240px) {

  /* 한 줄에 다 안 들어간다 — 글을 위로 올리고 카드는 아래에서 흐른다 */
  .why-in {
    flex-direction: column;
    align-items: stretch;
    gap: calc(5*var(--r3))
  }

  .why-left {
    flex: none;
    padding-top: 0;
    padding-right: 20px
  }
}

@media (max-width:768px) {
  .why-sect {
    padding-top: 100px
  }

  .why-in {
    gap: 30px;
    padding-left: 15px
  }

  .why-left {
    padding-right: 15px
  }

  .why-copy .tit {
    font-size: 26px
  }

  .why-copy .txt {
    margin-top: 12px;
    font-size: 14px
  }

  .why-ctrl {
    margin-top: 24px
  }

  .why-ctrl .current,
  .why-ctrl .total {
    font-size: 14px
  }

  .why-ctrl .swiper-pagination-progressbar {
    width: 60px
  }

  .why-ctrl .sbtn {
    width: 38px;
    height: 38px;
    margin-right: 8px
  }

  .why-card {
    width: 78%
  }

  .why-card .img_box {
    border-radius: 15px
  }

  .why-card .cont-tit {
    margin-top: 16px;
    padding-left: 16px;
    font-size: 18px
  }

  .why-card .cont-tit::before {
    top: 9px;
    width: 6px;
    height: 6px
  }

  .why-card .txt {
    margin-top: 10px;
    max-width: 100%;
    font-size: 14px
  }
}

/* ── 생활 가이드 섹션 (시안 87:2625 · 구조와 동작은 레퍼런스 스크롤 목록) ──
   레퍼런스 1600px 실측 → 우리 단위(--r3, 1600 에서 8px):
     좌우 50:50 · 오른쪽 안쪽 여백 90 → 11.25 · 오른쪽 위 여백 500 → 62.5
     항목 사이 135 → 16.875 · 번호 원 36 → 4.5 (글자 15 → 1.875) 오른쪽 12 → 1.5
     이미지 폭 85% 비율 62% 반경 18 → 2.25 · 왼쪽은 sticky (헤더 + 30 아래)
   글자는 이 사이트의 4단계 — 섹션 36 · 항목 제목 24 · 본문 16.
   ⚠️ 항목이 화면 가운데에 들어오면 왼쪽 이미지가 바뀐다(js 가 .is-on 을 옮긴다). */
.guide-sect {
  padding: calc(25*var(--r3)) 0 0
}

.guide-in {
  max-width: var(--wrap);
  display: flex;
  align-items: flex-start;
  justify-content: space-between
}

.guide-stick {
  flex: 0 0 50%;
  position: sticky;
  top: calc(var(--hd-h) + 3.75*var(--r3))
}

.guide-copy .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.3;
  color: var(--black)
}

.guide-copy .txt {
  margin: calc(2*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

.guide-img {
  position: relative;
  width: 85%;
  margin-top: calc(5*var(--r3));
  aspect-ratio: 1/.62;
  border-radius: calc(2.25*var(--r3));
  overflow: hidden
}

.guide-img.is-empty {
  background: #d9d9d9
}

.guide-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease-in-out
}

.guide-img img.is-on {
  opacity: 1
}

.guide-list {
  flex: 0 0 50%;
  margin: 0;
  padding: calc(62.5*var(--r3)) 0 0 calc(11.25*var(--r3));
  list-style: none
}

/* 가운데 띠에 든 항목만 진하게 — 레퍼런스 실측 0.3 → 1, opacity 0.3s ease-in-out.
   왼쪽 이미지도 같은 항목을 따라간다. */
.guide-item {
  display: flex;
  align-items: flex-start;
  gap: calc(1.5*var(--r3));
  opacity: .3;
  transition: opacity .3s ease-in-out
}

.guide-item.is-on {
  opacity: 1
}

.guide-item+.guide-item {
  margin-top: calc(16.875*var(--r3))
}

.guide-item .num {
  flex: none;
  width: calc(4.5*var(--r3));
  height: calc(4.5*var(--r3));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  font-size: calc(1.7*var(--r3));
  font-weight: 700;
  line-height: 1
}

.guide-item .body {
  min-width: 0
}

.guide-item .body .tit {
  margin: 0;
  font-size: calc(3*var(--r3));
  font-weight: 700;
  line-height: 1.5;
  color: var(--black)
}

.guide-item .body .txt {
  margin: calc(1.25*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

@media (max-width:1000px) {

  /* 두 열로 두기엔 좁다 — 글·이미지를 위로 올리고 목록을 아래에 쌓는다 */
  /* 한 열로 쌓이면 흐리게 둘 이유가 없다(읽기만 나빠진다) */
  .guide-item {
    opacity: 1
  }

  .guide-in {
    flex-direction: column;
    align-items: stretch
  }

  .guide-stick {
    flex: none;
    position: static
  }

  .guide-img {
    width: 100%
  }

  .guide-list {
    flex: none;
    padding: calc(5*var(--r3)) 0 0
  }
}

@media (max-width:768px) {
  .guide-sect {
    padding-top: 100px
  }

  .guide-copy .tit {
    font-size: 26px
  }

  .guide-copy .txt {
    margin-top: 12px;
    font-size: 14px
  }

  .guide-img {
    margin-top: 24px;
    border-radius: 15px
  }

  .guide-list {
    padding-top: 30px
  }

  .guide-item {
    gap: 10px
  }

  .guide-item+.guide-item {
    margin-top: 30px
  }

  .guide-item .num {
    width: 28px;
    height: 28px;
    font-size: 11px
  }

  .guide-item .body .tit {
    font-size: 18px
  }

  .guide-item .body .txt {
    margin-top: 8px;
    font-size: 14px
  }
}

/* ── 퀵메뉴 (레퍼런스 우아미 구조 그대로) ────────────────────────
   레퍼런스 1600px 실측: 오른쪽 24 · 아래 40 · 세로 배치 간격 4 · z 9990
     동그란 버튼 90 · 퀵메뉴 글자 14/700 · 패널 반경 40 패딩 24/20
     그림자 0 4 20 rgba(0,0,0,.15) · 항목 패딩 16/0 글자 13/600 아이콘 28
     패널은 평소 숨김(20px 아래·투명) → 열리면 제자리 + 아래 여백 12, 전환 0.3s
   색만 에센스 브랜드로 바꿨다. */
/* 퀵메뉴 파랑은 브랜드색보다 짙다 — 2026-09-16 김치킨 지시 */
.quick-wrap {
  --quick-blue: #0f3790;
  --quick-blue-dark: #0a2a6f;
  position: fixed;
  right: 24px;
  bottom: 40px;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px
}

.quick-box {
  display: flex;
  flex-direction: column;
  align-items: center
}

.quick-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  border-radius: 40px;
  background: var(--quick-blue);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: .3s
}

.quick-box.is-open .quick-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  margin-bottom: 12px
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  color: #fff;
  transition: .2s
}

.quick-item:hover {
  opacity: .7
}

.quick-item span {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap
}

.quick-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 90px;
  height: 90px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--quick-blue);
  color: #fff;
  cursor: pointer;
  transition: .3s
}

.quick-main:hover {
  background: var(--quick-blue-dark)
}

.quick-main-text {
  font-size: 14px;
  font-weight: 700
}

.quick-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0, 0, 0, .15);
  transition: .3s
}

.quick-top:hover {
  color: var(--quick-blue)
}

@media (prefers-reduced-motion:reduce) {

  .quick-panel,
  .quick-main,
  .quick-top,
  .quick-item {
    transition: none
  }
}

@media (max-width:768px) {

  /* 화면이 좁으니 절반 가까이 줄인다 — 본문을 가리지 않게 */
  .quick-wrap {
    right: 14px;
    bottom: 20px;
    gap: 8px
  }

  .quick-panel {
    padding: 14px 12px;
    border-radius: 30px
  }

  .quick-item {
    padding: 10px 0
  }

  .quick-item svg {
    width: 22px;
    height: 22px
  }

  .quick-item span {
    margin-top: 4px;
    font-size: 11px
  }

  .quick-main,
  .quick-top {
    width: 56px;
    height: 56px;
    gap: 2px
  }

  .quick-main svg {
    width: 14px;
    height: 17px
  }

  .quick-main-text {
    font-size: 10px
  }

  .quick-top svg {
    width: 17px;
    height: 17px
  }
}

/* ── 스크롤 등장 ─────────────────────────────────────────────────
   [data-reveal="up"] 은 아래에서, "left" 는 오른쪽에서 30px 떠오르며 1초에 걸쳐 나타난다(ease-in-out-sine).
   화면 아래 30px 선을 넘으면 켜지고, 위로 스크롤해 그 선 아래로 다시 내려가면 되감겨 다음에 또 재생된다.
   html.reveal-on 은 header.php 가 <head> 에서 붙인다 — 스크립트가 안 돌면 처음부터 보인다.
   지연은 data-reveal-delay(ms) 를 site.js 가 --reveal-delay 로 옮긴다. 나타날 때만 걸리고 사라질 때는 바로 사라진다.
   ⚠️ 자기 transition·transform 이 있는 요소에는 붙이지 말 것 — 이 규칙이 덮어쓴다. */
html.reveal-on [data-reveal] {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.445, .05, .55, .95), transform 1s cubic-bezier(.445, .05, .55, .95)
}

html.reveal-on [data-reveal="up"] {
  transform: translate3d(0, 30px, 0)
}

html.reveal-on [data-reveal="left"] {
  transform: translate3d(30px, 0, 0)
}

html.reveal-on [data-reveal].is-shown {
  opacity: 1;
  transform: none;
  transition-delay: var(--reveal-delay, 0ms)
}

/* 괄호 문장(data-reveal="bracket") — 0.6초에 떠오르고, 0.3초 뒤 괄호가 안쪽 20% 에서 양 끝으로 벌어지고,
   0.6초 뒤 글이 가려진 칸 아래에서 올라온다. 글은 <i>(가림막) 안 <em> 이다. 사라질 때는 지연 없이 되돌아간다. */
html.reveal-on [data-reveal="bracket"] {
  transition: opacity .6s ease
}

html.reveal-on [data-reveal="bracket"] span:before,
html.reveal-on [data-reveal="bracket"] span:after {
  transition: left .6s ease, right .6s ease
}

html.reveal-on [data-reveal="bracket"]:not(.is-shown) span:before {
  left: 20%
}

html.reveal-on [data-reveal="bracket"]:not(.is-shown) span:after {
  right: 20%
}

html.reveal-on [data-reveal="bracket"] em {
  transform: translateY(1.6em);
  transition: transform .6s ease
}

html.reveal-on [data-reveal="bracket"].is-shown {
  transition-delay: 0s
}

html.reveal-on [data-reveal="bracket"].is-shown span:before,
html.reveal-on [data-reveal="bracket"].is-shown span:after {
  transition-delay: .3s
}

html.reveal-on [data-reveal="bracket"].is-shown em {
  transform: none;
  transition-delay: .6s
}

@media (prefers-reduced-motion:reduce) {
  html.reveal-on [data-reveal],
  html.reveal-on [data-reveal] em {
    opacity: 1;
    transform: none;
    transition: none
  }

  html.reveal-on [data-reveal="bracket"] span:before {
    left: 0
  }

  html.reveal-on [data-reveal="bracket"] span:after {
    right: 0
  }
}

/* 둘러보기 (/about/tour/) — page-tour.php.
   소개 제목·본문은 .visit-intro 규칙을 그대로 쓴다(진료안내·위치와 같은 글자 크기).
   아래 값은 전부 --r3 배수 — 폭별 단계(1600:8 · 1240:7 · 768:6 · 2001+:10)를 그대로 따라간다. */
.tour-intro .sub {
  margin: 1.2em 0 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink)
}

.tour-main {
  position: relative;
  margin-top: calc(9*var(--r3));
  padding-top: 44%;
  overflow: hidden;
  border-radius: calc(2*var(--r3))
}

.tour-main.is-empty,
.tour-slide.is-empty {
  background: #d9d9d9
}

.tour-main img,
.tour-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.tour-facility {
  margin-top: calc(25*var(--r3));
  padding: calc(25*var(--r3)) 0;
  background: var(--bg-2);
  overflow: hidden
}

.tour-facility .wrap {
  max-width: var(--wrap)
}

.tour-facility .tit {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink)
}

.tour-facility .txt {
  margin: calc(2.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  line-height: 1.7;
  color: var(--ink-2)
}

/* 슬라이드는 가운데 한 장(본문 폭의 65%)만 온전히 보이고 양옆 사진이 비어져 나온다 — 그래서 overflow 를 연다 */
.tour-slider {
  position: relative;
  margin: calc(6*var(--r3)) 17.5% 0
}

.tour-slider .swiper {
  overflow: visible
}

.tour-slide {
  position: relative;
  padding-top: 55%;
  overflow: hidden;
  border-radius: calc(2.2*var(--r3))
}

/* 이전·다음 버튼 — 좌우 여백(17.5%) 한가운데, 사진 높이의 가운데.
   사진과 같은 비율(55%)의 투명 틀을 겹쳐 두고 그 안에서 세로 가운데를 잡는다 */
.tour-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding-top: 55%;
  pointer-events: none
}

.tour-btn {
  position: absolute;
  top: 50%;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(7*var(--r3));
  height: calc(7*var(--r3));
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease
}

.tour-btn.prev {
  left: calc(-17.5% / .65 / 2);
  transform: translate(-50%, -50%)
}

.tour-btn.next {
  right: calc(-17.5% / .65 / 2);
  transform: translate(50%, -50%)
}

.tour-btn:hover {
  border-color: var(--brand);
  background: var(--brand)
}

.tour-btn .ico {
  width: 30%;
  height: 30%;
  background-color: var(--ink);
  transition: background-color .3s ease;
  -webkit-mask: url(img/slide-arrow.svg) no-repeat center/contain;
  mask: url(img/slide-arrow.svg) no-repeat center/contain
}

.tour-btn:hover .ico {
  background-color: #fff
}

.tour-btn.prev .ico {
  transform: rotate(180deg)
}

/* 진행 막대 — 사진 아래 한 줄, 채워진 부분만 브랜드색 */
.tour-bar.swiper-pagination-progressbar {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 2px;
  margin-top: calc(7.4*var(--r3));
  background: #ccd2dd
}

.tour-bar .swiper-pagination-progressbar-fill {
  background: var(--brand)
}

@media (min-width:2001px) {
  .tour-intro .sub {
    font-size: 20px
  }
}

@media (max-width:1240px) {
  .tour-intro .sub {
    font-size: 18px
  }

  .tour-btn {
    display: none
  }
}

@media (max-width:768px) {
  .tour-intro .sub {
    font-size: 16px
  }

  .tour-main {
    border-radius: 10px
  }

  .tour-facility {
    margin-top: 100px;
    padding: 100px 0
  }

  .tour-slider {
    margin: calc(5*var(--r3)) 10% 0
  }

  .tour-slide {
    border-radius: 10px
  }
}

/* 의료장비 (/about/equipment/) — page-equipment.php. 회색 띠 안 3열 카드 + 상세 창. 값은 --r3 배수. */
.eq-sect {
  margin-top: calc(25*var(--r3));
  padding: calc(25*var(--r3)) 0;
  background: var(--bg-2)
}

/* 의료장비 소개는 가운데 정렬(둘러보기는 왼쪽 정렬) */
.eq-intro .tit,
.eq-intro .sub,
.eq-intro .txt {
  text-align: center
}

/* 목록 제목 — 둘러보기 슬라이드 제목(.tour-facility)과 같은 크기 */
.eq-head {
  margin: 0;
  font-size: var(--tit-sect);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink)
}

.eq-lead {
  margin: calc(2.6*var(--r3)) 0 0;
  font-size: clamp(14px, calc(2*var(--r3)), 18px);
  line-height: 1.7;
  color: var(--ink-2)
}

.eq-head + .eq-grid,
.eq-lead + .eq-grid {
  margin-top: calc(6*var(--r3))
}

.eq-sect .wrap {
  max-width: var(--wrap)
}

.eq-grid {
  /* 마지막 줄이 한두 개만 남아도 가운데로 모이게 flex 로 둔다 */
  --eq-cols: 3;
  --eq-gap: calc(5*var(--r3));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10.6*var(--r3)) var(--eq-gap);
  margin: 0;
  padding: 0;
  list-style: none
}

.eq-card {
  width: calc((100% - (var(--eq-cols) - 1) * var(--eq-gap)) / var(--eq-cols))
}

.eq-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit
}

.eq-img {
  position: relative;
  display: block;
  aspect-ratio: 440 / 500;
  overflow: hidden;
  background: #fff
}

.eq-img.is-empty,
.eq-m-img.is-empty {
  background: #d9d9d9
}

.eq-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s ease
}

.eq-open:hover .eq-img img,
.eq-open:focus-visible .eq-img img {
  transform: scale(1.05)
}

.eq-txt {
  display: block;
  margin-top: calc(3.1*var(--r3))
}

.eq-txt .cat {
  display: block;
  font-size: clamp(14px, calc(2.1*var(--r3)), 18px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-2)
}

.eq-txt .name {
  display: block;
  margin-top: 4px;
  font-size: clamp(18px, calc(3*var(--r3)), 28px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  transition: color .3s ease
}

.eq-open:hover .name {
  color: var(--brand)
}

/* 상세 창 */
html.eq-lock {
  overflow: hidden
}

.eq-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow-y: auto;
  padding: 80px 20px;
  opacity: 0;
  transition: opacity .25s ease
}

.eq-modal.is-open {
  opacity: 1
}

.eq-m-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6)
}

.eq-m-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: #fff
}

.eq-m-close {
  position: absolute;
  top: -45px;
  right: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer
}

.eq-m-close span:before,
.eq-m-close span:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: rotate(45deg)
}

.eq-m-close span:after {
  transform: rotate(-45deg)
}

.eq-m-head {
  margin: 0;
  padding: 10px 0;
  background: var(--ink);
  color: #fff;
  font-size: 20px;
  line-height: 34px;
  text-align: center
}

.eq-m-body {
  padding: 0 0 40px;
  text-align: center
}

.eq-m-img {
  position: relative;
  width: 443px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden
}

.eq-m-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.eq-m-cat {
  margin: 10px 30px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--brand)
}

.eq-m-cat:empty {
  display: none
}

.eq-m-name {
  margin: 0 30px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink)
}

.eq-m-cat:empty + .eq-m-name {
  margin-top: 10px
}

.eq-m-desc {
  margin: 15px 30px 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  word-break: keep-all
}

.eq-m-points {
  margin: 30px 30px 0;
  padding: 0;
  list-style: none
}

.eq-m-points:empty {
  display: none
}

.eq-m-points li {
  padding: 20px 30px;
  border-radius: 80px;
  background: #f4f5f7;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  word-break: keep-all
}

.eq-m-points li + li {
  margin-top: 15px
}

@media (max-width:1000px) {
  .eq-grid {
    --eq-cols: 2
  }
}

@media (max-width:768px) {
  .eq-sect {
    margin-top: 100px;
    padding: 100px 0
  }

  .eq-grid {
    --eq-gap: 15px;
    gap: 40px var(--eq-gap)
  }

  .eq-m-head {
    font-size: 17px;
    line-height: 28px
  }

  .eq-m-name {
    font-size: 21px
  }

  .eq-m-desc {
    margin: 12px 20px 0;
    font-size: 15px
  }

  .eq-m-cat,
  .eq-m-name {
    margin-left: 20px;
    margin-right: 20px
  }

  .eq-m-points {
    margin: 24px 20px 0
  }

  .eq-m-points li {
    padding: 15px 20px;
    font-size: 14px
  }
}