@charset "utf-8";
/* ============================================================
   wune-ds.css — 윈느 디자인 시스템 v1 (2026-09-01)

   원장 요청서 40개 항목을 하나의 토큰 체계로 구현한다.
   「페이지 중심 개발 → 디자인 시스템 중심 개발」이 목표다.

   구성 (이 순서를 지킨다)
     ① Token      — 색·글자·간격·폭·radius·breakpoint
     ② Base       — 문서 기본값. 태그 선택자만 쓴다
     ③ Layout     — Container · Section
     ④ Component  — Button · Card · Table · FAQ · CTA · Callout ·
                    DoctorComment · Author · Breadcrumb · Related · Hero
     ⑤ Bridge     — 기존 마크업(.dn-* .cont_* .rr-* .casebook-* …)을
                    토큰에 연결한다. 41개 페이지 마크업을 한 번에 못 바꾸므로
                    브리지로 먼저 통일하고, 이후 마크업을 컴포넌트로 옮긴다.

   🚨 적용 범위 : <body class="wds"> 가 붙은 페이지만. 시안 확정 전까지 전체에 걸지 않는다.
   🚨 페이지 <style> 에 값을 새로 쓰지 않는다. 필요하면 토큰을 고친다.
   🚨 !important 는 ⑤ 브리지에서만 쓴다. 기존 CSS 의 !important 를 이기기 위한 것이고,
      마크업을 컴포넌트로 옮기는 만큼 줄여 나간다.
   ============================================================ */

/* ═══ ① TOKEN ═══════════════════════════════════════════ */
:root {
	/* ── 색 (§29) ─────────────────────────────────────────
	   🚨 본문에 순수 검정(#000)을 쓰지 않는다. 원장 지시 — 가독성 좋은 기본 텍스트색.
	   🚨 포인트는 버건디 하나다. 페이지가 색을 새로 만들지 않는다. */
	--wds-primary:        #8B1538;
	--wds-primary-dark:   #540F19;
	--wds-primary-soft:   #FBF3F5;

	--wds-text:           #1A1A1A;   /* 본문·제목 */
	--wds-text-sub:       #5A5A5A;   /* 보조 설명 */
	--wds-text-muted:     #8A8A8A;   /* 라벨·날짜 */
	--wds-text-invert:    #FFFFFF;   /* 어두운 배경 위 */

	--wds-bg:             #FFFFFF;
	--wds-surface:        #F7F7F8;   /* 카드·박스 배경 */
	--wds-surface-2:      #F1F1F3;
	--wds-border:         #E4E4E7;
	--wds-border-strong:  #C9C9CE;

	--wds-success:        #1E7B45;
	--wds-warning:        #A8660B;
	--wds-error:          #B3261E;

	/* ── 글자 (§4·§5·§6) ──────────────────────────────────
	   🥇 요청서 §4 원안을 그대로 쓴다 (원장 결정 2026-09-01 — 「전부 요청서대로, 블로그도」).
	      처음엔 이미 배포된 블로그 v3(34/26/20.5)를 기준으로 삼았으나 뒤집었다.
	      🚨 이 값은 블로그 36편에도 그대로 적용된다.
	      요청서 §4 는 H1 44 · H2 32 · H3 24 를 제시했지만, 블로그 36편이 이미
	      34 / 26 / 20.5 로 배포돼 있다. §37「페이지가 달라도 Typography 는
	      절대 달라지면 안 된다」를 지키려면 한쪽으로 맞춰야 하고,
	      이미 확정·검증된 블로그 쪽을 기준으로 삼았다.
	   🚨 그러므로 이 값을 바꾸면 블로그 36편이 함께 흔들린다. 토큰만 고친다.
	   PC 기준. 모바일은 하단 미디어쿼리에서 토큰만 다시 정의한다. */
	--wds-fs-h1:   44px;   --wds-lh-h1: 1.25;  --wds-fw-h1: 700;
	--wds-fs-h2:   32px;   --wds-lh-h2: 1.35;  --wds-fw-h2: 700;
	--wds-fs-h3:   24px;   --wds-lh-h3: 1.40;  --wds-fw-h3: 700;
	--wds-fs-h4:   19px;   --wds-lh-h4: 1.45;  --wds-fw-h4: 600;
	--wds-fs-body: 17px;   --wds-lh-body: 1.8;
	--wds-fs-lead: 19px;   --wds-lh-lead: 1.7;
	--wds-fs-sm:   15px;   --wds-lh-sm: 1.7;
	--wds-fs-xs:   14px;   --wds-lh-xs: 1.6;   /* 날짜·출처·캡션 §4 하한 */
	--wds-fs-label:13.5px;                      /* 아이브로우·배지 — 한글 하한 */
	--wds-fs-table:15px;   --wds-lh-table: 1.6;

	--wds-ls-tight: -0.02em;   /* 제목 */
	--wds-ls-body:  -0.01em;
	--wds-ls-label:  0.10em;

	/* ── 간격 (§7) — 이 12개 말고 다른 값을 쓰지 않는다 ──── */
	--wds-1:   4px;   --wds-2:   8px;   --wds-3:  12px;   --wds-4:  16px;
	--wds-5:  24px;   --wds-6:  32px;   --wds-7:  40px;   --wds-8:  48px;
	--wds-9:  64px;   --wds-10: 80px;   --wds-11: 96px;   --wds-12:120px;

	/* ── 섹션 리듬 (§8·§9) ───────────────────────────────── */
	--wds-sec-lg:  96px;   /* 큰 섹션 사이 */
	--wds-sec-md:  72px;   /* 중간 */
	--wds-sec-sm:  40px;   /* 작은 콘텐츠 그룹 */
	--wds-h2-top:  80px;   /* 본문 → 다음 H2 */
	--wds-h2-bot:  24px;   /* H2 → 본문 */
	--wds-h3-top:  40px;   --wds-h3-bot: 16px;
	--wds-h4-top:  32px;   --wds-h4-bot: 12px;
	--wds-p-gap:   16px;   /* 문단 사이 */

	/* ── 폭 (§3) ─────────────────────────────────────────── */
	--wds-container: 1200px;   /* PC 최대 폭 */
	--wds-measure:    840px;   /* 읽기 폭 — 요청서 §3(800~880) 원안 채택 (원장 지시 2026-09-01).
	                              처음엔 블로그 v3 의 760 을 썼으나 화면이 좁아 보인다는 판단.
	                              🚨 문서형 페이지 폭(--wds-doc 860)과 가깝게 두어야 축이 겹치지 않는다. */
	--wds-wide:      1200px;   /* 표·갤러리·전후사진 */
	--wds-gutter:      40px;   /* PC 좌우 최소 여백 */

	/* ── radius (§11·§13) ────────────────────────────────── */
	--wds-r-sm:  8px;    /* 작은 카드·배지 */
	--wds-r-md: 12px;    /* 일반 이미지·카드 */
	--wds-r-lg: 16px;    /* 큰 강조 이미지 */
	--wds-r-pill: 999px;

	/* ── shadow (§31) — 기본은 테두리. 그림자는 강조 카드만 ── */
	--wds-shadow: none;
	--wds-shadow-raise: 0 1px 2px rgba(26,26,26,.05), 0 8px 24px rgba(26,26,26,.05);

	/* ── 애니메이션 (§32) — Fade Up 하나만 ──────────────── */
	--wds-dur: 420ms;
	--wds-ease: cubic-bezier(.22,.61,.36,1);
}

/* ── 레거시 토큰 연결 ────────────────────────────────────
   🚨 2026-09-01 실측 사고 : 타이포만 재고 배경을 안 쟀더니, 시안 페이지가
      크림 #faf8f5 · 브라운 #2c1a0e 로 되돌아가 있었다.
      combined.min.css 의 --dn-* 토큰 14개가 배경·글자색을 지배하는데
      wune-ds.css 에 그 재정의가 없었다.
   → 레거시 토큰을 시스템 토큰에 연결한다. 개별 선택자를 쫓지 않는다.
   🚨 --dn-topbar 는 상단 바 배경이라 어둡게 둔다. 그 위 글씨가 흰색이다.
   🚨 --dn-teal 은 이름과 달리 실제 값이 브라운이었다. 이름으로 판단하지 말 것. */
:root {
	--dn-cream:  var(--wds-bg);
	--dn-cream2: var(--wds-surface);
	--dn-border: var(--wds-border);
	--dn-dark:   var(--wds-text);
	--dn-dark2:  var(--wds-text);
	--dn-sub:    var(--wds-text-sub);
	--dn-accent: var(--wds-primary);
	--dn-bronze: var(--wds-primary);
	--dn-teal:   var(--wds-primary);
	--dn-brown:  var(--wds-primary);

	/* 🚨 2026-09-02 전수조사 : 브라운 토큰 세트가 하나 더 있었다.
	      전후사진 「케이스 상세」가 case.css 의 --bac-* 를 쓰는데 브리지에
	      빠져 있어 그 페이지만 138곳이 옛 브라운이었다.
	      🚨 토큰 세트는 --dn-* 하나가 아니다. 새 페이지를 만들 때
	         자기 팔레트를 정의했는지 먼저 확인할 것. */
	--bac-cream:        var(--wds-surface);
	--bac-warm-white:   var(--wds-bg);
	--bac-bg-card:      var(--wds-bg);
	--bac-border:       var(--wds-border);
	--bac-border-light: var(--wds-border);
	--bac-dark:         var(--wds-text);
	--bac-sub:          var(--wds-text-sub);
	--bac-sub-soft:     var(--wds-text-muted);
	--bac-accent:       var(--wds-primary);
	--bac-accent-light: var(--wds-primary);
}
/* 배경은 토큰만으로 안 잡히는 자리가 있다. 직접 못 박는다 */
html:has(body.wds), body.wds,
body.wds :is(.content_wrap, .cont_wrap, main) { background: var(--wds-bg); }
body.wds :is(footer, .foot_wrap, .dn-footer) { background: var(--wds-surface); }

/* 태블릿 (§28: 768~1023) */
@media (max-width: 1023px) {
	:root {
		--wds-fs-h1: 36px; --wds-fs-h2: 29px; --wds-fs-h3: 22px; --wds-fs-h4: 18.5px;
		--wds-gutter: 32px;
		--wds-sec-lg: 80px; --wds-sec-md: 56px; --wds-sec-sm: 32px;
		--wds-h2-top: 64px; --wds-h3-top: 32px;
	}
}
/* 모바일 (§27: PC 축소판이 아니라 별도 기준) */
@media (max-width: 767px) {
	:root {
		--wds-fs-h1: 30px;   --wds-lh-h1: 1.30;
		--wds-fs-h2: 26px;   --wds-lh-h2: 1.40;
		--wds-fs-h3: 21px;   --wds-lh-h3: 1.45;
		--wds-fs-h4: 18px;   --wds-lh-h4: 1.50;
		--wds-fs-body: 16px;   --wds-lh-body: 1.8;
		--wds-fs-lead: 17px;
		--wds-fs-sm: 15px;
		--wds-fs-table: 15px;
		--wds-gutter: 20px;
		--wds-sec-lg: 64px; --wds-sec-md: 48px; --wds-sec-sm: 32px;
		--wds-h2-top: 48px; --wds-h2-bot: 20px;
		--wds-h3-top: 32px; --wds-h4-top: 24px;
	}
}

/* ═══ ② BASE ════════════════════════════════════════════ */
.wds { background: var(--wds-bg); }
.wds body, body.wds { background: var(--wds-bg); color: var(--wds-text); }

/* 🚨 색은 「밝은 배경 위」에서만 지정한다. 배경 사진·어두운 섹션 위 글씨는
      원래 흰색이라 여기서 색을 걸면 안 보인다. 2026-09-01 에 실제로 겪었다.
      → 히어로·배너·오버레이 하위는 전부 제외한다. */
body.wds .content_wrap :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,th,figcaption,summary):not([class*="hero"] *):not([class*="visual"] *):not([class*="banner"] *):not([class*="overlay"] *):not([class*="quick_menu"] *) {
	letter-spacing: var(--wds-ls-body);
	word-break: keep-all;
	word-break: auto-phrase;
	overflow-wrap: break-word;
}

/* 🚨 태그 선택자(0,0,1)만으로는 페이지 <style> 의 `.dn-x p{}`(0,1,1) 를 못 이긴다.
      실측 : 홈 h1 이 weight 300 · 의료진 본문이 17.9px 로 남았다.
      → 컨테이너를 한 단계 붙여 (0,2,1) 로 올린다. !important 는 쓰지 않는다.
   🚨 히어로·배너·오버레이는 제외한다. 그쪽 글씨는 배경 사진 위라 크기 체계가 다르다. */
body.wds :is(.content_wrap,.cont_wrap,main) :is(h1,.h1):not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *):not([class*="overlay"] *) { font-size: var(--wds-fs-h1); font-weight: var(--wds-fw-h1); line-height: var(--wds-lh-h1); letter-spacing: var(--wds-ls-tight); }
body.wds :is(.content_wrap,.cont_wrap,main) :is(h2,.h2):not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *):not([class*="overlay"] *) { font-size: var(--wds-fs-h2); font-weight: var(--wds-fw-h2); line-height: var(--wds-lh-h2); letter-spacing: var(--wds-ls-tight); }
body.wds :is(.content_wrap,.cont_wrap,main) :is(h3,.h3):not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *):not([class*="overlay"] *) { font-size: var(--wds-fs-h3); font-weight: var(--wds-fw-h3); line-height: var(--wds-lh-h3); letter-spacing: var(--wds-ls-tight); }
body.wds :is(.content_wrap,.cont_wrap,main) :is(h4,.h4):not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *):not([class*="overlay"] *) { font-size: var(--wds-fs-h4); font-weight: var(--wds-fw-h4); line-height: var(--wds-lh-h4); }
body.wds :is(.content_wrap,.cont_wrap,main) :is(p,li,dd,dt):not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *):not([class*="overlay"] *):not(nav *):not(header *):not(footer *):not([class*="gnb"] *):not([class*="menu"] *):not([class*="langswitch"] *) { font-size: var(--wds-fs-body); line-height: var(--wds-lh-body); font-weight: 400; }
body.wds :is(.content_wrap,.cont_wrap,main) :is(small,figcaption):not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *):not([class*="overlay"] *) { font-size: var(--wds-fs-xs); line-height: var(--wds-lh-xs); color: var(--wds-text-sub); }
body.wds :is(.content_wrap,.cont_wrap,main) :is(p,li) strong { font-weight: 700; font-size: inherit; }

/* 제목 앞뒤 간격 (§9) — 리듬은 여기 한 곳에서만 정한다.
   🚨 카드·아코디언·목록 안 제목은 섹션 제목이 아니다. 여백을 상속받으면 안 된다. */
body.wds .content_wrap :is(h2,h3,h4):not([class*="card"] *):not([class*="card"]):not([class*="faq"] *):not([class*="hero"] *):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]) {
	margin-left: 0; margin-right: 0;
}
body.wds .content_wrap h2:not([class*="card"] *):not([class*="card"]):not([class*="faq"] *):not([class*="hero"] *):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]) { margin-top: var(--wds-h2-top); margin-bottom: var(--wds-h2-bot); }
body.wds .content_wrap h3:not([class*="card"] *):not([class*="card"]):not([class*="faq"] *):not([class*="hero"] *):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]) { margin-top: var(--wds-h3-top); margin-bottom: var(--wds-h3-bot); }
body.wds .content_wrap h4:not([class*="card"] *):not([class*="card"]):not([class*="faq"] *):not([class*="hero"] *):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]) { margin-top: var(--wds-h4-top); margin-bottom: var(--wds-h4-bot); }
body.wds .content_wrap p:not([class*="card"] *):not([class*="hero"] *) { margin: 0 0 var(--wds-p-gap); }
body.wds .content_wrap :is(ul,ol):not([class*="card"] *):not([class*="hero"] *):not([class*="nav"] *) { margin: 0 0 var(--wds-p-gap); padding-left: 1.15em; }
body.wds .content_wrap li:not([class*="card"] *):not([class*="hero"] *):not([class*="row"] *):not([class*="meta"] *):not(nav *) + li { margin-top: 10px; }   /* §15: 8~12px */

/* 링크 (§30 계열) — 밑줄은 hover 에만. 목록형 링크가 밑줄로 덮이면 소음이 된다 */
body.wds .content_wrap a { color: inherit; text-decoration: none; border-bottom: 0; }
body.wds .content_wrap p > a:not([class]), body.wds .content_wrap li > a:not([class]) { color: var(--wds-primary); }
body.wds .content_wrap p > a:not([class]):hover, body.wds .content_wrap li > a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; }
body.wds .content_wrap a[style*="underline"] { text-decoration: none !important; }

/* 이미지 (§11) — 비율과 radius 를 페이지가 정하지 않는다
   🚨 2026-09-02 : 여기서 준 12px 이 전 페이지 사진 115장을 둥글게 만들고 있었다
      (홈 19 · 위치 20 · 27분 34 · 리얼리뷰 10 · 이벤트 5 · 셀프후기 8 …).
      원장 지시 「기존의 사각형으로」 — 사진은 각지게 둔다.
      아바타처럼 원형이어야 하는 것만 예외로 둔다. */
body.wds .content_wrap img { max-width: 100%; height: auto; border-radius: 0; }
body.wds .content_wrap :is([class*="avatar"],[class*="profile"]) img { border-radius: var(--wds-r-pill); }
body.wds .content_wrap [class*="hero"] img { border-radius: 0; }

/* 애니메이션 (§32) — Fade Up 하나 */
@media (prefers-reduced-motion: reduce) {
	body.wds [data-aos], body.wds .aos-init { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* ═══ ③ LAYOUT ══════════════════════════════════════════ */
.wds-container, body.wds .content_wrap > * > .cont,
body.wds .content_wrap .wds-container {
	width: 100%;
	max-width: calc(var(--wds-container) + var(--wds-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--wds-gutter);
}
.wds-container--text { max-width: calc(var(--wds-measure) + var(--wds-gutter) * 2); }
.wds-container--wide { max-width: calc(var(--wds-wide) + var(--wds-gutter) * 2); }

/* 본문 텍스트가 화면 끝까지 늘어나지 않게 (§3 마지막 줄) */
body.wds .content_wrap .wds-prose > :is(p,ul,ol,h2,h3,h4,blockquote) { max-width: var(--wds-measure); }

.wds-section { padding-block: var(--wds-sec-lg); }
.wds-section--md { padding-block: var(--wds-sec-md); }
.wds-section--sm { padding-block: var(--wds-sec-sm); }
.wds-section + .wds-section { padding-top: 0; }
.wds-section--surface { background: var(--wds-surface); }

.wds-stack > * + * { margin-top: var(--wds-5); }

/* ═══ ④ COMPONENT ═══════════════════════════════════════ */

/* ── Button (§12) — 세 종류만 ───────────────────────────── */
.wds-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--wds-2);
	min-height: 50px; padding: 0 var(--wds-6);
	font-size: var(--wds-fs-sm); font-weight: 600; line-height: 1.2; letter-spacing: var(--wds-ls-body);
	border-radius: var(--wds-r-sm); border: 1.5px solid transparent;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: background var(--wds-dur) var(--wds-ease), color var(--wds-dur) var(--wds-ease), border-color var(--wds-dur) var(--wds-ease);
}
.wds-btn--primary   { background: var(--wds-primary); color: var(--wds-text-invert); border-color: var(--wds-primary); }
.wds-btn--primary:hover { background: var(--wds-primary-dark); border-color: var(--wds-primary-dark); color: var(--wds-text-invert); }
.wds-btn--secondary { background: transparent; color: var(--wds-primary); border-color: var(--wds-primary); }
.wds-btn--secondary:hover { background: var(--wds-primary); color: var(--wds-text-invert); }
.wds-btn--ghost     { background: transparent; color: var(--wds-text); border-color: var(--wds-border-strong); }
.wds-btn--ghost:hover { border-color: var(--wds-text); }
.wds-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: var(--wds-fs-sm); font-weight: 600; color: var(--wds-primary);
	text-decoration: none; border-bottom: 0;
}
.wds-link:hover { color: var(--wds-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
	.wds-btn { min-height: 48px; width: 100%; }
	.wds-btn-group { display: grid; gap: var(--wds-3); }
}

/* ── Card (§13) — 테두리 중심. 그림자는 강조 카드만 ─────── */
.wds-card {
	display: flex; flex-direction: column;
	background: var(--wds-bg);
	border: 1px solid var(--wds-border);
	border-radius: var(--wds-r-md);
	overflow: hidden;
	box-shadow: var(--wds-shadow);
	transition: border-color var(--wds-dur) var(--wds-ease), box-shadow var(--wds-dur) var(--wds-ease);
}
.wds-card:hover { border-color: var(--wds-border-strong); }
.wds-card--raise { box-shadow: var(--wds-shadow-raise); border-color: transparent; }
.wds-card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--wds-surface); }
.wds-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.wds-card__body { padding: var(--wds-5); display: flex; flex-direction: column; gap: var(--wds-3); flex: 1; }
.wds-card__cat { font-size: var(--wds-fs-label); font-weight: 600; letter-spacing: var(--wds-ls-label); color: var(--wds-primary); text-transform: uppercase; }
.wds-card__title { font-size: var(--wds-fs-h4); font-weight: 600; line-height: var(--wds-lh-h4); color: var(--wds-text); margin: 0; }
.wds-card__summary { font-size: var(--wds-fs-sm); line-height: var(--wds-lh-sm); color: var(--wds-text-sub); margin: 0; }
.wds-card__meta { margin-top: auto; font-size: var(--wds-fs-xs); color: var(--wds-text-muted); }
.wds-cards { display: grid; gap: var(--wds-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 767px) { .wds-card__body { padding: var(--wds-4); } }

/* ── Table (§14) ────────────────────────────────────────── */
.wds-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--wds-border); border-radius: var(--wds-r-md); }
.wds-table { width: 100%; border-collapse: collapse; font-size: var(--wds-fs-table); line-height: var(--wds-lh-table); }
.wds-table th, .wds-table td { padding: var(--wds-4) var(--wds-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--wds-border); word-break: keep-all; }
.wds-table thead th { background: var(--wds-surface); font-weight: 600; color: var(--wds-text); white-space: nowrap; }
.wds-table tbody tr:last-child :is(th,td) { border-bottom: 0; }
.wds-table tbody th:first-child, .wds-table td:first-child { font-weight: 600; }
@media (max-width: 767px) {
	.wds-table { min-width: 560px; }               /* 억지로 줄이지 않고 가로 스크롤 */
	.wds-table th, .wds-table td { padding: var(--wds-3) var(--wds-4); }
}

/* ── FAQ (§16) — Accordion 하나만 ───────────────────────── */
.wds-faq { border-top: 1px solid var(--wds-border); }
.wds-faq__item { border-bottom: 1px solid var(--wds-border); }
.wds-faq__q {
	display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wds-4);
	width: 100%; padding: var(--wds-5) 0;
	font-size: var(--wds-fs-h4); font-weight: 600; line-height: 1.5; color: var(--wds-text);
	background: none; border: 0; text-align: left; cursor: pointer;
}
.wds-faq__q::after {
	content: ""; flex: 0 0 18px; height: 18px; margin-top: 5px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform var(--wds-dur) var(--wds-ease);
}
.wds-faq__item[open] .wds-faq__q::after, .wds-faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.wds-faq__a { padding: 0 0 var(--wds-5); font-size: var(--wds-fs-body); line-height: var(--wds-lh-body); color: var(--wds-text-sub); }
.wds-faq__a > :last-child { margin-bottom: 0; }
@media (max-width: 767px) { .wds-faq__q { font-size: 17px; padding: var(--wds-4) 0; } .wds-faq__a { font-size: 16.5px; } }

/* ── Callout (§17) — 네 종류만 ──────────────────────────── */
.wds-callout {
	padding: var(--wds-5) var(--wds-6);
	background: var(--wds-surface);
	border-left: 3px solid var(--wds-border-strong);
	border-radius: var(--wds-r-sm);
	margin: var(--wds-5) 0;
}
.wds-callout__label { display: block; margin-bottom: var(--wds-2); font-size: var(--wds-fs-label); font-weight: 700; letter-spacing: var(--wds-ls-label); color: var(--wds-text-muted); }
.wds-callout > :last-child { margin-bottom: 0; }
.wds-callout--info      { border-left-color: var(--wds-border-strong); }
.wds-callout--important { border-left-color: var(--wds-primary); background: var(--wds-primary-soft); }
.wds-callout--important .wds-callout__label { color: var(--wds-primary); }
.wds-callout--evidence  { border-left-color: var(--wds-success); }
.wds-callout--evidence  .wds-callout__label { color: var(--wds-success); }

/* ── Doctor Comment (§18) ───────────────────────────────── */
.wds-doctor {
	display: grid; grid-template-columns: 72px 1fr; gap: var(--wds-5);
	padding: var(--wds-6); margin: var(--wds-6) 0;
	background: var(--wds-surface); border-radius: var(--wds-r-md);
}
.wds-doctor__photo { width: 72px; height: 72px; border-radius: var(--wds-r-pill); object-fit: cover; }
.wds-doctor__name { font-size: var(--wds-fs-sm); font-weight: 700; color: var(--wds-primary); margin: 0 0 var(--wds-2); letter-spacing: var(--wds-ls-body); }
.wds-doctor__text { font-size: var(--wds-fs-body); line-height: var(--wds-lh-body); color: var(--wds-text); margin: 0; }
@media (max-width: 767px) { .wds-doctor { grid-template-columns: 56px 1fr; gap: var(--wds-4); padding: var(--wds-5); } .wds-doctor__photo { width: 56px; height: 56px; } }

/* ── Author / Medical Review (§19) ──────────────────────── */
.wds-author {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--wds-2) var(--wds-4);
	padding: var(--wds-4) 0; margin-top: var(--wds-8);
	border-top: 1px solid var(--wds-border); border-bottom: 1px solid var(--wds-border);
	font-size: var(--wds-fs-xs); color: var(--wds-text-muted);
}
.wds-author__name { font-weight: 700; color: var(--wds-text); }
.wds-author a { color: var(--wds-primary); }

/* ── Breadcrumb (§10) ───────────────────────────────────── */
.wds-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--wds-2); margin-bottom: var(--wds-4); font-size: var(--wds-fs-xs); color: var(--wds-text-muted); }
.wds-breadcrumb a { color: inherit; text-decoration: none; }
.wds-breadcrumb a:hover { color: var(--wds-text); }
.wds-breadcrumb li + li::before { content: "›"; margin-right: var(--wds-2); color: var(--wds-border-strong); }
.wds-breadcrumb ol, .wds-breadcrumb ul { display: flex; flex-wrap: wrap; gap: var(--wds-2); list-style: none; margin: 0; padding: 0; }

/* ── Hero (§10) — Breadcrumb → 카테고리 → H1 → 소개문 → CTA ─ */
.wds-hero { padding-block: var(--wds-9) var(--wds-8); }
.wds-hero__cat { display: inline-block; margin-bottom: var(--wds-3); font-size: var(--wds-fs-label); font-weight: 600; letter-spacing: var(--wds-ls-label); color: var(--wds-primary); text-transform: uppercase; }
.wds-hero__title { margin: 0 0 var(--wds-5); }
.wds-hero__lead { max-width: var(--wds-measure); margin: 0 0 var(--wds-6); font-size: var(--wds-fs-lead); line-height: var(--wds-lh-lead); color: var(--wds-text-sub); }
.wds-hero__media { margin-top: var(--wds-7); aspect-ratio: 16/9; overflow: hidden; border-radius: var(--wds-r-lg); }
.wds-hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* 배경 사진 위에 글씨가 올라가는 히어로 — 색은 흰색으로 고정한다 */
.wds-hero--overlay { position: relative; color: var(--wds-text-invert); }
.wds-hero--overlay :is(h1,p,.wds-hero__cat,.wds-hero__lead) { color: var(--wds-text-invert); }

/* ── Related Content (§39) ──────────────────────────────── */
.wds-related { margin-top: var(--wds-9); padding-top: var(--wds-6); border-top: 1px solid var(--wds-border); }
.wds-related__title { font-size: var(--wds-fs-h4); font-weight: 600; margin: 0 0 var(--wds-4); }
.wds-related__list { display: grid; gap: var(--wds-3); list-style: none; margin: 0; padding: 0; }
.wds-related__list a { display: block; font-size: var(--wds-fs-sm); font-weight: 600; color: var(--wds-text); }
.wds-related__list a:hover { color: var(--wds-primary); }

