@charset "utf-8";
/* ============================================================
   kr-typography-v3.css — KR 서비스 페이지 타이포 통일 (2026-09-01)

   블로그 v3 에서 확정한 값을 서비스 페이지에도 적용한다.

   실측 근거
     /breast/augmentation/   본문 폰트 14가지 조합
     /breast/reoperation/    15가지 · 문단 36개 중 34개가 weight 300 · 한 줄 83자
     /about/guide/           문단 56개 중 53개가 weight 300
     /community/realreview/  19개 중 17개가 15px 미만 · 한 줄 94자
   원인은 인라인 style 이었다 — 19개 파일에 font-size 451 · font-weight 225 · line-height 215.
   그걸 걷어냈으므로(work/strip_inline_typo.py) 여기 한 곳에서 정한다.
   🚨 가독성의 주범은 크기가 아니라 weight 300 이다. 블로그에서 확인한 것과 같다.

   범위 : .content_wrap(KR 24개 페이지 전부) · .cont_wrap · main
   제외 : 블로그는 자체 v3 블록을 쓴다

   🚨 레이아웃은 건드리지 않는다. 폭·그리드·카드 높이·여백 구조는 그대로 두고
      글자 크기·굵기·줄간격·줄바꿈만 맞춘다.
   🚨 되돌리려면 common/include/header.php 에서 이 파일 link 한 줄만 지운다.
      (인라인을 함께 되돌리려면 백업 _backups_wune/kr_typo_20260901/)
   ============================================================ */

/* ── 0. 🥇 디자인 토큰 재정의 — 여기가 핵심이다 ─────────────
   combined.min.css 가 --dn-* 토큰 14개로 전체 색을 지배한다.
   개별 선택자를 쫓지 말고 토큰만 바꾸면 모든 페이지가 한 번에 따라온다.
     html·body·.content_wrap 의 배경이 var(--dn-cream) 이었다.
   🚨 이 파일은 KR 페이지(header.php)에서만 불린다. 언어 사이트는 영향 없다.
   🚨 --dn-topbar 는 상단 바 배경이라 어둡게 둔다. 그 위 글씨가 흰색이다.
   🚨 --dn-teal 은 이름과 달리 실제 값이 브라운이었다. 이름만 보고 판단하지 말 것. */
:root {
	--dn-cream:  #ffffff;   /* 페이지 배경 — 크림 #faf8f5 를 순백으로 */
	--dn-cream2: #f7f7f8;   /* 보조 박스 배경 */
	--dn-border: #e6e6e8;   /* 테두리 */
	--dn-dark:   #000000;   /* 제목 */
	--dn-dark2:  #000000;
	--dn-sub:    #555555;   /* 보조 텍스트 */
	--dn-accent: #8B1538;   /* 포인트 — 버건디 */
	--dn-bronze: #8B1538;
	--dn-teal:   #8B1538;
}

:root {
	--kr-ink: #111;
	--kr-ink-sub: #555;
	--kr-body: 17px;
	--kr-lh: 1.8;
	--kr-red: #C83030;
}

/* ── 1. 본문 ───────────────────────────────────────────── */
.content_wrap p:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.content_wrap li:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.content_wrap dd:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.content_wrap td:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.content_wrap th:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.content_wrap summary:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.cont_wrap p:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.cont_wrap li:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.cont_wrap dd:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.cont_wrap td:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.cont_wrap th:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.cont_wrap summary:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
main p:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
main li:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
main dd:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
main td:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
main th:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
main summary:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *) {
	font-weight: 400;
	line-height: var(--kr-lh);
	letter-spacing: -0.01em;
	/* 🚨 break-all 이면 단어 중간에서 잘린다. 한글은 어절 단위로 끊는다 */
	word-break: keep-all;
	word-break: auto-phrase;
	overflow-wrap: break-word;
}

/* 🚨 색은 건드리지 않는다. 2026-09-01 사고: 여기서 color:#111 을 걸었더니
      어두운 배경 위 흰 글씨까지 검게 바뀌어 홈 히어로 문구가 안 보였다.
      배경이 밝은지 어두운지는 CSS 로 알 수 없다. 크기·굵기·줄간격만 맞춘다. */
.content_wrap p:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.content_wrap li:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.content_wrap dd:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.content_wrap summary:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.cont_wrap p:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.cont_wrap li:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.cont_wrap dd:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
.cont_wrap summary:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
main p:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
main li:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
main dd:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *),
main summary:not([class*="hero"] *):not([class*="hero"]):not([class*="visual"] *):not([class*="banner"] *) {
	font-size: var(--kr-body);
}

