/* ============================================================
   서울올바른치과 사이트 시스템 v1 (site-v1)
   구조 = 기획안 v2.2 4-10항 컴포넌트 8종 (tmj.html 원본에서 승계)
   비주얼 = 11dent 톤 (청록 주조색 · 세리프 대제목 · 알약 버튼)

   C1 직답  C2 체크  C3 도해  C4 카드  C5 표  C6 흐름  C7 인용  C8 박스

   ★ 토큰만 고친다. 컴포넌트 클래스와 마크업은 건드리지 않는다.
     (기획안 4-10-1: "컴포넌트마다 임의의 픽셀 값을 쓰지 않는다")
   ============================================================ */
/* ★ 본문 폰트 = Pretendard — tmjdoctor.co.kr 이 쓰는 본문 폰트
   (그 사이트 common.css 의 `font-family:"Pretendard"`)
   NanumSquareNeo 는 11dent 쪽 폰트라 대체 폰트로만 남긴다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
/* 섹션 머리의 큰 영문 — tmjdoctor 가 쓰는 Barlow */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400&display=swap');
/* v2 본문 서체 — 나눔스퀘어네오. 300~900 전 굵기를 쓴다 */
@font-face{font-family:'NanumSquareNeo';font-style:normal;font-weight:300;font-display:swap;
  src:local('NanumSquareNeo'),url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2') format('woff2')}
@font-face{font-family:'NanumSquareNeo';font-style:normal;font-weight:400;font-display:swap;
  src:local('NanumSquareNeo'),url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2') format('woff2')}
@font-face{font-family:'NanumSquareNeo';font-style:normal;font-weight:700;font-display:swap;
  src:local('NanumSquareNeo'),url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2') format('woff2')}
@font-face{font-family:'NanumSquareNeo';font-style:normal;font-weight:800;font-display:swap;
  src:local('NanumSquareNeo'),url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2') format('woff2')}
@font-face{font-family:'NanumSquareNeo';font-style:normal;font-weight:900;font-display:swap;
  src:local('NanumSquareNeo'),url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2') format('woff2')}

:root{
  /* 글자색 — 11dent common.css :root 그대로 */
  --ink:#333;        /* --font_333 · 제목, 강조 본문 */
  --ink2:#444;       /* v2: 본문 글자는 #444 보다 옅게 쓰지 않는다 */
  --ink3:#444;       /* v2: 보조 라벨·각주도 같은 하한을 지킨다 */
  --ink-strong:#222; /* --font_222 · 최강조 */

  /* ★ 포인트 컬러 — 로고(로고2.PNG)에서 추출한 블루 2종
       #37BEEE 하늘색(로고 치아 몸통) · #0D6FB8 진파랑(로고 글자)
       면에는 밝은 쪽, 글자에는 진한 쪽. 대비 때문에 반드시 나눠 쓴다. */
  --brand:#0D6FB8;       /* 진파랑 · 버튼, dot, 강조 면. 흰 배경 대비 5.3:1 */
  --brand-light:#37BEEE; /* 하늘색 · 보조 면, 아이콘, 그라디언트 */
  --tag-bg:#0D6FB8;      /* 분류 뱃지(.cx-tag) — 포인트 파랑 바탕 · 흰 글씨 */
  --brand2:#0D6FB8;      /* 강조 텍스트 */
  --brand-link:#0D6FB8;  /* 링크 */
  --soft:#DCEEFA; --soft2:#EFF7FD;

  /* ★ 배경은 전부 흰색. 섹션 구분은 여백(--sec-top)으로만 한다 */
  --line:#cdd6da; --line2:#e4eaec; --bg:#fff; --paper:#fff;
  --paper2:#fff; --head:#f5f8f9;

  --amber:#8a6100; --amber-bg:#fff8e6; --amber-line:#f0dfae;
  --r:1.4rem; --r-lg:2.2rem; --pill:999px;

  /* ── 여백 — 11dent 리듬 (10px 루트 기준 rem) ── */
  --s1:.4rem; --s2:.8rem; --s3:1.2rem; --s4:1.6rem;
  --s5:2rem; --s6:2.6rem; --s7:3.4rem; --s8:4.8rem;
  --sec-top:15rem;     /* tmjdoctor .sub_section padding-top */
  --sec-gap:6rem;      /* 제목블록→콘텐츠 · tmjdoctor 실측 60px */

  /* ── 글자 — 11dent 실측 스케일 ────────────────────────────
     ort_style.css 데스크톱 분포: 카드제목 24 / 설명 18~20 / 체크·리드 22
     (기존 13~15px 은 11dent 대비 너무 작아 전면 상향)          */
  --f1:1.6rem;   /* 16px · 각주, 브레드크럼, 캡션 */
  --f2:1.8rem;   /* 18px · 작은 설명 (11dent li h4 p) */
  --f3:2rem;     /* 20px · 본문 설명 */
  --f4:2.2rem;   /* 22px · 기본 본문 (11dent checkList, .subTit p) */
  --f5:2.4rem;   /* 24px · 카드 제목 (11dent .flex li h4) */
  --f6:3rem;     /* 30px · 소제목 */
  --f-h1:4rem;
  --f-h2:5rem;         /* v2 섹션 메인 타이틀 = 50px */
  --f-eyebrow:2.2rem;  /* 11dent .subTit p */
  --f-pull:3rem;       /* 11dent h4.NotoSerifKR */
  /* ★ 설명글 표준 (레퍼런스 .rest_outro)
     font-size 2rem · color #000 · line-height 1.8 · margin 0 auto
     앞으로 본문 설명 문단은 이 값을 쓴다 */
  --f-desc:2rem; --lh-desc:1.8;

  --serif:"Noto Serif KR",serif;
  --sans:'NanumSquareNeo','Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,
         "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
/* PC 전용 줄바꿈 — 좁은 화면에서는 강제 줄바꿈이 오히려 어색해진다.
   <br class="pc"> 로 쓴다. */
br.pc{display:inline}
/* 모바일에서만 끊는 줄바꿈 — br.pc 의 반대 */
br.mo{display:none}
@media(max-width:768px){br.pc{display:none}br.mo{display:inline}}

/* 11dent 와 동일한 10px 루트 — 모든 치수를 rem 으로 */
html{font-size:10px;-webkit-text-size-adjust:100%;max-width:1920px;margin:0 auto}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;
  font-size:var(--f3);line-height:1.7;letter-spacing:-.012em;padding-bottom:calc(7.4rem + env(safe-area-inset-bottom,0px));word-break:keep-all}
/* ★ 리스트 불릿·링크 밑줄 제거 — 11dent·tmjdoctor 둘 다 html5_reset 을 쓴다.
   이게 없으면 GNB 의 <li> 에 점이 찍히고 메뉴에 밑줄이 그어진다. */
ul,ol{list-style:none;margin:0;padding:0}
a{color:var(--brand-link);text-decoration:none}
p{margin:0 0 var(--s3);color:var(--ink2)}
p strong{color:var(--ink);font-weight:700}

/* ★ 콘텐츠 폭 — tmjdoctor.co.kr 실측에 맞춘다.
     컨테이너 1400 + 좌우 여백 2rem → 실제 내용 폭 1360
     (제목 밑줄 선의 길이가 이 값이다)
     그 안에서 본문 1000 + gap 40 + aside 320 = 1360 으로 떨어진다. */
.wrap{max-width:1400px;margin:0 auto;padding:0 2rem}
/* 긴 산문은 1200 을 다 쓰면 한 줄이 너무 길다. 읽는 덩어리만 폭을 제한한다 */
.wrap>p,.lead,.c-answer p,.ans,.t-note{max-width:78rem}

/* ============================================================
   헤더 · GNB — tmjdoctor.co.kr 구조
   header > .hrow(flex, space-between) > .logo + nav.gnb > ul.lnb
   ul.lnb > li > a (대메뉴) + li > ul (hover 드롭다운)
   ============================================================ */
header.site{position:sticky;top:0;z-index:90;background:var(--fff,#fff);
  border-bottom:1px solid var(--line);transition:all .3s}
/* v2 헤더 실측(11dent): padding 5.6rem 0 0 · 메뉴 행 6rem · 로고 3.4rem */
header.site{padding:5.6rem 0 0}
/* 좁은 화면 — 데스크톱과 같은 5.6rem 을 두면 로고와 메뉴 버튼이 너무 내려온다 */
@media(max-width:1100px){header.site{padding:1.6rem 0 0}
  .logo{height:5.4rem}}
.logo{padding:0;display:flex;align-items:center;height:6rem}
.logo img{height:3.4rem;width:auto;display:block}
/* 로고 두 벌 — 투명 헤더에는 흰 로고, 스크롤해서 흰 바탕이 되면 컬러 로고.
   img 는 CSS 로 src 를 바꿀 수 없어 두 장을 겹쳐 두고 보이기만 바꾼다 */
.logo .c{display:none}
html .kv header.site.solid .logo .w{display:none}
html .kv header.site.solid .logo .c{display:block}
.hrow{max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;
  /* ★ center 로 두면 메가메뉴가 펼쳐질 때 로고가 세로 중앙으로 내려간다 */
  align-items:flex-start;justify-content:space-between;gap:2rem}
/* 하남맥 방식 — 로고는 화면 왼쪽 끝, 전화 버튼은 오른쪽 끝에 붙인다.
   대메뉴가 8개라 1400 안에서는 셋이 겹친다. 헤더 줄만 화면 폭을 쓴다.
   (본문 .wrap 1400 은 그대로 둔다) */
/* 대메뉴 좌우 여백. 하위 목록도 같은 값을 써서 세로줄을 맞춘다.
   ★ 기본값은 반드시 아래 미디어쿼리보다 먼저 선언한다 —
   같은 특정성이라 뒤에 오면 미디어쿼리 값을 덮어써 버린다 */
.lnb{--mi-pad:3rem}
/* 폭 계산 — 대메뉴 7개(글자폭 합 약 580px @20px) + 가로형 로고(194px)
   + 전화 버튼(약 190px). 1400 아래에서는 셋이 다 들어가지 않으므로
   글자와 여백을 단계로 줄이고, 전화 버튼은 1400 이상에서만 보인다 */
/* ★ 헤더 줄 폭 — 이 한 값만 고치면 로고~전화 버튼 사이 폭이 바뀐다.
   지금까지는 max-width 가 없어 화면 전체(최대 1920px)를 썼다. */
:root{--hd-w:1800px}
@media(min-width:1100px){
  /* ★ flex + space-between 은 내용 폭이 칸보다 넓어지면 남는 공간을 못 만들고
     뒤쪽 항목이 오른쪽으로 흘러넘친다. 그러면 로고는 제자리인데 전화 버튼만
     밀려 나가 좌우 여백이 달라 보인다.
     3분할 그리드로 바꾸면 양 끝 칸이 padding 선에 못박혀 항상 대칭이다. */
  .hrow{max-width:var(--hd-w);padding:0 4rem;gap:2.4rem;
    display:grid;grid-template-columns:auto minmax(0,1fr) auto}
  .hrow>.gnb{justify-self:center;min-width:0}
  .hrow>.hd-tel{justify-self:end}
  .lnb{--mi-pad:1.6rem}
  .lnb>li>a{font-size:1.8rem}
  .logo img{height:3rem}
}
@media(min-width:1400px){
  .lnb{--mi-pad:2rem}
}
@media(min-width:1700px){
  .lnb{--mi-pad:2.4rem}
  .lnb>li>a{font-size:2rem}
  .logo img{height:3.4rem}
}
.logo{flex:none;font-weight:800;font-size:var(--f5);color:var(--ink);
  letter-spacing:-.03em;white-space:nowrap;line-height:1.25;padding:1.8rem 0}
.logo small{display:block;font-weight:700;font-size:1.2rem;color:var(--brand);
  margin-top:.4rem;letter-spacing:.12em}

/* ── 메가메뉴 ────────────────────────────────────────────────
   tmjdoctor 방식: 메뉴 하나에 올려도 **전 메뉴의 하위가 한 번에** 펼쳐진다.

   ★ 단, 레퍼런스처럼 흐름 안에 두지 않는다(2026-08-28 변경).
     흐름 안에 두면 헤더가 124px → 318px 로 커지면서 **본문이 통째로 190px 밀린다.**
     마우스가 스칠 때마다 페이지가 출렁여 읽기가 어렵다.
     그래서 패널을 absolute 로 띄워 본문 위에 덮는다.

     원래 주석은 "absolute 로 띄우면 패널 위에 마우스가 있을 때 닫힌다"고 봤지만
     그렇지 않다 — 트리거가 `header.site:hover` 이고 패널이 헤더의 **자손**이라,
     패널이 헤더 박스 밖으로 나가도 CSS :hover 는 자손 위의 포인터를 부모 hover 로 친다. */
/* 헤더 오른쪽 전화 버튼 — customdentalclinic 메인의 라운드 버튼 */
.hd-tel{flex:none;align-self:center;display:none;padding:1.2rem 2rem;border-radius:100px;
  border:1px solid var(--line);font-family:var(--sans);font-size:1.7rem;font-weight:800;
  color:var(--ink);letter-spacing:-.03em;text-decoration:none;white-space:nowrap;
  transition:.2s}
.hd-tel:hover{border-color:var(--brand);color:var(--brand)}
@media(min-width:1400px){.hd-tel{display:block}}

/* ── 홈: 헤더를 키비주얼 위에 얹는다 (customdentalclinic 메인) ──
   메뉴에 마우스를 올려 메가메뉴가 열리면 흰 바탕으로 돌아온다. */
/* 홈과 서브 모두 키비주얼 위에 헤더를 얹는다. body 에 kv 표식을 단다. */
/* ★ position:fixed 는 html 이 아니라 화면을 기준으로 잡는다.
   html 은 max-width:1920px + margin:auto 로 가운데 정렬돼 있어서,
   그대로 두면 헤더와 본문의 중심이 달라져 한쪽 여백만 좁아진다.
   left/right 0 에 max-width 와 margin:auto 를 더해 같은 기준으로 맞춘다. */
html .kv header.site{position:fixed;left:0;right:0;max-width:1920px;margin:0 auto;
  background:transparent;border-bottom:0}
html .kv .lnb>li>a{color:#fff}
html .kv .lnb>li.on>a,html .kv .lnb>li:hover>a{color:#fff}
/* 흰 로고 파일을 직접 쓰므로 반전 필터는 두지 않는다 */
html .kv .hd-tel{border-color:rgba(255,255,255,.55);color:#fff}
html .kv .hd-tel:hover{background:#fff;color:var(--ink);border-color:#fff}
html .kv .burger span{background:#fff}
/* 메가메뉴가 열렸을 때(:hover)와 키비주얼을 지나 내려갔을 때(.solid)는 흰 바탕 */
/* 11dent header.fix_nav — 흰 바탕, 높이 9rem */
html .kv header.site.solid{background:#fff;border-bottom:1px solid var(--line);padding:1.5rem 0}
html .kv header.site.solid .logo,html .kv header.site.solid .lnb>li>a{height:auto}
/* ★ 스크롤해서 흰 바탕이 되면 줄 높이가 줄어드는데, .hrow 가 flex-start 라
   로고와 메뉴의 세로 위치가 어긋난다(로고가 위로 뜬다).
   이 상태에서는 가운데로 맞춘다. 메가패널은 height:0 + clip-path 로 열려
   헤더 높이를 밀지 않으므로, center 로 둬도 로고가 내려앉지 않는다. */
html .kv header.site.solid .hrow{align-items:center}
html .kv header.site.solid .logo{padding:0}
html .kv header.site.solid .lnb>li>a{color:#000}
html .kv header.site.solid .lnb>li.on>a{color:var(--brand)}

html .kv header.site.solid .hd-tel{border-color:var(--line);color:var(--ink)}
html .kv header.site.solid .burger span{background:var(--ink)}
/* 11dent 실측: 메가메뉴가 열려도 헤더는 투명한 채로 둔다.
   흰 면이 되는 것은 호버한 탭과 그 아래 패널뿐이다. */
@media(min-width:1100px){
  header.site:hover .lnb>li:hover>a{background:#fff;color:var(--brand)}
  header.site:hover .lnb>li:hover>a::before,
  header.site:hover .lnb>li:hover>a::after{opacity:1}
  html .kv header.site.solid .lnb>li:hover>a{color:var(--brand)}
}

/* 키비주얼은 첫 화면을 가득 채운다 */

/* ── 서브 키비주얼 (11dent 서브 상단) ────────────────────────
   풀블리드 사진 위 어두운 막, 가운데에 작은 라벨과 큰 제목만 둔다. */
/* 11dent section.sub_visual 실측 — height 60rem · radius 0 0 10rem 10rem · overflow hidden */
.sub-kv{position:relative;margin:0;height:60rem;overflow:hidden;
  border-radius:0 0 10rem 10rem;line-height:0;text-align:center}
.sub-kv>img{display:block;width:100%;height:100%;object-fit:cover}
.sub-kv::after{content:"";position:absolute;inset:0;background:rgba(14,20,26,.5)}
.sub-kv .tx{position:absolute;top:50%;left:50%;transform:translate(-50%,-35%);
  z-index:1;width:100%;padding:0 3rem;line-height:normal}
.sub-kv h1{margin:0;font-size:7rem;font-weight:800;color:#fff;
  letter-spacing:-.035em;line-height:1.15}
@media(max-width:1100px){.sub-kv h1{font-size:5rem}}
@media(max-width:768px){
  .sub-kv{height:36rem;border-radius:0 0 4rem 4rem}
  .sub-kv h1{font-size:3.4rem}
  .sub-kv .tx{padding-top:7rem}
}
/* 키비주얼 아래 빵부스러기 — 레퍼런스엔 없지만 길찾기와 검색에 필요하다 */
.sub-kv + main .breadcrumb,
main > .breadcrumb:first-child{max-width:1400px;margin:0 auto;padding:2rem;justify-content:flex-start}

/* 전화 버튼을 뺀 뒤로 메뉴가 오른쪽 끝에 붙어 있었다. 남은 폭 가운데에 둔다 */
nav.gnb{display:none;margin:0 auto}
.lnb{display:flex;align-items:flex-start;margin:0;padding:0;line-height:0;position:relative}
/* 간격은 min-width 가 아니라 좌우 패딩으로 준다 —
   항목 폭이 균일해지지 않는 대신 전체가 우측에 딱 붙는다 */
.lnb>li{min-width:auto;text-align:center;flex:none;position:relative}
/* 실측(tmjdoctor): a 150x88 · 28px Pretendard · #000 · padding 30px · line-height 1 */
/* 레퍼런스는 28px 이지만 대메뉴가 7개다. 우리는 8개라 한 단계 줄인다 */
/* 11dent nav>ul.nav-menu>li>a 원본 규칙 */
/* ★ a 를 block 으로 두면 li 폭(하위가 있으면 180px)을 그대로 채워서
   하위 없는 핵심경쟁력만 탭이 작아 보인다. inline-block 이면 어느 메뉴든
   글자+패딩 만큼만 차지해 탭 크기 기준이 같아진다.
   탭 양옆 곡선이 a 를 기준으로 붙도록 position:relative 도 함께 준다. */
.lnb>li>a{display:inline-block;position:relative;padding:1.4rem var(--mi-pad);font-size:2rem;font-weight:800;
  color:#000;line-height:3.2rem;position:relative;text-align:center;
  border-radius:2rem 2rem 0 0;white-space:nowrap}
/* 탭 양옆 아래의 오목한 이음새 — 45×45 상자에 그림자를 드리워 곡선을 만든다 */
.lnb>li>a::before,.lnb>li>a::after{content:"";position:absolute;top:15px;
  width:45px;height:45px;background:transparent;box-shadow:0 20px 0 0 #fff;opacity:0}
.lnb>li>a::before{left:-45px;border-bottom-right-radius:50%}
.lnb>li>a::after{right:-45px;border-bottom-left-radius:50%}
/* ★ 양 끝 항목의 바깥쪽 곡선도 그린다. 곡선은 항목 밖으로 45px 나가므로
   위 .lnb::after 의 좌우 돌출도 최소 4.5rem 이어야 한다.
   그보다 좁히면 곡선 아래에 이어 붙을 흰 면이 없어 각이 진 채로 남는다. */
/* ★ 예전에 ::after 를 대메뉴 밑줄로 쓰다가 `content:none` 으로 껐는데,
   그 ::after 가 호버 탭의 **오른쪽 아래 곡선**이기도 하다.
   그래서 탭 왼쪽만 둥글고 오른쪽은 각이 졌다. 곡선을 되살린다.
   (밑줄용이던 scaleX 잔재도 함께 걷어낸다) */
.lnb>li:hover>a,.lnb>li.on>a{color:var(--brand)}
/* 마지막 메뉴는 오른쪽 끝에 붙인다 */


/* 하위 — 평소 숨김, 헤더에 마우스가 올라오면 전부 노출 */
.lnb>li>ul{display:none;margin:0;padding:0 0 3.4rem}
/* 데스크톱 메가메뉴 — 흐름에 두되 높이만 0 으로 만든다.
   모바일(body.nav-open)은 아래 @media(max-width:1099px) 에서 static 으로 되돌린다.

   ★ absolute 로 띄우면 안 된다.
     흐름에서 빠지면 서브메뉴 너비가 부모 li 너비에 반영되지 않는다. 그러면
     "이갈이와 이악물기"(9자)처럼 부모("턱관절" 3자)보다 넓은 항목이 옆으로 삐져나가
     이웃 패널이 그 위를 덮어 **글자가 잘린다.**

   ★ height:0 + overflow:visible 이 핵심.
     - 흐름 안에 있으니 ul 너비가 li 너비를 밀어 준다 → 패널끼리 안 겹친다
     - 높이는 0 이라 헤더가 커지지 않는다 → 호버해도 본문이 안 밀린다
     - 항목들은 overflow 로 아래에 그려진다
     - 첫 항목 여백은 padding 이 아니라 margin 으로 준다.
       padding 은 박스 높이에 더해져 헤더를 밀지만, 안쪽 margin 은 넘쳐흐를 뿐이다. */
@media(min-width:1100px){
    :root{--mega-h:32rem}   /* 11dent 원본값 */

  /* ★ 백드롭과 **같은 속도로** 커튼처럼 내려오게 한다.
     예전엔 visibility 만 토글해서 항목은 즉시 뜨고 흰 배경만 0.25초 동안
     내려와 둘이 따로 놀았다.
     height:0 인 박스라 height·max-height 는 애니메이션할 수 없다. 대신
     clip-path inset() 의 bottom 을 음수로 키우면 박스 아래로 클립 영역이 자라
     위에서 아래로 열리는 슬라이드다운이 된다(길이값이라 보간된다).
     좌우 -50vw 는 가로로 넘치는 항목을 자르지 않기 위한 여유다.
     visibility 는 닫힐 때만 0.25초 늦춰 꺼서 사라지는 순간이 튀지 않게 한다. */
  /* ★ 하위 목록은 대메뉴와 **같은 중심축**에 둔다 (2026-09-30 변경).
     예전에는 --sub-x 로 칸 왼쪽에서 고정 5rem 들여썼다. 그런데 대메뉴 글자는
     .lnb>li{text-align:center} + a{display:inline-block} 탓에 180px 칸의
     가운데에 놓인다 — 글자 시작점이 (180 - 글자폭)/2 라 **글자 수마다 다르다.**
       3자 턱관절                글자 60.5px · 하위 50px → 하위가 10px 왼쪽
       4자 병원소개·일반진료     글자 50.5px · 하위 50px → 우연히 맞음
       5자 사랑니발치·핵심경쟁력 글자 40.5px · 하위 50px → 하위가 10px 오른쪽
     고정 픽셀로는 글자 수가 제각각이라 영원히 못 맞춘다. 가운데 정렬로 축을
     하나로 만들면 메뉴가 늘거나 이름이 바뀌어도 다시 틀어지지 않는다.
     ※ 탭이 글자를 감싸는 모양(a=inline-block, 아래 참고)을 지키면서
       정렬을 맞추는 방법은 이것뿐이다. */
  /* ★ ul 은 흐름 안에 둔다 — li 마다 180px(min-width)을 차지해 주는 덕분에
     메가패널의 칸 간격이 만들어진다. absolute 로 빼면 칸끼리 겹친다.
     탭 폭 문제는 li 가 아니라 a 쪽에서 푼다(아래 display:inline-block). */
  .lnb>li>ul{display:block;height:0;padding:0;overflow:visible;
    visibility:hidden;position:relative;z-index:1;
    clip-path:inset(0 -50vw 0 -50vw);
    transition:clip-path .25s ease, visibility 0s linear .25s}
    /* ★ margin 은 height:0 인 부모를 뚫고 나가 li 를 12px 밀어 헤더가 커진다.
     같은 여백을 padding 으로 주면 부모 높이에 영향이 없다. */
  .lnb>li>ul>li:first-child{padding-top:3rem}   /* 11dent 원본 30px */
  header.site:hover .lnb>li>ul{visibility:visible;
    clip-path:inset(0 -50vw calc(-1 * var(--mega-h)) -50vw);
    transition:clip-path .25s ease, visibility 0s}

  /* 전 폭 백드롭 — 하위 없는 메뉴 자리까지 흰 면으로 이어 붙여
     패널들이 낱장이 아니라 하나의 띠로 읽히게 한다.
     항목 높이가 메뉴마다 달라도 띠 높이는 --mega-h 로 일정하다.

     --mega-h 근거 (html{font-size:10px} · body{line-height:1.7}):
       한 행 = padding .9rem×2 + 1.6rem×1.7 = 4.52rem
       최대 6행(하위 5 + 부모 링크 1) = 27.12rem · 위아래 여백 3.2rem → 30.4rem
     하위가 6개를 넘으면 이 값을 키운다. */
  /* 11dent: 전 폭 띠가 아니라 메뉴 폭만큼의 둥근 패널이 내려온다 */
  /* 11dent ul.nav-menu:after 원본 — left -60px / right -80px / top 60px */
  /* ★ 펼쳐진 동안에는 흰 면 전체가 호버 대상이어야 한다.
     pointer-events:none 이면 서브메뉴 '글자 위'에서만 호버가 유지돼,
     항목 사이 빈 곳이나 하위가 없는 메뉴(병원소개 등) 아래를 지나는 순간
     메뉴가 접혀 버린다.
     닫혀 있을 때는 none 으로 둔다 — height:0 이어도 border-bottom 1px 이 남아
     헤더 바로 아래 1px 을 스치기만 해도 메뉴가 열리기 때문이다. */
  /* ★ 탭 양옆 이음새(::before/::after)가 a 바깥으로 45px 나간다.
   패널이 그보다 짧으면 첫·마지막 메뉴의 곡선 아래가 비어 잘려 보인다.
   50px = 45px 곡선 + 여유 5px */
  .lnb::after{content:"";position:absolute;left:-4.5rem;right:-4.5rem;top:6rem;
    height:0;background:#fff;border-radius:2rem;opacity:0;
    pointer-events:none;transition:height .25s ease,opacity .25s ease}
  header.site:hover .lnb::after{height:var(--mega-h);opacity:1;pointer-events:auto}
  /* 호버한 대메뉴는 흰 탭이 되어 패널과 이어진다 */
  header.site:hover .lnb>li:hover>a{background:#fff;color:var(--brand)}
}
/* ★ 하위 항목은 가운데 정렬 — 대메뉴와 중심축을 맞춘다(위 309행 참고).
   좌우 padding 을 주면 축이 틀어지므로 ul·a 모두 0 을 유지한다. */
.lnb>li>ul{line-height:normal;text-align:center;min-width:18rem}
/* 11dent 하위 a — padding 10px 20px · 16px · 800 · letter-spacing -0.8px */
/* ★ 좌우 패딩은 0 으로 둔다 — 값을 주면 white-space:nowrap 인 항목이
   칸(18rem)을 넘겨 가운데축이 밀린다 */
.lnb>li>ul>li>a{display:block;padding:1rem 0;font-size:1.6rem;font-weight:800;
  line-height:normal;letter-spacing:-.08rem;color:#666;white-space:nowrap;transition:.2s}
/* ★ 하위 메뉴 글자는 #666 — 11dent 의 nav{color:var(--font_666)} 와 같은 값이다.
   본문 하한(#444)을 적용하면 대메뉴와 위계가 사라져 메뉴가 답답해진다. */
.lnb>li>ul>li>a:hover{color:var(--brand);font-weight:700}
@media(min-width:1100px){
  header.site:hover .lnb>li>ul{display:block}
  header.site:hover{box-shadow:0 1.6rem 3rem rgba(13,111,184,.07)}
}

@media(min-width:1100px){nav.gnb{display:block}.burger{display:none}}

/* 모바일 햄버거 */
.burger{flex:none;width:4.6rem;height:4.6rem;border:0;background:none;cursor:pointer;padding:0}
.burger span{display:block;width:2.4rem;height:2px;background:var(--ink);margin:.6rem auto;transition:.2s}
body.nav-open .burger span:nth-child(1){transform:translateY(.8rem) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-.8rem) rotate(-45deg)}
@media(max-width:1099px){
  body.nav-open nav.gnb{display:block;position:fixed;top:7rem;left:0;right:0;bottom:0;
    background:#fff;overflow-y:auto;padding:2rem;z-index:80}
  body.nav-open .lnb{flex-direction:column}
  body.nav-open .lnb>li{min-width:0;text-align:left;border-bottom:1px solid var(--line2)}
  body.nav-open .lnb>li>a{padding:1.8rem .4rem;font-size:2rem}
  body.nav-open .lnb>li>a::after{display:none}
  body.nav-open .lnb>li>ul{display:block;position:static;transform:none;border:0;
    box-shadow:none;padding:0 0 1.2rem 1.6rem;min-width:0;text-align:left}
  body.nav-open .lnb>li>ul>li>a{padding:.8rem .4rem}
}

/* ============================================================
   서브 페이지 레이아웃 — tmjdoctor.co.kr
   .page_head (제목 + 밑줄 + 브레드크럼)
   .sub_layout = 본문 1fr + aside 32rem
   ============================================================ */
/* 헤더 밑 여백 — 레퍼런스 실측 26px */
.page_head{padding:2.6rem 0 2rem;margin-bottom:0}
.page_title{font-family:var(--sans);font-size:4.6rem;font-weight:700;color:var(--ink);
  letter-spacing:-.02em;line-height:1.4;border-bottom:2px solid var(--ink);padding-bottom:2rem;margin:0}
.page_title em{font-style:normal;color:var(--brand)}
/* 브레드크럼 — tmjdoctor 실측
   flex · gap 14px · margin-top 30px · 17px · #000
   li: gap 10px · li::before 20x20 원(테두리 1px) 안에 화살표 10px
   현재 페이지(.active)는 원을 포인트 컬러로 채우고 화살표를 흰색으로 */
.breadcrumb{display:flex;align-items:center;gap:1.4rem;margin:3rem 0 0;padding:0;
  font-size:1.7rem;color:#000;list-style:none;flex-wrap:wrap}
.breadcrumb li{display:flex;align-items:center;gap:1rem;color:#000}
.breadcrumb li::before{
  content:"";flex:none;width:2rem;height:2rem;border-radius:50%;
  border:1px solid #818382;background:transparent no-repeat center/.9rem .9rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818382' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.breadcrumb li.active::before{
  border-color:var(--brand);background-color:var(--brand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{color:var(--brand)}

.sub_layout{display:grid;grid-template-columns:minmax(0,1fr);gap:4rem;
  margin-top:6rem;align-items:stretch}
/* 키비주얼 아래 첫 라벨까지 12rem(11dent .subTit padding-top).
   빵부스러기(69px)가 그 안에 들어가므로 나머지 51px 만 준다.
   첫 섹션 위에는 세로 구분선을 두지 않는다 — 나눌 것이 없다. */
.sub-kv + main .sub_layout{margin-top:0}
.sp_main>*:first-child .shead{padding-top:0}
.sp_main>*:first-child{padding-top:5.1rem}
.sp_main section.blk:first-child>.shead::before,
.sp_main>*:first-child .shead::before{content:none}

/* ── v2 서브: 사이드바를 없애고 본문 한 단을 가운데에 둔다 (최대 1200) ── */
.sub_layout{grid-template-columns:minmax(0,1fr)!important}
.sp_aside{display:none!important}
.sp_main{max-width:120rem;margin:0 auto;width:100%}
@media(min-width:1100px){.sub_layout{grid-template-columns:minmax(0,1fr) 32rem}}
.sp_main{min-width:0}

/* ── 우측 사이드 — 목차가 스크롤을 따라 내려온다 ──────────────
   yonseiwhite.com/crown 방식. 저쪽은 494px 짜리 상담 블록 하나를 붙인다.
   따라다니는 블록 아래에 다른 카드가 있으면 스크롤할 때 그 위로 겹쳐 올라온다.
   그래서 사이드바에는 목차와 예약 버튼만 두고 통째로 붙였다.
   ★ 목차 15줄(턱관절)이 1280×800 에도 잘리지 않아야 해서 줄 간격을 좁혔다.
     섹션이 더 늘면 여기 padding 과 font-size 를 다시 재야 한다.
   ★ .sp_aside 가 본문 높이만큼 늘어나야(align-items:stretch) 끝까지 따라온다. */
.sp_aside{display:none}
@media(min-width:1100px){
  .sp_aside{display:flex;flex-direction:column;align-self:stretch}
  .aside_sticky{position:sticky;top:10rem;display:flex;flex-direction:column}
  /* 목차 15줄이 한 화면에 들어와야 하므로 따라오는 목차만 줄 간격을 좁힌다 */
  .aside_sticky>.aside_card{padding:0 0 1rem}
  .aside_sticky .aside_title h4{font-size:2.2rem;margin-bottom:1.4rem}
  .aside_sticky .aside_list>li{padding:.8rem 0}
  /* 한 줄로 잘라 15줄이 한 화면에 들어오게 한다. 전체 문장은 title 속성에 남긴다 */
  .aside_sticky .aside_list a{line-height:1.5;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.aside_card{padding:3rem 0;flex:none}
.aside_card:first-child{padding-top:0}

.aside_title{margin:0 0 1rem;color:var(--ink-strong);font-weight:700}
.aside_title>span{display:flex;align-items:center;gap:.5rem;
  color:var(--brand);font-size:1.6rem;font-weight:700;margin-bottom:.6rem}
.aside_title h4{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:2px solid var(--ink-strong);padding-bottom:1rem;margin:0 0 2rem;
  font-size:2.6rem;font-weight:800;color:var(--ink-strong)}
.aside_title h5{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:2.2rem;font-weight:700;color:var(--ink-strong);margin:0 0 1.6rem}
.aside_title .more{font-size:1.4rem;font-weight:600;color:var(--brand);text-decoration:none}

.aside_list{margin:0;padding:0;list-style:none}
.aside_list>li{padding:1.2rem 0;border-bottom:1px solid var(--line2)}
.aside_list>li:last-child{border-bottom:0}
.aside_list a{display:block;font-size:1.6rem;color:var(--ink2);text-decoration:none;
  line-height:1.5;transition:.2s}
.aside_list a:hover,.aside_list a.on{color:var(--brand);font-weight:700}

/* 배너 카드 */
.aside_card.visual{padding:0;overflow:hidden;position:relative;border-radius:0}
.aside_card.visual img{width:100%;height:100%;object-fit:cover;display:block}
.aside_card.visual::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,0) 62%)}
.aside_card.visual .txt{position:absolute;bottom:0;left:0;right:0;z-index:1;
  padding:1.6rem 1.8rem;color:#fff}
.aside_card.visual h4{display:block;font-size:2.4rem;font-weight:800;letter-spacing:-.05em;margin:0}
.aside_card.visual p{display:block;margin:.4rem 0 0;font-size:1.5rem;font-weight:600;color:rgba(255,255,255,.9)}

/* 진단 과정 — tmjdoctor .aside_step 실측
   카드 #444 · padding 30px 20px · 각짐 · 제목 25px w600 흰색
   번호 70x70 원(속 비고 테두리 7px 포인트) · b 16px w700 흰색 · p 14px #ACACAC */
.aside_card.aside_step{background:#444;border-radius:0;padding:3rem 2rem}
.aside_card.aside_step .aside_title h5{color:#fff;font-size:2.5rem;font-weight:600;margin:0 0 1.6rem}
.step_list{list-style:none;padding:0;margin:0}
.step_list>li{display:flex;gap:1.4rem;padding:.8rem 0;align-items:center;border:0}
.step_list>li .no{flex:0 0 7rem;width:7rem;height:7rem;border-radius:50%;
  background:transparent;border:.7rem solid var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.8rem;font-weight:700;box-sizing:border-box}
.step_list .txt b{display:block;font-size:1.6rem;color:#fff;font-weight:700;line-height:1.4}
/* 어두운 카드 위의 링크는 기본 파란색이면 안 읽힌다 */
.step_list .txt b a{color:#fff}
.step_list .txt b a:hover{color:var(--brand-light)}
.step_list .txt p{margin:.3rem 0 0;font-size:1.4rem;color:#444;line-height:1.5}

/* FAQ 카드 — 레퍼런스 aside .faq_wrap 실측: #f9f9f9 · 1px #eaeaea · 각짐 · padding 30px 20px
   내용은 본문 FAQ 와 같은 Q/A 원형 배지, 크기만 줄인다 */
.aside_card.faq_wrap{background:#f9f9f9;border:1px solid #eaeaea;border-radius:0;padding:3rem 2rem}
.faq_wrap .aside_list>li{padding:1.4rem 0}
.faq_wrap .faq_q{position:relative;margin:0;padding-left:3.4rem;
  font-size:1.6rem;font-weight:700;color:#444;line-height:1.5}
.faq_wrap .faq_q::before{content:"Q";position:absolute;left:0;top:.1rem;
  width:2.2rem;height:2.2rem;border-radius:50%;background:#333;color:#fff;
  font-size:1.4rem;line-height:2.2rem;text-align:center;font-weight:600}
.faq_wrap .faq_a{position:relative;margin-top:.8rem;padding-left:3.4rem}
.faq_wrap .faq_a::before{content:"A";position:absolute;left:0;top:.1rem;
  width:2.2rem;height:2.2rem;border-radius:50%;background:var(--brand);color:#fff;
  font-size:1.4rem;line-height:2.2rem;text-align:center;font-weight:600}
.faq_wrap .faq_a p{margin:0;font-size:1.4rem;color:#000;font-weight:300;line-height:1.7}

/* 전화·진료시간 — tmjdoctor .tel_card 실측
   배경 없음 · padding 30px 0 · 번호 55px w600 #333 · 시간행 20px w600 #747474
   행은 [시간 ─ 요일] 순서로 좌우 정렬 */
.tel_card{background:none;border-radius:0;padding:3rem 0}
.tel_card .tel{font-family:'Barlow',var(--sans);font-size:5.5rem;font-weight:600;
  letter-spacing:-.005em;margin:0 0 1.5rem;color:#333;line-height:1.1}
.tel_card .tel a{color:inherit;text-decoration:none}
.aside_time{margin:0 0 2rem;padding-top:1.2rem;border-top:1px solid var(--line);color:#444}
.aside_time>div{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;
  font-size:2rem;font-weight:600}
.aside_time dt{margin:0;font-family:'Barlow',var(--sans);color:#444}
.aside_time dd{margin:0;color:#444}
.tel_card .btn-book{display:block;text-align:center}

/* ── 사이드바 CTA — 진료일정 아래 2버튼 ── */
.aside_cta{display:flex;flex-direction:column;gap:.8rem;margin:0 0 3.4rem}
/* 사이드바 예약 버튼 — 본문 버튼보다 낮고 모서리를 둥글게 */
.aside_cta .a-btn{padding:1.3rem 1rem;font-size:1.6rem;border-radius:.8rem}
.a-btn{display:block;text-align:center;padding:1.8rem 1rem;border-radius:0;
  font-size:1.8rem;font-weight:700;letter-spacing:-.03em;line-height:1.3;
  text-decoration:none;transition:.15s}
.a-btn.primary{background:var(--brand);color:#fff;border:1px solid var(--brand)}
.a-btn.primary:hover{background:#0a5c9c;border-color:#0a5c9c}
.a-btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.a-btn.ghost:hover{background:var(--soft2)}

/* ── 월 진료일정 달력 — tmjdoctor .cal_card 실측 ──────────────
   헤더 #f6f5f3 · 26px w700 · padding 28px 10px · 셀 16px
   야간진료/휴진은 날짜에 옅은 원을 깔고 아래에 작은 라벨 */
.cal_card{padding:3rem 0}
.sched_cal_hd{background:#f6f5f3;color:#1a1a1a;font-size:2.6rem;font-weight:700;
  padding:2.8rem 1rem;text-align:center;letter-spacing:-.03em}
.sched_cal_hd strong{color:var(--brand)}
.sched_cal_tb{width:100%;border-collapse:collapse;margin-top:1.6rem}
.sched_cal_tb caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sched_cal_tb th{font-family:'Barlow',var(--sans);font-size:1.5rem;font-weight:500;
  color:#444;padding:.8rem 0;border-bottom:1px solid var(--line2)}
.sched_cal_tb th.sun{color:#444}
.sched_cal_tb th.sat{color:#444}
.sched_cal_tb td{font-size:1.6rem;color:#222;text-align:center;padding:1.2rem 0 .6rem;
  vertical-align:top}
.sched_cal_tb td.sun{color:#444}
.sched_cal_tb td.sat{color:#444}
.sched_cal_tb td.mark{padding:.6rem 0}
.sched_cal_tb td.mark .dnum{display:inline-grid;place-items:center;width:2.8rem;height:2.8rem;
  border-radius:50%;font-weight:600}
.sched_cal_tb td.night .dnum{background:#fdf0dc;color:#444}
.sched_cal_tb td.off .dnum{background:#fbe4e4;color:#444}
.sched_cal_tb .dtxt{display:block;font-size:1.1rem;margin-top:.2rem;letter-spacing:-.04em}
.sched_cal_tb td.night .dtxt{color:#444}
.sched_cal_tb td.off .dtxt{color:#444}
/* 안내 문구도 면을 깐다 — 레퍼런스 .sched_cal_note: #f6f5f3 · padding 18px 14px · 각짐 */
.sched_cal_note{margin:1.6rem 0 0;padding:1.8rem 1.4rem;list-style:none;
  background:#f6f5f3;border-radius:0;font-size:1.3rem;color:#333;line-height:1.7;
  text-align:center}
.sched_cal_note li{color:#333}
.sched_cal_note li.hold{display:none}
body.review .sched_cal_note li.hold{display:block;color:var(--amber)}


/* ---- hero ---- */
/* 다른 섹션과 같은 리듬 — 중앙정렬 텍스트 먼저, 이미지는 그 아래 전폭. */
.hero{display:block;padding:0;text-align:center}
.hero>div:first-child{max-width:76rem;margin:0 auto}
/* 히어로 배너 — 이미지 원본 크기 972x320 에 맞춘다 */
.hero .photo{margin:5rem auto 0;aspect-ratio:972/320;border-radius:0;width:97.2rem;max-width:100%}

.eyebrow{display:inline-grid;place-items:center;width:17rem;height:17rem;
  background:#444;color:#fff;font-size:2.4rem;font-weight:700;
  border-radius:50%;margin-bottom:var(--s6);letter-spacing:-.03em;line-height:1.45;
  text-align:center;padding:0}
/* ★ 11dent 인장 — 본문은 산세리프, 대제목만 세리프 */
h1{font-family:var(--sans);font-size:3.2rem;line-height:1.35;letter-spacing:-.02em;
  margin:0 0 var(--s4);font-weight:700;color:var(--ink)}
h1 em{font-style:normal;color:var(--brand2);font-weight:600}
@media(min-width:820px){h1{font-size:var(--f-h1)}}
.hero .sub{font-size:var(--f-eyebrow);color:var(--ink2);font-weight:700;line-height:1.6;margin:0}
.hero .sub em{font-style:normal;color:var(--brand2)}

/* ---- section rhythm — 11dent .subTit 리듬 ----
   ★ 배경 교차를 쓰지 않는다. 전부 흰색이고 구분은 여백이 만든다.
     (11dent 서브페이지도 같은 방식 — padding-top 12rem 이 경계 역할을 한다) */
section{padding:0}
section.alt{background:none}
.shead{padding-top:var(--sec-top);margin:0 auto var(--sec-gap);max-width:76rem;text-align:center}
/* v2: 제목·설명 줄바꿈은 본문의 <br> 이 정한다. 폭으로 끊지 않는다 */
.shead{max-width:none}
/* 11dent #sub main .subTit — padding-top 12rem · margin-bottom 8rem */
.sp_main .shead{padding-top:12rem;margin:0 auto 8rem}
/* 11dent #sub .subTit h2 — 5rem · 500 · 130% · -.08em · Noto Serif KR · margin-top 3rem */
.sp_main .shead h2,
.sp_main .r-lead h2,
.sp_main .r-sec>.hd h2{font-family:var(--serif);font-size:5rem;font-weight:500;
  line-height:1.3;letter-spacing:-.08em;color:var(--font_333,#333);margin:3rem 0 0}
/* 점이 있는 섹션에서는 라벨을 쓰지 않는다 — 11dent 는 점 → 제목 → 설명이다.
   파란 글씨 라벨과 아이콘 라벨(.ico-check 등) 모두 해당한다.
   HTML 에는 남겨 두었으니 되살리려면 이 한 줄만 지우면 된다. */
.sp_main section.blk:not(:first-child)>.shead .snum{display:none}

/* 섹션 머리 위의 점 — 11dent .subTit span.dot
   4.4rem 원에 margin 5rem auto 4rem. 커졌다 작아지는 맥박과
   바깥으로 번지는 고리를 함께 준다.
   원본은 고리를 :before 자식으로 그리지만 여기는 가상요소가 하나뿐이라
   같은 움직임을 box-shadow 로 만든다. */
.sp_main section.blk>.shead::before{content:"";display:block;
  width:4.4rem;height:4.4rem;border-radius:10rem;background:var(--brand);
  margin:5rem auto 4rem;animation:dot-pulse 2s infinite,dot-ring 2s infinite}
@keyframes dot-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
/* 고리는 라벨에 닿기 전에 사라지게 반경을 줄인다.
   점 반지름 22 × 확대 1.2 = 26.4 · 고리 20 → 46 < 라벨까지 62 */
@keyframes dot-ring{
  0%{box-shadow:0 0 0 0 rgba(13,111,184,.4)}
  100%{box-shadow:0 0 0 2rem rgba(13,111,184,0)}}
@media(prefers-reduced-motion:reduce){
  .sp_main section.blk>.shead::before{animation:none}}
@media(max-width:768px){
  .sp_main section.blk>.shead::before{width:2.5rem;height:2.5rem;margin:2.5rem auto 2.5rem}}

/* ── 섹션 머리의 큰 영문 — tmjdoctor .section_tit > span ──────
   실측: 180px · Barlow · weight 300 · #323232 · line-height 1 · margin 0
   한글 제목(h2 40px) 바로 위에 얹힌다. */
.snum{font-family:'Barlow',var(--sans);font-size:clamp(6rem,12vw,18rem);font-weight:300;
  line-height:1;color:#323232;letter-spacing:-.04em;display:block;text-transform:uppercase;
  /* 레퍼런스 h2.hero_title 실측: margin 0 0 40px */
  margin:0 0 4rem}
.snum em{font-style:normal;color:var(--brand)}
/* 숫자 + 단어 라벨 — 숫자는 크게, 단어는 작게 아래쪽에 붙인다 (4step) */
.snum.lower{text-transform:none;display:flex;align-items:flex-end;justify-content:center;gap:0}
.snum.lower b{font-weight:300;line-height:.86;letter-spacing:-.05em}
/* step 은 숫자에 거의 붙는다 — 샘플에서 둘 사이 간격이 거의 없다 */
.snum.lower span{font-size:.32em;font-weight:400;line-height:1.42;letter-spacing:-.02em;
  margin-left:-.02em}

/* 한글 라벨 — 4-7-6 규칙 5 「섹션 라벨을 영문으로 쓰지 않는다」.
   거대 영문 레터링 자리를 대신하므로 크기를 줄이고 포인트 컬러로 세운다. */
.snum.ko{font-family:var(--sans);font-size:2.4rem;font-weight:800;color:var(--brand);
  letter-spacing:0;line-height:1.4;text-transform:none;margin:0}
@media(max-width:768px){.snum.ko{font-size:1.7rem;margin-bottom:1rem}}
/* 큰 영문 대신 아이콘을 쓰는 변형 — 포인트 컬러 원 + 흰 체크
   (레퍼런스도 첫 섹션은 텍스트가 아니라 아이콘을 쓴다) */
.snum.ico-check{
  width:7.6rem;height:7.6rem;margin:0 auto 2.4rem;border-radius:0;
  background:none no-repeat center/7.6rem 7.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%230D6FB8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='19' stroke-width='4'/%3E%3Cpath d='M15 24.5l6.5 6.5L33 18.5' stroke-width='4.5'/%3E%3C/svg%3E")}
@media(max-width:768px){.snum.ico-check{width:6rem;height:6rem;background-size:6rem 6rem;margin-bottom:1.8rem}}
/* 비용 아이콘 — 명세서. ico-check와 같은 원·선 규격 */
.snum.ico-cost{
  width:7.6rem;height:7.6rem;margin:0 auto 2.4rem;border-radius:0;
  background:none no-repeat center/7.6rem 7.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%230D6FB8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 13H7.5A2.5 2.5 0 0 0 5 15.5V36a4 4 0 0 0 4 4h1'/%3E%3Crect x='13' y='8' width='30' height='32' rx='3'/%3E%3Crect x='18' y='13.5' width='11' height='11'/%3E%3Cpath d='M34 14h4M34 19h4M34 24h4'/%3E%3Cpath d='M18 30h20M18 34.5h20'/%3E%3C/svg%3E")}
@media(max-width:768px){.snum.ico-cost{width:6rem;height:6rem;background-size:6rem 6rem;margin-bottom:1.8rem}}
/* 확인·진단 아이콘 — 돋보기 안에 십자. 원 배경 없이 포인트 컬러 라인만 */
.snum.ico-see{
  width:7.6rem;height:7.6rem;margin:0 auto 2.4rem;border-radius:0;
  background:none no-repeat center/7.6rem 7.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%230D6FB8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='13' stroke-width='4'/%3E%3Cpath d='M20 14v12M14 20h12' stroke-width='4.5'/%3E%3Cpath d='M29.6 29.6L41 41' stroke-width='5'/%3E%3C/svg%3E")}
@media(max-width:768px){.snum.ico-see{width:6rem;height:6rem;background-size:6rem 6rem;margin-bottom:1.8rem}}

/* 기간 아이콘 — 시계. ico-see 와 같은 규격(원 배경 없이 포인트 컬러 라인) */
.snum.ico-time{
  width:7.6rem;height:7.6rem;margin:0 auto 2.4rem;border-radius:0;
  background:none no-repeat center/7.6rem 7.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%230D6FB8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='25' r='17' stroke-width='4'/%3E%3Cpath d='M24 15v10.5l7 4.5' stroke-width='4'/%3E%3Cpath d='M17.5 6.5h13' stroke-width='4'/%3E%3C/svg%3E")}
@media(max-width:768px){.snum.ico-time{width:6rem;height:6rem;background-size:6rem 6rem;margin-bottom:1.8rem}}

h2{font-family:var(--sans);font-size:var(--f-h2);line-height:1.32;letter-spacing:-.018em;
  margin:0 0 3rem;font-weight:700;color:var(--ink)}
h2 em{font-style:normal;color:var(--brand);font-weight:inherit}
h3{font-size:var(--f5);letter-spacing:-.03em;margin:var(--s7) 0 var(--s3);font-weight:800}
/* v2 설명 텍스트 = 22px. 줄바꿈은 본문의 <br> 이 정하므로 폭을 묶지 않는다 */
.lead{max-width:none}
/* v2 설명 텍스트 = 22px */
/* 11dent #sub main .subTit p 실측 — 700 / 160% / 2.2rem / margin-top 3rem
   (letter-spacing 은 그 규칙에서 꺼져 있어 넣지 않는다) */
.lead{color:var(--ink2);margin:3rem auto 0;font-size:2.2rem;line-height:1.6;font-weight:700}
/* 11dent .subTit p span — 설명 안에서 한 군데만 포인트 컬러로 짚는다 */
.lead span{color:var(--brand);font-weight:800}
/* 리드 안의 가벼운 강조 — span 은 800 이라 세다. 색으로만 짚고 굵기는 한 단계만 올린다 */
.lead em{font-style:normal;color:var(--brand2);font-weight:600}
/* 인용 한 줄 = 11dent h4.NotoSerifKR */
.pull{font-family:var(--serif);font-size:var(--f-pull);font-weight:600;line-height:1.5;
  letter-spacing:-.024em;color:var(--ink);text-align:center;margin:6rem auto 0;max-width:76rem}
.rule{display:none}
/* 섹션 제목 아래 들어가는 도해 이미지 */
.sec-fig{display:block;margin:0 auto var(--s7);width:min(100%,100rem);max-width:100%;
  height:auto;border-radius:2rem}
/* 사진 파일이 972·1000·940 으로 제각각이라 섹션마다 폭이 달라 보였다.
   본문 폭(1200) 안에서 한 가지 폭(1000)으로 맞춘다. .sm 은 따로 잡는다. */
/* 원본이 작은 도판 — 억지로 늘리지 않고 가운데에 그대로 둔다 */
.sec-fig.sm{margin:var(--s7) auto;max-width:min(100%,64rem)}
/* 세로형 도판(보증서 · 증명서) — 가로 사진 폭(100rem)을 그대로 쓰면
   화면을 넣어버린다. 폭을 좁히고 높이로 상한을 걸어 한 화면에 들어오게 둔다. */
.sec-fig.tall{width:100%;max-width:none;height:auto;margin:0;
  border-radius:1.2rem;border:1px solid var(--line);background:#fff}
/* 높이로 상한을 걸면 A4 비율 탓에 폭이 오히려 좁아져 글씨가 안 읽힌다.
   문서는 스크롤해서 보는 것이므로 폭을 기준으로 잡는다. */
a.fig-zoom{position:relative;display:block;width:min(100%,64rem);
  margin:var(--s7) auto;line-height:0}
a.fig-zoom .zoom-hint{position:absolute;right:1.2rem;bottom:1.2rem;
  padding:.7rem 1.4rem;border-radius:100px;background:rgba(23,31,38,.72);
  font-size:1.4rem;font-weight:700;line-height:1;color:#fff;
  opacity:0;transition:opacity .15s}
a.fig-zoom:hover .zoom-hint,a.fig-zoom:focus-visible .zoom-hint{opacity:1}
@media(hover:none){a.fig-zoom .zoom-hint{opacity:1}}

/* ── 좌 이미지 / 우 텍스트 2단 (C3 도해 변형) ── */
.c-split{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:5rem;align-items:center;margin-top:var(--s7)}
.c-split>.fig img{display:block;width:100%;height:auto;border-radius:2rem}
/* 사진 옆 목록 배치 — 레퍼런스 실측을 따랐다.
   이미지 575×482(비율 1.193), 좌우 칸을 반반으로 두고 사이를 7rem 벌린다.
   .figbig(턱관절) 은 다른 비율이라 건드리지 않는다. */
.c-split.centered{grid-template-columns:repeat(2,minmax(0,1fr));gap:5rem}
.c-split.centered>.fig img{aspect-ratio:575/482;height:auto;object-fit:cover}
@media(max-width:768px){
  .c-split.centered{grid-template-columns:minmax(0,1fr);gap:3rem}
}

/* 사진 옆 항목 목록 — 레퍼런스에 맞춰 점과 구분선을 걷었다.
   항목을 가르는 것은 여백이고, 눈이 먼저 걸리는 것은 파란 소제목이다.
   줄과 점을 함께 쓰면 짧은 목록이 표처럼 뻣뻣해진다. */
/* 항목 사이를 얇은 회색 선으로 끊고 위아래 여백을 준다 —
   선이 없으면 세 덩어리가 한 문단처럼 붙어 읽힌다.
   칸 폭을 그대로 쓰면 선이 글보다 한참 길게 뻗으므로 글줄 폭에 맞춰 잡는다. */
.split-list{display:grid;gap:0;text-align:left;max-width:54rem}
.split-list li{position:relative;padding:3.4rem 0;border-top:1px solid var(--line2)}
.split-list li:first-child{padding-top:0;border-top:0}
.split-list li:last-child{padding-bottom:0}
.split-list b{display:block;font-size:2.4rem;font-weight:700;color:var(--brand2);
  letter-spacing:-.03em;margin-bottom:.8rem;line-height:1.4}
.split-list span{display:block;font-size:2rem;color:var(--ink2);line-height:1.75}
.split-list a{display:block;text-decoration:none;color:inherit;transition:.15s}
.split-list a:hover b{color:var(--ink-strong)}
/* 도해를 그대로 넣는 경우 · 도해 밑 캡션 */
.c-split>.fig svg{display:block;width:100%;height:auto}
.c-split .fig-cap{font-size:var(--f2);color:var(--ink3);line-height:1.6;margin:var(--s3) 0 0}
/* 인용 위에 얹는 한마디 */
/* 2단 안에서는 직답 블록을 왼쪽으로 맞춘다 — 가운데 정렬은 한 단일 때 쓴다 */
.c-split .c-answer{text-align:left}
.c-split .c-answer .dots4{justify-content:flex-start}
.c-split + .t-note,
.c-over + .t-note{margin-top:var(--s8)}
/* ── 사진 위에 항목을 얹는 정리 블록 .c-over ── */
.c-over{position:relative;border-radius:2rem;overflow:hidden;margin-top:var(--s7)}
.c-over>img{display:block;width:100%;height:auto;aspect-ratio:1200/760;object-fit:cover}
.c-over::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.78) 42%,rgba(0,0,0,.34) 70%,rgba(0,0,0,.06) 100%)}
.over-list{position:absolute;left:0;right:0;bottom:0;z-index:1;
  width:min(100% - 8.8rem,86rem);margin:0 auto;padding:0 0 3.6rem;
  list-style:none;text-align:left}
.over-list>li{border-top:1px solid rgba(255,255,255,.24)}
.over-list>li:first-child{border-top:0}
.over-list a{display:grid;grid-template-columns:minmax(0,25rem) minmax(0,1fr);
  gap:2.6rem;align-items:center;padding:1.9rem 0;text-decoration:none;transition:.15s}
.over-list a:hover b{color:var(--brand-light)}
.over-list b{display:flex;align-items:center;gap:1.1rem;color:#fff;
  font-size:1.9rem;font-weight:700;letter-spacing:-.03em;line-height:1.4}
.over-list b svg{flex:none;width:2.4rem;height:2.4rem;padding:.55rem;border-radius:50%;
  background:var(--brand-light);stroke:#0b1a20;fill:none;stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round}
.over-list span{color:rgba(255,255,255,.84);font-size:1.7rem;line-height:1.65}
@media(max-width:900px){
  .over-list{position:static;padding:2.6rem 2.4rem;background:#2a2a2a}
  .c-over::after{display:none}
  .over-list a{grid-template-columns:minmax(0,1fr);gap:.6rem;padding:1.4rem 0}
}

.c-split.tight{max-width:78rem;margin-left:auto;margin-right:auto;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:4.5rem}
@media(max-width:900px){
  .c-split{grid-template-columns:minmax(0,1fr);gap:3rem}
  .c-split .shead h2{font-size:2.8rem}
}

/* ── 이미지 자리표시 ────────────────────────────────────────
   파일을 assets/img/ 에 지정된 이름으로 넣으면 이 블록을 <img> 로 바꾼다. */
.img-slot{display:grid;place-content:center;justify-items:center;gap:.6rem;
  margin:var(--s7) auto 0;border:1px dashed #c3d0d6;border-radius:0;background:#f7fafb;
  color:#444;text-align:center;padding:2rem}
.img-slot.ratio-16x9{aspect-ratio:16/9;width:97.2rem;max-width:100%}
/* 4단 스텝 카드 이미지 비율 — 235 : 286.89 */
.img-slot.ratio-step{aspect-ratio:235/287;width:100%;margin:0;padding:1.2rem;font-size:1.3rem}
.img-slot b{font-size:var(--f4);font-weight:700;color:#444}
.img-slot span{font-size:var(--f2);line-height:1.6}
.img-slot em{font-style:normal;font-weight:700;color:var(--brand)}

/* 도해 아래 들어가는 가운데 정렬 설명 */
.sec-note{max-width:76rem;margin:0 auto;text-align:center}
.sec-note h3{font-size:var(--f6);font-weight:700;color:var(--ink);letter-spacing:-.02em;
  margin:0 0 var(--s5);line-height:1.35}
.sec-note p{font-size:var(--f2);color:var(--ink2);line-height:1.8;margin:0 0 var(--s3)}
.sec-note p:last-child{margin:0}
/* C1 직답과 같은 결의 강조 문단 — 설명글 표준 20px, 포인트 문구만 w700 */
.sec-note.answer p{font-size:var(--f-desc);line-height:var(--lh-desc);color:#000;font-weight:400}
.sec-note.answer p b{font-weight:700;color:#000}
/* 설명 블록과 이미지 사이 간격 — 위아래 대칭 */
.sec-note + .sec-fig,.sec-note + .img-slot{margin-top:var(--s8)}
.img-slot + .sec-note,.sec-fig + .sec-note{margin-top:var(--s8)}

/* ── 사진 위에 얹는 원장 인용 (레퍼런스 방식) ────────────── */
.quote-visual{position:relative;border-radius:2rem;overflow:hidden;line-height:0;
  margin:var(--s7) auto 0;max-width:97.2rem}
.quote-visual img{width:100%;height:auto;display:block}
.quote-visual::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,18,24,.10) 0%,rgba(12,18,24,.28) 42%,rgba(12,18,24,.78) 100%)}
.qv-copy{position:absolute;inset:0;z-index:1;display:grid;align-content:end;
  padding:0 8rem 5rem;text-align:center;line-height:normal}
.qv-copy blockquote{margin:0;color:#fff;font-size:2.4rem;font-weight:600;line-height:1.7;
  letter-spacing:-.03em;text-shadow:0 .2rem 1.6rem rgba(0,0,0,.45)}
.qv-copy cite{display:block;margin-top:2rem;font-style:normal;
  font-size:1.7rem;color:rgba(255,255,255,.8);letter-spacing:-.02em}
@media(max-width:900px){
  .qv-copy{padding:0 3rem 3rem}
  .qv-copy blockquote{font-size:1.8rem;line-height:1.6}
  .qv-copy cite{font-size:1.4rem;margin-top:1.6rem}
}
/* 강조 문장 — 크고 포인트 있게 */
.sec-note p.em{font-size:var(--f4);font-weight:500;color:var(--ink);line-height:1.7;
  margin-top:var(--s6)}
.sec-note p.em b{color:var(--brand);font-weight:700}

/* ── 사진 배경 + 흰 카피 + 하단에 걸친 원 ─────────────────── */
.sec-visual{position:relative;border-radius:2rem;overflow:hidden;line-height:0;margin-top:var(--s6)}
.sec-visual img{width:100%;height:auto;display:block}
/* 카피는 사진 아래쪽에 — 원장 얼굴(상단)을 가리지 않게.
   bottom 기준으로 잡아야 걸친 원(-8rem)과 겹치지 않는다. */
.sv-copy{position:absolute;left:0;right:0;bottom:12rem;
  z-index:1;text-align:center;padding:0 4rem;line-height:normal}
.sv-copy h3{font-size:var(--f6);font-weight:700;color:#fff;letter-spacing:-.03em;
  margin:0 0 var(--s5);line-height:1.35;text-shadow:0 .2rem 1.6rem rgba(0,0,0,.45)}
.sv-copy p{font-size:var(--f2);color:rgba(255,255,255,.9);line-height:1.8;margin:0;
  text-shadow:0 .1rem 1.2rem rgba(0,0,0,.45)}
.sec-visual::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,26,32,.10) 0%,rgba(18,26,32,.28) 38%,rgba(18,26,32,.72) 64%,rgba(18,26,32,.86) 100%)}

/* 사진 아래쪽에 반쯤 걸치는 원 */
.sec-points{display:flex;justify-content:center;gap:2.6rem;list-style:none;
  margin:-8rem 0 0;padding:0;position:relative;z-index:2}
.sec-points li{width:20rem;height:20rem;border-radius:50%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:0 1.6rem;box-shadow:0 .6rem 2rem rgba(20,40,60,.12)}
/* 레퍼런스처럼 중성 톤으로 — 연회색 · 크림 · 웜그레이 순환 */
.sec-points li:nth-child(4n+1){background:#eceef0}
.sec-points li:nth-child(4n+2){background:#f4ebdd}
.sec-points li:nth-child(4n+3){background:#ece5e1}
.sec-points li:nth-child(4n+4){background:#e7ebee}
.sec-points span{display:block;font-size:1.7rem;color:var(--ink2);margin-bottom:.9rem}
/* 원 배경이 중성 톤이라 글자는 포인트 컬러 대신 블랙 계열로 */
.sec-points b{display:block;font-size:2.5rem;font-weight:800;color:var(--ink-strong);letter-spacing:-.05em;line-height:1.3}
/* 원 아래 결론 문장 — 직답 블록과 같은 설명글 표준을 쓴다 */
.sec-lead-em{max-width:80rem;margin:var(--s8) auto 0;text-align:center;
  font-size:var(--f-desc);font-weight:400;color:#000;line-height:var(--lh-desc);letter-spacing:-.012em}
.sec-lead-em b{font-weight:700;color:#000}
@media(max-width:900px){
  .sv-copy{bottom:9rem;padding:0 2rem}
  .sec-points{gap:1.4rem;margin-top:-5rem}
  .sec-points li{width:14rem;height:14rem;padding:0 1rem}
  .sec-points span{font-size:1.2rem}
  .sec-points b{font-size:1.6rem}
}
@media(max-width:560px){
  .sec-points{flex-wrap:wrap;gap:1rem;margin-top:2rem}
  .sec-points li{width:calc(50% - .5rem);height:auto;border-radius:1.4rem;padding:1.8rem .8rem}
}

/* ── 아이콘형 4열 (병렬 항목 · 순서가 없으므로 화살표를 쓰지 않는다) ──
   s3 의 채운 원(순서 있는 단계)과 구분하려고 외곽선 아이콘 + 옅은 칩으로 간다. */
.c-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem 2rem;
  margin:6rem 0 0;padding:0;list-style:none;text-align:center}
.c-icons .ic{display:inline-grid;place-items:center;width:9.6rem;height:9.6rem;
  border-radius:50%;background:var(--soft);color:var(--brand)}
.c-icons .ic svg{width:4.4rem;height:4.4rem;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.c-icons b{display:block;font-size:var(--f4);font-weight:700;color:var(--ink);
  letter-spacing:-.03em;margin:2rem 0 .8rem}
.c-icons p{margin:0;font-size:1.7rem;color:var(--ink2);line-height:1.6}
@media(max-width:900px){.c-icons{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.c-icons{grid-template-columns:1fr;gap:2.4rem}}

/* ---- photo slot ---- */

.photo{position:relative;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(135deg,#e1eaeb,#eff4f3);border:1px dashed #bacccd;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:#444;text-align:center;padding:16px;font-size:var(--f1);line-height:1.5}
.photo b{font-weight:800;color:#444;font-size:var(--f2)}
.ar43{aspect-ratio:4/3}.ar169{aspect-ratio:16/9}.ar11{aspect-ratio:1/1}

/* ===== C1 직답 =====
   박스를 두르지 않는다. 가운데 정렬한 평범한 텍스트로 둔다. */
.c-answer{background:none;border:0;border-radius:0;padding:0;margin:var(--s8) 0 0;text-align:center}
/* 라벨 대신 점 4개 — 레퍼런스 캐러셀 인디케이터와 같은 결 */
.dots4{display:flex;justify-content:center;gap:2.2rem;margin:0 0 var(--s6)}
.dots4 i{width:.8rem;height:.8rem;border-radius:50%;background:#d5d8da;display:block}
/* 설명글 표준 적용 */
.c-answer p{margin:0 auto;font-size:var(--f-desc);line-height:var(--lh-desc);color:#000;
  font-weight:400;max-width:none}
.c-answer p b{font-weight:700;color:#000}

/* ===== C2 체크리스트 ===== */
/* 항목 박스 — 면을 아주 옅게 깔아 허전함을 덜고, 선택 시에만 흰 면 + 포인트 테두리.
   선택 상태에서 파란 면을 칠하지 않는 원칙은 유지한다(파랑이 겹치면 무거워진다). */
/* 한 줄이 너무 길면 읽기 어렵다 — 본문 1200 을 다 쓰지 않고 폭을 묶는다 */
.c-check{display:grid;gap:1rem;grid-template-columns:1fr;text-align:left;
  width:min(100%,92rem);margin-inline:auto}
@media(min-width:640px){.c-check{grid-template-columns:1fr 1fr;gap:1rem 1.4rem}}
.c-check label{display:flex;gap:1.6rem;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:1rem;padding:2rem 2.2rem;cursor:pointer;
  transition:border-color .18s,background .18s,box-shadow .18s,color .18s;
  font-size:var(--f4);color:var(--ink);line-height:1.5}
.c-check label:hover{border-color:var(--brand-light);
  box-shadow:0 .3rem 1rem rgba(13,111,184,.07)}
.c-check label.on{border-color:var(--brand);color:var(--ink-strong);font-weight:700;
  box-shadow:0 .3rem 1rem rgba(13,111,184,.1)}
.c-check .box{flex:0 0 2.6rem;height:2.6rem;border-radius:.6rem;border:2px solid #b7c4ca;
  background:#fff;display:flex;align-items:center;justify-content:center;transition:.18s}
.c-check label.on .box{background:var(--brand);border-color:var(--brand)}
.c-check .box svg{width:1.5rem;height:1.5rem;stroke:#fff;stroke-width:3.2;fill:none;opacity:0}
.c-check label.on .box svg{opacity:1}

/* ===== C3 도해 =====
   박스를 두르지 않는다. 2단으로 두면 그림 높이만큼 오른쪽이 비어 보여
   그림 → 글 순서로 세로로 쌓고 가운데 정렬한다. */
.c-figure{display:block;background:none;border:0;border-radius:0;padding:0;margin:0 auto;
  max-width:80rem;text-align:center}
.c-figure>div{margin:0 auto}
.c-figure figcaption{font-size:var(--f2);color:var(--ink3);margin-top:var(--s3);line-height:1.6}
.c-figure .t{font-size:var(--f5);font-weight:700;letter-spacing:-.03em;margin:3rem 0 var(--s3)}
.c-figure .d{font-size:var(--f-desc);line-height:var(--lh-desc);color:#000;margin:0 0 var(--s3)}
.c-figure .d:last-child{margin:0}
.c-figure .box{background:none;border:0;border-radius:0;padding:0}
/* 2단 변형 — 좌 정보 / 우 지도. 높이를 맞춘다 */
.c-figure.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3rem;align-items:stretch;text-align:left;max-width:none}
.c-figure.two>div{margin:0}
.c-figure.two .t{margin:0 0 var(--s4)}
.c-figure.two .photo{aspect-ratio:auto;height:100%;min-height:26rem}

/* ── 오시는 길 목록 — 레퍼런스 tmjdoctor 오시는길 블록 참고
   검은 원 아이콘 + 굵은 제목 + 회색 보조설명, 항목마다 1px #e5e5e5 구분선 */
.loc-list{border-top:1px solid #e5e5e5}
.loc-item{display:flex;gap:2rem;align-items:flex-start;
  padding:2.4rem .4rem;border-bottom:1px solid #e5e5e5}
.loc-item .ic{flex:0 0 4.8rem;width:4.8rem;height:4.8rem;border-radius:50%;
  background:#232323;display:flex;align-items:center;justify-content:center}
.loc-item .ic svg{width:2.4rem;height:2.4rem;stroke:#fff;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.loc-item .tx{min-width:0;padding-top:.4rem}
.loc-item b{display:block;font-size:1.8rem;font-weight:700;color:var(--ink-strong);
  letter-spacing:-.03em;line-height:1.45}
.loc-item b a{color:inherit}
.loc-item b a:hover{color:var(--brand)}
.loc-item p{margin:.6rem 0 0;font-size:1.6rem;color:var(--ink3);line-height:1.6}
.loc-time{margin:1rem 0 0;font-size:1.6rem;color:var(--ink3)}
.loc-time>div{display:flex;gap:1.2rem;padding:.3rem 0;line-height:1.7}
.loc-time dt{flex:0 0 5.4rem;margin:0;color:var(--ink3)}
.loc-time dd{margin:0;color:var(--ink2)}
.loc-time em{font-style:normal;color:var(--brand)}
@media(max-width:760px){
  .loc-item{gap:1.4rem;padding:2rem .2rem}
  .loc-item .ic{flex:0 0 4rem;width:4rem;height:4rem}
  .loc-item .ic svg{width:2rem;height:2rem}
}
@media(max-width:760px){
  .c-figure.two{grid-template-columns:minmax(0,1fr);gap:2rem}
  .c-figure.two .photo{aspect-ratio:16/9;height:auto;min-height:0}
}

/* 픽토그램 (C3 변형) — 핵심 수치라 크게 */
.c-figure .picto{text-align:center;margin-bottom:1rem}
.c-figure .picto .row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:var(--s5)}
.c-figure .picto svg{width:3.8rem;height:5.2rem;fill:#d8e0e3}
.c-figure .picto svg.on{fill:var(--brand)}
.c-figure .picto .cap{font-size:var(--f2);color:var(--ink3);margin-bottom:.6rem}
.c-figure .picto .n{font-size:3.2rem;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1.3}
.c-figure .picto .c{font-size:var(--f2);color:var(--ink3);margin-top:.6rem}

/* ===== C4 카드 ===== */
.c-cards{display:grid;gap:var(--s3);grid-template-columns:1fr 1fr}
@media(min-width:760px){.c-cards{grid-template-columns:repeat(3,1fr)}}
.c-cards.g4{grid-template-columns:1fr 1fr}
@media(min-width:760px){.c-cards.g4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:760px){.c-cards.g4.c3{grid-template-columns:repeat(3,1fr)}}   /* 진료 안내 지역 카드 — 구리 시내를 빼고 세 장 */
.c-cards.g1{grid-template-columns:1fr}
@media(min-width:640px){.c-cards.g1{grid-template-columns:1fr 1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:3rem 2.6rem;overflow:hidden}
.card .ic{width:4.4rem;height:4.4rem;border-radius:1.2rem;background:var(--soft);display:flex;
  align-items:center;justify-content:center;color:var(--brand);margin-bottom:var(--s3)}
.card .ic svg{width:2.2rem;height:2.2rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card .n{width:3rem;height:3rem;border-radius:50%;background:var(--brand);color:#fff;font-size:1.5rem;
  font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s3)}
.card b{display:block;font-size:var(--f5);letter-spacing:-.02em;color:var(--ink);margin-bottom:3px;line-height:1.4}
.card span{display:block;font-size:var(--f2);color:var(--ink3);line-height:1.6}
.card dl{margin:var(--s2) 0 0;font-size:var(--f2)}
.card dl div{display:flex;gap:9px;padding:6px 0;border-bottom:1px solid var(--line2)}
.card dl div:last-child{border-bottom:0;padding-bottom:0}
.card dt{flex:0 0 7rem;color:var(--ink3);margin:0}
.card dd{margin:0;color:var(--ink);font-weight:600;line-height:1.5}
.card.link{padding:0;text-decoration:none;display:block}
.card.link .photo{border-radius:0;border:0;border-bottom:1px dashed #c5d5d7;aspect-ratio:16/9}
.card.link .in{padding:var(--s4)}

/* ── C4 스펙 카드 (.c-cards 안) — 레퍼런스엔 테두리 있는 카드가 없다.
   cert_list · circle_list 모두 배경/테두리 0 · 가운데 정렬이라 그 방식을 따른다.
   관련진료 카드(.card.link)는 같은 .c-cards 안에 있으므로 :not(.link) 로 제외한다. */
.c-cards>.card:not(.link){background:none;border:0;border-radius:0;padding:0;text-align:center;overflow:visible}
.c-cards>.card:not(.link) .ic{margin:0 auto var(--s4)}
.c-cards>.card:not(.link) .n{margin:0 auto var(--s4)}
.c-cards>.card:not(.link) b{font-size:var(--f5);font-weight:700;color:var(--ink);margin-bottom:.8rem}
.c-cards>.card:not(.link) span{font-size:1.7rem;color:var(--ink2);line-height:1.7}

/* ── 4단 사진 그리드 .step4 — 이미지 위, 번호+제목, 설명 2줄 ── */
.c-cards.step4{gap:2.4rem}
.c-cards.step4>.card img{display:block;width:100%;height:auto;aspect-ratio:235/287;object-fit:cover;
  border-radius:1.6rem;margin-bottom:2.2rem}
.c-cards.step4>.card .img-slot{margin-bottom:2.2rem;border-radius:1.6rem}
.c-cards.step4>.card b{font-size:2rem;font-weight:700;color:var(--ink-strong);
  letter-spacing:-.03em;margin-bottom:1rem}
/* v2: 카드 제목 앞 번호는 쓰지 않는다. 사진 순서가 이미 순서를 말한다 */
.c-cards.step4>.card b i{display:none}
.c-cards.step4>.card:has(.st) b i{display:inline;font-style:normal;
  font-family:'Barlow',var(--sans);font-weight:700;color:var(--brand);margin-right:.6rem}
.c-cards.step4>.card span{font-size:1.6rem;color:var(--ink2);line-height:1.75}
/* 도해형 — 정사각 일러스트 + 번호·이름만. 설명은 아래 표가 맡는다 */
.c-cards.step4.figs>.card img{aspect-ratio:1/1;border-radius:0;margin-bottom:1.4rem}
.c-cards.step4.figs>.card b{margin-bottom:0}
/* .w5 — 단계 설명을 한 단계(약 500) 굵게. 나눔스퀘어네오는 500 이 없어 획에 얇은 외곽선을 더한다
   (충치치료 「깊이가 깎아 내는 양을 정합니다」, 신경치료 · 잇몸치료 단계 카드에만 붙였다) */
.c-cards.w5 .st p{-webkit-text-stroke:.3px currentColor}
.c-list.w5>.li>p{-webkit-text-stroke:.3px currentColor}   /* 신경치료 러버댐 목록에만 붙였다 */
/* 사진형 3단 — 레퍼런스 .cert_list 실측
   이미지 320 x 302.44 / h4 24px w700 #000 lh1.4 margin 15px 0 8px / p 16px #666 lh150% */
.c-cards.step4.wide>.card img{aspect-ratio:320/302.44;margin-bottom:0}
/* 세로를 더 준 변형 */
.c-cards.step4.wide.tall>.card img{aspect-ratio:1/1.2}
.c-cards.step4.wide>.card b{font-size:2.4rem;font-weight:700;color:#000;
  line-height:1.4;margin:2.8rem 0 1rem}
.c-cards.step4.wide>.card span{font-size:1.6rem;color:#444;line-height:1.5;margin-top:0}
@media(max-width:760px){.c-cards.step4{gap:2rem}}
/* 스펙 행 — 좌우 키·값 대신 가운데 한 줄로 (레퍼런스 설명줄과 같은 결) */
.c-cards>.card:not(.link) dl{display:block;margin:1.6rem 0 0;font-size:1.7rem}
.c-cards>.card:not(.link) dl div{display:block;padding:.5rem 0;border:0}
.c-cards>.card:not(.link) dt{display:inline;flex:none;color:var(--ink3);margin:0 .8rem 0 0;font-weight:400}
.c-cards>.card:not(.link) dd{display:inline;color:var(--ink);font-weight:600}

/* ── 스펙 카드 .spec — 레퍼런스: 칩 없는 큰 아이콘 + 설명 2줄 ── */
/* 포인트 컬러 테두리 박스 */
.c-cards>.card.spec{border:1px solid var(--brand);border-radius:1.4rem;
  padding:4rem 2.4rem;background:#fff}
.c-cards>.card.spec .ic{width:auto;height:auto;background:none;border-radius:0;
  color:var(--brand);margin:0 auto 2rem;display:block}
.c-cards>.card.spec .ic svg{width:5.4rem;height:5.4rem;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin:0 auto}
.c-cards>.card.spec b{font-size:var(--f5);font-weight:800;color:var(--ink);
  letter-spacing:-.03em;margin-bottom:1.4rem;display:block}
.c-cards>.card.spec dl{margin:0;font-size:1.7rem}
.c-cards>.card.spec dl div{display:block;padding:.5rem 0}
.c-cards>.card.spec dt{display:inline;color:var(--ink3);margin:0 .8rem 0 0;font-weight:400}
.c-cards>.card.spec dd{display:inline;margin:0;color:var(--ink2);font-weight:600}
.c-cards>.card.spec p{margin:0;font-size:1.7rem;color:var(--ink2);line-height:1.7}

/* 2단 대비 .c-duo — 왼쪽은 설명, 오른쪽은 그 결론을 어두운 면에 얹는다 */
.c-duo{display:grid;grid-template-columns:1fr;gap:2rem;text-align:left}
@media(min-width:760px){.c-duo{grid-template-columns:1.25fr .75fr;gap:2.4rem}}
.c-duo>div{border-radius:1.6rem;padding:4rem 3.6rem}
.c-duo .tx{background:#fff;border:1px solid var(--line)}
.c-duo .tx b{display:block;font-size:var(--f5);font-weight:700;color:var(--brand2);
  letter-spacing:-.03em;margin:0 0 1.8rem}
.c-duo .tx p{margin:0;font-size:var(--f-desc);line-height:var(--lh-desc);color:var(--ink2)}
.c-duo .say{background:#383838;display:flex;flex-direction:column;justify-content:center}
.c-duo .say i{font-style:normal;font-size:var(--f2);font-weight:700;color:var(--brand-light);
  margin:0 0 1.4rem}
.c-duo .say b{font-size:2.4rem;font-weight:700;color:#fff;line-height:1.5;letter-spacing:-.03em}
.c-duo + .t-note{margin-top:var(--s8)}
@media(max-width:760px){.c-duo>div{padding:3rem 2.6rem}.c-duo .say b{font-size:2.1rem}}

/* 원 그리드 .circles — 짧은 문장을 원 안에 담는다. 먹과 포인트 컬러를 번갈아 쓴다 */
.c-cards.circles{gap:3rem;align-items:center}
.c-cards.circles>.card:not(.link){width:100%;max-width:26rem;margin:0 auto;aspect-ratio:1;
  border-radius:50%;background:#444;padding:2.4rem;display:flex;align-items:center;justify-content:center}
.c-cards.circles>.card:not(.link):nth-child(even){background:var(--brand)}
.c-cards.circles>.card:not(.link) b{margin:0;color:#fff;font-size:var(--f5);line-height:1.55}
@media(max-width:760px){.c-cards.circles{gap:2rem}
  .c-cards.circles>.card:not(.link){max-width:20rem;padding:1.8rem}}

/* ── 원형 썸네일 그리드 .c-circles ─────────────────────
   히어로의 4단 카드를 원형 사진 + 아래 글로 바꾼 것.
   핵심경쟁력의 .r-thumbs 와 같은 언어인데, 여기는 설명 한 줄이 더 붙는다. */
.c-circles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:3rem 2.4rem;width:min(100%,108rem);margin:0 auto;padding:0;
  list-style:none;text-align:center}
.c-circles a{display:block;text-decoration:none;color:inherit}
.c-circles .ph{display:block;width:min(100%,22rem);aspect-ratio:1;margin:0 auto 2.4rem;
  border-radius:50%;overflow:hidden;background:#f4f7fa;
  box-shadow:0 0 0 .8rem #f1f5f8;transition:transform .25s,box-shadow .25s}
.c-circles .ph img{display:block;width:100%;height:100%;object-fit:cover}
.c-circles a:hover .ph{transform:translateY(-.8rem);
  box-shadow:0 0 0 .8rem #e3edf5,0 1.2rem 2.4rem rgba(16,40,60,.14)}
.c-circles b{display:block;font-size:2.1rem;font-weight:700;color:var(--ink-strong);
  letter-spacing:-.03em;line-height:1.4}
.c-circles a:hover b{color:var(--brand)}
/* 두세 개만 놓을 때 — 4열 격자에 두면 왼쪽으로 몰린다 */
.c-circles.n2{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,68rem);margin-inline:auto}
/* 원 대신 가로형 사각으로 쓰는 변형 — 링을 빼고 모서리만 둥글린다 */
/* 사진 대신 색을 채우고 그 안에 글을 넣는 변형 — 포인트 컬러와 먹색을 번갈아 쓴다 */
.c-circles.solid .ph{display:flex;align-items:center;justify-content:center;
  padding:2rem;background:var(--brand);box-shadow:none}
.c-circles.solid li:nth-child(even) .ph{background:#414c52}
.c-circles.solid .ph b{display:block;font-size:2.2rem;font-weight:700;
  line-height:1.4;letter-spacing:-.03em;color:#fff;text-align:center}
.c-circles.solid a:hover .ph{transform:translateY(-.8rem);
  box-shadow:0 1.2rem 2.4rem rgba(16,40,60,.18)}
.c-circles.solid a:hover .ph b{color:#fff}
.c-circles.sq .ph{width:100%;aspect-ratio:3/2;border-radius:1.6rem;box-shadow:none}
.c-circles.sq.n2{width:min(100%,88rem)}
.c-circles.sq a:hover .ph{box-shadow:0 1.2rem 2.4rem rgba(16,40,60,.14)}
.c-circles.n3{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,96rem);margin-inline:auto}
.c-circles .d{display:block;margin-top:1.2rem;font-size:1.7rem;
  color:var(--ink2);line-height:1.65}
@media(max-width:1000px){
  .c-circles{grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem 2rem}
}
@media(max-width:560px){
  .c-circles .ph{width:min(100%,16rem);margin-bottom:1.8rem}
  .c-circles b{font-size:1.9rem}
  .c-circles .d{font-size:1.6rem}
}

/* ── 박스 그리드 .boxed ──────────────────────────────
   파란 테두리 상자는 선이 세서 카드마다 각이 도드라졌다.
   테두리를 걷고 연회색으로 채운다. .c-list 타일과 같은 언어로 맞춰
   사이트 안에서 「항목 나열」이 한 가지로 읽히게 한다. */
.c-cards.boxed{gap:2rem}
/* 흰 바탕에 테두리로만 나눈다 — 면을 칠하지 않는 것이 v2 규칙 */
.c-cards.boxed>.card:not(.link){background:#fff;border:1px solid var(--line);
  border-radius:2rem;padding:3.6rem 2.6rem;
  transition:border-color .25s,box-shadow .25s,transform .25s}
.c-cards.boxed>.card:not(.link):hover{border-color:var(--brand-light);
  box-shadow:0 .3rem 1.2rem rgba(13,111,184,.08);transform:translateY(-.4rem)}
/* ★ 클릭되지 않는 칸(div)에는 hover 반응을 두지 않는다.
   눌리는 줄 알고 마우스를 올렸다가 아무 일도 없으면 오히려 혼란스럽다.
   링크로 쓰이는 a.card 는 그대로 반응한다. */
.c-cards.boxed>div.card:not(.link):hover{border-color:var(--line);
  box-shadow:none;transform:none}
.c-cards.boxed>.card:not(.link) b{margin-bottom:1.4rem;font-size:2.4rem;color:var(--brand)}
.c-cards.boxed>.card:not(.link) span{font-size:1.9rem;line-height:1.7}

/* 사진 위 가운데에 번호 배지를 얹는 상자 카드 */
.c-cards.boxed.numfig>.card:not(.link){position:relative;overflow:visible;
  margin-top:2.8rem}
.c-cards.boxed.numfig>.card:not(.link)>.n{position:absolute;left:50%;top:0;
  transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  width:4.8rem;height:4.8rem;margin:0;border-radius:50%;background:var(--brand);
  font-family:'Barlow',var(--sans);font-size:2rem;font-weight:700;color:#fff;
  box-shadow:0 0 0 .5rem #fff;z-index:2}

/* 세로형 도해를 위에 얹는 상자 카드 — 단계 그림처럼 세로가 긴 그림에 쓴다 */
.c-cards.boxed.tallfig>.card:not(.link) img{aspect-ratio:44/49}
/* 단계 카드는 어느 그릇에 담기든 같은 색으로 — 번호는 포인트 컬러, 제목은 먹색 */
.c-cards.boxed>.card:not(.link):has(.st) b{color:var(--ink-strong)}
/* 박스 카드가 링크일 때 — 진료 안내의 권역 4칸 */
a.card{text-decoration:none;color:inherit}
.c-cards.boxed>a.card{display:flex;flex-direction:column}
.c-cards.boxed>a.card>i{margin-top:auto;padding-top:1.8rem;font-style:normal;
  font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--brand)}
.c-cards.boxed>a.card:hover>i{color:var(--brand2)}
/* 제목을 파란 타원에 흰 글씨로 넣고 상자 윗변에 절반만 걸친다 — 진료 안내의 권역 4칸.
   흰 고리(box-shadow)가 테두리를 끊어 타원이 선 위에 올라앉은 것처럼 보인다 */
.c-cards.boxed.ptitle{margin-top:5rem;row-gap:5rem}
/* 뒤에 오는 .c-cards.g4.boxed 의 padding 보다 앞서도록 .g4 까지 적는다 */
.c-cards.g4.boxed.ptitle>.card:not(.link){position:relative;overflow:visible;padding-top:5.4rem}
.c-cards.boxed.ptitle>.card:not(.link)>b{position:absolute;left:50%;top:0;
  transform:translate(-50%,-50%);margin:0;padding:1.1rem 2.6rem;
  border-radius:var(--pill);background:var(--brand);box-shadow:0 0 0 .6rem #fff;
  font-size:2rem;font-weight:700;line-height:1.3;white-space:nowrap;color:#fff}
@media(max-width:760px){
  .c-cards.boxed.ptitle>.card:not(.link)>b{padding:.9rem 1.6rem;font-size:1.6rem}
}
/* 권역 카드 설명 · 경로 보기 · 아래 안내 — 아주 조금만 굵게.
   나눔스퀘어네오는 400 다음이 700 이라 중간 굵기가 없다(가변 글꼴은 1.5MB).
   글꼴은 그대로 두고 획에 얇은 외곽선을 더해 400 과 700 사이로 올린다 */
.c-cards.boxed.ptitle>.card>span,
.c-cards.boxed.ptitle>.card>i,
.c-cards.boxed.ptitle + .t-note{-webkit-text-stroke:.25px currentColor}
.c-cards.boxed.ptitle>a.card>i{font-size:1.7rem}
/* .st(상태·처치)가 든 칸은 마지막 줄 아래 여백을 줄 사이 간격에 맞춘다.
   .st 안쪽에 이미 1.8rem 이 있어 칸 아래를 그대로 두면 두 배로 벌어진다.
   그릇이 .boxed 든 .step4 든 같은 값을 쓴다. */
.c-cards>.card:not(.link):has(.st){padding-bottom:1rem}
.c-cards.boxed>.card:not(.link):has(.st):not(:has(img)){padding-top:3rem}
.c-cards.boxed>.card:not(.link) b i{font-style:normal;margin-right:.6rem;
  font-family:'Barlow',var(--sans);font-weight:700;color:var(--brand)}
.c-cards.boxed>.card:not(.link) .st p{font-size:1.7rem;color:var(--ink2)}

/* 상자 위 테두리에 걸치는 표시 배지.
   .tick 은 「이렇게 합니다」, .cross 는 「이건 권하지 않습니다」에 쓴다. */
.c-cards.boxed.tick>.card:not(.link),
.c-cards.boxed.cross>.card:not(.link){position:relative;overflow:visible;
  padding-top:4.8rem}
.c-cards.boxed.tick>.card:not(.link)::before,
.c-cards.boxed.cross>.card:not(.link)::before{content:"";position:absolute;
  left:50%;top:0;transform:translate(-50%,-50%);
  width:4.4rem;height:4.4rem;border-radius:50%;box-shadow:0 0 0 .6rem #fff;
  background-repeat:no-repeat;background-position:center;background-size:2.1rem}
.c-cards.boxed.tick>.card:not(.link)::before{background-color:var(--brand);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012.5L9.5%2018L20%206.5'/%3E%3C/svg%3E")}
.c-cards.boxed.cross>.card:not(.link)::before{background-color:var(--brand);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='3'%20stroke-linecap='round'%3E%3Cpath%20d='M6%206L18%2018M18%206L6%2018'/%3E%3C/svg%3E")}

/* 상자 없이 세로선으로만 나누는 변형 — 핵심경쟁력의 키워드 줄과 같은 언어.
   사진 바로 밑에 오는 짧은 항목 나열에 쓴다. */
/* 위 사진(.sec-fig 100rem)과 폭을 맞춘다 — 더 넓으면 양 끝 항목이
   사진 밖으로 나가 여백 없이 붙어 보인다 */
.c-cards.divided{gap:0;width:min(100%,100rem);margin:4rem auto 0}
/* ★ .boxed 의 border 는 네 변을 모두 그린다. 여기서 border-left 만 덮으면
   위·오른쪽·아래 선이 남아 상자처럼 보이고, 칸 사이에는 오른쪽 선과
   다음 칸 왼쪽 선이 겹쳐 2px 로 두꺼워진다. 먼저 0 으로 지운다. */
.c-cards.divided>.card:not(.link){background:none;border:0;border-radius:0;
  padding:.6rem 3rem 1rem;border-left:1px solid #d8dfe5}
.c-cards.divided>.card:not(.link):first-child{border-left:0}
.c-cards.divided>.card:not(.link):hover{background:none;transform:none;
  box-shadow:none;border-left-color:#d8dfe5}
.c-cards.divided>.card:not(.link) b{font-size:2.4rem;color:var(--ink-strong);margin-bottom:1.4rem}
.c-cards.divided>.card:not(.link) span{font-size:2rem;color:var(--ink2);line-height:1.75}
@media(max-width:760px){
  /* 줄이 접히면 새 줄 첫 칸의 왼쪽 선이 떠 보인다 — 좁은 화면은 선을 뺀다 */
  .c-cards.divided{gap:3rem 2rem}
  .c-cards.divided>.card:not(.link){padding:0;border-left:0}
}
/* 박스 카드 안에 도해를 넣는 경우 — 사랑니 유형 3장.
   안쪽 여백만큼 끌어내 위·좌·우를 상자 테두리에 붙이고, 위 모서리만 둥글린다. */
.c-cards.boxed>.card:not(.link) img{display:block;height:auto;aspect-ratio:3/2;
  object-fit:cover;border-radius:2rem 2rem 0 0;
  width:calc(100% + 5.2rem);margin:-3.6rem -2.6rem 2.8rem}
/* 사진이 든 칸은 사진 아래 여백과 칸 아래 여백을 같게 맞춘다 */
.c-cards.boxed>.card:not(.link):has(img):not(:has(.st)){padding-bottom:2.8rem}
.c-cards.g4.boxed>.card:not(.link) img{width:calc(100% + 3.6rem);margin:-3.4rem -1.8rem 1.8rem}
/* 4열 박스는 한 칸이 232px 라 좌우 여백을 줄여야 제목이 한 줄에 들어간다 */
.c-cards.g4.boxed>.card:not(.link){padding:3.4rem 1.8rem}
/* 항목·값을 담는 박스 카드 .rows — 왼쪽 정렬에 라벨 열을 둔다 */
.c-cards.boxed.rows>.card:not(.link){padding:3.4rem 3.2rem}
.c-cards.boxed.rows>.card:not(.link) b{font-size:var(--f5);color:var(--brand2);margin-bottom:1.4rem}
.c-cards.boxed.rows>.card:not(.link) dl{margin:0}
.c-cards.boxed.rows>.card:not(.link) dl div{display:flex;gap:1.4rem;padding:1rem 0;
  justify-content:center;border-bottom:1px solid var(--line2)}
.c-cards.boxed.rows>.card:not(.link) dl div:last-child{border-bottom:0;padding-bottom:0}
.c-cards.boxed.rows>.card:not(.link) dt{display:block;flex:none;margin:0;
  font-weight:400;color:var(--ink3)}
.c-cards.boxed.rows>.card:not(.link) dd{display:block;margin:0;font-weight:700;color:var(--ink)}
@media(max-width:640px){.c-cards.boxed.rows>.card:not(.link){padding:2.8rem 2.4rem}}
/* 요약 카드 — 눌러서 해당 섹션으로 이동한다 */
.c-cards.sum>a.card{display:block;text-decoration:none;transition:.15s}
.c-cards.sum>a.card:hover{border-color:var(--brand);background:var(--soft2)}
.c-cards.sum>a.card b i{font-style:normal;color:var(--brand);margin-right:.4rem}
/* 사진형 3·4단 그리드의 이미지 자리표시자 */
.img-slot.ratio-cert{aspect-ratio:320/302.44;width:100%;margin:0 0 1.5rem;padding:1.2rem;font-size:1.3rem}

/* ── 치료 사례 2열 — 케이스마다 치료 전·후 두 장 ── */
.c-cases{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;margin-top:var(--s7);text-align:left}
/* 사례끼리 구분선 — 줄 사이는 가로선, 두 칸 사이는 세로선.
   사진이 비슷하면 어디까지가 한 사례인지 안 보여서 칸으로 나눈다 */
.c-cases>.case{padding:4.4rem 0 4.4rem 3.6rem}
.c-cases>.case:nth-child(odd){padding:4.4rem 3.6rem 4.4rem 0}
.c-cases>.case:nth-child(even){border-left:1px solid var(--line)}
.c-cases>.case:nth-child(n+3){border-top:1px solid var(--line)}
.c-cases>.case:nth-child(-n+2){padding-top:0}
.case-imgs{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.case-imgs figure{position:relative;margin:0}
.case-imgs img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:.8rem}
/* 치료 전 · 후 — 사진 아래 캡션 대신 사진 왼쪽 위에 얹는 배지.
   커뮤니티 치료 전후(.cx-imgs .bf/.af)와 같은 모양 · 색이다(전 먹색, 후 파랑) */
.case-imgs figcaption{position:absolute;left:1rem;top:1rem;z-index:1;margin:0;
  padding:.5rem 1.1rem;border-radius:.4rem;background:rgba(28,34,38,.86);
  font-size:1.4rem;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:#fff}
.case-imgs figure + figure figcaption{background:var(--brand)}
.img-slot.ratio-case{aspect-ratio:4/3;width:100%;margin:0;padding:1rem;font-size:1.2rem;border-radius:.8rem}
.case-t{display:block;margin:2rem 0 .6rem;font-size:2rem;font-weight:700;
  color:var(--ink-strong);letter-spacing:-.03em}
.c-cases .case p{margin:0;font-size:1.6rem;color:var(--ink2);line-height:1.7}
/* 리드 안의 강조 — 다른 곳의 em 과 같이 기울이지 않는다 */
.lead em{font-style:normal;color:var(--brand);font-weight:700}
.c-cases + .t-note{margin-top:var(--s8)}
/* 매복 사랑니 사례 — 구분선 없이 간격으로만 나눈다 */
.c-cases.nl{column-gap:4.8rem;row-gap:6rem}
.c-cases.nl>.case,.c-cases.nl>.case:nth-child(n){padding:0;border:0}
@media(max-width:900px){
  .c-cases{grid-template-columns:minmax(0,1fr)}
  .c-cases>.case,.c-cases>.case:nth-child(odd){padding:3.6rem 0}
  .c-cases>.case:nth-child(even){border-left:0}
  .c-cases>.case + .case{border-top:1px solid var(--line)}
  .c-cases>.case:nth-child(2){padding-top:3.6rem}
  .c-cases>.case:first-child{padding-top:0}
  .c-cases.nl{row-gap:4.4rem}
  .c-cases.nl>.case,.c-cases.nl>.case:nth-child(n){padding:0;border:0}
}

/* B11 「권하지 않습니다」 — 포인트 컬러 테두리는 권장 항목으로 읽힌다.
   회색 박스와 ✕ 로 「안 하는 것」임을 형태로 알린다. */
.c-cards.boxed.no>.card:not(.link){background:#f5f5f5}
/* 「하지 않는 것」 묶음은 파랑기 없는 중립 회색으로 두어 나머지와 구분한다 */
.c-cards.boxed.no>.card:not(.link):hover{background:#efefef}
.c-cards.boxed.no>.card:not(.link)::before{content:"";display:block;
  width:3.4rem;height:3.4rem;margin:0 auto 1.8rem;border-radius:50%;
  background:#8f8f8f no-repeat center/1.5rem 1.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.c-cards.boxed.no>.card:not(.link) b{color:#444}

/* ── C4 변형 : 항목 목록 (.c-list) ──────────────────────────────
   좌 제목 / 우 설명의 표 형태는 두 열의 관계가 읽히지 않아 애매했다.
   제목과 설명을 위아래로 쌓은 2×2 타일로 바꾼다.
   .c-cards.boxed 가 흰 바탕 + 파란 테두리라, 이쪽은 테두리 없는
   연회색 채움으로 잡아 같은 페이지에서 서로 구분된다.
   .spec(사양 목록)은 라벨-값 관계가 분명해 행 형태를 그대로 둔다. */
.c-list{margin-top:var(--s7);text-align:left}
/* 바로 위에 오는 .sec-fig(1000px)와 좌우 끝을 맞춘다 */
.c-list:not(.spec){display:grid;grid-template-columns:1fr 1fr;gap:2rem;
  width:min(100%,100rem);margin-inline:auto}
/* 흰 바탕에 테두리로만 나눈다 — 면을 칠하지 않는 것이 v2 규칙 */
.c-list:not(.spec)>.li{padding:2.2rem 2.4rem;background:#fff;text-align:center;
  border:1px solid var(--line);border-radius:1.6rem;
  transition:border-color .25s,box-shadow .25s,transform .25s}
.c-list:not(.spec)>.li:hover{border-color:var(--brand-light);
  box-shadow:0 .3rem 1.2rem rgba(13,111,184,.08);transform:translateY(-.3rem)}
/* 제목 앞의 점 — 떠 있던 파란 막대를 대신한다 */
.c-list:not(.spec)>.li>b{display:flex;align-items:center;justify-content:center;gap:1.2rem;
  font-size:2.2rem;font-weight:700;color:var(--ink-strong);
  letter-spacing:-.03em;line-height:1.45;margin-bottom:1rem}
/* 포인트 컬러 원 안의 흰 체크 — 급여표(.c-cards.cover)의 체크 배지와 같은 결 */
.c-list:not(.spec)>.li>b::before{content:"";flex:none;width:2.2rem;height:2.2rem;
  border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='3.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012.5L9.5%2018L20%206.5'/%3E%3C/svg%3E") center/1.2rem no-repeat}
.c-list:not(.spec)>.li>p{margin:0;font-size:1.7rem;
  color:var(--ink2);line-height:1.75}

/* 권하지 않는 항목 — 체크 대신 ✕ 를 둔다 */
.c-list.no>.li>b::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='3.4'%20stroke-linecap='round'%3E%3Cpath%20d='M6%206L18%2018M18%206L6%2018'/%3E%3C/svg%3E")}
/* 한 줄로 세우는 변형 — 좌우 2단 안에 넣을 때 쓴다. 이쪽은 왼쪽 정렬을 지킨다 */
/* .lg — 설명 글을 2px 키운다(충치치료 증상 목록, 신경치료 증상 · 진단 목록, 잇몸치료 증상 · 관리 목록에만 붙였다) */
.c-list.lg:not(.spec)>.li>p{font-size:1.9rem}
.c-list.one>.li{text-align:left;padding:2.4rem 2.8rem}
.c-list.one>.li>b{justify-content:flex-start}
.c-list.one>.li>p{margin-left:3.4rem}
.c-list.one{grid-template-columns:minmax(0,1fr);gap:1.6rem;margin-top:0;width:auto}
.c-split.figbig .c-list.one{height:100%;align-content:stretch}
/* 칸이 사진 높이에 맞춰 늘어나므로, 글은 가운데에 둔다 — 아래가 비어 보이지 않게 */
.c-split.figbig .c-list.one>.li{display:flex;flex-direction:column;justify-content:center}
/* 행 형태(.spec)만 쓰는 규칙 */
.c-list.spec{border-top:1px solid #e5e5e5}
.c-list.spec>.li{display:grid;align-items:baseline;border-bottom:1px solid #e5e5e5}
.c-list>.li>b i{font-style:normal;color:var(--brand);margin-right:.8rem;
  font-family:'Barlow',var(--sans);font-weight:700}
.c-list>.li>b a{color:inherit}
.c-list>.li>b a:hover{color:var(--brand)}
.c-list>.li>p a{font-weight:600}
.c-list + .t-note{margin-top:var(--s8)}

/* 사양 목록 — 라벨과 값만 얇은 선으로 나눈다. 박스도 아이콘도 두지 않는다 */
.spec-name{font-size:2.4rem;font-weight:800;color:var(--ink-strong);
  letter-spacing:-.03em;margin:0 0 1.2rem;text-align:left}
.c-list.spec{margin-top:0}
.c-list.spec>.li{grid-template-columns:minmax(0,20%) minmax(0,1fr);
  gap:2rem;padding:1.5rem .2rem}
.c-list.spec>.li>b{font-size:1.7rem;font-weight:400;color:var(--ink3)}
.c-list.spec>.li>p{font-size:1.8rem;font-weight:700;color:var(--ink)}
/* 사진을 더 크게 잡는 2단 */
.c-split.figbig{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
/* 사진 높이를 오른쪽 표에 맞춘다 — 파일을 다시 자르지 않고 잘라 채운다 */
.c-split.figbig{align-items:stretch}
.c-split.figbig>.fig{display:flex}
.c-split.figbig>.fig img{width:100%;height:100%;object-fit:cover;border-radius:2rem}
/* 2단 안에 들어간 비용·범위 표는 폭 제한을 풀고 칸을 꽉 채운다 */
.c-split.figbig .c-box.plain{max-width:none;height:100%}
/* 사진을 오른쪽에 두는 형태 — 같은 페이지에서 두 번 쓸 때 방향을 바꾼다 */
.c-split.figbig.rev{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
/* 사진을 작게 두는 형태 — 그림이 커서 칸이 지나치게 높아질 때.
   사진을 절대배치로 띄워 세로 길이를 스스로 주장하지 않게 한다.
   그래야 줄 높이를 오른쪽 글이 정하고, 칸 안이 헐렁해지지 않는다. */
.c-split.figbig.figsm{grid-template-columns:minmax(0,.66fr) minmax(0,1fr);
  width:min(100%,92rem);margin-inline:auto;gap:3rem}
.c-split.figbig.figsm>.fig{position:relative;display:block;min-height:26rem}
.c-split.figbig.figsm>.fig img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;border-radius:2rem}
@media(max-width:900px){.c-split.figbig{grid-template-columns:minmax(0,1fr)}}

/* 적용 / 미적용을 나란히 놓는 박스 2단 */
.c-cards.cover{gap:2.4rem;width:min(100%,92rem);margin-inline:auto}
.c-cards.cover>.card:not(.link){display:flex;flex-direction:column;text-align:left;
  padding:0;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:1.2rem}
.c-cards.cover>.card:not(.link)>b{display:flex;align-items:baseline;justify-content:center;gap:1rem;
  font-size:var(--f5);font-weight:700;color:#fff;background:var(--brand);
  letter-spacing:-.03em;margin:0;padding:1.5rem 2.4rem}
.c-cards.cover>.card:not(.link)>b em{font-style:normal;font-size:1.5rem;font-weight:600;
  color:rgba(255,255,255,.78);letter-spacing:0}
.c-cards.cover>.card.no{border-color:#dcdcdc}
.c-cards.cover>.card.no>b{background:#5f6b73}
.c-cards.cover ul{flex:1 1 auto;margin:0;padding:1.2rem 2.4rem;
  list-style:none;display:grid;gap:0}
.c-cards.cover li{display:flex;align-items:center;justify-content:center;gap:1.2rem;padding:1.2rem 0;
  font-size:1.8rem;font-weight:600;color:var(--ink);line-height:1.5;
  border-bottom:1px solid var(--line2)}
.c-cards.cover li:last-child{border-bottom:0}
.c-cards.cover li svg{flex:none;width:2.2rem;height:2.2rem;padding:.5rem;border-radius:50%;
  background:var(--brand);stroke:#fff;fill:none;stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round}
.c-cards.cover .no li{color:#444;font-weight:500}
.c-cards.cover .no li::before{content:"";flex:none;width:2.2rem;height:2.2rem;border-radius:50%;
  background:#aeb5ba linear-gradient(#fff,#fff) center/1rem .26rem no-repeat}
.c-cards.cover .cov-link{display:block;margin:.6rem 2.4rem 2rem;padding:1.1rem;
  border:1px solid #dcdcdc;border-radius:.8rem;text-align:center;
  font-size:1.6rem;font-weight:700;color:var(--ink2);text-decoration:none}
.c-cards.cover .cov-link:hover{border-color:var(--brand);color:var(--brand)}
.c-cards.cover + .t-note{margin-top:4rem}

/* 사진 아래 모서리에 걸친 원 3개 — 원 색은 먹과 포인트 컬러를 번갈아 쓴다 */
.c-overcircle{position:relative;margin-top:var(--s7)}
.c-overcircle>img{display:block;width:100%;height:auto;border-radius:2rem}
.oc-list{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:2.4rem;margin:-10rem auto 0;padding:0 3rem;list-style:none;text-align:center;
  /* 칸 폭을 좁히면 동그라미 사이가 함께 좁아진다 — 이 값으로 간격을 조절한다 */
  max-width:108rem}
.oc-list>li>p{margin:0;font-size:1.7rem;color:var(--ink2);line-height:1.7}
.oc-list .oc{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;width:20rem;height:20rem;margin:0 auto 2.2rem;padding:1.6rem;
  border-radius:50%;background:#444}
.oc-list>li:nth-child(even) .oc{background:var(--brand)}
.oc-list .oc i{font-style:normal;font-size:1.5rem;font-weight:600;color:rgba(255,255,255,.72)}
.oc-list .oc b{font-size:2rem;font-weight:700;color:#fff;line-height:1.35;letter-spacing:-.03em}
.c-overcircle + .t-note{margin-top:var(--s8)}
@media(max-width:760px){
  .oc-list{grid-template-columns:1fr;gap:3rem;margin:-7rem 0 0}
  .oc-list .oc{width:14rem;height:14rem}
  .oc-list .oc b{font-size:1.8rem}
}

/* 사진 안에 제목을 얹은 세로 카드 4단 — 숫자 없이 사진이 먼저 읽히게 한다 */
.c-figcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;margin-top:var(--s7)}
.c-figcards figure{position:relative;margin:0;border-radius:1.6rem;overflow:hidden;background:#222}
.c-figcards img{display:block;width:100%;height:100%;aspect-ratio:3/4.1;object-fit:cover}
/* 사진 전체를 어둡게 덮고 그 위 한가운데에 글을 얹는다 */
.c-figcards figcaption{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.6rem;padding:2rem;text-align:center;
  background:rgba(24,24,24,.52)}
.c-figcards figcaption b{display:block;font-size:2rem;font-weight:700;color:#fff;
  letter-spacing:-.03em;line-height:1.35;margin-bottom:.6rem}
.c-figcards figcaption span{display:block;font-size:1.6rem;color:rgba(255,255,255,.82);line-height:1.55}
/* ═══ 핵심경쟁력(/oral-surgery) 전용 ═══════════════════════
   goeune.co.kr/html/reason 구성을 가져왔다.
   어두운 배너 → 원형 썸네일 목록 → 「큰 제목 · 작은 부제 · 셰브론」으로 시작하는
   섹션이 얇은 가로선으로 이어진다. 색과 서체는 site-v1 토큰을 그대로 쓴다. */
/* 원장 소개 — 배경 지운 사진과 자격증을 나란히 둔다 */
.r-doctor{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:0;align-items:end;margin-top:var(--s8);text-align:left}
.r-doctor .ph .img-slot{width:100%;margin:0}
.r-doctor .ph img{display:block;width:min(100%,62rem);height:auto;margin-left:auto}  /* 사진을 조금 줄이되 오른쪽에 붙여, 자격증 열과의 간격은 그대로 둔다 */
.img-slot.ratio-portrait{aspect-ratio:700/868}
.r-doctor .tx{padding:0 0 4rem;text-align:center}
/* 오른쪽 묶음을 사진 쪽으로 당긴다 */
.r-doctor .tx>*{margin-left:0;margin-right:auto}
/* 제목은 자격증 폭 안에서 가운데로 맞춘다 */
.r-doctor .ttl{width:min(100%,23rem);text-align:center}
.r-doctor .ttl{margin:0 0 3rem;font-size:2.4rem;font-weight:700;color:var(--ink);
  letter-spacing:-.03em;line-height:1.4}
.r-doctor .ttl b{display:block;margin-top:.6rem;font-size:4rem;font-weight:800;
  color:var(--brand2);letter-spacing:-.04em}
.r-doctor .tx .img-slot,.r-doctor .tx img{width:min(100%,23rem);margin:0}
.r-doctor .tx img{display:block}
.r-doctor .tx img{height:auto;box-shadow:0 .6rem 2rem rgba(0,0,0,.14)}
/* .flip — 사진을 오른쪽에, 이름 · 자격증을 왼쪽에. 두 묶음이 가운데로 모이게 붙인다 */
.r-doctor.flip{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.r-doctor.flip .ph{order:2}
.r-doctor.flip .ph img{margin-left:0;margin-right:auto}
.r-doctor.flip .tx{padding-bottom:0}                /* 자격증 바닥을 사진 바닥선에 맞춘다 */
.r-doctor.flip .tx>*{margin-left:auto;margin-right:9rem}  /* 이름 · 자격증을 사진에서 조금 떼어 왼쪽으로 */
.img-slot.ratio-portrait{aspect-ratio:5/6;width:100%;margin:0;padding:2rem;font-size:1.3rem}
.img-slot.ratio-license{aspect-ratio:5/7;padding:1.4rem;font-size:1.2rem;border-radius:.6rem}
@media(max-width:760px){
  .r-doctor{grid-template-columns:minmax(0,1fr);gap:3rem}
  .r-doctor.flip{grid-template-columns:minmax(0,1fr)}
  .r-doctor.flip .ph{order:0}
  .r-doctor.flip .tx>*{margin-left:auto;margin-right:auto}
  .r-doctor .tx{padding-bottom:0}
}

/* 제목 아래 셰브론 */
.r-chev{display:block;width:4.2rem;height:1.8rem;margin:2.6rem auto 0;
  background:no-repeat center/100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 14' fill='none' stroke='%23b9c3c8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l14 10L30 2'/%3E%3C/svg%3E")}

.r-lead{text-align:center;margin:0}


/* 원형 썸네일 목록 — 사진 둘레에 옅은 테를 한 겹 두른다 */
.r-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6rem 3rem;
  width:min(100%,86rem);margin:6rem auto 0;padding:0;list-style:none}
.r-thumbs a{display:block;text-decoration:none;text-align:center}
.r-thumbs .ph{display:block;width:22rem;height:22rem;margin:0 auto 2.2rem;
  border-radius:50%;overflow:hidden;background:var(--soft);
  box-shadow:0 0 0 1rem #f1f1f1,0 .8rem 2.2rem rgba(0,0,0,.09);transition:.25s}
.r-thumbs .ph img{width:100%;height:100%;object-fit:cover;display:block}
.r-thumbs .ph.empty{display:flex;align-items:center;justify-content:center;
  border:1px dashed #c5d0d5;background:#f7f9fa;font-size:1.4rem;color:var(--ink3);
  line-height:1.5;padding:2rem;text-align:center}
.r-thumbs a:hover .ph{transform:translateY(-.8rem);
  box-shadow:0 0 0 1rem #f1f1f1,0 1.4rem 3rem rgba(0,0,0,.16)}
.r-thumbs b{display:block;font-size:2rem;font-weight:700;color:var(--ink-strong);
  letter-spacing:-.03em;line-height:1.5}
.r-thumbs a:hover b{color:var(--brand)}
@media(max-width:900px){
  .r-thumbs .ph{width:17rem;height:17rem}
  .r-thumbs b{font-size:1.8rem}
}
@media(max-width:640px){
  .r-thumbs{grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem 1.4rem}
  .r-thumbs .ph{width:13rem;height:13rem;box-shadow:0 0 0 .6rem #f1f1f1}
  .r-thumbs b{font-size:1.6rem}
}

/* 이유 섹션 — 큰 제목, 작은 부제, 셰브론. 사이는 얇은 가로선으로 나눈다 */
/* 섹션 위아래 여백 — 구분선을 가운데 두고 같은 값을 쓴다. 이 한 줄로 조절한다 */
.r-index,.r-sec{--r-gap:10rem}
.r-sec{padding:var(--r-gap) 0;text-align:center}

/* ── 각 페이지 첫 섹션(히어로) ─────────────────────────────
   순서를 고정한다: 라벨 24 → 제목 50 → 이미지(또는 그리드) → 설명 22 */
.blk.r-hero{text-align:center}
.blk.r-hero>.shead{margin-bottom:8rem}
/* 원형 목록 없이 라벨 + 제목만 두는 히어로 — 아래 여백을 줄인다 */
.blk.r-hero:not(:has(.c-circles))>.shead{margin-bottom:0}
/* ★ 다만 바로 뒤에 사진이 오면 제목과 붙어 버린다(.sec-fig 는 위쪽 마진이 0).
   17쪽의 히어로 중 12쪽이 이 형태다. 그 경우에만 여백을 되살린다 */
.blk.r-hero>.shead + .sec-fig,
.blk.r-hero>.shead + .img-slot{margin-top:6rem}
@media(max-width:768px){
  .blk.r-hero>.shead + .sec-fig,
  .blk.r-hero>.shead + .img-slot{margin-top:3.4rem}
}
/* 머리(점 + 제목) 없이 내용만 두는 섹션 — 섹션 사이 여백만 준다 */
.sp_main section.blk.nohead{padding-top:9rem}
.sp_main section.blk.nohead>.shead::before{content:none}
/* 첫 섹션에도 점을 세우고 싶을 때 — 오시는 길 머리 */
.sp_main section.blk.dot:first-child>.shead::before,
.sp_main>section.blk.dot:first-child .shead::before{content:""}
.sp_main section.blk.dot:first-child>.shead{padding-top:6rem;margin-bottom:6rem}
.blk.r-hero .c-cards{margin-top:0}
.blk.r-hero>.lead{margin-top:8rem;text-align:center}
/* 마지막 섹션 끝에도 같은 구분선과 여백을 둔다 */
.r-sec:last-of-type{border-bottom:1px solid #e0e0e0}
/* 그 선 아래 하단 블록까지도 같은 간격 — --r-gap 은 여기까지 상속되지 않아 값을 적는다 */
.r-sec:last-of-type + .blk{margin-top:0;padding-top:10rem}
/* 섹션마다 위에 얇은 가로선 — 원형 목록과 첫 섹션 사이에도 들어간다.
   선을 가운데 두고 위아래 여백을 같게 맞춘다(--sec-top). */
.r-sec{border-top:1px solid #e0e0e0}
.r-index{padding-bottom:var(--r-gap)}
.r-sec>.hd{max-width:76rem;margin:0 auto var(--sec-gap)}


/* 섹션 끝 각주 — 선 없이 본문에서 띄우기만 한다 */
.r-sec .t-note{margin-top:var(--s8);line-height:1.9}
.r-sec>.hd .r-chev{margin-top:2rem}
.r-sec>.lead{margin-bottom:0}
.r-sec>.lead + .c-answer{margin-top:2.4rem}
.r-sec .c-answer{margin-bottom:var(--s8)}
.r-sec .c-answer + .sec-fig,.r-sec .c-answer + .img-slot{margin-top:0}
/* 제목 아래 문단을 두 덩어리로 나눠 쓰는 경우 — 둘 다 .lead 로 같은 크기·색·굵기를 쓴다 */
.r-sec>.lead + .lead{margin-top:2.4rem}
.r-sec>.lead + .sec-fig,.r-sec>.lead + .img-slot{margin-top:var(--s8)}
/* 이 페이지는 섹션 머리 위 세로선을 쓰지 않는다 */
.sp_main .r-sec>.hd::before{content:none}

/* 진료 보증 — 항목마다 무료 기간과 50% 기간을 숫자로 보여 준다 */
.c-warranty{margin-top:var(--s8)}
.c-warranty .wh{margin:0 0 var(--s6);font-size:2.2rem;font-weight:800;
  color:var(--ink-strong);letter-spacing:-.03em;line-height:1.4}
.c-warranty .wh span{display:block;margin-top:.6rem;font-size:1.7rem;
  font-weight:400;color:var(--ink3);letter-spacing:-.02em}
.c-warranty ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.6rem;margin:0;padding:0;list-style:none}
.c-warranty li{border:1px solid var(--line);border-radius:1.4rem;
  padding:2.6rem 1.6rem 2rem;background:#fff}
.c-warranty li>b{display:block;font-size:1.9rem;font-weight:700;color:var(--ink-strong);
  letter-spacing:-.03em;margin-bottom:1.8rem;line-height:1.4}
.c-warranty .w{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.1rem 0;border-top:1px solid var(--line2)}
.c-warranty .w i{font-style:normal;font-size:1.5rem;color:var(--ink3)}
.c-warranty .w em{font-style:normal;font-family:'Barlow',var(--sans);
  font-size:2.6rem;font-weight:700;color:var(--brand);line-height:1}
.c-warranty .w u{text-decoration:none;font-family:var(--sans);font-size:1.5rem;
  font-weight:600;color:var(--ink2);margin-left:.3rem}
/* 항목이 둘뿐인 경우 — 넉 장 자리에 두 장만 놓이지 않게 폭을 좁혀 가운데 세운다 */
.c-warranty.two ul{grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(100%,72rem);margin-inline:auto}
.c-warranty.two .wh{text-align:center}
@media(max-width:760px){
  .c-warranty ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 연혁 — 표 대신 가로 연표로 보여 준다 */
.c-years{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3rem;width:min(100%,96rem);margin:var(--s8) auto 0;padding:0;list-style:none;text-align:center}
.c-years::before{content:"";position:absolute;left:14%;right:14%;top:10rem;height:1px;background:var(--line)}
.c-years li{position:relative}
.c-years li::before{content:"";position:absolute;left:50%;top:9.3rem;transform:translateX(-50%);
  width:1.4rem;height:1.4rem;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 .8rem #fff}
.c-years .y{display:block;font-family:'Barlow',var(--sans);font-size:5.6rem;font-weight:700;
  color:var(--brand);letter-spacing:-.02em;line-height:1}
.c-years b{display:block;margin-top:7.6rem;font-size:2.4rem;font-weight:700;
  color:var(--ink-strong);letter-spacing:-.03em;line-height:1.4}
.c-years .n{display:block;margin-top:2.2rem;font-size:1.9rem;color:var(--ink3)}
.c-years + .c-go{margin-top:var(--s8)}
@media(max-width:640px){
  .c-years{grid-template-columns:minmax(0,1fr);gap:3rem}
  .c-years::before{display:none}
  .c-years li::before{display:none}
  .c-years b{margin-top:1rem}
}

/* 키워드 알약 — 그 섹션이 다루는 범위를 한눈에 보여 준다 */
/* 진료 항목 나열 — 둥근 테두리 알약은 흔한 모양이라 상자를 걷었다.
   바로 위에 사진과 동그라미가 있어, 이 줄은 조용히 정보로만 읽히게 둔다. */
.c-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 0;
  margin:4rem 0 0;padding:0;list-style:none}
.c-pills li{padding:0 2.6rem;border-left:1px solid #d8dfe5;
  font-size:2.1rem;font-weight:700;color:var(--ink-strong);letter-spacing:-.03em;
  line-height:1.5}
.c-pills li:first-child{border-left:0}
/* 줄이 접히면 새 줄 첫 항목 앞에 구분자가 떠 보인다.
   좁은 화면은 구분자를 빼고 사이 여백만 넓힌다. */
@media(max-width:640px){
  .c-pills{gap:1rem 2.8rem}
  .c-pills li{padding:0;border-left:0;font-size:1.85rem}
}

/* ── 단계 흐름 (.c-steps) — 표 대신 쓰는 4단계 가로 흐름 ─────────
   면을 칠하지 않는다. 흰 원에 가는 테두리만 두르고, 원이 선 위에 놓인 것처럼 보이게
   원 배경을 흰색으로 채워 선을 가린다. 배경은 흰색으로 두고 여백으로 나눈다는
   v2 원칙(:root 주석)을 여기서도 지킨다.
   단계명은 본문 글자체(NanumSquareNeo)로 굵게 쓴다. */
.c-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:3rem 2rem;margin:var(--s7) 0 0;padding:0;list-style:none;text-align:center}
/* 원 높이의 한가운데를 지나는 선 — 원의 흰 배경이 이 선을 끊어 준다 */
.c-steps::before{content:"";position:absolute;left:12.5%;right:12.5%;top:10rem;
  height:1px;background:var(--line)}
.c-steps>li{position:relative}
.c-steps .dot{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.2rem;
  width:min(100%,20rem);aspect-ratio:1;margin:0 auto 2.4rem;
  border:6px solid var(--brand);border-radius:50%;background:#fff}
/* 선과 만나는 지점에 점 하나 — 사이트가 쓰는 점 모티프다 */
.c-steps>li:not(:last-child) .dot::after{content:"";position:absolute;
  right:-3.5rem;top:50%;transform:translateY(-50%);
  width:.6rem;height:.6rem;border-radius:50%;background:var(--brand-light)}
.c-steps .dot b{font-family:var(--sans);font-size:2.8rem;font-weight:700;
  line-height:1.35;letter-spacing:-.03em;color:var(--ink-strong)}
.c-steps .dot em{font-style:normal;font-size:1.7rem;font-weight:700;
  letter-spacing:.04em;color:var(--ink3)}
.c-steps p{margin:0;font-size:2rem;line-height:1.75;color:var(--ink2)}
/* .onfig — 바로 위 이미지 아래 모서리에 원이 반쯤 걸치게 끌어올린다.
   원 지름 18rem 의 절반(9rem)만큼 올리면 원 중심이 모서리에 놓인다.
   앞 이미지의 아래 여백(--s7)이 상쇄되도록 함께 빼 준다.
   폭은 이미지에 맞춘다 — .sec-fig 가 100rem 이라 1200 을 그대로 쓰면
   양 끝 원이 사진 밖으로 삐져나간다. 폭을 줄이면 원 사이 간격도 함께 좁아진다. */
.c-steps.onfig{width:min(100%,100rem);margin:calc(-10rem - var(--s7)) auto 0;
  position:relative;z-index:1}
/* 걸친 상태에서는 원 사이 선과 점이 사진 모서리 위에 얹혀 지저분해진다 */
.c-steps.onfig::before{content:none}
.c-steps.onfig>li:not(:last-child) .dot::after{content:none}
/* 원 안 글 — 원 윗부분이 사진에 걸치므로 글 묶음을 아래로 내리고 제목을 한 단계 굵게 */
.c-steps.onfig .dot{padding-top:3.6rem}
.c-steps.onfig .dot b{font-weight:800}

@media(max-width:900px){
  .c-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem 2rem}
  /* 두 줄로 접히면 가로선이 단계를 잘못 잇는다 */
  .c-steps::before{content:none}
  .c-steps>li:not(:last-child) .dot::after{content:none}
}
@media(max-width:560px){
  .c-steps{grid-template-columns:minmax(0,1fr);gap:3rem}
  .c-steps .dot{width:min(100%,15rem);margin-bottom:1.6rem}
  .c-steps .dot b{font-size:2rem}
}

/* ── 가로줄 행 (.c-rows) — 왼쪽 정사각 사진, 오른쪽 제목과 설명 ─────
   면을 칠하지 않고 가는 가로선으로만 나눈다. 상자를 쓰면 항목 수만큼
   색면이 늘어나 페이지가 무거워진다(v2 는 배경을 흰색으로 둔다).
   설명 안의 <em> 은 그 항목에서 눈이 먼저 가야 할 구절이다. */
/* 한 줄에 두 항목씩 — 항목 하나가 1200 을 다 쓰면 오른쪽이 비어 허전하다 */
.c-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6rem;
  margin-top:var(--s7);border-top:1px solid var(--line);text-align:left}
.c-rows>.row{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:3rem;
  align-items:center;padding:3.4rem .4rem;border-bottom:1px solid var(--line)}
.c-rows .th img{display:block;width:12rem;height:12rem;object-fit:cover;border-radius:2rem}
/* 사진 대신 아이콘을 넣는 경우 — 포인트 컬러 원에 흰 아이콘 */
.c-rows .th .ic{display:flex;align-items:center;justify-content:center;
  width:12rem;height:12rem;border-radius:50%;background:var(--brand)}
.c-rows .th .ic svg{width:5.6rem;height:5.6rem;stroke:#fff;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.c-rows .tx b{display:block;margin-bottom:1.2rem;font-size:2.2rem;font-weight:700;
  letter-spacing:-.03em;color:var(--ink-strong);line-height:1.4}
.c-rows .tx p{margin:0;font-size:1.7rem;line-height:1.8;color:var(--ink2)}

.c-rows .tx p em{font-style:normal;font-weight:700;color:var(--brand2)}
@media(max-width:768px){
  .c-rows{grid-template-columns:minmax(0,1fr);column-gap:0}
  .c-rows>.row{grid-template-columns:9rem minmax(0,1fr);gap:2.4rem;padding:2.8rem .2rem}
  .c-rows .th img{width:9rem;height:9rem;border-radius:1.6rem}
  .c-rows .th .ic{width:9rem;height:9rem}
  .c-rows .th .ic svg{width:4.2rem;height:4.2rem}
  .c-rows .tx b{font-size:var(--f4);margin-bottom:1rem}
  .c-rows .tx p{font-size:1.6rem}
}

/* 보증 규정 표 머리 — 표 위에 놓는 제목과 한 줄 설명 */
/* 위 항목 목록과 보증 표는 성격이 다른 덩어리다 — 넉넉히 띄운다 */
/* 보증 규정 — 제목은 명조로, 표는 기간 숫자가 주인공이 되게 세운다 */
/* 보증 규정 — 왼쪽에 파란 원(제목), 오른쪽에 표.
   제목을 표 위에 가운데로 두면 표와 떨어져 따로 읽힌다. 원으로 묶어 옆에 붙인다 */
.wh-box{display:grid;grid-template-columns:22rem minmax(0,1fr);gap:0 6rem;
  align-items:center;margin:12rem 0 0}
.wh-lead{display:flex;align-items:center;justify-content:center;
  width:22rem;height:22rem;margin:0 auto;border-radius:50%;background:#3D4247;
  font-family:var(--serif);font-size:3rem;font-weight:500;line-height:1.35;
  letter-spacing:-.05em;color:#fff;text-align:center}
/* 부제는 표 위 오른쪽 끝에 — 표의 머리말처럼 붙인다 */
.wh-sub{max-width:none;margin:0 0 1.4rem;text-align:right;
  font-size:1.5rem;line-height:1.6;letter-spacing:-.02em;color:var(--ink3)}
.c-table.wh-table{width:100%;margin:0}
.wh-box + .t-note{margin-top:5rem}
/* 위아래를 굵은 검정 선으로 닫는다 — 본문의 다른 구획과 같은 마무리 */
.c-table.wh-table th{border-top:.3rem solid var(--ink-strong);
  border-bottom:1px solid var(--line);padding:1.8rem 1.2rem;
  font-size:1.5rem;font-weight:800;letter-spacing:.04em;color:var(--ink3)}
.c-table.wh-table td{padding:2.8rem 1.2rem;font-size:1.7rem}
/* 구분 열은 왼쪽에서 시작해야 읽힌다 */
.c-table.wh-table tbody td:first-child{text-align:left;padding-left:2.4rem;
  font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:var(--ink-strong)}
/* 기간 두 칸은 숫자를 크게 — 무료 재치료만 브랜드 색으로 세운다 */
.c-table.wh-table tbody td:nth-child(2),
.c-table.wh-table tbody td:nth-child(3){font-family:'Barlow',var(--sans);
  font-size:2.6rem;font-weight:600;letter-spacing:-.02em;color:var(--ink-strong)}
.c-table.wh-table tbody td:nth-child(2){color:var(--brand)}
.c-table.wh-table tbody td:last-child{color:var(--ink2)}
.c-table.wh-table tbody tr:last-child td{border-bottom:.3rem solid var(--ink-strong)}
@media(max-width:768px){
  .wh-box{grid-template-columns:minmax(0,1fr);gap:3.6rem;margin-top:7rem}
  .wh-lead{width:16rem;height:16rem;font-size:2.4rem}
  .wh-sub{text-align:center}
  .c-table.wh-table td{padding:2rem 1rem}
  .c-table.wh-table tbody td:nth-child(2),
  .c-table.wh-table tbody td:nth-child(3){font-size:2.1rem}
}

/* 다음 페이지로 보내는 줄 링크 */
.c-go{display:inline-flex;align-items:center;gap:.8rem;margin:var(--s6) auto 0;
  padding:1.4rem 2.8rem;border:1px solid var(--line);border-radius:100px;
  font-size:1.7rem;font-weight:700;color:var(--ink);text-decoration:none;transition:.15s}
.c-go::after{content:"";width:1.6rem;height:1.6rem;background:no-repeat center/100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D6FB8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.c-go:hover{border-color:var(--brand);color:var(--brand)}
.blk .c-go{display:flex;width:fit-content}
/* 다음 페이지로 보내는 원 3개 — 먹과 포인트 컬러를 번갈아 쓴다 */
.c-golinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;
  width:min(100%,72rem);margin:var(--s7) auto 0}
/* 사진 바로 뒤에 오면 동그라미가 사진에 절반 걸치게 끌어올린다.
   원 지름 20rem 의 절반 + 사진의 아래 여백(--s7) 만큼 올린다. */
.sec-fig + .c-golinks{position:relative;z-index:1;margin-top:calc(-10rem - var(--s7))}
.c-golinks a{display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;max-width:20rem;aspect-ratio:1;margin:0 auto;padding:2rem;
  border-radius:50%;background:#444;color:#fff;text-decoration:none;
  font-size:1.9rem;font-weight:700;letter-spacing:-.03em;line-height:1.4;transition:.25s}
.c-golinks a:nth-child(even){background:var(--brand)}
.c-golinks a:hover{transform:translateY(-.8rem);box-shadow:0 1.2rem 2.6rem rgba(0,0,0,.2)}
@media(max-width:760px){
  .c-golinks{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
  .c-golinks a{max-width:13rem;font-size:1.6rem;padding:1.4rem}
  .sec-fig + .c-golinks{margin-top:calc(-6.5rem - var(--s7))}}
.c-pills + .t-note,.c-golinks + .t-note,.c-go + .t-note{margin-top:4rem}
/* 키워드 줄에서 상자를 걷어내면서 아래 링크와 너무 붙었다 */
.c-pills + .c-go{margin-top:5.6rem}

/* 도해 두 장 — 그림을 가리지 않도록 설명은 사진 밖 아래에 둔다 */
.c-figpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.4rem;margin-top:var(--s7)}
.c-figpair figure{margin:0}
.c-figpair img{display:block;width:100%;height:auto;border-radius:1.6rem}
.c-figpair figcaption{margin-top:1.6rem;text-align:center;font-size:2rem;font-weight:700;
  color:var(--brand2);letter-spacing:-.03em;line-height:1.4}
@media(max-width:760px){.c-figpair{grid-template-columns:minmax(0,1fr);gap:2rem}}
@media(max-width:760px){
  .c-figcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
  .c-figcards figcaption b{font-size:1.8rem}
}

/* 도해 두 장을 나란히 */
.c-figure.two.figs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:2.4rem;margin:var(--s7) auto 0;max-width:none}
@media(max-width:760px){.c-figure.two.figs{grid-template-columns:minmax(0,1fr)}}

/* ═══ 홈 전용 ═══════════════════════════════════════════════
   레퍼런스(crafter.co.kr)에서 가져온 것 — 배경 세로 가이드선,
   좌우 번갈아 오는 큰 사진 블록, 「작은 라벨 → 굵은 선언 → 본문 → 더보기」.
   가져오지 않은 것 — 제품 카드 라인, 블로그·인스타 그리드, 마퀴 띠. */

/* 배경 세로 가이드선 — 여백이 넓어도 허전하지 않게 잡아 준다 */
.home-guide{position:relative}
/* ══ 홈 — 11dent(바노바기 일레븐) 메인 구성을 그대로 따른 판 ══════════
   섹션 순서: 히어로 → 칼럼 → 시그니처 → 진료목록 → 태도 → 태그 → 사례 → 숫자
   레퍼런스는 섹션마다 풀블리드 띠를 쓰고, 띠 밖에 「→ …」 한 줄을 둔다 */
.el-sec{padding:12rem 0}
.el-sec.el-bg{background:#f6f8f9}
.el-head{text-align:center;margin-bottom:6rem;position:relative}
.el-eyebrow{margin:0 0 1.8rem;font-size:1.6rem;font-weight:800;letter-spacing:.06em;
  color:var(--brand)}
/* 라벨 대신 두는 점 - 서브 페이지 섹션 머리와 같은 맥박 + 고리 */
.el-head .el-dot{display:block;width:4.4rem;height:4.4rem;border-radius:10rem;
  background:var(--brand);margin:0 auto 3.4rem;
  animation:dot-pulse 2s infinite,dot-ring 2s infinite}
@media(prefers-reduced-motion:reduce){.el-head .el-dot{animation:none}}
.el-head h2{margin:0;font-size:clamp(2.8rem,3.4vw,4.2rem);font-weight:800;
  line-height:1.35;letter-spacing:-.045em;color:var(--ink-strong)}
.el-lead{margin:2.6rem 0 0;font-size:2rem;font-weight:700;line-height:1.8;color:var(--ink2)}
/* 제목을 메인 배너와 같은 명조로 — 고딕 800 은 덩어리가 커서
   사진 없는 흰 바탕에서 특히 무겁게 읽힌다 */
.el-serif .el-head h2{font-family:var(--serif);font-weight:500;
  letter-spacing:-.05em;line-height:1.3}
/* 진료 과목 · 원장 칼럼 · 치료 전후 제목은 2단 섹션 제목과 같은 55px — 좁은 화면에서만 줄인다 */
.el-sec.el-lg .el-head h2{font-size:5.5rem}
@media(max-width:1200px){
  .el-sec.el-lg .el-head h2{font-size:clamp(2.8rem,4.4vw,5.5rem)}
}
/* view more — 레퍼런스와 같은 위치(제목 블록 아래 가운데) */
/* 헤더 오른쪽 전화번호(.hd-tel)와 같은 글자 — 나눔스퀘어네오 17px · 800 · 자간 -.03em.
   대문자 표기(VIEW MORE)만 11dent 버튼을 따른다 */
.el-more{display:inline-block;margin-top:3rem;padding:1.2rem 3rem;
  border:1px solid var(--ink-strong);border-radius:var(--pill);
  font-family:var(--sans);font-size:1.7rem;font-weight:800;line-height:1;
  letter-spacing:-.03em;text-transform:uppercase;
  color:var(--ink-strong);text-decoration:none;transition:.18s}
.el-more:hover{background:var(--ink-strong);color:#fff}
/* 띠 아래 한 줄 강조문 */
.el-note{margin:4.4rem 0 0;padding-left:3rem;position:relative;
  font-size:1.9rem;line-height:1.7;color:var(--ink2)}
.el-note::before{content:"\2192";position:absolute;left:0;top:0;
  font-size:2rem;color:var(--brand)}
.el-note b{font-weight:800;color:var(--ink-strong)}

/* ── 스크롤 등장 — 화면에 들어오면 올라오며 나타난다 ────────
   ★ .rv 는 JS 가 직접 걸어 준다. CSS/HTML 에 미리 숨겨 두면
   스크립트가 실패했을 때 본문이 통째로 안 보인다. */
.rv{opacity:0;transform:translateY(4.4rem);
  transition:opacity .8s ease-out, transform 1s cubic-bezier(.16,.84,.44,1)}
.rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ── 2단 소개 블록 .el-two ────────────────────────────────
   11dent .doctor-section 의 짜임을 그대로 가져왔다.
   왼쪽: 점 → 제목 → 작은 설명 → VIEW MORE 알약
   오른쪽: 모서리를 크게 굴린 사진 + 왼쪽 아래 라벨
   흰 바탕에 여백을 크게 두는 것이 이 디자인의 핵심이다 */
.el-two{padding:12rem 0}
.el-two>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:8rem;align-items:center}
/* 짝수 블록은 좌우를 뒤집어 리듬을 준다 */
.el-two.flip .el-two-tx{order:2}
/* 2단 섹션이 연달아 오면 여백이 겹쳐 두 배가 된다 — 뒤 섹션 윗여백을 뺀다 */
.el-two + .el-two{padding-top:0}
.el-two.flip .el-two-fig{order:1}

/* 서브 페이지 섹션 머리(.shead::before)와 같은 점 — 맥박 + 퍼지는 고리.
   dot-pulse 가 transform 을 쓰므로 자리는 margin 으로만 잡는다 */
.el-two-dot{display:block;width:4.4rem;height:4.4rem;border-radius:10rem;
  background:var(--brand);margin:0 0 4.6rem;
  animation:dot-pulse 2s infinite,dot-ring 2s infinite}
@media(prefers-reduced-motion:reduce){.el-two-dot{animation:none}}
/* 좁은 화면에서 점이 잘려 보이던 것(2026-09-21).
   퍼지는 고리가 2rem 인데 .wrap 좌우 여백은 1.5rem 뿐이라 고리 왼쪽이 화면 밖으로 나간다.
   점은 칸 맨 왼쪽에 붙어 있어 왼쪽만 잘리고, 그래서 동그라미가 깨져 보였다.
   고리를 여백 안쪽(1.2rem)으로 줄인다 — 점 크기는 그대로다. */
@keyframes dot-ring-sm{
  0%{box-shadow:0 0 0 0 rgba(13,111,184,.4)}
  100%{box-shadow:0 0 0 1.2rem rgba(13,111,184,0)}}
@media(max-width:768px){
  .el-two-dot{animation:dot-pulse 2s infinite,dot-ring-sm 2s infinite}
}
/* 롤링 배너 제목과 같은 명조 — 가는 본문(400)에 포인트만 굵게(600) */
.el-two-tx h2{margin:0 0 3rem;font-family:var(--serif);
  font-size:5.5rem;font-weight:400;
  line-height:1.3;letter-spacing:-.05em;color:var(--ink-strong)}
/* 55px 고정은 좁은 화면에서 두 줄이 넘치므로 그때만 줄인다 */
@media(max-width:1200px){
  .el-two-tx h2{font-size:clamp(2.8rem,4.4vw,5.5rem)}
}
.el-two-tx h2 em{font-style:normal;font-weight:600;color:var(--brand)}
.el-two-tx p{margin:0;font-size:2.2rem;font-weight:600;line-height:1.75;color:var(--ink2)}
.el-two-tx p .lab{display:block;color:var(--ink3)}
/* 의료진 약력 — 이름(h2) 과 본문 사이. 본문보다 작고 브랜드색으로 띄운다 */
.el-two-tx .el-cred{margin:-1.4rem 0 2.4rem;font-size:1.8rem;font-weight:700;
  line-height:1.7;letter-spacing:-.02em;color:var(--brand)}
/* VIEW MORE — 얇은 외곽선 알약 + 화살표 */
.el-view{display:inline-flex;align-items:center;gap:1.4rem;margin-top:4rem;
  padding:1.3rem 2.6rem;border:1px solid #d0d0d0;border-radius:var(--pill);
  /* 글자는 헤더 전화번호 · 섹션 view more 와 같게 — 나눔스퀘어네오 17px · 800 · 자간 -.03em */
  font-family:var(--sans);font-size:1.7rem;font-weight:800;line-height:1;letter-spacing:-.03em;
  text-transform:uppercase;color:var(--brand);text-decoration:none;transition:.2s}
.el-view::after{content:"\2192";font-size:1.7rem;line-height:1;transition:transform .2s}
/* 11dent a.viewMore-btn.greenBtn — 테두리는 회색, 올리면 테두리만 포인트색(배경은 채우지 않는다) */
.el-view:hover{border-color:var(--brand);color:var(--brand)}
.el-view:hover::after{transform:translateX(.4rem)}

.el-two-fig{position:relative;border-radius:2.8rem;overflow:hidden}
.el-two-fig img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.el-two-fig .img-slot{width:100%;aspect-ratio:1/1;margin:0;border-radius:0}
/* 사진 왼쪽 아래 라벨 — 작은 알약 + 굵은 흰 글씨 */
.el-two-cap{position:absolute;left:3rem;bottom:2.8rem;z-index:2}
.el-two-cap em{display:inline-block;padding:.5rem 1.4rem;border-radius:var(--pill);
  background:rgba(255,255,255,.92);font-style:normal;font-family:'Barlow',var(--sans);
  font-size:1.4rem;font-weight:700;letter-spacing:.06em;color:var(--ink-strong)}
.el-two-cap b{display:block;margin-top:.8rem;font-size:2rem;font-weight:800;
  letter-spacing:-.02em;color:#fff;text-shadow:0 .2rem 1.2rem rgba(0,0,0,.5)}

@media(max-width:1000px){
  .el-two{padding:7rem 0}
  .el-two>.wrap{grid-template-columns:minmax(0,1fr);gap:4rem}
  .el-two.flip .el-two-tx{order:1}
  .el-two.flip .el-two-fig{order:2}
  /* 한 단으로 내려오면 사진이 화면 폭을 꽉 채우는데 글만 왼쪽에 붙어 있었다.
     「대표원장 임태윤」과 「한 번 오신 분이 오래 다니시는 이유」 두 섹션을 가운데로(대표 지시 2026-09-30).
     .el-view 는 inline-flex 라 text-align 만으로 따라오고, 점은 블록이라 좌우 여백을 auto 로 준다. */
  .el-two-tx{text-align:center}
  .el-two-dot{margin:0 auto 3rem}
  .el-two-fig{border-radius:2rem}
}

/* ── 진료 과목 4칸 — 11dent .subject-section 구조 ─────────────
   둥근 색 패널 한 장을 세로선으로 4칸 나누고, 오른쪽에 원장 누끼를 둔다.
   칸에 마우스를 올리면 그 칸만 넓어지고(25% → 35%) 번호가 원이 되며
   작은 사진 두 장과 설명이 나타난다. 칸 아래쪽은 회색을 곱해 어둡게 깐다.
   11dent 는 칸마다 배경 사진을 바꾸지만 누끼가 한 장뿐이라,
   3 · 4번 칸에서는 원장을 왼쪽으로 옮겨 글과 겹치지 않게 한다. */
/* 한 칸 400 × 550 — 패널은 1600px 로, 본문 폭(1360px)을 좌우로 벗어나 가운데에 둔다.
   화면이 1600px 보다 좁으면 좌우 2rem 을 남기고 줄어든다 */
.el-subj{--sj-bg:#5E7E96;--sj-w:min(160rem,100vw - 4rem);
  position:relative;display:flex;width:var(--sj-w);height:55rem;
  margin-left:calc((100% - var(--sj-w)) / 2);
  border-radius:8rem;overflow:hidden;background:var(--sj-bg);
  isolation:isolate;text-align:left}
/* 기본 원장 누끼(main-doctor.webp) — 머리 위에 여유를 두려고 패널 높이의 93% */
.el-subj .doc{position:absolute;bottom:0;right:11%;height:93%;width:auto;max-width:none;
  z-index:0;pointer-events:none;transition:opacity .3s}
/* 칸별 누끼(subj-01~04.webp, 배경 없는 PNG 계열) — 원장 누끼처럼 패널 색 위에 바로 올린다.
   원본에서 잘려 있던 면은 패널 가장자리에 붙여 잘린 자국이 보이지 않게 한다 */
.el-subj .sj{position:absolute;width:auto;max-width:none;
  z-index:0;pointer-events:none;opacity:0;transition:opacity .35s}
.el-subj .sj.s1{right:0;bottom:0;height:100%}                        /* 사랑니 — 진료 중인 원장, 오른쪽 · 아래가 잘린 컷 */
.el-subj .sj.s2{right:9%;top:50%;height:54%;transform:translateY(-50%)} /* 임플란트 — 부품 */
.el-subj .sj.s3{left:9%;bottom:0;height:88%}                         /* 턱관절 — 두개골 · 턱관절 도해(좌우 반전), 아래(목뼈)가 잘린 컷 */
/* 일반진료 — 충치 하나가 표시된 아래턱 치아 모형(3D). 잘린 곳 없는 사물이라 가운데에 띄운다.
   4번 칸을 넓히면 2 · 3번 칸 경계가 45.5% 자리 — 모형 가운데를 거기에 맞춘다.
   모형 폭 = 55rem × 64% × 1326/957 ≈ 48.8rem → 절반 24.4rem */
.el-subj .sj.s4{left:calc(39.5% - 24.4rem);top:50%;height:64%;transform:translateY(-50%)}
.el-subj>a{position:relative;flex:0 1 25%;min-width:0;display:flex;align-items:flex-end;
  overflow:hidden;border-right:1px solid rgba(255,255,255,.3);
  color:#fff;text-decoration:none;transition:flex-basis .4s ease-in-out}
.el-subj>a:last-child{border-right:0}
.el-subj .tx{position:relative;width:100%;padding:6rem 5rem}
/* 칸 아래쪽 어둡게 — 쌓임 맥락을 만들지 않아야 패널 · 누끼와 곱해진다 */
.el-subj .tx::after{content:"";position:absolute;left:0;right:0;bottom:0;top:-14rem;
  z-index:0;transition:background-color .3s}
.el-subj .tx>*{position:relative;z-index:1}
.el-subj .no{display:inline-block;z-index:2;font-size:6rem;font-weight:800;
  line-height:1.6;letter-spacing:-.02em}
.el-subj .th{display:none;justify-content:center;gap:2rem;margin:0 0 2rem;
  padding:0;list-style:none;text-align:center}
/* 원형 사진 — 11dent 원본 205px 을 칸 폭에 맞춰 줄인다(강조 칸 509px 에서 194px).
   값은 11dent 를 같은 조건(1920 화면, 강조 상태)으로 띄워 잰 것에 맞췄다 */
.el-subj .th li{flex:0 1 20.5rem;min-width:0}
.el-subj .th img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover}
.el-subj .th p{margin:.9rem 0 0;font-size:1.8rem;font-weight:700;line-height:1.6;color:#fff}
.el-subj b{display:block;margin-top:2rem;font-size:3rem;font-weight:800;line-height:1.6;
  letter-spacing:-.04em;white-space:nowrap}
.el-subj .tx>p{display:none;margin:1rem 0 0;font-size:1.8rem;line-height:1.6;
  white-space:nowrap;color:rgba(255,255,255,.92)}

@media(hover:hover) and (min-width:1001px){
  /* 35% 로 늘리되 줄어들 수 있게 둔다 — 11dent 와 같이 509px 이 된다 */
  .el-subj>a:hover{flex-basis:35%}
  .el-subj>a:hover .tx::after{background-color:#D9D9D9;mix-blend-mode:multiply}
  .el-subj>a:hover .no{display:block;width:9.7rem;height:9.7rem;margin:0 0 -4rem -2rem;
    border-radius:50%;background:#fff;color:var(--sj-bg);
    line-height:9.7rem;text-align:center}
  .el-subj>a:hover .th{display:flex}
  /* 11dent 설명은 3줄이다 — 우리 글이 2줄이어도 3줄 높이를 잡아
     번호 · 원형 사진이 11dent 와 같은 높이에 오게 한다 */
  .el-subj>a:hover .tx>p{display:block;min-height:4.8em;
    /* 비는 한 줄만큼의 자리 안에서 글만 조금 내린다 — 높이(4.8em)는 그대로라
       번호 · 원형 사진 위치는 움직이지 않는다 */
    padding-top:1.6rem}
  /* 칸에 올리면 원장 누끼를 걷고 그 칸의 이미지를 띄운다 */
  .el-subj:has(>a:hover) .doc{opacity:0}
  .el-subj:has(>a:nth-of-type(1):hover) .sj.s1,
  .el-subj:has(>a:nth-of-type(2):hover) .sj.s2,
  .el-subj:has(>a:nth-of-type(3):hover) .sj.s3,
  .el-subj:has(>a:nth-of-type(4):hover) .sj.s4{opacity:1}
}
/* 좁은 PC — 칸 안 여백과 글자를 줄인다 */
@media(max-width:1300px){
  .el-subj .tx{padding:5rem 3rem}
  .el-subj b{font-size:2.6rem}
  .el-subj .tx>p{font-size:1.6rem}
}
/* 태블릿 · 모바일 — 11dent 처럼 세로로 쌓고 누끼는 뺀다. 설명은 늘 보인다 */
@media(max-width:1000px){
  .el-subj{flex-direction:column;height:auto;border-radius:3rem}
  .el-subj .doc,.el-subj .sj{display:none}
  .el-subj>a{flex:none;border-right:0;border-top:1px solid rgba(255,255,255,.3)}
  .el-subj>a:first-of-type{border-top:0}
  .el-subj .tx{padding:3rem 2.6rem}
  .el-subj .no{font-size:3.6rem}
  .el-subj b{margin-top:1rem;font-size:2.4rem}
  .el-subj .tx>p{display:block;white-space:normal;font-size:1.5rem}
  /* 11dent 모바일처럼 줄마다 그 과목 사진을 오른쪽에 깐다 */
  .el-subj>a{position:relative;overflow:hidden;min-height:15rem}
  .el-subj>a::before{content:"";position:absolute;right:0;top:0;bottom:0;width:46%;z-index:0;
    background-repeat:no-repeat;background-position:right bottom;background-size:auto 100%}
  .el-subj>a:nth-of-type(1)::before{background-image:url("img/subj-01.webp")}
  .el-subj>a:nth-of-type(2)::before{background-image:url("img/subj-02.webp");background-position:right center;background-size:auto 64%}
  .el-subj>a:nth-of-type(3)::before{background-image:url("img/subj-03.webp?v=20260914d");background-position:right bottom;background-size:auto 92%}
  .el-subj>a:nth-of-type(4)::before{background-image:url("img/subj-04.webp?v=20260914b");background-position:right center;background-size:auto 70%}
  .el-subj .tx{position:relative;z-index:1;width:min(100%,60%)}
  .el-subj .tx::after{top:0;background:linear-gradient(90deg,rgba(94,126,150,.92) 60%,rgba(94,126,150,0) 100%);
    left:-2.6rem;right:-14rem;mix-blend-mode:normal}
}
/* 폰 — 11dent 모바일 진료과목처럼 번호 + 과목명만 두고 이미지를 온전히 보인다(2026-09-22).
   설명 문단을 걷고, 이미지를 가리던 그라데이션도 뗀다.
   1 · 2번은 글 왼쪽 · 이미지 오른쪽, 3 · 4번은 뒤집어 리듬을 준다 */
@media(max-width:768px){
  .el-subj .tx>p{display:none}
  .el-subj .tx::after{content:none}
  .el-subj>a{min-height:16rem;align-items:center}
  .el-subj .tx{width:auto;padding:2.6rem 2.6rem}
  .el-subj .no{font-size:3.4rem;line-height:1.3}
  .el-subj b{margin-top:.4rem;font-size:2.2rem;line-height:1.4}
  /* 이미지 — 칸 절반 안에 잘리지 않게 담는다(contain) */
  .el-subj>a::before{width:50%;top:1.4rem;bottom:1.4rem;right:1.6rem;
    background-size:contain;background-position:center}
  /* 사랑니 — 진료 중인 원장 컷은 아래가 잘린 원본이라 칸 바닥에 붙인다 */
  .el-subj>a:nth-of-type(1)::before{top:1.4rem;bottom:0;right:0;background-position:right bottom;background-size:contain}
  .el-subj>a:nth-of-type(2)::before{background-size:contain}
  .el-subj>a:nth-of-type(3)::before,
  .el-subj>a:nth-of-type(4)::before{right:auto;left:1.6rem;background-size:contain;background-position:center}
  /* 턱관절 — 목뼈 쪽이 잘린 원본이라 역시 바닥에 붙인다 */
  .el-subj>a:nth-of-type(3)::before{bottom:0;background-position:left bottom}
  .el-subj>a:nth-of-type(n+3){justify-content:flex-end}
  .el-subj>a:nth-of-type(n+3) .tx{text-align:right}
}

/* ── 태그 모음 ── 크기는 11dent .keyword-section 과 같게
   (글자 30px · 안 여백 30/40px · 간격 20px · 묶음 폭 1310px). 색은 사이트 것 */
/* 묶음 폭 124rem — 태그 19개가 3 · 3 · 4 · 5 · 4 로 떨어져 마지막 줄에 하나만 남지 않는다
   (131rem 이면 4 · 4 · 4 · 6 · 1). 태그를 더하거나 빼면 폭을 다시 맞춘다 */
.el-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;
  max-width:124rem;margin:0 auto}
.el-tags a{padding:3rem 4rem;border:1px solid var(--line);border-radius:var(--pill);
  background:#fff;font-size:2.8rem;font-weight:700;line-height:1;letter-spacing:-.02em;
  color:var(--ink2);text-decoration:none;
  /* 스크롤 등장(.rv)의 느린 전환을 덮어쓰지 않도록 둘을 함께 적는다 */
  transition:opacity .8s ease-out,transform 1s cubic-bezier(.16,.84,.44,1),
    background-color .4s ease-in-out,border-color .4s ease-in-out,color .4s ease-in-out;
  /* 11dent floatComplex · shadowFloat — 둥실둥실 떠다니며 그림자가 짙어졌다 옅어진다.
     등장 효과가 transform 을 쓰므로 움직임은 translate · rotate 속성으로 따로 준다 */
  box-shadow:0 .4rem 1.5rem rgba(0,0,0,.1);
  animation:el-float 4s ease-in-out infinite,el-shadow 4s ease-in-out infinite}
.el-tags a:hover{border-color:var(--ink-strong);background:var(--ink-strong);color:#fff}
/* 태그마다 속도와 시작 시점을 달리한다(11dent 값 그대로) */
.el-tags a:nth-child(1){animation-duration:3s;animation-delay:0s}
.el-tags a:nth-child(2){animation-duration:3.5s;animation-delay:.5s}
.el-tags a:nth-child(3){animation-duration:2.8s;animation-delay:1s}
.el-tags a:nth-child(4){animation-duration:3.2s;animation-delay:1.5s}
.el-tags a:nth-child(5){animation-duration:3.7s;animation-delay:.2s}
.el-tags a:nth-child(6){animation-duration:2.9s;animation-delay:.8s}
.el-tags a:nth-child(7){animation-duration:3.4s;animation-delay:1.2s}
.el-tags a:nth-child(8){animation-duration:3.1s;animation-delay:1.8s}
.el-tags a:nth-child(9){animation-duration:3.6s;animation-delay:.3s}
.el-tags a:nth-child(10){animation-duration:2.7s;animation-delay:.9s}
.el-tags a:nth-child(11){animation-duration:3.3s;animation-delay:1.4s}
.el-tags a:nth-child(12){animation-duration:3.8s;animation-delay:.6s}
.el-tags a:nth-child(13){animation-duration:2.6s;animation-delay:1.1s}
.el-tags a:nth-child(14){animation-duration:3.9s;animation-delay:.4s}
.el-tags a:nth-child(15){animation-duration:3s;animation-delay:1.6s}
.el-tags a:nth-child(16){animation-duration:3.5s;animation-delay:.7s}
.el-tags a:nth-child(17){animation-duration:2.8s;animation-delay:1.3s}
.el-tags a:nth-child(18){animation-duration:3.2s;animation-delay:.1s}
.el-tags a:nth-child(19){animation-duration:3.7s;animation-delay:1.7s}
.el-tags a:nth-child(20){animation-duration:2.9s;animation-delay:.5s}
@keyframes el-float{
  0%,100%{translate:0 0;rotate:0deg}
  20%{translate:3px -8px;rotate:1deg}
  40%{translate:-2px -3px;rotate:-.5deg}
  60%{translate:1px -12px;rotate:.8deg}
  80%{translate:-1px -6px;rotate:-.3deg}
}
@keyframes el-shadow{
  0%,100%{box-shadow:0 .4rem 1.5rem rgba(0,0,0,.1)}
  50%{box-shadow:0 .8rem 2.5rem rgba(0,0,0,.15)}
}
@media(prefers-reduced-motion:reduce){.el-tags a{animation:none}}

/* ── 치료 전후 비교 슬라이더 ─────────────────────────────
   사례 하나를 크게(왼쪽 사진 · 오른쪽 글). 사진은 치료 후를 깔고 그 위에
   치료 전을 --pos 만큼만 보여 준다. 투명한 range 가 끌기 · 키보드를 맡는다.
   사례가 켜질 때 손잡이가 한 번 좌우로 흔들려 끌 수 있다는 걸 알린다. */
@property --pos{syntax:'<percentage>';inherits:true;initial-value:50%}
.ba-slider{position:relative}
.ba-list{display:grid}
.ba-item{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:7rem;align-items:center;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.ba-item.is-on{opacity:1;visibility:visible}
.ba-cmp{--pos:50%;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2rem;
  background:#111;user-select:none;-webkit-user-select:none}
.ba-cmp img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-cmp .bf,.ba-cmp .af{position:absolute;top:1.8rem;z-index:3;padding:.6rem 1.3rem;border-radius:.4rem;
  font-size:1.4rem;font-weight:700;line-height:1.3;color:#fff;pointer-events:none}
.ba-cmp .bf{left:1.8rem;background:rgba(28,34,38,.86)}
.ba-cmp .af{right:1.8rem;background:var(--brand)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);z-index:2;width:.2rem;margin-left:-.1rem;
  background:#fff;pointer-events:none}
.ba-handle::after{content:"";position:absolute;left:50%;top:50%;width:5.6rem;height:5.6rem;
  margin:-2.8rem 0 0 -2.8rem;border-radius:50%;box-shadow:0 .4rem 1.6rem rgba(0,0,0,.28);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D6FB8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/2.8rem no-repeat}
.ba-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;
  cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.ba-item.is-on .ba-cmp{animation:ba-hint 1.8s ease-in-out .5s 1}
@keyframes ba-hint{0%{--pos:50%}30%{--pos:30%}65%{--pos:70%}100%{--pos:50%}}
@media(prefers-reduced-motion:reduce){.ba-item.is-on .ba-cmp{animation:none}}
/* 오른쪽 글 */
.ba-info{text-align:left}
.ba-info .cx-tag{margin:0}
.ba-t{display:block;margin:2.2rem 0 0;font-family:var(--serif);font-size:3.2rem;font-weight:500;
  line-height:1.4;letter-spacing:-.05em;color:var(--ink-strong)}
.ba-p{max-width:none;margin:2rem 0 0;font-size:1.8rem;line-height:1.8;color:var(--ink2)}
.ba-info .el-view{margin-top:3.6rem}
/* 아래 넘김 — 화살표 두 개 사이에 점 */
.ba-ctrl{display:flex;align-items:center;justify-content:center;gap:2.4rem;margin-top:5rem}
.ba-nav{position:relative;width:4.8rem;height:4.8rem;padding:0;border:1px solid #d0d0d0;border-radius:50%;
  background:#fff;cursor:pointer;transition:border-color .2s}
.ba-nav::before{content:"";position:absolute;left:50%;top:50%;width:1rem;height:1rem;
  border-top:2px solid var(--ink-strong);border-left:2px solid var(--ink-strong);transition:border-color .2s}
.ba-nav.prev::before{transform:translate(-30%,-50%) rotate(-45deg)}
.ba-nav.next::before{transform:translate(-70%,-50%) rotate(135deg)}
.ba-nav:hover{border-color:var(--brand)}
.ba-nav:hover::before{border-color:var(--brand)}
.ba-dots{display:flex;gap:1rem}
.ba-dots button{width:1.2rem;height:1.2rem;padding:0;border:0;border-radius:50%;
  background:#d3dbe0;cursor:pointer;transition:background .3s,width .3s}
.ba-dots button.is-on{width:3.2rem;border-radius:10rem;background:var(--brand)}

/* ── 숫자 ── 병원 공간 사진 위에 짙은 막을 깔고 흰 글자를 올린다.
   (11dent 식 무늬 배경에서 바꿈 — 「같은 자리」라는 문구에 맞춰 원내 공간 사진을 쓴다) */
.el-stat{padding:14rem 0;text-align:center;
  /* 원내 복도 사진 — 좌우 대칭에 흰 벽 · 조명뿐이라 글자 뒤에서 조용하다 */
  background:linear-gradient(rgba(8,18,30,.72),rgba(8,18,30,.72)),
    url('img/tour-07.jpg') center/cover no-repeat #16202b;
  /* 11dent .background-fixed — 무늬는 화면에 붙어 있고 내용만 스크롤된다 */
  background-attachment:fixed}
/* 터치 기기(iOS Safari 등)는 fixed 배경을 지원하지 않거나 화면 전체 크기로
   늘려 흐리게 그린다 — 거기서는 보통 배경으로 돌린다 */
@media(hover:none),(max-width:1024px){.el-stat{background-attachment:scroll}}
/* 메인 섹션 제목과 같은 명조(Noto Serif KR 500 · 55px) — 좁은 화면에서만 줄인다 */
.el-stat h2{margin:0 0 10rem;font-family:var(--serif);font-size:5.5rem;
  font-weight:500;line-height:1.3;letter-spacing:-.05em;color:#fff}
@media(max-width:1200px){.el-stat h2{font-size:clamp(2.8rem,4.4vw,5.5rem)}}
.el-stat ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem}
.el-stat li{padding:0 2rem}
.el-stat li + li{border-left:1px solid rgba(255,255,255,.28)}
/* 숫자 — 헤더 전화번호(.hd-tel)와 같은 나눔스퀘어네오 800 · 자간 -.03em, 크기는 최대 110px */
.el-stat b{display:inline-block;font-family:var(--sans);font-size:clamp(7rem,9vw,11rem);
  font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff;
  /* 셀 때 자릿수마다 폭이 달라 흔들리지 않도록 숫자 폭을 고정한다 */
  font-variant-numeric:tabular-nums;transition:transform .3s ease}
/* 다 센 뒤 한 번 튀었다 돌아온다 — 11dent addCompletionEffect */
.el-stat b.pop{transform:scale(1.1)}
.el-stat em{margin-left:.8rem;font-style:normal;font-size:2.6rem;font-weight:700;
  color:rgba(255,255,255,.85)}
.el-stat span{display:block;margin-top:2.6rem;font-size:1.8rem;line-height:1.7;
  color:rgba(255,255,255,.88)}

@media(max-width:1000px){
  .ba-item{grid-template-columns:minmax(0,1fr);gap:3.4rem}
  .ba-t{font-size:2.4rem}
  .ba-p{font-size:1.6rem}
  .ba-handle::after{width:4.4rem;height:4.4rem;margin:-2.2rem 0 0 -2.2rem;background-size:2.2rem}
}
@media(max-width:768px){
  .el-sec{padding:7rem 0}
  .el-tags{gap:1rem}
  .el-tags a{padding:1rem 1.5rem;font-size:2rem}
  .el-stat{padding:8rem 0}
  .el-stat ul{grid-template-columns:minmax(0,1fr);gap:5rem}
  .el-stat li + li{border-left:0;border-top:1px solid rgba(255,255,255,.28);padding-top:5rem}
  .el-note{font-size:1.7rem}
}

/* 배경 세로 격자선은 쓰지 않는다 (2026-09-11 제거) */
.home-guide>*{position:relative;z-index:1}

/* ══ 홈 히어로 — 11dent 메인 배너 짜임 ═══════════════════════
   메인 카피 2줄(굵게 · 일부 강조색) · 서브 카피 2줄 · 알약 CTA
   좌우 이전/다음 화살표 · 아래 가운데 인디케이터 */
/* ★ 슬라이드를 전부 absolute 로 띄우므로 높이를 섹션이 직접 들고 있어야 한다.
   예전에는 첫 슬라이드만 relative 로 두어 높이를 만들었는데, 그러면
   섹션 높이(100vh)와 슬라이드 높이(사진 비율)가 달라 글이 아래로 밀렸다. */
/* 세로 길이 — 화면 높이가 아니라 고정값으로 둔다. 여기 한 줄만 고치면 된다 */
.home-hero{position:relative;margin:0;line-height:0;overflow:hidden;
  height:91.1rem}
.hero-track{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .6s ease, visibility 0s linear .6s}
.hero-slide.is-on{opacity:1;visibility:visible;transition:opacity .6s ease}
/* 하남맥 톤 — 사진 채도를 빼고 어두운 막을 덮는다 */
.home-hero img{width:100%;height:100%;display:block;object-fit:cover;
  filter:saturate(.72) contrast(1.04) brightness(.9)}
.hero-slide::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(9,13,17,.78) 0%,rgba(9,13,17,.52) 46%,rgba(9,13,17,.28) 100%),
    linear-gradient(180deg,rgba(9,13,17,.30) 0%,rgba(9,13,17,.10) 38%,rgba(9,13,17,.34) 100%)}

/* 히어로 글을 헤더와 같은 폭·같은 여백에 둔다 —
   로고 왼쪽 끝과 메인 카피 왼쪽 끝이 한 줄로 떨어지게 한다 */
/* 세로 가운데가 아니라 위에서 320px 지점부터 시작한다 */
.home-hero .hc{position:absolute;inset:0;z-index:2;display:grid;align-content:start;
  line-height:normal;max-width:var(--hd-w);margin:0 auto;padding:32rem 2.4rem 0}
@media(min-width:1100px){.home-hero .hc{padding:32rem 4rem 0}}
.home-hero .hc>*{max-width:76rem}
/* 버튼은 글자 길이만큼만 — 그리드 자식은 기본이 stretch 라 칸 폭까지 늘어난다 */
.home-hero .hero-cta{justify-self:start}
.home-hero .lab{margin:0 0 2.4rem;font-size:1.6rem;font-weight:800;letter-spacing:.06em;
  color:var(--brand-light)}
/* 서브 카피 아래에 붙일 때 — 위쪽 라벨로 쓰라고 잡아 둔 여백을 뒤집는다 */
.home-hero .sub + .lab{margin:2rem 0 0}
/* 메인 카피 — 두 줄, 굵게. 강조 부분만 색을 바꾼다 */
/* 11dent 메인 카피 실측 (main_style.css .hero-content h2)
     font-family:"Noto Serif KR",serif · 6rem · line-height 1.2 · letter-spacing -.3rem
   명조체라 같은 크기에서도 획이 가늘고 글자가 또렷하게 선다.
   -.3rem / 6rem = -.05em 이므로 크기가 줄어도 비율이 유지되게 em 으로 적는다 */
/* 11dent 실측 그대로 — font 60px "Noto Serif KR" serif · #FFFFFF
   · line-height 1.2 · letter-spacing -.3rem
   em 도 흰색이다(강조색을 쓰지 않는다). 다시 강조를 넣고 싶으면
   --kv-hi 값만 바꾸면 된다. */
.home-hero h2{margin:0 0 3.4rem;font-family:var(--serif);
  font-size:6rem;font-weight:400;
  line-height:1.2;letter-spacing:-.3rem;color:#fff}
/* 포인트 구절. 11dent 와 겹쳐 보면 그쪽 포인트가 우리보다 얇다 —
   명조체는 600 쯤에서 획 대비가 가장 또렷하고, 그 위로 가면 뭉개진다 */
/* 포인트 컬러 — 로고에서 뽑은 밝은 하늘색. 어두운 사진 위에서 가장 잘 뜬다.
   다른 색으로 바꾸려면 --kv-hi 한 줄만 고치면 된다 */
.home-hero{--kv-hi:var(--brand-light)}
.home-hero h2 em{font-style:normal;font-weight:600;color:var(--kv-hi)}
/* 낱말 나열형 카피(.kw) — 1번 배너는 문장이 아니라 진료 네 가지를 늘어놓는다.
   60px 으로 두면 「누워있는 매복 사랑니, 고난이도 임플란트,」 한 줄이 1300px 을 넘어
   칸(76rem)을 벗어난다. 이 배너만 줄이고 폭을 조금 넓힌다. */
.home-hero h2.kw{font-size:4rem;letter-spacing:-.03em;line-height:1.35}
.home-hero .hc>h2.kw{max-width:88rem}
@media(max-width:1200px){.home-hero h2.kw{font-size:clamp(2.4rem,3.4vw,4rem)}}
/* 좁은 화면에서는 60px 고정이 넘치므로 그때만 줄인다 */
@media(max-width:1200px){
  .home-hero h2{font-size:clamp(3.2rem,5vw,6rem);letter-spacing:-.05em}
}
/* 서브 카피 — 두 줄 */
.home-hero .sub{margin:0;font-family:var(--sans);
  font-size:clamp(1.7rem,1.5vw,2.2rem);font-weight:600;
  line-height:1.6;letter-spacing:-.025em;color:rgba(255,255,255,.92)}
/* 바로가기 — 얇은 외곽선 알약 + 화살표 */
.hero-cta{display:inline-flex;align-items:center;gap:1.8rem;margin-top:4rem;
  padding:1.5rem 3rem;border:1px solid rgba(255,255,255,.62);border-radius:var(--pill);
  font-size:1.7rem;font-weight:500;letter-spacing:-.02em;color:#fff;
  text-decoration:none;transition:.22s}
.hero-cta::after{content:"\2192";font-size:2rem;line-height:1;transition:transform .22s}
.hero-cta:hover{background:#fff;border-color:#fff;color:var(--ink-strong)}
.hero-cta:hover::after{transform:translateX(.5rem)}

/* ── 진입 애니메이션 ────────────────────────────────────────
   줄마다 마스크 상자(.ln)를 두고 그 속(i)을 아래에서 밀어 올린다.
   transform 은 배치를 바꾸지 않으므로 글자를 두 벌 넣지 않아도
   줄 높이가 유지된다(중복 텍스트 없음).

   자간 조임과 흐릿함(blur)도 넣어 봤지만 둘 다 뺐다 —
   자간은 가운데 정렬이라 글자 폭이 변하면 좌우로 흔들려 보이고,
   흐릿함은 글자가 번져 보인다. 지금은 마스크 상승 하나로 간다.
   대신 배경이 10초에 걸쳐 천천히 확대되며 화면을 받쳐 준다.
   속도는 전체적으로 느리게 — 키비주얼은 서두를 이유가 없다.
   지금 배너는 제목/설명이 각각 한 줄이라 nth-child(2) 는 예비용이다. */
.home-hero .ln{display:block;overflow:hidden}
.home-hero .ln>i{display:block;font-style:normal;
  transform:translateY(115%);opacity:0;
  transition:transform 2s cubic-bezier(.16,.84,.44,1),
             opacity 1.5s ease-out}
.home-hero .hero-cta{opacity:0;transform:translateY(2rem) scale(.96);
  transition:opacity 1.3s ease,transform 1.3s cubic-bezier(.16,.84,.44,1),
    background .22s,border-color .22s,color .22s}
.home-hero img{transform:scale(1);transition:transform 10s linear}

/* 준비가 끝나고 현재 슬라이드가 된 뒤에 순서대로 올라온다 */
.home-hero.ready .hero-slide.is-on img{transform:scale(1.24)}
.home-hero.ready .hero-slide.is-on .ln>i{transform:translateY(0);opacity:1}
.home-hero.ready .hero-slide.is-on h2 .ln:nth-child(1)>i{transition-delay:.6s}
.home-hero.ready .hero-slide.is-on h2 .ln:nth-child(2)>i{transition-delay:1s}
.home-hero.ready .hero-slide.is-on .sub .ln:nth-child(1)>i{transition-delay:1.5s}
.home-hero.ready .hero-slide.is-on .sub .ln:nth-child(2)>i{transition-delay:1.75s}
.home-hero.ready .hero-slide.is-on .hero-cta{opacity:1;transform:none;
  transition-delay:2.2s}

/* 애니메이션을 원치 않는 사용자에게는 움직임 없이 바로 보여 준다 */
@media(prefers-reduced-motion:reduce){
  .home-hero .ln>i,.home-hero .hero-cta,.home-hero img{transition:none}
  .home-hero .ln>i{transform:none;opacity:1}
  .home-hero .hero-cta{opacity:1;transform:none}
  .home-hero img{transform:none}
  .home-hero.ready .hero-slide.is-on img{transform:none}
  .hero-mid h2::after{transform:scaleX(1);transition:none}
}

/* 1번 배너만 예외 — 문구를 가로 가운데에 한 줄씩 놓는다.
   글이 화면 가운데를 지나므로 어두운 막도 좌우가 아니라 가운데가 진하게 */
/* 가운데 배치라 한 덩어리로 보이므로 조금 더 내려 앉힌다
   (다른 배너는 위에서 320px 그대로) */
.hero-mid .hc{justify-items:center;text-align:center;padding-top:43rem}
/* 홈 h1 — 슬라이드 카피(h2) 위에 작은 머리글로 늘 보인다. 숨기지 않는다(검색엔진용 실제 텍스트) */
.hero-h1{position:absolute;left:50%;top:37.2rem;z-index:3;transform:translateX(-50%);
  width:max-content;max-width:calc(100% - 4.8rem);margin:0;padding:.9rem 2.4rem;
  border:1px solid rgba(255,255,255,.55);border-radius:var(--pill);background:rgba(9,13,17,.18);
  font-family:var(--sans);font-size:1.7rem;font-weight:700;line-height:1.4;letter-spacing:.01em;
  text-align:center;color:#fff;pointer-events:none}
/* 2026-09-21 — 카피가 세 줄인 1번 배너에서 칩이 둘째 줄 위로 겹쳤다.
   칸이 아래에서 위로 쌓이므로 줄이 늘면 칩 자리를 침범한다. 여유를 더 준다. */
@media(max-width:900px){.hero-h1{top:auto;bottom:41rem;max-width:calc(100% - 9.5rem);
  padding:.6rem 1.4rem;font-size:1.25rem}}
/* 아주 좁은 폰(320) 에서도 한 줄로 */
@media(max-width:360px){.hero-h1{max-width:calc(100% - 8rem);padding:.5rem 1.2rem;font-size:1.1rem}}   /* 모바일 — 카피가 아래에 붙으므로 타원도 아래 기준으로, 제목 바로 위 */
.hero-mid .hc>*{max-width:none;width:auto}
/* keoc.kr 키비주얼의 가로선 — 제목 아래를 가로지르는 1px 흰 선(40%).
   제목이 칸 폭을 차지해야 선이 좌우로 뻗으므로 h2 만 width:100% 로 둔다.
   선이 먼저 그어지고(0s) 그 위로 글자가 올라온다(0.35s~). */
.hero-mid h2{position:relative;width:100%;padding-bottom:1.8rem}
.hero-mid h2::after{content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:rgba(255,255,255,.4);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform 2.6s cubic-bezier(.16,.84,.44,1)}
.home-hero.ready .hero-slide.is-on h2::after{transform:scaleX(1)}
.hero-mid .hero-cta{justify-self:center}
.hero-mid::after{background:
  linear-gradient(90deg,rgba(9,13,17,.5) 0%,rgba(9,13,17,.62) 50%,rgba(9,13,17,.5) 100%),
  linear-gradient(180deg,rgba(9,13,17,.34) 0%,rgba(9,13,17,.12) 42%,rgba(9,13,17,.34) 100%)}
/* 한 줄로 길어지므로 좁은 화면에서는 글자를 줄여 넘치지 않게 */
@media(max-width:1500px){
  .hero-mid h2{font-size:clamp(2.8rem,3.6vw,5rem);letter-spacing:-.04em}
}

/* 이전 / 다음 */
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:6.4rem;height:6.4rem;padding:0;border:0;background:none;cursor:pointer;
  opacity:.55;transition:opacity .2s}
.hero-nav:hover{opacity:1}
.hero-nav::before{content:"";display:block;width:2.2rem;height:2.2rem;margin:0 auto;
  border-left:2px solid #fff;border-bottom:2px solid #fff}
.hero-nav.prev{left:2rem}
.hero-nav.prev::before{transform:rotate(45deg)}
.hero-nav.next{right:2rem}
.hero-nav.next::before{transform:rotate(-135deg)}
@media(min-width:1500px){.hero-nav.prev{left:5rem}.hero-nav.next{right:5rem}}

/* 인디케이터 — 짧은 막대 */
.hero-dots{position:absolute;left:0;right:0;bottom:3.4rem;z-index:3;
  display:flex;justify-content:center;gap:1rem;line-height:0}
.hero-dots button{width:3.4rem;height:.3rem;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.4);transition:.22s}
.hero-dots button.is-on{width:6rem;background:#fff}

@media(max-width:900px){
  .home-hero{height:min(92vh,74rem);min-height:52rem}
  .hero-slide::after{background:
    linear-gradient(180deg,rgba(9,13,17,.36) 0%,rgba(9,13,17,.22) 38%,rgba(9,13,17,.86) 100%)}
  .home-hero .hc{align-content:end;padding:12rem 2.4rem 8rem}
  /* ★ .hero-mid .hc 의 padding-top:43rem 이 그대로 먹으면 내용이 화면 밖으로 밀린다 */
  .hero-mid .hc{padding-top:12rem}
  .home-hero h2{margin-bottom:2rem}
  /* 낱말 나열형 카피 — 좁은 화면에서는 한 단 더 줄인다 */
  .home-hero h2.kw{font-size:clamp(2rem,5.4vw,2.6rem);line-height:1.45}
  /* ★ 칩이 배너마다 다른 자리에 놓이던 것(2026-09-21).
     칸은 아래에서 위로 쌓이는데 카피가 1번은 세 줄, 2·3번은 두 줄이라
     칩을 고정 위치에 두면 한쪽에 맞추면 다른 쪽이 어긋난다.
     제목 칸에 세 줄만큼 높이를 잡아 두고 글은 칸 아래에 붙인다 —
     배너가 바뀌어도 카피 윗선이 같은 자리에 서므로 칩이 한 번만 자리를 잡으면 된다. */
  /* 높이는 「가장 긴 카피 + 여유」면 된다. 11.6rem 은 세 줄 기준이라 카피(최대 7.3rem)보다
     4rem 넘게 커서 칩과 카피 사이가 늘 비어 있었다(대표 지적 2026-09-23). 7.6rem 으로 */
  .hero-mid h2{font-size:clamp(2.2rem,5.8vw,3rem);padding-bottom:1.2rem;
    min-height:7.6rem;display:flex;flex-direction:column;justify-content:flex-end}
  /* 배너마다 설명 줄 수가 달라(1번 세 줄, 2 · 3번 두 줄) 글 묶음 높이가 46px 차이 났다.
     설명 칸만 세 줄 높이로 맞춰 둘의 차이를 줄이고(칩 아래 109 → 83), 그 이상은 채우지 않는다 —
     더 채우면 남는 공간이 설명과 버튼 사이로 내려가 더 어색했다(대표 선택 2026-09-23) */
  .hero-mid .hc>p.sub{min-height:7.7rem}
  /* 2 · 3번 배너 — 카피가 한 줄 짧아 글이 아래에 처져 있었다.
     제목을 좌우 화살표 높이(배너 세로 가운데)로 올리고, 칩도 그만큼 내려 사이를 좁힌다.
     1번은 그대로 둔다(대표 지시 2026-09-23). 활성 배너는 .is-on 이 표시한다 */
  .home-hero:has(.hero-slide:nth-of-type(2).is-on) .hero-mid .hc,
  .home-hero:has(.hero-slide:nth-of-type(3).is-on) .hero-mid .hc{padding-bottom:12.1rem}
  .home-hero:has(.hero-slide:nth-of-type(2).is-on) .hero-h1,
  .home-hero:has(.hero-slide:nth-of-type(3).is-on) .hero-h1{bottom:41.3rem}
  .hero-cta{margin-top:2.6rem;padding:1.3rem 2.4rem;font-size:1.5rem}
  .el-more{font-size:1.6rem}
  .hero-nav{width:4.4rem;height:4.4rem}
  .hero-nav.prev{left:.4rem}
  .hero-nav.next{right:.4rem}
  .hero-dots{bottom:2.4rem}
}

/* 브랜드 선언 — 좌 큰 문장 / 우 라벨·본문·더보기 */
.claim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6rem;
  align-items:start;padding:12rem 0 10rem}
.claim h2{font-size:clamp(3rem,3.6vw,4.6rem);line-height:1.3;letter-spacing:-.035em;margin:0}
.claim h2 em{font-style:normal;color:var(--brand)}
.claim .lab{font-size:1.6rem;font-weight:800;color:var(--brand);margin:0 0 1.2rem;letter-spacing:.02em}
.claim h3{font-size:2.6rem;font-weight:700;color:var(--ink-strong);margin:0 0 2rem;letter-spacing:-.03em}
.claim p{margin:0;font-size:var(--f-desc);line-height:var(--lh-desc);color:var(--ink)}
.claim p b{font-weight:700}

/* 더보기 알약 */
.more{display:inline-flex;align-items:center;gap:1.2rem;margin-top:2.8rem;
  font-size:1.6rem;font-weight:700;color:var(--ink-strong);text-decoration:none;letter-spacing:.02em}
.more::before{content:"";width:3.4rem;height:3.4rem;border-radius:50%;background:var(--soft);
  transition:.18s;flex:0 0 3.4rem;margin-right:-2.4rem}
.more::after{content:"+";font-weight:400;font-size:1.8rem;color:var(--ink3);margin-left:.6rem}
.more:hover::before{background:var(--brand)}
.more.on-dark{color:#fff}
.more.on-dark::before{background:rgba(255,255,255,.22)}
.more.on-dark::after{color:rgba(255,255,255,.7)}

/* 좌우 번갈아 오는 큰 사진 블록 */
.zig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:7rem;align-items:center;padding:9rem 0}
.zig>.tx .lab{font-size:1.6rem;font-weight:800;color:var(--brand);margin:0 0 1.4rem;letter-spacing:.02em}
.zig>.tx h2{font-size:clamp(2.6rem,3vw,3.6rem);line-height:1.35;letter-spacing:-.035em;margin:0 0 2rem}
.zig>.tx h2 em{font-style:normal;color:var(--brand)}
.zig>.tx p{margin:0;font-size:var(--f-desc);line-height:var(--lh-desc);color:var(--ink)}
.zig>.tx p b{font-weight:700}
.zig img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;border-radius:1.6rem}
.zig.flip>.tx{order:2}
.zig.flip>.fig{order:1}

/* 홈의 진료 카드 — 이름을 항상 보여 준다.
   하위 페이지는 마우스를 올렸을 때만 나와도 되지만,
   홈은 어느 진료로 갈지 고르는 자리라 덮개를 기다리게 하면 안 된다. */
.c-cards.named>.card.link{line-height:1.5}
/* 상자 테두리를 없애 보이는 형태를 사진 하나로 만든다 — 네 모서리 모두 둥글게 */
.c-cards.named>.card.link{border:0;border-radius:0;overflow:visible;background:none}
.c-cards.named>.card.link img.photo{border-radius:var(--r);border-bottom:0}
.c-cards.named>.card.link .go{position:static;inset:auto;opacity:1;background:none;
  color:inherit;padding:1.8rem .2rem 0;text-align:center;gap:.4rem;justify-items:center}
.c-cards.named>.card.link .go b{font-size:2.1rem;font-weight:700;color:var(--ink-strong);letter-spacing:-.03em}
.c-cards.named>.card.link .go b::after{content:none}
.c-cards.named>.card.link .go>span{display:block;font-size:1.6rem;color:var(--ink2)}
.c-cards.named>.card.link img.photo{transition:.25s}
.c-cards.named>.card.link:hover img.photo{opacity:.82}
.c-cards.named>.card.link:hover .go b{color:var(--brand)}

@media(max-width:900px){
  /* ★ 좌우 여백만 준다. padding 한 벌로 덮으면 위 블록의 위·아래 여백(내용 위치)이 사라진다 */
  .home-hero .hc{padding-left:2.4rem;padding-right:2.4rem}
  .home-hero p{font-size:1.5rem}
  .home-hero .sub{font-size:1.5rem;line-height:1.7}
  .claim{grid-template-columns:minmax(0,1fr);gap:3.4rem;padding:7rem 0 5rem}
  .zig{grid-template-columns:minmax(0,1fr);gap:3rem;padding:5rem 0}
  .zig.flip>.tx{order:2}.zig.flip>.fig{order:1}
}
@media(max-width:760px){
  .c-list:not(.spec){grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .c-list:not(.spec)>.li{padding:2.8rem 2.6rem}
  .c-list.spec>.li{grid-template-columns:minmax(0,1fr);gap:.8rem;padding:2.2rem .2rem}
  .c-list>.li>b{font-size:1.9rem}
}

/* ===== C5 표 =====
   tmjdoctor .sp_table.two_tone 실측 그대로:
   테두리·모서리 없음 · 헤더는 #333 검정 바에 흰 글자
   첫 열만 회색 면(two tone) · 행 구분은 아래 1px #eaeaea · 셀 17px / padding 18px 20px · 가운데 정렬 */
.c-table{background:none;border:0;border-radius:0;overflow:visible}
.c-table table{width:100%;border-collapse:collapse;font-size:1.7rem}
.c-table th,.c-table td{padding:1.8rem 2rem;text-align:center;vertical-align:middle;
  color:#333;border:0;border-bottom:1px solid #eaeaea}
.c-table th{background:#333;color:#fff;font-weight:600;font-size:1.7rem;border-bottom:0}
.c-table td{font-weight:400}
.c-table tbody td:first-child{background:#f5f5f5;font-weight:600;color:#333}
.c-table tbody tr:last-child td{border-bottom:1px solid #eaeaea}
.c-table td:last-child{text-align:center;font-weight:400;color:#333;white-space:normal}
.c-table.left td:last-child{text-align:center}
/* 값이 짧아 폭을 다 쓸 필요가 없는 표는 가운데로 조금 좁힌다 */
.c-table.narrow table{max-width:92rem;margin-inline:auto}
/* 단계 카드 안에 「이런 상태 · 처치」를 같이 담는다.
   도해와 표를 따로 두면 같은 단계를 두 번 읽어야 해서 한 칸으로 합쳤다.
   도해·제목·설명이 한 덩어리로 읽히도록 칸마다 상자를 두른다. */
/* 도해를 상자 위 테두리에 절반 걸친다 — 상자를 키우지 않고도 그림을 크게 쓴다 */
.c-cards.step4>.card:has(.st){position:relative;overflow:visible;
  margin-top:10rem;padding:12.6rem 2.2rem 1rem;
  border:1px solid var(--line);border-radius:1.6rem;background:#fff}
.c-cards.step4.figs>.card:has(.st) img{position:absolute;left:50%;top:0;
  transform:translate(-50%,-50%);width:20rem;height:auto;margin:0;
  border-radius:50%;background:#fff;box-shadow:0 0 0 .8rem #fff}
.c-cards.step4>.card:has(.st) b{margin-bottom:0;font-size:2.3rem}
/* 라벨 없이 선으로만 나눈다. 값의 줄 수가 칸마다 달라도 선 위치가 어긋나지 않도록
   두 줄 높이를 확보하고 가운데에 앉힌다. */
.c-cards .st{margin:2rem 0 0;text-align:center}
.c-cards .st p{display:flex;align-items:center;justify-content:center;
  margin:0;padding:1.8rem .4rem;min-height:7.6rem;
  border-top:1px solid var(--line2);
  font-size:1.7rem;line-height:1.6;color:var(--ink2)}
/* 마지막 줄은 최소 높이를 풀어 준다 — 위 칸들의 구분선 위치는 그대로 맞는다 */
.c-cards .st p:last-child{min-height:0;padding-bottom:.4rem}

/* 오시는 방법 안의 단서와 조건 목록 — 주차처럼 예외가 붙는 안내에 쓴다 */
/* 주차 칸과 진료시간 칸 — 항목 수가 달라 안내 문단 높이가 어긋난다.
   칸을 세로 흐름으로 두고 안내를 아래로 붙여 두 칸의 끝줄을 맞춘다 */
.p-info .wdet .wcol:has(.waynote){display:flex;flex-direction:column}
.p-info .wdet .wcol:has(.waynote) .waynote{margin-top:auto}
/* 구분선이 위 항목에 붙지 않도록 최소 간격을 둔다 */
.p-info .wdet .wcol:has(.waynote) dl{margin-bottom:4rem}
.p-info .waynote{margin:2.2rem 0 1.2rem;padding-top:3rem;
  border-top:1px solid var(--line2);font-size:1.7rem;line-height:1.7;color:var(--ink2)}
.p-info .waynote b{font-weight:700;color:var(--ink-strong)}
.p-info .wlist{margin:0;padding:0;list-style:none}
.p-info .wlist li{position:relative;padding:.5rem 0 .5rem 2rem;
  font-size:1.7rem;line-height:1.7;color:var(--ink2)}
.p-info .wlist li::before{content:"";position:absolute;left:.2rem;top:1.5rem;
  width:.6rem;height:.6rem;border-radius:50%;background:var(--brand)}
/* 진료시간 표의 작은 단서 */
.p-info .htable .sm{font-size:1.5rem;color:var(--ink3)}

/* ── 고지 문서 .legal — 개인정보처리방침 같은 조항 형식 ─────
   진료 페이지와 달리 읽어 내려가는 문서다. 가운데 정렬·큰 제목·카드를 쓰지 않고
   왼쪽 정렬 본문에 조 번호만 세운다. */
.legal{max-width:86rem;margin:0 auto;padding:var(--s6) 0 var(--s7);text-align:left}
.legal .lead-p{margin:0 0 var(--s6);padding-bottom:var(--s5);
  border-bottom:1px solid var(--line);
  font-size:1.9rem;line-height:1.85;color:var(--ink2)}
.legal h2{margin:4.4rem 0 1.4rem;font-family:var(--sans);
  font-size:2.1rem;font-weight:700;letter-spacing:-.03em;color:var(--ink-strong);
  text-align:left}
.legal h2:first-of-type{margin-top:0}
.legal p{margin:0 0 1.2rem;font-size:1.8rem;line-height:1.85;color:var(--ink2)}
.legal ol{margin:1.2rem 0 1.6rem;padding:0;list-style:none;counter-reset:legal}
.legal ol li{position:relative;counter-increment:legal;
  padding:.5rem 0 .5rem 3rem;font-size:1.8rem;line-height:1.8;color:var(--ink2)}
.legal ol li::before{content:counter(legal) ".";position:absolute;left:0;top:.5rem;
  font-family:'Barlow',var(--sans);font-weight:700;color:var(--brand)}
/* 번호가 뜻이 없는 목록 — 점으로 대신한다 */
.legal ol.plain li::before{content:"";top:1.4rem;left:.6rem;
  width:.6rem;height:.6rem;border-radius:50%;background:var(--brand)}
.legal ol li b{font-weight:700;color:var(--ink-strong)}
.legal .legal-date{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);
  font-weight:700;color:var(--ink-strong)}
.legal .hold{margin-top:4rem}
@media(max-width:768px){
  .legal h2{margin:3.4rem 0 1.2rem;font-size:1.9rem}
  .legal p,.legal ol li{font-size:1.7rem}
}

/* ── 원내 사진 .gal — 위 세 장은 크게, 아래 네 장은 작게 ─────
   작은 썸네일이 줄지어 있으면 공간이 눈에 들어오지 않는다.
   누르면 레이어로 크게 띄우고 앞뒤로 넘긴다. */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;
  margin-top:var(--s7)}
.gal .gi{display:block;padding:0;border:0;background:none;
  cursor:zoom-in;overflow:hidden;
  transition:transform .25s,box-shadow .25s}
.gal .gi img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.gal .gi:hover{transform:translateY(-.4rem);box-shadow:0 1rem 2.4rem rgba(16,40,60,.16)}
.gal .gi:focus-visible{outline:.3rem solid var(--brand);outline-offset:.3rem}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gal{grid-template-columns:minmax(0,1fr)}}

/* 레이어 팝업 */
.lb{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;
  justify-content:center;background:rgba(12,18,24,.9);padding:6rem 8rem}
/* display:flex 가 [hidden] 의 display:none 을 이기므로 따로 눌러 준다 */
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;
  box-shadow:0 2rem 6rem rgba(0,0,0,.5)}
.lb button{position:absolute;display:flex;align-items:center;justify-content:center;
  border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  border-radius:50%;transition:background .2s}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb .lb-x{top:2.4rem;right:2.4rem;width:4.8rem;height:4.8rem;font-size:2.6rem;line-height:1}
.lb .lb-p,.lb .lb-n{top:50%;transform:translateY(-50%);width:5.6rem;height:5.6rem;
  font-size:3rem;line-height:1;padding-bottom:.4rem}
.lb .lb-p{left:2.4rem}
.lb .lb-n{right:2.4rem}
.lb .lb-i{position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%);
  font-family:'Barlow',var(--sans);font-size:1.6rem;letter-spacing:.08em;
  color:rgba(255,255,255,.72)}
@media(max-width:768px){
  .lb{padding:8rem 1.6rem}
  .lb .lb-p{left:.8rem} .lb .lb-n{right:.8rem}
  .lb .lb-p,.lb .lb-n{width:4.4rem;height:4.4rem;font-size:2.4rem}
}

/* ── 치료 전후 .cx — 한 항목에 전·후 두 장을 나란히 ─────────
   사진 위 모서리에 Before / After 배지를 얹고,
   아래에 분류 칩과 제목을 둔다. */
/* 격자 위 구분선 — 문구 없이 선만 둔다 */
.cx-rule{margin:0 0 3.4rem;border:0;border-top:1px solid var(--ink-strong)}
.cx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5rem 4.4rem}
.cx-i{margin:0}
.cx-imgs{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.cx-imgs figure{position:relative;margin:0}
.cx-imgs img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.cx-imgs .img-slot{min-height:0;aspect-ratio:1/1;margin:0}
.cx-imgs .bf,.cx-imgs .af{position:absolute;left:.8rem;top:.8rem;z-index:1;
  padding:.35rem .9rem;border-radius:.3rem;
  font-family:'Barlow',var(--sans);font-size:1.2rem;font-weight:700;
  letter-spacing:.02em;color:#fff}
.cx-imgs .bf{background:rgba(28,34,38,.86)}
.cx-imgs .af{background:var(--brand)}
.cx-tag{display:inline-block;margin-top:1.8rem;padding:.5rem 1.2rem;border-radius:.5rem;
  background:var(--tag-bg);font-size:1.4rem;font-weight:700;
  letter-spacing:-.02em;color:#fff}
/* 목록 카드 — 분류 뱃지를 제목 줄 맨 앞에 붙이고, 제목은 한 줄만 보인다(넘치면 …).
   링크로 감싼 카드(a)와 감싸지 않은 카드가 섞여 있어 둘 다 같은 격자로 잡는다 */
.cx-i,.cx-i>a{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:1rem;align-items:center}
.cx-i>a,.cx-i .cx-imgs{grid-column:1/-1}
.cx-i .cx-tag{margin:1.8rem 0 0;padding:.3rem 1rem}
.cx-i b{display:block;margin-top:1.8rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:1.8rem;font-weight:700;line-height:1.55;letter-spacing:-.03em;
  color:var(--ink-strong);text-align:left}
.cx + .t-note{margin-top:var(--s7)}
@media(max-width:900px){.cx{grid-template-columns:minmax(0,1fr);gap:4rem}}

/* ── 치료 사례 상세 .cv ─────────────────────────────────── */
.cv{max-width:92rem;margin:0 auto;padding-top:var(--s6);text-align:left}
.cv-head{padding-bottom:2.6rem;margin-bottom:3.4rem;border-bottom:1px solid var(--ink-strong)}
.cv-head .cx-tag{margin-top:0}
.cv-head h2{margin:1.6rem 0 0;font-size:2.8rem;line-height:1.5;text-align:left}
.cv-meta{margin:1.4rem 0 0;font-family:'Barlow',var(--sans);font-size:1.5rem;
  letter-spacing:.04em;color:var(--ink3)}
.cv-imgs{gap:2rem}
.cv-lead{margin:3rem 0 0;font-size:2rem;line-height:1.8;font-weight:700;color:var(--ink-strong)}
.cv-body{margin-top:1rem}
.cv-body h3{margin:4.4rem 0 1.6rem;font-size:2.2rem;font-weight:700;
  letter-spacing:-.03em;color:var(--brand);text-align:left}
.cv-body p{margin:0 0 1.4rem;font-size:1.8rem;line-height:1.9;color:var(--ink2)}
.cv-spec{margin-top:var(--s7)}
/* 이전 · 목록 · 다음 */
.cv-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;
  margin-top:var(--s7);padding-top:3rem;border-top:1px solid var(--line)}
.cv-nav a,.cv-nav .cv-x{display:block;font-size:1.7rem;line-height:1.6;
  color:var(--ink2);text-decoration:none}
.cv-nav .cv-p{text-align:left}
.cv-nav .cv-n{text-align:right}
.cv-nav .cv-x{color:var(--ink3)}
.cv-nav em{display:block;margin-bottom:.6rem;font-style:normal;
  font-family:'Barlow',var(--sans);font-size:1.4rem;font-weight:700;
  letter-spacing:.06em;color:var(--brand)}
.cv-nav a:hover{color:var(--brand)}
.cv-nav .cv-l{padding:1.2rem 2.6rem;border:1px solid var(--line);border-radius:var(--pill);
  font-weight:700;color:var(--ink-strong);white-space:nowrap}
.cv-nav .cv-l:hover{border-color:var(--brand);color:var(--brand)}
@media(max-width:768px){
  .cv-head h2{font-size:2.2rem}
  .cv-body h3{margin-top:3.4rem;font-size:2rem}
  .cv-nav{grid-template-columns:minmax(0,1fr);gap:1.4rem;text-align:center}
  .cv-nav .cv-p,.cv-nav .cv-n{text-align:center}
  .cv-nav .cv-l{justify-self:center}
}

/* ── 커뮤니티 .ctabs — 네 갈래를 페이지 위에 나란히 둔다 ───── */
.ctabs{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
  padding-top:var(--sec-top);margin:0 auto}
.ctabs a{padding:1.2rem 2.6rem;border:1px solid var(--line);border-radius:var(--pill);
  font-size:1.8rem;font-weight:700;letter-spacing:-.03em;color:var(--ink2);
  text-decoration:none;background:#fff;
  transition:border-color .2s,background .2s,color .2s}
.ctabs a:hover{border-color:var(--brand-light);color:var(--brand)}
.ctabs a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ctabs + section.blk > .shead{padding-top:9rem}
/* FAQ 를 진료별로 나눌 때의 소제목 */
.fgroup{margin:var(--s7) 0 2.4rem;padding-bottom:1.4rem;
  border-bottom:2px solid var(--brand);font-size:var(--f5);font-weight:700;
  letter-spacing:-.03em;color:var(--ink-strong);text-align:left}
.fgroup:first-of-type{margin-top:var(--s6)}
/* 칼럼 카드의 분류와 날짜 */
.c-cards.boxed>.card:not(.link) .cmeta{display:flex;align-items:center;
  justify-content:space-between;gap:1.4rem;margin:1.8rem 0 0;padding-top:1.6rem;
  border-top:1px solid var(--line2);font-size:1.5rem;color:var(--ink3)}
.c-cards.boxed>.card:not(.link) .cmeta em{font-style:normal;font-weight:700;color:var(--brand)}
/* 원장 칼럼 목록 .flat — 레퍼런스처럼 테두리 상자를 걷어내고
   사진 + 검정 제목만 남긴다. .boxed 는 17쪽이 함께 쓰므로 클래스를 더해 좁힌다 */
.c-cards.boxed.flat{gap:4rem 2.6rem}
.c-cards.boxed.flat>.card:not(.link){background:none;border:0;border-radius:0;
  padding:0;transition:none;text-align:left}
.c-cards.boxed.flat>.card:not(.link):hover{border-color:transparent;
  box-shadow:none;transform:none}
/* 제목 — 파랑에서 검정으로, 16px 로 줄이고 굵기를 올린다 */
.c-cards.boxed.flat>.card:not(.link) b{font-size:2.1rem;font-weight:800;
  line-height:1.45;margin-bottom:1.2rem;letter-spacing:-.03em;color:var(--ink-strong)}
/* 제목이 작아진 만큼 설명(19px)이 제목보다 커지지 않도록 함께 내린다.
   뱃지(.cx-tag)도 span 이므로 제외한다 */
.c-cards.boxed.flat>.card:not(.link) span:not(.cx-tag){font-size:1.5rem;
  line-height:1.65;color:var(--ink2)}
/* 설명은 3줄까지만 — 넘치면 말줄임표. 사진 아래 글 높이가 카드마다 같아진다 */
.c-cards.boxed.flat>.card:not(.link)>span:not(.cx-tag){display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
/* 뱃지 — 치료 전후(.cx-i .cx-tag)와 완전히 같은 모양으로.
   카드 안에서는 935행 .c-cards>.card span(1.7rem)과 1062행 .boxed span(1.9rem),
   918행 .card span{display:block} 이 .cx-tag 를 덮어쓴다.
   특정성이 밀리므로 원래 값을 여기서 다시 적는다 */
/* 링크 카드(a.card)는 세로 flex 라 자식이 가로로 꽉 늘어난다 — 뱃지만 글자 폭으로 */
.c-cards.boxed.flat>.card:not(.link) .cx-tag{display:inline-block;width:auto;align-self:flex-start;
  margin:0 0 1.2rem;padding:.5rem 1.2rem;border-radius:.5rem;
  background:var(--tag-bg);font-size:1.4rem;font-weight:700;line-height:1.5;
  letter-spacing:-.02em;color:#fff}
/* 목록 카드를 통째로 링크로 쓴다 — 글자색은 상속받게 */
.c-cards.boxed.flat>a.card{color:inherit;text-decoration:none}
.c-cards.boxed.flat>.card:not(.link):hover b{color:var(--brand)}
/* 사진이 칸 여백을 물고 나가던 음수 마진을 되돌리고 네 모서리를 모두 둥글게 */
.c-cards.boxed.flat>.card:not(.link) img,
.c-cards.boxed.flat>.card:not(.link) .img-slot{width:100%;margin:0 0 2.2rem;
  border-radius:1.4rem}
/* 상자가 없어졌으니 메타 위 구분선도 뺀다 */
.c-cards.boxed.flat>.card:not(.link) .cmeta{margin-top:1.6rem;padding-top:0;border-top:0}
/* 글이 없는 목록 */
.c-table .empty{padding:6rem 2rem;color:var(--ink3)}
@media(max-width:768px){
  .ctabs{gap:.8rem}
  .ctabs a{padding:1rem 1.8rem;font-size:1.6rem}
}

/* ── 진료시간 .hcards — 표 대신 요일 묶음 카드 ─────────────
   여덟 줄짜리 표는 어디를 봐야 할지 알기 어렵다.
   평일 · 화요일 야간 · 토요일 셋으로 묶고 시간을 크게 세운다. */
.sp_main section.blk.hours-sec>.shead::before{width:6.4rem;height:6.4rem;
  border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23fff'%20stroke-width='3.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='24'%20cy='25'%20r='15'/%3E%3Cpath%20d='M24%2016v9.5l6.5%204'/%3E%3Cpath%20d='M18%206.5h12'/%3E%3C/svg%3E") center/3.4rem no-repeat;
  box-shadow:none;animation:none}
.hcards{margin-top:var(--s7)}
.hsub + .t-note{margin-top:4rem}
/* 상자도 뱃지도 두지 않는다 — 굵은 검정 선으로 닫고 세로선으로만 나눈다.
   본문의 다른 구획(교통 2단 · 편의시설 · 지역 목록)과 같은 언어다. */
/* 위에 사진이 오므로 윗선은 두지 않는다 — 사진 아래 굵은 선이 얹히면 눈에 걸린다 */
.hcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  width:min(100%,100rem);margin:var(--s7) auto 0;
  border-bottom:.3rem solid var(--ink-strong)}
.hcards .hc{position:static;margin:0;padding:4.6rem 2.4rem 5.4rem;
  border:0;background:none;text-align:center}
.hcards .hc + .hc{border-left:1px solid var(--line2)}
/* 요일 이름 — 알약을 걷어내고 작은 라벨로 */
.hcards .hc b{position:static;transform:none;display:block;
  padding:0;border-radius:0;background:none;box-shadow:none;white-space:normal;
  font-size:2.2rem;font-weight:800;letter-spacing:-.03em;color:var(--ink-strong)}
/* 시간이 이 블록의 주인공이다 */
.hcards .hc .t{margin:2.2rem 0 0;font-family:'Barlow',var(--sans);
  font-size:4.4rem;font-weight:500;letter-spacing:-.03em;line-height:1;
  color:var(--ink-strong)}
.hcards .hc .d{margin:1.8rem 0 0;font-size:1.6rem;line-height:1.6;color:var(--ink2)}
/* 화요일 야간진료만 색으로 세운다 — 면을 채우면 슬라이드처럼 보인다 */
.hcards .hc.hi b,.hcards .hc.hi .t,.hcards .hc.hi .d{color:var(--brand)}

/* 점심시간 · 휴진 — 위 세 칸과 같은 표 언어로.
   칸 머리(작은 회색 라벨) → 값 순서를 그대로 쓰고, 위 칸의 아랫선이 이 줄의 윗선이 된다. */
.hsub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  width:min(100%,100rem);margin:0 auto;padding:0;background:none;
  border:0;border-bottom:.3rem solid var(--ink-strong)}
.hsub p{margin:0;padding:3rem 2.4rem;text-align:center;
  font-size:2rem;font-weight:700;letter-spacing:-.02em;color:var(--ink-strong)}
.hsub p + p{border-left:1px solid var(--line2)}
.hsub b{display:block;margin:0 0 1.2rem;font-size:1.5rem;font-weight:800;
  letter-spacing:.06em;color:var(--ink3)}
.hsub em{margin-left:.8rem;font-style:normal;font-size:1.6rem;font-weight:400;color:var(--ink3)}
@media(max-width:768px){
  .hsub{grid-template-columns:minmax(0,1fr)}
  .hsub p{padding:2.4rem 1.6rem;font-size:1.8rem}
  .hsub p + p{border-left:0;border-top:1px solid var(--line2)}}
@media(max-width:768px){
  .hcards{grid-template-columns:minmax(0,1fr);gap:0}
  .hcards .hc{padding:3.4rem 1.6rem}
  .hcards .hc + .hc{border-left:0;border-top:1px solid var(--line2)}
  .hcards .hc .t{font-size:3.4rem}
}

/* ── 진료 갈래 목록 .c-branch ──────────────────────────
   표에 넣으면 진료 이름과 설명의 무게가 같아져 눈이 걸릴 데가 없다.
   알약 카드의 왼쪽 한 칸을 포인트 컬러로 통째로 채우고 진료명을 앞세운다.
   각 행은 하위 페이지로 가는 링크다. */
/* 목록 폭 — 이 값만 줄이면 fr 칸(설명)이 먼저 줄어들어
   설명 끝과 화살표 사이의 빈 자리가 함께 좁아진다 */
.c-branch{display:grid;gap:1.4rem;margin:var(--s7) auto 0;padding:0;list-style:none;
  width:min(100%,100rem)}
.c-branch a{display:grid;grid-template-columns:26rem minmax(0,.86fr) minmax(0,1.05fr) 2.4rem;
  gap:0 4.4rem;align-items:center;text-align:left;overflow:hidden;
  padding:0 3rem 0 0;
  border:1px solid var(--line);border-radius:var(--pill);background:#fff;
  text-decoration:none;color:inherit;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.c-branch a:hover{border-color:var(--brand);
  box-shadow:0 .3rem 1.2rem rgba(13,111,184,.1);transform:translateY(-.2rem)}
/* 왼쪽 한 칸을 통째로 채우는 진료명 블록.
   카드가 overflow:hidden 이라 바깥 모서리는 알약 곡선에 맞춰 잘린다.
   아래 단서의 「01에서 05로」가 여기 번호를 가리킨다. */
.c-branch .n{align-self:stretch;display:flex;align-items:center;justify-content:center;
  gap:1.1rem;min-height:8.8rem;padding:1.4rem 2rem;background:var(--brand);
  font-size:2.3rem;font-weight:700;letter-spacing:-.03em;line-height:1.25;
  color:#fff;text-align:center;white-space:nowrap}
.c-branch .n i{font-style:normal;font-family:'Barlow',var(--sans);
  font-size:1.6rem;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.72)}
.c-branch a:hover .n{background:var(--brand2)}
.c-branch b{display:block;font-size:2.2rem;font-weight:700;
  letter-spacing:-.03em;color:var(--ink-strong)}
.c-branch .d{font-size:1.9rem;line-height:1.55;color:var(--ink2)}
.c-branch .cv{position:relative;width:2.4rem;height:2.4rem}
.c-branch .cv::before{content:"";position:absolute;top:50%;left:.4rem;
  width:1.1rem;height:1.1rem;border-right:.24rem solid #b8c2c8;border-bottom:.24rem solid #b8c2c8;
  transform:translateY(-50%) rotate(-45deg);transition:border-color .2s}
.c-branch a:hover .cv::before{border-color:var(--brand)}
.c-branch + .t-note{margin-top:4rem}
@media(max-width:768px){
  .c-branch a{grid-template-columns:minmax(0,1fr);gap:0;
    padding:0 0 1.6rem;border-radius:2rem}
  .c-branch .n{min-height:5.6rem;font-size:1.5rem;margin-bottom:1.4rem}
  .c-branch b,.c-branch .d{padding-inline:2rem}
  .c-branch .cv{display:none}
}

.stepno{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;
  border-radius:50%;background:var(--brand);color:#fff;font-size:1.3rem;font-weight:700;
  margin-right:.8rem;vertical-align:-.3rem}
/* 표와의 여백은 넉넉히, 문장 사이 줄간격은 좁게 */
.t-note{font-size:var(--f2);color:var(--ink3);margin:0 auto;line-height:1.5;
  text-align:center;max-width:none}
/* 한 줄 고지 — 작은 글씨에 앞머리 점. 치료 전후 사진 아래 동의 · 부작용 안내 */
.t-note.dot{font-size:1.4rem;letter-spacing:-.02em}
.t-note.dot::before{content:"";display:inline-block;width:.4rem;height:.4rem;
  margin:0 .8rem 0 0;border-radius:50%;background:currentColor;vertical-align:middle}
.c-table + .t-note{margin-top:4rem}
/* 카드 그리드 뒤 보충 문장도 같은 간격을 둔다 */
.c-cards + .t-note{margin-top:4rem}
/* 격자 앞에 오는 단서는 리드와 격자 사이에서 숨을 쉬게 둔다 */
.shead + .t-note{margin-top:calc(var(--s7) * -1 + 2rem)}
.t-note + .c-cards{margin-top:var(--s7)}
.t-note + .t-note{margin-top:.6rem}
/* 설명글 표준(20px)을 쓰는 보충 문장 — B5 뒤 완화 문장 등 */
.t-note.answer{font-size:var(--f-desc);line-height:var(--lh-desc);color:#000;font-weight:400}
.t-note.answer b{font-weight:700;color:#000}

/* ── C5 변형 · .line — 흰 배경 + 상단 끊어진 선 ──────────────
   헤더 바를 채우지 않고, 열마다 짧은 선을 위에 얹는다.
   면이 사라지니 표가 가벼워지고 앞뒤 섹션(계단·FAQ)과 무게가 맞는다. */
/* 계단(C6) 바로 아래 붙는다 — 사이 여백 0 */
.c-table.line{background:none;margin-top:0}
.c-flow + .c-table.line{margin-top:0}
/* 카드나 사진 뒤에 표가 바로 붙으면 표의 윗줄이 그 밑변처럼 붙어 답답하다 */
.c-cards + .c-table.line,
.sec-fig + .c-table.line{margin-top:var(--s8)}
/* 섹션 머리 밖에 따로 놓는 설명 — 사진 아래 가운데로 (뼈이식 s4) */
.sp_main .lead.ctr{margin:var(--s7) auto 0;text-align:center}
/* 사랑니 당일 발치 섹션 안의 소제목 (구 당일 발치 페이지에서 옮긴 준비물) */
.sp_main .sd-sub{margin:var(--s8) 0 3rem;text-align:center;font-size:2.6rem;font-weight:800;
  letter-spacing:-.04em;color:var(--ink-strong)}
/* 가로선은 열마다 끊지 않고 한 줄로 이어 긋는다 */
.c-table.line table{border-collapse:collapse;border-spacing:0;margin:0;width:100%}
/* .mid — 좁힌 표를 본문 가운데로(보철치료 「덜 깎는 쪽부터」 표) */
.c-table.line.mid table{margin-inline:auto}
.c-table.line th{background:none;color:var(--ink);font-size:var(--f2);font-weight:700;
  padding:1.4rem 1.2rem;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);
  text-align:center;letter-spacing:-.02em}
.c-table.line td{background:none;padding:1.8rem 1.2rem;border-bottom:1px solid var(--line2);
  text-align:center;color:var(--ink2);font-size:1.7rem}
.c-table.line tbody td:first-child{background:none;color:var(--ink);font-weight:700}
.c-table.line tbody tr:last-child td{border-bottom:1px solid var(--line)}
/* 번호는 원형 배지 대신 포인트 컬러 볼드 텍스트 */
.c-table.line .stepno{display:inline;width:auto;height:auto;border-radius:0;background:none;
  color:var(--brand);font-size:inherit;font-weight:700;margin-right:.7rem;vertical-align:baseline}
@media(max-width:700px){
  .c-table.line th{border-top:2px solid var(--ink)}
}
@media(max-width:700px){
  .c-table.left table,.c-table.left thead,.c-table.left tbody,.c-table.left tr,.c-table.left td{display:block;width:100%}
  .c-table.left thead{display:none}
  .c-table.left tr{border-bottom:1px solid #eaeaea;padding:.8rem 0}
  .c-table.left tr:last-child{border-bottom:0}
  .c-table.left td{border:0;padding:.6rem 1.5rem;display:flex;gap:1rem;text-align:left}
  .c-table.left tbody td:first-child{background:none;padding-top:1.4rem;font-size:var(--f4)}
  .c-table.left td:not(:first-child):before{content:attr(data-l);flex:0 0 6.4rem;color:var(--ink3);font-size:var(--f2)}
  .c-table.left td:last-child{padding-bottom:1.4rem;text-align:left}
}

/* ===== C6 흐름 =====
   바깥 박스를 두르지 않는다. 계단 자체가 형태라 테두리가 겹치면 시끄럽다.
   단계가 올라갈수록 면이 진해져 「나중에 가는 것」이 눈으로 읽힌다. */
.c-flow{background:none;border:0;border-radius:0;padding:0;margin-top:var(--s7)}
.c-flow .steps{display:flex;align-items:flex-end;gap:1rem;justify-content:center}
.c-flow .st{flex:1;max-width:19rem;border:0;border-radius:1.4rem 1.4rem 0 0;
  padding:2.6rem 1.4rem 2rem;text-align:center;position:relative}
.c-flow .st:nth-child(1){height:12rem;background:#f2f8fd}
.c-flow .st:nth-child(2){height:14.4rem;background:#e6f2fb}
.c-flow .st:nth-child(3){height:16.8rem;background:#d7ebf8}
.c-flow .st:nth-child(4){height:19.2rem;background:#c5e2f5}
/* 번호 — 계단 윗변에 걸친다 */
.c-flow .st .n{position:absolute;top:-1.5rem;left:50%;transform:translateX(-50%);
  width:3rem;height:3rem;border-radius:50%;background:var(--brand);color:#fff;
  font-size:1.5rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 .4rem #fff}
.c-flow .st .ic{width:3.2rem;height:3.2rem;margin:.6rem auto 1rem;color:var(--brand)}
.c-flow .st .ic svg{width:3.2rem;height:3.2rem;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.c-flow .st b{font-size:var(--f3);font-weight:700;color:var(--ink);display:block;line-height:1.35;
  letter-spacing:-.03em}
@media(max-width:768px){
  .c-flow .steps{gap:.5rem}
  .c-flow .st{padding:2.2rem .6rem 1.4rem;border-radius:1rem 1rem 0 0}
  .c-flow .st:nth-child(1){height:10rem}
  .c-flow .st:nth-child(2){height:11.6rem}
  .c-flow .st:nth-child(3){height:13.2rem}
  .c-flow .st:nth-child(4){height:14.8rem}
  .c-flow .st b{font-size:1.4rem}
  .c-flow .st .ic,.c-flow .st .ic svg{width:2.4rem;height:2.4rem}
}

/* ── C6 변형 2 : 점 간격형 (.c-flow.dots) — 기획안 4-10-1 정의 · B10(1353행)
   「기간을 숫자로 쓰지 않고 점 사이 간격이 벌어지는 그림으로 보여준다」
   작은 눈금 = 균일하게 흐르는 시간, 축 위로 세운 점 = 한 번 내원.
   다음 내원까지 눈금이 몇 칸인지가 눈으로 세어진다. 숫자는 쓰지 않는다. */
.c-flow.dots .dotflow{display:block;width:100%;height:auto;overflow:visible}
.c-flow.dots .ax{stroke:var(--line);stroke-width:1}
.c-flow.dots .tk{stroke:#cfd8dc;stroke-width:1.4;stroke-linecap:round}
.c-flow.dots .vt{stroke:var(--brand);stroke-width:1.4}
.c-flow.dots .v{fill:var(--brand)}
/* 라벨 3열 — 열 경계는 점 무리 사이 중간값(32% / 71.3%)에 맞춘다 */
.c-flow.dots>ol{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2.6rem}
.c-flow.dots li{position:relative;text-align:center;padding:0 .8rem}
/* 단계 사이 세로 구분선 — 위로는 축 위 점 높이까지, 아래로는 설명 끝까지 */
.c-flow.dots li+li::before{content:"";position:absolute;left:0;top:-9rem;bottom:0;
  width:1px;background:var(--brand)}
.c-flow.dots b{display:block;margin:0 0 .8rem;font-size:var(--f4);font-weight:700;
  color:var(--ink);letter-spacing:-.03em}
.c-flow.dots p{margin:0;font-size:1.6rem;color:var(--ink2);line-height:1.75}
.c-flow.dots .flow-cap{margin:3.4rem 0 0;text-align:center;font-size:1.6rem;color:var(--ink3)}
/* 어두운 박스 변형 — 레퍼런스처럼 각진 다크 배경 + 흰 글자 */
.c-flow.dots.dark{background:#383838;padding:6rem 3rem;border-radius:0}
.c-flow.dots.dark .ax{stroke:rgba(255,255,255,.28)}
.c-flow.dots.dark .tk{stroke:rgba(255,255,255,.26)}
.c-flow.dots.dark .vt{stroke:var(--brand-light)}
.c-flow.dots.dark .v{fill:var(--brand-light)}
.c-flow.dots.dark b{color:#fff}
.c-flow.dots.dark p{color:rgba(255,255,255,.74)}
.c-flow.dots.dark li+li::before{background:rgba(255,255,255,.3)}
.c-flow.dots.dark .flow-cap{color:rgba(255,255,255,.5)}
@media(max-width:760px){.c-flow.dots.dark{padding:4rem 2.4rem}}
@media(max-width:760px){
  .c-flow.dots>ol{grid-template-columns:1fr;gap:2.6rem;margin-top:2rem}
  .c-flow.dots li{padding:0}
}

/* ===== C7 인용 =====
   B9 원장 코멘트. 푸터·CTA·오시는 길과 같은 언어 —
   얇은 가로 구분선 위아래, 좌측 원형 사진, 좌측 정렬. 박스를 두르지 않는다. */
/* 왼쪽에 원장 사진, 오른쪽에 말풍선. 위아래 선으로 나누던 것을 상자로 바꿨다. */
.c-quote{display:flex;gap:2.4rem;align-items:center;
  background:none;border:0;border-radius:0;padding:0;
  margin:var(--s8) auto 0;width:100%;text-align:left}
/* ★ align-self:stretch + aspect-ratio 로는 안 된다 — 이미지의 고유 크기(800px)가 이겨서
   레이아웃이 무너진다. 글 블록 높이(인용 2줄 + 이름)에 맞춘 고정 지름을 쓴다. */
.c-quote .photo{flex:0 0 16rem;width:16rem;height:16rem;
  border-radius:50%;object-fit:cover;display:block;margin:0;border:0;background:none}
/* 말풍선 — 왼쪽 가운데에 사진 쪽을 가리키는 꼬리를 단다 */
.c-quote .tx{position:relative;flex:1 1 auto;min-width:0;
  padding:3.6rem 3.6rem;border:1px solid var(--line);border-radius:1.8rem;background:#fff;
  box-shadow:0 .4rem 1.6rem rgba(16,40,60,.05)}
.c-quote blockquote,.c-quote cite{position:relative;z-index:1}
.c-quote .tx::before{content:"";position:absolute;left:-1.05rem;top:50%;
  width:1.8rem;height:1.8rem;background:#fff;
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:translateY(-50%) rotate(45deg)}
.c-quote blockquote{margin:0;font-size:1.9rem;line-height:1.8;color:#000;font-weight:500;
  letter-spacing:-.03em;padding-left:0;border-left:0}
/* 첫 줄로 오는 <b>는 말의 요지 — 본문보다 키운다.
   문장 한가운데의 <b>는 강조일 뿐이라 크기를 올리면 줄이 울퉁불퉁해진다. */
.c-quote blockquote b{font-weight:700;color:var(--brand)}
.c-quote blockquote > b:first-child{font-size:2.2rem}
.c-quote cite{display:block;margin-top:1.8rem;padding-top:1.6rem;
  border-top:1px solid var(--line2);font-style:normal;
  font-size:1.6rem;color:var(--ink3);letter-spacing:-.02em;padding-left:0}
@media(max-width:768px){
  .c-quote{gap:1.4rem;padding:0}
  .c-quote .tx{padding:2.2rem 2.2rem}
  .c-quote .photo{flex:0 0 8.4rem;width:8.4rem;height:8.4rem}
  .c-quote blockquote{font-size:1.7rem;line-height:1.75}
  .c-quote blockquote b{font-size:1.9rem}
}

/* ===== C8 박스 ===== */
/* ★ 왼쪽 세로 강조선을 쓰지 않는다 (전 컴포넌트 공통)
   마무리 강조 문장 — 박스 없이 가운데 정렬. 맨 앞에 포인트 컬러 원형 화살표. */
.c-box:not(.plain){background:none;border:0;border-radius:0;padding:0;
  margin-top:5rem;text-align:center;font-size:var(--f-desc);font-weight:400;
  color:#000;line-height:var(--lh-desc);letter-spacing:-.012em}
.c-box:not(.plain) p{color:inherit;font-weight:inherit}
.c-box:not(.plain) b{font-weight:700;color:#000}
.c-box:not(.plain)>p:first-child::before,
.c-box.closing>.k::before{
  content:"";display:inline-block;vertical-align:-.5rem;margin-right:1.2rem;
  width:2.8rem;height:2.8rem;border-radius:50%;
  background:var(--brand) no-repeat center/1.3rem 1.3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}

/* 섹션 안의 가로 구분선 — 표를 뺀 자리에 선 하나만 남긴다 */
.sec-rule{border:0;border-top:1px solid var(--line);margin:var(--s8) 0 var(--s6)}
.sec-rule + .t-note{margin-top:0}
/* 한 줄 마무리 문장 앞의 화살표 원 — c-box.closing 과 같은 기호를 쓴다 */
.t-note.arrow::before{content:"";display:inline-block;vertical-align:-.5rem;margin-right:1.2rem;
  width:2.8rem;height:2.8rem;border-radius:50%;
  background:var(--brand) no-repeat center/1.3rem 1.3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
/* 인용 아래 한 줄은 구분선에서 충분히 띄운다 */
.c-quote + .t-note{margin-top:var(--s7)}

/* ── 원장 코멘트 띠 — 가로 사진 위에 흰 글씨를 얹는다 ─────────
   사진이 밝은 부분에서도 글이 읽히도록 어두운 막을 한 겹 덮는다.
   .c-figcards 의 자막과 같은 방식이다. */
.c-qband{position:relative;margin:var(--s7) 0 0;border-radius:2rem;overflow:hidden}
.c-qband>img{display:block;width:100%;height:100%;aspect-ratio:1200/440;object-fit:cover}
.c-qband figcaption{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.4rem;padding:4rem 3rem;text-align:center;
  background:linear-gradient(rgba(14,24,32,.58),rgba(14,24,32,.72))}
.c-qband b{display:block;font-size:2.8rem;font-weight:700;color:#fff;
  letter-spacing:-.03em;line-height:1.4}
.c-qband p{margin:0;font-size:2rem;line-height:1.85;color:rgba(255,255,255,.94)}
.c-qband cite{display:block;margin-top:.6rem;font-style:normal;
  font-size:1.6rem;color:rgba(255,255,255,.74);letter-spacing:-.02em}
/* 코멘트 띠 뒤에 바로 카드가 오면 간격을 준다 */
.c-qband + .c-cards{margin-top:var(--s7)}
@media(max-width:760px){
  .c-qband>img{aspect-ratio:4/5}
  .c-qband figcaption{padding:3rem 2rem;gap:1rem}
  .c-qband b{font-size:2.2rem}
  .c-qband p{font-size:1.7rem;line-height:1.75}
}
/* 화살표를 빼는 변형 */
.c-box.no-arrow>p:first-child::before{display:none}
/* 결론 + 예외 변형 — 결론만 화살표와 큰 글씨를 갖고, 예외는 잔글씨 각주로 내린다.
   기획안 1367행 「도식 밖으로 뺀 것 2건」은 성격이 다르므로 위계를 나눈다. */
.c-box.closing .k{margin:0}
.c-box.closing .k b{display:inline;font-size:2.6rem;font-weight:700;color:#000;letter-spacing:-.03em}
.c-box.closing .k span{display:block;max-width:76rem;margin:1.4rem auto 0;
  font-size:var(--f-desc);font-weight:400;color:var(--ink);line-height:var(--lh-desc)}
.c-box.closing .note{max-width:72rem;margin:3.4rem auto 0;padding-top:2.4rem;
  border-top:1px solid var(--line2);font-size:1.6rem;color:var(--ink3);line-height:1.8}
.c-box.closing .note.lg{font-size:1.9rem}   /* 신경치료 「수복 방법은…」 한 줄에만 붙였다 */
.c-box p{margin:0 0 var(--s2)}
.c-box p:last-child{margin:0}
.c-box b{color:var(--ink)}
/* 2열짜리 표라 1000px 를 다 쓰면 가운데가 비어 보인다. 폭을 좁혀 가운데로. */
/* 비용·범위 표 — 사이트의 다른 표(.i-tw)와 같은 결로 맞춘다 */
.c-box.plain{background:#fff;border:1px solid var(--line);border-radius:1.2rem;
  padding:0;overflow:hidden;max-width:58rem;margin-left:auto;margin-right:auto}
.c-box.plain .h{padding:1.7rem 2.4rem 1.5rem;background:#555;text-align:center}
.c-box.plain .h b{font-size:var(--f4);letter-spacing:-.02em;color:#fff}
.c-box.plain .h span{display:block;font-size:var(--f1);color:rgba(255,255,255,.78);margin-top:.4rem}
.c-box.plain .f{padding:1.6rem 2.4rem 1.8rem;border-top:1px solid var(--line2);
  font-size:var(--f2);color:var(--ink3);line-height:1.7}
.c-box.plain .f.ctr{text-align:center}   /* 사랑니 보험 상자 — 안내 문장과 링크를 가운데로 */
.c-box.plain .f a.go-c{display:block;margin-top:.6rem}
.c-box.plain table{width:100%;border-collapse:collapse;font-size:var(--f3)}
.c-box.plain td{padding:1.5rem 2.4rem;border-bottom:1px solid var(--line2);color:var(--ink2)}
.c-box.plain tr:last-child td{border-bottom:0}
.c-box.plain td:first-child{color:var(--ink);font-weight:600}
/* 값 칸을 한 줄로 묶어 두면(nowrap) 가장 긴 값이 오른쪽 칸 폭을 먼저 가져간다.
   사진과 2단으로 놓인 사랑니 보험 상자에서는 항목 칸에 123px 밖에 남지 않아
   「봉합과 / 실밥 / 제거」처럼 항목이 세 줄로 접혔다(대표 지적 2026-09-29).
   값 쪽 줄바꿈을 풀고, 낱말 중간에서는 끊기지 않게 한다 */
.c-box.plain td:last-child{text-align:right;font-weight:700;color:var(--ink);
  white-space:normal;word-break:keep-all}

/* 비용 2단 — 좌 스플린트 사진 / 우 비용표 (높이 맞춤) */
.cost-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3rem;align-items:stretch;margin-top:var(--s7)}
.cost-row .cost-fig{width:100%;height:100%;min-height:100%;object-fit:cover;display:block;border-radius:1.2rem}
.cost-row .c-box.plain{max-width:none;margin:0;display:flex;flex-direction:column}
.cost-row .c-box.plain table{flex:1 1 auto}
@media(max-width:900px){
  .cost-row{grid-template-columns:minmax(0,1fr);gap:2rem}
  .cost-row .cost-fig{height:auto;min-height:0;aspect-ratio:568/368}
}

/* 비급여 수가표 — 원내 게시 엑셀을 그대로 옮긴 한 장짜리 표(2026-09-30).
   분류마다 상자를 따로 세워 2단으로 놓았더니 PC 에서 읽는 줄기가 좌우로 끊겼다
   (대표 지적 2026-09-30 「표가 중간에 너무 끊겨」). 엑셀처럼 한 장으로 잇는다.

   한 벌의 마크업으로 두 모양을 낸다 — 같은 글을 두 번 적지 않기 위해서다.
     PC   왼쪽 th.cat(rowspan 으로 병합한 분류 칸) + 종류 + 진료비용, 3단
     폰   th.cat 과 머리글을 감추면 행마다 칸이 둘만 남아 표가 저절로 2단이 된다.
          분류는 tr.mo-head(띠)가 대신 알린다 — 폰에서 쓰던 상자 머리와 같은 모양.

   ⚠️ 선택자는 .c-box.plain.price-sheet 로 적는다. .price-sheet 한 클래스로는
      .c-box.plain(클래스 둘)의 max-width·td 규칙을 못 이긴다. */
/* 폭 — 본문 전체(1200)를 다 쓰면 글자 사이가 너무 벌어진다(대표 지적 2026-09-30).
   90rem 이면 가장 긴 종류(「구치부 2면[그루브따라 이어지면/이어지지않으면]」)가
   아직 한 줄에 들어간다. 더 줄이면 그 줄부터 접힌다. */
.c-box.plain.price-sheet{max-width:90rem;margin-top:var(--s7)}
.price-sheet table{table-layout:fixed;font-size:var(--f2)}
.price-sheet col.c1{width:15%}
.price-sheet col.c2{width:54%}
.price-sheet col.c3{width:31%}
.price-sheet thead th{padding:1.4rem 2rem;background:#efefef;border-bottom:1px solid var(--line);
  font-weight:700;color:var(--ink)}
/* 머리글은 아래 칸과 같은 쪽으로 — 분류는 가운데, 종류는 왼쪽, 금액은 오른쪽 */
.price-sheet thead th:nth-child(2){text-align:left;padding-left:2rem}
.price-sheet thead th:last-child{text-align:right}
/* 종류 칸 — 기본. .c-box.plain 이 첫 칸을 굵게, 마지막 칸을 오른쪽으로 보내는데
   이 표는 행마다 칸 수가 달라(분류 칸 · 병합된 금액 칸) 그 규칙이 엉뚱한 칸을 집는다.
   그래서 전부 되돌린 뒤 금액 칸만 다시 집는다. */
.c-box.plain.price-sheet td{padding:1.4rem 2rem;text-align:left;font-weight:500;color:var(--ink2);
  white-space:normal;word-break:keep-all;vertical-align:middle}
/* 금액 칸 = 같은 행에서 두 번째 칸. 금액이 위 행과 병합돼 칸이 하나뿐인 행
   (엑스레이복사본 · 통원확인서)은 여기 걸리지 않아 종류 그대로 남는다. */
.c-box.plain.price-sheet td + td{text-align:right;font-weight:700;color:var(--ink)}
/* 분류 칸 — 세로로 병합된 칸이라 가운데에 세운다 */
.price-sheet th.cat{padding:1.4rem 1.6rem;border-bottom:1px solid var(--line2);
  border-right:1px solid var(--line2);background:#fafafa;
  font-weight:700;color:var(--ink);text-align:center;vertical-align:middle;word-break:keep-all}
/* 🔴 .c-box.plain tr:last-child td{border-bottom:0} 이 **묶음마다** 걸린다.
   tbody 가 16개라 분류가 바뀌는 자리마다 가로줄이 통째로 빠졌다
   (대표 지적 2026-09-30 「항목이 끝나는 부분에 라인이 없어」). 되살린 뒤,
   표 맨 끝 한 줄만 다시 없앤다 — 상자 테두리와 겹쳐 두 줄로 보이기 때문이다. */
.c-box.plain.price-sheet tbody > tr:last-child > td{border-bottom:1px solid var(--line2)}
.c-box.plain.price-sheet tbody:last-child > tr:last-child > th,
.c-box.plain.price-sheet tbody:last-child > tr:last-child > td{border-bottom:0}
/* 엑셀에서 칸을 합쳐 적어 둔 단서 한 줄(「* 600만원이상 플리퍼 free *」 등) */
.c-box.plain.price-sheet tr.note td{text-align:center;font-weight:500;color:var(--ink3)}
.price-sheet tr.mo-head{display:none}

@media(max-width:900px){
  /* 폰 — 분류 칸과 머리글을 걷으면 행이 둘씩만 남아 표가 2단으로 선다 */
  .price-sheet thead,.price-sheet th.cat{display:none}
  .price-sheet tr.mo-head{display:table-row}
  /* 표 머리(.h)도 같은 #555 라 첫 분류 띠가 그대로 이어 붙어 한 덩어리로 보였다.
     흰 실선 한 줄로 가른다 — 흰 행 위에 올 때는 보이지 않는다 */
  .price-sheet tr.mo-head th{padding:1.4rem 1.6rem;background:#555;
    border-top:1px solid rgba(255,255,255,.3);
    font-size:var(--f3);font-weight:700;color:#fff;text-align:center}
  .c-box.plain.price-sheet td{padding:1.3rem 1.6rem}
  /* 🔴 colgroup 의 14/56/30% 는 분류 칸을 감춰도 그대로 남는다. 그 탓에
     분류 띠(두 칸 합침)가 표 폭의 70% 에서 끊기고, 종류 칸이 좁아 글자가
     세로로 쪼개졌다(대표 지적 2026-09-30). 폰에서는 너비를 글자에 맡긴다.
     띠 자체도 세 칸을 덮게 고쳤다(pricing.html colspan=3). */
  .price-sheet col.c1,.price-sheet col.c2,.price-sheet col.c3{width:auto}
  .price-sheet table{table-layout:auto}
}

/* ---- FAQ ----
   tmjdoctor .faq_list 실측:
   컨테이너 #f9f9f9 · 1px #eaeaea · 각짐 · padding 80px 50px
   Q 26px #333 원 / A 26px 포인트 원 · 질문 20px w700 · 답 18px w300
   우측 +/− 토글 · 항목 사이 1px 실선 */
.faq{background:#f9f9f9;border:1px solid #eaeaea;border-radius:0;overflow:visible;
  padding:8rem 5rem;margin-top:var(--s7)}
.faq details{border-bottom:1px solid #acacac}
.faq details:first-of-type{border-top:1px solid #acacac}
summary{list-style:none;cursor:pointer;padding:2.5rem 2rem;font-size:2rem;font-weight:700;
  color:#444;display:flex;gap:1rem;align-items:center;line-height:1.4}
summary::-webkit-details-marker{display:none}
summary .q{flex:0 0 2.6rem;width:2.6rem;height:2.6rem;border-radius:50%;
  background:#333;color:#fff;font-size:1.8rem;line-height:2.6rem;text-align:center;font-weight:600}
/* 우측 +/− */
/* ★ 치료 사례의 .cv(1844행 max-width·margin:0 auto·padding-top)와 이름이 겹친다.
   margin-left 만 덮으면 margin-right:auto 가 남아 아이콘이 가운데로 밀린다.
   오른쪽 끝에 붙이려면 상속값을 모두 되돌려야 한다 */
summary .cv{margin:0 0 0 auto;padding:0;max-width:none;
  flex:0 0 auto;width:2.2rem;height:2.6rem;color:#444;
  position:relative;transition:.2s}
summary .cv svg{display:none}
summary .cv::before{content:"+";position:absolute;inset:0;text-align:center;
  font-size:2.4rem;font-weight:300;line-height:2.6rem}
details[open] summary .cv::before{content:"−"}
.ans{position:relative;margin:0;padding:0 2rem 2.5rem 5.6rem;
  font-size:1.8rem;font-weight:300;color:#000;line-height:1.8}
.ans::before{content:"A";position:absolute;left:2rem;top:0;width:2.6rem;height:2.6rem;
  border-radius:50%;background:var(--brand);color:#fff;font-size:1.8rem;line-height:2.6rem;
  text-align:center;font-weight:600}
@media(max-width:768px){
  .faq{padding:3rem 2rem}
  summary{padding:1.8rem .6rem;font-size:1.7rem;gap:1rem}
  .ans{padding:0 .6rem 1.8rem 4rem;font-size:1.6rem}
  .ans::before{left:.6rem}
}

/* ---- meta / footer ---- */
.author{display:flex;gap:14px;align-items:center;background:var(--paper);border:1px solid var(--line);
  border-radius:0;padding:14px var(--s4);margin:var(--s7) 0 var(--s7)}
.author .photo{flex:0 0 6.4rem;height:6.4rem;border-radius:50%;padding:4px}
.author .t{font-size:var(--f2);color:var(--ink2);line-height:1.6}
.author .t b{display:block;color:var(--ink);font-size:var(--f4)}
.author a{text-decoration:none}
/* 최종 수정일 — 작성자 카드 오른쪽 끝. 「누가 / 언제」를 한 덩어리로 읽힌다 */
.author .updated{margin:0 0 0 auto;flex:0 0 auto;text-align:right;
  font-size:var(--f1);color:var(--ink3);line-height:1.5}
.author .updated time{color:var(--ink2);font-weight:600}
@media(max-width:640px){
  .author{flex-wrap:wrap}
  .author .updated{width:100%;margin:1.2rem 0 0;text-align:left}
  .author .updated br{display:none}
  .author .updated time{margin-left:.6rem}
}
/* B16 CTA — 오시는 길 목록과 같은 결. 검은 원 아이콘 + 얇은 구분선 + 버튼 2개 */
.cta{background:none;border:0;border-radius:0;padding:0;color:inherit;text-align:left;
  margin:0 0 var(--s8)}
/* 위쪽 라인은 긋지 않는다 — 오시는 길 목록에서 그대로 이어지는 것처럼 보이게 */
.cta-in{display:flex;align-items:center;gap:2rem;padding:2.8rem .4rem;
  border-bottom:1px solid #e5e5e5}
.cta .ic{flex:0 0 4.8rem;width:4.8rem;height:4.8rem;border-radius:50%;
  background:#232323;display:flex;align-items:center;justify-content:center}
.cta .ic svg{width:2.4rem;height:2.4rem;stroke:#fff;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cta .tx{flex:1 1 auto;min-width:0}
.cta b{display:block;font-size:1.8rem;font-weight:700;color:var(--ink-strong);letter-spacing:-.03em}
.cta p{margin:.6rem 0 0;font-size:1.6rem;color:var(--ink3);line-height:1.6}
.cta .row{display:flex;gap:1rem;flex:0 0 auto}
.cta .row .a-btn{padding:1.5rem 2.8rem;font-size:1.6rem;white-space:nowrap}
@media(max-width:760px){
  .cta-in{flex-wrap:wrap;gap:1.6rem;padding:2.4rem .2rem}
  .cta .row{width:100%}
  .cta .row .a-btn{flex:1 1 0;padding:1.5rem 1rem}
}

/* ── 하단 정보 2줄 — 주소·진료시간 / 전화·예약 ── */
.foot-info{border-top:1px solid #e5e5e5;margin-top:var(--s8)}
.fi-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3rem;border-bottom:1px solid #e5e5e5;align-items:center}
.fi-row .loc-item{border-bottom:0;padding:2.6rem .4rem}
.fi-row .loc-item p{margin-top:.6rem}
.fi-row .loc-item em{font-style:normal;color:var(--brand)}
.fi-cta{display:flex;gap:1rem;justify-content:flex-end;padding:2.6rem .4rem}
.fi-cta .a-btn{padding:1.5rem 3rem;font-size:1.6rem;white-space:nowrap}
/* 작성자 줄 — 박스 없이 정보 목록의 첫 줄로 들어간다 */
.fi-row.author-row{grid-template-columns:minmax(0,1fr) auto}
.fi-row .ic.ph{padding:0;background:none;object-fit:cover}
.fi-row.author-row .updated{margin:0;padding:2.6rem 0;text-align:right;
  font-size:1.5rem;color:var(--ink3);white-space:nowrap}
.fi-row.author-row .updated time{color:var(--ink2);font-weight:600;margin-left:.6rem}
@media(max-width:760px){
  .fi-row.author-row{grid-template-columns:minmax(0,1fr)}
  .fi-row.author-row .updated{text-align:left;padding:0 .2rem 2rem}
}
@media(max-width:760px){
  .fi-row{grid-template-columns:minmax(0,1fr);gap:0}
  .fi-row>*+*{border-top:1px solid #f0f0f0}
  .fi-cta{justify-content:stretch;padding:2rem .2rem}
  .fi-cta .a-btn{flex:1 1 0;padding:1.5rem 1rem}
}
/* 레퍼런스 tmjdoctor footer 실측:
   .inwrap 1400 · padding 20px 0 / .copy_top flex space-between · padding 10px 0 · border-bottom 2px #666
   링크 16px w700 #000 · gap 10px / address 15px·lh24 #595959 · padding 17px 0 · ls -.04em */
/* 예전 흰 푸터 규칙은 마크업과 함께 걷어냈다. 새 규칙은 파일 끝에 있다. */
/* ── 오른쪽 퀵 메뉴 .quick ─────────────────────────────────
   대표님 요청(2026-09-21) — 「맨 아래 전화 · 오시는 길은 있지만 중간에 예약 버튼이
   필요하다」. 11dent 처럼 화면 오른쪽에 붙여 두고 전화 · 네이버예약 · 진료안내
   세 가지를 늘 띄운다. 본문을 따라 내려오므로 어느 섹션에서 멈추든 손에 닿는다.

   보이는 구간 — 1280 이상. 본문 폭이 1400 이라 그 아래에서는 칸이 글 위로 올라탄다.
   모바일은 이미 아래 .mbar 가 같은 일을 하고 있어 겹치지 않게 서로 비킨다. */
.quick{position:fixed;right:1.6rem;top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:.8rem}
.quick a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  width:8rem;height:8rem;border-radius:1.6rem;background:#fff;border:1px solid var(--line);
  color:var(--ink);text-decoration:none;box-shadow:0 .4rem 1.8rem rgba(16,36,56,.10);
  transition:border-color .15s,color .15s,transform .15s}
.quick a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-.2rem)}
.quick svg{width:2.4rem;height:2.4rem;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.quick b{font-size:1.3rem;font-weight:700;letter-spacing:-.04em;line-height:1}
/* 예약은 이 묶음에서 유일하게 색을 채운다 — 하나만 눈에 걸리게 */
.quick a.p{background:var(--brand);border-color:var(--brand);color:#fff}
.quick a.p:hover{background:var(--brand2);border-color:var(--brand2);color:#fff}
@media(max-width:1279px){.quick{display:none}}

/* 모바일 하단 바 — 아이콘 + 칸마다 다른 색.
   2026-09-21 대표님 지적: 「CTA 버튼 색상이 전부 흰색이라 구분도 없고 아이콘도 없다」.
   글자만 있던 세 칸을 오른쪽 퀵 메뉴와 같은 네 가지로 맞추고, 같은 스프라이트 아이콘을 쓴다.
   칸마다 색을 달리 둬서 손가락이 어디로 갈지 눈으로 먼저 고르게 한다.
   예약은 네이버 초록(#03C75A) — 다른 데서 눌러 본 그 색이라 설명 없이 알아본다. */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
  background:#fff;padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(100%);transition:transform .28s ease}
/* 일레븐처럼 첫 화면에서는 숨어 있다가 스크롤을 내리면 올라온다.
   .is-up 은 site.js 가 붙인다 — 배너가 첫 화면을 온전히 쓰게 두려는 것이다. */
.mbar.is-up{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.mbar{transition:none}}
.mbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  padding:1.1rem 0 1.2rem;text-decoration:none;color:#fff;background:var(--m-bg)}
.mbar svg{width:2.2rem;height:2.2rem;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.mbar b{font-size:1.3rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.mbar .m-tel{--m-bg:#16232a}
.mbar .m-book{--m-bg:#03C75A}
.mbar .m-guide{--m-bg:#0D6FB8}
.mbar .m-map{--m-bg:#55677A}
@media(min-width:940px){.mbar{display:none}body{padding-bottom:0}}

/* ---- review ---- */
button.rev{position:fixed;right:14px;bottom:76px;z-index:60;background:#16232a;color:#fff;border:0;
  border-radius:var(--pill);padding:11px 17px;font-size:var(--f2);font-weight:700;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.25);font-family:inherit}
@media(min-width:940px){button.rev{bottom:20px}}
.blk{position:relative}
/* 본문 맨 끝 관련 페이지 카드 — 앞 섹션과 푸터 사이 여백을 같게 둔다 */
.sp_main > div.blk:last-child{padding:10rem 0}
@media(max-width:768px){.sp_main > div.blk:last-child{padding:6rem 0}}
.blk>.tag{display:none}
body.review .blk{outline:1.5px dashed #c9a962;outline-offset:12px;margin-bottom:var(--s7)}
body.review .blk>.tag{display:inline-block;position:absolute;top:-32px;left:-10px;background:#8a6100;color:#fff;
  font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:4px;white-space:nowrap}
.hold{display:none;background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:var(--r);
  padding:12px 14px;margin:var(--s3) 0;font-size:var(--f2);color:var(--amber);line-height:1.7}
body.review .hold{display:block}
.hold b{color:#444}

/* ============================================================
   모바일 — 11dent 의 768 이하 스케일을 그대로 따른다
   (home/css/common.css @media(max-width:768px) #sub main)
   ============================================================ */
@media (max-width:768px){
  /* 섹션 본문 · 칼럼 카드 제목 — 폰에서는 한 단계 더 내린다 (11dent 모바일 분포) */
  .el-two-tx p{font-size:1.5rem;font-weight:500;line-height:1.75}
  .el-two-tx .el-cred{margin:-.6rem 0 1.6rem;font-size:1.5rem;line-height:1.6}
  .el-two-tx h2{font-size:2.4rem}
  .c-cards.boxed.flat>.card:not(.link) b{font-size:1.6rem;line-height:1.4}
  .c-cards.boxed.flat>.card:not(.link) span:not(.cx-tag){font-size:1.3rem}
  /* 푸터 전체 메뉴는 폰에서 감춘다 — 상단 햄버거로 같은 메뉴를 연다 */
  .fmap{display:none}
  /* ★ 개별 규칙이 아니라 토큰을 갈아끼운다 — 컴포넌트가 전부 따라온다.
       11dent 모바일 분포: 14(최다) · 16 · 18 · 20 · 24 */
  :root{
    /* 11dent 모바일 실측(본문 14px)에 맞춰 한 단계 내렸다 */
    --f1:1.2rem; --f2:1.3rem; --f3:1.4rem; --f4:1.6rem; --f5:1.8rem; --f6:2.2rem;
    --f-eyebrow:1.3rem; --f-pull:1.8rem;
    --sec-top:5rem; --sec-gap:3rem;
    --r:1rem; --r-lg:1.6rem;
  }
  body{line-height:1.65}
  .wrap{margin:0 1.5rem;padding:0}
  .hrow{padding:1.2rem 1.5rem;gap:1.2rem}
  .logo{font-size:1.7rem}

  .hero{padding:4rem 0 0;gap:2.4rem}
  h1{font-size:2.4rem;letter-spacing:-.1em}
  .hero .sub{font-size:1.5rem}
  .eyebrow{width:13rem;height:13rem;font-size:1.8rem;margin-bottom:2rem}

  /* 11dent: .subTit dot 2.5rem, h2 2.2rem ls -.12em */
  .snum::before{width:2.5rem;height:2.5rem;margin:0 auto 2.5rem}
  h2{font-size:2.2rem;margin-top:2rem;letter-spacing:-.12em}
  .lead{margin-top:1.6rem}
  .pull{margin-top:4rem}

  .card{padding:2rem 1.8rem}
  .c-check label{padding:1.6rem 1.8rem;gap:1.2rem}
  .c-check .box{flex:0 0 2.2rem;height:2.2rem}
  .c-table th,.c-table td{padding:1.3rem 1.5rem}
  summary{padding:1.6rem}
  .ans{padding:0 1.6rem 1.6rem 4rem}
  .c-figure,.c-quote,.c-flow{padding:2rem}
  .flex{gap:1.4rem;flex-direction:column}
}

/* ---- 실사진이 들어간 자리 ----
   .photo 는 원래 자리표시용 박스다. <img class="photo"> 로 바뀌면
   점선·배경·패딩을 걷어내고 비율만 유지한 채 꽉 채운다. */
img.photo{
  display:block;width:100%;height:100%;padding:0;
  object-fit:cover;border:0;background:none;
}
/* ★ img.photo 의 height:100% 가 카드를 꽉 채워 아래 설명(.in)이 잘리고 있었다.
   비율로만 크기를 잡는다. */
/* 기본은 사진만. 마우스를 올리면 제목·설명·경로가 덮개로 올라온다. */
.card.link{position:relative;overflow:hidden;border:0;border-radius:var(--r);line-height:0}
.card.link img.photo{height:auto;width:100%;aspect-ratio:16/9;object-fit:cover;border:0;border-radius:0}
.card.link .go{position:absolute;inset:0;line-height:1.5;
  display:grid;align-content:center;justify-items:center;gap:.8rem;
  background:rgba(20,20,20,.82);color:#fff;opacity:0;transition:opacity .22s;
  text-align:center;padding:1.6rem}
.card.link:hover .go,.card.link:focus-visible .go{opacity:1}
/* 덮개에는 페이지명만 — 흰 글씨로 세운다.
   .card b{color:var(--ink)} 가 b 에 직접 걸려 있어 부모의 흰색을 물려받지 못하고
   어두운 덮개 위에서 먹색으로 묻혀 있었다. 색을 여기서 직접 준다.
   설명 한 줄은 덮개에서 빼고, 사진 아래에 드러나는 .named 카드에서만 보인다(2290행). */
.card.link .go b{font-size:var(--f4);font-weight:700;letter-spacing:-.03em;color:#fff}
.card.link .go>span{display:none;font-size:var(--f2);color:rgba(255,255,255,.9)}
.card.link .go em{font-style:normal;font-family:'Barlow',var(--sans);
  font-size:var(--f1);color:rgba(255,255,255,.75)}

/* 헤더 로고 이미지 */
/* v2: 로고 높이는 11dent 실측 3.4rem */
.logo img{display:block;height:3.4rem;width:auto}
@media(max-width:768px){.logo img{height:3.4rem}}

/* 2단 레이아웃 안에서는 본문 폭이 좁아지므로 산문 제한을 풀어준다 */
.sp_main .lead,.sp_main .c-answer p,.sp_main .ans,.sp_main .t-note,.sp_main>p{max-width:none}

/* 헤더 로고 — 아이콘만 */
/* v2: 헤더 padding 이 여백을 맡는다 */
.logo{padding:0;display:flex;align-items:center;height:6rem}
.logo img{display:block;height:3.4rem;width:auto}
@media(max-width:768px){.logo img{height:3.6rem}}

/* 본문 히어로 큰 제목 (page_title 아래 컨텐츠 영역) */
.hero_title{font-family:var(--sans);font-size:clamp(2.8rem,3.4vw,4rem);font-weight:700;
  line-height:1.32;letter-spacing:-.018em;color:var(--ink);margin:0 0 var(--s4)}
.hero_title em{font-style:normal;color:var(--brand);font-weight:700}
.hero_title em{font-style:normal;color:var(--brand)}

/* ── site-v2 표시 ───────────────────────────────────────────
   v1 과 v2 를 오가며 보기 때문에 지금 보는 판을 화면에 적어 둔다.
   개편이 끝나 v2 가 확정되면 이 블록과 각 페이지의 .ver-badge 를 지운다. */
.ver-badge{position:fixed;left:14px;bottom:14px;z-index:60;
  background:#7a3cff;color:#fff;border-radius:100px;padding:.6rem 1.4rem;
  font-size:1.2rem;font-weight:700;letter-spacing:.04em;pointer-events:none;
  box-shadow:0 .4rem 1.2rem rgba(0,0,0,.25)}

/* ══════════════════════════════════════════════════════════════
   병원소개 계열 페이지 — 의료진 소개 · 장비와 시설 · 진료 안내 · 오시는 길
   수령한 시안의 내용과 배치는 그대로 두고, 색·글자·여백만 이 사이트 값으로 바꾼다.
   시안의 teal/navy 팔레트는 쓰지 않는다. 포인트는 --brand 한 가지다.
   모두 main.p-info 안에서만 걸리게 묶어 다른 페이지로 새지 않게 한다.
   ══════════════════════════════════════════════════════════════ */

/* 페이지 머리와 섹션 머리는 사이트 공통 골격을 그대로 쓴다.
   상단 배너(.sub-kv)가 H1 을, .sp_main .shead 가 섹션 제목을 맡는다.
   여기서 따로 잡지 않는다 — 다른 서브페이지와 리듬이 어긋나기 때문이다. */

/* 사진 자리표시 — 실사진이 들어오면 img 로 바꾼다 */
.p-info .ph-box{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.8rem;min-height:22rem;padding:2rem;border:1px dashed #c9d4da;border-radius:var(--r);
  background:var(--soft2);color:var(--brand);font-size:1.7rem;font-weight:700;text-align:center}
.p-info .ph-box small{font-size:1.4rem;font-weight:500;color:var(--ink3)}

/* ── 의료진 소개 ────────────────────────────────────────── */
/* 페이지에 들어오자마자 읽히는 한 줄. 배너 바로 아래에 둔다.
   11dent 실측 — h2 · 50px Noto Serif KR · #333 · line-height 65/50 · margin-top 30px.
   30px 은 제목 자체의 여백이라 위쪽 숨통은 감싼 상자가 맡는다. */
.p-info .claim-lead{padding-top:9rem}
/* 페이지 첫 제목 위에도 섹션 제목과 같은 파란 점(맥박 · 번지는 고리) */
.p-info .claim-lead::before{content:"";display:block;width:4.4rem;height:4.4rem;margin:0 auto 4rem;
  border-radius:10rem;background:var(--brand);animation:dot-pulse 2s infinite,dot-ring 2s infinite}
@media(prefers-reduced-motion:reduce){.p-info .claim-lead::before{animation:none}}
.p-info .page-claim{max-width:120rem;margin:3rem auto 0;font-family:var(--serif);
  font-size:5rem;font-weight:500;line-height:1.3;letter-spacing:normal;
  color:#333;text-align:center}

/* 왼쪽에 이름과 약력, 오른쪽에 원장 사진. 수치는 레퍼런스 실측을 따랐다 */
.p-info .doc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);
  /* ★ 사진이 글 칸보다 길다. 가운데로 두면 약력 끝줄이 사진 아래보다 위로 떠서
     두 칸의 아래 끝이 어긋난다. 두 칸 모두 아래에 맞춘다. */
  gap:4rem;align-items:end;
  /* 앞 직답 블록과 사이는 섹션 하나만큼 벌린다 — 사이트 리듬(--sec-top)과 같다 */
  padding-top:var(--sec-top)}
.p-info .doc .tx{padding-left:5rem}
/* 원장 사진은 배경이 없는 누끼다. 상자를 두르지 않고 그대로 올린다.
   ★ 사진이 글 칸보다 길다. align-items:center 로 두면 아래로 삐져나와
   약력 끝선과 어긋난다. 이 칸만 아래에 맞춰 사진을 위로 올린다. */
.p-info .doc .fig{align-self:end}
.p-info .doc .fig img{display:block;width:100%;max-width:66rem;height:auto;margin:0 0 0 auto}

/* 이름과 진료분야 — 11dent 실측
   h2  50px Noto Serif KR · #333 · padding-bottom 40px
   span 30px Noto Serif KR · #333 · 줄상자 65px */
.p-info .doc .dr{margin:0;padding:0 0 4rem;font-family:var(--serif);font-size:5rem;
  font-weight:400;line-height:1.3;letter-spacing:normal;color:#333}
.p-info .doc .dr span{display:block;font-size:3rem;line-height:2.17;color:#333}

/* 이름과 약력을 가르는 줄. 왼쪽 끝에 점을 얹는다.
   점은 섹션 머리에 쓰는 그 점이다 — 같은 크기·색에 같은 맥박과 고리를 준다.
   dot-pulse 가 transform 을 쓰므로 자리는 transform 이 아니라 left/top 으로 잡는다.
   클래스명이 .rule 이면 위쪽 .rule{display:none} 에 먹힌다 — 이름을 따로 둔다. */
/* ★ 줄이 왼쪽 칸에서 끊기면 이름과 사진이 따로 놀아 보인다.
   오른쪽으로 칸 사이 여백(4rem)을 건너 사진 안쪽까지 뺀다.
   사진이 배경 없는 누끼이고 DOM 상 뒤에 있어, 줄이 원장 뒤로 지나간다. */
.p-info .doc .dr-line{position:relative;height:1px;margin:0 -18rem 0 -3rem;
  background:var(--line)}
.p-info .doc .dr-line::after{content:"";position:absolute;left:-2.2rem;top:calc(50% - 2.2rem);
  width:4.4rem;height:4.4rem;border-radius:10rem;background:var(--brand);
  animation:dot-pulse 2s infinite,dot-ring 2s infinite}
@media(prefers-reduced-motion:reduce){.p-info .doc .dr-line::after{animation:none}}

/* 약력 — 20px NanumSquareNeo · 줄상자 40px · 줄 위 여백 50px.
   레퍼런스는 #666 이지만 「본문은 #444 보다 옅게 쓰지 않는다」는
   v2 원칙을 따라 --ink2(#444)로 올린다. */
.p-info .cvlist{margin:5rem 0 0;padding:0;list-style:none;
  font-family:var(--sans);font-size:2rem;font-weight:700;line-height:2;color:var(--ink2)}
.p-info .cvlist li{margin:0}
.p-info .cvlist li::before{content:"- "}
/* 약력 줄에 붙는 바깥 링크 — 줄을 새로 만들지 않고 뒤에 붙인다.
   본문보다 작고 밑줄로만 링크임을 알린다(약력이 굵은 글씨라 색까지 바꾸면 줄이 시끄럽다) */
.p-info .cvlist .cv-link{margin-left:1rem;font-size:1.6rem;font-weight:700;
  color:var(--brand);text-decoration:underline;text-underline-offset:.3rem;
  white-space:nowrap}
.p-info .cvlist .cv-link:hover{color:var(--ink-strong)}

/* 인사말 — 긴 산문이라 폭을 좁혀 읽기 좋게 둔다 */
.p-info .greet{max-width:88rem;margin:0 auto}
.p-info .greet .hi{margin:0 0 3.4rem;font-family:var(--serif);font-size:var(--f6);
  font-weight:500;line-height:1.5;letter-spacing:-.05em;color:var(--ink)}
.p-info .greet p{margin:0 0 2.6rem;font-size:var(--f-desc);line-height:var(--lh-desc);
  color:var(--ink2)}
.p-info .greet p b{font-weight:700;color:var(--brand2)}
.p-info .greet .sign{margin-top:4.8rem;padding-top:3rem;border-top:1px solid var(--line);
  text-align:right;font-size:var(--f2);color:var(--ink3)}
.p-info .greet .sign b{font-size:var(--f4);color:var(--ink-strong)}

/* 인사말 아래 근거 타일 — 사진과 글을 2×2 로 엇갈려 놓는다(일레븐 배치).
   색면은 쓰지 않는다. v2 는 배경을 흰색으로 두고 테두리로만 면을 나눈다. */
.p-info .gtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.4rem;margin-top:8rem}
/* 마지막 섹션과 하단 블록(관련 진료 카드 · CTA) 사이 — 섹션 리듬만큼 띄운다.
   안 주면 본문이 카드에 바로 붙는다. */
/* .p-info 도 다른 페이지와 같은 .sp_main .shead 여백만 쓴다.
   예전에는 여기서 --sec-top 을 한 겹 더 얹어 간격이 두 배였다. */
.p-info .gt{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.p-info .gt.fig img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
/* 글 타일에는 색면을 깐다 — 사진과 번갈아 놓이는 2x2 교차 배치라
   면이 들어가야 「사진 · 글 · 글 · 사진」의 리듬이 눈에 읽힌다.
   두 타일의 색은 서로 다르게 두되, 흰 글씨 대비가 확보되는 값만 쓴다. */
.p-info .gt.tx{display:flex;flex-direction:column;justify-content:center;
  padding:4.8rem;border:0}
.p-info .gtiles{--gt-a:#1AA5B2;--gt-b:#3A87C4}   /* 레퍼런스 실측 — 청록 · 파랑 */
.p-info .gtiles>.gt.tx:nth-child(2){background:var(--gt-a)}
.p-info .gtiles>.gt.tx:nth-child(3){background:var(--gt-b)}
.p-info .gt.tx h3{margin:0 0 2.6rem;font-family:var(--serif);font-size:3.5rem;
  font-weight:400;line-height:1.4;letter-spacing:-.05em;color:#fff}
/* 면이 밝은 편이라 본문까지 투명하게 두면 읽기 어렵다 — 흰색을 그대로 쓴다 */
.p-info .gt.tx p{margin:0 0 1.8rem;font-size:1.8rem;line-height:1.85;color:#fff}
.p-info .gt.tx p b{color:#fff}
.p-info .gt.tx p:last-child{margin-bottom:0}
@media(max-width:768px){
  .p-info .gtiles{grid-template-columns:minmax(0,1fr);gap:1.6rem;margin-top:5rem}
  /* 좁은 화면에서는 사진 → 글 순서가 어긋나지 않게 둘째 사진을 끝으로 보낸다 */
  .p-info .gtiles>.gt:nth-child(4){order:1}
  .p-info .gt.tx{padding:2.8rem}
  .p-info .gt.tx h3{font-size:2.6rem;margin-bottom:1.8rem}
  .p-info .gt.tx p{font-size:1.6rem}
}

/* ── 장비와 시설 ────────────────────────────────────────── */
.p-info .eq>h3{display:flex;align-items:center;gap:1.6rem;margin:0 0 4.8rem;
  font-family:var(--serif);font-size:var(--f6);font-weight:500;letter-spacing:-.05em;
  color:var(--ink)}
.p-info .eq>h3 span{flex:0 0 auto;padding:.7rem 1.6rem;border-radius:var(--pill);
  background:var(--brand);font-family:var(--sans);font-size:1.5rem;font-weight:800;
  letter-spacing:.02em;color:#fff}
.p-info .eqlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem 3.4rem}
/* 위생처럼 항목이 둘뿐인 묶음 — 폭을 반만 쓴다 */
.p-info .eqitem .ph-box{min-height:0;aspect-ratio:4/3}
/* 장비 사진 — 제품 컷은 800×600 흰 바탕에 가운데로 앉혀 두었다. 원내 사진(.photo)은 꽉 채운다 */
.p-info .eqitem .eq-ph{aspect-ratio:4/3;overflow:hidden;padding:0;border:1px solid var(--line2);
  border-radius:var(--r);background:#fff}
.p-info .eqitem .eq-ph img{display:block;width:100%;height:100%;object-fit:cover}
.p-info .eqitem .txt{padding-top:2.2rem}
.p-info .eqitem b{display:block;margin-bottom:1.2rem;font-size:var(--f5);font-weight:700;
  letter-spacing:-.03em;color:var(--ink-strong)}
.p-info .eqitem p{margin:0;font-size:var(--f2);line-height:1.75;color:var(--ink2)}
/* 제조사 · 모델명 — 장비확인표 회신으로 확정된 기종을 이름 바로 아래에 적는다 */
.p-info .eqitem .md{display:block;margin:-.4rem 0 1.4rem;font-style:normal;
  font-size:1.5rem;font-weight:700;letter-spacing:-.01em;line-height:1.5;color:var(--brand)}
/* ── 장비 슬라이드 .eqslide — 좌 사진 / 우 설명 (2026-09-19) ──────────
   처음에는 큰 사진 아래 설명을 세로로 쌓았는데, 1440 짜리 화면에서 오른쪽이
   통째로 비고 페이지만 길어졌다. 좌우 2단으로 눕히고 한 번에 한 대씩 보여 준다.
   위의 이름 탭이 목록 노릇을 해서, 슬라이드로 넘겨도 무엇이 있는지는 늘 보인다.
   꺼진 칸도 DOM 에 그대로 있어 검색엔진은 전부 읽는다(display 만 끈다). */
.p-info .eqslide{position:relative;margin-top:var(--s7)}

/* 이름 탭 — 알약 모양. 이것이 이 묶음의 목차다 */
.p-info .eqtabs{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
  margin-bottom:var(--s8)}
.p-info .eqtabs button{padding:1.2rem 2.6rem;border:1px solid var(--line2);
  border-radius:99rem;background:#fff;font-family:inherit;font-size:var(--f2);
  font-weight:700;letter-spacing:-.02em;color:var(--ink2);cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.p-info .eqtabs button:hover{border-color:var(--brand);color:var(--brand)}
.p-info .eqtabs button.is-on{border-color:var(--brand);background:var(--brand);color:#fff}

/* 무대 — 사진 칸이 높이를 잡아 주어 넘길 때 크게 출렁이지 않는다 */
.p-info .eqstage{position:relative}
.p-info .eqpane{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:5rem;align-items:center}
/* 칸은 .eqitem 을 함께 달고 있다 — 이름 · 모델명 · 본문의 기본 꼴을 그대로 쓰고
   여기서는 배치와 크기만 덮어쓴다 */
.p-info .eqpane.is-on{display:grid;animation:eqfade .32s ease both}
@keyframes eqfade{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.p-info .eqpane.is-on{animation:none}}
/* 제품 컷은 800×600 흰 바탕이라 잘라내면 장비가 잘린다 — 틀 안에 앉힌다 */
.p-info .eqpane .eq-ph{aspect-ratio:4/3}
.p-info .eqpane .eq-ph img{object-fit:contain}
.p-info .eqpane .txt{padding-top:0}
.p-info .eqpane b{margin-bottom:1rem;font-size:var(--f6)}
.p-info .eqpane .md{margin:-.2rem 0 1.8rem;font-size:1.7rem}
.p-info .eqpane p{font-size:var(--f4);line-height:1.85}

/* 진단 묶음 .lead — 사진을 키운다.
   본문 칸은 1200 인데 그 바깥 .wrap 이 1400 이라 좌우로 100 씩 남는다.
   그 여유를 끌어 써 슬라이드만 1280 으로 넓히고(가운데 정렬은 margin-left 50% +
   translateX -50%), 사진 칸을 1.35 : 1 로 키운다. 575 → 약 700.
   글 칸은 575 → 약 530 으로 줄지만 22px 기준 한 줄 23자 안팎이라 읽는 데 지장이 없다.
   폭은 1240 까지만 준다 — 1280 으로 넓혔더니 왼쪽 화살표가 화면 밖으로 3px 나갔다.
   1240 이면 화살표가 양쪽에 20px 남기고 들어온다. */
.p-info .eqslide.lead{width:min(124rem,calc(100vw - 6rem));margin-left:50%;
  transform:translateX(-50%)}
.p-info .eqslide.lead .eqpane{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}

/* 좌우 화살표 — 본문 폭 바깥에 세운다. 자리가 없으면 아래 질의에서 숨긴다 */
.p-info .eqnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:5.6rem;height:5.6rem;padding:0;border:1px solid var(--line2);border-radius:50%;
  background:#fff;cursor:pointer;opacity:.85;transition:opacity .2s,border-color .2s}
.p-info .eqnav:hover{opacity:1;border-color:var(--brand)}
.p-info .eqnav::before{content:"";display:block;width:1.4rem;height:1.4rem;margin:0 auto;
  border-left:2px solid var(--ink2);border-bottom:2px solid var(--ink2)}
.p-info .eqnav.prev{left:-7.5rem}
.p-info .eqnav.prev::before{transform:rotate(45deg) translate(.2rem,-.2rem)}
.p-info .eqnav.next{right:-7.5rem}
.p-info .eqnav.next::before{transform:rotate(-135deg) translate(.2rem,-.2rem)}
@media(max-width:1400px){.p-info .eqnav{display:none}}

/* 장비 묶음의 좁은 화면 규칙 — 끊는 지점을 900 으로 잡는다.
   프론트의 모바일 글자 비율표(99d92fa)가 900 에서 섹션 제목을 24 로 내린다.
   여기를 768 로 두면 769~900 구간에서 장비 이름(30)이 섹션 제목(24)보다 커져,
   그 비율표가 없애려던 「무엇이 제목인지 모르겠는」 상태가 이 페이지에서만 되살아난다.
   폭도 마찬가지다 — 800 에서 좌우 반반이면 글 칸이 350 밖에 안 나와 한 줄에 16자다. */
@media(max-width:900px){
  /* 좌우 2단과 가로형을 모두 세로로 되돌린다 */
  .p-info .eqpane,
  .p-info .eqslide.lead .eqpane{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  /* 넓히기는 여기서 의미가 없다 — 본문 폭으로 되돌린다 */
  .p-info .eqslide.lead{width:100%;margin-left:0;transform:none}
  .p-info .eqtabs{gap:.8rem;margin-bottom:var(--s7)}
  .p-info .eqtabs button{padding:1rem 1.8rem}

  /* 글자는 모바일 비율표에서만 고른다(대표 지시 2026-09-18).
     30 비주얼 제목 / 24 섹션 제목 / 17 카드 제목 / 15 본문 / 14 보조.
     --f 변수를 그대로 두면 이름 22 · 설명 16 · 모델명 15 로 표 바깥 값이 나간다. */
  /* 슬라이드 칸(.eqpane)도 .eqitem 을 함께 달고 있어 한 번에 걸린다 */
  .p-info .eqitem b{font-size:1.7rem}
  .p-info .eqitem p,
  .p-info .eqtabs button{font-size:1.5rem;line-height:1.7}
  .p-info .eqitem .md{font-size:1.4rem}
}


.p-info .eqnote{max-width:84rem;margin:6rem auto 0;padding:3.4rem;border-radius:var(--r-lg);
  background:var(--soft2);font-size:var(--f2);line-height:1.85;color:var(--ink2)}
.p-info .eqnote b{display:block;margin-bottom:1.2rem;font-size:var(--f4);font-weight:700;
  color:var(--ink-strong)}

/* ── 진료 안내 ──────────────────────────────────────────── */
.p-info .hours{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}
.p-info .htable{width:100%;border-collapse:collapse}
.p-info .htable th,.p-info .htable td{padding:1.8rem 2.2rem;border-bottom:1px solid var(--line2);
  font-size:var(--f2);text-align:left;vertical-align:middle}
.p-info .htable th{width:12rem;background:#fafcfd;font-weight:700;color:var(--ink-strong)}
.p-info .htable td{color:var(--ink2)}
.p-info .htable td b{font-weight:700;color:var(--ink-strong)}
/* 화요일 야간진료 — 눈에 먼저 들어와야 하는 줄 */
.p-info .htable tr.hi th{background:var(--soft);color:var(--brand2)}
.p-info .htable tr.hi td{background:var(--soft2)}
.p-info .htable tr.hi td b{color:var(--brand2)}
.p-info .hnote{align-self:start;padding:3.4rem;border-radius:var(--r-lg);background:var(--soft2)}
.p-info .hnote b{display:block;margin-bottom:1.6rem;font-size:var(--f4);font-weight:700;
  color:var(--brand2)}
.p-info .hnote p{margin:0 0 1.8rem;font-size:var(--f2);line-height:1.8;color:var(--ink2)}
.p-info .hnote p:last-child{margin-bottom:0}

/* 병원 둘러보기 — 사진 격자 */
.p-info .tour{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3rem 2.4rem}
.p-info .tour figure{margin:0}
.p-info .tour .ph-box{min-height:0;aspect-ratio:4/3}
.p-info .tour img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;border-radius:1.6rem}
.p-info .tour figcaption{margin-top:1.6rem;font-size:var(--f2);font-weight:700;
  letter-spacing:-.03em;color:var(--ink-strong);text-align:center}

/* 편의시설처럼 짧은 항목 묶음 */
.p-info .pane{padding:3.4rem;border:1px solid var(--line);border-radius:var(--r-lg)}
/* 사진 격자·교통 2단 바로 뒤에 오면 붙어 버린다 */
.gal + .pane{margin-top:var(--s7)}
.p-info .wdet + .pane{margin-top:6rem}
/* 편의시설도 위 교통 2단과 같은 마무리 — 둥근 상자 대신 굵은 검정 선.
   .pane 은 guide.html 도 쓰므로 클래스를 더해 이 자리만 바꾼다.
   0,3,0 이라 768px 의 .p-info .pane{padding:2.4rem} 보다 우선한다 */
/* 바로 위 교통 2단이 이미 검정 선으로 끝나므로 윗선은 두지 않는다 */
.p-info .pane.flat{padding:0 0 4rem;border:0;border-radius:0;
  border-bottom:.3rem solid var(--ink-strong)}
.p-info .pane h3{margin:0 0 2.2rem;font-size:var(--f4);font-weight:700;
  letter-spacing:-.03em;color:var(--ink-strong)}
/* 진료 안내(guide)의 편의시설 제목 — 파란 타원에 흰 글씨.
   오시는 길의 .pane.flat 은 검정 선 마무리라 그대로 둔다 */
.p-info .pane:not(.flat) h3{display:inline-block;padding:1rem 2.6rem;
  border-radius:var(--pill);background:var(--brand);
  font-size:2rem;line-height:1.3;color:#fff}
.p-info .chips{display:flex;flex-wrap:wrap;gap:1rem}
/* 진료 안내의 편의시설 — 상자를 걷고 라벨과 칩을 한 줄로 흘린다 */
.p-info .pane.row{padding:0;border:0;border-radius:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.6rem}
.p-info .pane.row h3{margin:0}
.p-info .pane.row .chips{justify-content:center}
.p-info .chips span{padding:1rem 1.8rem;border:1px solid var(--line);border-radius:var(--pill);
  background:#fff;font-size:1.6rem;font-weight:700;color:var(--ink2)}
.p-info .casenote{max-width:90rem;margin:4rem auto 0;font-size:var(--f2);line-height:1.8;
  color:var(--ink3);text-align:center}
.p-info a{color:var(--brand-link)}
.p-info .casenote a,.p-info .pane a{font-weight:700}

/* ── 오시는 길 ──────────────────────────────────────────── */
/* 오시는 길 머리 — 주소 · 경로 · 전화를 세우고 그 아래 가로 지도 */
.p-info .ad{text-align:center}
.p-info .ad-addr{margin:0;font-size:3rem;font-weight:700;line-height:1.35;
  letter-spacing:-.045em;color:var(--brand)}
.p-info .ad-note{margin:1.6rem 0 0;font-size:1.7rem;line-height:1.75;color:var(--ink2)}
.p-info .ad-tel{display:inline-block;margin:3rem 0 0;font-family:var(--sans);
  font-size:6rem;font-weight:800;line-height:1;letter-spacing:-.035em;
  color:var(--ink-strong);text-decoration:none}
.p-info .ad-tel:hover{color:var(--brand)}
/* 지도에 붙는 짙은 바 — 경로 한 줄 + 길찾기 버튼 */
.p-info .map-bar{display:flex;align-items:center;gap:2.4rem;padding:2.4rem 3.2rem;
  background:#3D4247;border-radius:0 0 var(--r-lg) var(--r-lg)}
.p-info .map-bar p{display:flex;align-items:center;gap:1.6rem;margin:0;
  font-size:var(--f4);font-weight:800;letter-spacing:-.03em;line-height:1.4;color:#fff}
.p-info .map-bar .ic{flex:0 0 4.4rem;height:4.4rem;display:flex;align-items:center;
  justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.55)}
.p-info .map-bar .ic svg{width:2.2rem;height:2.2rem;stroke:#fff;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.p-info .map-bar .btns{margin-left:auto;display:flex;gap:1.2rem}
.p-info .map-bar .btns a{padding:1.4rem 3.2rem;border:1px solid rgba(255,255,255,.55);
  border-radius:.6rem;font-size:1.7rem;font-weight:700;letter-spacing:-.02em;
  color:#fff;white-space:nowrap;transition:.18s}
.p-info .map-bar .btns a:hover{background:#fff;border-color:#fff;color:#3D4247}
@media(max-width:900px){
  .p-info .map-bar{flex-direction:column;align-items:stretch;gap:1.8rem;padding:2.4rem}
  .p-info .map-bar p{font-size:1.8rem}
  .p-info .map-bar .btns{margin-left:0}
  .p-info .map-bar .btns a{flex:1;padding:1.4rem 1rem;text-align:center}
}
.p-info .ad-map{margin-top:5rem}
.p-info .ad-map .ph-box{aspect-ratio:1440/720;min-height:0;
  border-radius:var(--r-lg) var(--r-lg) 0 0}
@media(max-width:768px){
  .p-info .ad-addr{font-size:2.2rem}
  .p-info .ad-tel{font-size:4rem;margin-top:2.2rem}
  .p-info .ad-map{margin-top:3rem}
  .p-info .ad-map .ph-box{aspect-ratio:4/3}
}


/* 오시는 방법 — 버스 · 자가용 2단
   위아래 굵은 검정 선 + 검정 원형 아이콘. 지하철은 지도 바에서 안내한다.
   지역 페이지 4곳(수택 · 다산 · 별내 · 강동)도 같은 .wdet 을 쓴다 — 아래 .n3 참고 */
/* align-items 기본값 stretch — 두 칸 높이를 맞춰 아래 검정 선을 나란히 둔다 */
.p-info .wdet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5rem}
.p-info .wdet .wcol{padding:4.2rem 0 4rem;
  border-top:.3rem solid var(--ink-strong);border-bottom:.3rem solid var(--ink-strong)}
.p-info .wdet .ic{display:flex;width:7.2rem;height:7.2rem;margin:0 auto 2.6rem;
  align-items:center;justify-content:center;border-radius:50%;background:var(--ink-strong)}
.p-info .wdet .ic svg{width:3.4rem;height:3.4rem;stroke:#fff;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.p-info .wdet .wcol h3{margin:0 0 3.2rem;text-align:center;font-size:var(--f5);
  font-weight:800;letter-spacing:-.035em;color:var(--ink-strong)}
/* 지역 페이지(수택 · 다산 · 별내 · 강동)는 3단으로도 쓴다 */
.p-info .wdet.n3{grid-template-columns:repeat(3,minmax(0,1fr));gap:4rem}
/* 지역 페이지의 dl 은 클래스가 없다. .wbus/.wcar 를 건드리지 않도록 :not([class]) 로 좁힌다 */
.p-info .wdet dl:not([class]){margin:0;display:grid;
  grid-template-columns:10rem minmax(0,1fr);gap:1.6rem 1.2rem;align-items:baseline}
.p-info .wdet dl:not([class]) dt{font-size:1.6rem;font-weight:800;color:var(--brand)}
.p-info .wdet dl:not([class]) dd{margin:0;font-size:var(--f2);line-height:1.7;color:var(--ink2)}
.p-info .wdet dl:not([class]) dd b{font-weight:700;color:var(--ink-strong)}
/* 3단은 폭이 좁아 요일·항목을 위아래로 쌓는다 */
.p-info .wdet.n3 dl:not([class]){grid-template-columns:minmax(0,1fr);gap:0}
.p-info .wdet.n3 dl:not([class]) dt{margin-top:1.8rem;font-size:1.4rem;letter-spacing:.01em}
.p-info .wdet.n3 dl:not([class]) dt:first-of-type{margin-top:0}
.p-info .wdet.n3 dl:not([class]) dd{margin-top:.5rem;font-size:1.6rem;line-height:1.65}
/* 3단 글씨를 본문 크기로 — 항목명 18 · 내용 18 (지역 페이지 3곳) */
.p-info .wdet.n3.lg dl:not([class]) dt{margin-top:2.6rem;font-size:1.8rem;letter-spacing:-.02em}
.p-info .wdet.n3.lg dl:not([class]) dt:first-of-type{margin-top:0}
.p-info .wdet.n3.lg dl:not([class]) dd{margin-top:.6rem;font-size:1.8rem;line-height:1.6;letter-spacing:-.02em}
/* 정류장 이름 — 노선표의 머리 */
.p-info .wstop{margin:0 0 2.4rem;padding-bottom:2.2rem;border-bottom:1px solid var(--line2);
  font-size:1.5rem;font-weight:800;letter-spacing:.02em;color:var(--ink3)}
.p-info .wstop em{margin-left:1rem;font-style:normal;font-size:var(--f4);
  font-weight:800;letter-spacing:-.03em;color:var(--brand)}
/* 방면 · 노선 번호 — 알약과 번호 상자를 걷어낸다.
   뱃지가 겹치면 슬라이드처럼 보인다. 행마다 얇은 선으로만 끊고,
   방면은 글자색으로, 번호는 크기로 구분한다. */
.p-info .wbus{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 2.8rem;align-items:baseline}
.p-info .wbus dt{padding:1.8rem 0;border-top:1px solid var(--line2);
  font-size:1.6rem;font-weight:800;letter-spacing:-.02em;
  color:var(--brand);white-space:nowrap}
/* 마을버스는 실제 노선 색 관례를 따라 초록으로 */
.p-info .wbus dt.t-vill{color:#2f8f4e}
.p-info .wbus dd{margin:0;padding:1.8rem 0;border-top:1px solid var(--line2);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 2rem}
.p-info .wbus dt:first-of-type,
.p-info .wbus dd:first-of-type{border-top:0;padding-top:0}
.p-info .wbus dd b{padding:0;border:0;background:none;
  font-family:'Barlow',var(--sans);font-size:2.4rem;font-weight:500;
  letter-spacing:-.01em;line-height:1;color:var(--ink-strong)}
.p-info .wbus dd span{font-size:1.5rem;color:var(--ink3)}
/* 오시는 길 — 지하철 한 줄(.wline)을 두 칸 아래에 가로로 걸친다.
   위 두 칸의 아랫선이 이 줄의 윗선 노릇을 하도록 줄 사이 간격을 없앤다 */
.p-info .wdet.wsub{row-gap:0}
.p-info .wdet .wline{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1.2rem 2.4rem;padding:3.4rem 0;border-top:0;text-align:center}
.p-info .wdet .wline .ic{width:5.6rem;height:5.6rem;margin:0}
.p-info .wdet .wline .ic svg{width:2.8rem;height:2.8rem}
.p-info .wdet .wline h3{margin:0}
.p-info .wdet .wline p{margin:0;font-size:1.8rem;line-height:1.6;color:var(--ink2)}
.p-info .wdet .wline p em{margin-right:1.2rem;font-style:normal;font-weight:800;letter-spacing:-.03em;color:var(--brand)}
/* 자가용 */
.p-info .wcar{margin:0 0 2.8rem;display:grid;grid-template-columns:9rem minmax(0,1fr);
  gap:1.4rem 1.4rem;align-items:baseline}
.p-info .wcar dt{font-size:1.6rem;font-weight:800;color:var(--brand)}
.p-info .wcar dd{margin:0;font-size:1.7rem;line-height:1.7;color:var(--ink2)}
.p-info .wwarn{padding:2.6rem 2.8rem;border:1px solid var(--line2);
  border-radius:var(--r);background:#F4F6F7}
.p-info .wwarn b{display:block;margin-bottom:1.4rem;font-size:1.7rem;
  font-weight:800;letter-spacing:-.03em;color:var(--ink-strong)}
.p-info .wwarn ul{margin:0 0 1.6rem}
.p-info .wwarn li{position:relative;padding:.4rem 0 .4rem 1.8rem;
  font-size:1.6rem;line-height:1.7;color:var(--ink2)}
.p-info .wwarn li::before{content:"";position:absolute;left:.2rem;top:1.5rem;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--ink3)}
.p-info .wwarn p{margin:0;font-size:1.6rem;line-height:1.7;color:var(--ink2)}
@media(max-width:1100px){
  /* 한 줄로 접히면 방면과 번호가 위아래로 붙는다 — 선은 방면 위에만 */
  .p-info .wbus{grid-template-columns:minmax(0,1fr)}
  .p-info .wbus dt{justify-self:start;padding:1.8rem 0 .6rem}
  .p-info .wbus dd{padding:0 0 1.8rem;border-top:0}
  .p-info .wbus dd:first-of-type{padding-top:0}
}
@media(max-width:900px){
  .p-info .wdet,.p-info .wdet.n3{grid-template-columns:minmax(0,1fr);gap:0}
  .p-info .wdet .wcol{padding:3.4rem 0;border-top:none}
  .p-info .wdet .wcol:first-child{border-top:.3rem solid var(--ink-strong)}
  .p-info .wdet .wline{border-bottom:.3rem solid var(--ink-strong)}
}

/* 지역별 목록 */
.p-info .regions{margin-top:5rem}
.p-info .regions h3{display:flex;align-items:center;gap:1.4rem;margin:0 0 2.2rem;
  font-size:var(--f4);font-weight:700;letter-spacing:-.03em;color:var(--ink-strong)}
.p-info .regions h3 em{flex:0 0 auto;padding:.6rem 1.4rem;border-radius:.6rem;
  background:var(--brand);font-style:normal;font-size:1.4rem;font-weight:800;
  letter-spacing:.02em;color:#fff}
.p-info .rgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.p-info .rgrid a{display:block;padding:2rem;border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;transition:.15s}
.p-info .rgrid a:hover{border-color:var(--brand);background:var(--soft2)}
.p-info .rgrid a b{display:block;margin-bottom:.6rem;font-size:var(--f2);font-weight:700;
  letter-spacing:-.03em;color:var(--ink-strong)}
.p-info .rgrid a span{font-size:1.5rem;color:var(--ink3)}
/* 아직 페이지가 없는 지역 — 눌러도 갈 곳이 없으니 눌리지 않게 둔다 */
.p-info .rgrid a.soon{pointer-events:none;background:#fafcfd;border-style:dashed}
.p-info .rgrid a.soon b{color:var(--ink3)}
/* 형제 지역 페이지 — 3칸 */
.p-info .rgrid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-info .rgrid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:768px){.p-info .rgrid.n3,.p-info .rgrid.n2{grid-template-columns:minmax(0,1fr)}}

/* 권역별 안내 — 왼쪽 지역, 오른쪽 설명 */
.p-info .area{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:4rem;
  padding:3.4rem 0;border-top:1px solid var(--line)}
/* 지역 목록의 첫 줄 — 이 구획이 시작되는 선이라 굵은 검정으로.
   이후 지역 사이 구분선은 얇은 회색 그대로 둔다 */
.p-info .area:first-of-type{border-top:.3rem solid var(--ink-strong);padding-top:4.2rem}
.p-info .area:last-of-type{border-bottom:.3rem solid var(--ink-strong);padding-bottom:4.2rem}
.p-info .area .lft h4{margin:0 0 1rem;font-size:var(--f4);font-weight:800;
  letter-spacing:-.03em;color:var(--ink-strong)}
.p-info .area .lft span{display:block;margin-bottom:.8rem;font-size:1.6rem;color:var(--ink3)}
.p-info .area .lft em{font-style:normal;font-size:1.5rem;font-weight:700;color:var(--brand)}
.p-info .area p{margin:0 0 1.8rem;font-size:var(--f2);line-height:1.8;color:var(--ink2)}
.p-info .area p b{font-weight:700;color:var(--brand2)}
.p-info .lnk{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.p-info .lnk a{padding:.9rem 1.8rem;border:1px solid var(--line);border-radius:var(--pill);
  font-size:1.5rem;font-weight:700;color:var(--brand);text-decoration:none;transition:.15s}
.p-info .lnk a:hover{border-color:var(--brand);background:var(--soft2)}
.p-info .lnk a.go{border-color:var(--brand);background:var(--brand);color:#fff}
.p-info .lnk a.go::after{content:"›";margin-left:.7rem;font-weight:400}
.p-info .lnk a.go:hover{border-color:var(--brand2);background:var(--brand2)}

/* 권역별 안내 머리 — 시안에서 인라인 style 로 잡혀 있던 것을 옮겼다 */
.p-info .areahead{margin-top:6rem}
.p-info .areahead h3{display:flex;align-items:center;gap:1.4rem;margin:0 0 1.2rem;
  font-size:var(--f4);font-weight:700;letter-spacing:-.03em;color:var(--ink-strong)}
.p-info .areahead h3 em{flex:0 0 auto;padding:.6rem 1.4rem;border-radius:.6rem;
  background:var(--brand);font-style:normal;font-size:1.4rem;font-weight:800;
  letter-spacing:.02em;color:#fff}
.p-info .areahead>p{margin:0 0 2.6rem;font-size:var(--f2);line-height:1.8;color:var(--ink2)}
.p-info .areafoot{margin:2.6rem 0 0;font-size:1.6rem;line-height:1.7;color:var(--ink3)}

/* 지역 페이지 「이어서 보시면 좋습니다」 — 위 구획들과 같은 언어로 맞춘다.
   파란 둥근 칩 → 검정 각진 라벨, 둥근 상자 → 굵은 윗선 + 화살표 */
.p-info .areahead h3 em,
.p-info .regions h3 em{border-radius:0;background:var(--ink-strong)}
.p-info .rgrid{gap:0 3rem}
.p-info .rgrid a{position:relative;padding:2.6rem 3.4rem 2.6rem 0;
  border:0;border-top:.3rem solid var(--ink-strong);border-radius:0;background:none}
.p-info .rgrid a:hover{background:none}
.p-info .rgrid a b{margin-bottom:.8rem;font-size:var(--f4);font-weight:800;
  letter-spacing:-.03em;color:var(--ink-strong)}
.p-info .rgrid a span{font-size:1.6rem;color:var(--ink2)}
.p-info .rgrid a::after{content:"›";position:absolute;right:.4rem;top:2.4rem;
  font-size:2.6rem;font-weight:300;line-height:1;color:var(--ink3);transition:.18s}
.p-info .rgrid a:hover b,.p-info .rgrid a:hover::after{color:var(--brand)}
.p-info .rgrid a:hover{border-top-color:var(--brand)}
/* 준비 중인 지역 — 선을 옅게 두어 눌러 놓는다 */
.p-info .rgrid a.soon{border-top-color:var(--line);background:none;border-style:solid}
.p-info .rgrid a.soon::after{content:none}

/* 본문 마지막이 섹션으로 끝나는 쪽(지역 4쪽)은 푸터와 붙는다.
   관련 페이지 카드 블록이 있는 쪽은 그쪽 padding 이 이미 맡는다 */
.sp_main > section.blk:last-child{padding-bottom:10rem}
@media(max-width:768px){.sp_main > section.blk:last-child{padding-bottom:6rem}}

/* 지역 페이지 — 경로 3분할(지하철 / 버스 / 자가용) */

/* 지역 페이지 — 「왜 여기까지 오시나」 본문 */
.p-info .prose{max-width:96rem;margin:0 auto}
.p-info .prose p{margin:0 0 2.2rem;font-size:var(--f2);line-height:1.9;color:var(--ink2)}
.p-info .prose p:last-child{margin-bottom:0}
.p-info .prose p b{font-weight:700;color:var(--brand2)}

/* ── 좁은 화면 ──────────────────────────────────────────── */
@media(max-width:1024px){
  .p-info .tour{grid-template-columns:repeat(3,minmax(0,1fr))}
  .p-info .rgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:768px){
  .p-info .doc,.p-info .hours,.p-info .area{
    grid-template-columns:minmax(0,1fr);gap:3rem}
  .p-info .doc{padding-top:8rem}
  .p-info .doc .fig{grid-row:1}
  .p-info .doc .fig img{max-width:30rem;margin:0 auto}
  .p-info .doc .tx{padding-left:0}
  .p-info .doc .dr-line{margin-right:0}
  .p-info .doc .dr{font-size:2.4rem;padding-bottom:2rem}
  .p-info .doc .dr span{font-size:1.5rem;line-height:1.7}
  .p-info .doc .dr-line{margin-left:0}
  .p-info .doc .dr-line::after{left:0;width:2.6rem;height:2.6rem;top:calc(50% - 1.3rem)}
  .p-info .cvlist{margin-top:2.4rem;font-size:1.5rem;line-height:1.85}
  .p-info .cvlist .cv-link{margin-left:.6rem;font-size:1.3rem}
  .p-info .claim-lead{padding-top:6rem}
  .p-info .claim-lead::before{width:2.5rem;height:2.5rem}
  .p-info .page-claim{font-size:2.8rem}
  .p-info .doc h1{font-size:3rem;margin-bottom:3.4rem}
  .p-info .eqlist{grid-template-columns:minmax(0,1fr);gap:3.4rem}
  .p-info .tour,.p-info .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-info .pane,.p-info .hnote,.p-info .eqnote{padding:2.4rem}
  .p-info .htable th{width:9rem}
  .p-info .htable th,.p-info .htable td{padding:1.4rem 1.2rem;font-size:1.6rem}
  .p-info .greet .hi{font-size:2.4rem}
}

/* ══════════════════════════════════════════════════════════════
   임플란트 하위 6쪽 — 뼈이식 · 전악 · 상악동 · 재수술 · 당뇨고혈압 · 보험
   수령한 시안의 내용과 배치는 그대로 두고, 색·글자·여백만 사이트 값으로 바꾼다.
   시안 클래스에는 i- 를 붙여 내보냈다 — .card .tag .body .num .ph 처럼
   사이트가 이미 쓰는 이름이 많아 그대로 두면 서로 먹힌다.
   모두 main .p-imp 안에서만 걸린다.
   ══════════════════════════════════════════════════════════════ */

/* 사진 자리표시 — 실사진이 들어오면 img 로 바꾼다 */
.p-imp .i-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.8rem;min-height:20rem;padding:2rem;border:1px dashed #c9d4da;border-radius:var(--r);
  background:var(--soft2);color:var(--brand);font-size:1.7rem;font-weight:700;text-align:center}
.p-imp .i-ph small{font-size:1.4rem;font-weight:500;color:var(--ink3)}

/* ── 카드 격자 ─────────────────────────────────────────── */
.p-imp .i-grid{display:grid;gap:4rem 2.4rem;margin-top:calc(var(--s7) + 2.6rem)}
/* 격자 아래에 붙는 문단 — 카드에 바짝 붙으면 카드의 일부처럼 읽힌다 */
.p-imp .grid-note{margin:7rem auto 0;text-align:center}
/* 판단 상자 아래에 오는 문단도 같은 간격으로 띄운다 */
.p-imp .judge + .grid-note{margin-top:7rem}
/* 앞 문단에 바로 이어 붙는 경우 — 위 여백만 줄이고 가운데 정렬은 유지한다 */
.p-imp .grid-note.tight{margin-top:1.2rem}
/* 격자 아래 한 줄로 붙이는 안내 — 한 줄에 들어가도록 글자를 조금 줄인다 */
.p-imp .grid-note.one{font-size:1.8rem}
.p-imp .i-grid + .t-note,
.p-imp .i-steps + .t-note,
.p-imp .judge + .t-note{margin-top:6rem}
.p-imp .i-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.p-imp .i-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-imp .i-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 체크형 — 번호 대신 체크를 앞에 두고 글은 옆으로 눕힌다(가로형).
   짧은 판단 항목을 나열할 때 세로 카드보다 훑기 쉽다. */
.p-imp .i-grid.chk .i-card{display:grid;grid-template-columns:4.4rem minmax(0,1fr);
  gap:2rem;align-items:center;padding:2.8rem 3rem}
.p-imp .i-chk{display:flex;align-items:center;justify-content:center;
  width:4.4rem;height:4.4rem;border-radius:50%;background:var(--brand)}
.p-imp .i-chk svg{width:2.2rem;height:2.2rem;stroke:#fff;fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* 같은 원에 숫자를 넣는 변형 */
.p-imp .i-chk.num{font-family:'Barlow',var(--sans);font-size:2.4rem;font-weight:800;color:#fff}
.p-imp .i-grid.chk h3{margin:0 0 1rem}
.p-imp .i-grid.chk .i-tx{text-align:left}
@media(max-width:560px){
  .p-imp .i-grid.chk .i-card{grid-template-columns:3.6rem minmax(0,1fr);gap:1.4rem;padding:2.2rem}
  .p-imp .i-chk{width:3.6rem;height:3.6rem}
  .p-imp .i-chk svg{width:1.8rem;height:1.8rem}
}
/* 카드 안은 모두 가운데 정렬 — 아이콘·제목·설명이 한 축으로 읽힌다 */
.p-imp .i-card{position:relative;padding:5.4rem 3.4rem 3.4rem;border:1px solid var(--line);
  border-radius:var(--r-lg);background:#fff;text-align:center}
.p-imp .i-card h3{margin:0 0 1.4rem;font-size:var(--f5);font-weight:700;
  letter-spacing:-.03em;color:var(--ink-strong)}
.p-imp .i-card p{margin:0;font-size:var(--f2);line-height:1.75;color:var(--ink2)}
.p-imp .i-card .i-ph{margin-bottom:2.2rem}
/* 카드 안에 실사진을 넣는 경우 — 사진이 카드 위쪽을 끝까지 채운다.
   카드 패딩(3.4rem)만큼 음수 여백을 줘 좌·우·위 여백을 없앤다.
   모서리는 카드가 잘라 준다(.i-card 의 overflow:hidden). */
.p-imp .i-card .i-fig{margin:-5.4rem -3.4rem 2.6rem}
/* 카드 안에 도해를 직접 넣는 경우(.i-fig 없이) — 칸 폭을 채우고 모서리만 둥글게 */
.p-imp .i-card>img{display:block;width:100%;height:auto;margin:0 0 2.2rem;
  border-radius:1.2rem}
.p-imp .i-card .i-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
/* 번호·기호가 들어가는 동그란 머리 */
/* 번호 원 — 포인트 컬러 면에 흰 글씨. 카드 윗변에 반쯤 걸친다.
   카드에 overflow 를 걸지 않으므로 원이 밖으로 나올 수 있고,
   흰 테두리로 카드 선과 겹치는 부분을 끊는다. */
.p-imp .i-ico{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  z-index:1;display:flex;align-items:center;justify-content:center;
  width:5.2rem;height:5.2rem;border-radius:50%;box-shadow:0 0 0 .6rem #fff;
  background:var(--brand);font-family:'Barlow',var(--sans);font-size:2.4rem;font-weight:800;
  color:#fff}
/* 글리프 대신 스프라이트 아이콘을 넣는 경우 */
.p-imp .i-ico svg{width:2.6rem;height:2.6rem;stroke:#fff;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 여럿 중 먼저 권하는 것 */
.p-imp .i-card.i-pick{border-color:var(--brand);background:var(--soft2)}
.p-imp .i-card.i-pick .i-ico{background:var(--brand2)}
.p-imp .i-badge{position:absolute;top:-1.2rem;left:50%;transform:translateX(-50%);padding:.6rem 1.4rem;
  border-radius:var(--pill);background:var(--brand);font-size:1.4rem;font-weight:700;color:#fff}

/* ── 단계 — 사진 위에 번호를 얹고, 아래 회색 판에 제목과 설명 ───── */
.p-imp .i-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2.4rem;margin-top:calc(var(--s7) + 2.4rem)}
/* 단계 수는 페이지마다 다르다 — 칸 수를 개수에 맞춰 한 줄로 세운다 */
.p-imp .i-steps.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-imp .i-steps.n5{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.6rem}
/* 카드에 overflow 를 걸지 않는다 — 번호 원이 윗변 밖으로 나와야 한다.
   모서리는 사진과 글판이 각자 처리한다. */
.p-imp .i-step{position:relative;border-radius:1.2rem;background:#f4f6f8}
.p-imp .i-step>img,.p-imp .i-step .i-ph{border-radius:1.2rem 1.2rem 0 0}
.p-imp .i-step .i-body{border-radius:0 0 1.2rem 1.2rem}
/* 번호 원이 카드 윗변에 반쯤 걸친다 */
.p-imp .i-step .i-no{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 .5rem #fff;
  z-index:2;display:flex;align-items:center;justify-content:center;
  width:4.4rem;height:4.4rem;border-radius:50%;background:var(--brand);
  font-family:'Barlow',var(--sans);font-size:2.2rem;font-weight:800;color:#fff}
.p-imp .i-step .i-ph{min-height:0;aspect-ratio:4/3}
.p-imp .i-step .i-ph img,.p-imp .i-step>img{display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover}
.p-imp .i-step .i-body{padding:2.4rem 1.8rem 2.8rem;text-align:center}
.p-imp .i-step h3{margin:0 0 1.2rem;font-size:var(--f4);font-weight:700;
  letter-spacing:-.03em;color:var(--ink-strong)}
.p-imp .i-step p{margin:0;font-size:1.6rem;line-height:1.75;color:var(--ink2)}

/* 섹션 머리 밖에 잇달아 놓인 리드 문단 — 기본 3rem 은 두 문단이 따로 놀 만큼 넓다.
   .shead 안의 리드는 그대로 두고, 섹션 직계 문단만 좁힌다. */
.p-imp section.blk > .lead + .lead{margin-top:1.2rem}

/* 좌 도해 / 우 설명 — 도해는 원본 비율 그대로, 글은 왼쪽 정렬로 읽는다 */
.p-imp .c-split>.tx{text-align:left}
.p-imp .c-split>.tx .lead{max-width:none;margin:0 0 2.6rem}
.p-imp .c-split>.tx .lead:last-child{margin-bottom:0}

/* ── 진료 원칙 — 2×2 카드, 아이콘은 카드 윗변에 걸치고 가운데에 원형 사진 ─────
   레퍼런스 구조 그대로다. 아이콘 원의 절반이 카드 밖으로 나오므로
   카드에 overflow 를 걸지 않고, 위쪽 여백을 아이콘 반지름만큼 확보한다. */
.p-imp .i-points{position:relative;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:6rem 3rem;
  /* 아이콘이 위로 4.5rem 튀어나오므로 그만큼을 더해 실제 여백을 확보한다 */
  margin-top:calc(8rem + 4.5rem)}
.p-imp .i-pt{position:relative;padding:6.6rem 3.4rem 4.4rem;
  border:1px solid var(--line);border-radius:var(--r-lg);text-align:center}
/* 아이콘 — 회색 원이 카드 윗변에 반쯤 걸친다 */
.p-imp .i-ic{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  z-index:1;display:flex;align-items:center;justify-content:center;
  width:9rem;height:9rem;border-radius:50%;background:#eef1f4;
  box-shadow:0 0 0 .8rem #fff}
.p-imp .i-ic svg{width:4.4rem;height:4.4rem;stroke:var(--ink2);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* 파란 한 마디 → 굵은 제목 → 설명 */
.p-imp .i-pt .key{display:block;margin-bottom:1rem;font-size:2.6rem;font-weight:800;
  letter-spacing:-.03em;color:var(--brand2)}
.p-imp .i-pt h3{margin:0 0 1.8rem;font-size:var(--f4);font-weight:700;
  letter-spacing:-.03em;color:var(--ink-strong)}
.p-imp .i-pt p{margin:0;font-size:1.7rem;line-height:1.8;color:var(--ink2)}
/* 가운데 원형 사진 — 네 칸이 만나는 십자 위에 크게 얹힌다 */
.p-imp .i-points.ring .i-hub{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:2;width:30rem;height:30rem;
  border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 1.4rem #fff}
.p-imp .i-points.ring .i-hub img{display:block;width:100%;height:100%;object-fit:cover}
/* 레퍼런스는 아이콘과 글이 칸 한가운데에 놓인다 — 좌우 여백을 같게 둔다.
   가운데 원은 네 칸이 만나는 빈 모서리를 덮고, 글은 그보다 안쪽에서 끝난다. */
.p-imp .i-points.ring>.i-pt>:not(.i-ic){max-width:34rem;margin-left:auto;margin-right:auto}
@media(max-width:1000px){
  /* 원이 카드 위로 겹치면 글을 가린다 — 좁아지면 원을 뺀다 */
  .p-imp .i-points.ring .i-hub{display:none}
  .p-imp .i-points.ring>.i-pt{padding:6.2rem 2.4rem 3.4rem}
}
@media(max-width:768px){
  .p-imp .i-points{grid-template-columns:minmax(0,1fr);gap:5.6rem}
  .p-imp .i-pt .key{font-size:2.2rem}
}

/* ── 두 갈래 판단 상자 ─────────────────────────────────── */
/* 두 상자를 나란히 놓는 틀 */
.p-imp .judge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.4rem;margin-top:var(--s7)}
@media(max-width:768px){.p-imp .judge{grid-template-columns:minmax(0,1fr)}}
.p-imp .i-jbox{padding:3.4rem;border:1px solid var(--line);border-radius:var(--r-lg)}
.p-imp .i-jbox + .i-jbox{margin-top:0}
.p-imp .i-jbox h3{margin:0 0 2.4rem;padding-bottom:2rem;border-bottom:1px solid var(--line2);
  font-size:2.6rem;font-weight:700;letter-spacing:-.03em;color:var(--ink-strong);
  text-align:center}
.p-imp .i-jbox ul{margin:0;padding:0;list-style:none}
.p-imp .i-jbox li{position:relative;padding:1.1rem 0 1.1rem 2.2rem;
  font-size:2rem;line-height:1.7;color:var(--ink2)}
.p-imp .i-jbox li::before{content:"";position:absolute;left:0;top:2.25rem;
  width:.7rem;height:.7rem;border-radius:50%;background:var(--brand-light)}
/* 그대로 심는 쪽과 먼저 채우는 쪽 — 머리 색으로만 가른다 */
.p-imp .i-jbox.keep h3{color:var(--brand2)}
.p-imp .i-jbox.out h3{color:var(--amber)}
.p-imp .i-jbox.out li::before{background:#d8a838}

/* ── 치료 전후 사례 ───────────────────────────────────── */
.p-imp .i-case{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.4rem;margin-top:var(--s7)}
.p-imp .i-case figure{margin:0}
.p-imp .i-case .i-ph{min-height:0;aspect-ratio:9/7}
.p-imp .i-case figcaption{margin-top:1.4rem;font-size:1.7rem;font-weight:700;
  color:var(--ink-strong);text-align:center}
.p-imp .i-casedesc{max-width:90rem;margin:3.4rem auto 0}
.p-imp .i-casedesc p{margin:0 0 1.6rem;font-size:var(--f2);line-height:1.85;color:var(--ink2)}

/* ── 좌우 2단 + 번호 목록 ─────────────────────────────── */
/* 사진이 옆 목록 높이만큼 늘어나게 둔다 — 가운데 정렬이면 아래가 비어 어긋나 보인다 */
.p-imp .i-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4rem;margin-top:var(--s7);align-items:stretch}
/* 사진 칸은 옆 글 높이를 따라간다.
   img 를 흐름에 두면 사진의 원래 높이가 줄 높이를 밀어 버린다 —
   절대 위치로 띄워 칸 크기에 맞춰 채우게 한다. */
.p-imp .i-fill{position:relative;height:100%;min-height:34rem;
  border-radius:var(--r-lg);overflow:hidden}
.p-imp .i-fill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 아래 안내문 — 위아래를 넉넉히 띄우고, 줄바꿈 간격은 좁혀 한 덩어리로 읽히게 한다 */
.p-imp .i-split + .t-note{margin:7rem auto 2rem;line-height:1.6}
.p-imp .i-rlist{margin:0;padding:0;list-style:none}
.p-imp .i-rlist li{display:grid;grid-template-columns:4.4rem minmax(0,1fr);gap:1.8rem;
  padding:2.2rem 0;border-bottom:1px solid var(--line2)}
.p-imp .i-rlist li:first-child{padding-top:0}
/* 번호 원 — 면을 포인트 컬러로 채우고 글씨는 흰색(.i-ico 와 같은 처리) */
.p-imp .i-rlist .i-n{display:flex;align-items:center;justify-content:center;
  width:4.4rem;height:4.4rem;border-radius:50%;background:var(--brand);
  font-family:'Barlow',var(--sans);font-size:2.1rem;font-weight:800;color:#fff}
.p-imp .i-rlist b{display:block;margin-bottom:.8rem;font-size:var(--f4);font-weight:700;
  letter-spacing:-.03em;color:var(--ink-strong)}
.p-imp .i-rlist span{display:block;font-size:1.7rem;line-height:1.75;color:var(--ink2)}

/* 각주 성격의 짧은 안내 */
/* ── VS 비교 (.c-vs) — 두 방식을 좌우로 놓고 항목별로 맞대어 본다 ─────
   가운데 열이 항목 이름을 맡는다. 좌우에 라벨을 두 번 쓰지 않아도
   각 줄이 무엇을 비교하는지가 읽힌다.
   3열 격자라 좌·중·우 순서로만 넣으면 줄이 저절로 맞는다. */
.p-imp .c-vs{display:grid;grid-template-columns:minmax(0,1fr) 12rem minmax(0,1fr);
  align-items:stretch;margin-top:var(--s7);border:2px solid #aeb9c1;
  border-radius:var(--r-lg);overflow:hidden}
/* 머리 띠 — 왼쪽은 진하게, 오른쪽은 옅게 두어 두 갈래가 구분되게 한다 */
.p-imp .c-vs .hd{padding:2.4rem 2rem;font-size:var(--f5);font-weight:800;
  letter-spacing:-.03em;color:#fff;text-align:center}
.p-imp .c-vs .hd.a{background:var(--brand)}
/* 오른쪽은 그레이. 흰 글씨 대비를 위해 충분히 어두운 값을 쓴다(#6e7a82 · 약 4.5:1) */
.p-imp .c-vs .hd.b{background:#6e7a82}
/* 머리 띠의 가운데 칸 — 칸 한가운데를 경계로 좌우 색이 갈리게 그라디언트를 깔면
   두 띠가 맞닿은 한 줄로 보인다. 글자는 없고 색만 맡는다. */
.p-imp .c-vs .vs{align-self:stretch;
  background:linear-gradient(to right,var(--brand) 0 50%,#6e7a82 50% 100%)}
/* VS 는 두 도해 사이에 놓는다 — 무엇과 무엇을 견주는지가 그림 사이에서 읽힌다 */
.p-imp .c-vs .k.sp{position:relative}
.p-imp .c-vs .vsmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;width:11rem;height:11rem;
  border-radius:50%;background:#cfe4f7;z-index:2;
  font-family:'Barlow',var(--sans);font-size:3.6rem;font-weight:700;color:var(--brand2)}
.p-imp .c-vs .fig{padding:3.4rem 3rem 2rem}
.p-imp .c-vs .fig .i-ph{min-height:0;aspect-ratio:20/9}
.p-imp .c-vs .fig img{display:block;width:100%;height:auto}
.p-imp .c-vs .verdict{padding:0 3rem 3.4rem;font-size:3.6rem;font-weight:800;
  letter-spacing:-.05em;color:var(--ink-strong);text-align:center}
/* 캡션 색은 그 열의 성격을 따른다 — 왼쪽이 강조 열(파랑), 오른쪽이 그레이다 */
.p-imp .c-vs .verdict span{display:block;margin-bottom:1.4rem;font-size:2rem;
  font-weight:800;letter-spacing:-.03em;color:var(--brand2)}
.p-imp .c-vs .verdict.b span{color:var(--ink3)}
/* 항목 줄 — 가운데 이름, 좌우 값.
   선을 --line2 로 두면 표가 덜 그려진 것처럼 보인다. --line 으로 또렷하게 긋고,
   가운데 열에 옅은 면을 깔아 축이 있다는 것을 눈으로 알 수 있게 한다. */
.p-imp .c-vs .k{display:flex;align-items:center;justify-content:center;
  padding:2.2rem .6rem;
  font-size:1.9rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-align:center}
.p-imp .c-vs .v{display:flex;align-items:center;justify-content:center;
  padding:2.2rem 3rem;font-size:var(--f4);font-weight:600;
  color:var(--ink-strong);text-align:center}
.p-imp .c-vs .v.a{color:var(--brand2);font-weight:800}
/* 줄 사이 가로선 + 가운데 열 양옆 세로선 */
.p-imp .c-vs .v,.p-imp .c-vs .k{border-top:1px solid #c6d0d7}
.p-imp .c-vs .k{border-left:1px solid #c6d0d7;border-right:1px solid #c6d0d7}
/* 이미지·판정 줄의 가운데 칸은 자리만 차지한다 — 면과 선을 지워 빈 상자로 보이지 않게 한다 */
.p-imp .c-vs .k.sp{background:none;border:0}

@media(max-width:768px){
  .p-imp .c-vs{grid-template-columns:minmax(0,1fr) 8rem minmax(0,1fr)}
  .p-imp .c-vs .hd{padding:1.6rem 1rem;font-size:1.7rem}
  .p-imp .c-vs .vsmark{width:7rem;height:7rem;font-size:2.4rem}
  .p-imp .c-vs .fig{padding:2rem 1.4rem 1.2rem}
  .p-imp .c-vs .verdict{padding:0 1.4rem 2rem;font-size:var(--f4)}
  .p-imp .c-vs .v{padding:1.6rem 1rem;font-size:1.7rem}
  .p-imp .c-vs .k{padding:1.6rem .4rem;font-size:1.4rem}
  .p-imp .c-vs .verdict{font-size:var(--f5)}
}

/* ── 사진을 앞에 두는 2단 격자 ─────────────────────────── */
.p-imp .i-defs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.4rem;margin-top:var(--s7)}
/* 왼쪽 사진 칸 — 오른쪽에 쌓이는 두 칸의 높이를 그대로 받는다 */
.p-imp .i-deffig{position:relative;margin:0;min-height:26rem;
  overflow:hidden;border-radius:var(--r-lg);background:var(--soft2)}
.p-imp .i-defs .i-deffig{grid-row:span 2}
.p-imp .i-deffig img{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover}
/* 사진이 아직 없으면 이 안에 .i-ph 를 그대로 둔다 */
.p-imp .i-deffig .i-ph{position:absolute;inset:0;min-height:0;border:0;border-radius:0}
/* 아이콘 없이 가로로 펴는 칸 */
.p-imp .i-flat{display:flex;flex-direction:column;justify-content:center;
  padding:3.4rem;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.p-imp .i-flat h3{margin:0 0 1.4rem;font-size:var(--f5);font-weight:700;
  letter-spacing:-.03em;color:var(--ink-strong)}
.p-imp .i-flat p{margin:0;font-size:var(--f2);line-height:1.75;color:var(--ink2)}
/* 격자·표 뒤에 붙는 단서는 충분히 떨어뜨린다 */
.p-imp .i-tw + .t-note,.p-imp .i-grid + .t-note,
.p-imp .i-steps + .t-note{margin-top:var(--s8)}

/* ── 비교 표 — 사이트 .c-table 과 같은 결로 맞춘다 ──────── */
/* 좌우 2단 안에 사진과 표를 나란히 — 사진이 표 높이를 그대로 받는다 */
.p-imp .i-split.fit{align-items:stretch}
.p-imp .i-split > .i-tw{margin-top:0}
/* 값을 왼쪽에 붙이는 표 */
.p-imp .i-tw table.left td{text-align:left}
/* 값이 짧아 폭을 다 쓸 필요가 없는 표는 가운데로 조금 좁힌다 */
.p-imp .i-tw.narrow table{max-width:100rem;margin-inline:auto}
/* 되는 쪽과 안 되는 쪽을 항목별로 맞대어 본다 — .c-vs 와 같은 색 약속 */
.p-imp .i-tw table.i-vs td{text-align:left}
.p-imp .i-tw table.i-vs thead th.ok{background:var(--brand)}
.p-imp .i-tw table.i-vs thead th.no{background:#5f6b73}
.p-imp .i-tw table.i-vs tbody td + td{border-left:1px solid #eaeaea}
.p-imp .i-tw{margin-top:var(--s7);overflow-x:auto}
.p-imp .i-tw table{width:100%;border-collapse:collapse;font-size:1.7rem}
.p-imp .i-tw th,.p-imp .i-tw td{padding:1.8rem 2rem;text-align:center;
  border-bottom:1px solid #eaeaea}
.p-imp .i-tw thead th{background:#333;color:#fff;font-weight:600;border-bottom:0}
.p-imp .i-tw tbody th{background:#f5f5f5;font-weight:600;color:var(--ink)}
.p-imp .i-tw td{color:var(--ink2)}

/* ── 좁은 화면 ────────────────────────────────────────── */
@media(max-width:1024px){
  .p-imp .i-grid.g4,.p-imp .i-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-imp .i-steps{gap:3.4rem 2rem}
  .p-imp .i-grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  .p-imp .i-grid,.p-imp .i-grid.g2,.p-imp .i-grid.g3,.p-imp .i-grid.g4,
  .p-imp .i-points,.p-imp .i-case,.p-imp .i-split,.p-imp .i-defs{
    grid-template-columns:minmax(0,1fr)!important;gap:2rem}
  .p-imp .i-card{padding:4.6rem 2.4rem 2.4rem}
  .p-imp .i-flat{padding:2.4rem}
  .p-imp .i-deffig{grid-row:auto;min-height:20rem}
  .p-imp .i-jbox{padding:2.4rem}
  .p-imp .i-card .i-fig{margin:-4.6rem -2.4rem 2rem}
  .p-imp .i-tw th,.p-imp .i-tw td{padding:1.4rem 1rem;font-size:1.5rem}
}


/* ══════════════════════════════════════════════════════════════
   푸터 — 예전 규칙(footer.site{background:#fff})이 파일 뒤쪽에 있어
   여기서 다시 잡는다. 순서로 이기게 파일 맨 끝에 둔다.
   ══════════════════════════════════════════════════════════════ */
/* ── 푸터 앞 띠 .fband — 공지 · 진료 안내 · 오시는 길 ───────── */
.fband{border-top:1px solid var(--line);background:#fff}
/* customdentalclinic .foot_board ul.three 와 같은 방식 —
   칸 사이 gap 을 두면 구분선이 칸의 왼쪽 끝에 붙어 항목마다 좌우 여백이 어긋난다.
   gap 을 없애 세 칸을 정확히 1/3 로 나누고, 안쪽 여백(50px)만 준다. */
/* 이 띠만 1400 컨테이너를 벗어나 화면 폭(html max-width 1920)을 다 쓴다.
   좌우 여백은 각 칸의 padding 5rem(=50px)이 대신한다. */
.fband>.wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;max-width:none;padding:0}
/* 레퍼런스 실측 — 한 칸 635 x 540, padding 100px 50px.
   그리드 stretch 로 세 칸 높이가 같아지므로 min-height 로 540 을 보장한다. */
.fb{position:relative;display:flex;flex-direction:column;
  padding:10rem 5rem;min-height:54rem}
/* 칸 사이 세로선 — 커스텀(.foot_board li:before, top 88 / bottom 60)처럼
   테두리가 아니라 가상요소로 그어 위아래를 띄운다.
   .fb 의 위아래 패딩이 10rem 이므로 그보다 조금 안쪽에서 시작·끝난다. */
.fb + .fb::before{content:"";position:absolute;left:0;top:8.8rem;bottom:6rem;
  width:1px;background:var(--line)}
.fb h2{margin:0 0 4.4rem;font-size:3.2rem;font-weight:800;
  letter-spacing:-.04em;color:var(--ink-strong);text-align:center}
/* 공지 제목 오른쪽 끝의 + — 제목 줄 높이 가운데에 건다 */
.fb-plus{position:absolute;right:5rem;top:10rem;display:flex;align-items:center;
  justify-content:center;width:3.6rem;height:4.5rem;font-size:2.8rem;font-weight:300;
  line-height:1;color:var(--ink3);text-decoration:none;transition:.18s}
.fb-plus:hover{color:var(--brand)}
/* 공지 목록만 Pretendard — 나눔스퀘어 네오는 웹폰트 힌팅이 없어
   16px 에서 획이 번져 보인다. Pretendard 는 같은 크기에서 더 또렷하다.
   14행 @import 로 이미 불러오고 있어 추가 로드는 없다. */
.fb-notice{margin:0;padding:0;list-style:none;
  font-family:'Pretendard Variable','Pretendard',var(--sans)}
/* ★ 커스텀 공지 목록은 색 지정이 없어 결국 #000 으로 그려진다.
   우리 #444 와 나란히 놓으면 우리 쪽만 흐려 보인다.
   「본문을 #444 보다 옅게 쓰지 않는다」는 원칙의 하한이지 상한이 아니므로,
   이 목록만 최강조색(#222)까지 올린다. */
.fb-notice li{display:flex;align-items:baseline;justify-content:space-between;gap:1.6rem;
  padding:1rem 0;border-bottom:1px solid var(--line2);
  font-size:1.8rem;color:var(--ink-strong)}
.fb-notice li:first-child{padding-top:0}
.fb-notice li:last-child{border-bottom:0}
.fb-notice li.none{justify-content:center;color:var(--ink3);border-bottom:0;padding:3rem 0}
.fb-notice a{position:relative;padding-left:1.4rem;color:inherit;text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* 제목 앞 작은 점 — 글만 줄줄이 있어 휑해 보이던 것(대표 제안 2026-09-29).
   글머리 기호 노릇만 하도록 아주 작게 둔다 */
.fb-notice a::before{content:"";position:absolute;left:.2rem;top:50%;
  width:.3rem;height:.3rem;margin-top:-.15rem;border-radius:50%;background:var(--ink-strong)}
.fb-notice a:hover{color:var(--brand)}
/* 푸터 띠의 숫자(공지 날짜 · 진료 시간)는 모두 Pretendard 로 통일 */
.fb-notice time{flex:none;font-family:'Pretendard Variable','Pretendard',var(--sans);font-size:1.8rem;color:var(--ink3)}
/* 진료 안내 — 요일은 왼쪽, 시간은 오른쪽 끝. 행마다 얇은 선으로 끊는다 */
.fb-hours{margin:0}
/* 알약을 키운 만큼 행 여백을 줄인다 — 5행 합계가 한 칸 안쪽 높이(약 252px)를
   넘기면 세 칸이 함께 늘어나 540px 규격이 깨진다 */
.fb-hours .row{display:flex;align-items:center;gap:1.6rem;
  padding:.65rem 0;border-bottom:1px solid var(--line2)}
.fb-hours .row:first-child{padding-top:0}
.fb-hours .row:last-child{padding-bottom:0;border-bottom:0}
/* 요일은 가로형 알약 — 위 오시는 방법의 방면 라벨과 같은 형태 */
.fb-hours dt{flex:none;display:flex;align-items:center;gap:1.6rem}
.fb-hours dt b{min-width:8.6rem;padding:.9rem 1.4rem;border-radius:0;
  background:#3D4247;text-align:center;font-size:1.5rem;font-weight:600;
  line-height:1.2;letter-spacing:-.03em;color:#fff}
.fb-hours dd{margin:0 0 0 auto;text-align:right}
.fb-hours dd b{font-family:'Pretendard Variable','Pretendard',var(--sans);font-size:2rem;font-weight:500;
  letter-spacing:-.01em;line-height:1.2;color:var(--ink-strong)}
.fb-hours dt em{font-style:normal;font-size:1.6rem;font-weight:400;
  letter-spacing:-.01em;color:var(--ink3)}
/* 화요일 야간진료 — 이 줄만 브랜드 색으로 세운다 */
.fb-hours .row.hi dt b{background:var(--brand)}
.fb-hours .row.hi dd b{color:var(--brand)}
.fb-hours .row.hi dt em{color:var(--brand);font-weight:700}
/* 휴진은 숫자가 아니라 요일이라 본문 서체로 */
.fb-hours .row.off dd b{font-family:var(--sans);font-size:1.8rem;font-weight:700;
  color:var(--ink2)}
.fb-map{flex:1;display:flex;margin:0;text-decoration:none}
.fb-map .ph-box{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;width:100%;border:1px dashed var(--line);border-radius:.6rem;
  background:#f7f9fa;font-size:1.5rem;font-weight:700;color:var(--ink3);text-align:center}
.fb-map .ph-box small{font-size:1.3rem;font-weight:400}
.fb-map:hover .ph-box{border-color:var(--brand);color:var(--brand)}

/* ── 어두운 푸터 ─────────────────────────────────────────── */
footer.site{background:#2c3237;border-top:0}
footer.site>.wrap{display:grid;grid-template-columns:minmax(0,40rem) minmax(0,1fr);
  gap:5rem;padding:6.4rem 2rem 5.4rem}
.fi-logo{display:inline-block;font-size:2.2rem;font-weight:700;letter-spacing:-.04em;
  color:#fff;text-decoration:none}
.fi-logo b{color:var(--brand-light)}
.fi address{margin:2.4rem 0 0;font-style:normal}
.fi address p{margin:0 0 .7rem;font-size:1.5rem;line-height:1.8;
  color:rgba(255,255,255,.78);white-space:nowrap}
.fi address i{display:inline-block;width:1px;height:1.1rem;margin:0 1rem;
  background:rgba(255,255,255,.24);vertical-align:-.1rem}
.fi-links{display:flex;flex-wrap:wrap;gap:1.8rem;margin:2.2rem 0 0;padding:0;list-style:none}
.fi-links a{font-size:1.5rem;font-weight:700;color:rgba(255,255,255,.82);text-decoration:none}
.fi-links a:hover{color:#fff}
.fi-copy{margin:2.6rem 0 0;font-size:1.3rem;line-height:1.7;
  color:rgba(255,255,255,.46);white-space:nowrap}
/* 왼쪽 사업자 정보와 오른쪽 메뉴를 세로선으로 가른다 */
.fmap{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2.2rem;
  padding-left:5rem;border-left:1px solid rgba(255,255,255,.14)}
/* 열 제목 아래에 선을 둔다 — 레퍼런스와 같은 결 */
.fm-h{display:block;margin-bottom:1.5rem;padding-bottom:1.5rem;
  border-bottom:1px solid rgba(255,255,255,.2);
  font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:#d0d0d0;text-decoration:none}
.fm-h:hover{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.fm-col ul{margin:0;padding:0;list-style:none}
.fm-col li{margin-bottom:0}
.fm-col li a{display:block;padding:.2rem 0;font-size:1.4rem;line-height:1.5;
  color:#8f8f8f;text-decoration:none}
.fm-col li a:hover{color:#fff}
@media(max-width:1280px){
  footer.site>.wrap{grid-template-columns:minmax(0,1fr);gap:4rem}
  .fi address p,.fi-copy{white-space:normal}
  .fmap{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:4rem}
  .fmap{grid-template-columns:repeat(4,minmax(0,1fr));gap:3.4rem 2rem}
}
@media(max-width:900px){
  .fband>.wrap{grid-template-columns:minmax(0,1fr);gap:4rem;padding:4.4rem 2rem}
  .fb{padding:0;min-height:0}
  .fb + .fb{border-top:1px solid var(--line);padding-top:4rem}
  /* + 는 PC 패딩(위 10rem · 오른쪽 5rem) 기준으로 걸려 있어, 패딩이 0 이 되면
     제목 줄보다 한참 아래 · 목록 날짜 위에 떠 있었다 → 제목 줄 오른쪽 끝으로 */
  .fb-plus{top:0;right:0}
  .fb + .fb::before{content:none}
  footer.site>.wrap{grid-template-columns:minmax(0,1fr);gap:4rem;padding:4.4rem 2rem 4rem}
  .fmap{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:4rem}
  .fmap{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 모바일 푸터에서는 사이트맵을 감춘다(일레븐 참고, 2026-09-21 대표님 요청).
   전 메뉴가 두 칸으로 길게 늘어져 푸터가 화면 두 개를 차지하고 있었다.
   메뉴는 위의 햄버거와 하단 바가 맡고, 푸터는 병원 정보만 남긴다. */
@media(max-width:768px){
  .fmap{display:none}
  /* 병원 정보 — 15px 이면 「상호명 … 대표원장 : 임태윤」이 두 줄로 접혀 이름만 떨어졌다.
     한 줄에 들어가는 13px 로(대표 지시 2026-09-22). 구분선 여백도 조금 줄인다 */
  .fi address p{font-size:1.3rem;margin-bottom:.4rem}
  .fi address i{margin:0 .8rem}
  /* 사업자등록번호는 다음 줄로(대표 지시 2026-09-23) — 셋째 줄의 구분선을 줄바꿈으로 쓴다.
     번호가 「659-91-」에서 끊기던 것도 함께 없어진다. 첫 줄(상호명 · 대표원장)은 그대로 한 줄 */
  .fi address p:last-child i{display:block;width:0;height:0;margin:0}
}


/* ── 메인 섹션 둥근 아래 모서리 — 11dent main>section ─────────────
   섹션마다 아래 두 모서리를 둥글게 하고(10rem), 다음 섹션을 그만큼 끌어올려
   앞 섹션 밑에 겹친다. 둥근 모서리 바깥으로 다음 섹션의 바탕색이 보인다.
   겹친 만큼 윗여백을 더해 내용 위치는 그대로 둔다. 모바일은 5rem. */
.home main{--ov:10rem}
.home main>section{position:relative;border-radius:0 0 var(--ov) var(--ov)}
.home main>section + section{margin-top:calc(var(--ov) * -1)}
/* 위 섹션이 아래 섹션을 덮도록 순서대로 쌓는다 */
.home main>section:nth-of-type(1){z-index:8}
.home main>section:nth-of-type(2){z-index:7}
.home main>section:nth-of-type(3){z-index:6}
.home main>section:nth-of-type(4){z-index:5}
.home main>section:nth-of-type(5){z-index:4}
.home main>section:nth-of-type(6){z-index:3}
.home main>section:nth-of-type(7){z-index:2}
.home main>section:nth-of-type(8){z-index:1}
/* 흰 섹션도 바탕을 칠해야 아래 섹션을 가린다(회색 · 숫자 섹션은 이미 칠해져 있다) */
.home main>.el-two,.home main>.el-sec:not(.el-bg){background:#fff}
.home main>.el-sec{padding-top:calc(12rem + var(--ov))}
.home main>.el-two{padding-top:calc(12rem + var(--ov))}
.home main>.el-two + .el-two{padding-top:var(--ov)}
.home main>.el-stat{padding-top:calc(14rem + var(--ov))}
@media(max-width:1000px){
  .home main>.el-two{padding-top:calc(7rem + var(--ov))}
  .home main>.el-two + .el-two{padding-top:var(--ov)}
}
@media(max-width:768px){
  .home main{--ov:5rem}
  .home main>.el-sec{padding-top:calc(7rem + var(--ov))}
  .home main>.el-stat{padding-top:calc(8rem + var(--ov))}
  /* 둘째 2단 블록 — 윗여백이 겹침 폭(--ov)과 같아 점이 위 섹션 경계에 붙어 있었고,
     퍼지는 고리(1.2rem) 윗부분이 위 섹션의 흰 바탕에 가려 잘려 보였다.
     고리가 겹침 선 아래에서 다 퍼지도록 조금 띄운다. PC 는 점이 가운데 정렬 칸 안이라 해당 없음 */
  .home main>.el-two + .el-two{padding-top:calc(3rem + var(--ov))}
}

/* ── 보철치료 「덜 깎는 쪽부터」 — 네 단계 카드 + 깎는 양 막대 ───────────
   표 대신 가로 네 칸. 카드마다 막대(--v)가 깎는 양이고 01 → 04 로 차오른다.
   위 흐름 선이 방향을 알려 준다. 이 섹션에만 쓴다. */
.cut-flow{max-width:120rem;margin:var(--s7) auto 0}
.cut-axis{position:relative;display:flex;justify-content:space-between;align-items:center;margin:0 0 2.4rem}
/* 양 끝 라벨 — 덜 깎음은 다크그레이, 더 깎음은 파랑 타원에 흰 글씨 */
.cut-axis span{position:relative;z-index:1;padding:.9rem 2rem;border-radius:var(--pill);
  background:#3D4247;font-size:1.5rem;font-weight:700;line-height:1;letter-spacing:-.02em;color:#fff}
.cut-axis span:last-child{background:var(--brand)}
/* 두 타원을 잇는 선 — 회색에서 파랑으로, 끝에 꺾쇠 */
.cut-axis::before{content:"";position:absolute;left:10rem;right:10.4rem;top:50%;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,#3D4247 0%,var(--brand) 100%);opacity:.45}
/* 끝은 속이 찬 삼각 화살촉 */
.cut-axis::after{content:"";position:absolute;right:9.6rem;top:50%;width:0;height:0;margin-top:-.7rem;
  border-top:.7rem solid transparent;border-bottom:.7rem solid transparent;border-left:1.2rem solid var(--brand)}
.cut-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;margin:0;padding:0;list-style:none}
.cut-steps>li{display:flex;flex-direction:column;padding:3.2rem 2.8rem 2rem;border:1px solid var(--line);
  border-radius:2rem;background:#fff;text-align:center}   /* 그림이 가운데라 글도 가운데로 맞춘다 */
.cut-steps .pic{display:flex;align-items:flex-end;justify-content:center;height:22rem;margin:0 0 2.4rem}
.cut-steps .pic img{display:block;height:18rem;width:auto;max-width:100%}
.cut-steps .pic.tall img{height:22rem}   /* 세로로 긴 임플란트 분해도 — 상자 높이를 꽉 채운다 */
.cut-steps .pic.empty{border-radius:1.2rem;background:#f4f7f8}   /* 그림이 올 때까지 줄만 맞춘다 */
.cut-steps .no{font-family:var(--sans);font-size:1.6rem;font-weight:800;letter-spacing:.04em;color:var(--brand)}
.cut-steps .nm{display:block;margin-top:.8rem;font-size:2.4rem;font-weight:800;line-height:1.35;
  letter-spacing:-.04em;color:var(--ink-strong)}
.cut-steps .nm a{color:inherit;text-decoration:none;border-bottom:2px solid var(--brand-light)}
.cut-steps .gauge{display:block;height:.8rem;margin:2.2rem 0 2.4rem;border-radius:10rem;background:#e9eef1;overflow:hidden}
.cut-steps .gauge i{display:block;width:var(--v);height:100%;border-radius:inherit;background:var(--brand)}
.cut-steps dl{margin:auto 0 0}
/* 선 → 문장 → 선 → 문장 → 카드 바닥을 모두 같은 간격(2rem)으로 — 첫 문장이 두 선 정가운데에 온다 */
.cut-steps dl>div{padding:2rem 0;border-top:1px solid var(--line2)}
.cut-steps dl>div:last-child{padding-bottom:0}
.cut-steps dt{font-size:1.4rem;font-weight:700;color:var(--ink3)}
.cut-steps dd{margin:0;font-size:1.8rem;line-height:1.5;color:var(--ink-strong)}
/* 인레이 재료 — 사진 왼쪽, 설명 오른쪽 */
.cut-mat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:5rem;align-items:center;
  max-width:100rem;margin:var(--s8) auto 0}
.cut-mat img{display:block;width:100%;height:auto;border-radius:2rem}
.cut-mat .tx{text-align:left}
.cut-mat b{display:block;font-family:var(--serif);font-size:3rem;font-weight:500;line-height:1.4;
  letter-spacing:-.05em;color:var(--ink-strong)}
.cut-mat p{max-width:none;margin:1.8rem 0 0;font-size:1.9rem;line-height:1.8;color:var(--ink2)}
.cut-flow + .t-note{margin-top:var(--s7)}
@media(max-width:1000px){
  .cut-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cut-axis{display:none}
  .cut-mat{grid-template-columns:minmax(0,1fr);gap:2.4rem}
}
@media(max-width:640px){
  .cut-steps{grid-template-columns:minmax(0,1fr)}
  .cut-steps>li{padding:2.6rem 2.4rem}
}

/* ── 매복 사랑니 「CT로 신경관까지의 거리를 봅니다」 — 장비 → 영상 ─────────
   왼쪽: 배경을 딴 CT 장비 PNG 를 오른쪽 전체 높이(영상 + 설명)만큼 길게.
   오른쪽: 검은 칸 영상, 그 아래 설명. 흰 동그라미 화살표가 영상 칸 가운데 높이에서
   두 칸 사이에 걸친다. 이 섹션에만 쓴다. */
/* ── CT 정밀 진단 .ct-duo — 왼쪽에 장비, 오른쪽에 평면 → CT 단면 ──────
   이 섹션이 파는 것은 CT 라 장비를 큰 쪽에 세운다.
   오른쪽은 위에서 아래로 파노라마(평면) → 말풍선 → CT 단면 순이고,
   말풍선 꼬리가 아래 CT 단면을 가리켜 「평면에서는 겹쳐 보이던 것이 CT 에서는」이
   두 사진 사이에서 그대로 읽힌다. */
/* 장비는 세로로 맞춰 들어가는 사진이라 칸이 넓어도 가로로는 더 커지지 않는다.
   칸만 넓으면 장비 좌우가 비어 오른쪽 묶음과 멀어 보이므로, 전체 폭을 줄여
   장비 실제 너비에 칸을 맞춘다. 두 덩어리가 붙고 묶음째로 가운데에 선다. */
.ct-duo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:2rem;
  align-items:center;max-width:100rem;margin:var(--s7) auto 0}
.ct-duo figure{position:relative;margin:0}

/* 왼쪽 — 장비. 이 칸이 주인공이라 높이를 길게 준다 */
.ct-duo .dev{height:80rem}
.ct-duo .dev .im{display:block;width:100%;height:100%}
.ct-duo .dev img{display:block;width:100%;height:100%;max-width:none;
  object-fit:contain;object-position:center}

/* 오른쪽 — 사진 두 장과 그 사이의 말풍선 */
.ct-duo .side{position:relative;min-width:0;display:grid;gap:2.2rem}
.ct-duo .shot{height:20rem;border-radius:1.6rem;overflow:hidden;background:#000}
.ct-duo .shot img{display:block;width:100%;height:100%;object-fit:cover}
/* CT 단면은 원본 비율(870:631)을 그대로 쓴다 — 높이를 못 박고 contain 하면
   좌우에 검은 띠가 남고, cover 로 채우면 사랑니와 신경관이 잘린다 */
.ct-duo .shot.slice{height:auto;aspect-ratio:870/631}

/* 말풍선 — 꼬리가 아래 CT 단면을 향한다.
   사진 칸보다 왼쪽으로 넓게 빼야 세 줄이 접히지 않는다.
   넘치는 만큼은 장비 칸의 빈 여백에 얹히므로 장비를 가리지 않는다 */
/* 사진 두 장과 같은 폭으로 둔다. 꼬리는 가운데.
   넓게 빼지 않으니 오른쪽 묶음이 통째로 CT 쪽에 붙는다 */
.ct-duo-tx{position:relative;padding:2rem 2.2rem;
  border-radius:1.6rem;background:var(--soft2);text-align:center}
.ct-duo-tx::after{content:"";position:absolute;left:50%;margin-left:-1.1rem;top:100%;
  border-top:1.4rem solid var(--soft2);
  border-left:1.1rem solid transparent;border-right:1.1rem solid transparent}
.ct-duo-tx p{margin:0;font-size:1.8rem;line-height:1.75;color:var(--ink2)}
.ct-duo-tx b{font-weight:800;color:var(--ink-strong)}

@media(max-width:800px){
  .ct-duo{grid-template-columns:minmax(0,1fr);gap:3rem}
  .ct-duo .shot{height:auto;aspect-ratio:4/3}
  .ct-duo .shot.slice{height:auto;aspect-ratio:4/3}
  /* 좁은 화면에서는 왼쪽으로 뺄 자리가 없다 — 칸 폭에 맞춘다 */
  .ct-duo-tx{padding:1.8rem 2rem}
  .ct-duo .dev{height:34rem}
  .ct-duo-tx p{font-size:1.5rem}
}

/* ── 진료시간 동그라미 변형 .hcards.hcirc ─────────────────
   히어로의 색 채운 동그라미와 같은 언어. 요일을 원 안에 넣고
   그 아래 시간을 크게 둔다. 표 선은 쓰지 않는다. */
.hcards.hcirc{border:0;gap:3rem 2.4rem;width:min(100%,100rem);margin-top:var(--s7)}
.hcards.hcirc .hc{padding:0;border:0}
.hcards.hcirc .hc + .hc{border-left:0}
.hcards.hcirc .cir{display:flex;align-items:center;justify-content:center;
  width:min(100%,19rem);aspect-ratio:1;margin:0 auto 3rem;padding:2rem;
  border-radius:50%;background:#414c52}
.hcards.hcirc .hc.hi .cir{background:var(--brand)}
.hcards.hcirc .cir b{font-size:2.4rem;font-weight:800;line-height:1.35;
  letter-spacing:-.03em;color:#fff}
.hcards.hcirc .hc .t{margin:0}
.hsub.soft{border-bottom:0;border-top:1px solid var(--line);margin-top:var(--s7)}
.hsub.soft p{padding:2.6rem 2.4rem}
@media(max-width:768px){
  .hcards.hcirc{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.2rem}
  .hcards.hcirc .cir{width:min(100%,12rem);margin-bottom:1.8rem;padding:1rem}
  .hcards.hcirc .cir b{font-size:1.7rem}
  .hcards.hcirc .hc .t{font-size:2.4rem}
  .hcards.hcirc .hc .d{font-size:1.4rem}
}

/* ================================================================
   모바일 정리 — 서브 페이지 (2026-09-22, 레퍼런스 11dent 모바일)
   ★ PC 에는 절대 닿지 않는다 — 전부 max-width 900 / 768 질의 안에 있다.
   ================================================================

   왜 여기 따로 두는가
   위 「모바일 — 11dent 의 768 이하 스케일」 블록에 h2 2.2rem · 섹션 여백 5rem 같은
   모바일 값이 이미 있는데, 선택자가 h2 · .shead 처럼 가볍다. PC 용
   .sp_main .shead h2{font-size:5rem} · .sp_main .shead{padding-top:12rem} 가 더 무거워
   그 모바일 값이 한 번도 먹지 않았다 — 폰에서 제목이 50px 로 3~5 줄을 차지하고
   섹션마다 위 120px · 아래 80px 이 비어 있던 까닭이다.
   파일 맨 끝에 PC 규칙과 같은 무게로 다시 적어 이긴다. */

/* ① 프론트의 모바일 글자 비율표를 시안에도 — dev/web/tools/build-content.mjs 15)
      프론트는 이 표를 site.css 복사본 끝에 붙여 쓰는데 시안에는 없어서,
      터널로 보는 시안이 실제 사이트보다 훨씬 크게 나왔다. 값 · 끊는 폭(900)을 그대로 옮긴다.
        30 서브 비주얼 제목 / 24 섹션 제목 / 17 카드 제목 · FAQ 질문 / 15 본문 / 14 보조 */
@media(max-width:900px){
  .sub-kv h1{font-size:3rem}
  .sp_main .shead h2,
  .sp_main .r-lead h2,
  .sp_main .r-sec>.hd h2,
  .el-head h2{font-size:2.4rem}
  .c-cards>.card:not(.link) b,
  .c-cards.boxed.flat>.card:not(.link) b,
  .faq summary{font-size:1.7rem}
  .sp_main .lead,
  .sp_main>p,
  .el-two-tx p,
  .el-lead,
  .faq .ans,
  .fb-hours dd b{font-size:1.5rem;line-height:1.7}
  .sp_main .lead,.sp_main>p,.sp_main .t-note,.el-two-tx p,.el-lead,
  .faq .ans,.el-head p,.sub-kv h1,.shead h2{text-wrap:pretty}
  .c-cards>.card:not(.link) span,
  .c-cards.boxed.flat>.card:not(.link) span:not(.cx-tag),
  .breadcrumb,
  .el-view,
  .el-more,
  .fb-hours dt b,
  .fb-hours dt em,
  .sp_main .t-note{font-size:1.4rem}
}

/* ② 폰 — 일레븐처럼 첫 화면에 내용이 보이게 조인다 */
@media(max-width:768px){
  /* 키비주얼 — 36rem 이면 첫 화면의 절반 가까이를 사진이 쓴다(일레븐 약 20rem) */
  .sub-kv{height:26rem}
  .sub-kv .tx{padding-top:5rem}

  /* 빵부스러기 — 일레븐 모바일에는 없고, 의료진 소개처럼 두 줄로 접히는 곳도 있었다.
     폰에서는 햄버거 메뉴가 길찾기를 맡고, 검색엔진은 JSON-LD(BreadcrumbList)를 읽는다.
     PC 에서는 그대로 보인다 — 위 「레퍼런스엔 없지만 길찾기와 검색에 필요하다」 결정은 PC 기준이다. */
  .breadcrumb{display:none}

  /* 섹션 머리 — PC 값 12rem / 8rem 이 폰에 그대로 먹던 것 */
  .sp_main .shead{padding-top:5rem;margin-bottom:3rem}
  .sp_main .shead h2,
  .sp_main .r-lead h2,
  .sp_main .r-sec>.hd h2{margin-top:1rem;letter-spacing:-.06em;line-height:1.35}
  /* 섹션 머리 위 점 — 4.4rem · 위 5rem 아래 4rem 은 폰에서 한 화면의 1/6 을 쓴다 */
  .sp_main section.blk>.shead::before{width:2.2rem;height:2.2rem;margin:0 auto 1.6rem}
  /* 머리글(파란 라벨) — 표의 14(보조)로 */
  .snum.ko{font-size:1.4rem;margin-bottom:.4rem}

  /* 첫 섹션 — 키비주얼과 제목 사이, 제목과 동그라미 사이 */
  .sp_main>*:first-child{padding-top:3.4rem}
  .blk.r-hero>.shead{margin-bottom:3.4rem}
  .blk.r-hero>.lead{margin-top:3.4rem}
  .sp_main .lead{margin-top:1.4rem}

  /* 테두리 카드 — 2열 한 칸이 170px 인데 제목 24 · 본문 19 가 그대로라 한 줄에 서너 자씩 끊겼다.
     표의 17 / 14 로 내리고 안쪽 여백도 폭에 맞춘다(사진은 여백만큼 끌어내 테두리에 붙이는 그대로) */
  .c-cards.boxed{gap:1.2rem}
  .c-cards.boxed>.card:not(.link),
  .c-cards.g4.boxed>.card:not(.link){padding:2.4rem 1.6rem}
  .c-cards.boxed>.card:not(.link):has(img):not(:has(.st)){padding-bottom:2rem}
  .c-cards.boxed>.card:not(.link) img,
  .c-cards.g4.boxed>.card:not(.link) img{width:calc(100% + 3.2rem);margin:-2.4rem -1.6rem 1.6rem;
    border-radius:1.6rem 1.6rem 0 0}
  .c-cards.boxed>.card:not(.link){border-radius:1.6rem}
  .c-cards.boxed>.card:not(.link) b{margin-bottom:.8rem;font-size:1.7rem}
  .c-cards.boxed>.card:not(.link) span{font-size:1.4rem;line-height:1.65}
  /* 제목 끝의 「때」 한 글자가 혼자 다음 줄로 내려가던 것 — 줄을 고르게 나눈다(대표 지적 2026-09-23).
     낱말 중간에서 끊지 않게 keep-all 도 함께 */
  .c-cards.boxed>.card:not(.link) b,
  .c-cards>.card:not(.link) b{text-wrap:pretty;word-break:keep-all}

  /* 직답 블록(점 넷 아래 한 문단) — 폰에서 20px 였다. 처음엔 강조 문단이라 17 로 뒀는데
     여러 줄짜리 본문이라 다른 본문(15)보다 커 보였다(대표 지적 2026-09-23). 표의 15 로 맞춘다.
     강조는 굵은 글씨가 맡는다 */
  .sp_main .c-answer p{font-size:1.5rem;line-height:1.75}
  /* 인사말 파란 칸 — 소제목을 섹션 제목(24)보다 크지 않게, 본문은 표의 15 */
  .p-info .gt.tx h3{font-size:2.4rem}
  .p-info .gt.tx p{font-size:1.5rem;line-height:1.8}

  /* 체크 목록 — 760 이하 값(제목 19 · 본문 19)이 그대로라 카드 한 장이 반 화면을 썼다 */
  .c-list:not(.spec)>.li{padding:2rem 1.8rem}
  .c-list:not(.spec)>.li>b{font-size:1.7rem;margin-bottom:.6rem;gap:.8rem}
  .c-list:not(.spec)>.li>b::before{width:2rem;height:2rem;background-size:1.1rem}
  .c-list:not(.spec)>.li>p,
  .c-list.lg:not(.spec)>.li>p{font-size:1.5rem;line-height:1.7}
  .c-list.one>.li{padding:2rem 1.8rem}
  .c-list.one>.li>p{margin-left:2.8rem}

  /* 그림 + 목록 나란히(.figsm) — 900 이하 한 줄 규칙보다 이 조합의 두 칸 규칙이 무거워
     폰에서도 그림 옆에 한 줄 네 자짜리 목록이 붙어 있었다. 위아래로 쌓고 그림은 제 비율로 */
  /* ★ 예방 쪽 일부는 HTML 에 style="grid-template-columns:…" 가 박혀 있어 CSS 로는 못 이긴다.
     인라인을 지우면 PC 배치가 바뀌므로, 폰에서만 !important 로 덮는다 */
  .c-split.figbig.figsm,
  .c-split.figbig.rev{grid-template-columns:minmax(0,1fr) !important;gap:2rem}
  /* .rev 는 사진이 왼쪽 칸이라 한 줄로 쌓으면 사진이 위로 온다 — 글을 먼저 읽게 순서를 바꾼다 */
  .c-split.figbig.rev>.tx{order:1}
  .c-split.figbig.rev>.fig{order:2}
  .c-split.figbig.figsm>.fig{min-height:0}
  .c-split.figbig.figsm>.fig img{position:static;display:block;width:min(100%,28rem);
    height:auto;margin:0 auto}

  /* 단계 카드(도해가 상자 위에 절반 걸친 것) — 도해 20rem 이 한 칸(170px)보다 넓어 양옆으로 넘쳤다.
     도해를 칸 폭 안으로 줄이고 그만큼 상자 위 여백도 줄인다. 글자는 표의 17 / 14 */
  .c-cards.step4>.card:has(.st){margin-top:7rem;padding:8.6rem 1.2rem .6rem}
  .c-cards.step4.figs>.card:has(.st) img{width:13rem;box-shadow:0 0 0 .5rem #fff}
  .c-cards.step4>.card:has(.st) b{font-size:1.7rem}
  .c-cards .st{margin-top:1.2rem}
  .c-cards .st p{font-size:1.4rem;min-height:6rem;padding:1.2rem .2rem}
  /* 하단 관련 페이지 사진 카드(.card.link, 모든 서브 페이지 3장) — 2열이라 셋째가 혼자 한 줄을
     차지해 오른쪽이 비었다. 폰에서는 앞의 두 장만 보인다(대표 지시 2026-09-22) */
  .c-cards>a.card.link:nth-child(n+3){display:none}

  /* 일반진료 갈래 카드 — 제목 22 · 설명 19 가 데스크톱 값 그대로라 폰에서 컸다. 표의 17 / 14 로 */
  .c-branch b{font-size:1.7rem;line-height:1.4}
  .c-branch .d{font-size:1.4rem;line-height:1.6}
  .c-branch .n{min-height:4.4rem;font-size:1.4rem;margin-bottom:1rem}
  /* 파란 머리글처럼 제목 · 설명도 가운데로(대표 지시 2026-09-23).
     설명만 가운데로 두면 왼쪽에 붙은 제목과 어긋나 보여 둘을 같이 맞춘다 */
  .c-branch b,.c-branch .d{text-align:center}

  /* 보철 「덜 깎는 쪽부터」 단계 카드(.cut-steps) — 그림 칸 220px · 이름 24 · 값 18 이라
     카드 한 장이 한 화면을 다 썼다. 그림 · 글자 · 여백을 한 단계씩 줄인다(대표 지적 2026-09-23) */
  .cut-steps{gap:1.2rem}
  .cut-steps>li{padding:2rem 1.8rem 1.4rem}
  .cut-steps .pic{height:11rem;margin-bottom:1.4rem}
  .cut-steps .pic img{height:9rem}
  .cut-steps .pic.tall img{height:11rem}
  .cut-steps .no{font-size:1.3rem}
  .cut-steps .nm{margin-top:.4rem;font-size:1.7rem}
  .cut-steps .gauge{height:.6rem;margin:1.2rem 0 1.4rem}
  .cut-steps dl>div{padding:1rem 0}
  .cut-steps dt{font-size:1.2rem}
  .cut-steps dd{font-size:1.4rem;line-height:1.5}
  .cut-mat b{font-size:2rem}
  .cut-mat p{margin-top:1rem;font-size:1.5rem;line-height:1.7}

  /* 오시는 길 버스 안내 — 1100 이하에서 한 열로 접혀 방면과 번호가 위아래로 갈라졌다.
     폰 폭(390)에도 「강변역 방면 | 9 92 95」가 한 줄에 들어간다. 두 열로 되돌리고 글자를 줄인다 */
  .p-info .wbus{grid-template-columns:auto minmax(0,1fr);gap:0 1.6rem;align-items:center}
  .p-info .wbus dt{justify-self:start;padding:1.2rem 0;font-size:1.4rem;
    border-top:1px solid var(--line2)}
  .p-info .wbus dd{padding:1.2rem 0;border-top:1px solid var(--line2);gap:.2rem 1.2rem}
  .p-info .wbus dt:first-of-type,
  .p-info .wbus dd:first-of-type{border-top:0;padding-top:0}
  .p-info .wbus dd b{font-size:1.8rem}
  .p-info .wbus dd span{font-size:1.3rem}
  .p-info .wstop{margin-bottom:1.6rem;padding-bottom:1.4rem;font-size:1.4rem}
  .p-info .wstop em{margin-left:.8rem;font-size:1.5rem}
  .p-info .wdet .wcol h3{margin-bottom:2rem;font-size:1.8rem}
  .p-info .wdet .ic{width:5.6rem;height:5.6rem;margin-bottom:1.8rem}
  /* 지하철 한 줄 — 아이콘 5.6rem 이 제목(1.8rem)보다 훨씬 커서 제목이 줄 위쪽에 붙어 보였다.
     아이콘을 줄이고 제목과 세로 가운데를 맞춘다(대표 지시 2026-09-23) */
  .p-info .wdet .wline{gap:.6rem 1.2rem;padding:2.6rem 0}
  .p-info .wdet .wline .ic{width:4rem;height:4rem;margin:0;align-self:center}
  .p-info .wdet .wline .ic svg{width:2rem;height:2rem}
  .p-info .wdet .wline h3{margin:0;align-self:center;font-size:1.8rem}   /* 위 .wcol h3 의 아래 여백이 가운데를 10px 틀었다 */
  .p-info .wdet .wline p{flex:0 0 100%;font-size:1.5rem}

  /* 핵심경쟁력 — 원장 소개 제목(24 / 40)과 연혁(56 / 24 / 19)이 데스크톱 값 그대로라 폰에서 컸다.
     표의 24(제목) · 17(항목) · 14(보조)에 맞추고 연도는 숫자라 한 단계 크게(대표 지시 2026-09-23) */
  .r-doctor .ttl{font-size:1.7rem}
  .r-doctor .ttl b{font-size:2.4rem}
  .c-years .y{font-size:3.2rem}
  .c-years b{font-size:1.7rem}
  .c-years .n{font-size:1.4rem}

  /* 사진에 절반 걸치던 동그라미 셋 — 폰에서는 사진이 작아 가려지는 비중이 크다.
     사진 아래로 내린다(대표 지시 2026-09-23) */
  .sec-fig + .c-golinks{margin-top:2.4rem}

  /* 핵심경쟁력 섹션 사이 — 구분선 위아래로 10rem 씩(200px) 비어 폰에서 빈 화면이 지나갔다.
     한 줄(--r-gap)로 조절되게 되어 있어 그 값만 줄인다. 뒤따르는 하단 블록도 같이 */
  .r-index,.r-sec{--r-gap:4.5rem}
  .r-sec:last-of-type + .blk{padding-top:4.5rem}

  /* 연혁 — 640 이하에서 한 칸씩 쌓여 세 줄(화면 한 판)을 썼다. 폰에서도 세 칸 한 줄로.
     칸이 110px 남짓이라 「몇 년째」는 뺀다(연도만 봐도 읽힌다, 대표 지시 2026-09-23) */
  .c-years{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
  .c-years .y{font-size:2.4rem}
  .c-years b{margin-top:.6rem;font-size:1.3rem;letter-spacing:-.04em;word-break:keep-all}
  .c-years .n{display:none}

  /* 진료 항목 줄 — 640 이하에서 구분선을 빼 두었더니 글자만 덩그러니 놓였다(대표 지적 2026-09-23).
     두 칸 격자로 세워 줄이 접히는 자리를 고정하고, 각 줄의 두 번째 칸 앞에만 선을 둔다 */
  .c-pills{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 0;justify-content:stretch}
  .c-pills li{padding:0 1.2rem;font-size:1.7rem;text-align:center;
    border-left:1px solid #d8dfe5}
  .c-pills li:nth-child(odd){border-left:0}

  /* 첫 화면 원형 썸네일(.c-circles — 임플란트 · 사랑니 · 턱관절 · 매복 등) —
     원 160px 에 글자 19px 이라 핵심경쟁력의 같은 줄(.r-thumbs, 원 130px · 글자 16px)보다 컸다.
     같은 값으로 맞춘다(대표 지시 2026-09-23) */
  .c-circles .ph{width:min(100%,13rem);margin-bottom:1.4rem}
  .c-circles b{font-size:1.6rem}
  .c-circles .d{font-size:1.4rem}
  .c-circles.solid .ph b{font-size:1.6rem}

  /* 임플란트 구조 동그라미 셋 — 760 이하에서 한 칸씩 세로로 쌓이고 첫 칸이 사진을 덮었다.
     핵심경쟁력의 동그라미 셋처럼 사진 아래 한 줄로 둔다(대표 지시 2026-09-23) */
  .oc-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2.4rem 0 0;padding:0}
  .oc-list .oc{width:auto;max-width:11rem;height:auto;aspect-ratio:1;margin:0 auto;padding:1rem;gap:.2rem}
  .oc-list .oc i{font-size:1.1rem}
  .oc-list .oc b{font-size:1.4rem;letter-spacing:-.05em}

  /* 선으로만 나눈 칸(.c-cards.divided — 임플란트 검사 3 · 뼈 상태 3) —
     두 칸 격자라 셋째가 혼자 남고 설명이 한 줄에 여섯 자씩 끊겼다.
     한 줄에 하나씩, 제목을 왼쪽 라벨로 두고 설명을 오른쪽에(대표 선택 2026-09-23).
     오시는 길 버스 안내와 같은 결이다 */
  .c-cards.divided{grid-template-columns:minmax(0,1fr);gap:0;margin-top:2.4rem}
  .c-cards.divided>.card:not(.link){display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:0 1.4rem;align-items:start;padding:1.4rem 0;border-top:1px solid var(--line2);text-align:left}
  .c-cards.divided>.card:not(.link):first-child{border-top:0;padding-top:0}
  .c-cards.divided>.card:not(.link) b{margin:0;font-size:1.5rem;color:var(--brand);
    white-space:nowrap;letter-spacing:-.04em}
  .c-cards.divided>.card:not(.link) span{font-size:1.4rem;line-height:1.65;text-align:left}
  /* 설명이 시작하는 자리를 칸마다 같게 — 라벨 칸을 바깥 격자에서 한 번만 재고(subgrid)
     세 줄이 그 폭을 함께 쓴다. CT 처럼 짧은 라벨이 있어도 설명 시작점이 어긋나지 않는다.
     subgrid 를 모르는 브라우저에서는 위 규칙대로 칸마다 라벨 폭을 잡는다(줄마다 조금 어긋날 뿐) */
  @supports (grid-template-columns:subgrid){
    .c-cards.divided{display:grid;grid-template-columns:auto minmax(0,1fr)}
    .c-cards.divided>.card:not(.link){grid-column:1/-1;grid-template-columns:subgrid}
  }

  /* 자연치아 보존 목록(.split-list) — 제목 24 · 본문 20 이 데스크톱 값 그대로라 폰에서 컸다.
     표의 17 / 15 로 맞추고 칸 사이 여백(34px)도 줄인다 */
  .split-list li{padding:2.2rem 0}
  .split-list b{font-size:1.7rem;margin-bottom:.6rem}
  .split-list span{font-size:1.5rem;line-height:1.7}

  /* 보증 표 — 칸 넷을 390px 에 나눠야 하는데 항목 19 · 기간 21 · 설명 17 이라
     「임플란트 뿌리(픽스처)」가 세 줄, 「타원 보철 수리 20만원」이 세 줄로 접혔다.
     항목 15 · 기간 18 · 나머지 13 으로 줄이고 칸 여백도 좁힌다(대표 지적 2026-09-23) */
  .c-table.wh-table th{padding:1.2rem .6rem;font-size:1.2rem;letter-spacing:0}
  .c-table.wh-table td{padding:1.6rem .6rem;font-size:1.3rem}
  .c-table.wh-table tbody td:first-child{padding-left:1rem;font-size:1.5rem}
  .c-table.wh-table tbody td:nth-child(2),
  .c-table.wh-table tbody td:nth-child(3){font-size:1.8rem}

  /* 사례 칸(.c-cases — 임플란트 · 매복 사랑니) — 제목 20 · 설명 16 이 데스크톱 값 그대로였다.
     표의 17 / 14 로. 칸 사이 여백도 조금 줄인다 */
  .case-t{margin:1.4rem 0 .4rem;font-size:1.7rem}
  .c-cases .case p{font-size:1.4rem;line-height:1.65}
  .c-cases>.case,.c-cases>.case:nth-child(odd){padding:2.6rem 0}
  .c-cases>.case:nth-child(2){padding-top:2.6rem}
  .c-cases>.case:first-child{padding-top:0}
  .case-imgs figcaption{font-size:1.2rem;padding:.4rem .9rem}

  /* 자주 묻는 질문 — Q 와 A 의 왼쪽 끝이 어긋나 있었다(질문은 summary 안쪽 여백 .6rem,
     답변은 .ans 안에서 .6rem 이라 기준이 서로 달랐다). 둘 다 칸 왼쪽 끝(0)에 세우고,
     질문 글자와 답변 글자도 같은 자리(배지 2.2rem + 사이 1rem = 3.2rem)에서 시작한다.
     제목은 한 단계 작게(대표 지시 2026-09-23) */
  /* 배경을 화면 좌우 끝까지 빼고 글은 본문과 같은 자리에서 시작한다(대표 제안 2026-09-23).
     안쪽 여백을 0 으로 두면 Q 와 +가 회색 면의 모서리에 붙어 보였다.
     .wrap 좌우 여백이 1.5rem 이므로 그만큼 밖으로 빼고, 같은 값을 안쪽 여백으로 되돌린다 */
  .faq{margin-left:-1.5rem;margin-right:-1.5rem;padding:2.4rem 1.5rem;border-left:0;border-right:0}
  summary{padding:1.6rem 0;gap:1rem;font-size:1.6rem;align-items:flex-start}
  summary .q{flex:0 0 2.2rem;width:2.2rem;height:2.2rem;font-size:1.4rem;line-height:2.2rem}
  summary .cv{height:2.2rem}
  summary .cv::before{font-size:2rem;line-height:2.2rem}
  .ans{padding:0 0 1.6rem 3.2rem;font-size:1.4rem;line-height:1.75}
  .ans::before{left:0;width:2.2rem;height:2.2rem;font-size:1.4rem;line-height:2.2rem}

  /* 전악 VS 비교표 — 한 칸이 138px 인데 값 17 · 항목 14 라 「임플란트 · 잇몸 분담」이 세 줄로 접혔다.
     값 14 · 항목 12 로 줄이고 가운데 항목 열도 좁힌다. 좌우로 맞대어 보는 짜임은 그대로 둔다
     (세로로 쌓으면 두 방식을 한눈에 비교할 수 없다) */
  .p-imp .c-vs{grid-template-columns:minmax(0,1fr) 6.4rem minmax(0,1fr)}
  .p-imp .c-vs .hd{padding:1.2rem .6rem;font-size:1.4rem;letter-spacing:-.04em}
  .p-imp .c-vs .v{padding:1.2rem .6rem;font-size:1.4rem;line-height:1.45}
  .p-imp .c-vs .k{padding:1.2rem .2rem;font-size:1.2rem;letter-spacing:-.04em;line-height:1.4}
  .p-imp .c-vs .verdict{padding:0 1rem 1.6rem;font-size:1.7rem}
  .p-imp .c-vs .verdict span{margin-bottom:.6rem;font-size:1.3rem}
  .p-imp .c-vs .fig{padding:1.4rem 1rem 1rem}
  .p-imp .c-vs .vsmark{width:5rem;height:5rem;font-size:1.7rem}

  /* ── 폰 글자 크기 기준 밖으로 남아 있던 곳들 (2026-09-23) ──
     390px 에서 모든 쪽의 본문 글자를 재어 30 / 24 / 17 / 15 / 14 밖에 있던 것만 맞춘다.
     기준 = dev/web/tools/build-content.mjs 15) 의 표 */

  /* 아래 띠(공지사항 · 진료 안내) — 제목 32 · 목록 18 · + 28 */
  .fb h2{font-size:2.4rem;margin-bottom:2.4rem}
  .fb-plus{font-size:2.2rem;width:2.8rem;height:3.4rem}
  .fb-notice li{font-size:1.5rem;padding:.8rem 0;gap:1rem}
  .fb-notice time{font-size:1.3rem}

  /* 사이드 목차(본문 끝에 따라오는 「○○ 목차」) — 26 */
  .aside_title h4{font-size:1.7rem}
  .aside_sticky .aside_title h4{font-size:1.7rem}

  /* 인용 — 19~22 */
  .c-quote blockquote{font-size:1.7rem;line-height:1.7}
  .c-quote cite{font-size:1.4rem}

  /* 사진 위 글을 얹은 네 칸(.c-figcards) — 제목 18 · 설명 16 */
  .c-figcards figcaption b{font-size:1.5rem;margin-bottom:.4rem}
  .c-figcards figcaption span{font-size:1.3rem;line-height:1.5}

  /* 신경치료 맺음 한 줄 — 19 */
  .c-box.closing{font-size:1.5rem;line-height:1.75}   /* 맺음 상자 본문 20 → 15 */
  .c-box.closing .note,
  .c-box.closing .note.lg{font-size:1.5rem}

  /* 직답 문단(.sec-note.answer) · 도해 두 장 캡션 · 체크 결과 칸 */
  .sec-note.answer p{font-size:1.5rem;line-height:1.75}
  .sec-note.answer p b{font-size:inherit}
  .sec-note h3{font-size:1.7rem}
  .sec-note p{font-size:1.5rem}
  .sec-note p.em{font-size:1.5rem}
  .c-figpair figcaption{margin-top:1rem;font-size:1.4rem}
  .c-box b{font-size:1.7rem}
  .c-box>span,.c-box p{font-size:1.5rem}

  /* 사진 위 인용(.qv-copy) · 진료 시간 두 칸(.hsub) · 지도 띠 · 주소 */
  .qv-copy blockquote{font-size:1.7rem}
  .hsub p{font-size:1.5rem}
  .hsub em{font-size:1.4rem}
  .p-info .map-bar p{font-size:1.5rem}
  .p-info .ad-addr{font-size:1.7rem}
  .p-info .pane.row h3{font-size:1.7rem}
  .p-info .wdet .wcol h3{font-size:1.7rem}

  /* 전악 카드 · 단계 번호 */
  .p-imp .i-card h3,.p-imp .i-tx h3{font-size:1.7rem}
  .p-imp .i-card p{font-size:1.4rem;line-height:1.7}   /* 13 → 14 (대표 지시 2026-09-23) */
  /* 「뼈이식 없이 식립하는 경우」 같은 판정 상자 — 제목 26 · 항목 20 이 데스크톱 값 그대로였다 */
  .p-imp .i-jbox{padding:2rem 1.8rem;border-radius:1.2rem}
  .p-imp .i-jbox h3{margin-bottom:1.4rem;padding-bottom:1.2rem;font-size:1.7rem}
  .p-imp .i-jbox li{padding:.6rem 0 .6rem 1.6rem;font-size:1.4rem;line-height:1.6}
  .p-imp .i-jbox li::before{top:1.5rem}

  /* 격자 아래 한 줄 설명(.grid-note) — .one 에 1.8rem 이 따로 붙어 본문(15)보다 컸고
     위 여백도 7rem 이었다. 본문 크기로 맞추고 여백을 줄인다 */
  .p-imp .grid-note,.p-imp .judge + .grid-note{margin-top:3.4rem}
  .p-imp .grid-note.one{font-size:1.5rem;line-height:1.7}

  /* 면 없이 글만 두는 칸(.i-flat — 당뇨 · 고혈압 등) — 13 이라 본문보다 작았다 */
  .p-imp .i-flat{padding:2rem 1.8rem}
  .p-imp .i-flat h3{margin-bottom:.6rem;font-size:1.7rem}
  .p-imp .i-flat p{font-size:1.4rem;line-height:1.7}

  /* 단계 사진 카드 넓은 형(.step4.wide — 턱관절 검사 4 · 치료 4) —
     제목 24 가 섹션 제목과 같아 항목이 섹션처럼 보였다. 카드 제목 기준 17 로(대표 지적 2026-09-23) */
  .c-cards.step4.wide>.card b{font-size:1.7rem;margin-bottom:.4rem}
  .c-cards.step4.wide>.card span{font-size:1.4rem;line-height:1.6}
  .c-cards.step4>.card b{font-size:1.7rem}
  .c-cards.step4>.card span{font-size:1.4rem}
  /* 장비 이름 · 인용 띠 안 굵은 글씨 */
  .p-info .spec-name,.spec-name{font-size:1.7rem}
  .c-quote .tx b,blockquote b{font-size:inherit}

  /* 원장 인용 — 사진과 말풍선을 좌우로 두니 말풍선 폭이 200px 남짓이라
     한 줄에 예닐곱 자씩 끊겼다. 폰에서는 사진을 한 행에 두고 그 아래에 말풍선을 둔다
     (꼬리도 왼쪽에서 위로 옮긴다, 대표 제안 2026-09-23) */
  .c-quote{display:block;text-align:left}
  .c-quote .photo{width:6.4rem;height:6.4rem;margin:0 0 1.4rem}
  .c-quote .tx{padding:2rem 1.8rem}
  .c-quote .tx::before{left:2.4rem;top:-1.05rem;
    border-left:1px solid var(--line);border-bottom:0;border-top:1px solid var(--line);
    transform:rotate(45deg)}
  .c-quote blockquote{font-size:1.5rem;line-height:1.75}
  .c-quote blockquote > b:first-child{font-size:1.7rem}
  /* 이름 줄은 말풍선 아래가 아니라 사진 옆으로(대표 제안 2026-09-23).
     cite 는 말풍선(.tx) 안에 있어 흐름으로는 옮길 수 없다 — 사진 높이만큼의 자리에 띄워 앉힌다 */
  /* ★ cite 의 기준은 .c-quote 가 아니라 말풍선(.tx — position:relative)이다.
     말풍선 위쪽(사진 자리 = 사진 6.4 + 사이 1.4 = 7.8rem)으로 끌어올린다 */
  .c-quote cite{position:absolute;left:7.8rem;top:-7.8rem;width:calc(100% - 7.8rem);height:6.4rem;
    display:flex;align-items:center;margin:0;padding:0;border-top:0;
    font-size:1.3rem;line-height:1.5}
  .p-imp .i-n,.p-imp .i-no{font-size:1.8rem}

  /* 진료 시간 표의 휴진 줄 */
  .row.off b{font-size:1.5rem}

  /* 마지막으로 남은 곳들 — 전악 단계 번호 · 사랑니 소제목 · 인용 띠 · 규격 목록 · 카드 목록 */
  .p-imp .i-step .i-no,.p-imp .i-rlist .i-n{font-size:1.7rem}
  /* 번호 목록(.i-rlist) — 본문 17 이 제목 16 보다 커서 제목이 눌려 보였고,
     바로 위 문단(15)과도 크기가 벌어졌다. 제목 17 · 본문 15 로(대표 지적 2026-09-23) */
  .p-imp .i-rlist b{font-size:1.7rem;margin-bottom:.4rem}
  .p-imp .i-rlist span{font-size:1.5rem;line-height:1.7}
  .p-imp .i-rlist li{grid-template-columns:3.4rem minmax(0,1fr);gap:1.2rem;padding:1.8rem 0}
  .p-imp .i-rlist .i-n{width:3.4rem;height:3.4rem}

  /* 사진 아래 마무리 문장(.i-split + .t-note) — 각주용 14 라 본문보다 작았고,
     위 여백이 7rem(70px)이라 사진과 글 사이가 한참 비었다. 본문 15 · 여백 3.4rem 으로 */
  .p-imp .i-split + .t-note{margin:3.4rem auto 1.4rem;font-size:1.5rem;line-height:1.7}

  /* 다섯 단계 카드(.i-steps.n5) — 다섯 칸을 폰 폭에 그대로 세워 한 칸이 59px 이었다.
     (1024 이하에서 두 칸으로 접는 규칙이 있는데 .n5 가 더 무거워 이기지 못했다)
     폰에서는 한 줄에 하나씩, 사진을 왼쪽에 두고 번호 · 제목 · 설명을 오른쪽에 둔다 */
  .p-imp .i-steps,.p-imp .i-steps.n3,.p-imp .i-steps.n5{grid-template-columns:minmax(0,1fr);
    gap:1.2rem;margin-top:3.4rem}
  .p-imp .i-step{display:grid;grid-template-columns:9.6rem minmax(0,1fr);
    gap:0 1.4rem;align-items:center;padding:1.2rem;background:#f4f6f8}
  .p-imp .i-step>img,.p-imp .i-step .i-ph{border-radius:.8rem}
  .p-imp .i-step .i-body{padding:0;text-align:left;border-radius:0}
  .p-imp .i-step h3{margin:0 0 .4rem;font-size:1.7rem}
  .p-imp .i-step p{font-size:1.5rem;line-height:1.65}
  /* 번호 — 사진 위에 얹으면 사진을 가리고 자리도 애매하다(대표 지적 2026-09-23).
     사진은 왼쪽 칸에 두 줄 높이로 두고, 오른쪽 칸 첫 줄에 번호 · 제목을 나란히 놓는다 */
  .p-imp .i-step>img,.p-imp .i-step .i-ph{grid-column:1;align-self:center}
  .p-imp .i-step .i-body{grid-column:2}
  /* 번호는 제목 앞에 붙인다(대표 지시 2026-09-23). 번호는 .i-body 밖의 형제라 겹쳐 쓸 수 없어,
     카드를 기준으로 제목 첫 줄 자리에 세우고 제목 첫 줄만 그만큼 들여쓴다.
     왼쪽 = 카드 여백 1.8 + 사진 칸 9.6 + 사이 1.4 = 12.8rem */
  .p-imp .i-step .i-no{left:12.8rem;top:1.7rem;transform:none;
    width:2.2rem;height:2.2rem;font-size:1.3rem;box-shadow:none}
  .p-imp .i-step h3{text-indent:3.2rem}

  /* 진료 원칙 카드(.i-points) — 세로 카드에 아이콘 원이 위에 걸쳐 한 장이 화면의 반을 썼다.
     폰에서는 가로형으로 — 아이콘을 왼쪽에 넣고 글을 오른쪽에 둔다(대표 제안 2026-09-23) */
  .p-imp .i-points{gap:1.2rem;margin-top:3.4rem}
  /* ★ 위 1000 이하 규칙 .i-points.ring>.i-pt{padding:6.2rem …} 가 더 무거워 아이콘 자리로
     비워 둔 윗여백 62px 이 가로형에서도 남아 있었다. 같은 무게로 다시 적어 이긴다 */
  .p-imp .i-pt,
  .p-imp .i-points.ring>.i-pt{display:grid;grid-template-columns:4.4rem minmax(0,1fr);gap:0 1.4rem;
    align-items:center;padding:1.6rem 1.8rem;border-radius:1.2rem;text-align:left}
  .p-imp .i-ic{position:static;transform:none;width:4.4rem;height:4.4rem;
    grid-row:1/4;align-self:center}
  .p-imp .i-ic svg{width:2.4rem;height:2.4rem}
  .p-imp .i-pt .key{margin-bottom:.2rem;font-size:1.7rem}
  .p-imp .i-pt h3{margin:0 0 .6rem;font-size:1.5rem;font-weight:700;color:var(--ink-strong)}
  .p-imp .i-pt p{font-size:1.4rem;line-height:1.6}
  .p-imp .i-points.ring>.i-pt>:not(.i-ic){max-width:none;margin-left:0;margin-right:0}
  .sp_main .sd-sub{font-size:1.7rem;margin-top:3.4rem}
  .c-qband b{font-size:1.7rem}
  /* 규격 목록(.c-list.spec — 장비 제품 · 방식 · 부위 …) — 760 이하에서 한 칸으로 접혀
     항목과 값이 위아래로 갈라지고 줄마다 2.2rem 씩 비었다. 폰에서도 두 칸으로 되돌린다 */
  .c-list.spec>.li{grid-template-columns:6.4rem minmax(0,1fr);gap:0 1.2rem;
    align-items:baseline;padding:1.2rem .2rem}
  .c-list.spec>.li>b{font-size:1.3rem}
  .c-list.spec>.li>p{font-size:1.5rem}

  /* 「당일 발치」 표(.c-table.left) — 폰에서는 줄마다 블록으로 풀리면서
     같은 라벨(「당일 발치」)이 다섯 번 반복되고 값이 들쭉날쭉했다(대표 지적 2026-09-23).
     그냥 두 칸 표로 되돌린다 — 머리글은 위에 한 번만 나온다 */
  .c-table.left table{display:table;table-layout:fixed}
  .c-table.left thead{display:table-header-group}
  .c-table.left tbody{display:table-row-group}
  .c-table.left tr{display:table-row;padding:0;border-bottom:0}
  .c-table.left td{display:table-cell;padding:1rem .6rem;border-bottom:1px solid #eee;
    font-size:1.4rem;text-align:left;word-break:keep-all}
  .c-table.left td:not(:first-child):before{content:none}
  .c-table.left tbody td:first-child{padding:1rem .6rem;font-size:1.4rem}
  .c-table.left td:last-child{padding-bottom:1rem;text-align:right;color:var(--ink2)}
  .c-table.left th{padding:.8rem .6rem;font-size:1.3rem}
  .c-table.left th:last-child{text-align:right}

  /* 보험 적용 범위 상자(.c-box.plain) — 값 칸이 white-space:nowrap 이라
     「신경관 · 공기주머니와 가까운 경우 적용」이 상자 밖으로 18px 넘쳤다(값이 잘렸다).
     폰에서는 줄을 바꾸게 풀고, 낱말 중간에서 끊기지 않게 keep-all */
  .c-box.plain .h{padding:1.2rem 1.4rem}
  .c-box.plain .h b{font-size:1.5rem}
  .c-box.plain .h span{font-size:1.2rem}
  .c-box.plain td{padding:1rem 1.4rem;font-size:1.4rem;word-break:keep-all}
  .c-box.plain td:last-child{white-space:normal}
  .c-box.plain .f{padding:1.2rem 1.4rem;font-size:1.3rem}
  .card li{font-size:1.5rem}
  .c-quote blockquote b{font-size:inherit}
  /* 장비와 시설 · 오시는 길 첫 제목 — 의료진 소개 첫 제목(.claim-lead · .page-claim 모바일 값)과 같게
     (대표 지시 2026-09-22 · 오시는 길은 09-23). 지역 페이지 넷(.wdet.n3)은 제목이 길어 그대로 둔다.
     섹션 머리 윗여백 5rem 이 더 붙어 점이 60px 아래에서 떴고, 점 22px · 제목 24px 로 달랐다.
     의료진 소개: 점 2.5rem · 점 아래 4rem · 제목 위 3rem · 제목 2.8rem · 자간 normal */
  .p-info>section.blk.dot:has(.eqslide.lead)>.shead,
  .p-info>section.blk.dot:has(.ad)>.shead{padding-top:0}
  .p-info>section.blk.dot:has(.eqslide.lead)>.shead::before,
  .p-info>section.blk.dot:has(.ad)>.shead::before{width:2.5rem;height:2.5rem;margin:0 auto 4rem}
  .p-info>section.blk.dot:has(.eqslide.lead)>.shead h2,
  .p-info>section.blk.dot:has(.ad)>.shead h2{margin-top:3rem;font-size:2.8rem;
    line-height:1.3;letter-spacing:normal}
}

/* ================================================================
   모바일 메뉴 서랍 — 다시 꾸밈 (2026-09-22, 레퍼런스 11dent)
   ★ max-width:1099px + body.nav-open 안에서만 — PC 헤더 · 메가메뉴에는 닿지 않는다.

   고친 것
   · 사진 위(html .kv)에서 열면 대분류 글자가 흰색(#fff) 그대로라 흰 서랍 위에서 안 보였고,
     헤더도 투명한 채라 흰 로고가 사진 위에 떠 있었다 → 서랍이 열리면 흰 헤더 · 컬러 로고
   · 하위 37개가 전부 펼쳐져 한참 굴려야 했다 → 대분류만 두고 누르면 그 아래가 펼쳐진다
     (프론트 MobileNav.tsx 와 같은 약속: li.has-sub / li.is-open. 시안은 site.js 가 단다)
   · 대분류는 굵은 17px 한 줄 버튼 + 오른쪽 화살표, 펼친 하위는 굵은 15px 두 칸 —
     바탕은 11dent 처럼 흐린 회색을 서랍 좌우 끝까지 꽉 채운다(둥근 판 아님, 대표 지시) */
@media(max-width:1099px){
  html body.nav-open header.site{background:#fff;border-bottom:1px solid var(--line)}
  html body.nav-open header.site .logo .w{display:none}
  html body.nav-open header.site .logo .c{display:block}
  html body.nav-open header.site .burger span{background:var(--ink)}

  /* 로고 밑 구분선 — 서랍 위 테두리로 긋는다. 서랍은 헤더(아래 「모바일 헤더 높이」 6.5rem)
     바로 아래에서 시작한다 */
  body.nav-open nav.gnb{top:6.5rem;padding:1.2rem 2rem 12rem;background:#fff;border-top:1px solid #eef0f3}
  body.nav-open .lnb{align-items:stretch;line-height:normal}
  body.nav-open .lnb>li{border-bottom:1px solid #eef0f3}
  body.nav-open .lnb>li>a,
  html .kv.nav-open .lnb>li>a,
  html .kv.nav-open header.site.solid .lnb>li>a{display:block;position:relative;
    padding:2rem 3.4rem 2rem .4rem;border-radius:0;
    font-size:1.7rem;font-weight:700;line-height:1.4;letter-spacing:-.02em;
    color:#000;text-align:left}
  body.nav-open .lnb>li.is-open>a,
  html .kv.nav-open .lnb>li.is-open>a{color:#000}
  body.nav-open .lnb>li>a::before{display:none}
  /* ::after 는 PC 탭 곡선 장식(45x45 · box-shadow · opacity:0)이라 물려받는 값을 전부 되돌린다 */
  body.nav-open .lnb>li.has-sub>a::after{display:block;content:"";position:absolute;
    left:auto;right:1rem;top:50%;width:.8rem;height:.8rem;margin-top:-.6rem;
    opacity:1;box-shadow:none;background:transparent;border-radius:0;
    border-right:2px solid #999;border-bottom:2px solid #999;
    transform:rotate(45deg);transition:transform .2s,margin .2s}
  body.nav-open .lnb>li.has-sub.is-open>a::after{margin-top:-.1rem;transform:rotate(-135deg);
    border-color:#000}

  /* 하위 — 닫힘은 높이 0(슬라이드는 site.js · MobileNav.tsx 가 준다) */
  body.nav-open .lnb>li>ul{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;
    overflow:hidden;height:0;visibility:hidden;
    margin:0 -2rem;padding:0 2.4rem;border-radius:0;background:#f6f6f6}
  body.nav-open .lnb>li.is-open>ul{height:auto;visibility:visible;
    margin:0 -2rem;padding:1.2rem 2.4rem}
  body.nav-open .lnb>li>ul>li>a{display:block;padding:1rem .2rem;
    font-size:1.5rem;font-weight:700;line-height:1.4;color:#000;white-space:normal}
  body.nav-open .lnb>li>ul>li>a:active{color:var(--brand)}
  /* 누를 때 폰이 깔던 하늘색 터치 강조를 끈다(대표 지시 2026-09-22) */
  body.nav-open .lnb a{-webkit-tap-highlight-color:transparent;background:none}
}

/* ── 모바일 헤더 높이 (2026-09-22) ───────────────────────────────
   101px 이었다 — 데스크톱용 윗여백(header.site padding)과 행 패딩이 폰에도 남아
   로고 위아래가 비었다. 고정 헤더라 스크롤해도 계속 그 자리를 먹는다.
   프론트가 2026-09-18 부터 쓰던 값(build-content.mjs 12)을 시안으로 옮겨 둘을 같게 한다.
   헤더 = 행 패딩(.8+.8) + 로고 칸 4.8 + 아래 테두리 1px = 6.5rem — 맨 위든 스크롤 뒤(.solid)든 같다.
   ★ 1099 이하(햄버거가 뜨는 폭)에서만 — PC 헤더는 그대로다 */
@media(max-width:1099px){
  header.site,
  html .kv header.site.solid{padding:0}
  .hrow{padding-top:.8rem;padding-bottom:.8rem}
  .logo,
  html .kv header.site.solid .logo{height:4.8rem;display:flex;align-items:center}
  .logo img{height:2.8rem}
}


/* ══ 프론트 보정 — build-content.mjs 가 복사본에만 붙인다 ══════════
   시안 원본(docs/02_설계/site-v2)은 그대로다. 재동기화하면 다시 붙는다. */

/* ※ 스크롤 등장(.rv) 속도는 여기서 손대지 않는다.
      한때 시안이 느려서(opacity 1.5s / transform 1.8s · 계단 지연 최대 0.9초)
      덮어썼는데, 2026-09-14 시안 갱신에서 디자이너가 직접 1.3s / 1.6s 로 줄이고
      올라오는 거리도 4.4rem → .8rem 으로 낮췄다. 대표 지시로 시안 값을 그대로 쓴다.
      다시 손댈 일이 생기면 .rv 한 줄과 site.js 의 계단 간격·상한을 같이 봐야 한다. */

/* 1) 관련진료 카드(.card.link) 호버 — 제목이 회색이라 어두운 막 위에서 안 읽혔다.
      .go 가 color:#fff 를 주는데 .card b{color:var(--ink)} 가 이긴다.
      특정도 문제가 아니라 **상속은 어떤 규칙에도 지기** 때문이다.
      (설명 줄은 .go>span 에 흰색이 박혀 있어 멀쩡했다 — 그래서 제목만 회색이었다.) */
.card.link .go b{color:#fff}

/* 2) 커뮤니티 탭(.ctabs)과 상세 본문이 붙어 있었다.
      목록은 `.ctabs + section.blk > .shead{padding-top:9rem}` 이 띄워 주는데
      상세(article.cv)에는 대응하는 규칙이 없었다. */
.ctabs + .cv{margin-top:6rem}
@media(max-width:768px){
  .ctabs + .cv{margin-top:4rem}
}

/* 3) 회원 전용 안내(.fb-lock) — 읽을 본문이 없는 화면이라 글을 가운데로 둔다.
      `.cv-head h2` 에 text-align:left 가 박혀 있어 부모 정렬만으로는 제목이
      왼쪽에 남는다. 그래서 제목을 따로 집는다(특정도 0,2,1 > 0,1,1).
      버튼(.a-btn)은 건드리지 않는다 — 폭을 꽉 채운 막대 그대로가 맞다. */
.fb-lock{text-align:center}
.fb-lock .cv-head h2{text-align:center}

/* 4) 오시는 길 본문 지도. 시안의 자리표시자(.ph-box)를 대신하는 상자라
      비율·모서리를 그대로 물려받는다(.p-info .ad-map .ph-box 참고).
      안에는 MapEmbed 가 만든 iframe 하나만 들어간다. */
.p-info .ad-map .fb-mapbox{aspect-ratio:1440/720;width:100%;overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--soft2)}
@media(max-width:768px){
  .p-info .ad-map .fb-mapbox{aspect-ratio:4/3}
}

/* 5) 푸터 띠의 작은 지도. 시안 자리표시자(a.fb-map>.ph-box)를 대신한다.
      `.fb-map` 이 flex 라 높이가 옆 칸(공지·진료안내)에 맞춰 늘어난다 —
      비율을 정하지 않고 늘어나는 대로 둔다(MapEmbed 가 실측해서 그린다).
      최소 높이는 띠가 너무 납작해지지 않게 잡아 둔다. */
.fb-map .fb-mapmini{flex:1;align-self:stretch;display:block;width:100%;min-height:18rem;
  overflow:hidden;border-radius:.6rem;background:#f7f9fa}

/* 6) 게시판 검색창·쪽 번호. 시안에 없어서 여기서 만든다.
      ★ 새 색·새 글꼴을 들이지 않는다 — 시안 토큰(--brand/--line/--ink2/--pill)만 쓴다.
        나중에 시안에 정식으로 들어오면 이 블록을 지우고 그쪽 선택자로 갈아탄다.
      ★ 순서는 목록 → 쪽 번호 → 검색창이다(대표 지시). 검색창이 맨 아래라
        위 여백을 넉넉히 주고, 입력칸과 버튼은 한 덩어리로 붙여 알약 모양을 만든다. */
/* ★ 아래 여백을 반드시 준다. 시안은 목록칸 바로 뒤에 오는 설명문에 인접 규칙
      (.c-table + .t-note · .c-cards + .t-note · .cx + .t-note)으로 여백을 주는데,
      우리가 그 사이에 쪽번호·검색창을 끼우면 그 규칙이 **끊긴다.**
      그러면 설명문이 검색창에 딱 붙는다(2026-09-14 대표 지적). */
/* ⚠️ 가로 간격(column-gap)은 0 이어야 한다. gap 은 **모든** 칸 사이에 붙어서,
      1.2rem 을 주면 입력칸과 버튼 사이까지 벌어져 알약이 두 조각으로 갈라진다
      (2026-09-18 대표 지적). '전체보기' 만 margin 으로 떨어뜨린다.
      줄이 바뀔 때의 세로 간격은 row-gap 으로 따로 준다. */
.fb-search{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  column-gap:0;row-gap:1.2rem;margin:4rem 0}
/* 끊긴 인접 규칙 되살리기 — 검색창·쪽번호 뒤에 오는 설명문·블록에 여백을 돌려준다 */
.fb-search + .t-note,
.fb-pager + .t-note{margin-top:4rem}
.fb-search input{width:100%;max-width:30rem;height:5rem;padding:0 2rem;
  border:1px solid var(--line);border-right:0;
  border-radius:var(--pill) 0 0 var(--pill);background:#fff;
  font-size:1.6rem;color:var(--ink-strong);outline:none;box-sizing:border-box}
.fb-search input::placeholder{color:#b9c0c6}
.fb-search input:focus{border-color:var(--brand)}
.fb-search button{height:5rem;padding:0 3rem;border:0;
  border-radius:0 var(--pill) var(--pill) 0;background:var(--brand);color:#fff;
  font-size:1.6rem;font-weight:700;cursor:pointer;white-space:nowrap}
.fb-search button:hover{background:#0a5c9c}
/* 입력칸+버튼은 붙이고, '전체보기'만 떨어뜨린다 */
.fb-search input,.fb-search button{margin:0}
.fb-search .fb-search-clear{margin-left:1.6rem;
  font-size:1.5rem;color:var(--ink2);text-decoration:underline;
  white-space:nowrap}
.fb-search .fb-search-clear:hover{color:var(--brand)}

/* 7) 공지 목록 제목 칸은 왼쪽 정렬(대표 지시).
      시안 기본이 .c-table th·td 를 가운데로 맞춰서 제목까지 가운데로
      가는데, 제목은 길이가 제각각이라 줄마다 시작점이 달라 읽기 나쁘다.
      머리글(제목)도 같이 왼쪽으로 맞춘다 — 칸과 머리글이 어긋나면 더 이상하다. */
/* ⚠️ .cv-spec(사례 상세 진료 정보 표)은 뺀다. 그쪽도 .c-table.left 라
      이 규칙이 같이 걸려, 머리글 「내용」만 왼쪽이고 값은 가운데인 어긋난 표가 됐다
      (2026-09-23 대표 지적). 목록 표에만 걸리게 좁힌다. */
.c-table.left:not(.cv-spec) thead th:nth-child(2),
.c-table.left tbody td.t{text-align:left}

/* 8) 공지 목록의 상단고정 글 — 번호 자리에 '공지' 배지.
      엔진이 pinned 를 맨 위로 올려 주는데 번호를 그대로 매기면 순번이 어긋난다.
      첫 칸은 시안이 회색 면(.c-table tbody td:first-child)이라 배지만 얹는다. */
.c-table tbody tr.is-pinned td:first-child{padding-top:1.2rem;padding-bottom:1.2rem}
.fb-pin{display:inline-block;padding:.3rem 1.2rem;border-radius:var(--pill);
  background:var(--brand);color:#fff;font-size:1.4rem;font-weight:700;line-height:1.6}
.c-table tbody tr.is-pinned td.t a{font-weight:700;color:var(--ink-strong)}

.fb-pager{display:flex;justify-content:center;align-items:center;gap:.6rem;
  margin-top:4rem;flex-wrap:wrap}
.fb-pager a,.fb-pager strong{display:flex;align-items:center;justify-content:center;
  min-width:4rem;height:4rem;padding:0 .8rem;border-radius:.8rem;
  font-size:1.6rem;line-height:1;text-decoration:none;color:var(--ink2)}
.fb-pager a:hover{background:var(--soft2);color:var(--brand)}
.fb-pager strong{background:var(--brand);color:#fff;font-weight:700}
.fb-pager .fb-pg-arrow{font-size:2rem}

/* 9) 글 상세(뷰페이지) 폭을 목록과 같게(대표 지시).
      목록은 `.sp_main{max-width:120rem}` 을 꽉 쓰는데 상세만 `.cv{max-width:92rem}` 로
      따로 좁혀 놨다. 같은 게시판 안에서 목록 → 상세로 넘어갈 때 본문 칸이 갑자기
      줄어들어, 아래 관련 카드·배너와도 좌우가 안 맞았다.
      공지 · 칼럼 · 치료 전후 상세가 모두 `<article class="cv">` 라 한 줄로 셋 다 걸린다.
      ⚠️ `article.cv` 로 좁혀 잡는다. `.cv` 만 쓰면 아코디언 안의 `summary .cv`(답변 칸)
         까지 건드린다 — 그쪽은 이미 max-width:none 이라 뜻이 다르다. */
article.cv{max-width:none}

/* 9-1) 단, 원장 칼럼 상세는 900 으로(대표 지시 2026-09-22 — 긴 글이라 1200 이면 한 줄이 너무 길다).
      표시(.cv-col)는 communityBoard.fillSimpleDetail 이 칼럼일 때만 단다. 가운데 정렬은 .cv 의 margin:0 auto */
article.cv.cv-col{max-width:90rem}

/* 10) 모바일에서 시안이 **줄이지 않고 남긴 값들** (대표 지적 2026-09-18).
      시안은 일부만 모바일 값을 따로 뒀다 — 실측(390px):
        서브 타이틀 70 → 34 ✅ · snum 24 → 17 ✅ · FAQ 질문 20 → 17 ✅
        섹션 제목 50 → **50 그대로** ❌ · 제목 여백 120px + 80px **그대로** ❌
      390px 에서 50px 제목이면 한 문장이 네 줄을 먹고, 여백까지 더해 화면 한 판이
      제목으로만 찬다.
      ⚠️ 이건 시안 쪽 누락이다. 디자이너가 시안에 넣으면 이 항목은 지운다. */
@media(max-width:900px){
  /* 2.8rem 은 우리가 정한 값이 아니라 **시안이 .c-split 에서 이미 쓰는 자기 값**이다
     (같은 max-width:900px 안, site.css 의 .c-split .shead h2 = 2.8rem).
     같은 종류의 제목이니 같은 값을 쓴다 — 새 크기를 들이지 않는다. */
  /* 여백도 데스크톱 값 그대로였다. 첫 섹션(padding-top:0)과 커뮤니티 탭 아래
     (.ctabs + section.blk > .shead)는 특정도가 더 높아 그대로 둔다 — 의도된 예외다. */
  .sp_main .shead{padding-top:6rem;margin-bottom:4rem}
  /* 첫 섹션 위 여백 — 브레드크럼 아래가 131px 이나 비었다(대표 지적 2026-09-18).
     세 군데가 더해진다: 섹션 padding-top 51 + 제목칸 padding-top 60 + 브레드크럼 아래 20.
     ⚠️ 제목칸 60 은 우리 규칙이 아니라 시안의
        .sp_main section.blk.dot:first-child>.shead{padding-top:6rem;margin-bottom:6rem}
        가 주는 값이다(클래스 4개라 위 한 줄로는 안 진다) — 같은 선택자로 맞춰 적는다. */
  .sp_main>*:first-child{padding-top:2rem}
  .sp_main section.blk.dot:first-child>.shead{padding-top:2rem;margin-bottom:3rem}
}

/* 11) 모바일 메뉴 서랍 — **대분류 라벨이 안 보였다**(대표 지적 2026-09-18).
      투명 헤더용 규칙 html .kv .lnb>li>a{color:#fff} 가 서랍이 열렸을 때도 그대로
      먹는데, 서랍 배경은 body.nav-open nav.gnb{background:#fff} 라 흰 글씨가
      흰 바탕에 얹힌다. 병원소개·임플란트 같은 **대분류가 통째로 사라져** 하위 항목만
      나열된 것처럼 보였다(시안도 같은 상태다).
      ★ 서랍 자체는 overflow-y:auto 로 잘 스크롤된다 — 그건 고칠 것이 없었다. */
@media(max-width:1099px){
  html body.nav-open .lnb>li>a{color:var(--ink-strong)}
  /* 지금 보고 있는 메뉴는 html .kv .lnb>li.on>a{color:#fff} 가 따로 잡는다.
     클래스가 하나 더 많아 위 한 줄로는 안 진다 — 같은 수준으로 맞춰 집어 준다.
     이왕이면 브랜드색으로 둔다. 데스크톱 GNB 도 현재 메뉴를 파랗게 보여 준다. */
  html body.nav-open .lnb>li.on>a,
  html body.nav-open .lnb>li:hover>a{color:var(--brand)}
}

/* 12) 모바일 헤더가 너무 높다 — 화면의 17% (대표 지적 2026-09-18).
      header.site{padding:5.6rem 0 0} 이 데스크톱 값 그대로라 로고 위에 56px 이 비고,
      행 패딩까지 더해 140px 이 된다. 고정 헤더라 스크롤해도 계속 그 자리를 먹는다.
      스크롤 후 상태(.solid)도 위아래 15px 씩 더 붙어 있어 같이 줄인다. */
@media(max-width:1099px){
  header.site{padding:0}
  html .kv header.site.solid{padding:0}
  .hrow{padding-top:.8rem;padding-bottom:.8rem}
  .logo{height:4.8rem}
  /* 🔴 스크롤 후(.solid) 시안이 로고를 height:auto 로 되돌린다. 그대로 두면 헤더가
     맨 위 65px · 스크롤 63px 로 **상태마다 높이가 달라져**, 고정값으로 잡은 서랍
     시작점과 1px 이 어긋난다(대표 지적 2026-09-18 — 스크롤했을 때 틈이 보였다).
     두 상태의 높이를 같게 못 박아야 서랍이 항상 헤더에 딱 붙는다. */
  html .kv header.site.solid .logo{height:4.8rem}
  .logo img{height:2.8rem}
  /* 서랍은 헤더 **바로 아래**에서 시작해야 한다. 시안은 7rem 으로 박아 뒀는데
     헤더를 줄였으니 같이 올린다 — 안 그러면 헤더와 서랍 사이에 빈 띠가 생긴다. */
  /* 헤더 = 행 패딩(.8+.8) + 로고 4.8 + 아래 테두리 1px = 6.5rem. 그 아래에 딱 붙인다. */
  body.nav-open nav.gnb{top:6.5rem}
}

/* 13-0) · 13) 모바일 메뉴 서랍(흰 헤더 · 하위 접기 · 화살표)은 2026-09-22 시안 site.css 로 옮겼다
      (「모바일 메뉴 서랍 — 다시 꾸밈」 블록). 접기 동작은 그대로 MobileNav.tsx 가 li.is-open 으로 단다.
      여기 두면 시안의 두 칸 하위 판(display:grid)을 display:block 으로 덮어 모양이 달라진다. */

/* 13-1) 삭제함(2026-09-30). 히어로 모바일 배치는 이제 시안 site.css 가 가진다
      (@media(max-width:900px) 의 .hero-mid h2 min-height · .hc padding-bottom · .hero-h1 bottom —
       2026-09-23 대표가 직접 맞춘 값들이다).
      여기 남아 있던 2026-09-18 값(.hc padding-bottom:22.4rem · .hero-h1 bottom:48.4rem)은
      site.css 뒤에 붙어 그 뒤의 조정을 통째로 덮어쓴다. 그 탓에 칩(h1)이 카피
      첫 줄 위로 25px 내려앉아 글자가 겹쳐 보였다(대표 지적 2026-09-30).
      히어로 모바일 값은 앞으로 시안에서만 고친다 — 여기에 다시 적지 않는다. */


/* 13-2) 서브 페이지 맨 아래 「관련 페이지」 배너는 3장인데, 모바일에서는 2열이라
      2 + 1 로 끊겨 마지막 한 장만 덩그러니 남는다. 모바일에서는 **2장만** 보인다
      (대표 지시 2026-09-18). 지우는 게 아니라 감추는 것이라 데스크톱은 그대로 3장이다.
      ★ 선택자를 .c-cards 로만 잡으면 안 된다 — 진료 페이지의 카드 그리드가 전부 .c-cards 다.
        관련 배너만 .card.link(덮개 있는 카드)를 쓰므로 그것으로 좁힌다. */
@media(max-width:768px){
  .c-cards>.card.link:nth-child(n+3){display:none}
}

/* 13-3) 서브 페이지 브레드크럼 — 본문과 왼쪽이 안 맞고 두 줄로 넘어갔다
      (대표 지적 2026-09-18). 실측(390px): 본문 글자는 x=15 에서 시작하는데
      브레드크럼은 자기 padding:2rem 때문에 x=35 에서 시작한다 — 20px 안쪽이다.
      게다가 쓸 수 있는 폭이 그만큼 줄어 「HOME > 병원소개 > 장비와 시설」이 두 줄이 됐다.
      좌우 여백만 없애고(위아래는 유지) 글자·동그라미·간격을 조금 줄이면 한 줄에 들어간다. */
@media(max-width:768px){
  .sub-kv + main .breadcrumb,
  main > .breadcrumb:first-child{padding-left:0;padding-right:0}
  .breadcrumb{gap:1rem}
  .breadcrumb li{gap:.6rem}
  .breadcrumb li::before{width:1.8rem;height:1.8rem;background-size:.8rem .8rem}
}

/* 13-4) 모바일에서 섹션 제목과 설명문의 크기 차이가 거의 없었다(대표 지적 2026-09-18).
      제목을 2.8rem 으로 내렸는데 설명문(.lead)은 데스크톱과 같은 2.2rem 이라 6px 차이뿐이라
      어느 쪽이 제목인지 안 읽힌다. 1.7rem 은 시안이 모바일 히어로 본문에 쓰는 자기 값이다
      (@media(max-width:900px) .home-hero p{font-size:1.7rem}). 28 : 17 이면 위계가 선다. */
@media(max-width:900px){
  /* ※ 홈 본문(.el-two-tx p · .el-lead)과 카드 글자, .el-more 는 2026-09-18 시안
     (3ce987d 「모바일 정리」)에서 디자이너가 직접 내렸다 — 우리 값이 그 위를 덮지
     않도록 뺐다. 지금은 시안 값이 나간다(홈 본문 15px · 카드 제목 16 · 요약 13). */

  /* VIEW MORE 버튼과 섹션 머리 점도 데스크톱 값 그대로였다(대표 지시 2026-09-18).
     본문을 1.7rem 으로 내린 뒤에는 버튼이 본문과 같은 크기라 더 커 보인다.
     점(4.4rem)은 좁은 화면에서 제목보다 눈에 먼저 들어온다 — 머리 표시일 뿐이니 줄인다. */
  .el-view{margin-top:3rem;padding:1.1rem 2.2rem;gap:1rem}
  /* 점은 섹션 머리 표시일 뿐인데 4.4rem 이면 제목보다 먼저 눈에 든다.
     11dent 는 이보다 훨씬 작다 — 두 종류(.el-dot · .el-two-dot)를 같은 크기로 맞춘다. */
  .el-head .el-dot{width:2.4rem;height:2.4rem;margin-bottom:2.4rem}
  .el-two-dot{width:2.4rem;height:2.4rem;margin-bottom:2.4rem}
}

/* 13-5) 푸터 공지 띠의 「+」(전체보기) 가 엉뚱한 자리에 떨어졌다(대표 지적 2026-09-18).
      .fb-plus{position:absolute;right:5rem;top:10rem} 이 데스크톱 좌표 그대로다.
      모바일에서는 .fb 의 padding 이 0 이라 제목이 위로 올라오는데 + 는 그대로 100px 에
      남아, **첫 번째 공지 줄 위에** 겹쳐 찍혔다. 제목 줄 오른쪽 끝으로 올린다. */
@media(max-width:768px){
  .fb-plus{top:0;right:0;width:4.4rem;height:4.4rem}
}

/* 13-6) 삭제함(2026-09-30). 홈 진료과목 칸의 모바일 배치는 2026-09-22 시안이 다시 짰다
      (@media(max-width:768px) 의 .el-subj>a::before — 칸 절반에 사진을 contain 으로 담고
       글은 반대쪽에 둔다. 가림막(.tx::after)도 content:none 으로 걷었다).
      여기 남아 있던 2026-09-18 판은 .sj 사진을 칸 전체 폭으로 되살려 깔았다.
      두 판이 겹쳐 사진이 두 겹으로 깔리고, 가림막은 시안의 content:none 탓에 안 그려져
      번호와 과목명이 사진 위에 그대로 얹혔다(대표 지적 2026-09-30 「이미지가 왜 겹쳐 보이지」).
      진료과목 모바일 배치는 앞으로 시안에서만 고친다 — 여기에 다시 적지 않는다. */


/* 13-7) 카드 제목이 네 줄까지 흘러 카드 높이가 제각각이었다(대표 지시 2026-09-18).
      좁은 화면에서는 한 줄에 8~9자라 긴 제목이 금방 네 줄이 된다. 두 줄에서 자른다.
      ★ .link 카드(하단 관련 페이지 배너)는 뺀다 — 그쪽은 제목이 한 줄짜리 라벨이라
        자를 일이 없고, 덮개 안에 있어 규칙이 겹치면 배치가 틀어진다. */
@media(max-width:900px){
  .c-cards>.card:not(.link) b{display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden;
    /* 크기는 시안이 정한다(3ce987d 에서 21 → 16px). 여기서는 **줄 수만** 자른다. */
    }
}

/* 13-8) 홈 키워드 칩이 19개라 모바일에서 화면 한 판을 통째로 먹었다 —
      절반으로 줄인다(대표 지시 2026-09-18). 앞에서 10개만 남긴다.
      ⚠️ 자리(순서)로 자르는 규칙이라, 시안이 칩 순서를 바꾸면 남는 것도 바뀐다.
        지금 순서로는 뒤쪽 턱관절 · 일반진료 · 야간진료 칩이 모바일에서 빠진다.
        진료과목을 고루 남기려면 시안에서 칩 **순서**를 바꾸는 편이 맞다(내용이므로). */
@media(max-width:768px){
  .el-tags>a:nth-child(n+11){display:none}
}

/* 13-9) 푸터 진료 안내 표가 모바일에서 들쭉날쭉했다(대표 지시 2026-09-18).
      실측(390px): 시간 칸 폭이 107px 뿐인데 글자가 20px 이라 「10:00 - 19:00」 이
      두 줄로 꺾이고, 그 줄만 키가 커져 행 높이가 62 / 50 / 69 / 50 / 43 으로 갈렸다.
      시간은 한 덩어리로 읽어야 하는 값이라 **꺾이면 안 된다**. 줄바꿈을 막고,
      들어갈 만큼 글자를 줄이고, 옆 설명(월·수·목·금)도 한 칸 낮춰 자리를 내준다. */
@media(max-width:768px){
  .fb-hours dd{flex:none}
  .fb-hours dd b{white-space:nowrap}
  .fb-hours dt b{min-width:7rem;padding:.7rem 1rem;font-size:1.4rem}
  .fb-hours dt{gap:1rem}
  .fb-hours dt em{font-size:1.4rem}
  .fb-hours .row{gap:1rem}
}

/* 13-10) 서브 페이지 상단 비주얼이 모바일에서 화면의 43% 를 먹었다(대표 지시 2026-09-18).
      .sub-kv{height:36rem} = 360px 인데 화면이 844px 이다. 제목 한 줄 보여 주는 자리라
      그만큼 클 이유가 없다 — 24rem 으로 줄이고, 그만큼 제목 위 여백도 함께 줄인다. */
@media(max-width:768px){
  .sub-kv{height:24rem;border-radius:0 0 3rem 3rem}
  .sub-kv .tx{padding-top:3rem}
}

/* 13-11) 진료 시간 — 모바일에서 동그라미 3칸을 **줄 단위**로 바꾼다(대표 지시 2026-09-18).
      좁은 화면에서 동그라미가 한 줄에 셋이라 칸이 좁아 「10:00 - 19:00」 이 두 줄로 꺾였다.
      요일 · 시간 · 비고를 한 줄에 나란히 두면 꺾일 일이 없고 세 줄로 훑기도 쉽다.
        [평일]   10:00 - 19:00   월·수·목·금
      ⚠️ .hcards .hc .t 에 모바일 3.4rem 이 걸려 있다 — .hcirc 를 낀 선택자로 눌러야 먹는다. */
@media(max-width:768px){
  .hcards.hcirc{display:flex;flex-direction:column}
  .hcards.hcirc>.hc{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
    gap:1.2rem;padding:1.4rem 0;text-align:left}
  .hcards.hcirc>.hc + .hc{border-left:0;border-top:1px solid var(--line2)}
  /* 동그라미를 가로 알약으로 — 줄 앞머리 라벨로 쓴다 */
  .hcards.hcirc .cir{width:auto;aspect-ratio:auto;margin:0;padding:.7rem 1.4rem;
    border-radius:var(--pill);min-width:7.6rem}
  .hcards.hcirc .cir b{font-size:1.5rem}
  .hcards.hcirc .hc .t{margin:0;font-size:2rem;white-space:nowrap}
  .hcards.hcirc .hc .d{margin:0;text-align:right;font-size:1.3rem}
}

/* 13-12) 병원 둘러보기 사진 — 폰에서 한 장씩 전체 폭으로 깔려 한참 굴려야 했다.
      560px 아래에서 1열로 떨어지는데, 둘러보기는 훑어보는 자리라 **썸네일 그리드**가 맞다.
      한 줄에 3장으로 둔다(대표 지시 2026-09-18). 누르면 원래대로 크게 열린다. */
@media(max-width:900px){
  .gal{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
}

/* 13-13) 블록 사이 여백이 모바일에서 너무 넓었다(대표 지시 2026-09-18).
      실측: 섹션 사진(.sec-fig) 아래 34px + 다음 문단(.lead) 위 80px = **124px**.
      데스크톱 값이 그대로 내려온 것이라, 폰에서는 사진과 그 설명이 남남처럼 떨어진다.
      한 화면에 들어오는 양이 적은 만큼 덩어리 사이 간격도 같이 줄인다. */
@media(max-width:768px){
  .sp_main .lead{margin-top:2.4rem}
  /* ⚠️ .blk.r-hero>.lead{margin-top:8rem} 이 클래스 3개라 위 한 줄로는 안 진다. */
  .sp_main .blk.r-hero>.lead{margin-top:2.4rem}
  .sec-fig{margin-top:2.4rem;margin-bottom:2.4rem}
  .sp_main .t-note{margin-top:2.4rem}
  .hsub{margin-top:2.4rem}
}

/* 13-14) 진료 안내의 권역 카드(.c-cards.ptitle)가 폰에서 2열이라 칸이 좁아
      「다산신도시 · / 도농동 · / 지금동은 다리 / 하나 / 건너입니다」 처럼 한두 어절씩
      끊겼다. 한 줄에 하나씩 놓는다(대표 지시 2026-09-18). */
@media(max-width:768px){
  .c-cards.ptitle{grid-template-columns:minmax(0,1fr)}
}

/* 13-15) 편의시설 칩 — 폰에서 라벨(h3)이 혼자 한 줄을 차지하고 칩은 2 + 2 로 끊겨
      들쭉날쭉했다. 라벨을 줄 앞에 작게 두고 칩은 왼쪽부터 흘린다(대표 지시 2026-09-18). */
@media(max-width:768px){
  .p-info .pane.row{justify-content:flex-start;gap:.8rem 1rem}
  .p-info .pane.row h3{font-size:1.4rem;padding:.6rem 1.4rem}
  .p-info .pane.row .chips{justify-content:flex-start;gap:.8rem}
  .p-info .chips span{padding:.7rem 1.2rem;font-size:1.3rem}
}

/* 13-16) 권역 카드 설명 글씨가 컸다 — 한 줄에 하나로 넓어진 만큼 본문보다 한 단계 내린다. */
@media(max-width:768px){
  /* ⚠️ .c-cards.boxed.ptitle 쪽 규칙이 클래스를 더 쌓아 두었다 — 같은 수준으로 적는다. */
  .c-cards.boxed.ptitle>.card:not(.link) span{font-size:1.4rem;line-height:1.65}
}

/* 17) 관리자 글 본문은 **스크롤 등장에서 뺀다**(대표 지적 2026-09-23
      「스크롤 시 올라오는 기능 때문에 이미지가 안 나온다」).

      site.js 의 등장 대상에 .sp_main .cv-body > * 가 들어 있어, 원장님이 쓰신 글의
      문단 · 표 · 이미지 하나하나가 전부 대상이 된다. 그런데 계단 지연 계산이
        key = 부모 class + 자식 class      (본문 블록은 둘 다 비어 있어 전부 한 묶음)
        delay = min((순번-1) * 100ms, 500)
      이라, 여섯 번째 블록부터는 **모두 0.5초 지연**이 붙는다. 여기에 전환 0.8초를
      더하면 화면에 들어온 뒤 1.3초가 지나야 다 보인다. 62블록짜리 글을 보통 속도로
      내리면 이미지가 아직 투명한 채로 지나가 「이미지가 안 나온다」가 된다.

      계단 연출은 섹션 카드 몇 장을 순서대로 올리려고 만든 것이라, 길이를 알 수 없는
      글 본문에는 맞지 않는다. 본문은 처음부터 보이게 둔다 — 읽는 글에서 연출보다
      글이 보이는 것이 먼저다. (site.js 는 시안 파일이라 건드리지 않는다.) */
.cv-body>.rv{opacity:1;transform:none;transition:none}

/* 18) 관리자 에디터의 2장 배치(.fb-imgrow)에 줄 사이 여백이 없다
      (대표 지적 2026-09-23 「어드민과 프론트가 다르게 나온다」).
      에디터는 사진 두 장을 .fb-imgrow 에 inline flex 로 넣고 width:49% + margin-right:2% 로
      가로 배치까지 스스로 해결한다. 그런데 **세로 여백은 어디에도 없어서**,
      줄을 여러 개 넣으면 프론트에서 사진들이 위아래로 딱 붙는다(실측 줄 간격 0px).
      관리자 편집 화면에는 에디터 자체 여백이 있어 거기서는 떨어져 보인다 — 그래서
      「어드민과 프론트가 다르다」로 드러난다.
      ★ gap 을 쓰지 않는다 — 49% + 2% + 49% = 100% 로 이미 폭을 맞춰 두어서
        gap 을 더하면 둘째 장이 밀려 줄이 깨진다. 세로 여백만 준다. */
.cv-body .fb-imgrow{margin:1.6rem 0}
.cv-body .fb-imgrow:first-child{margin-top:0}

/* 19) 원장님이 쓰신 글 본문은 **사이트 공통 요소 규칙에서 끊어 낸다**
      (대표 지시 2026-09-23 「글 등록하는 부분은 공통 css 가 적용 안 되게」).

      시안은 클래스 없는 맨 요소 규칙을 전역으로 둔다 —
        h2{font-size:var(--f-h2)}  h3{font-size:var(--f5)}  ul,ol{list-style:none;padding:0}
      이 값들은 **소개 페이지의 섹션 제목**을 위해 만든 것이라, 에디터로 쓴 글에 그대로
      걸리면 앞뒤가 안 맞는다. 실측(2026-09-23, 칼럼 글):
        본문 18px · h3 18px · h2 19px  → 제목이 본문과 같거나 작아 위계가 없다
        ul, ol 의 글머리표와 들여쓰기가 통째로 사라진다
        표는 아무 서식이 없어 브라우저 기본으로 나온다
      토큰(--f-h2 등)은 화면 폭 · 맥락에 따라 값이 달라져서, 글 본문이 그 값에 얹혀 있으면
      우리가 손대지 않아도 어느 날 크기가 바뀐다. 본문은 **토큰을 쓰지 않고** 직접 적는다.

      ★ 적용 범위는 글 본문뿐이다. .cv-body(커뮤니티 상세)와 .artbody(일반 게시판 상세)만
        잡는다 — 그 바깥의 시안 영역은 그대로 둔다.
      ★ .cv-spec(우리가 만드는 진료 정보 표)은 .cv-body 밖이라 여기 걸리지 않는다. */
.cv-body h2,.artbody h2{font-family:var(--sans);font-size:2.6rem;line-height:1.45;
  font-weight:800;letter-spacing:-.02em;color:var(--ink-strong);margin:4.8rem 0 1.6rem}
.cv-body h3,.artbody h3{font-family:var(--sans);font-size:2.1rem;line-height:1.5;
  font-weight:700;letter-spacing:-.02em;color:var(--ink-strong);margin:3.6rem 0 1.2rem}
.cv-body h4,.artbody h4{font-size:1.9rem;line-height:1.55;font-weight:700;
  color:var(--ink-strong);margin:2.8rem 0 1rem}

/* 글머리표를 되살린다 — 전역 ul,ol{list-style:none;padding:0} 때문에 목록이
   그냥 줄바꿈된 문장처럼 보였다. */
.cv-body ul,.artbody ul{list-style:disc;margin:0 0 1.6rem;padding-left:2.4rem}
.cv-body ol,.artbody ol{list-style:decimal;margin:0 0 1.6rem;padding-left:2.4rem}
.cv-body li,.artbody li{margin:.5rem 0;font-size:1.8rem;line-height:1.9;color:var(--ink2)}

/* 표 — 에디터가 클래스 없이 내보내므로 서식이 아무것도 없었다 */
.cv-body table,.artbody table{width:100%;margin:2.4rem 0;border-collapse:collapse;
  font-size:1.6rem;line-height:1.7}
.cv-body th,.cv-body td,.artbody th,.artbody td{padding:1.2rem 1.4rem;
  border:1px solid var(--line);text-align:left;vertical-align:top;color:var(--ink2)}
.cv-body th,.artbody th{background:#f5f7f9;font-weight:700;color:var(--ink-strong)}

/* 🔴 본문 이미지 **정렬은 프리블로그 에디터가 정한다. 여기서 건드리지 않는다.**
   (대표 지시 2026-09-23)
   한때 좌우 margin:auto 로 전부 가운데에 세웠는데, 그러면 에디터에서 정렬을 지정하지
   않은 이미지까지 우리가 가운데로 끌어다 놓는 셈이 된다.
   에디터는 가운데로 놓을 때 인라인으로 margin 을 직접 적어 준다 — 실측:
     가운데 지정  style="display:block;width:100%;max-width:800px;height:auto;margin:0px auto 20px"
     지정 없음    style="display:block"  또는 style 없음
   인라인이 어떤 CSS 보다 세므로, 우리가 손대지 않아야 에디터 설정이 그대로 나간다.
   글의 이미지가 왼쪽에 붙어 있으면 **에디터에서 가운데 정렬을 지정**하면 된다.
   여기서는 넘침만 막고, 아래 두 가지(모서리·위아래 간격)만 에디터와 맞춘다.

   ★ 모서리·간격은 관리자 에디터(.brunch-body img = rounded-lg + my-4)와 같은 값이다.
     글 쓰는 화면과 실제 페이지가 달라 보인다는 지적(2026-09-23 대표)에 맞춘 것 —
     라운드 8px, 위아래 16px.
   ⚠️ 반드시 margin-top/margin-bottom **개별 속성**으로만 쓴다. margin 단축속성을 쓰면
     네 방향을 다 덮어써서, 위 주석대로 에디터가 인라인으로 넣는 좌우 auto(가운데 정렬)와
     싸우게 된다. 개별 속성이면 좌우는 인라인 값이 그대로 살아 정렬이 유지된다. */
.cv-body img,.artbody img{max-width:100%;height:auto;border-radius:.8rem;
  margin-top:1.6rem;margin-bottom:1.6rem}
.cv-body hr,.artbody hr{margin:3.2rem 0;border:0;border-top:1px solid var(--line)}
.cv-body a,.artbody a{text-decoration:underline}
.cv-body blockquote,.artbody blockquote{margin:2.4rem 0;padding:1.6rem 2rem;
  border-left:3px solid var(--brand);background:#f7f9fb;color:var(--ink2)}

@media(max-width:900px){
  .cv-body h2,.artbody h2{font-size:2.1rem;margin-top:3.6rem}
  .cv-body h3,.artbody h3{font-size:1.8rem;margin-top:2.8rem}
  .cv-body h4,.artbody h4{font-size:1.6rem}
  .cv-body li,.artbody li{font-size:1.5rem}
  .cv-body table,.artbody table{font-size:1.4rem}
  .cv-body th,.cv-body td,.artbody th,.artbody td{padding:.9rem 1rem}
}

/* 20) 사례 상세의 진료 정보 표가 위 사진 · 아래 주석과 **폭이 안 맞았다**
      (대표 지적 2026-09-23). 실측(1440px):
        전후 사진 113~1313 · 본문 113~1313 · 주석 113~1313   (1200)
        표        113~1033                                   (920)
      시안이 .c-table.narrow table{max-width:92rem;margin-inline:auto} 로 좁혀 두었는데
      가운데 정렬(margin-inline:auto)은 먹지 않아 왼쪽에 붙고, 오른쪽만 280px 비었다.
      위아래가 모두 꽉 찬 자리라 표도 같은 폭으로 맞춘다 — 그래야 오른쪽 끝이 한 줄로 선다.
      ⚠️ .c-table.narrow table(클래스 2개)보다 구체적으로 적어야 이긴다. */
.c-table.narrow.cv-spec table{max-width:none}

/* 21) 글 본문의 굵은 글씨가 **에디터에서 준 색을 잃는다**(대표 지적 2026-09-23).
      시안 site.css 98행에 p strong{color:var(--ink);font-weight:700} 이 있다.
      에디터는 색을 글자에 직접 넣지 않고 <span style="color:rgb(225,29,72)"> 로 감싸는데,
      그 안의 <strong> 은 인라인 색이 없어서 위 규칙이 물려받을 색을 덮어 버린다.
      결과: 색을 칠한 문장이라도 **굵게 한 부분만 검정으로** 나온다.
      본문에서는 굵기만 남기고 색은 물려받게 둔다 — 색은 원장님이 에디터에서 정한다. */
.cv-body p strong,.artbody p strong{color:inherit}

/* 14) 푸터 사이트맵은 모바일에서 감춘다(대표 지시 2026-09-18).
      7개 대분류 × 하위 전부라 세로로 길게 쌓여, 폰에서는 푸터가 본문보다 길어진다.
      같은 메뉴를 햄버거와 하단 바가 이미 들고 있다 — 두 번 실을 이유가 없다.
      병원정보 · 사업자정보 · 저작권(.fi)은 그대로 둔다. 표기 의무가 있는 내용이다. */
@media(max-width:768px){
  .fmap{display:none}
}

/* 15) 모바일 글자 비율표 — 한 곳에서 정한다(대표 지시 2026-09-18
      「전체적으로 모바일 폰트 비율을 맞춰줘」).

      그동안 지적을 하나씩 받아 자리마다 따로 줄이다 보니 15 · 16 · 17px 이 뒤섞여
      **어느 것이 제목이고 어느 것이 본문인지 구분이 안 됐다.** 카드 제목(16)이
      본문(17)보다 작은 곳도 있었다. 다섯 단계로 못 박고, 새 크기를 만들 때는
      여기 표에 있는 값만 쓴다.

        30px  서브 비주얼 제목
        24px  섹션 제목
        17px  카드 제목 · FAQ 질문 (소제목)
        15px  본문
        14px  요약 · 캡션 · 보조

      ⚠️ 시안(3ce987d)도 모바일 크기를 따로 정해 두었지만 자리마다 값이 갈린다.
        비율을 맞추라는 지시라 여기서 일괄로 덮는다 — 되돌리려면 이 블록만 지운다. */
@media(max-width:900px){
  .sub-kv h1{font-size:3rem}

  .sp_main .shead h2,
  .sp_main .r-lead h2,
  .sp_main .r-sec>.hd h2,
  .el-head h2{font-size:2.4rem}

  .c-cards>.card:not(.link) b,
  .c-cards.boxed.flat>.card:not(.link) b,
  .faq summary{font-size:1.7rem}

  .sp_main .lead,
  .sp_main>p,
  .el-two-tx p,
  .el-lead,
  .faq .ans,
  .fb-hours dd b{font-size:1.5rem;line-height:1.7}

  /* 줄바꿈이 문맥과 어긋나 보이던 것 — 마지막 줄에 한 어절만 남는 고아 줄을 막는다.
     한글은 word-break:keep-all 이 이미 걸려 있어 어절 안에서는 안 끊긴다. 남은 문제는
     「…전화로 확인해 / 주십시오.」 처럼 끝 줄이 한 토막만 남는 경우다.
     text-wrap:pretty 는 브라우저가 줄을 고르게 나눠 그 상황을 줄여 준다(미지원이면 무시된다). */
  .sp_main .lead,.sp_main>p,.sp_main .t-note,.el-two-tx p,.el-lead,
  .faq .ans,.el-head p,.sub-kv h1,.shead h2{text-wrap:pretty}

  .c-cards>.card:not(.link) span,
  .c-cards.boxed.flat>.card:not(.link) span:not(.cx-tag),
  .breadcrumb,
  .el-view,
  .el-more,
  .fb-hours dt b,
  .fb-hours dt em,
  .sp_main .t-note{font-size:1.4rem}
}

@media(max-width:768px){
  .fb-search{margin:3rem 0;row-gap:.8rem}
  .fb-search + .t-note,
  .fb-pager + .t-note{margin-top:3rem}
  .fb-search input{max-width:22rem;height:4.4rem;padding:0 1.4rem;font-size:1.5rem}
  .fb-search button{height:4.4rem;padding:0 2rem;font-size:1.5rem}
  .fb-pager{margin-top:3rem}
  .fb-pager a,.fb-pager strong{min-width:3.4rem;height:3.4rem;font-size:1.5rem}
}

/* 16) 글 상세의 h1 = 게시물 제목(대표 지시 2026-09-22 — SEO).
      communityBoard.demoteKvTitle 이 칼럼 · 공지 · 치료 전후 상세에서
        키비주얼 제목 .sub-kv h1  →  <p class="kv-title">
        글 제목       .cv-head h2 →  <h1>
      로 태그만 바꾼다. 보이는 모양은 그대로여야 하므로 각자 원래 규칙을 옮겨 적는다.
      값은 시안 site.css 의 .sub-kv h1(7 / 1100↓ 5 / 768↓ 3.4) · 위 15) 표(900↓ 3)와
      .cv-head h2(2.8 / 768↓ 2.2) + 전역 h2(글꼴 · 굵기 · 자간 · 색). 시안 값이 바뀌면 같이 고친다. */
.sub-kv .kv-title{margin:0;font-size:7rem;font-weight:800;color:#fff;
  letter-spacing:-.035em;line-height:1.15}
.cv-head h1{margin:1.6rem 0 0;font-family:var(--sans);font-size:2.8rem;font-weight:700;
  line-height:1.5;letter-spacing:-.018em;color:var(--ink);text-align:left}
@media(max-width:1100px){.sub-kv .kv-title{font-size:5rem}}
@media(max-width:900px){.sub-kv .kv-title{font-size:3rem;text-wrap:pretty}}
@media(max-width:768px){
  .cv-head h1{font-size:2.2rem;letter-spacing:-.12em}
}