/* ── CTA (§24) — 페이지마다 다른 배너를 만들지 않는다 ───── */
.wds-cta {
	margin-top: var(--wds-11); padding: var(--wds-9) var(--wds-6);
	background: var(--wds-surface); border-radius: var(--wds-r-lg); text-align: center;
}
.wds-cta__title { font-size: var(--wds-fs-h3); font-weight: 700; line-height: var(--wds-lh-h3); margin: 0 0 var(--wds-3); }
.wds-cta__text { font-size: var(--wds-fs-body); line-height: var(--wds-lh-body); color: var(--wds-text-sub); margin: 0 auto var(--wds-6); max-width: 46em; }
.wds-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--wds-3); }
@media (max-width: 767px) { .wds-cta { padding: var(--wds-8) var(--wds-5); } .wds-cta__actions { display: grid; } }

/* ═══ ⑤ BRIDGE ══════════════════════════════════════════
   기존 마크업을 시스템에 연결한다.
   41개 페이지 · 클래스 수백 개를 한 번에 다시 쓸 수 없다. 그래서 두 단계로 간다.
     지금  — 브리지로 값을 통일한다 (마크업 그대로)
     다음  — 페이지를 하나씩 .wds-* 컴포넌트 마크업으로 옮기고 브리지에서 뺀다
   🚨 브리지는 「줄어들어야 하는 코드」다. 여기에 새 규칙을 계속 늘리면 안 된다.
   🚨 !important 는 여기서만. 기존 페이지 <style> 과 combined.min.css 가 같은 무기를 쓴다. */

/* ── 제목 역할을 하는 div (레거시) ───────────────────────
   실측 : .cont_title 이 진료철학 40.8 · 의료진 30.6 · 27분 51px 로 제각각이었다.
          h 태그가 아니라 div 라서 위계도 없었다. 크기만이라도 하나로 맞춘다. */
/* 🚨 h1 이 .prac_section_title .cont_title 을 함께 달고 있어 26px 로 줄어들었다.
      제목 div 를 위한 규칙이 진짜 h1 을 끌어내리면 안 된다. h1 은 제외한다. */
body.wds :is(.cont_title, .prac_section_title, .dn-heading, .wune-related__title):not(h1) {
	font-size: var(--wds-fs-h2) !important;
	font-weight: var(--wds-fw-h2) !important;
	line-height: var(--wds-lh-h2) !important;
	letter-spacing: var(--wds-ls-tight);
	color: var(--wds-text);
}
body.wds :is(.cont_sub_title, .cont_text_title, .casebook-card__title,
             .dn-related-blog__link, .prac_card_title, .rr-card__title) {
	font-size: var(--wds-fs-h3) !important;
	font-weight: 700 !important;
	line-height: var(--wds-lh-h3) !important;
	color: var(--wds-text);
}
body.wds :is(.dn-implant-tab, .breast-hub__card-title, .dn-implant-method__name) {
	font-size: var(--wds-fs-h4) !important;
	font-weight: 600 !important;
	line-height: var(--wds-lh-h4) !important;
}

/* ── 라벨·아이브로우 — 한글 하한 13.5px ─────────────────
   실측 : 11.6 · 12.2 · 12.5 · 12.8 · 13.9 로 다섯 가지였다. */
body.wds :is(.dn-label, .prac_section_label, .cont_title_info, .dn-article-card__tag,
             .wune-related__desc, .dn-page-hero__label, .dn-sub-hero__eyebrow,
             .casebook-finder__tag, .casebook-card__no, .dn-card__cat, .blog-card__kicker) {
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
	letter-spacing: var(--wds-ls-label);
}

/* ── 본문 성격의 레거시 블록 ─────────────────────────── */
body.wds :is(.cont_text, .dn-guide-closing__body, .dn-kakao-cta__heading, .dn-insight-card__desc) {
	font-size: var(--wds-fs-body) !important;
	line-height: var(--wds-lh-body) !important;
	font-weight: 400 !important;
}
body.wds :is(.dn-kakao-cta__sub, .dn-related-blog__sub, .rr-card__body,
             .blog-card__excerpt, .breast-hub__card-desc) {
	font-size: var(--wds-fs-sm) !important;
	line-height: var(--wds-lh-sm) !important;
	color: var(--wds-text-sub) !important;
}

/* ── 색 — 브라운 잔재를 토큰으로 (combined.min.css 하드코딩분) ── */
body.wds :is(.foot_wrap .cont_text, .foot_wrap .cont_text a, .dn-footer__pc-info .cont_text,
             .dn-footer__bottom .cont_text, .dn-footer__copy, .dn-footer__pc-legal a,
             .dn-footer__copy-row .dn-footer__right a) { color: var(--wds-text) !important; }
body.wds :is(.dn-footer__pc-copy, .dn-testimonial-card__author, .dn-testimonials__btn,
             .minutes_wrap .minutes08 .cont_text_info.color_g,
             .minutes_wrap .minutes03 .cont_text) { color: var(--wds-text-sub) !important; }
body.wds :is(.dn-page-hero__label, .dn-label, .dn-sub-hero__eyebrow,
             .prac_section_label) { color: var(--wds-primary) !important; }
body.wds .quick_menu_wrap { background: rgba(26,26,26,.92) !important; }
body.wds :is(.dn-rv-card .dn-card__overlay, .dn-rv-card:hover .dn-card__overlay) {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}
body.wds .wunetv-scrollbar-thumb { background: var(--wds-primary); }

/* ── Button (§12) — 레거시 버튼을 3종으로 수렴 ─────────── */
body.wds :is(.dn-kakao-cta__btn--kakao, .head-cta-btn, .dn-guide-closing__btn--primary) {
	background: var(--wds-primary) !important;
	border: 1.5px solid var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
	border-radius: var(--wds-r-sm) !important;
	min-height: 50px; font-size: var(--wds-fs-sm); font-weight: 600;
}
body.wds :is(.dn-kakao-cta__btn--kakao:hover, .head-cta-btn:hover,
             .dn-guide-closing__btn--primary:hover) {
	background: var(--wds-primary-dark) !important;
	border-color: var(--wds-primary-dark) !important;
}
body.wds :is(.dn-kakao-cta__btn--reserve, .dn-guide-closing__btn--outline) {
	background: transparent !important;
	border: 1.5px solid var(--wds-primary) !important;
	color: var(--wds-primary) !important;
	border-radius: var(--wds-r-sm) !important;
	min-height: 50px; font-size: var(--wds-fs-sm); font-weight: 600;
}
body.wds :is(.dn-kakao-cta__btn--reserve:hover, .dn-guide-closing__btn--outline:hover) {
	background: var(--wds-primary) !important; color: var(--wds-text-invert) !important;
}
/* Text Link — 「자세히 보기 →」 계열 */
body.wds :is(.cm-hub__more, .ev_viewmore, .dn-mobile-viewall a, .casebook-card__more,
             .card-en, .dn-related-blog__more) {
	font-size: var(--wds-fs-sm) !important; font-weight: 600 !important;
	color: var(--wds-primary) !important; text-decoration: none; border-bottom: 0;
}

/* ── Card (§13) — 반복 카드는 전부 같은 모양 ───────────── */
body.wds :is(.dn-insight-card, .prac_card, .breast-hub__card, .about-hub__value-card,
             .cert_benefit_card, .cm-hub__rv-card, .rr-card, .dn-geo-deep) {
	background: var(--wds-bg);
	border: 1px solid var(--wds-border);
	border-radius: var(--wds-r-md);
	padding: var(--wds-5);
	box-shadow: none;
}
/* 🚨 사진 카드는 대상이 아니다. 사진에 테두리와 안쪽 여백을 두르면 어색해진다.
      2026-09-01 에 홈 리얼셀피 16장에 회색 선이 그어졌다. */
body.wds :is(.dn-card, .dn-cards__list > li, .blog-card, .casebook-card) {
	background: transparent; border: 0; padding: 0; border-radius: 0;
}
/* 🚨 카드 안 사진에만 12px 을 주던 잔재. 사진은 각지게 하나로 (원장 지시). */
body.wds :is(.dn-card img, .blog-card img, .casebook-card img) { border-radius: 0; }

/* ── Table (§14) — 모든 표를 하나로 ────────────────────── */
body.wds .content_wrap table {
	width: 100%; border-collapse: collapse;
	font-size: var(--wds-fs-table); line-height: var(--wds-lh-table);
}
body.wds .content_wrap :is(th, td) {
	padding: var(--wds-4) var(--wds-5); text-align: left; vertical-align: top;
	border-bottom: 1px solid var(--wds-border); word-break: keep-all;
}
body.wds .content_wrap thead th { background: var(--wds-surface); font-weight: 600; white-space: nowrap; }
body.wds .content_wrap tbody tr:last-child :is(th, td) { border-bottom: 0; }
body.wds .content_wrap :is([class*="table-wrap"], [class*="table_wrap"], .tbl_wrap) {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	border: 1px solid var(--wds-border); border-radius: var(--wds-r-md);
}
@media (max-width: 767px) {
	body.wds .content_wrap :is(th, td) { padding: var(--wds-3) var(--wds-4); }
	body.wds .content_wrap [class*="table-wrap"] table { min-width: 560px; }
}

/* ── FAQ (§16) — 아코디언 하나로 ───────────────────────── */
body.wds :is(.cert_faq_q, .beforeafter-faq__q, .dn-faq__q) {
	font-size: var(--wds-fs-h4) !important; font-weight: 600 !important;
	line-height: 1.5 !important; color: var(--wds-text) !important;
}
body.wds :is(.cert_faq_a, .beforeafter-faq__a, .dn-faq__a) {
	font-size: var(--wds-fs-body) !important; line-height: var(--wds-lh-body) !important;
	color: var(--wds-text-sub) !important;
}
body.wds :is(.cert_faq_item, .beforeafter-faq__item, .dn-faq__item) {
	border: 0; border-bottom: 1px solid var(--wds-border); border-radius: 0;
	background: transparent; padding: 0;
}

/* ── Callout (§17) — 강조 박스는 한 모양 ───────────────── */
body.wds :is(.dn-geo-content__block, .dn-geo-card, .breast-hub__definition, .wb-note) {
	background: var(--wds-surface);
	border: 0; border-left: 3px solid var(--wds-primary);
	border-radius: var(--wds-r-sm);
	padding: var(--wds-5) var(--wds-6);
	margin: var(--wds-5) 0;
}

/* ── CTA (§24) — 하단 상담 배너 ────────────────────────── */
body.wds :is(.dn-kakao-cta, .dn-guide-closing, .breast-hub__cta) {
	margin-top: var(--wds-11);
	padding: var(--wds-9) var(--wds-6);
	background: var(--wds-surface);
	border: 0; border-radius: var(--wds-r-lg);
}
@media (max-width: 767px) {
	body.wds :is(.dn-kakao-cta, .dn-guide-closing, .breast-hub__cta) {
		padding: var(--wds-8) var(--wds-5);
	}
}

/* ── Hero (§10) — 페이지 머리 두 종류를 하나로 ──────────
   실측 : dn-sub-hero__title 55.8 · dn-page-hero__title 22 — 같은 역할인데 2.5배 차이.
   🚨 배경 사진 위라 색은 지정하지 않는다. 크기·간격·정렬만 맞춘다. */
body.wds :is(.dn-page-hero__title, .dn-sub-hero__title) {
	font-size: var(--wds-fs-h1) !important;
	font-weight: var(--wds-fw-h1) !important;
	line-height: var(--wds-lh-h1) !important;
	letter-spacing: var(--wds-ls-tight);
	margin: 0 0 var(--wds-4);
}
body.wds :is(.dn-page-hero__label, .dn-sub-hero__eyebrow) {
	display: inline-block; margin: 0 0 var(--wds-3);
}
body.wds :is(.dn-page-hero__desc, .dn-sub-hero__desc,
             .dn-page-hero__lead, .dn-sub-hero__lead) {
	font-size: var(--wds-fs-lead) !important; line-height: var(--wds-lh-lead) !important;
	max-width: var(--wds-measure); margin: 0;
}

/* ── 콘텐츠 폭 (§3) — 본문이 화면 끝까지 늘어나지 않게 ──── */
body.wds :is(.dn-geo-content__block, .dn-natural-results__body,
             .dn-insight-section, .introduce_wrap .cont) > p { max-width: var(--wds-measure); }

/* ── Hero 내부 (§10) ────────────────────────────────────
   히어로를 「제외」만 해 두면 그 안이 방치된다. 실측에서 그대로 드러났다.
     .dn-sub-hero__intro h2  23.8px/400   .dn-sub-hero__intro p  17.9px/300
   요청서 §10 구조 : Breadcrumb → 카테고리 → H1 → 2~3줄 소개문 → CTA → 대표 이미지
   그래서 히어로 안도 역할별로 값을 정한다. 색만 손대지 않는다(배경 사진 위라서).
   🚨 --overlay(사진 위 글씨)는 흰색이 이미 걸려 있다. 크기만 맞춘다. */
body.wds :is(.dn-sub-hero__intro, .dn-page-hero__intro) h2 {
	font-size: var(--wds-fs-h3) !important;
	font-weight: 700 !important;
	line-height: var(--wds-lh-h3) !important;
	letter-spacing: var(--wds-ls-tight);
	margin: 0 0 var(--wds-3);
}
body.wds :is(.dn-sub-hero__intro, .dn-page-hero__intro) :is(p, li),
body.wds :is(.dn-sub-hero__intro-body, .dn-page-hero__intro-body) {
	font-size: var(--wds-fs-lead) !important;
	font-weight: 400 !important;
	line-height: var(--wds-lh-lead) !important;
	max-width: var(--wds-measure);
}
@media (max-width: 767px) {
	body.wds :is(.dn-sub-hero__intro, .dn-page-hero__intro) :is(p, li),
	body.wds :is(.dn-sub-hero__intro-body, .dn-page-hero__intro-body) {
		font-size: var(--wds-fs-lead) !important;   /* 0.83rem(13.3px) 로 줄던 것을 막는다 */
	}
	body.wds :is(.dn-sub-hero__intro, .dn-page-hero__intro) h2 {
		font-size: var(--wds-fs-h3) !important;
	}
}

/* ── 모바일에서 본문이 12~14px 로 떨어지는 것을 막는다 ────
   실측 : combined.min.css 가 .dn-natural-results__body p 등에 0.875rem !important,
          페이지 <style> 이 .dn-geo-content__block p 에 15.75px !important 를 건다.
   한글 본문은 15px 밑으로 내려가면 읽히지 않는다. 바닥만 잡는다. */
@media (max-width: 767px) {
	/* 🚨 2026-09-02 전수조사 : 여기 `[class*="card"]` 와일드카드가 문제였다.
	      `.dn-geo-card` · `.rr-cta-card` 처럼 이름에 card 가 들어가지만 실제로는
	      본문을 담는 콜아웃까지 15px 로 줄여 버렸다. 모바일에서 본문이 작아 보이던
	      진짜 이유다(/about/practice/ 16곳 · /breast/reduction/ 10곳 …).
	      발췌를 담는 「진짜 카드」만 지정한다. */
	body.wds :is(.content_wrap, .cont_wrap) :is(p, li, dd):not([class*="hero"] *) {
		font-size: var(--wds-fs-body) !important;
		line-height: var(--wds-lh-body) !important;
	}
	body.wds :is(.content_wrap, .cont_wrap) :is(
		.dn-card, .blog-card, .rr-card, .casebook-card, .prac_card, .guide-card,
		.about-hub__value-card, .breast-hub__card, .cm-hub__rv-card,
		.dn-insight-card, .dn-min-card, .cert_benefit_card
	) :is(p, li) {
		font-size: var(--wds-fs-sm) !important;
		line-height: var(--wds-lh-sm) !important;
	}
}

/* ── 마지막 잔여분 (2026-09-01 실측으로 특정) ─────────────
   전 페이지 스캔에서 스케일 밖에 남은 것은 아래 다섯 가지뿐이었다. */

/* ① 허브 히어로 소개문 — 16px/300 이었다. 시술 페이지 소개문과 같은 값으로 */
body.wds :is(.dn-page-hero__sub, .dn-sub-hero__sub) {
	font-size: var(--wds-fs-lead) !important;
	font-weight: 400 !important;
	line-height: var(--wds-lh-lead) !important;
	max-width: var(--wds-measure);
}

/* ② CTA 설명문 — 15.5px 이었다. 상담을 권하는 문장이라 본문 크기로 읽혀야 한다 (§24) */
body.wds .dn-kakao-cta__sub {
	font-size: var(--wds-fs-body) !important;
	line-height: var(--wds-lh-body) !important;
}

/* ③ 의료진 소개 강조 문장 — 17.9px. 인용문 성격이라 lead 로 */
body.wds .dn-doctor-intro__highlight {
	font-size: var(--wds-fs-lead) !important;
	font-weight: 600 !important;
	line-height: var(--wds-lh-lead) !important;
}

/* ④ 약력·논문 목록 — .cont_text 안의 <p> 가 18px/1.55 였다.
      🚨 .cont_text 자체에만 걸면 안 된다. 실제 글자는 그 안의 <p> 에 있다.
         이 내용은 DB(gc('doctor',…))에서 오므로 파일을 고쳐도 바뀌지 않는다. */
body.wds .cont_text :is(p, li, span, div) {
	font-size: var(--wds-fs-body) !important;
	line-height: var(--wds-lh-body) !important;
	font-weight: 400 !important;
}
body.wds .cont_text :is(p, li) strong,
body.wds .cont_text b { font-weight: 700 !important; }

/* ⑤ 카드 안 제목 — h3 가 카드 제목으로 쓰이면 h4 크기를 따른다 (§13) */
body.wds :is([class*="card"], .dn-implant-method) :is(h3, h4):not([class*="hero"] *) {
	font-size: var(--wds-fs-h4) !important;
	font-weight: 600 !important;
	line-height: var(--wds-lh-h4) !important;
	margin: 0 0 var(--wds-3);
}

/* 섹션 제목 역할인데 클래스로 크기를 따로 잡던 것들 (실측 34px) */
body.wds :is(.dn-faq__title, .dn-articles__title, .dn-rv__title, .dn-cards__title,
             .breast-related-posts__title, .about-hub__section-title) {
	font-size: var(--wds-fs-h2) !important;
	font-weight: var(--wds-fw-h2) !important;
	line-height: var(--wds-lh-h2) !important;
	letter-spacing: var(--wds-ls-tight);
}

/* ── 브라운 잔재 마무리 (2026-09-01 계산색 기준 실측) ──────
   토큰을 연결한 뒤 남은 것은 아래 일곱 가지뿐이었다. 전부 하드코딩된 색이다.
   🚨 밝은 글자색(#f3eee6)은 어두운 버튼 위 글씨다. 검정으로 바꾸면 안 보인다.
      계산색이 밝으면 흰색으로, 어두우면 검정으로 나눈다. */

/* 푸터 베이지 #dfc9b0 — 사업자정보 박스 */
body.wds .cont_box1 { background: var(--wds-surface) !important; }

/* CTA·관련 페이지 카드 글자 */
body.wds :is(.dn-kakao-cta__heading, .wune-related__name) { color: var(--wds-text) !important; }
body.wds .wune-related__desc { color: var(--wds-text-sub) !important; }

/* 어두운 배경 위 밝은 글자 — 흰색으로 (검정으로 바꾸면 사라진다) */
body.wds :is(.breast-bottom-card__button, .dn-hero__cta-btn--primary) { color: var(--wds-text-invert) !important; }
body.wds .dn-hero__cta-btn { background: var(--wds-surface); }
body.wds .dn-hero__cta-btn--primary { background: var(--wds-primary); border-color: var(--wds-primary); }

/* 의료진 약력·논문 — DB(gc('doctor',…))에서 온 HTML 에 인라인 색이 박혀 있다.
   🚨 DB 를 고치는 게 정석이지만 화면 정리가 먼저라 같은 무게로 누른다. */
body.wds .cont_text :is(span, a, p, li, div) { color: var(--wds-text) !important; }
body.wds .cont_text a:hover { color: var(--wds-primary) !important; }
body.wds :is(.content_wrap, .cont_wrap) [style*="color:#8a7a68" i],
body.wds :is(.content_wrap, .cont_wrap) [style*="color: #8a7a68" i] { color: var(--wds-text-sub) !important; }

/* 홈 히어로 아웃라인 버튼 — 배경 사진 위라 투명 + 흰 테두리가 맞다 */
body.wds .dn-hero__cta-btn--outline {
	background: transparent !important;
	border: 1.5px solid rgba(255,255,255,.75) !important;
	color: var(--wds-text-invert) !important;
}
body.wds .dn-hero__cta-btn--outline:hover {
	background: rgba(255,255,255,.14) !important;
	border-color: #ffffff !important;
}
/* 지도 자리 표시용 배경 — 인라인 style 이라 같은 무게로 누른다 */
body.wds .map_wrap [style*="background:#e8e0d8" i],
body.wds .map_wrap [style*="background: #e8e0d8" i] { background: var(--wds-surface) !important; }


/* ── 인라인 style 에 박힌 브라운 (2026-09-01 실측) ─────────
   CSS 로는 인라인을 못 이긴다. 값을 알고 있으므로 같은 무게로 누른다.
   🚨 근본 해결은 페이지·DB 의 인라인 style 을 지우는 것이다. 브리지는 임시다. */
body.wds :is(.content_wrap,.cont_wrap) [style*="#8b5c3a" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#2c1a0e" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#5a4028" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#7a6250" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#704526" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#6b5240" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#1a0d03" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#8a7a68" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#8b6f47" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#9a7a5f" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#8f6347" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#a06a3f" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#5a4a3a" i],
body.wds :is(.content_wrap,.cont_wrap) [style*="#8a7a6e" i] {
	color: var(--wds-text-sub) !important;
}

/* combined.min.css 가 색만 따로 잡던 나머지 (실측) */
body.wds .dn-guide-closing__body { color: var(--wds-text-sub) !important; }

/* 🚨 h1 을 브리지에서 빼자 이번엔 페이지 <style> 의 40.8px 이 이겼다.
      h1 은 페이지 대표 제목이라 값이 흔들리면 안 된다. 시스템 값으로 못 박는다.
      (히어로 안 h1 은 제외 — 배경 사진 위 크기 체계가 따로 있다) */
body.wds :is(.content_wrap, .cont_wrap) h1:not([class*="hero"] *):not([class*="hero"]) {
	font-size: var(--wds-fs-h1) !important;
	font-weight: var(--wds-fw-h1) !important;
	line-height: var(--wds-lh-h1) !important;
	letter-spacing: var(--wds-ls-tight);
}

/* ── 가운데 정렬 히어로의 소개문 (2026-09-01) ─────────────
   🚨 max-width 만 걸고 margin 을 안 줘서 왼쪽에 붙었다.
      `.dn-page-hero` 는 text-align:center, `.dn-sub-hero` 는 left 다.
      CSS 는 그 문맥을 모른다 — 클래스로 나눠서 준다. 같은 실수를 세 번째 한 것이다. */
body.wds :is(.dn-page-hero__sub, .dn-page-hero__desc, .dn-page-hero__lead,
             .dn-page-hero__intro p) { margin-inline: auto; }

/* ── 표 (§14) — 「알아보기 어렵다」 ───────────────────────
   바깥 테두리 없이 아래 선만 있어 표의 경계가 안 보였다.
   헤더 아래를 굵게, 첫 열을 강조해 눈이 따라갈 축을 만든다. */
body.wds .content_wrap table {
	border: 1px solid var(--wds-border);
	border-radius: var(--wds-r-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: var(--wds-5) 0;
	background: var(--wds-bg);
}
body.wds .content_wrap :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--wds-border);
	padding: var(--wds-4) var(--wds-5);
	vertical-align: top;
	text-align: left;
}
body.wds .content_wrap thead th {
	background: var(--wds-surface);
	border-bottom: 2px solid var(--wds-border-strong);
	font-weight: 700;
	font-size: var(--wds-fs-label);
	letter-spacing: .04em;
	color: var(--wds-text-sub);
	white-space: nowrap;
}
/* 첫 열 = 읽는 축. 배경과 굵기로 고정한다 */
body.wds .content_wrap tbody :is(td, th):first-child {
	background: var(--wds-surface);
	font-weight: 600;
	color: var(--wds-text);
	white-space: nowrap;
}
body.wds .content_wrap tbody tr:last-child :is(th, td) { border-bottom: 0; }
body.wds .content_wrap :is(td, th) + :is(td, th) { border-left: 1px solid var(--wds-border); }
/* 표 안 문단은 표 글자 크기를 따른다 */
body.wds .content_wrap :is(td, th) :is(p, li, span) {
	font-size: inherit !important;
	line-height: inherit !important;
	margin: 0;
}
@media (max-width: 767px) {
	body.wds .content_wrap :is(th, td) { padding: var(--wds-3) var(--wds-4); }
	body.wds .content_wrap tbody :is(td, th):first-child { white-space: normal; }
}

/* ═══ BUTTON 통일 (§12) ═════════════════════════════════
   원장 지시 : 「버튼의 종류도 디자인 뽑아준대로 · 전부 다 동일한 디자인으로 ·
                색상도 마찬가지 · 임의로 디자인하지마」

   실측(5페이지) — 이게 「제각각」의 실체다
     radius   0 · 3 · 8 · 10 · 22 · 999px      (6종)
     높이     34 · 36 · 40 · 47 · 49 · 50 · 52 · 56 · 57 · 59px  (10종)
     글자     12.5 · 13 · 13.5 · 14.5 · 15 · 15.5 · 17px          (7종)
   🚨 그리고 대비 사고 두 건 — 버건디 배경에 검은 글씨라 글자가 안 보였다.
      .breast-hub__cta-btn (bg #8B1538 / color #1A1A1A)
      .casebook 필터 .active (bg #8B1538 / color #1A1A1A)
      배경이 어두운지 밝은지를 CSS 가 모르는데 글자색만 일괄로 검게 바꾼 결과다.

   종류는 셋뿐이다.
     Primary    버건디 채움 + 흰 글씨   — 상담예약 · 상담하기 · 문의
     Secondary  버건디 테두리 + 버건디 글씨 — 자세히 보기 · 전후사진 보기
     Text Link  버건디 글씨만          — 관련 콘텐츠 보기 →
   그 밖에 Chip(필터) 하나를 더 둔다. 전후사진·후기의 필터는 버튼이 아니다.
   ══════════════════════════════════════════════════════ */

/* ── 공통 골격 ─────────────────────────────────────────── */
body.wds :is(
	.head-cta-btn, .dn-btn,
	.dn-kakao-cta__btn, .dn-guide-closing__btn,
	.breast-hub__cta-btn, .wune-ba-cta__btn, .wune-ba-cta__b,
	.dn-hero__cta-btn, .minutes-bottom-cta__btn, .beforeafter-bottom-cta__btn,
	.guide-share-btn, .wune-consult__btn, .ev_apply_btn
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wds-2);
	min-height: 50px;
	padding: 0 var(--wds-6);
	font-size: var(--wds-fs-sm) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: var(--wds-ls-body);
	border-radius: var(--wds-r-sm) !important;
	border: 1.5px solid transparent;
	text-decoration: none;
	box-shadow: none;
	transition: background var(--wds-dur) var(--wds-ease),
	            color var(--wds-dur) var(--wds-ease),
	            border-color var(--wds-dur) var(--wds-ease);
}

/* ── Primary : 버건디 채움 + 흰 글씨 ───────────────────── */
body.wds :is(
	.head-cta-btn,
	.dn-btn--filled,
	.dn-kakao-cta__btn--kakao,
	.dn-guide-closing__btn--primary,
	.breast-hub__cta-btn--primary,
	.wune-ba-cta__b, .wune-ba-cta__btn--primary,
	.minutes-bottom-cta__btn--primary,
	.beforeafter-bottom-cta__btn--primary,
	.guide-share-btn,
	.wune-consult__btn
) {
	background: var(--wds-primary) !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}
body.wds :is(
	.head-cta-btn, .dn-btn--filled,
	.dn-kakao-cta__btn--kakao, .dn-guide-closing__btn--primary,
	.breast-hub__cta-btn--primary, .wune-ba-cta__b,
	.guide-share-btn, .wune-consult__btn
):hover {
	background: var(--wds-primary-dark) !important;
	border-color: var(--wds-primary-dark) !important;
	color: var(--wds-text-invert) !important;
}