/* 표는 한 단계 아래. 그래도 15px 밑으로는 내리지 않는다 */
.content_wrap td, .content_wrap th,
.cont_wrap td, .cont_wrap th,
main td, main th { font-size: 15.5px; line-height: 1.7; }

.content_wrap figcaption, .cont_wrap figcaption, main figcaption,
.content_wrap small, .cont_wrap small, main small {
	font-size: 15px; line-height: 1.65;
}

/* 본문 안 강조는 굵기로만. 크기를 키우지 않는다 */
.content_wrap p strong, .cont_wrap p strong, main p strong,
.content_wrap li strong, .cont_wrap li strong, main li strong {
	font-weight: 700; font-size: inherit;
}

/* ── 2. 읽기 폭 ────────────────────────────────────────
   🚨 2026-09-01 사고: 모든 <p> 에 max-width 를 걸었더니 가운데 정렬로 짜인 섹션의
      문단이 왼쪽으로 밀렸다(홈 리얼셀피). 배경이 밝은지 어두운지를 CSS 가 모르듯,
      그 문단이 가운데 정렬 문맥인지도 CSS 는 모른다.
   → 전역이 아니라 긴 글이 실제로 담기는 본문 블록에만 건다. 실측으로 뽑은 목록이다.
      한 줄 83~94자 → 51자. 카드·히어로·CTA 는 대상이 아니다. */
.dn-geo-content__block p,
.dn-natural-results__body p,
.dn-insight-section > p,
.introduce_wrap .cont > p,
.cont > p { max-width: 46em; }

/* 카드·슬라이드·표 안 문단은 이미 좁다. 폭 제한이 오히려 어색해진다 */
.content_wrap [class*="card"] p, .content_wrap [class*="slide"] p,
.content_wrap [class*="swiper"] p, .content_wrap li p,
.content_wrap td p, .content_wrap figure p,
.cont_wrap [class*="card"] p, .cont_wrap [class*="slide"] p,
.cont_wrap [class*="swiper"] p, .cont_wrap li p,
.cont_wrap td p, .cont_wrap figure p { max-width: none; }

/* 카드 발췌문은 본문보다 작아도 되지만 15px 밑으로는 내리지 않는다.
   🚨 .rr-card__body p 같은 기존 규칙이 14px 을 걸고 있다. 같은 순위면 나중 것이 이기므로
      선택자를 한 단계 더 구체적으로 써서 하한을 잡는다. */
.content_wrap [class*="card"] p, .content_wrap [class*="card"] li,
.cont_wrap [class*="card"] p, .cont_wrap [class*="card"] li,
main [class*="card"] p, main [class*="card"] li { font-size: 15.5px; line-height: 1.75; }

/* ── 3. 제목 위계 — 인라인 22px·17px 이 섞여 있던 것을 정리 ── */
.content_wrap h2:not([class*="hero"] *):not([class*="hero"]),
.cont_wrap h2:not([class*="hero"] *):not([class*="hero"]),
main h2:not([class*="hero"] *):not([class*="hero"]) {
	font-size: 26px; font-weight: 700; line-height: 1.4;
	letter-spacing: -0.02em;
}
.content_wrap h3:not([class*="hero"] *):not([class*="hero"]),
.cont_wrap h3:not([class*="hero"] *):not([class*="hero"]),
main h3:not([class*="hero"] *):not([class*="hero"]) {
	font-size: 20.5px; font-weight: 700; line-height: 1.45;
	letter-spacing: -0.01em;
}
.content_wrap h4, .cont_wrap h4, main h4 {
	font-size: 18px; font-weight: 600; line-height: 1.45;
}
/* 🚨 히어로 제목은 아예 잡지 않는다.
      inherit 를 쓰면 원래 값이 아니라 부모 값으로 떨어진다(2026-09-01 실수). */
.content_wrap h2:not([class*="hero"] *):not([class*="hero"]),
.cont_wrap h2:not([class*="hero"] *):not([class*="hero"]),
main h2:not([class*="hero"] *):not([class*="hero"]) { font-size: 26px; }