/* ── Secondary : 버건디 테두리 + 버건디 글씨 ───────────── */
body.wds :is(
	.dn-btn--outline,
	.dn-kakao-cta__btn--reserve,
	.dn-guide-closing__btn--outline,
	.breast-hub__cta-btn,
	.minutes-bottom-cta__btn,
	.beforeafter-bottom-cta__btn
):not(.breast-hub__cta-btn--primary):not(.minutes-bottom-cta__btn--primary):not(.beforeafter-bottom-cta__btn--primary) {
	background: transparent !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-primary) !important;
}
body.wds :is(
	.dn-btn--outline, .dn-kakao-cta__btn--reserve,
	.dn-guide-closing__btn--outline, .breast-hub__cta-btn,
	.minutes-bottom-cta__btn, .beforeafter-bottom-cta__btn
):not(.breast-hub__cta-btn--primary):hover {
	background: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}

/* 🚨 대비 안전장치 — 버건디 배경이면 글씨는 무조건 흰색이다.
      개별 클래스를 하나라도 놓치면 글자가 사라지므로 배경값으로 한 번 더 잡는다. */
body.wds [style*="background:#8B1538" i],
body.wds [style*="background: #8B1538" i] { color: var(--wds-text-invert) !important; }

/* ── 배경 사진 위 히어로 버튼 — 흰 테두리 ──────────────── */
body.wds .dn-hero__cta-btn {
	background: transparent !important;
	border-color: rgba(255,255,255,.8) !important;
	color: var(--wds-text-invert) !important;
}
body.wds .dn-hero__cta-btn--primary {
	background: rgba(255,255,255,.14) !important;
	border-color: #ffffff !important;
}
body.wds .dn-hero__cta-btn:hover {
	background: rgba(255,255,255,.22) !important;
	border-color: #ffffff !important;
}

/* ── Text Link ─────────────────────────────────────────── */
body.wds :is(.cm-hub__more, .ev_viewmore, .dn-mobile-viewall a,
             .casebook-card__more, .card-en, .dn-related-blog__more) {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 0; padding: 0; border: 0; background: none;
	font-size: var(--wds-fs-sm) !important;
	font-weight: 600 !important;
	color: var(--wds-primary) !important;
	border-radius: 0 !important;
}

/* ── Chip (필터) — 버튼이 아니다. 전후사진·후기의 조건 선택 ──
   §23 : Desktop 과 Mobile 이 서로 다른 경험이 되지 않게 한 모양으로 둔다. */
body.wds :is(.casebook-filter a, .casebook-filter button,
             .casebook-finder a, .casebook-finder button,
             .bna_category a, [class*="filter"] > a, [class*="filter"] > button) {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 40px; padding: 0 var(--wds-4);
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--wds-text) !important;
	background: var(--wds-bg) !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: var(--wds-r-pill) !important;
	text-decoration: none;
}
body.wds :is(.casebook-filter a, .casebook-filter button,
             .casebook-finder a, .casebook-finder button,
             .bna_category a, [class*="filter"] > a, [class*="filter"] > button):hover {
	border-color: var(--wds-primary) !important;
	color: var(--wds-primary) !important;
}
/* 선택된 칩 — 🚨 여기가 버건디 배경에 검은 글씨였다 */
body.wds :is(.casebook-filter, .casebook-finder, .bna_category, [class*="filter"]) :is(a, button).active,
body.wds :is(.casebook-filter, .casebook-finder, .bna_category, [class*="filter"]) :is(a, button).is-active,
body.wds :is(.casebook-filter, .casebook-finder, .bna_category, [class*="filter"]) :is(a, button)[aria-selected="true"] {
	background: var(--wds-primary) !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}

/* ── 카카오톡 채널 위젯 ──────────────────────────────────
   🚨 화면 오른쪽 아래에 떠 있는 것은 페이지 버튼이 아니라 카카오 채널 위젯이다.
      노란색 #FEE500 은 카카오의 브랜드 자산이라 바꾸면 무엇인지 알 수 없게 된다.
      (팔레트 규칙에서도 #fee500 은 손대지 않는 색으로 정해 두었다)
      대신 크기·radius·글자는 시스템 값에 맞춘다. */
body.wds .wune-kakao-fab {
	min-height: 50px;
	font-size: var(--wds-fs-sm) !important;
	font-weight: 600 !important;
	border-radius: var(--wds-r-sm) !important;
	background: #FEE500 !important;
	color: #3C1E1E !important;
	border: 0 !important;
}

/* ── 모바일 (§12·§27) ──────────────────────────────────── */
@media (max-width: 767px) {
	body.wds :is(.head-cta-btn, .dn-btn, .dn-kakao-cta__btn, .dn-guide-closing__btn,
	             .breast-hub__cta-btn, .wune-ba-cta__b, .dn-hero__cta-btn,
	             .minutes-bottom-cta__btn, .beforeafter-bottom-cta__btn,
	             .guide-share-btn, .wune-consult__btn) {
		min-height: 48px;
		width: 100%;
		padding: 0 var(--wds-5);
	}
	body.wds :is(.casebook-filter a, .casebook-filter button,
	             .casebook-finder a, .casebook-finder button,
	             .bna_category a, [class*="filter"] > a, [class*="filter"] > button) {
		min-height: 38px; width: auto;
	}
}

/* 🚨 가운데 정렬 히어로의 소개문 — margin-inline:auto 를 !important 없이 걸었더니
      기존 규칙의 margin 이 이겨 여전히 왼쪽에 붙어 있었다. 화면으로 확인했다. */
body.wds :is(.dn-page-hero__sub, .dn-page-hero__desc, .dn-page-hero__lead,
             .dn-page-hero__intro p, .dn-page-hero p) {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ═══ HEADER (§25) ══════════════════════════════════════
   실측 : GNB 메뉴가 <li> 17px / <a> 14.5px 두 가지였고(내 본문 규칙이 샜다),
          언어 스위처는 글자 12.5px 에 브라운 rgb(26,13,3) 이 남아 있었다.
   헤더는 모든 페이지에 같은 모습으로 나와야 한다. 값을 여기서 한 번만 정한다. */
body.wds :is(header, nav, .gnb, [class*="gnb"], [class*="langswitch"]) :is(li, a, span, button) {
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--wds-ls-body);
}
body.wds :is(header, nav, .gnb, [class*="gnb"]) a { color: var(--wds-text); }
body.wds :is(header, nav, .gnb, [class*="gnb"]) a:hover { color: var(--wds-primary); }

/* 언어 스위처 — 헤더의 보조 컨트롤. 라벨 크기로 */
body.wds .dn-langswitch__btn,
body.wds .dn-langswitch__btn span {
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	color: var(--wds-text) !important;
}
body.wds .dn-langswitch__btn {
	min-height: 36px;
	padding: 0 var(--wds-3);
	background: var(--wds-bg) !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: var(--wds-r-sm) !important;
}
body.wds .dn-langswitch__btn:hover { border-color: var(--wds-primary) !important; color: var(--wds-primary) !important; }
body.wds .dn-langswitch :is(.select-ul, [class*="list"]) a { font-size: var(--wds-fs-label) !important; }
/* 로그인·회원가입 같은 보조 링크 */
body.wds :is(header, nav) :is(.login, .join, [class*="login"], [class*="join"]) {
	font-size: var(--wds-fs-label) !important;
	color: var(--wds-text-sub) !important;
}

/* ═══ SPACING 잔여 (§7·§8) ══════════════════════════════
   실측 : 18 · 22 · 36 · 60 · 100px 이 스케일(4·8·12·16·24·32·40·48·64·80·96·120) 밖이었다.
   페이지마다 임의값을 쓰면 몇 달 뒤 다시 지금과 같아진다. 섹션 래퍼만 스케일로 맞춘다. */
body.wds :is(.about-hub__hero, .breast-hub__hero, .cm-hub__hero, [class*="__hero"]:not([class*="dn-hero"])) {
	padding-top: var(--wds-11);
	padding-bottom: var(--wds-8);
}
/* 🚨 .cont 의 좌우 padding 은 모바일 gutter 다. 0 으로 만들면 글이 화면 끝에 닿는다.
      여기서 건드리지 않는다. */

/* ═══ 실측으로 잡은 잔여 (2026-09-01, 브라우저 전수 확인) ═══ */

/* 🚨 대비 사고 ① 상단 바 — 배경 #1A1A1A 에 글씨도 #1A1A1A 라 보이지 않았다.
      --dn-dark 를 본문 검정에 연결하면서 어두운 바 위 글씨까지 검게 만든 것이다.
      배경이 어두운지 밝은지를 CSS 가 모른다 — 어두운 자리는 이름으로 찾아 지정한다. */
body.wds :is(.dn-topbar, .dn-topbar *) { color: var(--wds-text-invert) !important; }
body.wds .dn-topbar a:hover { color: rgba(255,255,255,.75) !important; }

/* 🚨 대비 사고 ② 선택된 카테고리 버튼 — 버건디 배경에 검은 글씨 */
body.wds :is(.wunetv-cat-btn, .casebook-cat-btn, [class*="cat-btn"]).active,
body.wds :is(.wunetv-cat-btn, .casebook-cat-btn, [class*="cat-btn"]).is-active {
	background: var(--wds-primary) !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}

/* ── 남은 버튼을 3종 안으로 (실측 목록) ─────────────────── */
body.wds :is(.about-hub__channel, .dn-loc-map-nav__btn, .wune-ba-cta__link,
             .dn-loc-cta__btn, .prac_cta_btn, .cert_cta_btn) {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--wds-2);
	min-height: 50px; padding: 0 var(--wds-6);
	font-size: var(--wds-fs-sm) !important;
	font-weight: 600 !important;
	border-radius: var(--wds-r-sm) !important;
	border: 1.5px solid var(--wds-primary) !important;
	background: transparent !important;
	color: var(--wds-primary) !important;
	text-decoration: none;
}
body.wds :is(.about-hub__channel, .dn-loc-map-nav__btn, .wune-ba-cta__link,
             .dn-loc-cta__btn, .prac_cta_btn, .cert_cta_btn):hover {
	background: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}
/* 히어로 버튼 높이도 50 으로 (53 이었다) */
body.wds .dn-hero__cta-btn { min-height: 50px; height: auto; }

/* ── 칩(필터) 나머지 — 카테고리 탭 계열 ──────────────────── */
body.wds :is(.wunetv-cat-btn, [class*="cat-btn"], .bna_cate a, .bna_cate button) {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 40px; padding: 0 var(--wds-4);
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	border-radius: var(--wds-r-pill) !important;
	border: 1px solid var(--wds-border) !important;
	background: var(--wds-bg) !important;
	color: var(--wds-text) !important;
	text-decoration: none;
}
body.wds :is(.wunetv-cat-btn, [class*="cat-btn"], .bna_cate a, .bna_cate button):hover {
	border-color: var(--wds-primary) !important;
	color: var(--wds-primary) !important;
}

/* ── 헤더 메뉴 글자 — 14.5px 이 남아 있었다 (§25) ────────── */
body.wds :is(header, nav, .gnb, [class*="gnb"]) :is(a, li, span) {
	font-size: 15.5px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}
body.wds :is(header, nav, .gnb, [class*="gnb"]) :is(.dn-btn, [class*="cta-btn"]) {
	font-size: var(--wds-fs-sm) !important; font-weight: 600 !important;
}
body.wds .dn-langswitch__btn,
body.wds .dn-langswitch__btn *,
body.wds :is(header, nav) :is([class*="login"], [class*="join"], [class*="sub-menu"] a, [class*="depth2"] a) {
	font-size: var(--wds-fs-label) !important;
}

/* ── Chip 컴포넌트 (§23) ────────────────────────────────
   전후사진·후기의 조건 선택. 버튼이 아니라 필터다. 한 모양으로 둔다. */
.wds-chip {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 40px; padding: 0 var(--wds-4);
	font-size: var(--wds-fs-label); font-weight: 600; line-height: 1.2;
	color: var(--wds-text); background: var(--wds-bg);
	border: 1px solid var(--wds-border); border-radius: var(--wds-r-pill);
	text-decoration: none; white-space: nowrap;
	transition: border-color var(--wds-dur) var(--wds-ease), color var(--wds-dur) var(--wds-ease);
}
.wds-chip:hover { border-color: var(--wds-primary); color: var(--wds-primary); }
.wds-chip.is-active, .wds-chip.active {
	background: var(--wds-primary); border-color: var(--wds-primary);
	color: var(--wds-text-invert);
}
/* 전후사진 각도 선택도 같은 칩이다 (radius 3px 이었다) */
body.wds .bna-angle-btns :is(a, button) {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 40px; padding: 0 var(--wds-4);
	font-size: var(--wds-fs-label) !important; font-weight: 600 !important;
	border-radius: var(--wds-r-pill) !important;
	border: 1px solid var(--wds-border) !important;
	background: var(--wds-bg) !important; color: var(--wds-text) !important;
}
body.wds .bna-angle-btns :is(a, button).active {
	background: var(--wds-primary) !important; border-color: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}

/* ═══ 컴포넌트 우선순위 보강 (2026-09-01) ════════════════
   🚨 .wds-btn 을 붙였는데도 radius 0 · 글씨 검정으로 나왔다.
      `body.wds .content_wrap a { color: inherit }`(0,2,1)가
      `.wds-btn--primary`(0,2,0)보다 세서 이긴 것이다.
      컴포넌트는 레거시보다 반드시 이겨야 한다. 여기서만 무게를 올린다. */
body.wds .wds-btn,
body.wds .content_wrap .wds-btn {
	display: inline-flex !important;
	align-items: center; justify-content: center; gap: var(--wds-2);
	min-height: 50px; padding: 0 var(--wds-6);
	font-size: var(--wds-fs-sm) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	border-radius: var(--wds-r-sm) !important;
	border: 1.5px solid transparent;
	text-decoration: none !important;
}
body.wds .wds-btn--primary,
body.wds .content_wrap .wds-btn--primary {
	background: var(--wds-primary) !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}
body.wds .wds-btn--primary:hover { background: var(--wds-primary-dark) !important; border-color: var(--wds-primary-dark) !important; }
body.wds .wds-btn--secondary,
body.wds .content_wrap .wds-btn--secondary {
	background: transparent !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-primary) !important;
}
body.wds .wds-btn--secondary:hover { background: var(--wds-primary) !important; color: var(--wds-text-invert) !important; }

body.wds .wds-chip,
body.wds .content_wrap .wds-chip {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	min-height: 40px; padding: 0 var(--wds-4);
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	border-radius: var(--wds-r-pill) !important;
	border: 1px solid var(--wds-border) !important;
	background: var(--wds-bg) !important;
	color: var(--wds-text) !important;
	text-decoration: none !important;
}
body.wds :is(.wds-chip.is-active, .wds-chip.active),
body.wds .content_wrap :is(.wds-chip.is-active, .wds-chip.active) {
	background: var(--wds-primary) !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}

/* 🚨 대비 사고 ③ 재수술 히어로 — 와인색 배경 #3F1219 에 검은 글씨였다.
      히어로 배경이 어두운 페이지는 글씨가 흰색이어야 한다. */
body.wds :is(.dn-sub-hero, .dn-sub-hero *):not(.dn-sub-hero__intro):not(.dn-sub-hero__intro *) {
	color: var(--wds-text-invert) !important;
}
body.wds .dn-sub-hero__eyebrow { color: rgba(255,255,255,.85) !important; }

/* 🚨 대비 사고 ④ 예약 페이지 단계 표시 — 밝은 배경에 #ccc 글씨 */
body.wds :is(.rv-nav, .rv-nav *) { color: var(--wds-text-sub) !important; }
body.wds .rv-nav :is(.on, .active, [aria-current]) { color: var(--wds-primary) !important; font-weight: 700 !important; }

/* 약관 보기 같은 작은 보조 버튼 — Text Link 로 */
body.wds .form_policy_btn {
	min-height: 36px; padding: 0 var(--wds-3);
	font-size: var(--wds-fs-label) !important; font-weight: 600 !important;
	border-radius: var(--wds-r-sm) !important;
	border: 1px solid var(--wds-border) !important;
	background: var(--wds-bg) !important; color: var(--wds-text-sub) !important;
}

/* GNB 메뉴 — combined.min.css 가 (0,5,2)+!important 로 14.5px 을 박고 있었다.
   같은 무기를 쓰되 한 단계 더 구체적으로 써서 시스템 값(15.5)으로 맞춘다. */
body.wds .head_wrap .dn-nav-wrap .head_menu_wrap .head_menu > li > a,
body.wds .head_menu_wrap .head_menu > li > a,
body.wds .dn-nav-left .head_menu > li > a {
	font-size: 15.5px !important;
	font-weight: 500 !important;
	letter-spacing: var(--wds-ls-body);
}

/* 홈 히어로 버튼 — padding 때문에 53px 이었다. 다른 버튼과 같은 50px 로 */
body.wds .dn-hero__cta-btn {
	min-height: 50px; height: 50px; padding: 0 var(--wds-6);
	font-size: var(--wds-fs-sm) !important; font-weight: 600 !important;
	border-radius: var(--wds-r-sm) !important;
}

/* ═══ CONTAINER 통일 (§3·§37) ═══════════════════════════
   실측(12페이지) — max-width 가 스무 가지였다.
     600 · 720 · 760 · 780 · 782 · 800 · 840 · 880 · 900 · 920 · 960 ·
     1040 · 1080 · 1100 · 1120 · 1180 · 1200 · 1232 · 1280
   좌측 시작점도 149 · 175 · 181 · 185 · 191 · 195 · 199 · 203 · 207 ·
     255 · 271 · 285 · 295 · 299 · 301 로 제각각이었다.
   페이지를 옮길 때마다 글이 시작하는 위치가 달라지니 다른 사이트처럼 느껴진다.

   시스템은 두 폭만 쓴다.
     Container 1200  — 일반 콘텐츠·카드·표·갤러리
     Measure    760  — 긴 글 (한 줄 45자 안팎)
   🚨 컨테이너가 겹쳐 들어가면 좌우 여백이 두 번 붙는다. 안쪽 것은 폭을 풀어 준다. */

/* 🚨 컨테이너와 「박스」를 섞어 놓았던 것이 폭이 제각각인 진짜 원인이었다.
      컨테이너 = 페이지 폭을 정하는 그릇 (거터를 가진다)
      박스      = 그릇 안에 놓이는 카드·콜아웃 (자기 안쪽 여백만 가진다)
      박스를 컨테이너 목록에 넣으면 거터가 한 번 더 붙고, 그릇 안에서 또
      1200 으로 잘려 바깥보다 좁아진다. 전후사진에서 실제로 그렇게 됐다. */
body.wds :is(
	.cont, .w1280, .about-hub__section, .cm-hub__section, .breast-hub,
	.wune-related, .dn-kakao-cta__inner, .dn-natural-results__inner,
	.breast-related-posts__container, .breast-bottom-links__container,
	.dn-author-signature, .dn-copy-media__inner, .dn-faq__inner,
	.dn-sub-hero__intro-inner, .main_wunetv_top,
	.beforeafter-seo-content, .rr-seo-content, .dn-min-geo,
	.dn-related-blog
) {
	width: 100%;
	max-width: calc(var(--wds-container) + var(--wds-gutter) * 2) !important;
	margin-inline: auto !important;
	padding-inline: var(--wds-gutter) !important;
	box-sizing: border-box;
}

/* 박스 — 그릇의 폭을 그대로 쓴다. 폭을 스스로 정하지 않는다.
   🚨 casebook.css 가 1100px 을 세 군데 박아 두어 바깥(1195)보다 좁았다. */
/* 🚨 `:is()` 의 특이도는 인자 중 가장 구체적인 것을 따른다.
      여기에 `.bna_thumb_list > ul` 를 넣었더니 목록 전체가 (0,2,2) 가 되어
      뒤에 온 모바일 규칙 `body.wds .bna_thumb_list`(0,2,1)를 이겨 버렸다.
      `:is()` 안에는 단일 클래스만 둔다. 자식 선택자는 따로 쓴다. */
body.wds :is(
	.ba-intro, .wune-ba-cta, .casebook-finder, .beforeafter-faq, .rr-faq,
	.min-tldr, .medi_menu_list, .medi_menu_list_wrap, .bna_thumb_list,
	/* 🚨 `.dn-geo-block` 은 배경을 가진 「박스」인데 컨테이너 목록에 있었다.
	      컨테이너(1200) 안에서 다시 1280 으로 잘리고 자기 여백 32 가 더해져
	      1216/좌110 이 되었다 — /breast/ 13개 페이지에서 폭이 두 가지였던 원인. */
	.dn-geo-block
) {
	width: 100% !important;
	max-width: 100% !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	box-sizing: border-box;
}
body.wds .bna_thumb_list > ul {
	width: 100% !important;
	max-width: 100% !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	box-sizing: border-box;
}
/* 안쪽 여백을 가지는 박스만 되돌려 준다 (테두리가 있는 카드) */
body.wds :is(.ba-intro, .wune-ba-cta, .casebook-finder, .beforeafter-faq, .rr-faq, .min-tldr) {
	padding-inline: var(--wds-6) !important;
}

/* 🚨 컨테이너를 거치지 않고 페이지 루트에 바로 놓인 박스가 있다.
      `.ba-intro` · `.wune-ba-cta` 가 `.cont_wrap` 의 직계라 거터가 하나도 없어
      375px 화면에서 좌우 끝에 닿았다(l=0). 같은 페이지 안에서 시작점이
      0 · 20 · 40 · 52 네 가지가 된 원인. 컨테이너와 같은 자리에 세운다.

      🚨 2026-09-02 추가 : 리얼리뷰에서도 같은 것이 나왔다.
         `.answer-summary`(히어로 아래 글)와 `.rr-faq`(하단 자주 묻는 질문)가
         `.cont_wrap` 직계라 PC 에서 좌 0 · 폭 1435 로 퍼졌다. 옆 형제
         `.rr-seo-content` 는 78/1280(안쪽 118/1200)인데 이 둘만 어긋나 있었다.
         원장 지적 「글이 좌우로 너무 길다 · FAQ 가 좌측으로 쏠려 있다」. */
body.wds :is(.content_wrap, .cont_wrap) > :is(
	.ba-intro, .wune-ba-cta, .rr-intro, .cm-intro,
	.answer-summary, .rr-faq, .beforeafter-faq, .min-tldr,
	.casebook-finder, .dn-geo-block
) {
	box-sizing: border-box;
	width: calc(100% - var(--wds-gutter) * 2) !important;
	max-width: var(--wds-container) !important;
	margin-inline: auto !important;
}

/* 🚨 컨테이너 폭(1200)에 17px 본문을 흘리면 한 줄이 78자가 된다.
      읽기 한계는 45자 안팎이다. 긴 글을 담는 박스 안에서는 읽기폭으로 묶는다.
      (박스는 1200 자리에 그대로 있고, 그 안의 글줄만 840 으로 짧아진다)
      🚨 제목·질문줄까지 묶으면 안 된다. 구분선은 상자 폭(1136)인데 글만 840 이라
         오른쪽이 텅 빈 것처럼 보인다. 상자와 질문은 폭을 쓰고, 답변 글만 묶는다. */
body.wds :is(.answer-summary, .rr-faq, .beforeafter-faq, .ba-intro, .min-tldr)
        :is(p, li, dd) {
	max-width: var(--wds-measure) !important;
}
/* 관련 글 목록에 17.25px 짜리 들여쓰기가 남아 있었다 (ul 기본 padding) */
body.wds .wune-related__grid { padding-inline: 0 !important; list-style: none; }

/* 긴 글이 담기는 블록 — 한 줄 45자 */
body.wds :is(
	.about-hub__hero-lead, .about-hub__answer, .cm-hub__answer, .cm-hub__faq,
	.prac_intro_text, .dn-tenets__list,
	.breast-related-posts__header, .breast-bottom-links__header,
	.dn-sub-hero__text, .dn-page-hero__sub, .dn-kakao-cta__sub
) {
	width: 100%;
	max-width: var(--wds-measure) !important;
	margin-inline: auto !important;
	box-sizing: border-box;
}

/* 🚨 컨테이너 안에 컨테이너가 또 있으면 좌우 여백이 두 번 붙는다.
      안쪽은 폭 제한과 여백을 풀어 바깥 하나만 남긴다.
      🚨 `.w1280` 이 이 목록에 빠져 있었다 — 전후사진에서 `.cont`(40) 안의
         `.w1280`(40)이 겹쳐 글이 40 이 아니라 80 에서 시작하고 폭이
         1195 → 1115 로 줄었다. 원장 지적 「폭이 좁다」의 실제 원인. */
body.wds :is(.cont, .w1280, .about-hub__section, .cm-hub__section, .breast-hub, .wune-related,
             .dn-kakao-cta__inner, .dn-faq__inner)
        :is(.cont, .w1280, .about-hub__section, .cm-hub__section, .wune-related,
            .dn-kakao-cta__inner, .dn-faq__inner,
            .beforeafter-seo-content, .rr-seo-content, .dn-min-geo,
            .dn-related-blog, .dn-geo-block) {
	max-width: 100% !important;
	padding-inline: 0 !important;
}

/* ── 시술 페이지 히어로만 예외 (원장 지시 2026-09-01) ─────
   「가슴성형 하위페이지들만 예외적으로 히어로 안의 글씨를 좀 더 크게 ·
     지금 히어로 이미지에 비해 글씨가 너무 작아」
   배경 사진이 큰 페이지라 34px 은 사진에 눌린다. 히어로 전용 크기를 하나 둔다.
   🚨 예외는 이 한 곳뿐이다. 히어로가 없는 페이지나 허브(.dn-page-hero)는 34px 그대로. */
/* 🚨 히어로 예외를 없앤다 — h1 이 44px 이 된 지금 48 예외는 축을 흐린다.
      사이트 전체에서 h1 은 하나의 크기다(§37). */
:root { --wds-fs-hero: var(--wds-fs-h1); --wds-lh-hero: var(--wds-lh-h1); }



body.wds .dn-sub-hero__title {
	font-size: var(--wds-fs-hero) !important;
	font-weight: 700 !important;
	line-height: var(--wds-lh-hero) !important;
	letter-spacing: var(--wds-ls-tight);
	margin: 0 0 var(--wds-4);
}
body.wds .dn-sub-hero__eyebrow {
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: .14em;
}
body.wds :is(.dn-sub-hero__desc, .dn-sub-hero__lead, .dn-sub-hero__sub) {
	font-size: 19px !important;
	line-height: 1.7 !important;
}
@media (max-width: 767px) {
	body.wds .dn-sub-hero__eyebrow { font-size: var(--wds-fs-label) !important; }
	body.wds :is(.dn-sub-hero__desc, .dn-sub-hero__lead, .dn-sub-hero__sub) { font-size: 17px !important; }
}

/* 남은 폭 예외 — 인라인 max-width 로 박혀 있던 것들 (실측) */
body.wds .content_wrap [style*="max-width:1100px" i],
body.wds .content_wrap [style*="max-width: 1100px" i],
body.wds .content_wrap [style*="max-width:920px" i],
body.wds .content_wrap [style*="max-width: 920px" i],
body.wds .content_wrap [style*="max-width:840px" i],
body.wds .content_wrap [style*="max-width: 840px" i],
body.wds .content_wrap [style*="max-width:1200px" i] {
	max-width: calc(var(--wds-container) + var(--wds-gutter) * 2) !important;
	margin-inline: auto !important;
	padding-inline: var(--wds-gutter) !important;
	box-sizing: border-box;
}
/* CTA 본문도 읽기 폭 토큰으로 (46em = 782px 이었다) */
.wds-cta__text { max-width: var(--wds-measure); }

/* 마지막 폭 예외 두 곳 (실측) */
body.wds .content_wrap :is(.cont.w1000, .w1000, .dn-loc-map, .wunetv-category-wrap, .UNE_tv) {
	max-width: calc(var(--wds-container) + var(--wds-gutter) * 2) !important;
	margin-inline: auto !important;
	box-sizing: border-box;
}
body.wds .content_wrap :is(.wunetv-category-wrap, .UNE_tv, .dn-loc-map) { padding-inline: 0 !important; }

/* 🚨 아이브로우가 제목과 한 줄에 붙어 나왔다 —
      「가슴성형 · BREAST AUGMENTATION 가슴확대술」
      §10 구조는 카테고리 → H1 → 소개문 순이다. 줄을 나눈다. */
body.wds :is(.dn-sub-hero__eyebrow, .dn-page-hero__label) {
	display: block !important;
	width: 100%;
	margin: 0 0 var(--wds-3) !important;
}

/* Callout 박스는 컨테이너 폭을 따른다. 같은 페이지 안에서 박스마다
   좌측이 달라지면 안 된다 (한눈에 보기 338 vs 30초 요약 118 이었다). */