/* ── 3-1. 페이지 제목(h1) 통일 ────────────────────────────
   실측: dn-page-hero__title 22px/700 · dn-sub-hero__title 33px/300 ·
        dn-guide-h1 51.2px. 세 값이 제각각이고 /breast/ 는 h1(22px)이
        자기 h2(26px)보다 작아 위계가 뒤집혀 있었다.

   🚨 히어로 안 제목은 배경 사진이 들어올 예정이라 지금 건드리지 않는다.
      히어로가 없는 페이지(about 5개·community)만 먼저 맞춘다. */
.content_wrap h1:not([class*="hero"] *):not([class*="hero"]),
.cont_wrap h1:not([class*="hero"] *):not([class*="hero"]) {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
}
@media (max-width: 768px) {
	.content_wrap h1:not([class*="hero"] *):not([class*="hero"]),
	.cont_wrap h1:not([class*="hero"] *):not([class*="hero"]) {
		font-size: 26px; line-height: 1.4;
	}
}

/* ── 3-2. 섹션 여백 통일 ──────────────────────────────────
   제목 앞뒤 간격이 페이지마다 달라 리듬이 없었다. 하나로 맞춘다.
   🚨 2026-09-01: 카드 제목에까지 h2 앞 56px 이 먹어 블로그 목록에서
      썸네일과 제목 사이가 벌어졌다. 카드·블로그는 자체 간격을 쓴다. */
.content_wrap h2:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *), .cont_wrap h2:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *) { margin: 56px 0 16px; }
.content_wrap h3:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *), .cont_wrap h3:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *) { margin: 32px 0 12px; }
.content_wrap h4:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *), .cont_wrap h4:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *) { margin: 24px 0 10px; }
.content_wrap p:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *), .cont_wrap p:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *) { margin: 0 0 16px; }
.content_wrap ul:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *), .content_wrap ol:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *),
.cont_wrap ul:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *), .cont_wrap ol:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *) { margin: 0 0 18px; }
.content_wrap li:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *), .cont_wrap li:not([class*="hero"] *):not([class^="blog-"]):not([class*="card"] *):not([class*="card"]):not([class*="__title"]):not([class*="__name"]):not([class*="__heading"]):not([class*="__cta"] *):not([class*="modal"] *) { margin-bottom: 7px; }

/* ── 4. 본문 링크 ──────────────────────────────────────
   🚨 2026-09-01: 블로그처럼 밑줄(border-bottom 1px #bbb)을 걸었더니
      의료진 페이지의 기사 제목·논문 목록이 전부 밑줄로 덮였다.
      그 페이지들은 링크가 문장 속이 아니라 목록으로 늘어서 있어 밑줄이 소음이 된다.
   → 밑줄을 쓰지 않는다. 링크 affordance 는 버건디 색이 맡는다. */
.content_wrap a, .cont_wrap a, main a { border-bottom: none; }
.content_wrap p > a:hover, .content_wrap li > a:hover,
.cont_wrap p > a:hover, .cont_wrap li > a:hover,
main p > a:hover, main li > a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 5. 블로그는 자체 v3 를 쓴다 ───────────────────────── */
[class^="blog-"] p, [class^="blog-"] li,
[class^="blog-"] h2, [class^="blog-"] h3, [class^="blog-"] summary {
	font-size: inherit; max-width: none;
}


/* ── 6. 모바일 ─────────────────────────────────────────── */
@media (max-width: 768px) {
	:root { --kr-body: 16.5px; --kr-lh: 1.9; }
	.content_wrap p, .cont_wrap p, main p { max-width: none; }
	.content_wrap h2, .cont_wrap h2, main h2 { font-size: 21px; }
	.content_wrap h3, .cont_wrap h3, main h3 { font-size: 18.5px; }
	.content_wrap td, .content_wrap th,
	.cont_wrap td, .cont_wrap th, main td, main th { font-size: 15px; }

	/* 🚨 모바일 카드 본문이 12.3px 까지 내려간다(.dn-insight-card__desc 0.82rem).
	      그 규칙이 !important 라 특이도만 높여서는 못 이긴다. 한글 12px 은 너무 작아
	      같은 무게로 하한만 잡는다. 크기를 지정하는 게 아니라 바닥을 막는 것이다. */
	.content_wrap [class*="card"] p, .content_wrap [class*="card"] li,
	.cont_wrap [class*="card"] p, .cont_wrap [class*="card"] li,
	main [class*="card"] p, main [class*="card"] li {
		font-size: 15px !important;
		line-height: 1.75 !important;
	}
}

/* ── 7. 블록 경계 — 두 가지만 쓴다 (2026-09-01 원장 결정) ──
   크림 배경을 걷어내면서 배경도 테두리도 없이 떠 있는 블록이 생겼다
   (재수술 페이지 한 장에 dn-insight-card 10개).

   D  위아래 선   — 카드가 여러 개 이어지는 자리. 회색 배경이 열 번 반복되면 답답해진다
   E  회색 + 좌측 버건디 바 — 「한눈에 보기」처럼 하나만 놓이는 강조 블록

   🚨 이 두 가지 말고 다른 경계 처리를 만들지 않는다. 종류가 늘면 통일성이 다시 무너진다. */

/* D — 반복 카드 */
/* 🚨 2026-09-01: .dn-cards__list > li 를 넣었더니 홈 리얼셀피 사진 16장 위에
      회색 선과 20px 여백이 붙었다. 사진에는 경계가 필요 없다.
      D 는 「글을 담은 반복 카드」에만 건다. 넓은 속성 선택자를 쓰지 않는다. */
.dn-insight-card {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--line, #e6e6e8);
	border-radius: 0;
	padding: 20px 0;
}
/* 연달아 놓일 때 선이 겹치지 않게 마지막에만 아래 선 */
.dn-insight-track > .dn-insight-card:last-child { border-bottom: 1px solid var(--line, #e6e6e8); }

/* 🚨 홈 리얼셀피만 리스트 폭이 1200(left 118)이라 섹션 제목(left 152)과 어긋나
      사진이 왼쪽으로 튀어나와 보였다. 사이트 기준 폭(1180 - 좌우 24)에 맞춘다. */
.dn-cards--selfie .dn-cards__list { max-width: 1132px; }

/* E — 단독 강조 블록 */
.dn-geo-content__block,
.dn-geo-card,
.breast-hub__definition {
	background: #f7f7f8;
	border: 0;
	border-left: 3px solid #8B1538;
	border-radius: 4px;
	padding: 24px 26px;
}

/* ── 8. h2 는 어디서나 26px ────────────────────────────────
   🚨 .dn-heading 이 34px 을 걸어 한 페이지 안에서 h2 가 26·34 두 가지였다. */
/* 🚨 combined.min.css 가 .dn-heading 에 clamp(1.6rem,3vw,2.4rem) !important 를 건다.
      그 파일은 언어 사이트와 공유하므로 고치지 않고, KR 전용 CSS 에서 같은 무게로 이긴다. */
.content_wrap h2.dn-heading:not([class*="hero"] *),
.cont_wrap h2.dn-heading:not([class*="hero"] *),
main h2.dn-heading:not([class*="hero"] *) {
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

/* ── 9. DB CMS 콘텐츠의 인라인 밑줄 ─────────────────────
   의료진 페이지 논문 목록은 gc('doctor','dr1_paper',…) 로 DB 에서 온다.
   그 HTML 에 text-decoration:underline 이 인라인으로 박혀 있어 CSS 로는 못 이긴다.
   🚨 DB 를 고치는 게 정석이지만, 화면 정리가 먼저라 같은 무게로 누른다. */
.content_wrap a[style*="underline"],
.cont_wrap a[style*="underline"] { text-decoration: none !important; }
.content_wrap a[style*="underline"]:hover,
.cont_wrap a[style*="underline"]:hover {
	text-decoration: underline !important; text-underline-offset: 3px;
}

/* ── 10. 푸터 ────────────────────────────────────────────
   베이지 #dfc9b0 배경에 브라운 45~60% 글자였다. 대비가 낮고 화이트 전환과도 어긋난다.
   🚨 이 파일은 KR 전용이라 언어 사이트 푸터는 영향받지 않는다.
   배경은 흰색이 아니라 #f7f7f8 로 둔다 — 본문과 푸터의 영역 구분이 필요하다. */
footer, .footer, [class*="footer"]:not([class*="footer-"]) { background: #f7f7f8; }
footer *, .footer *, [class*="footer"] * { border-color: #e6e6e8; }
footer p, footer span, footer li, footer address, footer div,
.footer p, .footer span, .footer li, .footer address {
	color: #111111;   /* 회색 #555 → 검정. 원장 지시(2026-09-01) */
}
footer a, .footer a { color: #111111; }
footer a:hover, .footer a:hover { color: #8B1538; }
footer h2, footer h3, footer strong, .footer h2, .footer h3, .footer strong { color: #111111; }

/* ── 11. 「전체 보기」·「자세히 보기」 CTA 통일 ──────────────
   실측: 15개인데 문구 8종 · class 4종(8개는 class 없음) · 24페이지 중 4곳에만 존재.
   같은 링크인데 PC 는 「View More →」, 모바일은 「리얼 셀피 전체 보기 →」로 달랐다.

   역할이 둘이라 문구도 둘로 나눈다. 하나로 묶으면 무엇을 여는지 알 수 없다.
     카드 안   「자세히 보기 →」
     섹션 끝   「{대상} 전체 보기 →」
   🚨 beforeafter 의 「전체보기 (N)」은 필터 탭이라 대상이 아니다.

   스타일은 하나. D·E 블록과 같은 결로 최소한만 쓴다. */
.cm-hub__more, .ev_viewmore, .dn-mobile-viewall a,
.casebook-card__more, .card-en {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: -0.01em;
	color: #8B1538;
	text-decoration: none;
	border-bottom: none;
	white-space: nowrap;
}
.cm-hub__more:hover, .ev_viewmore:hover, .dn-mobile-viewall a:hover,
.casebook-card__more:hover, .card-en:hover {
	color: #540F19;
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* 섹션 끝 CTA 는 제목 줄 오른쪽에 붙는다(PC) · 모바일은 섹션 하단 전폭 */
.dn-mobile-viewall { margin-top: 18px; text-align: center; }
.dn-mobile-viewall a { display: inline-block; padding: 10px 18px; }

/* ── 12. 브라운 잔재 일소 (2026-09-01) ──────────────────────
   토큰(--dn-*)을 바꿨는데도 브라운이 남았다. 실측으로 원인을 찾았다.
     combined.min.css 안에 **하드코딩된** 색이 111건 있다.
     var(--dn-accent, #8b5c3a) 같은 것은 토큰이 살아 있어 이미 고쳐졌지만,
     #2c1a0e · rgba(44,26,14,.6) 처럼 직접 적힌 것은 토큰과 무관하다.
   🚨 combined.min.css 는 언어 사이트와 공유한다. 고치지 않고 여기서 덮는다.
   🚨 어두운 배경(quick_menu·오버레이) 위 글씨는 흰색이다. 배경만 중성 회색으로 바꾼다. */
:root { --dn-brown: #8B1538; }

/* 푸터·하단 정보 — 갈색 반투명이 대비도 낮았다. 검정으로 */
.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__copy-row .dn-footer__right a,
.dn-footer__pc-legal a { color: #111111 !important; }
.dn-footer__pc-copy { color: #555555 !important; }

/* 라벨·아이브로우 — 포인트는 버건디 하나로 */
.dn-page-hero__label,
.dn-label,
.dn-sub-hero__eyebrow:not([class*="hero"] *) { color: #8B1538 !important; }

/* 본문 성격의 블록 */
.dn-guide-closing__body,
.dn-kakao-cta__heading,
.wune-related__title,
.wune-related__name,
.casebook-card__title,
.dn-related-blog__link { color: #111111 !important; }
.dn-kakao-cta__sub,
.dn-testimonial-card__author,
.dn-testimonials__btn,
.minutes_wrap .minutes08 .cont_text_info.color_g,
.minutes_wrap .minutes03 .cont_text,
.wune-related__desc,
.casebook-finder__tag,
.casebook-card__no,
.dn-min-disclaimer,
.dn-related-blog__heading,
.dn-related-blog__sub { color: #555555 !important; }

/* 버튼 — 테두리·글자 모두 버건디 */
.dn-kakao-cta__btn,
.dn-kakao-cta__btn--reserve { color: #8B1538 !important; border-color: #8B1538 !important; }
.dn-kakao-cta__btn--kakao { background: #8B1538 !important; border-color: #8B1538 !important; color: #ffffff !important; }
.dn-kakao-cta__btn--kakao:hover { background: #540F19 !important; border-color: #540F19 !important; }
.dn-kakao-cta__btn--reserve:hover { background: #8B1538 !important; color: #ffffff !important; }
.sns_btn_styled, .sns_btn_wrap .sns_btn_styled { background: #111111; }
.sns_btn_styled:hover, .sns_btn_wrap .sns_btn_styled:hover { background: #000000; }
.head-cta-btn:hover { background: #540F19 !important; border-color: #540F19 !important; }

/* 어두운 배경 — 갈색 반투명을 중성 검정으로. 위 글씨는 흰색 그대로 */
.quick_menu_wrap { background: rgba(17,17,17,0.92) !important; }
.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,0.55) 100%);
}
.tv_thumb:hover::after { background: rgba(17,17,17,0.25); }
.wunetv-scrollbar-thumb { background: #8B1538; }

/* ── 13. 스케일 밖 글자 크기 (2026-09-01 실측 24페이지) ──────
   같은 클래스가 페이지마다 다른 크기로 나왔다. 이게 「제각각」의 실체다.
     .cont_title   진료철학 40.8 · 의료진 30.6 · 27분 40.8/51
     .h2(무class)  23.8   .dn-label 12.2   .wune-related__desc 12.5
   스케일 : 34 · 26 · 20.5 · 18 · 17 · 15.5 · 15 · 13.5
   🚨 !important 를 쓰는 이유는 페이지 <style> 과 combined.min.css 가
      같은 무기를 쓰기 때문이다. 특이도만 올려서는 이기지 못한다. */
.content_wrap .cont_title,
.content_wrap .prac_section_title,
.cont_wrap .cont_title,
.cont_wrap .prac_section_title {
	font-size: 26px !important; font-weight: 700 !important;
	line-height: 1.4 !important; letter-spacing: -0.02em;
}
.content_wrap .cont_sub_title, .content_wrap .cont_text_title,
.cont_wrap .cont_sub_title, .cont_wrap .cont_text_title,
.content_wrap .casebook-card__title, .content_wrap .dn-related-blog__link {
	font-size: 20.5px !important; font-weight: 700 !important; line-height: 1.45 !important;
}
.content_wrap .dn-implant-tab, .cont_wrap .dn-implant-tab { font-size: 18px !important; }
.content_wrap .wune-related__name { font-size: 15.5px !important; }
/* 라벨·배지 — 13.5px 이 바닥이다. 한글이 12px 밑으로 내려가면 읽히지 않는다 */
.content_wrap .dn-label, .cont_wrap .dn-label,
.content_wrap .cont_title_info, .content_wrap .dn-article-card__tag,
.content_wrap .wune-related__desc, .content_wrap .dn-min-disclaimer,
.dn-page-hero__label, .dn-sub-hero__eyebrow {
	font-size: 13.5px !important; font-weight: 600 !important;
	line-height: 1.6 !important; letter-spacing: 0.1em;
}
/* 무class h2 가 23.8px 로 남아 있었다 */
.content_wrap h2:not([class]):not([class*="hero"] *),
.cont_wrap h2:not([class]):not([class*="hero"] *) { font-size: 26px !important; }
.content_wrap h1:not([class]):not([class*="hero"] *) { font-size: 34px !important; }

/* ── 14. 히어로 통일 (2026-09-01 원장 지시) ────────────────
   「히어로의 구조와 글 배치도 전부 통일해야해」
   실측 : dn-sub-hero__title 55.8px · dn-page-hero__title 22px ·
          eyebrow 11.6px · label 13.9px — 같은 역할인데 값이 전부 달랐다.
   🚨 홈 dn-hero 는 전면 브랜드 히어로라 성격이 다르다. 여기서 제외한다.
      (시술·허브 페이지의 「페이지 머리」 두 종류만 하나로 맞춘다)
   🚨 배경 사진 위 글씨라 색은 지정하지 않는다. 크기·간격·정렬만 맞춘다. */
.dn-page-hero__title, .dn-sub-hero__title {
	font-size: 40px; font-weight: 700; line-height: 1.25;
	letter-spacing: -0.02em; margin: 0 0 14px;
}
.dn-page-hero__label, .dn-sub-hero__eyebrow {
	display: inline-block; margin: 0 0 14px;
}
.dn-page-hero__desc, .dn-sub-hero__desc,
.dn-page-hero__lead, .dn-sub-hero__lead {
	font-size: 17px; line-height: 1.7; letter-spacing: -0.01em;
	max-width: 44em; margin: 0;
}
@media (max-width: 768px) {
	.dn-page-hero__title, .dn-sub-hero__title { font-size: 28px; line-height: 1.3; }
	.dn-page-hero__desc, .dn-sub-hero__desc,
	.dn-page-hero__lead, .dn-sub-hero__lead { font-size: 16.5px; }
}