body.wds :is(.dn-geo-card, .answer-summary, .breast-hub__definition, .wb-note) {
	max-width: 100% !important;
	margin-inline: 0 !important;
}
/* 남은 h2 좌측 어긋남 — 컨테이너가 겹쳐 padding 이 두 번 붙던 자리 */
body.wds .content_wrap .breast-hub :is(.cont, .breast-hub__section) {
	max-width: 100% !important; padding-inline: 0 !important;
}

/* ===== 2026-09-01 히어로/썸네일 img 예외 — 이 블록만 지우면 원복 ===== */
/* .content_wrap img 일괄 규칙(height:auto, border-radius)이 컨테이너를 채워야 하는
   이미지까지 덮어, 히어로 하단에 컨테이너 배경(#3F1219)이 띠로 드러났다.
   1440px 폭에서 190px, 1800px 폭에서 81px. 창이 좁을수록 두껍다. */
body.wds .content_wrap .dn-hero__image,
body.wds .content_wrap .wunetv-thumb-item img{
  height: 100%;
  border-radius: 0;
}
/* ===== /2026-09-01 히어로/썸네일 img 예외 ===== */

/* ═══ 카드 그리드 열 수 (§13·§27, 원장 지시 2026-09-01) ═══
   「리얼리뷰 페이지의 첫 사진들이 다들 너무 작다 · PC 모바일 둘 다 이미지가 좀 더 크면 좋겠다」
   실측 : 1200px 컨테이너에 4열 → 카드 폭 273~287px.
          영상 썸네일은 회복 경과를 눈으로 확인하는 콘텐츠라 이 크기로는 판단이 안 된다.
   → PC 3열(373px) · 태블릿 2열 · 모바일 1열.
   🚨 인라인 style 로 grid-template-columns 를 박아 둔 곳이 있어 같은 무게로 누른다. */
body.wds :is(.rr-grid, .rr-video-grid, .cm-hub__rv-list, .casebook-list) {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: var(--wds-5) !important;
}
/* 클래스 없이 인라인으로 짜인 영상 그리드 */
body.wds .content_wrap [style*="grid-template-columns"][style*="repeat(4"],
body.wds .content_wrap [style*="grid-template-columns"][style*="repeat(auto-fill"],
body.wds .content_wrap [style*="grid-template-columns"][style*="repeat(auto-fit"],
body.wds .content_wrap [style*="grid-template-columns"][style*="minmax(280px"] {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: var(--wds-5) !important;
}
@media (max-width: 1023px) {
	body.wds :is(.rr-grid, .rr-video-grid, .cm-hub__rv-list, .casebook-list),
	body.wds .content_wrap [style*="grid-template-columns"][style*="repeat(4"],
	body.wds .content_wrap [style*="grid-template-columns"][style*="repeat(auto-fill"],
body.wds .content_wrap [style*="grid-template-columns"][style*="repeat(auto-fit"],
body.wds .content_wrap [style*="grid-template-columns"][style*="minmax(280px"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 767px) {
	body.wds :is(.rr-grid, .rr-video-grid, .cm-hub__rv-list),
	body.wds .content_wrap [style*="grid-template-columns"][style*="repeat(4"],
	body.wds .content_wrap [style*="grid-template-columns"][style*="repeat(auto-fill"],
body.wds .content_wrap [style*="grid-template-columns"][style*="repeat(auto-fit"],
body.wds .content_wrap [style*="grid-template-columns"][style*="minmax(280px"] {
		grid-template-columns: 1fr !important;
		gap: var(--wds-4) !important;
	}
}
/* 카드 안 영상·사진은 카드 폭을 꽉 채운다 (§11 비율 16:9 / 4:3) */
body.wds :is(.rr-grid, .rr-video-grid) :is(img, iframe) {
	width: 100%; height: auto; display: block;
	border-radius: var(--wds-r-md);
}

/* ═══ 블록 모양 통일 (§17·§31, 2026-09-01) ═══════════════
   /about/guide/ 실측 — 한 페이지에 박스가 여섯 가지 모양이었다.
     cont_sub_title    좌 3px 버건디 · radius 0  · pad 4/18
     guide-eeat        좌 4px 버건디 · radius 6  · pad 24/28 · 흰 배경
     dn-geo-card       좌 3px 버건디 · radius 8  · pad 24/32 · 회색 배경
     dn-geo-deep       사방 1px      · radius 12 · pad 24    · 흰 배경
     dn-guide-closing  테두리 없음   · radius 16 · pad 64/32
   시스템은 두 가지만 쓴다 (CTA 는 별도 컴포넌트).
     Card    흰 배경 + 1px 테두리 + radius 12 + pad 24   — 반복되는 카드
     Callout 회색 배경 + 좌 3px 버건디 + radius 8 + pad 24/32 — 단독 강조
   🚨 종류가 늘면 통일성이 다시 무너진다. 여기 없는 모양을 새로 만들지 않는다. */

/* Callout */
body.wds :is(.guide-eeat, .dn-geo-card, .dn-geo-content__block, .dn-geo-block,
             .breast-hub__definition, .wb-note, .answer-summary, .min-tldr,
             .prac_summary, .cert_summary) {
	background: var(--wds-surface) !important;
	border: 0 !important;
	border-left: 3px solid var(--wds-primary) !important;
	border-radius: var(--wds-r-sm) !important;
	padding: var(--wds-5) var(--wds-6) !important;
	margin: var(--wds-5) 0;
	box-shadow: none !important;
}
/* Card */
body.wds :is(.dn-geo-deep, .dn-insight-card, .prac_card, .breast-hub__card,
             .about-hub__value-card, .cert_benefit_card, .cm-hub__rv-card, .rr-card,
             .guide-card, .guide-step) {
	background: var(--wds-bg) !important;
	border: 1px solid var(--wds-border) !important;
	border-left-width: 1px !important;
	border-radius: var(--wds-r-md) !important;
	padding: var(--wds-5) !important;
	box-shadow: none !important;
}
/* 리드 인용문 — 박스가 아니다. 좌측 바 색을 낮춰 Callout 과 구분한다 */
body.wds .cont_sub_title[style*="border-left"],
body.wds :is(.guide-lead, .prac_intro_text)[style*="border-left"] {
	border-left-color: var(--wds-border-strong) !important;
}

/* 블록 모양 잔여 (실측) — 위 두 가지 안으로 넣는다 */
body.wds :is(.dn-min-card, .dn-min-disclaimer, .dn-tenets__item) {
	background: var(--wds-surface) !important;
	border: 0 !important;
	border-left: 3px solid var(--wds-primary) !important;
	border-radius: var(--wds-r-sm) !important;
	padding: var(--wds-5) var(--wds-6) !important;
}
body.wds .dn-geo-block { padding: var(--wds-5) var(--wds-6) !important; }
/* CTA 안쪽 크림 박스 — 배경을 없애고 바깥 CTA 하나로 */
body.wds .dn-kakao-cta__inner {
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
/* 카드로 쓰이는 li·div (radius 6·10 이었다) */
body.wds .content_wrap :is(li, div)[style*="border-radius:10px"],
body.wds .content_wrap :is(li, div)[style*="border-radius:6px"],
body.wds .content_wrap :is(li, div)[style*="border-radius: 6px"] {
	border-radius: var(--wds-r-md) !important;
	padding: var(--wds-5) !important;
	border-color: var(--wds-border) !important;
}

/* ═══ 모바일 정리 (§27, 2026-09-01 실측) ═════════════════
   「특히 모바일에서 디자인이 엉망」

   실측(375px) — 무엇이 문제였나
     ① 좌우 여백이 두 번 붙었다. body 16 + 컨테이너 20 = 36px → 글 폭 303px.
     ② Callout 안쪽 여백 24 가 그대로라 글 폭이 255px 까지 줄었다.
     ③ 「카카오톡 공유」가 전폭 버건디 버튼으로 h1 바로 밑에 있었다.
        페이지의 주 행동은 상담이지 공유가 아니다. 위계가 뒤집혀 있었다.
     ④ 하단 고정물이 둘(quick_menu 60px · 카톡 FAB) — 본문 끝이 가린다.
   🚨 모바일은 PC 의 축소판이 아니다. 여백은 좁히고 글은 키운다. */
@media (max-width: 767px) {
	/* ① 좌우 여백은 한 번만 — 바깥 컨테이너 한 겹만 거터를 가진다 */
	body.wds .content_wrap :is(.cont, .about-hub__section, .cm-hub__section, .breast-hub,
	                           .wune-related, .dn-kakao-cta__inner, .dn-faq__inner,
	                           .dn-geo-block) {
		padding-inline: var(--wds-gutter) !important;
		margin-inline: 0 !important;
		max-width: 100% !important;
	}
	/* 🚨 `.w1280` 을 위 목록에 넣어 두었더니 모바일에서도 `.cont`(20) 안에서
	      한 번 더 붙어 사진 박스가 295px 로 줄었다 (사진 한 장 147px).
	      PC 와 같은 규칙 — 안쪽 컨테이너는 거터를 갖지 않는다. */
	body.wds .content_wrap :is(.cont, .w1280, .dn-faq__inner)
	        :is(.cont, .w1280, .wune-related, .dn-faq__inner, .dn-geo-block) {
		padding-inline: 0 !important;
		margin-inline: 0 !important;
		max-width: 100% !important;
	}
	body.wds .content_wrap > *,
	body.wds .cont_wrap > * { margin-inline: 0 !important; }

	/* ② 박스 안쪽 여백을 줄인다 — 글 폭이 우선이다 */
	body.wds :is(.guide-eeat, .dn-geo-card, .dn-geo-content__block, .breast-hub__definition,
	             .wb-note, .answer-summary, .min-tldr, .dn-min-card, .dn-tenets__item,
	             /* 🚨 FAQ 가 빠져 있어 안쪽 여백이 32 였다. 글이 53 에서 시작해
	                   같은 화면의 다른 글(36)과 어긋났다 (리얼리뷰 실측). */
	             .rr-faq, .beforeafter-faq, .dn-faq__inner) {
		padding: var(--wds-4) var(--wds-4) var(--wds-4) var(--wds-5) !important;
	}
	body.wds :is(.dn-insight-card, .prac_card, .breast-hub__card, .about-hub__value-card,
	             .cert_benefit_card, .cm-hub__rv-card, .rr-card, .dn-geo-deep, .guide-card) {
		padding: var(--wds-4) !important;
	}

	/* ③ 공유는 보조 기능이다. 주 CTA 와 같은 무게로 두지 않는다 */
	body.wds .guide-share-btn {
		width: auto !important;
		min-height: 40px !important;
		padding: 0 var(--wds-4) !important;
		font-size: var(--wds-fs-label) !important;
		background: transparent !important;
		color: var(--wds-primary) !important;
		border: 1px solid var(--wds-border) !important;
	}

	/* ⑤ 전후사진 케이스 카드 — 사진이 주인공이다 (2026-09-02 실측)
	   원장 지적 「사진이 있는 박스폭이 좁아서 사진이 작게 나와 · 정보도 좁은 부분에 한정」
	   실측 — 카드 335px 안에서 사진 두 장이 각 167px. 사진은 이미 카드를 꽉 채우고
	          있었으므로 카드를 넓히지 않으면 사진은 커지지 않는다.
	   🚨 카드만 화면 끝까지 넓히고, 글은 페이지와 같은 20px 자리에 그대로 둔다.
	      (카드 안쪽 여백을 거터와 같은 값으로 주면 글줄이 어긋나지 않는다) */
	/* 🚨 탈출 여백은 한 겹에만 준다. 목록과 그 안의 ul 양쪽에 걸었더니
	      -20 씩 두 번 빠져 카드가 415px 이 되어 화면을 넘쳤다. */
	body.wds .bna_thumb_list {
		width: calc(100% + var(--wds-gutter) * 2) !important;
		max-width: none !important;
		margin-inline: calc(var(--wds-gutter) * -1) !important;
	}
	body.wds .bna_thumb_list > ul {
		width: 100% !important;
		max-width: none !important;
		margin-inline: 0 !important;
	}
	/* 카드 안쪽 여백은 한 값으로 — 12 · 14 · 16 · 18 이 섞여 있었다 */
	body.wds :is(.casebook-card__head, .casebook-card__foot, .bna-angle-btns) {
		padding-inline: var(--wds-gutter) !important;
	}
	body.wds .casebook-card__head { padding-block: var(--wds-4) var(--wds-3) !important; }
	body.wds .casebook-card__foot { padding-block: var(--wds-4) var(--wds-5) !important; }
	body.wds .bna-angle-btns     { padding-block: var(--wds-3) var(--wds-4) !important; }
	/* 사진은 카드 폭을 그대로 쓴다 */
	body.wds .bna-angle :is(.cont_list, .img_wrap) { padding-inline: 0 !important; }

	/* 사양은 한 줄에 하나 — 146px 짜리 두 칸에 「구형구축, 밑빠짐, 유방합병증」이
	   들어가 세 줄로 접혔다. 라벨과 값을 한 줄로 펴서 읽히게 한다. */
	body.wds .casebook-card__specs {
		grid-template-columns: 1fr !important;
		gap: var(--wds-2) !important;
	}

	/* ④ 하단 고정물에 가리지 않게 본문 끝에 여유를 준다 */
	body.wds footer, body.wds .foot_wrap { padding-bottom: 96px; }

	/* 섹션 사이가 너무 벌어져 한 화면에 정보가 안 들어왔다 */
	body.wds .content_wrap :is(section, .cont) { padding-block: var(--wds-8); }
	body.wds :is(.dn-kakao-cta, .dn-guide-closing, .breast-hub__cta,
	             .minutes-bottom-cta, .beforeafter-bottom-cta, .wds-cta) {
		padding: var(--wds-7) var(--wds-5) !important;
		margin-top: var(--wds-9) !important;
	}
}

/* 🚨 좌우 여백이 두 번 붙던 자리 — .content_wrap 이 모바일에서 16px 을 갖고 있고
      그 안 컨테이너가 다시 20px 을 갖는다. 바깥을 0 으로 두고 안쪽 하나만 쓴다.
      (컨테이너가 없는 자리를 위해 본문 요소에 최소 여백을 남긴다) */
@media (max-width: 767px) {
	body.wds .content_wrap { padding-inline: 0 !important; }
	body.wds .content_wrap > :is(p, h1, h2, h3, h4, ul, ol, table, blockquote) {
		padding-inline: var(--wds-gutter);
	}
}

/* ── 번호 매긴 기준 목록 (원장 지시 2026-09-01) ───────────
   「STEP도 디자인을 바꿔봐. STEP이란 단어를 빼도 좋아」
   「STEP 01」 은 절차가 아니라 확인 항목이었다. 번호만 남긴다.
   §15 : 번호 목록은 한 가지 모양만 쓴다. */
.guide-step-no {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; margin-right: var(--wds-3);
	font-size: var(--wds-fs-label); font-weight: 700; font-variant-numeric: tabular-nums;
	color: var(--wds-primary); background: var(--wds-primary-soft);
	border-radius: var(--wds-r-pill);
	vertical-align: middle; letter-spacing: 0;
}
body.wds h3.cont_sub_title {
	display: flex; align-items: center; gap: 0;
	font-size: var(--wds-fs-h3) !important;
	font-weight: 700 !important;
	line-height: var(--wds-lh-h3) !important;
	margin: 0 0 var(--wds-3) !important;
	border-left: 0 !important; padding-left: 0 !important;
}
/* 기준 카드 — Card 한 모양으로 */
body.wds .cont_list2 .list_wrap {
	background: var(--wds-bg);
	border: 1px solid var(--wds-border);
	border-radius: var(--wds-r-md);
	padding: var(--wds-5);
	list-style: none;
}
body.wds .cont_list2 ul { margin: 0 0 var(--wds-3); padding: 0; }
body.wds .cont_list2 .list_wrap .cont_text { margin: 0; }
@media (max-width: 767px) {
	body.wds .cont_list2 .list_wrap { padding: var(--wds-4); }
	.guide-step-no { width: 24px; height: 24px; margin-right: var(--wds-2); }
	body.wds h3.cont_sub_title { align-items: flex-start; }
}

/* ── 페이지 머리 정렬 통일 (§10, 2026-09-01) ──────────────
   실측 /about/guide/ — h1 가운데(폭 202px) · 리드 들여쓰기 · 공유 버튼 오른쪽 ·
   본문 왼쪽. 한 화면에 정렬이 네 가지였다. 이게 「제각각」으로 보이는 이유다.
   🚨 배경 사진이 깔린 히어로(.dn-page-hero / .dn-sub-hero)는 가운데 정렬이 설계다. 건드리지 않는다.
   그 밖의 페이지 머리는 본문과 같은 축에 세운다. */
body.wds .content_wrap :is(.cont_title_wrap, .cont_title_info, .guide-share):not([class*="hero"] *) {
	text-align: left !important;
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}
body.wds .content_wrap .cont_title_wrap :is(h1, .cont_title, .title) {
	text-align: left !important;
	width: 100% !important;
	max-width: var(--wds-measure);
	margin-inline: 0 !important;
}
/* text_center 는 소개형 페이지의 섹션 머리에 붙는다. 문서형에서만 왼쪽으로 돌린다. */
body.wds .wds-doc .cont.text_center { text-align: left !important; }
body.wds .wds-doc .cont.text_center :is(.cont_title, .cont_sub_title, p) { text-align: left !important; }

/* 번호 배지가 기울어져 있었다 — 원본 CSS 의 italic 잔재 */
body.wds .guide-step-no { font-style: normal !important; }

/* ── 문서형 페이지 템플릿 (§3·§21) ────────────────────────
   가이드처럼 「읽는」 페이지는 콘텐츠 폭이 하나여야 한다.
   실측 /about/guide/ (PC 1280) — guide-eeat 만 760 가운데(left 258)이고
   Quick Answer·기준 카드는 1195(left 40) 였다. 축이 둘이라 어긋나 보였다.
   🚨 카드까지 전부 1195 로 두면 한 줄이 100자를 넘어 읽기 어렵다.
      칼럼 자체를 860 으로 세우고 그 안의 모든 블록이 같은 축을 쓴다. */
:root { --wds-doc: 860px; }
body.wds .wds-doc {
	max-width: calc(var(--wds-doc) + var(--wds-gutter) * 2) !important;
	margin-inline: auto !important;
	padding-inline: var(--wds-gutter) !important;
}
body.wds .wds-doc > *,
body.wds .wds-doc :is(.guide-eeat, .dn-geo-card, .dn-geo-block, .cont_list, .cont_list2,
                      .dn-geo-faq, .dn-guide-closing, .cont_title_wrap) {
	max-width: 100% !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}
/* 박스 안쪽 여백은 유지한다 — 위 규칙이 0 으로 만들면 글이 테두리에 붙는다 */
body.wds .wds-doc :is(.guide-eeat, .dn-geo-card) {
	padding: var(--wds-5) var(--wds-6) !important;
}

/* 문서형 페이지 머리 — 리드 인용과 공유 버튼도 같은 축에 세운다
   실측 : h1 x133 · 리드 x194 · 공유 x557(오른쪽). 세 축이 달랐다. */
body.wds .wds-doc .cont_sub_title {
	margin-left: 0 !important;
	padding-left: var(--wds-4) !important;
	border-left: 3px solid var(--wds-border-strong) !important;
	max-width: var(--wds-measure);
}
body.wds .wds-doc .guide-share { text-align: left !important; }

/* ── Callout 좌측 바 정리 (원장 지시 2026-09-01) ───────────
   「글의 왼쪽에 세로로 긴 선이 너무 붙어 있고, 굳이 저 선이 길게 쭉 있어야 하나」

   맞는 지적이다. 모든 박스에 좌측 바를 두르면 강조 기능을 잃고 소음이 된다.
   §31 「과도한 강조 금지 · Border 중심의 깔끔한 표현」에 맞춰
     기본 Callout — 회색 배경 + radius 만. 선 없음.
     중요 Callout — 좌측 바를 남긴다. 그때만 눈에 띈다.
   글자와 선 사이 간격도 넉넉히 둔다. */
body.wds :is(.guide-eeat, .dn-geo-card, .dn-geo-block, .dn-geo-content__block,
             .breast-hub__definition, .wb-note, .answer-summary, .min-tldr,
             .dn-min-card, .dn-min-disclaimer, .dn-tenets__item,
             .prac_summary, .cert_summary) {
	border-left: 0 !important;
	background: var(--wds-surface) !important;
	border-radius: var(--wds-r-sm) !important;
	padding: var(--wds-5) var(--wds-6) !important;
}
/* 중요 표시가 붙은 것만 좌측 바를 남긴다 */
body.wds :is(.wds-callout--important, .dn-geo-card--important, [data-callout="important"]) {
	border-left: 3px solid var(--wds-primary) !important;
	background: var(--wds-primary-soft) !important;
	padding-left: var(--wds-6) !important;
}
/* 리드 인용문 — 선을 짧게 두지 못하므로 아예 빼고 굵기로 구분한다 */
body.wds .wds-doc .cont_sub_title {
	border-left: 0 !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
	display: block !important;
	text-align: left !important;
	font-weight: 600 !important;
	color: var(--wds-text-sub) !important;
	max-width: var(--wds-measure);
}
body.wds .wds-doc :is(.cont_text_box, .text_center) { text-align: left !important; }
@media (max-width: 767px) {
	body.wds :is(.guide-eeat, .dn-geo-card, .dn-geo-block, .dn-geo-content__block,
	             .breast-hub__definition, .wb-note, .answer-summary, .min-tldr,
	             .dn-min-card, .dn-tenets__item) {
		padding: var(--wds-4) var(--wds-4) !important;
	}
}

/* 리드·공유 버튼이 아직 다른 축이었다 — 요소 자체의 margin 을 푼다 */
body.wds .wds-doc :is(.cont_sub_title, .guide-share, .guide-share-btn, .cont_text_box) {
	margin-left: 0 !important;
	margin-right: auto !important;
	display: block !important;
	text-align: left !important;
}
body.wds .wds-doc .guide-share-btn {
	display: inline-flex !important;
	width: auto !important;
}

/* ═══ 모바일 전수조사 결과 (2026-09-01, 375px 실측) ═══════
   ① 가로 넘침 — 표·카드 트랙이 화면 밖으로 나가는데 스크롤 컨테이너가 없다
        /breast/ 표 R580 · /breast/augmentation/ dn-insight-card R836 ·
        /about/wunetv/ wunetv-thumb-item R702
      🚨 억지로 줄이면 글씨가 작아진다(§14). 가로 스크롤로 처리한다.
   ② 터치 타깃이 20~26px — 손가락으로 누르기 어렵다. 44px 을 하한으로.
   ③ 박스가 겹쳐 들어가 본문이 73~92px 부터 시작하는 페이지가 있다. */
@media (max-width: 767px) {
	/* ① 가로로 넘치는 트랙은 스크롤로 */
	body.wds :is(.dn-insight-track, .dn-insight-section, .wunetv-thumb-list,
	             .main-thumbs-list, .dn-cards__list, .dn-rv__list) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}
	body.wds :is(.dn-insight-track, .wunetv-thumb-list) > * { scroll-snap-align: start; }
	/* 표는 감싸는 상자가 없으면 표 자체를 스크롤 상자로 */
	body.wds .content_wrap table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: normal;
		min-width: 0;
	}
	body.wds .content_wrap table :is(thead, tbody, tr) { display: table; width: 100%; min-width: 560px; }

	/* ② 터치 타깃 하한 — 문장 속 링크는 제외한다(줄 간격이 벌어진다) */
	body.wds .content_wrap :is(a, button):not(p a):not(li a):not(td a):not(span a) {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	body.wds .content_wrap :is(.modal_open, .ev_viewmore, .cm-hub__more, .card-en) {
		min-height: 44px; padding-block: var(--wds-2);
	}

	/* ③ 박스 중첩으로 본문이 밀려나던 자리 — 안쪽 박스는 여백을 풀어 준다 */
	body.wds :is(.guide-eeat, .dn-geo-card, .dn-geo-block, .cont_text, .prac_card,
	             .about-hub__value-card, .dn-insight-card)
	        :is(.dn-geo-card, .dn-geo-block, .cont_text, .cont_list) {
		padding-inline: 0 !important;
		margin-inline: 0 !important;
	}
}

/* ═══ FAQ · 원장 코멘트 컴포넌트 연결 (§16·§18) ══════════
   원장 지적 — 「중간에 닥터 코멘트가 있는데 디자인을 적용을 안했네 ·
                자주하는 질문도 디자인 시스템을 적용 안 한 것 같고」
   맞다. .wds-faq / .wds-doctor 를 만들어 두고 레거시 클래스에 연결하지 않았다.
   실측 — .pov-note · .dn-geo-faq 모두 배경 0 · 테두리 0 · 여백 0 이었다.
   사이트 전체 FAQ 클래스가 다섯 벌이다 :
     dn-faq__ · rr-faq__ · beforeafter-faq__ · cert_faq_ · dn-geo-faq
   전부 한 모양으로 묶는다. */

/* ── FAQ ────────────────────────────────────────────────── */
body.wds :is(.dn-geo-faq, .dn-faq, .rr-faq, .beforeafter-faq, .cert_faq_list, .cm-hub__faq) {
	margin-top: var(--wds-9);
	border-top: 1px solid var(--wds-border);
}
body.wds :is(.dn-faq__item, .rr-faq__item, .beforeafter-faq__item, .cert_faq_item) {
	border-bottom: 1px solid var(--wds-border);
	padding: var(--wds-5) 0;
	background: transparent;
	border-radius: 0;
}
/* dn-geo-faq 는 항목 래퍼가 없다 — 제목·답변 자체에 리듬을 준다 */
body.wds .dn-geo-faq :is(h3, .cert_faq_q, .dn-faq__q, .rr-faq__q, .beforeafter-faq__q),
body.wds :is(.dn-faq__q, .rr-faq__q, .beforeafter-faq__q, .cert_faq_q) {
	font-size: var(--wds-fs-h4) !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	color: var(--wds-text) !important;
	margin: var(--wds-6) 0 var(--wds-3) !important;
	padding: 0 !important;
	border: 0 !important;
}
body.wds .dn-geo-faq :is(p, .dn-faq__a),
body.wds :is(.dn-faq__a, .rr-faq__a, .beforeafter-faq__a, .cert_faq_a, .cm-hub__faq-body) {
	font-size: var(--wds-fs-body) !important;
	line-height: var(--wds-lh-body) !important;
	color: var(--wds-text-sub) !important;
	margin: 0 0 var(--wds-5) !important;
	padding-bottom: var(--wds-5);
	border-bottom: 1px solid var(--wds-border);
}
body.wds .dn-geo-faq > :last-child { border-bottom: 0; }

/* ── 원장 코멘트 (§18) ───────────────────────────────────
   윈느의 차별점이 되는 자리다. 본문에 섞이지 않게 한 덩어리로 세운다. */
body.wds :is(.pov-note, .doctor-note, .dn-doctor-comment, [class*="pov-"]) {
	display: block;
	background: var(--wds-surface) !important;
	border: 0 !important;
	border-radius: var(--wds-r-md) !important;   /* 12 — Callout(8)과 구분되는 지점 */
	padding: var(--wds-6) !important;
	margin: var(--wds-6) 0 !important;
	font-size: var(--wds-fs-body) !important;
	line-height: var(--wds-lh-body) !important;
	color: var(--wds-text) !important;
}
/* 「김의건 원장 코멘트 —」 앞머리를 라벨처럼 보이게 */
body.wds :is(.pov-note, .doctor-note) strong:first-child,
body.wds :is(.pov-note, .doctor-note) b:first-child {
	display: block;
	font-size: var(--wds-fs-label) !important;
	font-weight: 700 !important;
	letter-spacing: var(--wds-ls-label);
	color: var(--wds-primary) !important;
	margin-bottom: var(--wds-2);
}
@media (max-width: 767px) {
	body.wds :is(.pov-note, .doctor-note, .dn-doctor-comment) {
		padding: var(--wds-4) var(--wds-5) !important;
	}
	body.wds :is(.dn-faq__q, .rr-faq__q, .beforeafter-faq__q, .cert_faq_q) {
		font-size: 17px !important;
	}
}

/* ── Doctor Comment (§18) — 문서 정의대로 ──────────────────
   [원형 사진] + [이름 라벨] + [코멘트]. 회색 배경 · radius 12 · 좌측 바 없음.
   Callout(배경만·radius 8)과 구분되는 지점은 사진과 이름이다. */
.wds-doctor {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--wds-5);
	align-items: start;
	background: var(--wds-surface);
	border: 0;
	border-radius: var(--wds-r-md);
	padding: var(--wds-6);
	margin: var(--wds-6) 0;
}
.wds-doctor__photo {
	width: 72px; height: 72px;
	border-radius: var(--wds-r-pill) !important;
	object-fit: cover; object-position: center top;
	background: var(--wds-surface-2);
	display: block;
}
.wds-doctor__name {
	margin: 0 0 var(--wds-2) !important;
	font-size: var(--wds-fs-sm) !important;
	font-weight: 700 !important;
	letter-spacing: var(--wds-ls-body);
	color: var(--wds-primary) !important;
}
.wds-doctor__text {
	margin: 0 !important;
	font-size: var(--wds-fs-body) !important;
	line-height: var(--wds-lh-body) !important;
	color: var(--wds-text) !important;
}
@media (max-width: 767px) {
	.wds-doctor { grid-template-columns: 56px 1fr; gap: var(--wds-4); padding: var(--wds-5); }
	.wds-doctor__photo { width: 56px; height: 56px; }
}

/* ── 문서형 페이지의 리듬 (§9) ────────────────────────────
   실측 — 문단 아래 간격이 0 · 5 · 10 · 16 · 24px 다섯 가지였다.
   페이지 <style> 을 걷어낸 뒤에도 combined.min.css 와 인라인이 남아 있다.
   읽는 페이지는 리듬이 생명이다. 여기서 한 번만 정한다. */
body.wds .wds-doc :is(p, ul, ol) { margin: 0 0 var(--wds-p-gap) !important; }
body.wds .wds-doc li { margin: 0 0 10px !important; }
body.wds .wds-doc li:last-child { margin-bottom: 0 !important; }
body.wds .wds-doc h2 { margin: var(--wds-h2-top) 0 var(--wds-h2-bot) !important; }
body.wds .wds-doc h3:not(.cont_sub_title) { margin: var(--wds-h3-top) 0 var(--wds-h3-bot) !important; }
body.wds .wds-doc :is(h2, h3):first-child { margin-top: 0 !important; }
/* 박스 안 문단은 박스 여백이 리듬을 맡는다 */
body.wds .wds-doc :is(.guide-eeat, .dn-geo-card, .wds-doctor, .list_wrap) :is(p, ul, ol) {
	margin: 0 0 var(--wds-3) !important;
}
body.wds .wds-doc :is(.guide-eeat, .dn-geo-card, .wds-doctor, .list_wrap) > :last-child {
	margin-bottom: 0 !important;
}
/* 블록 사이 간격도 하나로 */
body.wds .wds-doc > :is(div, section, ul, .cont_list) { margin: 0 0 var(--wds-5) !important; }
body.wds .wds-doc .cont_list2 > ul { margin: 0 0 var(--wds-3) !important; }

/* ── 리얼리뷰 모바일 (2026-09-01 실측) ────────────────────
   원장 지적 「리얼리뷰 메인페이지 글이 다 잘려」
   원인 : .rr-card__title / .rr-card__text 에 -webkit-line-clamp:2 가 걸려 있다.
          카드를 1열 335px 로 키웠는데 자르는 줄 수는 4열 시절 그대로였다.
   🚨 카드 폭을 바꾸면 자르는 줄 수도 함께 봐야 한다. */
body.wds .rr-card__title { -webkit-line-clamp: 3 !important; }
body.wds .rr-card__text  { -webkit-line-clamp: 4 !important; }
@media (max-width: 767px) {
	body.wds .rr-card__title { -webkit-line-clamp: 3 !important; }
	body.wds .rr-card__text  { -webkit-line-clamp: 5 !important; }
}

/* 요약 박스가 화면 끝에 붙어 있었다 — 회색 배경이 가장자리까지 차면 답답하다 */
@media (max-width: 767px) {
	body.wds :is(.answer-summary, .min-tldr, .dn-geo-card, .guide-eeat,
	             .breast-hub__definition, .wb-note) {
		margin-inline: var(--wds-gutter) !important;
		width: auto !important;
	}
}

/* ── 리뷰 카드 모바일 세로 스택 (2026-09-01 실측) ─────────
   실측 : .rr-card 가 flex-direction:row 라 이미지 218px + 본문 103px,
          글자가 들어가는 폭은 79px 였다. 어떤 글도 읽을 수 없다.
   🚨 그리드를 1열로 넓혀도 카드 「안쪽」이 가로면 소용이 없다.
      카드 폭을 바꿀 때는 카드 내부 배치도 함께 봐야 한다. */
@media (max-width: 767px) {
	body.wds :is(.rr-card, .cm-hub__rv-card, .casebook-card) {
		flex-direction: column !important;
		display: flex !important;
	}
	body.wds :is(.rr-card__img, .casebook-card__img) {
		width: 100% !important;
		max-width: 100% !important;
		aspect-ratio: 4 / 3;
		height: auto !important;
	}
	body.wds :is(.rr-card__img, .casebook-card__img) img {
		width: 100%; height: 100%; object-fit: cover;
	}
	body.wds :is(.rr-card__body, .casebook-card__body) {
		width: 100% !important;
		padding: var(--wds-4) 0 0 !important;
	}
	body.wds .rr-card__title { font-size: var(--wds-fs-h4) !important; -webkit-line-clamp: 2 !important; }
	body.wds .rr-card__text  { font-size: var(--wds-fs-sm) !important; -webkit-line-clamp: 3 !important; }
	body.wds .rr-card__date  { font-size: var(--wds-fs-xs) !important; color: var(--wds-text-muted) !important; }
}

/* ── /about/practice/ 정렬·번호 통일 (2026-09-01 실측) ────
   실측 — 한 페이지 안에서 왼쪽 정렬 16곳 · 가운데 정렬 16곳.
          번호는 34px 숫자를 카드 오른쪽에 절대배치(guide 의 13.5px 배지와 다름).
   §15 「번호 목록은 한 가지 모양만」 · §37 「페이지가 달라도 Component 는 같다」 */
body.wds :is(.prac_card, .cert_benefit_card, .dn-tenets__item),
body.wds :is(.prac_card, .cert_benefit_card, .dn-tenets__item) :is(h2, h3, h4, p, li, span, div) {
	text-align: left !important;
}
/* 번호 — guide 와 같은 배지로 */
body.wds .prac_card {
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start;
	gap: var(--wds-2);
}
body.wds .prac_card_num {
	position: static !important;
	order: -1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	margin: 0 0 var(--wds-2) !important;
	font-size: var(--wds-fs-label) !important;
	font-weight: 700 !important;
	font-style: normal !important;
	font-variant-numeric: tabular-nums;
	color: var(--wds-primary) !important;
	background: var(--wds-primary-soft) !important;
	border-radius: var(--wds-r-pill);
	line-height: 1 !important;
	letter-spacing: 0 !important;
}
/* 🚨 섹션 머리를 왼쪽으로 몰았다가 되돌린다(2026-09-01).
      원래 「섹션 머리 가운데 · 카드 안 왼쪽」으로 일관돼 있었다.
      소개형 페이지는 그 규칙을 지키고, 문서형(.wds-doc)만 전부 왼쪽으로 둔다. */
body.wds .content_wrap:not(:has(.wds-doc)) :is(.prac_section_label, .cert_section_title) {
	text-align: center !important;
}

/* 번호 배지 아래 짧은 버건디 대시(.prac_card_accent)는 배지와 역할이 겹친다.
   §31 「과도한 강조 금지」 — 강조 장치는 카드당 하나면 충분하다. */
body.wds :is(.prac_card_accent, .cert_card_accent, [class$="_accent"]) { display: none !important; }

/* ── 게시글 머리 : 제목 + 날짜·조회수 + 공유 (2026-09-01 실측) ──
   원장 지적 「제목 아래 날짜와 조회수 카카오톡 보내기 등이 정렬이 안 되어 있어 · 제목도 너무 크고」

   실측 — 날짜 top1180 / 조회수 top1190 으로 10px 어긋나 있었다.
     원인은 내가 넣은 `li + li { margin-top:10px }` 이 가로 메타 행까지 민 것이다.
     🚨 목록 간격 규칙은 세로로 쌓인 산문 목록에만 걸어야 한다.
   제목은 30px 로 히어로 h1 과 같은 크기여서 위계가 없었다. 한 단계 낮춘다. */
body.wds :is(.rr-title-row, .read_title) .cont_text ul,
body.wds :is(.rr-title-row, .read_title) ul {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center !important;
	gap: var(--wds-2) var(--wds-4) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
body.wds :is(.rr-title-row, .read_title) li {
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--wds-fs-xs) !important;
	line-height: 1.5 !important;
	color: var(--wds-text-muted) !important;
	display: inline-flex !important;
	align-items: center;
}
/* 항목 사이 점 구분 */
body.wds :is(.rr-title-row, .read_title) li + li::before {
	content: "";
	width: 3px; height: 3px; margin-right: var(--wds-3);
	border-radius: 50%; background: var(--wds-border-strong);
	display: inline-block; flex: 0 0 auto;
}
/* 공유 버튼도 같은 줄에 */
body.wds .rr-share-btn {
	min-height: 36px !important;
	padding: 0 var(--wds-3) !important;
	font-size: var(--wds-fs-label) !important;
	border-radius: var(--wds-r-sm) !important;
	border: 1px solid var(--wds-border) !important;
	background: var(--wds-bg) !important;
	color: var(--wds-text-sub) !important;
}
/* 게시글 제목 — 히어로 h1(30/44)보다 한 단계 아래로 */
body.wds :is(.rr-title-row, .read_title) .cont_text_title,
body.wds .read_01 .cont_text_title {
	font-size: var(--wds-fs-h2) !important;
	font-weight: 700 !important;
	line-height: var(--wds-lh-h2) !important;
	letter-spacing: var(--wds-ls-tight);
	margin: 0 0 var(--wds-4) !important;
	color: var(--wds-text) !important;
}
@media (max-width: 767px) {
	body.wds :is(.rr-title-row, .read_title) .cont_text_title,
	body.wds .read_01 .cont_text_title { font-size: 22px !important; }
}

/* 게시글 제목 — h1 이지만 「페이지 제목」이 아니라 「글 제목」이다.
   히어로가 페이지 머리를 맡고 있으므로 h1 기본값(44/30)은 과하다.
   🚨 앞 규칙이 안 먹은 이유 : 이 요소가 h1 이라 h1 규칙(!important)이 이겼다.
      같은 무게로 한 단계 더 구체적으로 쓴다. */
body.wds .content_wrap h1.cont_text_title,
body.wds .content_wrap .read_title h1,
body.wds .content_wrap .rr-title-row h1 {
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: var(--wds-ls-tight);
	margin: 0 0 var(--wds-4) !important;
}
@media (max-width: 767px) {
	body.wds .content_wrap h1.cont_text_title,
	body.wds .content_wrap .read_title h1,
	body.wds .content_wrap .rr-title-row h1 { font-size: 22px !important; line-height: 1.4 !important; }
}
/* 공유 버튼에 글자가 없어 무엇인지 알 수 없었다 — 아이콘 옆에 라벨을 붙인다 */
body.wds .rr-share-btn::after {
	content: "공유";
	margin-left: 6px;
	font-size: var(--wds-fs-label);
	font-weight: 600;
	color: var(--wds-text-sub);
}
body.wds .rr-share-btn { width: auto !important; gap: 0 !important; }

/* 🚨 게시글 제목이 30px 로 커진 건 내 h1 규칙 탓이었다.
      페이지는 원래 PC 20.5 / 모바일 18 로 두고 있었는데 h1 기본값이 그걸 덮었다.
      「글 제목」은 페이지 h1 이 아니다. 시스템 스케일의 h3 자리에 둔다.
      선택자를 페이지 래퍼까지 붙여 확실히 이기게 한다. */
body.wds .rr-page-wrap .read_title h1,
body.wds .rr-page-wrap .read_title .cont_text_title,
body.wds .content_wrap .read_title h1.cont_text_title {
	font-size: var(--wds-fs-h3) !important;
	font-weight: 700 !important;
	line-height: var(--wds-lh-h3) !important;
	letter-spacing: var(--wds-ls-tight);
	margin: 0 0 var(--wds-4) !important;
}
@media (max-width: 767px) {
	body.wds .rr-page-wrap .read_title h1,
	body.wds .rr-page-wrap .read_title .cont_text_title,
	body.wds .content_wrap .read_title h1.cont_text_title {
		font-size: var(--wds-fs-h3) !important;   /* 모바일 21px */
		line-height: 1.45 !important;
	}
}

/* ── 게시글 머리 한 줄 정렬 마무리 (2026-09-01) ────────────
   ① 「조회수」와 숫자가 어긋났다 — <span class="comma"> 가 13.5px · display:block 이라
      부모(16px)와 크기·배치가 달랐다. 상속시키고 inline 으로 되돌린다.
   ② 카카오 공유 버튼이 아랫줄에 따로 있었다 — 날짜·조회수와 같은 줄에 둔다. */
body.wds .read_title {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wds-3) var(--wds-4);
}
body.wds .read_title > :is(h1, .cont_text_title) { flex: 0 0 100%; }
body.wds .read_title :is(.cont_text, ul) { margin: 0 !important; }
body.wds .read_title .rr-share-btn { margin: 0 !important; flex: 0 0 auto; }

/* 숫자를 글자와 같은 크기·같은 줄로 */
body.wds .read_title li :is(span, b, em, .comma) {
	font-size: inherit !important;
	line-height: inherit !important;
	display: inline !important;
	color: inherit !important;
	margin-left: 4px;
}

/* 게시글 머리는 왼쪽 축에서 시작한다 (가운데로 몰려 있었다) */
body.wds .read_title { justify-content: flex-start !important; text-align: left !important; }
body.wds .read_title > * { margin-inline: 0 !important; }
body.wds .read_title :is(h1, .cont_text_title, .cont_text, ul, li) { text-align: left !important; }

/* 날짜·조회수·공유를 한 줄에, 왼쪽 정렬로 (원장 지시 2026-09-01)
   🚨 공유 버튼이 아랫줄로 밀린 이유 : ul 을 감싼 .cont_text 가 폭 100% 를 차지했다. */
body.wds .read_title .cont_text {
	flex: 0 1 auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
body.wds .read_title > :is(h1, .cont_text_title) { text-align: left !important; }
body.wds .read_title { justify-content: flex-start !important; row-gap: var(--wds-2); }

/* 🚨 .read_title 이 flex-direction:column 이었다.
      거기에 align-items:center 를 주니 가로 중앙정렬이 되어 메타 행이 L91 로 밀렸다.
      column 에서 align-items 는 「가로 축」을 뜻한다. 방향을 명시한다. */
body.wds .read_title {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: var(--wds-3) !important;
}
/* 날짜·조회수·공유는 한 줄 */
body.wds .rr-title-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: var(--wds-2) var(--wds-4) !important;
	width: 100% !important;
	margin: 0 !important;
}
body.wds .rr-title-row > * { margin: 0 !important; }
body.wds .rr-share-group {
	display: flex !important;
	align-items: center;
	gap: var(--wds-2);
	margin: 0 !important;
}

/* ── 이미지 모서리 (§11) ─────────────────────────────────
   원장 지적 「첫 페이지 가슴축소 히어로 이미지만 모서리가 둥글게 되어 있어」
   원인 : 내가 `img { border-radius: 12px }` 를 전역으로 걸었는데,
          이 카드들은 이미 overflow:hidden 래퍼가 모양을 자르고 있었다.
          이미지가 래퍼보다 크면 잘려서 각지고, 딱 맞으면 12px 이 그대로 보인다.
          → 카드마다 결과가 달라진다.
   🚨 모서리는 한 곳에서만 정한다. 래퍼가 있으면 래퍼가, 없으면 이미지가 맡는다.

   2026-09-02 : 사진은 각지게 되돌린다.
   원장 지적 「모바일 첫 페이지의 히어로 사진들 모서리가 둥글게 되어 있는데 기존의 사각형으로」
   실측 — .dn-proc-card__img-wrap 이 PC 287px·모바일 375px(화면 끝까지) 모두 12px 였다.
   🚨 화면 끝까지 닿는 사진에 모서리를 주면 잘린 것처럼 보인다.
      원래 이 사이트의 사진은 각졌다. 래퍼도 이미지도 0 으로 두어 한 가지만 남긴다. */
body.wds :is([class*="img-wrap"], [class*="thumb-wrap"], [class*="__media"], picture) img {
	border-radius: 0 !important;
}
body.wds :is([class*="img-wrap"], [class*="thumb-wrap"], [class*="__media"]) {
	border-radius: 0 !important;
	overflow: hidden;
}

/* ── 본문 크기 잔여 (2026-09-01 전수조사) ─────────────────
   원장 지적 「윈느의 핵심원칙 내용도 글자가 왜 또 작아? 제각각이네」
   전 페이지 클래스 단위로 재보니 본문은 전부 17px 인데 두 곳만 달랐다.
     .dn-tenets__item   15px   — Callout 묶음에 넣으면서 sm(15)이 걸렸다
     .rr-card__text     13.5px — 라벨 크기까지 내려가 있었다
   🚨 「스케일 안의 값」이라고 안전한 게 아니다. 역할에 맞는 크기여야 한다.
      핵심원칙은 읽는 본문이지 보조 설명이 아니다. */
body.wds .dn-tenets__item,
body.wds .dn-tenets__item :is(p, li, span, div) {
	font-size: var(--wds-fs-body) !important;
	line-height: var(--wds-lh-body) !important;
}
body.wds .rr-card__text {
	font-size: var(--wds-fs-sm) !important;
	line-height: var(--wds-lh-sm) !important;
}
@media (max-width: 767px) {
	body.wds .dn-tenets__item,
	body.wds .dn-tenets__item :is(p, li, span, div) { font-size: var(--wds-fs-body) !important; }
	body.wds .rr-card__text { font-size: var(--wds-fs-sm) !important; }
}

/* ── /about/practice/ 잔여 (2026-09-01 요소 단위 실측) ────
   원장 지적 「소제목과 본문 글씨들이 제각각」
     .prac_tagline  26px/700/1.85 — 리드 문장인데 h2(32) 바로 아래 26px 굵게였다.
                    시스템에 lead(19px)가 있는데 쓰지 않았다.
     strong         15.5px — 본문 안 강조가 본문(17)보다 작았다. */
body.wds :is(.prac_tagline, .cert_tagline, .about-hub__tagline) {
	font-size: var(--wds-fs-lead) !important;
	font-weight: 400 !important;
	line-height: var(--wds-lh-lead) !important;
	font-style: normal !important;
	color: var(--wds-text-sub) !important;
	display: block;
	max-width: var(--wds-measure);
	margin-inline: auto;
}
/* 본문 안 강조는 크기를 바꾸지 않는다. 굵기로만 강조한다 (§5) */
body.wds .content_wrap :is(p, li, dd, td) :is(strong, b) {
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: 700 !important;
}
body.wds .content_wrap > :is(strong, b),
body.wds .content_wrap :is(div, section) > :is(strong, b) {
	font-size: var(--wds-fs-body) !important;
	line-height: var(--wds-lh-body) !important;
}

/* ── 「라 벨 윈느」 카테고리 탭 (홈 하단) ────────────────
   브레스트 로그 · 가슴팩트 101 · 윈느 연구소 · 케이스 PICK — <li> 로 만든 탭이다.
   전후사진·후기의 필터와 같은 역할이므로 Chip 한 모양으로 묶는다 (§23). */
body.wds :is(.medi_menu_list, .before_menu_list, .dn-shorts__tabs, .dn-labelle__tabs) > li,
body.wds :is(.medi_menu_list_wrap, [class*="labelle"], [class*="shorts"]) ul > li {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	/* 칩 높이는 40 하나다. min-height 로 두면 안의 <small> 때문에 44 가 되어
	   같은 페이지의 필터 칩(40)과 4px 어긋난다 (전후사진 실측). */
	height: 40px; min-height: 40px;
	padding: 0 var(--wds-4) !important;
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: var(--wds-text) !important;
	background: var(--wds-bg) !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: var(--wds-r-pill) !important;
	margin: 0 var(--wds-2) var(--wds-2) 0 !important;
	cursor: pointer;
}
body.wds :is(.medi_menu_list, .before_menu_list) > li.check,
body.wds :is(.medi_menu_list_wrap, [class*="labelle"], [class*="shorts"]) ul > li:is(.check, .active, .is-active) {
	background: var(--wds-primary) !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}

/* 🚨 칩은 <li> 에만 걸려 있었고 안의 <a> 는 제 패딩(12/24)과 글자(15.5px)를
      그대로 들고 있었다. 그래서 40px 짜리 칩이 46px 로 부풀고, li(13.5px)와
      a(15.5px)의 줄높이가 달라 글자가 칩 가운데에서 어긋났다.
      원장 지적 「메뉴버튼 줄간격이 어긋난다」의 실제 원인.
      링크가 칩 전체를 채우게 해서 클릭 영역도 칩과 일치시킨다. */
body.wds :is(.medi_menu_list, .before_menu_list, .dn-shorts__tabs, .dn-labelle__tabs) > li > a,
body.wds :is(.medi_menu_list_wrap, [class*="labelle"], [class*="shorts"]) ul > li > a {
	display: flex !important;
	align-items: center; justify-content: center;
	align-self: stretch;
	margin: 0 calc(var(--wds-4) * -1) !important;
	padding: 0 var(--wds-4) !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	background: none !important;
	border: 0 !important;
	border-radius: inherit !important;
	text-decoration: none !important;
}
/* 칩 사이 간격은 gap 한 곳에서만 준다 (li margin 과 ul gap 이 겹쳐 있었다) */
body.wds :is(.medi_menu_list, .before_menu_list, .dn-shorts__tabs, .dn-labelle__tabs),
body.wds :is(.medi_menu_list_wrap, [class*="labelle"], [class*="shorts"]) ul {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center;
	gap: var(--wds-2) !important;
}
body.wds :is(.medi_menu_list, .before_menu_list, .dn-shorts__tabs, .dn-labelle__tabs) > li,
body.wds :is(.medi_menu_list_wrap, [class*="labelle"], [class*="shorts"]) ul > li {
	margin: 0 !important;
}

/* ═══ 전후사진 페이지 예전 디자인 정리 (2026-09-01 실측) ═══
   원장 지적 「제각각으로 통일이 안 되어 있고 예전 디자인도 중복되어 있어」
   실측 — 타이포·버튼은 맞는데 박스가 옛 디자인 그대로였다.
     ba-intro          크림 #fdfcfa · 테두리 6.25px · radius 4px
     casebook-finder   테두리 6.25px · radius 4px
     beforeafter-faq   테두리 6.25px · radius 14px
     wune-ba-cta       와인 #540F19 · radius 6px
     wune-related__link 크림 #fffdf9 · radius 0
   🚨 테두리 6.25px 과 크림색이 옛 디자인의 흔적이다. 시스템 두 모양으로 수렴시킨다. */

/* Callout — 안내문 */
body.wds :is(.ba-intro, .rr-intro, .cm-intro) {
	background: var(--wds-surface) !important;
	border: 0 !important;
	border-radius: var(--wds-r-sm) !important;
	padding: var(--wds-5) var(--wds-6) !important;
}
/* Card — 필터·FAQ 상자 */
body.wds :is(.casebook-finder, .beforeafter-faq, .rr-faq, .cm-hub__faq) {
	background: var(--wds-bg) !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: var(--wds-r-md) !important;
	padding: var(--wds-6) !important;
}
/* 카드 안 구분선은 1px */
body.wds :is(.casebook-card__head, .casebook-card__foot, .casebook-card__volume,
             .casebook-finder__label, .beforeafter-faq__item, .dn-page-hero) {
	border-width: 0 !important;
	border-bottom-width: 1px !important;
	border-color: var(--wds-border) !important;
	border-style: solid !important;
}
body.wds .casebook-card__foot { border-bottom-width: 0 !important; border-top-width: 1px !important; }
body.wds .dn-page-hero { border-bottom-width: 1px !important; }

/* CTA — 와인 배경 띠를 공통 CTA 로 (§24) */
body.wds :is(.wune-ba-cta, .rr-cta-card, .rr-consult-cta) {
	background: var(--wds-surface) !important;
	border: 0 !important;
	border-radius: var(--wds-r-lg) !important;
	padding: var(--wds-9) var(--wds-6) !important;
	color: var(--wds-text) !important;
}
body.wds :is(.wune-ba-cta, .rr-cta-card, .rr-consult-cta) :is(p, h2, h3, b, strong, span) {
	color: var(--wds-text) !important;
}

/* 관련 페이지 카드 — 크림 배경 제거, Card 한 모양 */
body.wds .wune-related__link {
	background: var(--wds-bg) !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: var(--wds-r-md) !important;
	padding: var(--wds-5) !important;
	min-height: 0 !important;
}
body.wds .wune-related__name { font-size: var(--wds-fs-h4) !important; font-weight: 600 !important; }
body.wds .wune-related__desc { font-size: var(--wds-fs-sm) !important; font-weight: 400 !important;
	color: var(--wds-text-sub) !important; letter-spacing: var(--wds-ls-body) !important; }

/* 각도 선택 바탕의 회색 띠 */
body.wds .bna-angle { background: transparent !important; }


/* ═══ 전수조사에서 나온 나머지 버튼 (2026-09-02) ═════════
   27개 페이지를 브라우저로 재어 보니, 버튼 규칙이 아직 닿지 않은 곳이 세 군데였다.
     /about/doctor/          ytlink        50px · radius 0
     전후사진 케이스 상세     bac-cta__btn  52px · radius 0 · bac-back__link 44px
     리얼리뷰 상세           rr-cta-card__btn 54px · 배경이 아직 브라운(44,26,14)
                            btn.btn1      52px · 검정 배경 · 18px
   🚨 버튼을 새로 만들 때마다 클래스가 늘어난다. 목록을 늘리는 것이 아니라
      마크업을 `.wds-btn` 으로 바꾸는 것이 최종 목표다 (§34). 여기는 그 사이의 다리다. */
body.wds :is(
	.bac-cta__btn, .bac-back__link, .dn-doctor-intro__ytlink,
	.rr-cta-card__btn, .rr-consult-cta__btn, .rr-page-wrap .btn
) {
	display: inline-flex !important;
	align-items: center; justify-content: center; gap: var(--wds-2);
	min-height: 50px; height: auto;
	padding: 0 var(--wds-6) !important;
	font-size: var(--wds-fs-sm) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	border: 1.5px solid transparent !important;
	border-radius: var(--wds-r-sm) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
/* Primary — 버건디 채움 */
body.wds :is(.bac-cta__btn--primary, .rr-cta-card__btn,
             .rr-consult-cta__btn--primary, .rr-page-wrap .btn1) {
	background: var(--wds-primary) !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}
body.wds :is(.bac-cta__btn--primary:hover, .rr-cta-card__btn:hover,
             .rr-consult-cta__btn--primary:hover, .rr-page-wrap .btn1:hover) {
	background: var(--wds-primary-dark) !important;
	border-color: var(--wds-primary-dark) !important;
}
/* Secondary — 버건디 테두리 */
body.wds :is(.bac-cta__btn--line, .bac-back__link,
             .dn-doctor-intro__ytlink, .rr-consult-cta__btn) {
	background: transparent !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-primary) !important;
}
body.wds :is(.bac-cta__btn--line:hover, .bac-back__link:hover,
             .dn-doctor-intro__ytlink:hover, .rr-consult-cta__btn:hover) {
	background: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}
/* 각도 탭·공유 버튼은 필터 성격이라 Chip (40 · pill) */
body.wds :is(.bac-angle-tab, .rr-share-btn) {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	height: 40px; min-height: 40px;
	padding: 0 var(--wds-4) !important;
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: var(--wds-r-pill) !important;
	background: var(--wds-bg) !important;
	color: var(--wds-text) !important;
}
body.wds :is(.bac-angle-tab.is-active, .bac-angle-tab.active) {
	background: var(--wds-primary) !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}

/* 🚨 사진을 직접 감싼 요소는 모서리를 갖지 않는다.
      전수조사에서 shorts_thumb 16px · casebook-card__brand 12px ·
      event_box 8px · rr-img-grid 6px 가 남아 사진마다 모양이 달랐다.
      아바타처럼 원형이어야 하는 것만 예외. */
body.wds .content_wrap *:has(> img):not([class*="avatar"]):not([class*="profile"]) {
	border-radius: 0 !important;
}


/* ═══ 전수조사 마무리 (2026-09-02) ═══════════════════════
   27개 페이지를 다 재고 남은 세 가지. 전부 하드코딩된 옛 브라운이다.
     case.css   .bac-photo__label   rgba(44,26,14,.78)  사진 위 라벨 배경
     combined   .minutes02/09       rgba(139,92,58,.12) 박스 테두리 (아주 옅다)
     realmodel/reservation 의 작은 버튼 36px — 40(칩)도 50(버튼)도 아니었다
   🚨 combined.min.css 는 언어사이트와 공유라 손대지 않는다. 여기서 덮는다. */

/* 사진 위 라벨 — 어두운 건 맞다. 색만 중립으로 (BEFORE/AFTER 글씨가 흰색이다) */
body.wds .bac-photo__label { background: rgba(26, 26, 26, .78) !important; }
body.wds .bac-photo__label.bac-photo__label--after { background: rgba(139, 21, 56, .88) !important; }

/* 옅은 브라운 테두리 → 시스템 테두리색 */
body.wds :is(.minutes_wrap [class*="minutes"], .cont_box1) {
	border-color: var(--wds-border) !important;
}

/* 작은 버튼 36px → 칩 40 (필터·보조 동작이라 칩이 맞다) */
body.wds :is(.modal_open, .form_policy_btn) {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	height: 40px; min-height: 40px;
	padding: 0 var(--wds-4) !important;
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: var(--wds-r-pill) !important;
	background: var(--wds-bg) !important;
	color: var(--wds-text) !important;
}
body.wds :is(.modal_open:hover, .form_policy_btn:hover) {
	border-color: var(--wds-primary) !important;
	color: var(--wds-primary) !important;
}


/* 보형물 비교 탭 — 필터 성격이라 Chip (모바일 실측 51px · radius 0 이었다) */
body.wds .dn-implant-tab {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	height: 40px; min-height: 40px;
	padding: 0 var(--wds-4) !important;
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: var(--wds-r-pill) !important;
	background: var(--wds-bg) !important;
	color: var(--wds-text) !important;
}
body.wds .dn-implant-tab:is(.is-active, .active) {
	background: var(--wds-primary) !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}

/* 공유 버튼은 보조 동작이라 칩 규격(40 · pill)으로 (모바일에서 40 인데 radius 8 이었다) */
body.wds .guide-share-btn { border-radius: var(--wds-r-pill) !important; }

/* 🚨 사진 모서리는 마지막에 시스템이 못 박는다.
      페이지 <style> 이 `!important` 로 6px 을 걸고 있어 일반 규칙으로는 안 잡혔다.
      원장 지시 「기존의 사각형으로」 — 예외는 아바타뿐. */
body.wds .content_wrap img:not([class*="avatar"]):not([class*="profile"]) {
	border-radius: 0 !important;
}

/* 🚨 대비 사고 방지 — 어두운 띠 위의 아웃라인 버튼은 흰색이어야 한다.
      `.bac-cta` 배경을 중립 검정으로 옮기면서 그 위 버튼을 버건디로 만들어
      검정 위 버건디가 됐다(실측). 어두운 배경 위에서는 흰 테두리·흰 글씨. */
body.wds .bac-cta :is(.bac-cta__btn--line, .bac-cta__btn:not(.bac-cta__btn--primary)) {
	border-color: rgba(255,255,255,.75) !important;
	color: var(--wds-text-invert) !important;
	background: transparent !important;
}
body.wds .bac-cta :is(.bac-cta__btn--line:hover, .bac-cta__btn:not(.bac-cta__btn--primary):hover) {
	background: rgba(255,255,255,.16) !important;
	border-color: #ffffff !important;
	color: var(--wds-text-invert) !important;
}

/* 🚨 활성 칩 안의 개수가 안 보였다 — li 는 흰 글씨로 바뀌는데 안의 <small> 이
      자기 색(버건디)을 들고 있어 버건디 위 버건디가 됐다. 실측 「전체보기 (65)」.
      칩 안의 글자는 칩의 색을 따른다. */
body.wds :is(.medi_menu_list, .before_menu_list) > li :is(small, span, em, b),
body.wds :is(.medi_menu_list_wrap, [class*="labelle"], [class*="shorts"]) ul > li :is(small, span, em, b),
body.wds :is(.wds-chip, .bac-angle-tab, .dn-implant-tab) :is(small, span, em, b) {
	color: inherit !important;
	font-size: .88em !important;
}

/* breadcrumb 구분자가 테두리색이라 거의 안 보였다 */
body.wds .bac-crumb span:not([class]) { color: var(--wds-text-muted) !important; }

/* 공유 버튼은 칩 규격 하나로 — PC 50 · 모바일 40 으로 갈려 있었다 */
body.wds .guide-share-btn {
	height: 40px !important; min-height: 40px !important;
	padding: 0 var(--wds-4) !important;
	font-size: var(--wds-fs-label) !important;
	border-radius: var(--wds-r-pill) !important;
}


/* ═══ 허브 페이지 정리 (2026-09-02 브라우저 실측) ═══════════
   원장 지적 「허브 페이지들도 개선된 디자인이 적용이 안 된 부분들이 있어」
   /about/ · /breast/ · /community/ 세 곳을 재어 나온 것.
   제목(h2 32/700 · h3 19/600)과 폭·색·버튼은 이미 맞았고, 아래가 어긋났다.

     ① 박스 모서리가 6 · 8 · 12 · 16 네 가지. 6px 은 스케일 밖이다.
     ② 안쪽 여백 22px — 스케일(4·8·12·16·24…) 밖. 24 가 맞다.
     ③ 표 머리글이 13.5px 20칸 · 15px 3칸 으로 갈렸다.
     ④ 문단 여백이 6 · 10 · 14 · 18px — 전부 스케일 밖.
     ⑤ 히어로 안쪽 여백 100px — 96 이 스케일 값이다.
   🚨 값을 「비슷하게」 맞추지 않는다. 스케일에 있는 값으로만 옮긴다. */

/* ① ② 답변 상자 — r6/p22 → r8/p24 */
body.wds :is(.about-hub__answer, .cm-hub__answer, .about-hub__why-summary,
             .breast-hub__answer) {
	border-radius: var(--wds-r-sm) !important;
	padding: var(--wds-5) var(--wds-6) !important;
}

/* ③ 표 머리글은 한 크기로 (§14) */
body.wds :is(.breast-hub__table, .content_wrap table) th {
	font-size: var(--wds-fs-label) !important;
	font-weight: 700 !important;
	background: var(--wds-surface) !important;
	color: var(--wds-text) !important;
}

/* ④ 허브 상자 안 문단 여백을 리듬 하나로 */
body.wds :is(.about-hub__answer, .cm-hub__answer, .about-hub__why-summary,
             .about-hub__value-card, .cm-hub__cat, .breast-hub__card,
             .breast-hub__definition, .about-hub__doctor)
        :is(p, h2, h3, h4) {
	margin-block: 0 var(--wds-p-gap) !important;
}
body.wds :is(.about-hub__answer, .cm-hub__answer, .about-hub__why-summary,
             .about-hub__value-card, .cm-hub__cat, .breast-hub__card,
             .breast-hub__definition, .about-hub__doctor)
        > :last-child {
	margin-bottom: 0 !important;
}

/* ⑤ 히어로 안쪽 여백 100 → 96 */
body.wds :is(.dn-page-hero, .about-hub__hero) {
	padding-block: var(--wds-11) !important;
}
@media (max-width: 767px) {
	body.wds :is(.dn-page-hero, .about-hub__hero) { padding-block: var(--wds-9) !important; }
}


/* ═══ 리얼리뷰 상세 마무리 (2026-09-02 실측) ═══════════════
   원장 지적 「글이 여백 없이 박스에 가깝게 · 하단에 글씨가 작은 부분」

   ① `.read_box` 가 `padding: 50px 0` 이었다. 테두리는 1200 을 두르는데
      좌우 여백이 0 이라 글이 선에 닿았다. 세로만 주고 가로를 빼먹은 것.
   ② 하단 글자 — 이전/다음글 「제목」과 카드 설명이 13.5px(라벨 크기)였다.
      제목·설명은 읽는 글이므로 15px(--wds-fs-sm)이 맞다.
      메타·카테고리는 라벨이므로 13.5 를 유지한다. */
body.wds .read_box {
	padding-inline: var(--wds-6) !important;
	border-color: var(--wds-border) !important;
}
@media (max-width: 767px) {
	body.wds .read_box { padding-inline: var(--wds-4) !important; }
}
body.wds :is(.rr-prevnext__title, .rr-card__desc, .rr-related__item a) {
	font-size: var(--wds-fs-sm) !important;
	line-height: var(--wds-lh-sm) !important;
}
body.wds :is(.rr-card__meta, .rr-card__category, .rr-prevnext__label) {
	font-size: var(--wds-fs-label) !important;
}


/* 「이런 후기도 있어요」 썸네일 — 목록 페이지와 같은 카드인데 모양이 달랐다.
   원장 지적 「대표사진도 전체가 아닌 일부만 보이고 있다」
   실측 — 상세는 `.rr-card__thumb` 4:3 + object-fit:cover 였다.
          후기 사진은 세로(1600×1573 ~ 1600×1979)라 가로 프레임에서 크게 잘린다.
          목록 페이지의 `.rr-card__img` 는 1:1 + contain 이라 전체가 보인다.
   🚨 같은 컴포넌트가 페이지마다 다르면 안 된다(§37). 목록 쪽에 맞춘다. */
body.wds .rr-card__thumb {
	aspect-ratio: 1 / 1 !important;
	background: var(--wds-surface) !important;
	overflow: hidden;
}
body.wds .rr-card__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
}


/* ═══ 전후사진 PC 잔재 + 푸터 (2026-09-02 실측) ═══════════
   원장 지적 「전후사진 PC 에 아직 개선 디자인이 안 됐다」
             「모바일 하단 푸터의 글씨 크기도 제각각」

   전후사진 PC 실측 — 타이포·버튼·폭은 맞았고 아래가 남아 있었다
     .beforeafter-seo-content  radius 14px  ← 스케일(8·12·16) 밖
     .casebook-card__foot      padding 20px ← 스케일 밖
     .bac-login-modal__btn     배경 #2c1a0e ← 옛 브라운
   푸터 모바일 실측 — 글자가 12 · 12.5 · 16px 세 가지였고
     약관 링크는 줄높이가 1.0 이라 글자가 눌려 보였다. */

body.wds .beforeafter-seo-content { border-radius: var(--wds-r-md) !important; }
body.wds .casebook-card__foot { padding-block: var(--wds-5) !important; }
body.wds .bac-login-modal__btn {
	background: var(--wds-primary) !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}
body.wds .dn-footer__pc-copy-line { border-color: var(--wds-border) !important; }

/* ── 푸터 글자 (§4) — 역할은 둘뿐이다 ────────────────────
   연락처(강조) = 본문 크기 · 사업자정보·약관·저작권 = 라벨 크기.
   🚨 12px 은 시스템의 가장 작은 값(13.5)보다도 작다. 한글은 12px 에서 읽기 어렵다. */
body.wds :is(footer, .foot_wrap, .dn-footer, [class*="dn-footer"]) :is(p, li, span, div, a, address) {
	font-size: var(--wds-fs-label) !important;
	line-height: 1.6 !important;
}
body.wds :is(footer, .foot_wrap, .dn-footer) :is(.dn-footer__tel, [class*="tel"], [class*="phone"]) {
	font-size: var(--wds-fs-body) !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}
body.wds :is(footer, .foot_wrap, .dn-footer) :is(.modal_open, .dn-footer__pc-legal a) {
	font-weight: 500 !important;
}


/* ═══ 버튼 전수조사 2차 (2026-09-02) — PC 1440 · 모바일 375 동시 실측 ═══
   KR 23개 페이지를 두 폭에서 다시 재서 버튼류 44종을 뽑았다.
   §12 에서 잡은 13종은 정상이고, 아래 여섯이 시스템 밖에 남아 있었다.

     form_submit_btn    검정 #1A1A1A · 17px/700 · radius 0 · 59h   (예약·실모델 제출)
     dn-outline-btn     「카카오톡 문의하기」인데 테두리도 배경도 없다 (20h · 17px/400)
     dn-view-more-btn   「원장 소개 보기」 · 구 팔레트 #5C1A24 · 13.9→12.3px/400
     guide-share-btn    PC 는 pill 채움, 모바일은 투명 — 폭마다 디자인이 달랐다
     blog-pillar-btn    검정 #111 채움 · radius 0                  → 필터라 Chip
     blog-search-tag    radius 0 · 14px                            → Chip

   🚨 그리고 모바일 높이가 44 · 48 · 50 세 가지로 갈려 있었다 (DS 값은 48).
      브리지가 min-height 를 !important 없이 걸어 레거시 height:44px 에 졌다.
   🚨 .blog-hero-cta 는 이름에 cta 가 들어갈 뿐 버튼이 아니라 히어로 설명 문장이라
      손대지 않는다. (클래스 이름만 보고 버튼으로 묶으면 본문이 버튼이 된다)
   ══════════════════════════════════════════════════════ */

/* ── 공통 골격 (§12 와 같은 값) ─────────────────────────── */
body.wds :is(.form_submit_btn, .dn-outline-btn, .dn-view-more-btn) {
	display: inline-flex !important;
	align-items: center; justify-content: center; gap: var(--wds-2);
	min-height: 50px !important; height: auto !important;
	padding: 0 var(--wds-6) !important;
	font-size: var(--wds-fs-sm) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: var(--wds-ls-body);
	border-radius: var(--wds-r-sm) !important;
	border: 1.5px solid transparent;
	text-decoration: none;
	box-shadow: none !important;
	transition: background var(--wds-dur) var(--wds-ease),
	            color var(--wds-dur) var(--wds-ease),
	            border-color var(--wds-dur) var(--wds-ease);
}

/* ── Primary : 제출 · 문의 · 공유 ───────────────────────── */
body.wds :is(.form_submit_btn, .dn-outline-btn) {
	background: var(--wds-primary) !important;
	border: 1.5px solid var(--wds-primary) !important;
	border-radius: var(--wds-r-sm) !important;
	color: var(--wds-text-invert) !important;
}
body.wds :is(.form_submit_btn:hover, .dn-outline-btn:hover) {
	background: var(--wds-primary-dark) !important;
	border-color: var(--wds-primary-dark) !important;
	color: var(--wds-text-invert) !important;
}

/* ── Secondary : 「원장 소개 보기」 계열 ─────────────────── */
body.wds .dn-view-more-btn {
	background: transparent !important;
	border: 1.5px solid var(--wds-primary) !important;
	color: var(--wds-primary) !important;
}
body.wds .dn-view-more-btn:hover {
	background: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}

/* ── Chip : 블로그 주제 필터 · 검색 태그 (§23) ──────────── */
body.wds :is(.blog-pillar-btn, .blog-search-tag) {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	height: 40px !important; min-height: 40px !important;
	padding: 0 var(--wds-4) !important;
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: var(--wds-r-pill) !important;
	background: var(--wds-bg) !important;
	color: var(--wds-text) !important;
	text-decoration: none;
	white-space: nowrap;
}
body.wds :is(.blog-pillar-btn:hover, .blog-search-tag:hover) {
	border-color: var(--wds-primary) !important;
	color: var(--wds-primary) !important;
}
body.wds :is(.blog-pillar-btn.active, .blog-pillar-btn.is-active,
             .blog-search-tag.active, .blog-search-tag.is-active) {
	background: var(--wds-primary) !important;
	border-color: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}

/* ── 모바일 높이 48 로 통일 ─────────────────────────────
   실측: 44(dn-btn--filled · guide-closing ×2 · breast-hub · loc-map-nav · wune-ba-cta)
         48(kakao-cta) · 50(wds-btn). 세 값이 섞여 있었다. */
@media (max-width: 767px) {
	body.wds :is(
		.dn-btn, .head-cta-btn, .dn-kakao-cta__btn, .dn-guide-closing__btn,
		.breast-hub__cta-btn, .wune-ba-cta__btn, .wune-ba-cta__b,
		.minutes-bottom-cta__btn, .beforeafter-bottom-cta__btn,
		.dn-loc-map-nav__btn, .wune-consult__btn, .ev_apply_btn,
		.form_submit_btn, .dn-outline-btn, .dn-view-more-btn
	) {
		min-height: 48px !important;
		height: auto !important;
	}
}

/* ── 공유 버튼은 Chip 이다 (§23) ─────────────────────────
   DS 안에서 의도가 갈려 있었다. §12 목록은 .guide-share-btn 을 Primary 로 두는데,
   뒤쪽 「각도 탭·공유 버튼은 필터 성격이라 Chip」 블록은 .rr-share-btn 을 Chip 으로 둔다.
   실측에서도 PC 는 버건디 채움 pill, 모바일은 투명 — 폭마다 다른 버튼이었다.
   공유는 상담·예약·문의가 아니라 보조 동작이므로 Chip 쪽으로 통일한다.
   🚨 여기서 정하지 않으면 두 규칙이 절반씩 먹혀 채움 + radius 8 잡종이 된다. */
body.wds .guide-share-btn,
body.wds .content_wrap .guide-share-btn {
	display: inline-flex !important;
	align-items: center; justify-content: center; gap: 6px;
	height: 40px !important; min-height: 40px !important;
	padding: 0 var(--wds-4) !important;
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: var(--wds-r-pill) !important;
	background: var(--wds-bg) !important;
	color: var(--wds-text) !important;
	box-shadow: none !important;
	text-decoration: none;
}
body.wds .guide-share-btn:hover,
body.wds .content_wrap .guide-share-btn:hover {
	border-color: var(--wds-primary) !important;
	color: var(--wds-primary) !important;
	background: var(--wds-bg) !important;
}

/* ═══ 버튼 전수조사 2차 — 상세 페이지 (2026-09-02) ═════════
   정적 23쪽 말고 상세 템플릿(블로그·전후사진·리얼리뷰·셀피)도 두 폭에서 쟀다.

     .btn.btn1  「목록으로」 — 같은 버튼이 페이지마다 셋이었다
        블로그 상세    bg #111111 · color #1A1A1A · 12px · radius 0   🚨 글자가 배경에 묻힌다
        리얼리뷰 상세  버건디 채움 · 15px · radius 8
        셀피 상세      bg #000000 · 16px · radius 5
        → 목록으로는 상담·예약·문의가 아니라 보조 이동이므로 Secondary 로 통일.

     .page-share-btn  공유 — radius 0 · 13.5px/400 · 44h
        blog-read__share 의 글자색이 #2C1A0E (구 브라운) 로 남아 있었다.
        → guide-share-btn · rr-share-btn 과 같은 Chip 으로 통일.

   ⓘ .bac-angle-tab 은 40 이 아니라 44h 다. content_wrap 안의 a·button 에
     min-height:44px 를 거는 규칙(터치 타깃)이 Chip 40 을 이기기 때문인데,
     접근성 값이라 여기서 임의로 40 으로 깎지 않는다. (DS 쪽 판단 사항)
   ══════════════════════════════════════════════════════ */

/* ── 「목록으로」 = Secondary ───────────────────────────── */
body.wds :is(.btn1, .btn.btn1),
body.wds .content_wrap :is(.btn1, .btn.btn1) {
	display: inline-flex !important;
	align-items: center; justify-content: center; gap: var(--wds-2);
	min-height: 50px !important; height: auto !important;
	padding: 0 var(--wds-6) !important;
	font-size: var(--wds-fs-sm) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	background: transparent !important;
	border: 1.5px solid var(--wds-primary) !important;
	border-radius: var(--wds-r-sm) !important;
	color: var(--wds-primary) !important;
	box-shadow: none !important;
	text-decoration: none;
}
body.wds :is(.btn1:hover, .btn.btn1:hover),
body.wds .content_wrap :is(.btn1:hover, .btn.btn1:hover) {
	background: var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}

/* ── 공유 버튼 = Chip ───────────────────────────────────── */
body.wds .page-share-btn,
body.wds .content_wrap .page-share-btn {
	display: inline-flex !important;
	align-items: center; justify-content: center; gap: 6px;
	min-height: 40px !important;
	padding: 0 var(--wds-4) !important;
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: var(--wds-r-pill) !important;
	background: var(--wds-bg) !important;
	color: var(--wds-text) !important;
	box-shadow: none !important;
	text-decoration: none;
}
body.wds .page-share-btn:hover,
body.wds .content_wrap .page-share-btn:hover {
	border-color: var(--wds-primary) !important;
	color: var(--wds-primary) !important;
}

@media (max-width: 767px) {
	body.wds :is(.btn1, .btn.btn1),
	body.wds .content_wrap :is(.btn1, .btn.btn1) { min-height: 48px !important; }
}

/* ═══ 전후사진 케이스 상세 — 섹션 제목·하단 블록 (2026-09-02) ═══
   원장 지적 : 「제일 하단에는 엉뚱한 디자인이 적용되어 있어」

   실측해 보니 하단이 튄 게 아니라 **하단만 맞았다.**
     .bac-section__title  h2 8개 중 7개 — case.css 가 !important 로
        PC 22px · 모바일 17px 을 박아 DS 의 h2(26px, 우선순위 없음)를 이겼다.
        모바일 17px 은 본문(17px)과 같은 값이라 제목이 제목으로 안 읽힌다.
     .bac-seo__title      마지막 하나만 26px = DS 값. 그래서 혼자 커 보였다.
   → 여덟 개를 전부 DS h2 로 올린다. case.css 가 !important 라 여기도 !important.

   그리고 .bac-section--seo-bottom 만 흰 카드 + radius 14px 였다.
   14 는 시스템 스케일(8·12·16)에 없는 값이고 형제 섹션은 전부 배경·모서리가 없다.
   → 같은 모양으로 눕힌다. 좌우 20px 은 .bac-body 의 16px 위에 덧붙던 이중 여백이라 푼다.
   ══════════════════════════════════════════════════════ */

body.wds :is(.bac-section__title, .bac-seo__title),
body.wds .content_wrap :is(.bac-section__title, .bac-seo__title) {
	font-size: var(--wds-fs-h2) !important;
	line-height: var(--wds-lh-h2, 1.4) !important;
	font-weight: 700 !important;
	color: var(--wds-text) !important;
}

body.wds .bac-section--seo-bottom {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* 제목 장식도 한 모양으로 — bac-seo__title 도 좌측 바로 (2026-09-02)
   .bac-section__title 은 좌측 3x14 버건디 바(::before), .bac-seo__title 만 밑줄 2px 였다.
   크기를 26px 로 맞추고 나니 이 장식 차이만 남아 여전히 「하단만 다른 제목」으로 보인다.
   🚨 top:50% 는 두 줄로 접히는 제목에서 두 줄 가운데로 내려간다.
      0.7em(= line-height 1.4 의 절반)으로 잡아 항상 첫 줄에 붙인다. */
body.wds .bac-seo__title {
	position: relative;
	padding-left: 12px !important;
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}
body.wds .bac-seo__title::before {
	content: "";
	position: absolute; left: 0; top: 0.7em;
	transform: translateY(-50%);
	width: 3px; height: 14px;
	border-radius: 2px;
	background: var(--wds-primary);
}

/* ── rr-card 썸네일 풀블리드 (2026-09-02) ────────────────
   원장 지적 : 「이런 후기도 있어요 사진들이 좀 더 작고 일부 잘려 있어」

   🚨 이건 위의 `1/1 + contain` 을 되돌리라는 뜻이 아니다.
      그 규칙은 바로 앞의 지적(「대표사진도 전체가 아닌 일부만 보이고 있다」)을 고친 것이라
      cover 로 돌리면 잘림이 다시 살아난다. 잘라내지 말고 **키워야** 한다.

   실측 — 사진이 카드 안쪽 여백에 갇혀 있었다.
     모바일  카드 307 · padding 16 → 썸네일 273 (화면 375 의 73%)
     PC      카드 453 · padding 24 → 썸네일 403
   카드 패딩을 0 으로 두고 썸네일을 카드 폭 전체로 깔면 잘림 없이 커진다.
     모바일 273 → 305 · PC 403 → 451
   🚨 패딩 값이 폭마다 다르므로(16/24) 음수 마진 -16px 같은 고정값을 쓰면 PC 가 어긋난다.
   🚨 덤 — `.rr-card__body` 는 모바일에서 padding 이 `16px 0 0` 이라 카드 패딩에 얹혀
      살고 있었다. 카드 패딩을 0 으로 만들면 글자가 벽에 붙으므로 본문 패딩을 직접 준다. */
body.wds .rr-card {
	padding: 0 !important;
	overflow: hidden !important;
}
body.wds .rr-card .rr-card__thumb {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
}
body.wds .rr-card .rr-card__body {
	display: block !important;
	padding: 16px 18px 18px !important;
}

/* ═══ 시술 페이지 구조 정리 (2026-09-02 /breast/augmentation/ 실측) ═══
   원장 지적 「정렬과 글씨 크기 등 구조적으로 문제가 있는 부분」

   실측 — 본문(17px/1.8 · 52곳)과 폭(118/1200)·색은 이미 맞았고, 아래가 어긋났다
     ① h2 12개가 좌측인데 `.breast-bottom-links__title` 하나만 가운데 정렬
     ② `.dn-implant-panel__features li` radius 10px · padding 20px  ← 둘 다 스케일 밖
     ③ `.dn-sub-hero__intro` · `.dn-geo-content` 세로 여백 60px  ← 64 가 스케일 값
   🚨 시술 페이지는 문서형이다. 소개형(진료철학)과 달리 제목은 왼쪽으로 맞춘다. */

body.wds :is(.breast-bottom-links__title, .breast-related-posts__title) {
	text-align: left !important;
}
body.wds .dn-implant-panel__features li {
	border-radius: var(--wds-r-sm) !important;
	padding: var(--wds-4) !important;
}
body.wds :is(.dn-sub-hero__intro, .dn-geo-content) {
	padding-block: var(--wds-9) !important;
}
@media (max-width: 767px) {
	body.wds :is(.dn-sub-hero__intro, .dn-geo-content) { padding-block: var(--wds-7) !important; }
}

/* ═══ 시술 페이지 모바일 h2 통일 (2026-09-02 실측) ═══════
   /breast/augmentation/ 모바일에서 h2 가 네 가지였다 — 26 · 21 · 19 · 17.25px.
   원인 (둘 다 combined.min.css 의 `!important`)
     .dn-insight-section .dn-heading   clamp(1.4rem, 2.5vw, 2rem)  → 17.25px
     .dn-geo-content__block h2         19px
   🚨 combined.min.css 는 언어사이트와 공유라 손대지 않는다. 특이도를 올려 덮는다.
   🚨 `.dn-sub-hero__intro h2`(21px)는 그대로 둔다 — 히어로 아래 소개 문구라
      섹션 제목이 아니라 h3 역할로 시스템이 정한 값이다. */
body.wds .content_wrap :is(.dn-insight-section .dn-heading,
                           .dn-geo-content__block h2,
                           .dn-geo-content h2) {
	font-size: var(--wds-fs-h2) !important;
	line-height: var(--wds-lh-h2) !important;
	font-weight: var(--wds-fw-h2) !important;
}

/* ═══ 시술 페이지 h3 · 요약 박스 폭 (2026-09-02 실측) ═══════
   /breast/augmentation/ 모바일에서 h3 가 네 가지였다 — 21 · 18 · 17.25 · 16px.
     .dn-natural-results__heading      17.25px  (clamp 잔재)
     .dn-geo-content__block 안의 h3     16px     (클래스 없음)
     .dn-insight-card__title           18px     ← 카드 제목 역할값이라 유지
   🚨 카드 제목(18)은 역할이 다르므로 건드리지 않는다. 섹션 소제목만 h3 로 맞춘다.

   그리고 「한눈에 보기」 래퍼(.dn-geo-block)가 좌우 20px 을 더 물고 있어
   안의 카드가 295px — 같은 화면의 다른 블록(335)보다 좁았다.
   래퍼는 폭만 잡고, 안쪽 여백은 카드가 가진다. */

body.wds .content_wrap :is(.dn-natural-results__heading,
                           .dn-geo-content__block h3) {
	font-size: var(--wds-fs-h3) !important;
	line-height: var(--wds-lh-h3) !important;
	font-weight: var(--wds-fw-h3) !important;
}
body.wds .dn-geo-block { padding-inline: 0 !important; }

/* ═══ FAQ 컴포넌트 (§16) ═══════════════════════════════════
   /about/doctor/ 에 화면 FAQ 를 새로 넣으면서 정식 컴포넌트로 정의한다.
   기존 페이지들은 <details> 에 인라인 스타일(radius 6px·#e6e6e8)을 물고 있는데,
   그 값들도 이 규칙이 덮어 한 모양으로 모인다. */
body.wds .dn-faq__item {
	margin: 0 0 var(--wds-3) !important;
	padding: var(--wds-4) var(--wds-5) !important;
	background: var(--wds-bg) !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: var(--wds-r-sm) !important;
	box-shadow: none !important;
}
body.wds .dn-faq__q {
	font-size: var(--wds-fs-lead) !important;
	line-height: var(--wds-lh-lead) !important;
	font-weight: 600 !important;
	color: var(--wds-text) !important;
	cursor: pointer;
	list-style: none;
}
body.wds .dn-faq__q::-webkit-details-marker { display: none; }
body.wds .dn-faq__q::after {
	content: "+"; float: right; color: var(--wds-primary);
	font-weight: 700; margin-left: var(--wds-3);
}
body.wds .dn-faq__item[open] .dn-faq__q::after { content: "−"; }
body.wds .dn-faq__a {
	margin-top: var(--wds-3) !important;
	padding-top: var(--wds-3) !important;
	border-top: 1px solid var(--wds-border);
}
body.wds .dn-faq__a p {
	font-size: var(--wds-fs-body) !important;
	line-height: var(--wds-lh-body) !important;
	color: var(--wds-text-sub) !important;
	margin: 0 !important;
	max-width: var(--wds-measure) !important;
}
body.wds .dn-faq__title {
	font-size: var(--wds-fs-h2) !important;
	font-weight: var(--wds-fw-h2) !important;
	text-align: left !important;
	margin: 0 0 var(--wds-5) !important;
}
@media (max-width: 767px) {
	body.wds .dn-faq__item { padding: var(--wds-4) !important; }
	body.wds .dn-faq__q { font-size: var(--wds-fs-body) !important; }
}

/* 「한눈에 보기」 카드가 모바일에서 295px — 같은 화면의 다른 블록(335)보다 좁았다.
   래퍼(.dn-geo-block)의 여백은 이미 0 으로 풀었는데 카드 자신이 좌우 여백을 물고 있었다.
   카드는 그릇 폭을 그대로 쓰고, 안쪽 여백만 가진다. */
body.wds .dn-geo-block > .dn-geo-card {
	width: 100% !important;
	max-width: 100% !important;
	margin-inline: 0 !important;
}

/* ═══ 허브 h1 · h2 통일 (2026-09-02 실측) ═══════════════════
   원장 지적 「허브페이지들이 엉망 · 글씨크기와 정렬이 제각각」

   실측 (PC / 모바일)
     h1  /about/      34px·weight 300  /  20.5px·300
         /community/  35.7px·300       /  22.5px·300
         /breast/     44px·700         /  30px·700   ← 이것만 시스템 값
     🚨 모바일에서 두 허브의 h1(20.5·22.5)이 자기 페이지 h2(26)보다 작았다.
        제목 위계가 뒤집혀 있었다.

   원인 — 내가 h1 규칙에 `:not([class*="hero"] *)` 를 걸어 히어로를 제외했다.
   두 허브는 h1 이 히어로 안에 있어 규칙이 닿지 않았고 옛 값이 그대로 남았다.
   🚨 「제외」가 아니라 「역할값 지정」이 맞다. 색은 건드리지 않는다
      (배경 사진 위 흰 글씨를 지켜야 한다).
   🚨 상세글 제목(.cont_text_title · .read_title · .rr-title-row)은 별도 규격이라 제외. */
body.wds :is(.content_wrap, .cont_wrap) h1:not(.cont_text_title):not(.read_title *):not(.rr-title-row *) {
	font-size: var(--wds-fs-h1) !important;
	font-weight: var(--wds-fw-h1) !important;
	line-height: var(--wds-lh-h1) !important;
	letter-spacing: var(--wds-ls-tight);
}

/* h2 정렬 — /breast/ 만 가운데 14개·왼쪽 3개로 갈려 있었다.
   /about/ · /community/ 는 왼쪽으로 통일돼 있으므로 세 허브를 왼쪽으로 맞춘다.
   🚨 클래스가 있는 제목(진료철학의 prac_section_title 등)은 건드리지 않는다 —
      원장이 소개형 페이지는 가운데 정렬을 원했다. 클래스 없는 h2 만 대상. */
/* 2026-09-02 제거 — h2 를 강제로 왼쪽 정렬하던 규칙.
   특이도가 높아 뒤의 `text-align: inherit` 를 이겨, 가운데 섹션에서 제목만 왼쪽으로 튀었다. */

/* ═══ 버튼 높이 통일 v1 (2026-09-02 모바일 전수) ═══════════
   원장 지적 「버튼 디자인도 모두 V1으로 통일」

   모바일 실측 — 같은 성격의 버튼이 44 · 48 · 50px 세 높이로 갈려 있었다.
     /                        50h(13px 글자!) + 48h
     /about/                  44h
     /about/doctor/·practice/ 50h
     /about/guide/·location/  48h
     /community/beforeafter/  44h·40h·50h·48h  ← 한 페이지에 네 종류
   칩도 40 과 44 로 갈렸다.

   V1 규격
     Primary / Secondary : PC 50 · 모바일 48 · 글자 15 · radius 8
     Chip                : 40 (양쪽 동일) · 글자 13.5 · radius 999
   🚨 카드형 링크(높이 90~360)는 버튼이 아니다. 목록에 넣지 않는다.
   🚨 터치 타깃 44px 하한 규칙이 있어 칩을 40 으로 두려면 여기서 높이를 못 박아야 한다. */

body.wds .content_wrap :is(
	.wds-btn, .dn-btn, .head-cta-btn, .dn-kakao-cta__btn, .dn-guide-closing__btn,
	.breast-hub__cta-btn, .wune-ba-cta__btn, .wune-ba-cta__link, .wune-ba-cta__b,
	.dn-hero__cta-btn, .minutes-bottom-cta__btn, .beforeafter-bottom-cta__btn,
	.dn-loc-cta__btn, .dn-loc-map-nav__btn, .prac_cta_btn, .cert_cta_btn,
	.about-hub__channel, .dn-outline-btn, .dn-view-more-btn, .ev_apply_btn,
	.form_submit_btn, .bac-cta__btn, .bac-back__link, .rr-cta-card__btn,
	.rr-consult-cta__btn, .dn-doctor-intro__ytlink, .wune-consult__btn
) {
	min-height: 50px !important;
	height: auto !important;
	font-size: var(--wds-fs-sm) !important;
	font-weight: 600 !important;
	border-radius: var(--wds-r-sm) !important;
}
body.wds .content_wrap :is(
	.wds-chip, .wunetv-cat-btn, .dn-implant-tab, .bac-angle-tab,
	.guide-share-btn, .page-share-btn, .rr-share-btn,
	.modal_open, .form_policy_btn, .blog-pillar-btn
) {
	min-height: 40px !important;
	height: 40px !important;
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	border-radius: var(--wds-r-pill) !important;
}
@media (max-width: 767px) {
	body.wds .content_wrap :is(
		.wds-btn, .dn-btn, .head-cta-btn, .dn-kakao-cta__btn, .dn-guide-closing__btn,
		.breast-hub__cta-btn, .wune-ba-cta__btn, .wune-ba-cta__link, .wune-ba-cta__b,
		.dn-hero__cta-btn, .minutes-bottom-cta__btn, .beforeafter-bottom-cta__btn,
		.dn-loc-cta__btn, .dn-loc-map-nav__btn, .prac_cta_btn, .cert_cta_btn,
		.about-hub__channel, .dn-outline-btn, .dn-view-more-btn, .ev_apply_btn,
		.form_submit_btn, .bac-cta__btn, .bac-back__link, .rr-cta-card__btn,
		.rr-consult-cta__btn, .dn-doctor-intro__ytlink, .wune-consult__btn
	) {
		min-height: 48px !important;
		font-size: var(--wds-fs-sm) !important;
	}
}

/* 보형물 비교 탭 — 칩인데 폭이 600px 씩이었다(화면 절반).
   칩은 글자 길이만큼만 차지한다. flex 로 늘어나지 않게 못 박는다. */
body.wds .dn-implant-tabs {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wds-2) !important;
}
body.wds .dn-implant-tab {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
}

/* ═══ 카드 모서리 각지게 통일 (원장 지시 2026-09-02) ═══════
   실측 — 카드·박스 모서리가 8 · 10 · 12 · 16 · 20px 다섯 가지였다.
   사진이 든 카드는 「사진은 사각형」 지시 때문에 이미 각져 있었고,
   글만 있는 카드만 둥글어 페이지마다 갈려 보였다.
   → 전부 각지게 맞춘다. 둥근 것은 버튼(8)과 칩(999)만 남는다.
   🚨 버튼·칩은 이 규칙 뒤에서 다시 못 박는다 — 클래스 이름만으로 거르면
      `.medi_menu_list > li`(알약 메뉴)처럼 이름에 btn 이 없는 칩이 각져 버린다. */
body.wds .content_wrap :is(
	.dn-insight-card, .rr-card, .breast-hub__card, .cm-hub__rv-card,
	.about-hub__value-card, .about-hub__info-card, .about-hub__doctor-card,
	.about-hub__why-summary, .about-hub__answer, .cm-hub__answer,
	.wune-related__link, .cont_gallery_list_box, .dn-geo-content__block,
	.dn-geo-block, .dn-geo-card, .dn-kakao-cta, .breast-hub__cta,
	.dn-implant-method, .list_wrap, .cont_list, .shorts_slide,
	.dn-copy-media__image, .casebook-card, .casebook-finder,
	.ba-intro, .wune-ba-cta, .beforeafter-faq, .rr-faq, .min-tldr,
	.dn-faq__item, .rr-related, .rr-cta-card, .rr-consult-cta,
	.breast-bottom-card, .dn-min-card, .prac_card, .guide-card,
	.cert_benefit_card, .dn-tenets__item, .wb-note, .answer-summary,
	.breast-hub__definition, .guide-eeat
) {
	border-radius: 0 !important;
}

/* 🚨 버튼·칩은 위 규칙 뒤에 와야 이긴다 */
body.wds .content_wrap :is(
	.wds-btn, .dn-btn, .head-cta-btn, .dn-kakao-cta__btn, .dn-guide-closing__btn,
	.breast-hub__cta-btn, .wune-ba-cta__btn, .wune-ba-cta__link, .wune-ba-cta__b,
	.dn-hero__cta-btn, .minutes-bottom-cta__btn, .beforeafter-bottom-cta__btn,
	.dn-loc-cta__btn, .dn-loc-map-nav__btn, .prac_cta_btn, .cert_cta_btn,
	.about-hub__channel, .dn-outline-btn, .dn-view-more-btn, .ev_apply_btn,
	.form_submit_btn, .bac-cta__btn, .bac-back__link, .rr-cta-card__btn,
	.rr-consult-cta__btn, .dn-doctor-intro__ytlink, .wune-consult__btn
) { border-radius: var(--wds-r-sm) !important; }

body.wds .content_wrap :is(
	.wds-chip, .wunetv-cat-btn, .dn-implant-tab, .bac-angle-tab,
	.guide-share-btn, .page-share-btn, .rr-share-btn,
	.modal_open, .form_policy_btn, .blog-pillar-btn
) { border-radius: var(--wds-r-pill) !important; }

body.wds :is(.medi_menu_list, .before_menu_list, .dn-shorts__tabs, .dn-labelle__tabs) > li,
body.wds :is(.medi_menu_list_wrap, [class*="labelle"], [class*="shorts"]) ul > li {
	border-radius: var(--wds-r-pill) !important;
}

/* ═══ 하단 카드 버튼 · 구 팔레트 잔존 (2026-09-02 실측) ═══
   원장 지적 「이거 버튼도 달라 · 사이즈도 배치도 이상해」

   실측 — `.breast-bottom-card__button` 이 버튼 목록에서 빠져 있었다.
     높이 44 (기준 50) · radius 999 (기준 8) · 배경 #5C1A24 (구 팔레트, 시스템은 #8B1538)
   같은 구 팔레트가 `.dn-sub-hero`(히어로 띠) 5곳 · `.dn-hero__image-wrap` 1곳에 남아 있었다.
   🚨 히어로 띠는 그 위 글씨가 흰색이다. 밝은 색으로 바꾸면 글자가 사라진다 →
      어두운 계열(primary-dark)로만 옮긴다.
   🚨 `.casebook-card__cat` 은 34h·radius 20 — 칩도 버튼도 아닌 값이었다. 칩으로. */

body.wds .content_wrap .breast-bottom-card__button {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	min-height: 50px !important; height: auto !important;
	padding: 0 var(--wds-6) !important;
	font-size: var(--wds-fs-sm) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	border-radius: var(--wds-r-sm) !important;
	background: var(--wds-primary) !important;
	border: 1.5px solid var(--wds-primary) !important;
	color: var(--wds-text-invert) !important;
}
@media (max-width: 767px) {
	body.wds .content_wrap .breast-bottom-card__button { min-height: 48px !important; }
}

body.wds .content_wrap .casebook-card__cat {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	height: 40px !important; min-height: 40px !important;
	padding: 0 var(--wds-4) !important;
	font-size: var(--wds-fs-label) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	border-radius: var(--wds-r-pill) !important;
}

/* 구 팔레트 #5C1A24 → 시스템 어두운 버건디 (대비 유지) */
body.wds :is(.dn-sub-hero, .dn-hero__image-wrap) {
	background-color: var(--wds-primary-dark) !important;
}

/* ═══ 09-02 되돌림 + 카드 높이 (원장 지적) ═══════════════
   ① 「수술 전 확인하면 좋은 실제 자료」 제목이 혼자 왼쪽이었다.
      🚨 내가 만든 문제다 — 다른 h2 와 맞추려고 이 제목만 왼쪽으로 돌렸는데,
         이 섹션은 헤더 전체(아이브로우·설명)가 가운데라 제목만 튀었다.
         블록 안에서의 정렬은 그 블록을 따른다. 되돌린다.
   ② 「함께 보면 좋은 페이지」 첫 카드(가슴재수술)만 높이 122px, 나머지 112px.
      한 줄로 늘어선 카드는 높이가 같아야 한다. */
body.wds .content_wrap :is(.breast-bottom-links__title, .breast-related-posts__title) {
	text-align: inherit !important;
}
body.wds .wune-related__grid {
	align-items: stretch !important;
}
body.wds :is(.wune-related__grid > li, .wune-related__link) {
	height: 100% !important;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
}

/* ═══ h2 정렬 — 블록을 따른다 (2026-09-02 원장 스크린샷) ═══
   🚨 내가 넣은 `h2:not([class]) { text-align: left }` 가 문맥을 무시했다.
      /about/practice/ 실측 — 아이브로우(가운데)·밑줄(가운데)은 그대로인데
      제목만 왼쪽으로 빠져 「윈느의 핵심 원칙」·「자주 묻는 질문」·「한눈에 보기」가
      전부 가운데에서 어긋났다. 「한눈에 보기」는 제목 왼쪽 / 본문 가운데로 갈렸다.

   정렬은 태그가 아니라 그 블록이 정한다. h2 는 담긴 블록을 따른다.
   → 가운데 섹션 안에서는 가운데, 왼쪽 섹션 안에서는 왼쪽으로 저절로 맞는다. */
body.wds :is(.content_wrap, .cont_wrap) h2:not([class]):not([class*="hero"] *) {
	text-align: inherit !important;
}

/* 문단도 블록을 따른다 — 한 섹션 안에서 제목과 본문의 정렬이 갈리지 않게.
   실측 : /community/realmodel/ · /reservation/ · /about/practice/ 에서
          h2 는 왼쪽인데 안내 문단만 가운데였다.
   🚨 클래스가 있는 문단(히어로 소개문·섹션 리드 등)은 의도된 정렬이므로 건드리지 않는다. */
body.wds :is(.content_wrap, .cont_wrap) p:not([class]):not([class*="hero"] *):not(td):not(th) {
	text-align: inherit !important;
}

/* ═══ 카드 하단 정렬 · 필터 좌우 균형 (2026-09-02 원장 스크린샷) ═══
   ① 리얼리뷰 카드 — 카드 높이는 같은데(579px) 날짜가 509·509·537 로 어긋났다.
      제목이 3줄인 카드만 아래로 밀린 것. 날짜는 카드 바닥에 붙인다.
   ② 전후사진 필터 — 열이 828px / 276px 로 불균등하고,
      「보형물」·「수술 후 사이즈」가 전폭을 차지해 오른쪽 절반이 비어 보였다.
      여섯 묶음을 2열에 고르게 흘린다. */

body.wds :is(.rr-card, .cm-hub__rv-card, .casebook-card) {
	display: flex !important;
	flex-direction: column;
}
body.wds :is(.rr-card__body, .rr-card__inner) {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
}
body.wds :is(.rr-card__date, .rr-card__meta, .casebook-card__date) {
	margin-top: auto !important;
}

body.wds .casebook-finder__row {
	grid-template-columns: 1fr 1fr !important;
	gap: var(--wds-5) var(--wds-7) !important;
}
body.wds .casebook-finder__row > .casebook-finder__group {
	grid-column: auto !important;
}
@media (max-width: 767px) {
	body.wds .casebook-finder__row { grid-template-columns: 1fr !important; }
}

/* 카드 날짜를 바닥에 붙인다 — 제목이 2줄/3줄로 갈려 날짜 줄이 501·501·529 로 어긋났다.
   🚨 `.rr-card__body` 의 display 를 flex 로 못 바꾸면 margin-top:auto 가 안 먹는다.
      앞 규칙(0,2,1)이 밀려서 block 이 남아 있었다 → 부모를 붙여 특이도를 올린다. */
body.wds .content_wrap .rr-card > .rr-card__body,
body.wds .content_wrap .cm-hub__rv-card > [class$="__body"] {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
}
body.wds .content_wrap .rr-card > .rr-card__body > .rr-card__date,
body.wds .content_wrap .rr-card > .rr-card__body > time {
	margin-top: auto !important;
	padding-top: var(--wds-3);
}

/* TextLink 컴포넌트 (§12 네 번째 종류) — 「더보기」류 보조 이동.
   실측 : 리얼리뷰에서 17px/400 맨 텍스트라 링크로도 버튼으로도 안 보였다.
   버튼처럼 무겁지 않게, 그러나 본문과는 구분되게. */
body.wds .content_wrap .wds-textlink {
	display: inline-flex !important;
	align-items: center; gap: var(--wds-2);
	font-size: var(--wds-fs-sm) !important;
	font-weight: 600 !important;
	color: var(--wds-primary) !important;
	text-decoration: none !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}
body.wds .content_wrap .wds-textlink::after {
	content: "→"; font-weight: 600;
}
body.wds .content_wrap .wds-textlink:hover { text-decoration: underline !important; text-underline-offset: 3px; }
body.wds .content_wrap .rr-more { margin: var(--wds-4) 0 0 !important; }

/* 버튼 폭 — PC 에서는 글자 길이만큼. 전폭 버튼은 모바일에서만.
   실측 : 리얼리뷰 「후기 영상 더 보기」가 PC 에서 1200px 전폭으로 늘어났다. */
body.wds .content_wrap .wds-btn { width: auto !important; align-self: flex-start; }
@media (max-width: 767px) {
	body.wds .content_wrap .wds-btn { width: 100% !important; align-self: stretch; }
}

/* 숏츠 카드 제목 — 가운데였다. 바로 위 유튜브 썸네일 목록(.wunetv-thumb-title)은 왼쪽이라
   같은 화면에서 두 카드 목록의 글줄 시작점이 달라 보였다. 왼쪽으로 맞춘다.
   (원장 지시 2026-09-02 — 숏츠 제목만 왼쪽) */
body.wds .content_wrap .shorts_title {
	text-align: left !important;
}

/* ═══ 허브 히어로 높이 — 블로그 기준으로 (원장 지시 2026-09-02) ═══
   실측 (페이지 최상단 → h1 까지)
     블로그 목록 166px  ← 기준
     /about/     306px  ← 히어로 패딩 96/96 · 「About」 라벨 블록이 164px
     /breast/    358px 높이 · /community/ 239px
   🚨 라벨(About)이 164px 을 차지했다 — 13.5px 글자 한 줄인데 위아래 여백이 컸다.
      패딩을 48/48 로 줄이고 라벨 여백을 스케일 값으로 잡는다. */
body.wds .content_wrap :is(.about-hub__hero, .cm-hub__hero, [class*="hub__hero"]) {
	/* 🚨 48 로 줄였더니 글씨가 상단에 붙었다(원장 지적).
	      블로그·/breast/ 와 같은 96 으로 맞춘다. 높이는 라벨 여백 정리로 이미 줄었다. */
	padding-block: var(--wds-11) var(--wds-9) !important;
}
body.wds .content_wrap :is(.about-hub__hero, .cm-hub__hero) :is(.about-hub__eyebrow, [class*="eyebrow"], [class*="label"]) {
	margin: 0 0 var(--wds-3) !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}
@media (max-width: 767px) {
	body.wds .content_wrap :is(.about-hub__hero, .cm-hub__hero, [class*="hub__hero"]) {
		padding-block: var(--wds-9) var(--wds-8) !important;
	}
}

/* ═══ 섹션 머리 간격 · 주제 경계 (원장 지적 2026-09-02) ═══
   「LOCATION~ 아래 소제목이 너무 떨어져 있어」 · 「주제별로 경계가 없어」

   실측 (/about/ 7개 섹션 전부 동일)
     라벨(SERVICES & HUB LINKS) → 제목 간격 80px
       원인 : 제목에 `margin-top: 80px` 이 그대로 붙어 있다.
              라벨과 제목은 한 묶음이라 붙어야 하는데, 섹션 간 간격이 제목에 걸려 있었다.
     섹션 : 테두리 0 · 배경 없음 → 주제가 바뀌어도 경계가 보이지 않는다.
            상하 패딩도 56/16 으로 비대칭이었다.

   → 간격은 「섹션」이 갖고, 라벨과 제목은 붙인다. 섹션 사이에 실선 하나. */

/* ① 라벨 바로 뒤 제목은 붙인다 */
body.wds .content_wrap :is([class*="section-label"], [class*="__eyebrow"], [class*="__kicker"]) {
	margin: 0 0 var(--wds-3) !important;
	line-height: 1.4 !important;
}
body.wds .content_wrap :is([class*="section-label"], [class*="__eyebrow"], [class*="__kicker"]) + :is(h1,h2,h3) {
	margin-top: 0 !important;
}

/* ② 주제 경계 — 섹션 사이 실선 하나, 상하 여백은 대칭 */
body.wds .content_wrap :is(.about-hub__section, .cm-hub__section, .breast-hub__section) {
	padding-block: var(--wds-9) !important;
	border-top: 1px solid var(--wds-border) !important;
}
body.wds .content_wrap :is(.about-hub__section, .cm-hub__section, .breast-hub__section):first-of-type {
	border-top: 0 !important;
}
@media (max-width: 767px) {
	body.wds .content_wrap :is(.about-hub__section, .cm-hub__section, .breast-hub__section) {
		padding-block: var(--wds-8) !important;
	}
}

/* ═══ FAQ 전 페이지 통일 (원장 지시 2026-09-02) ═══════════
   「자주 묻는 질문은 우리가 적용하기로 한 디자인이 아닌데 · 페이지별로 다르게 하지 말고」

   실측 — 여섯 가지였다
     가슴확대       흰배경 radius 6  패딩 16/22 · 질문 17px/400 순수검정
     가슴성형가이드  흰배경 radius 8  패딩 14/18 · 질문 17px/400
     의료진         흰배경 radius 0  패딩 16/24 · 질문 17px/400
     병원선택가이드  배경없음 패딩 0   · 질문 19px/600
     진료철학       배경·테두리 없음   · 질문 19px/600
     리얼리뷰       배경없음 패딩 24/0 · 질문 17px/400

   → §16 FAQ 컴포넌트 하나로. 상자는 흰 배경 + 1px 테두리 + radius 0(사각),
     질문 19px/600 검정, 답변 본문 크기 회색, 펼침 표시는 +/−.
   🚨 마크업이 <details>·<div>·<h3> 로 제각각이라 선택자를 넓게 잡는다.
   🚨 인라인 style 로 박힌 값들을 이겨야 하므로 !important 를 쓴다. */

/* ── 상자 ── */
body.wds .content_wrap :is(
	.dn-faq__item, .rr-faq__item, .beforeafter-faq__item, .cert_faq_item,
	.dn-geo-faq details, [class*="faq"] details, details[class*="faq"]
),
body.wds .content_wrap :is(.dn-geo-content__block, .dn-geo-faq, [class*="faq"]) > details {
	display: block !important;
	margin: 0 0 var(--wds-3) !important;
	padding: var(--wds-4) var(--wds-5) !important;
	background: var(--wds-bg) !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* ── 질문 ── */
body.wds .content_wrap :is(
	.dn-faq__q, .rr-faq__q, .cert_faq_q, summary,
	.dn-faq__item > h3, .rr-faq__item > h3, [class*="faq"] > h3
) {
	display: block !important;
	font-size: var(--wds-fs-lead) !important;
	line-height: var(--wds-lh-lead) !important;
	font-weight: 600 !important;
	color: var(--wds-text) !important;
	cursor: pointer;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
	padding-right: var(--wds-6) !important;
}
body.wds .content_wrap summary::-webkit-details-marker { display: none !important; }
body.wds .content_wrap :is(.dn-faq__q, .rr-faq__q, .cert_faq_q, summary)::after {
	content: "+"; position: absolute; right: 0; top: 0;
	color: var(--wds-primary); font-weight: 700;
}
body.wds .content_wrap details[open] > summary::after,
body.wds .content_wrap .dn-faq__item[open] .dn-faq__q::after { content: "−"; }
/* ── 답변 ── */
body.wds .content_wrap :is(
	.dn-faq__a, .rr-faq__a, .cert_faq_a,
	details > div, details > p
) {
	margin: var(--wds-3) 0 0 !important;
	padding: var(--wds-3) 0 0 !important;
	border-top: 1px solid var(--wds-border) !important;
}
body.wds .content_wrap :is(.dn-faq__a, .rr-faq__a, .cert_faq_a, details > div) :is(p, li) {
	font-size: var(--wds-fs-body) !important;
	line-height: var(--wds-lh-body) !important;
	color: var(--wds-text-sub) !important;
	max-width: var(--wds-measure) !important;
}
@media (max-width: 767px) {
	body.wds .content_wrap :is(.dn-faq__item, .rr-faq__item, [class*="faq"] details) {
		padding: var(--wds-4) !important;
	}
	body.wds .content_wrap :is(.dn-faq__q, .rr-faq__q, .cert_faq_q, summary) {
		font-size: var(--wds-fs-body) !important;
	}
}

/* 클래스 없는 <details> FAQ 도 같은 상자로 — /breast/ 는 인라인 style 로
   radius 8 · 패딩 14/18 이 박혀 있어 앞 규칙이 닿지 않았다.
   🚨 이 사이트에서 <details> 는 FAQ 에만 쓰인다. 본문 내 모든 details 를 대상으로 한다. */
body.wds .content_wrap details {
	display: block !important;
	margin: 0 0 var(--wds-3) !important;
	padding: var(--wds-4) var(--wds-5) !important;
	background: var(--wds-bg) !important;
	border: 1px solid var(--wds-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
body.wds .content_wrap details > summary {
	font-size: var(--wds-fs-lead) !important;
	line-height: var(--wds-lh-lead) !important;
	font-weight: 600 !important;
	color: var(--wds-text) !important;
}
@media (max-width: 767px) {
	body.wds .content_wrap details { padding: var(--wds-4) !important; }
	body.wds .content_wrap details > summary { font-size: var(--wds-fs-body) !important; }
}

/* ═══ 넓은 화면에서 콘텐츠가 화면 전체를 차지하던 문제 (원장 지적 2026-09-02) ═══
   「문제는 화면 전체를 차지하게 되어 있다는거야 · 표도 그렇고 유튜브 화면도 그렇고」

   실측 (1920px) — 33개 요소가 폭 1913px 이었다.
     /breast/ 는 콘텐츠가 컨테이너 없이 `.cont_wrap`(1915) 직계에 놓여 있다.
       .breast-hub__table-wrap ×10 · __grid · __cta ×3 · __process — 전부 maxWidth none
       그 안의 표(1913) · 유튜브(1849) · FAQ · h2 가 화면 끝까지 늘어났다.
     폭을 지키는 건 `.breast-hub`(1280) 하나뿐이었다.
   🚨 1440 에서는 티가 안 났다(1435 ≈ 1200+거터). 넓은 모니터에서만 드러난다.
      **폭 검사는 반드시 1920 에서 해야 한다.** */
body.wds .content_wrap :is(
	.breast-hub__grid, .breast-hub__table-wrap, .breast-hub__cta,
	.breast-hub__process, .breast-hub__steps, .breast-hub__subtopics,
	.dn-geo-content__block, .dn-insight-section, .dn-natural-results,
	.dn-copy-media, .main_wunetv_top, .dn-related-blog
) {
	width: 100%;
	max-width: calc(var(--wds-container) + var(--wds-gutter) * 2) !important;
	margin-inline: auto !important;
	padding-inline: var(--wds-gutter) !important;
	box-sizing: border-box;
}
/* 안쪽 컨테이너가 겹치면 거터가 두 번 붙는다 */
body.wds .content_wrap :is(.cont, .w1280, .breast-hub)
        :is(.breast-hub__grid, .breast-hub__table-wrap, .breast-hub__cta,
            .breast-hub__process, .breast-hub__steps, .dn-geo-content__block) {
	max-width: 100% !important;
	padding-inline: 0 !important;
}
/* 영상은 읽기 폭보다 넓되 컨테이너 안에서 (16:9 유지) */
body.wds .content_wrap :is(iframe, video) {
	max-width: 100% !important;
}

/* 전폭으로 남아 있던 「글자」들 — 띠(배경 사진)는 전폭이 맞지만 그 안의 글은 컨테이너를 지켜야 한다.
   실측(1920) : .dn-page-hero__label · .wds-cta__title · .wds-cta__actions
                .breast-bottom-links · .dn-hero__text 가 1913px 였다. */
body.wds .content_wrap :is(
	.dn-page-hero__label, .dn-page-hero__title, .dn-page-hero__sub,
	.dn-hero__text, .dn-sub-hero__inner,
	.wds-cta__title, .wds-cta__sub, .wds-cta__actions,
	.breast-bottom-links__container, .breast-related-posts__container
) {
	width: 100%;
	max-width: var(--wds-container) !important;
	margin-inline: auto !important;
	box-sizing: border-box;
}
body.wds .content_wrap .breast-bottom-links {
	width: 100%;
	max-width: calc(var(--wds-container) + var(--wds-gutter) * 2) !important;
	margin-inline: auto !important;
	padding-inline: var(--wds-gutter) !important;
	box-sizing: border-box;
}

/* ═══ 홈 가로 슬라이더 시작점 (2026-09-02 1920px 실측) ═══
   컨테이너 기준선 358 인데 슬라이더 첫 카드가
     시술 그리드 0 · 후기 슬라이더 168 · 숏츠 561 · 카드 슬라이더 358(유일하게 맞음)
   좌우로 넘겨 보는 슬라이더라 「띠」는 전폭이 맞지만,
   첫 카드는 본문 글줄과 같은 선에서 시작해야 한다.
   🚨 넘겨보기가 잘리지 않도록 폭은 그대로 두고 안쪽 여백으로만 민다. */
body.wds .content_wrap :is(.dn-procedures__grid, .dn-testimonials__track) {
	padding-inline: max(var(--wds-gutter), calc((100vw - var(--wds-container)) / 2)) !important;
	box-sizing: border-box;
}
/* 바깥 겹은 여백을 갖지 않는다 — 두 겹에 주면 360 이 두 번 붙는다 */
body.wds .content_wrap :is(.dn-testimonials__slider, .dn-cards__slider-wrap) {
	padding-inline: 0 !important;
	margin-inline: 0 !important;
}
/* 스크롤바는 슬라이더가 아니다 */
body.wds .content_wrap :is(.dn-cards__scrollbar, .dn-cards__scrollbar-track, .dn-cards__scrollbar-thumb) {
	padding-inline: 0 !important;
}
@media (max-width: 767px) {
	body.wds .content_wrap :is(.dn-procedures__grid, .dn-testimonials__track) {
		padding-inline: var(--wds-gutter) !important;
	}
}

/* ═══ 박스 안쪽 여백 통일 (원장 지적 2026-09-02) ═══════════
   「회색박스 안에 여백 없이 답답하고 위아래 여백이 달라」
   「박스안의 내용은 좌우 상하 여백을 고려해서 배치」

   실측 (/breast/ .dn-geo-block, 1920px)
     박스 padding 24px **0** → 글이 좌우 벽에 붙었다
     박스 위 24 / 아래 24 인데 안의 h2 가 margin-top 80 → 위아래가 달라 보였다
     회색 박스(#F7F7F8) 안에 같은 회색 카드가 겹쳐 경계가 사라졌다

   규칙 — 박스는 사방 같은 안쪽 여백을 갖는다(§7).
     PC 32px · 모바일 20px. 첫 자식의 위 여백과 마지막 자식의 아래 여백은 0.
   🚨 박스 안 첫 요소의 margin-top 을 0 으로 만들지 않으면 안쪽 여백이 두 번 붙는다. */

body.wds .content_wrap :is(
	.dn-geo-block, .dn-geo-card, .dn-geo-content__block, .answer-summary,
	.guide-eeat, .breast-hub__definition, .wb-note, .min-tldr, .dn-min-card,
	.ba-intro, .wune-ba-cta, .casebook-finder, .about-hub__answer,
	.cm-hub__answer, .about-hub__why-summary, .dn-tenets__item,
	.rr-cta-card, .rr-consult-cta, .dn-faq__item, .rr-faq__item
) {
	padding: var(--wds-6) !important;
	box-sizing: border-box;
}
/* 박스 안 첫/마지막 요소의 바깥 여백은 없앤다 — 안쪽 여백이 두 번 붙지 않게 */
body.wds .content_wrap :is(
	.dn-geo-block, .dn-geo-card, .dn-geo-content__block, .answer-summary,
	.guide-eeat, .breast-hub__definition, .wb-note, .min-tldr, .dn-min-card,
	.ba-intro, .wune-ba-cta, .casebook-finder, .about-hub__answer,
	.cm-hub__answer, .about-hub__why-summary, .dn-tenets__item,
	.rr-cta-card, .rr-consult-cta
) > :first-child { margin-top: 0 !important; }
body.wds .content_wrap :is(
	.dn-geo-block, .dn-geo-card, .dn-geo-content__block, .answer-summary,
	.guide-eeat, .breast-hub__definition, .wb-note, .min-tldr, .dn-min-card,
	.ba-intro, .wune-ba-cta, .casebook-finder, .about-hub__answer,
	.cm-hub__answer, .about-hub__why-summary, .dn-tenets__item,
	.rr-cta-card, .rr-consult-cta
) > :last-child { margin-bottom: 0 !important; }

/* 같은 색 박스가 겹치면 경계가 사라진다 — 안쪽 것은 배경을 비운다 */
body.wds .content_wrap :is(.dn-geo-block, .guide-eeat, .min-tldr)
        :is(.dn-geo-card, .answer-summary, .dn-geo-content__block) {
	background: transparent !important;
	padding-inline: 0 !important;
}

@media (max-width: 767px) {
	body.wds .content_wrap :is(
		.dn-geo-block, .dn-geo-card, .dn-geo-content__block, .answer-summary,
		.guide-eeat, .breast-hub__definition, .wb-note, .min-tldr, .dn-min-card,
		.ba-intro, .wune-ba-cta, .casebook-finder, .about-hub__answer,
		.cm-hub__answer, .about-hub__why-summary, .dn-tenets__item,
		.rr-cta-card, .rr-consult-cta, .dn-faq__item, .rr-faq__item
	) { padding: var(--wds-5) !important; }
}

/* 박스 안의 h2 는 섹션 간격(margin-top 80)을 갖지 않는다.
   실측 : .dn-geo-block 안 h2 가 mt80 이라 박스 위(24)와 아래(24)가 달라 보였다. */
body.wds .content_wrap :is(
	.dn-geo-block, .dn-geo-card, .dn-geo-content__block, .answer-summary,
	.guide-eeat, .min-tldr, .ba-intro, .wune-ba-cta, .casebook-finder,
	.about-hub__answer, .cm-hub__answer, .rr-cta-card, .rr-consult-cta
) :is(h2, h3, h4) {
	margin-top: 0 !important;
}
body.wds .content_wrap :is(
	.dn-geo-block, .dn-geo-card, .dn-geo-content__block, .answer-summary,
	.guide-eeat, .min-tldr, .ba-intro, .wune-ba-cta, .casebook-finder,
	.about-hub__answer, .cm-hub__answer, .rr-cta-card, .rr-consult-cta
) :is(h2, h3, h4) ~ :is(h2, h3, h4) {
	margin-top: var(--wds-7) !important;
}

/* 박스 마지막 요소의 아래 여백 — /about/ 33~49, /breast/ 32~48 로 위아래가 달랐다.
   🚨 `> :last-child` 만으로는 부족하다. 마지막 자식이 <div> 래퍼면 그 안의
      마지막 문단이 자기 margin-bottom 을 들고 있어 아래가 두꺼워진다. */
body.wds .content_wrap :is(
	.dn-geo-block, .dn-geo-card, .dn-geo-content__block, .answer-summary,
	.guide-eeat, .breast-hub__definition, .wb-note, .min-tldr, .dn-min-card,
	.ba-intro, .wune-ba-cta, .casebook-finder, .about-hub__answer,
	.cm-hub__answer, .about-hub__why-summary, .rr-cta-card, .rr-consult-cta
) > :last-child > :last-child,
body.wds .content_wrap :is(
	.dn-geo-block, .dn-geo-card, .dn-geo-content__block, .answer-summary,
	.guide-eeat, .breast-hub__definition, .wb-note, .min-tldr, .dn-min-card,
	.ba-intro, .wune-ba-cta, .casebook-finder, .about-hub__answer,
	.cm-hub__answer, .about-hub__why-summary, .rr-cta-card, .rr-consult-cta
) > :last-child > :last-child > :last-child {
	margin-bottom: 0 !important;
}

/* 박스 안 마지막 문단의 아래 여백 — 박스 패딩 32 + 문단 margin 16 = 48 이 되어
   위(32)와 아래(48)가 달랐다. 마지막 요소는 자기 여백을 갖지 않는다.
   🚨 `> :last-child` 로는 <p> 가 안 잡히는 구조가 있다(중간 래퍼 없이 직계인데도
      다른 규칙의 margin 이 이긴다). 태그까지 지정해 확실히 0 으로. */
body.wds .content_wrap :is(
	.dn-geo-block, .dn-geo-card, .dn-geo-content__block, .answer-summary,
	.guide-eeat, .breast-hub__definition, .wb-note, .min-tldr, .dn-min-card,
	.ba-intro, .wune-ba-cta, .casebook-finder, .about-hub__answer,
	.cm-hub__answer, .about-hub__why-summary, .rr-cta-card, .rr-consult-cta,
	.dn-faq__item, .rr-faq__item
) > :is(p, ul, ol, dl, div, table, h2, h3, h4):last-child {
	margin-bottom: 0 !important;
}

/* ── 텍스트 링크 화살표 = SVG 아이콘 (2026-09-02) ────────
   감사 권고 : 「화살표는 SVG 아이콘으로 교체」.
   글자 「→」는 폰트마다 굵기·높이·기준선이 달라 링크마다 다르게 보인다.
   DS 텍스트 링크는 이미 inline-flex + gap:6px 이라 그쪽은 margin 을 0 으로 둔다. */
.wds-ico-arrow { flex: none; width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; }
body.wds :is(.cm-hub__more, .ev_viewmore, .dn-mobile-viewall a, .casebook-card__more) .wds-ico-arrow { margin-left: 0; }

/* ═══ 표 열 균형 · 박스 안 글 정렬 (원장 지적 2026-09-02) ═══
   ① 「박스 안에 있는 표들 대칭이 아니야」
      실측(1920) — table-layout:auto 라 열이 내용 길이대로 늘어났다
        120 / 405 / 672 · 163 / 462 / 571 · 196 / 441 / 559
      첫 열(구분)은 좁고 마지막 열만 과하게 넓다.
      → 라벨 열은 고정, 나머지는 균등. `table-layout: fixed`.
   ② 「한눈에 보기의 내용이 좌측으로 몰려 있어」
      박스는 1200 인데 안의 글이 왼쪽에만 붙어 오른쪽이 비었다.
      → 박스 안 글은 읽기 폭(840)을 쓰되 박스 안에서 가운데로 놓는다. */

body.wds .content_wrap table {
	table-layout: fixed !important;
	width: 100% !important;
}
/* 첫 열은 라벨이라 좁게 고정, 나머지는 균등 분할 */
body.wds .content_wrap table :is(thead, tr:first-child) :is(th, td):first-child {
	width: 18% !important;
}
body.wds .content_wrap table :is(th, td) {
	word-break: keep-all;
	overflow-wrap: anywhere;
	vertical-align: top;
}

/* 박스 안 글이 왼쪽에만 몰리지 않게 — 읽기 폭을 박스 가운데에 둔다 */
/* 🚨 글만 가운데로 밀면 제목(왼쪽)과 어긋난다 — 이미 한 번 지적받은 증상이다.
      박스를 읽기 폭으로 좁혀 제목·본문이 같은 선에서 시작하게 한다. */
body.wds .content_wrap :is(.dn-geo-block, .guide-eeat, .min-tldr, .answer-summary) {
	max-width: calc(var(--wds-measure) + var(--wds-6) * 2) !important;
	margin-inline: auto !important;
}
body.wds .content_wrap :is(
	.dn-geo-block, .dn-geo-card, .answer-summary, .guide-eeat,
	.min-tldr, .about-hub__answer, .cm-hub__answer
) > :is(p, ul, ol) {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* 🚨 `:last-child` 가 빗나가는 이유 — 박스 끝에 <meta>·<style> 같은
      보이지 않는 태그가 들어 있어 그것이 마지막 자식이 된다.
      실측 : .dn-geo-block 의 마지막 <p> 가 margin-bottom 16 을 그대로 들고 있었다.
      보이는 요소만 겨냥할 수 없으므로, 박스 안 모든 <p>·목록의 마지막 여백을
      「다음 형제가 보이는 요소가 아닐 때」로 잡는다. */
body.wds .content_wrap :is(
	.dn-geo-block, .dn-geo-card, .dn-geo-content__block, .answer-summary,
	.guide-eeat, .breast-hub__definition, .wb-note, .min-tldr, .dn-min-card,
	.ba-intro, .wune-ba-cta, .casebook-finder, .about-hub__answer,
	.cm-hub__answer, .about-hub__why-summary, .rr-cta-card, .rr-consult-cta
) > :is(p, ul, ol, dl, table):not(:has(~ :is(p, ul, ol, dl, table, div, h2, h3, h4, section))) {
	margin-bottom: 0 !important;
}

/* ── 언어 전환 메뉴 — 마지막 남은 구 브라운 (2026-09-02) ──
   감사 5번(색 리터럴 2,526곳)을 화면에 실제로 칠해지는 값 기준으로 다시 재니
   KR 24개 페이지에서 살아 있는 구 팔레트는 두 곳뿐이었다. 나머지는 이미 가려져 있다.
     .dn-langswitch__menu  테두리 rgba(112,69,38,.1) · 활성 배경 rgba(112,69,38,.08)
       → #704526(구 브라운)의 투명도 버전이라 토큰을 바꿔도 안 잡힌다. 값이 직접 박혀 있다.
   🚨 이 메뉴는 해외 사이트와 공유하므로 파일을 고치지 않고 body.wds 안에서만 덮는다. */
body.wds .dn-langswitch__menu {
	border-color: var(--wds-border) !important;
}
body.wds .dn-langswitch__menu :is(.is-active, .active) {
	background-color: var(--wds-primary-soft) !important;
	color: var(--wds-primary) !important;
}

/* 언어 전환 트리거 글자·아이콘도 구 브라운이었다 (2026-09-02)
   앞서 드롭다운 테두리만 잡고 트리거를 놓쳤다. #704526 이 라벨과 지구본 아이콘에 남아
   밝은 헤더 위에서 혼자 갈색이었다. 헤더 글자색과 같은 값으로 맞춘다. */
body.wds :is(.dn-langswitch__label, .dn-langswitch__btn),
body.wds :is(.dn-langswitch__label, .dn-langswitch__btn) i,
body.wds .dn-langswitch i {
	color: var(--wds-text) !important;
	border-color: var(--wds-border) !important;
}

/* ═══ 표를 담은 상자의 위아래 여백 (원장 지적 2026-09-02) ═══
   「박스안에 있는 표들 전부 아래는 여백이 별로 없고 위쪽이 더 많은데?」

   실측(/breast/ .breast-hub__table-wrap ×10, 1920px)
     패딩 `0px 40px` — 세로 패딩이 아예 없다.
     위 81px(안의 h2 margin-top 이 밀어낸 값) / 아래 1px → 표가 상자 바닥에 붙었다.
   → 상자가 세로 여백을 갖고, 안의 첫·마지막 요소는 자기 여백을 버린다. */
body.wds .content_wrap :is(
	.breast-hub__table-wrap, .cc-table-wrap, .dn-min-geo,
	[class*="table-wrap"], [class*="table_wrap"]
) {
	padding-block: var(--wds-7) !important;
	box-sizing: border-box;
}
body.wds .content_wrap :is(
	.breast-hub__table-wrap, .cc-table-wrap,
	[class*="table-wrap"], [class*="table_wrap"]
) > :first-child { margin-top: 0 !important; }
body.wds .content_wrap :is(
	.breast-hub__table-wrap, .cc-table-wrap,
	[class*="table-wrap"], [class*="table_wrap"]
) > :last-child { margin-bottom: 0 !important; }

/* 표 자신의 위아래 여백도 같은 값으로 */
body.wds .content_wrap table { margin-block: var(--wds-5) !important; }
body.wds .content_wrap :is([class*="table-wrap"], [class*="table_wrap"]) > table:last-child {
	margin-bottom: 0 !important;
}
@media (max-width: 767px) {
	body.wds .content_wrap :is(.breast-hub__table-wrap, .cc-table-wrap, [class*="table-wrap"], [class*="table_wrap"]) {
		padding-block: var(--wds-6) !important;
	}
}

/* 상자 없이 본문에 놓인 표 — 앞 제목과는 24, 뒤 제목과는 40·80 으로 갈렸다.
   (뒤 제목이 자기 margin-top 을 그대로 들고 있어서다)
   표 앞뒤 간격을 같은 값으로 묶는다. */
body.wds .content_wrap table + :is(h2, h3, h4) {
	margin-top: var(--wds-7) !important;
}
body.wds .content_wrap :is(h2, h3, h4) + table {
	margin-top: var(--wds-7) !important;
}
body.wds .content_wrap :is(h2, h3, h4):has(+ table) {
	margin-bottom: 0 !important;
}

/* FAQ 폭 — 항목이 1200px 이라 한 줄이 70자를 넘었다.
   「한눈에 보기」 박스와 같이 읽기 폭으로 맞춘다(제목·항목이 같은 선에서 시작). */
body.wds .content_wrap :is(.dn-faq__inner, .rr-faq, .beforeafter-faq, .dn-geo-faq) {
	max-width: calc(var(--wds-measure) + var(--wds-6) * 2) !important;
	margin-inline: auto !important;
}
body.wds .content_wrap :is(.dn-faq__title, .rr-faq__title) {
	margin-bottom: var(--wds-5) !important;
}

/* ═══ 히어로 세로폭 — 블로그 기준 (원장 지시 2026-09-02) ═══
   실측(1920) — 사진 없는 히어로
     /about/   505px  ← 소개문이 padding 96/64 를 자기가 물고 있었다
     /breast/  358px · /community/beforeafter/ 326px · /community/realreview/ 358px
     블로그    402px (사진 있음·요소 6개)
   🚨 내가 넣은 히어로 패딩 규칙이 `[class*="hub__hero"]` 로 자식까지 잡았다.
      `.about-hub__hero-lead` 도 이름에 hero 가 들어가 패딩을 받아 버렸다.
      → 히어로 「띠」 자신에게만 준다. 자식은 제외. */
body.wds .content_wrap :is(.about-hub__hero-lead, [class*="hero-lead"], [class*="hero__sub"], [class*="hero-sub"]) {
	padding-block: 0 !important;
	margin-top: var(--wds-5) !important;
}
/* 사진 없는 히어로는 블로그와 같은 세로 여백으로 */
body.wds .content_wrap :is(.about-hub__hero, .cm-hub__hero, .dn-page-hero):not(:has(img)):not(:has(picture)) {
	padding-block: var(--wds-11) !important;
}
@media (max-width: 767px) {
	body.wds .content_wrap :is(.about-hub__hero, .cm-hub__hero, .dn-page-hero):not(:has(img)):not(:has(picture)) {
		padding-block: var(--wds-9) !important;
	}
}

/* ══════════════════════════════════════════════════════════════
   §33 섹션 머리 축 교정 (2026-09-02, 원장 스크린샷 4장)
   ══════════════════════════════════════════════════════════════
   🚨 진짜 원인은 「정렬」이 아니라 「상자 위치」였다.
      .cont_title 에 읽기 폭 840 상자를 물려 두고 margin-inline:0 으로
      왼쪽에 고정한 채, 글자만 text-align:center 로 두었다.
      1200 컨테이너 안에서 상자가 왼쪽에 붙으니 제목만 정확히 180px
      왼쪽으로 밀렸다 — 실측 제목 중심 618 · 라벨(FAQ/OUR PHILOSOPHY) 중심 798.
      h1 은 max-width 가 안 걸려 있어 멀쩡했고 div 제목만 어긋났다.
      그래서 「어떤 제목은 맞고 어떤 제목은 틀린」 것으로 보였다.
   🥇 가운데 정렬 제목은 글자만이 아니라 상자도 가운데에 둔다. */
body.wds .content_wrap :is(.prac_section_title) {
	margin-inline: auto !important;
}

/* 가운데 정렬 띠(.cont_box1) 안의 머리 — CTA 제목이 왼쪽으로 떨어져 있었다.
   실측 : 제목 x198(왼쪽) · 소개문 중심 798(가운데). 한 블록에 축이 둘이었다.
   🚨 .cont_title_wrap 을 일괄 왼쪽으로 돌린 규칙(§18)이 원래 가운데였던
      띠까지 끌어내린 것이다. 띠 안에서는 원래 축(가운데)으로 되돌린다. */
body.wds .content_wrap .cont_box1 :is(.cont_title_wrap, .cont_title, .title,
                                      .cont_sub_title, .cont_title_info, p) {
	text-align: center !important;
}
body.wds .content_wrap .cont_box1 :is(.cont_title, .title) {
	margin-inline: auto !important;
}

/* .text_center 가 붙은 섹션 머리는 설계상 가운데다. §18 이 이것까지 왼쪽으로
   돌려 라벨만 가운데, 제목은 왼쪽이 되어 있었다. 문서형(.wds-doc)은 제외. */
body.wds .content_wrap .cont_title_wrap.text_center:not(.wds-doc *) {
	text-align: center !important;
}
body.wds .content_wrap .cont_title_wrap.text_center:not(.wds-doc *)
        :is(h1, .cont_title, .title, .cont_sub_title, p) {
	text-align: center !important;
	margin-inline: auto !important;
}

/* ── 박스는 제목과 같은 축에 선다 ──────────────────────────
   🚨 /about/ 은 섹션 머리가 왼쪽인데(h2 7개 전부 x198) 답변 상자만
      가운데(x378)였다. 180px 어긋난 것이 원장이 보낸 첫 장이다.
      머리가 왼쪽인 페이지에서는 상자도 왼쪽에 세운다. */
body.wds .content_wrap .about-hub__answer {
	margin-inline: 0 !important;
}

/* ── FAQ 폭 (§16 보강) ────────────────────────────────────
   .cert_faq_list 만 1200 그대로여서 한 줄이 70자를 넘었다.
   다른 FAQ(.dn-faq__inner·.rr-faq·.beforeafter-faq)와 같은 읽기 폭으로. */
body.wds .content_wrap :is(.cert_faq_list, .dn-faq__list) {
	max-width: calc(var(--wds-measure) + var(--wds-6) * 2) !important;
	margin-inline: auto !important;
}

/* ── 아이콘 카드 (.cert_benefit_card) ─────────────────────
   아이콘은 가운데인데 제목·본문만 왼쪽이라 카드 안에 축이 둘이었다.
   제목을 아이콘 축에 맞추고, 본문은 스케일 값으로 통일한다.
   (본문 색이 #555 로 다른 카드(#777)와 달라 회색이 두 가지였다) */
body.wds .content_wrap .cert_benefit_card :is(h3, h4, [class*="title"]) {
	text-align: center !important;
}
body.wds .content_wrap .cert_benefit_card :is(p, li) {
	font-size: var(--wds-fs-body) !important;
	line-height: var(--wds-lh-body) !important;
	color: var(--wds-text-sub) !important;
}

/* ══════════════════════════════════════════════════════════════
   §34 원칙 목록 (.dn-tenets) — 2026-09-02
   원장 : 「윈느의 핵심원칙의 내용 글씨가 유독 작아 보이고, 문단 간격도 유독 멀다」
   ══════════════════════════════════════════════════════════════
   실측 원인 두 가지.
   ① 위계가 없다 — 항목 제목(strong)과 본문이 똑같이 17px 이다.
      다른 카드는 제목 19px · 본문 17px 로 한 단 차이가 있다.
      제목이 본문 크기로 내려앉으니 덩어리 전체가 작아 보인다.
   ②🚨 간격 장치가 두 겹이다 — 목록의 flex gap 20px 위에
      `li + li { margin-top:10px }` 이 또 걸려 30px 이 됐다.
      거기에 항목 안쪽 padding 32px 이 더해져 두 줄짜리 항목이 131px 로 부풀었다.
      (같은 실수를 슬라이더 패딩에서 한 번 했다 — 간격은 한 겹에만 준다)
   🥇 제목을 카드 제목과 같은 값으로 올리고, 간격은 gap 하나만 남긴다. */
body.wds .content_wrap .dn-tenets__list {
	gap: var(--wds-4) !important;
}
body.wds .content_wrap .dn-tenets__item {
	margin-top: 0 !important;
	padding: var(--wds-5) var(--wds-6) !important;
}
body.wds .content_wrap .dn-tenets__item :is(strong, b, h3, h4) {
	font-size: var(--wds-fs-lead) !important;
	font-weight: 700 !important;
	line-height: var(--wds-lh-h3) !important;
	color: var(--wds-text) !important;
	display: block;
	margin-bottom: var(--wds-2) !important;
}
body.wds .content_wrap .dn-tenets__item p {
	font-size: var(--wds-fs-body) !important;
	line-height: var(--wds-lh-body) !important;
	color: var(--wds-text-sub) !important;
	margin: 0 !important;
}
/* 번호 배지도 제목과 같은 크기로 — 지금은 본문 크기라 눌려 보인다 */
body.wds .content_wrap .dn-tenets__num {
	font-size: var(--wds-fs-lead) !important;
	line-height: var(--wds-lh-h3) !important;
}
@media (max-width: 767px) {
	body.wds .content_wrap .dn-tenets__item {
		padding: var(--wds-4) var(--wds-5) !important;
	}
}

/* ══════════════════════════════════════════════════════════════
   §35 히어로 라벨은 제목 위에 선다 — 2026-09-02
   ══════════════════════════════════════════════════════════════
   🚨 /community/ 히어로에서 라벨과 제목이 「한 줄에 나란히」 붙어 있었다.
      실측 : 라벨 x406~635 · 제목 x640~1189 (같은 줄, 가로로 이어짐).
      원인은 둘 다 inline-block 이라 인라인으로 흘러버린 것이다.
      라벨을 블록으로 세우면 제목이 다음 줄로 내려간다. */
body.wds .content_wrap :is(.about-hub__hero, .cm-hub__hero, [class*="hub__hero"])
        :is([class*="eyebrow"], [class*="__label"], [class*="kicker"]) {
	display: block !important;
	width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════
   §36 표제 스케일 이탈 교정 — 25페이지 전수측정 (2026-09-02)
   ══════════════════════════════════════════════════════════════
   h1 은 25페이지 전부 44 로 같았고, h2 도 32 로 같았다.
   어긋난 것은 두 군데뿐이었다.

   ① /about/guide/ 의 h3(.cont_sub_title) 가 25.5px 이었다.
      스케일에 없는 값이다 — 17 × 1.5 로 계산된 잔재로 보인다.
      같은 역할의 h3(다른 9개 페이지)은 24px 이다.
   ② /community/event/ 한 페이지 안에서 카드 제목이 두 값이었다.
      .ev-monthly__title 19px · .ev-permanent__item-title 24px.
      24 는 섹션 소제목 크기라, 카드가 섹션 제목처럼 커 보였다. */
body.wds .content_wrap :is(h3, h4).cont_sub_title {
	font-size: var(--wds-fs-h3) !important;
	line-height: var(--wds-lh-h3) !important;
	font-weight: var(--wds-fw-h3) !important;
}
body.wds .content_wrap .ev-permanent__item-title {
	font-size: var(--wds-fs-lead) !important;
	line-height: var(--wds-lh-h3) !important;
	font-weight: 600 !important;
}
