/* ============================================================================
   하니성형외과 디자인 시스템 — 전 85지면 단일 출처
   ----------------------------------------------------------------------------
   값을 지면에 박지 않는다. 여기 토큰 하나만 고치면 85지면이 같이 움직인다.
   홈(combined-home)과 하위 84지면이 같은 이 파일을 읽는다.

   손대지 않는 것
     · 상담 접점 3종 — 우측 퀵바(.quick_menu_*) · 하단 고정바(#hcb) · AI 상담(#hac*)
     · FAQ 블록의 형태(배경·테두리·여백) — 이 사이트의 기준이라 여기서 승계만 한다
     · 본문 텍스트·이미지·의료법 고지 — 이 파일은 크기·간격·색·글꼴만 다룬다
   ============================================================================ */

/* ── 1. 토큰 ───────────────────────────────────────────────────────────────── */
:root{
  /* 글꼴 — 한 벌 */
  --hani-font:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo',sans-serif;
  --dn-font:var(--hani-font);
  --dn-serif:var(--hani-font);   /* 세리프 폐지 — 이름만 남은 값이었다 */

  /* 글자 크기 13단 (데스크톱) */
  --fs-display:48px;   --lh-display:1.15;  --ls-display:-0.02em; --fw-display:300;
  --fs-h1:40px;        --lh-h1:1.25;       --ls-h1:-0.02em;      --fw-h1:700;
  --fs-h2:28px;        --lh-h2:1.30;       --ls-h2:-0.02em;      --fw-h2:700;
  --fs-h3:20px;        --lh-h3:1.40;       --ls-h3:-0.01em;      --fw-h3:600;
  --fs-h4:18px;        --lh-h4:1.45;       --ls-h4:-0.01em;      --fw-h4:600;
  --fs-lead:19px;      --lh-lead:1.75;     --ls-lead:-0.01em;
  --fs-body:17px;      --lh-body:1.80;     --ls-body:-0.01em;
  --fs-body-sm:15px;   --lh-body-sm:1.70;
  --fs-caption:14px;   --lh-caption:1.50;
  --fs-eyebrow:13px;   --lh-eyebrow:1.40;  --ls-eyebrow:0.08em;
  --fs-button:16px;    --lh-button:1.20;
  --fs-nav:15px;       --lh-nav:1.40;
  --fs-footer:14px;    --lh-footer:1.60;

  /* 색 — FAQ 블록의 승인된 값을 승계한다 */
  --c-bg:#ffffff;
  --c-bg-soft:#f8f8f8;
  --c-bg-invert:#0c0c0c;
  --c-text:#0c0c0c;
  --c-text-sub:#515151;
  --c-text-on-invert:#ededed;
  --c-line:#d0d0d0;
  --c-accent:#0c0c0c;          /* 하니 로고가 무채색이다 — 강조는 색이 아니라 굵기로 */
  --c-status-online:#5fd08a;   /* AI 상담 «온라인» 표시등 — 유일한 유채색 예외 */

  /* 포인트 한 색 — 딥그린 계열 5단.
       --c-accent 는 84지면 본문 버튼이 함께 읽는 값이다. 여기를 고치면 그 지면이 통째로 물든다.
       포인트는 자리를 골라 쓴다 — 그 자리는 아래 §16 에 열거돼 있다.
       대비 — 흰 배경 위 --c-point 8.08:1 / --c-point 위 흰 글자 8.08:1 (둘 다 AAA) */
  --c-point:#005c3e;
  --c-point-deep:#003d29;      /* hover·눌림 — 흰 글자 12.36:1 */
  --c-point-soft:#0a7350;      /* 밝은 변형 — 흰 배경 위 5.86:1, 선·아이콘용 */
  --c-point-line:#d4e4dd;      /* 선 */
  --c-point-tint:#eaf2ee;      /* 면 — 이 위의 본문 글자는 15:1 이상이라 안전하다 */

  /* 이름과 값이 어긋나 있던 변수를 회수한다 — 이름이 가리키는 값으로 맞춘다 */
  --dn-accent:var(--c-accent);
  --dn-bronze:var(--c-text-sub);
  --dn-teal:var(--c-accent);
  --dn-dark:var(--c-text);
  --dn-sub:var(--c-text-sub);
  --dn-border:var(--c-line);
  --dn-cream:var(--c-bg-soft);

  /* 레이아웃 */
  --container:1120px;
  --container-narrow:800px;
  --gutter:24px;
  --sec-y:80px;
  --sec-y-tight:48px;
  --block-y:32px;
  --gap:24px;
  --topbar-h:73px;
}

/* 뿌리 글자 크기 — 17/14/15px 3벌 충돌을 하나로.
   흩어진 소수점 크기(16.15 · 15.98 · 13.68 …)의 유일한 근원이었다.
   rem 은 이 사이트에서 폰트에만 쓰이고 여백·레이아웃엔 쓰이지 않아 안전하다. */
html{ font-size:16px !important; }

/* ── 2. 글꼴 한 벌 ─────────────────────────────────────────────────────────── */
html body,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body p, html body li, html body td, html body th, html body a,
html body span, html body div, html body button, html body input, html body textarea, html body select,
html body .title, html body .title_c,          /* 장식 글꼴 Cafe24Danjunghae 를 표준 글꼴로 회수 */
html body .cont_title, html body .section_title, html body .page_title, html body .hero_title{
  font-family:var(--hani-font) !important;
}
/* 아이콘 폰트는 건드리지 않는다 */
html body .glyphicon, html body [class^="icon-"], html body [class*=" icon-"],
html body .quick-icon, html body .m-nav-icon, html body i[class*="fa-"]{
  font-family:inherit;
}
html body .glyphicon{ font-family:'Glyphicons Halflings' !important; }


/* ── 2-b. 광역 정규화 ──────────────────────────────────────────────────────────
   :where() 로 감싸 특이도를 0 으로 만든다 → 아래 «계층 규칙»이 항상 이긴다.
   그러면서도 !important 라서, 지면 인라인의 «!important 없는» 값은 전부 회수한다.
   범위는 .content_wrap 안쪽 = 상담 접점 3종·상단바·내비는 이 규칙이 닿지 않는다. */
html body :where(.content_wrap) :where(p,li,dd,dt,td,blockquote,summary,label,figure){
  font-size:var(--fs-body) !important; font-weight:400 !important;
  line-height:var(--lh-body) !important; letter-spacing:var(--ls-body) !important;
}
/* 인라인 요소는 스스로 크기를 정하지 않는다 — 부모에서 물려받는다 */
html body :where(.content_wrap) :where(span,strong,b,em,i,small,mark,u,code,sub,sup,a,time,label){
  font-size:inherit !important; line-height:inherit !important; font-family:inherit !important;
  letter-spacing:inherit !important;
}
html body :where(.content_wrap) :where(strong,b){ font-weight:600 !important; }
html body :where(.content_wrap) :where(th){
  font-size:var(--fs-h4) !important; font-weight:var(--fw-h4) !important; line-height:var(--lh-h4) !important;
}
html body :where(.content_wrap) :where(h2){
  font-size:var(--fs-h2) !important; font-weight:var(--fw-h2) !important;
  line-height:var(--lh-h2) !important; letter-spacing:var(--ls-h2) !important;
}
html body :where(.content_wrap) :where(h3){
  font-size:var(--fs-h3) !important; font-weight:var(--fw-h3) !important;
  line-height:var(--lh-h3) !important; letter-spacing:var(--ls-h3) !important;
}
html body :where(.content_wrap) :where(h4,h5,h6){
  font-size:var(--fs-h4) !important; font-weight:var(--fw-h4) !important;
  line-height:var(--lh-h4) !important; letter-spacing:var(--ls-h4) !important;
}
/* 글자색 — 밝은 바탕 위 검정 계열만 회수한다.
   사진·어두운 바탕 위 흰 글자를 검정으로 바꾸면 글자가 사라진다 → 광역 색 강제는 하지 않는다. */
html body :where(.content_wrap) :where(.cont_text,.cont_list li,.dn-geo-card p,.dn-geo-card li,
  .dn-geo-card ul li,.breast-hub__table td,.breast-hub__table th,.breast-hub__cta p,
  .breast-hub__card p,.breast-hub__step-desc,.breast-hub__step-title,
  .about-hub__value-card,.about-hub__info-card,.about-hub__doctor-card,
  .cm-hub__ba-card,.site-related__name,.site-related__desc,.doctor-media__date,
  .doctor-media__source,.dn-rv-card__text,.hani-ch-card__title,.hani-ch-card__more){
  color:var(--c-text) !important;
}
html body :where(.content_wrap) :where(.dn-insight-card__period,.dn-insight-card__num,
  .breast-related-card__category,.dn-author-signature__text,.site-related__desc,
  .about-hub__section-label,.cm-hub__section-label,.doctor-media__date,.doctor-media__source){
  color:var(--c-text-sub) !important;
}

/* ── 3. 타입 계층 ──────────────────────────────────────────────────────────── */

/* display — 사진 위 히어로 대제목 */
html body .dn-sub-hero__title,
html body .dn-page-hero__title,
html body .dn-hero__title{
  font-size:var(--fs-display) !important; font-weight:var(--fw-display) !important;
  line-height:var(--lh-display) !important; letter-spacing:var(--ls-display) !important;
  word-break:keep-all;
}

/* h1 — 그 밖 모든 지면 제목 */
html body .content_wrap h1:not(.dn-sub-hero__title):not(.dn-page-hero__title),
html body .dn-doctor-intro__name{
  font-size:var(--fs-h1) !important; font-weight:var(--fw-h1) !important;
  line-height:var(--lh-h1) !important; letter-spacing:var(--ls-h1) !important;
  color:var(--c-text) !important; word-break:keep-all;
}
/* 예외 — 홈 h1 은 화면에 거의 안 보이는 SEO 문구다. 표준을 먹이면 홈 상단이 무너진다 */
html body .head_logo h1, html body h1.blind, html body h1.sr-only, html body #home-seo-h1{
  font-size:inherit !important; font-weight:inherit !important; letter-spacing:inherit !important;
}

/* h2 — 섹션 제목·질문형 제목 */
html body .dn-heading,
html body .dn-faq__title,
html body .hani-dr__name,
html body .hani-why__h,
html body .dn-natural-results__heading,
html body .dn-kakao-cta__heading,
html body .doctor-media__title,
html body .dn-geo-block > h2,
html body .dn-geo-content__block > h2,
html body .breast-hub > h2,
html body .breast-hub__table-wrap > h2,
html body .breast-hub__definition > h2,
html body .breast-hub__process > h2,
html body .breast-hub__subtopics > h2,
html body .breast-hub__cta > h2,
html body .breast-related-posts__title,
html body .breast-bottom-links__title,
html body .dn-sub-hero__intro h2,
html body .cont_wrap > h2,
html body .cont_box1 > h2,
html body .rr-page-wrap .cont_wrap > section > h2,
html body .title, html body .title_c{
  font-size:var(--fs-h2) !important; font-weight:var(--fw-h2) !important;
  line-height:var(--lh-h2) !important; letter-spacing:var(--ls-h2) !important;
  color:var(--c-text) !important; word-break:keep-all;
}
/* dn-heading 은 max-width:510px 로 잘려 두 줄이 되던 것을 컨테이너 폭에 맞춘다 */
html body .dn-heading{ max-width:none !important; }

/* h3 — 소제목·카드 제목·FAQ 질문 */
html body .dn-faq__q,
html body .dn-insight-card__title,
html body .dn-implant-method__name,
html body .dn-implant-panel__title,
html body .dn-proc-card__title,
html body .dn-article-card__title,
html body .breast-related-card__title,
html body .breast-bottom-card__title,
html body .breast-hub__card > h3,
html body .rr-card__title,
html body .dn-geo-card > h3,
html body .dn-geo-block h3,
html body .dn-geo-content__block h3,
html body .cont_wrap h3,
html body .cont_box1 h3,
html body .breast-hub__step-title, html body .site-related__name,
html body .hani-ch-card__title, html body .about-hub__value-card h3,
html body .about-hub__info-card h3, html body .about-hub__doctor-card h3,
html body .cm-hub__ba-card h3, html body .dn-loc-card__title{
  font-size:var(--fs-h3) !important; font-weight:var(--fw-h3) !important;
  line-height:var(--lh-h3) !important; letter-spacing:var(--ls-h3) !important;
  color:var(--c-text) !important; word-break:keep-all;
}

/* h4 — 표 머리·목록 제목 */
html body .cont_wrap h4, html body .dn-implant-panel__subtitle,
html body .cont_hour_label, html body table th{
  font-size:var(--fs-h4) !important; font-weight:var(--fw-h4) !important;
  line-height:var(--lh-h4) !important; letter-spacing:var(--ls-h4) !important;
  color:var(--c-text) !important;
}

/* lead — Answer-First 첫 문단·리드문 */
html body .dn-sub-hero__intro > p,
html body .dn-page-hero__sub,
html body .dn-sub-hero__text{
  font-size:var(--fs-lead) !important; font-weight:400 !important;
  line-height:var(--lh-lead) !important; letter-spacing:var(--ls-lead) !important;
}

/* body — 본문. w200/w300 을 400 으로 올린다(화면 전체가 진해진다) */
html body .cont_text,
html body .cont_list li,
html body .dn-faq__a, html body .dn-faq__a p, html body .dn-faq__a li,
html body .dn-geo-block > p,
html body .dn-geo-content__block > p,
html body .dn-geo-card > p,
html body .dn-natural-results__body,
html body .dn-natural-results__text > p,
html body .dn-insight-card__desc,
html body .dn-implant-method__desc,
html body .dn-doctor-intro__body p,
html body .breast-related-card__desc,
html body .breast-bottom-card__desc,
html body .breast-related-posts__desc,
html body .breast-bottom-links__desc,
html body .breast-hub p,
html body .cont_box1 > p,
html body .cont_wrap > p,
html body table td,
html body .dn-geo-card ul li, html body .dn-geo-card ol li,
html body .breast-hub__table td, html body .breast-hub__cta p,
html body .breast-hub__card p, html body .breast-hub__step-desc,
html body .site-related__desc, html body .dn-rv-card__text,
html body .about-hub__value-card p, html body .about-hub__info-card p,
html body .cm-hub__ba-card p, html body .dn-testimonial-card__quote{
  font-size:var(--fs-body) !important; font-weight:400 !important;
  line-height:var(--lh-body) !important; letter-spacing:var(--ls-body) !important;
  color:var(--c-text) !important; word-break:keep-all;
}
/* 강조는 크기가 아니라 굵기로 */
html body .cont_text strong, html body .dn-faq__a strong, html body .dn-geo-block p strong,
html body .dn-doctor-intro__highlight{
  font-size:inherit !important; font-weight:600 !important; color:var(--c-text) !important;
}

/* caption — 캡션·주석·보조 */
html body .dn-insight-card__period,
html body .dn-insight-card__num,
html body .breast-related-card__category,
html body .dn-author-signature__text,
html body figcaption{
  font-size:var(--fs-caption) !important; font-weight:400 !important;
  line-height:var(--lh-caption) !important; color:var(--c-text-sub) !important;
}

/* eyebrow — 눈성형 · INCISION 류 라벨 */
html body .dn-label,
html body .dn-faq__eyebrow,
html body .dn-page-hero__label,
html body .breast-related-posts__eyebrow,
html body .breast-bottom-links__eyebrow,
html body .breast-bottom-card__label,
html body .card-en,
html body .about-hub__section-label, html body .cm-hub__section-label,
html body .about-hub__hero-eyebrow, html body .hani-why__eq-name,
html body .dn-testimonial-card__author, html body .doctor-media__date,
html body .doctor-media__source{
  font-size:var(--fs-eyebrow) !important; font-weight:600 !important;
  line-height:var(--lh-eyebrow) !important; letter-spacing:var(--ls-eyebrow) !important;
}
/* 히어로 아이브로우는 사진 위 흰 글씨다 — 크기만 맞추고 색은 원본을 지킨다 */
html body .dn-sub-hero__eyebrow{
  font-size:var(--fs-eyebrow) !important; font-weight:600 !important;
  line-height:var(--lh-eyebrow) !important; letter-spacing:var(--ls-eyebrow) !important;
}

/* nav — 크기를 건드리지 않는다.
   상단 내비는 `clamp(12px,0.95vw,14.5px)` 로 13개 항목을 한 줄에 담기 위한 계산값이고,
   드롭다운 13.5px 도 열 폭에 맞춘 값이다. 고정 15px 을 먹이면 1280 에서 메뉴가 두 줄로 접힌다.
   내비·푸터는 85지면이 같은 include 를 쓴다.
   여기서는 글꼴만 통일하고(§2) 크기는 원래 계산에 맡긴다. */

/* footer */
html body .dn-footer__pc, html body .dn-footer__pc *,
html body .dn-footer__mobile, html body .dn-footer__mobile *,
html body .foot_wrap p, html body .foot_wrap li, html body .foot_wrap a{
  font-size:var(--fs-footer) !important; font-weight:400 !important;
  line-height:var(--lh-footer) !important; letter-spacing:0 !important;
}

/* ── 4. 색 ─────────────────────────────────────────────────────────────────── */
html body .cont_wrap, html body .content_wrap{ color:var(--c-text); }
html body .dn-faq{ background:var(--c-bg-soft) !important; }
html body .dn-geo-block, html body .dn-geo-card,
html body .breast-hub__card, html body .breast-related-card,
html body .breast-bottom-card, html body .dn-insight-card{
  background:var(--c-bg-soft) !important;
}

/* ── 5. 형태 — radius 0 · shadow none · 구분선 1px ─────────────────────────── */
html body .content_wrap *:not(.quick-icon):not(.m-nav-icon):not([class*="round"]):not([class*="circle"]):not([class*="avatar"]):not(img):not(svg):not(.hac-dot),
html body .dn-faq__item, html body .dn-geo-block, html body .dn-geo-card,
html body .breast-hub__card, html body .breast-related-card, html body .breast-bottom-card,
html body .dn-insight-card, html body .dn-implant-panel, html body .dn-article-card,
html body .cont_box1, html body table, html body table td, html body table th{
  border-radius:0 !important;
  box-shadow:none !important;
}
/* 원형 아이콘·프로필은 예외 */
html body .quick-icon, html body .m-nav-icon,
html body [class*="avatar"], html body [class*="circle"], html body .dn-insight-arrow{
  border-radius:50% !important;
}
/* 구분선 굵기·색 통일 */
html body .content_wrap *:not(img):not(svg), html body .dn-faq__item,
html body .dn-geo-block, html body .dn-geo-card, html body .breast-hub__card,
html body .breast-related-card, html body .breast-bottom-card, html body table td, html body table th{
  border-color:var(--c-line) !important;
}
html body .dn-faq__item{ border-width:0 0 1px 0 !important; border-style:solid !important; }

/* ── 6. 버튼 3종 ───────────────────────────────────────────────────────────── */
html body .dn-btn,
html body .head-cta-btn,
html body .dn-kakao-cta__btn,
html body .breast-hub__cta-btn,
html body .breast-bottom-card__button,
html body .dn-faq__more,
html body .m-menu-cta{
  font-size:var(--fs-button) !important; font-weight:600 !important;
  line-height:var(--lh-button) !important; letter-spacing:0 !important;
  border-radius:0 !important; box-shadow:none !important;
  padding:16px 32px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  text-decoration:none !important;
}
/* primary — 검정 바탕에 흰 글자. .breast-hub__cta-btn 저대비 1.16:1 이 여기서 해소된다 */
html body .dn-btn,
html body .breast-hub__cta-btn,
html body .dn-kakao-cta__btn--reserve,
html body .breast-bottom-card__button,
html body .m-menu-cta{
  background:var(--c-accent) !important; color:#ffffff !important; border:none !important;
}
/* secondary — 테두리형 */
html body .head-cta-btn,
html body .dn-faq__more,
html body .dn-outline-btn, html body .sns_btn_styled{
  background:transparent !important; color:var(--c-text) !important;
  border:1px solid var(--c-accent) !important;
}

/* ── 7. 레이아웃 — 컨테이너 1종 · 섹션 여백 2종 · gap 1종 ──────────────────── */
html body .dn-geo-content,
html body .dn-geo-block,
html body .dn-faq__inner,
html body .dn-natural-results__inner,
html body .dn-doctor-intro,
html body .dn-copy-media__inner,
html body .dn-articles__grid,
html body .dn-author-signature,
html body .dn-sub-hero__intro-inner,
html body .breast-hub,
html body .breast-related-posts__container,
html body .breast-bottom-links__container,
html body .dn-insight-section > .cont,
html body .dn-procedures__grid,
html body .dn-cards .cont,
html body .dn-articles .cont,
html body .dn-container,
html body .cont_wrap > .cont_box1,
html body .site-related{
  max-width:var(--container) !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:var(--gutter) !important; padding-right:var(--gutter) !important;
  box-sizing:border-box !important;
}
/* 섹션 상하 여백 */
html body .dn-insight-section,
html body .dn-geo-content,
html body .dn-natural-results,
html body .dn-implant-section,
html body .breast-related-posts,
html body .breast-bottom-links,
html body .dn-faq{
  padding-top:var(--sec-y) !important; padding-bottom:var(--sec-y) !important;
}
html body .dn-geo-block{ margin-top:var(--sec-y-tight) !important; margin-bottom:var(--sec-y-tight) !important; }
/* 블록 사이·제목 아래 */
html body .dn-geo-content__block{ margin-bottom:var(--block-y) !important; }
html body .dn-geo-content__block > h2, html body .dn-geo-block > h2{ margin-bottom:16px !important; }
html body .dn-geo-content__block > p, html body .dn-geo-block > p{ margin-bottom:16px !important; }
/* gap 1종 */
html body .dn-articles__grid, html body .dn-procedures__grid,
html body .breast-related-posts__grid, html body .breast-bottom-links__grid,
html body .breast-hub__subtopics, html body .dn-implant-panel__grid,
html body .dn-implant-methods, html body .dn-cards .cont{
  gap:var(--gap) !important; align-items:stretch !important;
}
/* 카드 바닥선 맞추기 — /eye 카드 3장 높이가 제각각이던 것 */
html body .breast-related-card, html body .breast-bottom-card,
html body .dn-geo-card, html body .dn-insight-card{
  display:flex !important; flex-direction:column !important; height:100% !important;
}
html body .breast-related-card > a:last-child,
html body .breast-bottom-card__button{ margin-top:auto !important; }

/* 정렬축 하나 — 본문 영역 제목은 왼쪽.
   히어로·CTA·FAQ 표제처럼 «가운데가 설계인 곳»만 예외로 둔다 */
html body .content_wrap .cont_wrap h2:not(.dn-kakao-cta__heading):not(.dn-faq__title):not(.dn-sub-hero__title):not(.dn-page-hero__title):not(.doctor-media__title),
html body .content_wrap .cont_wrap h3:not(.dn-kakao-cta__heading),
html body .dn-geo-content__block > h2, html body .dn-geo-block > h2,
html body .content_wrap .cont_wrap > p,
html body .dn-natural-results__body, html body .dn-natural-results__text{
  text-align:left !important;
}

/* ── 8. 모바일 ─────────────────────────────────────────────────────────────── */
@media (max-width:768px){
  :root{
    --fs-display:30px; --fs-h1:28px; --fs-h2:22px; --fs-h3:18px; --fs-h4:17px;
    --fs-lead:17px;  --fs-body:16px; --fs-body-sm:14px; --fs-caption:13px;
    --fs-eyebrow:12px; --fs-button:15px; --fs-nav:15px; --fs-footer:13px;
    --gutter:20px; --sec-y:48px; --sec-y-tight:32px; --block-y:24px; --gap:16px;
    --container:100%;
  }
  html body .dn-geo-content__block > p, html body .dn-geo-block > p{ margin-bottom:14px !important; }
  html body .dn-geo-content__block > h2, html body .dn-geo-block > h2{ margin-bottom:12px !important; }
  html body .dn-btn, html body .head-cta-btn, html body .dn-kakao-cta__btn,
  html body .breast-hub__cta-btn, html body .breast-bottom-card__button,
  html body .dn-faq__more, html body .m-menu-cta{ padding:14px 24px !important; }
}

/* ── 9. 잔여 회수 — 화면에서 확인한 이탈만 이름을 대어 회수한다 ───────────────
   (12지면 렌더에서 읽은 색·간격이다) */

/* 9-1. 인라인 요소는 «글자 블록의 색»을 물려받는다.
   어두운 바탕 위 흰 글자도 그대로 흰색을 물려받으므로 글자가 사라지지 않는다. */
html body :where(.content_wrap) :where(span,strong,b,em,i,small,mark,u,code,sub,sup,time):where(:not([style*="background"]):not([style*="color"])){
  color:inherit !important;
}
/* :not() 을 :where() 로 다시 감싼 이유 — 그냥 쓰면 특이도가 올라가 위의 계층 규칙을 이겨버린다.
   제외 대상은 자기 style 속성에 배경·색을 직접 든 인라인 요소다. 예 = 번호 원형 배지
   (`background:#292929;color:#fff`) — 물려받게 두면 검정 원 안에 검정 숫자가 된다. */

/* 9-2. 검정 계열 6종(6·27·41·47·17·22) → 본문색 하나로 */
html body :where(.content_wrap) :where(
  .dn-geo-content__block ul li, .dn-geo-content__block ol li,
  .dn-geo-block ul li, .dn-geo-block ol li,
  .breast-hub__table-wrap ol li, .breast-hub__table-wrap ul li,
  .breast-hub__definition p, .breast-hub__process p,
  .cm-hub__faq-body p, .cm-hub__faq-body li,
  .dn-geo-content__block details p, .dn-geo-block details p,
  .rr-card__title, .dn-loc-info__val, .dn-loc-info__label){
  color:var(--c-text) !important;
}

/* 9-3. 회색 계열 8종(68·94·95·122·138·168·208·148) → 보조색 하나로.
   #a8a8a8·#8a8a8a 는 흰 바탕에서 AA(4.5:1)에 미달했다 — 이 회수가 곧 접근성 수정이다 */
html body :where(.content_wrap) :where(
  .casebook-card__specs dt, .casebook-card__volume-label, .casebook-card__patient span,
  .casebook-swipe-hint, .rr-faq__mark, .rr-faq__body,
  .hani-why__facts dt, .hani-dr__sign-en,
  .about-hub__service-link span, .about-hub__doctor-meta,
  .dn-testimonial-card__stars, .dn-testimonial-card__author,
  .bna-angle-btns button){
  color:var(--c-text-sub) !important;
}

/* 9-4. 대비 1.0~2.4 — 글자가 «보이지 않던» 곳 */
html body .medi_menu_list li > span,
html body .medi_menu_list li > span > small{ color:var(--c-text) !important; }
html body .dn-hero__eyebrow,
html body .site-ba-cta__b,
html body .dn-sub-hero figcaption,
html body .dn-hero__figure figcaption{ color:var(--c-text-on-invert) !important; }
html body .hani-why__cap b, html body .hani-why__cap i{ color:var(--c-text) !important; }
html body .dn-cards__scrollbar-arrow{ color:var(--c-text-sub) !important; }

/* 9-5. gap — 격자·목록은 표준값, 카드 «안쪽» 세로 쌓기는 8px 하나로 */
html body :where(.content_wrap) :where(
  .doctor-media__list, .cm-hub__section-head, .dn-loc-info,
  .hani-ch__list, .site-related__grid, .casebook-finder__row,
  .dn-testimonials__track, .dn-natural-results__inner, .cm-hub__selfie-grid,
  .cm-hub__rv-list, .breast-hub__steps, .dn-cards__list){
  gap:var(--gap) !important;
}
html body :where(.content_wrap) :where(
  .site-related__link, .dn-rv-card__content, .casebook-card__specs > div,
  .casebook-card__patient, .casebook-card__volume, .casebook-card__volume-trio,
  .casebook-finder__group, .dn-loc-info__item, .dn-loc-map-nav,
  .bna-angle-btns, .hani-why__facts > div, .hani-dr__sign,
  .dn-implant-panel__features, .dn-hero__cta-wrap){
  gap:8px !important;
}
@media (max-width:768px){
  html body :where(.content_wrap) :where(
    .doctor-media__list, .cm-hub__section-head, .dn-loc-info,
    .hani-ch__list, .site-related__grid, .casebook-finder__row,
    .dn-testimonials__track, .dn-natural-results__inner, .cm-hub__selfie-grid,
    .cm-hub__rv-list, .breast-hub__steps, .dn-cards__list){ gap:var(--gap) !important; }
}

/* 9-6. 배경 — 회백색 5종(252·248·246·244·242)과 밝은회색 3종을 두 값으로 */
html body :where(.content_wrap) :where(
  .site-related__link, .casebook-card, .bna-angle-btns button,
  .cm-hub__selfie-card, .cm-hub__rv-card-img, .dn-rv-card a > article,
  .breast-hub__definition, .breast-hub__cta, .breast-hub__table thead th){
  background-color:var(--c-bg-soft) !important;
}

/* ── 10. 어두운 바탕 위 글자 ─────────────────────────────────────────────────
   이 절은 맨 뒤에 있어야 한다. 위의 계층·색 규칙이 본문색(#0C0C0C)을 강제하는데,
   그 규칙이 어두운 블록 안까지 닿으면 검정 위 검정이 되어 글자가 사라진다.
   어두운 컨테이너에만 밝은 글자를 되돌린다(대비 1.0~1.3 → 15:1 이상). */
html body .content_wrap .dn-hero__image-wrap,
html body .content_wrap .dn-hero__image-wrap *:not(.dn-hero__cta-btn),
html body .content_wrap .dn-hero__text, html body .content_wrap .dn-hero__text *:not(.dn-hero__cta-btn),
html body .content_wrap .dn-sub-hero__overlay, html body .content_wrap .dn-sub-hero__overlay *,
html body .content_wrap .dn-card__inner article, html body .content_wrap .dn-card__inner article *,
html body .content_wrap .dn-proc-card__img-wrap, html body .content_wrap .dn-proc-card__img-wrap *,
html body .content_wrap .site-ba-cta, html body .content_wrap .site-ba-cta *,
html body .content_wrap .beforeafter-bottom-cta, html body .content_wrap .beforeafter-bottom-cta *,
html body .content_wrap .ev-monthly__countdown, html body .content_wrap .ev-monthly__countdown *,
html body .content_wrap .breast-hub__step-num, html body .content_wrap .breast-hub__step-num *,
html body .content_wrap .rr-pagination .check{
  color:var(--c-text-on-invert) !important;
}
/* 검정 바탕 버튼 안 글자는 순백 — primary 버튼 규칙과 같은 값으로 맞춘다 */
html body .content_wrap .breast-hub__cta-btn, html body .content_wrap .breast-hub__cta-btn *,
html body .content_wrap .dn-kakao-cta__btn, html body .content_wrap .dn-kakao-cta__btn *,
html body .content_wrap .breast-bottom-card__button, html body .content_wrap .breast-bottom-card__button *,
html body .content_wrap .dn-btn, html body .content_wrap .dn-btn *{
  color:#ffffff !important;
}

/* 10-b. 위 §10 이 너무 넓게 닿은 두 곳을 되돌린다 (확인한 예외) */
/* 사진 위 카드 캡션은 «순백»이 맞다 — #EDEDED 는 사진 위에서 흐려 보인다 */
html body .content_wrap .dn-card__inner article,
html body .content_wrap .dn-card__inner article *{ color:#ffffff !important; }
/* 히어로 아이브로우 h1 — 위 h1 계층 규칙과 특이도가 같아 «나중에 오는» 이 규칙이 이긴다 */
html body .content_wrap .dn-hero__text h1.dn-hero__eyebrow{ color:var(--c-text-on-invert) !important; }
/* 히어로 CTA 두 개는 색을 건드리지 않는다 — 하나는 사진 위 흰 테두리 버튼,
   하나는 밝은 바탕에 검정 글자로 원래부터 짝이었다.
   §10 셀렉터에서 `:not(.dn-hero__cta-btn)` 로 빼 두었다(크기만 §11-2 가 맞춘다). */

/* ── 11. 마지막 회수 — 85지면 전수 렌더에서 남은 이탈 28종 ────────────────────
   화면에서 읽은 값만 적는다. 이름을 못 댄 것은 남겨 둔다. */

/* 11-1. 클래스가 없는 익명 div — 여기가 13.5px·16.8px 같은 «떠도는 값»의 소굴이었다.
   :where() 안이라 특이도 0 → 이름 있는 계층 규칙은 전부 이 규칙을 이긴다. */
html body :where(.content_wrap) :where(div:not([class])){
  font-size:var(--fs-body) !important; line-height:var(--lh-body) !important;
  letter-spacing:var(--ls-body) !important;
}

/* 11-2. 버튼 계열로 편입 */
html body .content_wrap .dn-insight-arrow,
html body .content_wrap .dn-implant-tab,
html body .content_wrap .blog-search-tag,
html body .content_wrap .board_page_link,
html body .content_wrap .form_policy_btn,
html body .content_wrap .dn-hero__cta-btn,
html body .content_wrap .dn-view-more-btn,
html body .content_wrap .dn-loc-map-nav__btn{
  font-size:var(--fs-button) !important; font-weight:600 !important;
  line-height:var(--lh-button) !important;
}

/* 11-3. 소제목 계열로 편입 */
html body .content_wrap .cont_sub_title,
html body .content_wrap .cont_text_title,
html body .content_wrap .cert_faq_q,
html body .content_wrap .casebook-card__title,
html body .content_wrap .dn-loc-split__title,
html body .content_wrap .dn-loc-gallery__title,
html body .content_wrap .dn-loc-transport__title{
  font-size:var(--fs-h3) !important; font-weight:var(--fw-h3) !important;
  line-height:var(--lh-h3) !important; letter-spacing:var(--ls-h3) !important;
}

/* 11-4. 본문 계열로 편입 */
html body .content_wrap .cont_text p,
html body .content_wrap .rr-faq__body,
html body .content_wrap .dn-tenets__item p,
html body .content_wrap .dn-loc-info__label,
html body .content_wrap .dn-loc-info__val,
html body .content_wrap .ev-monthly__countdown,
html body .content_wrap .rv-hint,
html body .content_wrap .rv-times-label,
html body .content_wrap .rv-empty{
  font-size:var(--fs-body) !important; font-weight:400 !important;
  line-height:var(--lh-body) !important; letter-spacing:var(--ls-body) !important;
}

/* 11-5. 라벨 계열로 편입 */
html body .content_wrap .prac_section_label,
html body .content_wrap .rv-dow span,
html body .content_wrap .blog-card__meta{
  font-size:var(--fs-eyebrow) !important; font-weight:600 !important;
  line-height:var(--lh-eyebrow) !important; letter-spacing:var(--ls-eyebrow) !important;
}
/* 장식용 큰 번호 */
html body .content_wrap .prac_card_num{
  font-size:var(--fs-h1) !important; font-weight:var(--fw-h1) !important; line-height:1 !important;
}

/* 11-6. 세리프 잔재 — 파일이 없어 이미 Georgia 로 떨어져 있던 곳.
   병원 국문 지면에 세리프를 남길 이유가 없다(§1 판단). 크기·자간은 건드리지 않는다. */
html body .content_wrap .dn-hero__heading,
html body .content_wrap .dn-hero__sub,
html body .content_wrap .cont_title,
html body .content_wrap .sub_box .cont_title,
html body .content_wrap .rr-faq__mark,
html body .content_wrap .dn-loc-split__title,
html body .content_wrap .dn-loc-gallery__title,
html body .content_wrap .dn-loc-transport__title,
html body .content_wrap .dn-loc-cta__text,
html body .content_wrap .title, html body .content_wrap .title_c{
  font-family:var(--hani-font) !important;
}

/* 11-7. 홈은 combined-home 이 별도 CSS 라 `.dn-heading` 을 더 센 특이도로 잡고 있었다.
   홈만 34px 로 남으면 홈만 다른 사이트가 된다. */
html body .content_wrap .dn-heading,
html body .content_wrap .dn-articles .dn-heading,
html body .content_wrap .dn-insight-section .dn-heading,
html body .content_wrap .dn-procedures .dn-heading,
html body .content_wrap .dn-cards .dn-heading,
html body .content_wrap .dn-testimonials .dn-heading,
html body .content_wrap .dn-realreview .dn-heading,
html body .content_wrap .hani-dr__name,
html body .content_wrap .hani-why__h{
  font-size:var(--fs-h2) !important; font-weight:var(--fw-h2) !important;
  line-height:var(--lh-h2) !important; letter-spacing:var(--ls-h2) !important;
  max-width:none !important;
}

/* 11-7b. Same split on the section eyebrow: the home stylesheet pins 13px through
   per-wrapper selectors, so labels outside those wrappers fell back to the token and
   the two values diverged on mobile. One source wins here. */
html body .content_wrap .dn-label,
html body .content_wrap .hani-dr__label,
html body .content_wrap .dn-faq__eyebrow{
  font-size:var(--fs-eyebrow) !important; font-weight:600 !important;
  line-height:var(--lh-eyebrow) !important; letter-spacing:var(--ls-eyebrow) !important;
}

/* 11-8. gap 잔여 */
html body :where(.content_wrap) :where(.dn-geo-content__block > div, .blog-card__meta,
  .dn-kakao-cta__btns, .breast-hub__cta > div, .dn-geo-content__block > div > a){
  gap:8px !important;
}

/* ── 12. 본문 16px 승격으로 생긴 회귀 2건 ─────────────────────────────
   본문을 16px 으로 올리자 고정 높이 카드 두 곳에서 글자가 넘쳐 이웃과 겹쳤다(375).
   그 두 곳은 본문이 아니라 보조 설명이므로 body-sm 계층이 맞다. */
html body .content_wrap .dn-insight-card__desc,
html body .content_wrap .casebook-card__specs dt,
html body .content_wrap .casebook-card__specs dd,
html body .content_wrap .casebook-card__diff-label,
html body .content_wrap .casebook-card__volume-label,
html body .content_wrap .casebook-card__volume-trio{
  font-size:var(--fs-body-sm) !important; font-weight:400 !important;
  line-height:var(--lh-body-sm) !important;
}

/* ── 13. 히어로 요약문이 컨테이너 밖에 서 있었다 ───────────────────────────────
   `/eye` 1440 — `.dn-page-hero__sub` 이 max-width 없이 1440px 을 그대로 써서
   화면 끝에서 끝까지 갔다. 한 지면 안에 좌측 시작선이 셋(8px · 207px · 257px)이던
   원인이 이것이다. 다른 블록과 같은 축(1120px)으로 세운다. */
html body .content_wrap .dn-page-hero__title,
html body .content_wrap .dn-page-hero__sub,
html body .content_wrap .dn-page-hero__label,
html body .content_wrap .dn-sub-hero__text{
  max-width:var(--container) !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:var(--gutter) !important; padding-right:var(--gutter) !important;
  box-sizing:border-box !important;
}

/* ── 14. 홈 히어로 — 표준 밖 예외 3가지 ──────────────────────────────────────
   홈은 combined-home 이라 다른 지면과 같은 규칙을 먹이면 상단이 무너진다.
   여기 세 줄이 없으면 홈만 다르게 보인다. */

/* 14-1. `h1.dn-hero__eyebrow` 는 «화면용 제목이 아니라 SEO 문구»다.
   원래 13.26px/300/자간 넓게 로 거의 안 보이게 두었던 것을 h1 표준(40/700)이 끌어올려
   히어로 상단이 두 줄 제목처럼 보였다 → 원래 모양으로 되돌리고 표준 밖에 둔다. */
html body .content_wrap .dn-hero__text h1.dn-hero__eyebrow,
html body .content_wrap h1.dn-hero__eyebrow{
  font-size:13px !important; font-weight:300 !important;
  letter-spacing:0.2em !important; line-height:1.6 !important;
  color:rgba(255,255,255,0.8) !important;
}

/* 14-2. `p.dn-hero__sub` 은 히어로 부제다(원래 28.8px/700).
   본문 규칙이 17px/400 으로 끌어내려 히어로가 헐거워졌다 → 섹션 제목 계층으로 올린다. */
html body .content_wrap .dn-hero__text p.dn-hero__sub,
html body .content_wrap p.dn-hero__sub{
  font-size:var(--fs-h2) !important; font-weight:var(--fw-h2) !important;
  line-height:var(--lh-h2) !important; letter-spacing:var(--ls-h2) !important;
  color:#ffffff !important; font-style:normal !important;
}

/* 14-3. 히어로 대문 영문은 크기·자간을 그대로 두고 글꼴만 Pretendard 로(§11-6).
   크기를 건드리지 않는다 — 여기를 만지면 첫 화면 구성이 통째로 바뀐다. */

/* ── 15. 장식 글꼴이 남은 마지막 9요소 ─────────────────────────────────────────
   `/about/doctor` 의 원장 이름 2개와 `/about/safety` 의 STEP 01~07 7개가 아직
   Cafe24Danjunghae 손글씨체로 그려지고 있었다.
   §2 의 `.title`·`.title_c` 규칙보다 그쪽 특이도가 높아 빠져나갔다. */
html body .content_wrap [class*="title"],
html body .content_wrap [class*="title"] *,
html body .content_wrap span.big,
html body .content_wrap .big,
/* 아래 두 줄이 실제 원인이다 — 그쪽 CSS 가 특이도 (0,5,3)·(0,3,1) 로 걸어 두어
   `[class*="title"] *`(0,2,3) 로는 못 이겼다. 셀렉터를 그대로 받아 한 단계 올린다. */
html body .minutes03 .cont_list ul li.list_wrap .cont_sub_title span,
html body .minutes08_cont .cont_text_title > span{
  font-family:var(--hani-font) !important;
}


/* ── 16. 포인트 컬러 — 딥그린을 어디에 안 칠했는가로 읽히게 ────────────────

   원칙 — 색을 아낀다.
     · 꽉 채워 칠하는 것은 주 버튼 하나뿐이다. 나머지는 선·글자·아이콘만 물들인다
     · 흰 바탕 + 먹빛 글자라는 이 사이트의 골격은 그대로 둔다
     · 한 화면에 딥그린이 서는 자리는 3~5곳. 그 이상은 포인트가 아니라 배경이다

   구조 — 아래 세 묶음으로 나뉜다.
     ①공통(16-1~16-9) — 85지면 전부. 홈과 하위 지면에 같은 클래스가 있는 부품이라
       셀렉터에 `body.hani-home` 을 걸지 않는다. 같은 부품이 지면마다 다른 색이면
       하나의 홈페이지로 안 읽힌다.
     ②홈 전용(16-10~16-11) — 홈에만 있는 부품(히어로 CTA·채널 푸터·원장 서명).
     ③하위 지면(16-12~16-19) — 홈에 없는 부품(상담 CTA 블록·탭·인사이트 카드·관련 글).

   세로바·하단 고정바·AI 알약은 js/hani-consult-bar.js 가 같은 토큰으로 칠한다.
   그쪽은 CSS 가 아니라 JS 가 주입하므로 이 절에서 중복해 쓰지 않는다.
   ============================================================================ */

/* ── ① 공통 — 85지면 전부 ────────────────────────────────────────────────── */

/* 16-1. 상단바 CTA — 전 지면 공통 상담 접점.
   테두리와 글자만 물들인다(채우지 않는다). 흰 바탕 위 8.08:1. */
html body .head-cta-btn{
  color:var(--c-point) !important;
  border:1px solid var(--c-point) !important;
  background:transparent !important;
}
html body .head-cta-btn:hover{
  background:var(--c-point) !important; color:#ffffff !important;
  border-color:var(--c-point) !important;
}

/* 16-2. 섹션 눈썹 글자 — 제목 위 작은 영문·한글 라벨만 딥그린으로.
   제목 글자(`.dn-heading`)는 먹빛으로 둔다. 지면당 섹션이 4~8개라
   제목까지 물들이면 포인트가 아니라 배경이 된다. */
html body .content_wrap .dn-label,
html body .content_wrap .dn-faq__eyebrow,
html body .content_wrap .about-hub__hero-eyebrow,
html body .content_wrap .breast-related-posts__eyebrow{
  color:var(--c-point) !important;
}

/* 16-3. 더 보기 계열 링크·버튼 — 테두리와 글자만. 채우지 않는다.
   얹으면 그때 채워진다 — 눌리는 것이라는 신호를 색으로 준다. */
html body .content_wrap .dn-view-more-btn,
html body .content_wrap .ev_viewmore,
html body .content_wrap .hani-ch__foot a,
html body .content_wrap .dn-mobile-viewall a{
  color:var(--c-point) !important;
  border-color:var(--c-point) !important;
}
html body .content_wrap .hani-ch__foot a:hover,
html body .content_wrap .dn-mobile-viewall a:hover{
  background:var(--c-point) !important; color:#ffffff !important;
  border-color:var(--c-point) !important;
}

/* 16-4. FAQ 블록 — 면은 연한 그린으로. 딥그린으로 채우지 않는다.
   #eaf2ee 위 먹빛 본문 대비 15:1 이상이라 글자가 오히려 더 또렷해진다.
   85지면 전부에 FAQ 가 있고 지면당 15~25문이다 — 여기가 이 사이트에서
   가장 넓은 면이라 채우지 않는다는 원칙이 가장 중요한 자리다. */
html body .dn-faq{ background:var(--c-point-tint) !important; }
html body .dn-faq .dn-faq__item{ border-color:var(--c-point-line) !important; }
/* 열린 문항의 질문만 딥그린 — 지금 어디를 보고 있는지 색으로 알린다 */
html body .dn-faq__item.is-open .dn-faq__q,
html body .dn-faq__item[open] .dn-faq__q{ color:var(--c-point) !important; }
/* FAQ 더보기 — 눌리는 것은 `<summary>` 다. `.dn-faq__more` 는 접힌 질문들을 감싸는
   `<details>` 컨테이너라 여기 테두리를 두르면 상자가 두 겹으로 보인다. */
html body .dn-faq__more{ border:0 !important; }
html body .dn-faq__more > summary{
  color:var(--c-point) !important; border:1px solid var(--c-point) !important;
  background:transparent !important;
}
html body .dn-faq__more > summary:hover{
  background:var(--c-point) !important; color:#ffffff !important;
}

/* 16-5. 가로 스크롤바 — 손잡이만 딥그린. 트랙은 회색 그대로.
   지금 어디쯤 보고 있는지 알리는 «움직이는 한 조각»이라 색이 값어치를 한다. */
html body .dn-cards__scrollbar-thumb,
html body .dn-testimonials__scrollbar-thumb,
html body .dn-insight-scrollbar__thumb{ background:var(--c-point) !important; }
html body .dn-cards__scrollbar-arrow:hover,
html body .dn-insight-arrow:hover{ color:var(--c-point) !important; border-color:var(--c-point) !important; }

/* 16-6. 본문 링크 hover — 밑줄과 글자만. */
html body .content_wrap a:not(.dn-btn):not(.head-cta-btn):not(.dn-hero__cta-btn):not(.dn-faq__more):not(.dn-kakao-cta__btn):hover{
  color:var(--c-point) !important;
  text-decoration-color:var(--c-point) !important;
}

/* 16-7. 카드 — 얹혔을 때 아래선 한 줄만 딥그린으로 바뀐다.
   카드 배경을 칠하지 않는다. 격자 전체가 물들면 포인트가 사라진다. */
html body .dn-proc-card:hover .dn-proc-card__caption,
html body .dn-article-card:hover .dn-article-card__body,
html body .breast-related-card:hover{
  box-shadow:inset 0 -2px 0 var(--c-point) !important;
}

/* 16-8. 관련 사이트·관련 글 링크 — 얹었을 때만. 평상시는 먹빛이다. */
html body .site-related__link:hover,
html body .site-related__link:hover .site-related__name{
  color:var(--c-point) !important;
  border-color:var(--c-point) !important;
}

/* 16-9. 별점·강조 기호처럼 «이미 색이 있던 자리»는 그대로 둔다.
   AI 상담 표시등(--c-status-online)도 건드리지 않는다 — 초록 계열이라 서로 싸우지 않는다. */

/* ── ② 홈 전용 ──────────────────────────────────────────────────────────── */

/* 16-10. 히어로 CTA — 주 버튼 하나만 꽉 채운다.
   상담 예약(--outline)이 주 동선이고, 수술후기(--primary)는 사진 위라
   흰 테두리를 그대로 둔다. 사진 위에 딥그린 테두리를 두면 보이지 않는다. */
html body.hani-home .dn-hero__cta-btn--outline,
html body.hani-home .content_wrap .dn-hero__cta-btn--outline{
  background:var(--c-point) !important;
  border:2px solid var(--c-point) !important;
  color:#ffffff !important;
}
html body.hani-home .dn-hero__cta-btn--outline:hover{
  background:var(--c-point-deep) !important; border-color:var(--c-point-deep) !important;
}

/* 16-11. 원장 서명줄 — 이름 아래 한 줄만. */
html body .hani-dr__sign-en,
html body .dn-author-signature__text{ color:var(--c-point) !important; }

/* ── ③ 하위 84지면 ─────────────────────────────────────────────────────── */

/* 16-12. 상담 CTA 블록 — 지면 하단 상담 접점. 여기가 하위 지면의 주 동선이다.
   두 버튼 중 상담 문의만 채운다. 나머지 하나는 무채색으로 둬서 위계를 만든다 —
   종전에는 #0c0c0c 와 #191919 라 둘이 거의 같아 보여 무엇을 눌러야 할지 몰랐다.

   클래스 이름을 믿고 고르면 위계가 뒤집힌다. 화면에 그려지는 글자를 보고 고른다.
     `--kakao`  = 상담 문의하기   ← 주 동선. 블록 제목도 카카오톡 1:1 문의다
     `--reserve`= 전후사진 보기   ← 보조 동선. 이름과 달리 예약이 아니다
   흰 글자 위 8.08:1 (AAA). */
html body .dn-kakao-cta__btn--kakao{
  background:var(--c-point) !important;
  border-color:var(--c-point) !important;
  color:#ffffff !important;
}
html body .dn-kakao-cta__btn--kakao:hover{
  background:var(--c-point-deep) !important; border-color:var(--c-point-deep) !important;
}

/* 16-13. 시술 유형 탭 — 활성 탭만. 지금은 활성·비활성이 «둘 다 먹빛»이라
   어느 것을 보고 있는지 색으로 알 수 없다. 밑줄과 글자로만 알린다(채우지 않는다). */
html body .dn-implant-tab.is-active,
html body .dn-implant-tab[aria-selected="true"]{
  color:var(--c-point) !important;
  border-bottom-color:var(--c-point) !important;
  box-shadow:inset 0 -2px 0 var(--c-point) !important;
}

/* 16-14. 인사이트 카드 번호 — 01·02·03 같은 작은 순번만.
   제목·본문은 그대로 둔다. 회색(#515151)이던 것을 딥그린으로 올린다. */
html body .dn-insight-card__num,
html body .dn-insight-card__period{ color:var(--c-point) !important; }

/* 16-15. 관련 글 카드의 분류 라벨 — 카드 제목 위 작은 글자만. */
html body .breast-related-card__category{ color:var(--c-point) !important; }

/* 16-16. Answer-First 요약 블록 — AI 가 먼저 읽는 자리다.
   면을 칠하지 않고 «왼쪽 선 한 줄»만 딥그린으로 세운다. */
html body .answer-summary{
  border-left:3px solid var(--c-point) !important;
}

/* 16-17. 본문 안 강조 표시 — 이미 굵기로만 구분되던 자리.
   `<strong>` 전체를 물들이지 않는다. 문단마다 굵은 글자가 있어 배경이 된다. */

/* 16-18. 진행 단계 표시 — STEP 01 계열의 번호만. */
html body .step-num,
html body .dn-step__num{ color:var(--c-point) !important; }

/* 16-19. 표의 머리줄 밑선 — 가격표·비교표에서 머리와 몸을 가르는 한 줄만.
   셀 배경을 칠하지 않는다. 표가 통째로 물들면 숫자가 안 읽힌다. */
html body .content_wrap table thead tr{
  border-bottom:2px solid var(--c-point) !important;
}

/* ── ④ 병원소개·블로그·이벤트 계열 36지면 ────────────────────────────────
   이 지면들은 시술 지면과 부품이 다르다(상담 CTA 블록·인사이트 카드가 없다).
   그래서 위 절만으로는 딥그린이 지면당 4~8곳에 그쳐 홈·시술 지면과
   한 세트로 안 보인다. 여기서도 «눈썹과 라벨»만 물들인다 — 제목은 먹빛 그대로. */

/* 16-20. 지면 히어로 눈썹 — Doctor's Column · Notice 같은 13px 라벨.
   `.dn-sub-hero__eyebrow` 는 사진 위 흰 글자라 손대지 않는다(딥그린이면 안 보인다). */
html body .dn-page-hero__label{ color:var(--c-point) !important; }

/* 16-21. 원본 마크업에서 온 작은 분류 라벨 — 의료진 소개 · Location (12~14px).
   `.cont_title`(28~40px)·`.cont_text_title`(20px)은 제목이라 건드리지 않는다. */
html body .content_wrap .cont_title_info{ color:var(--c-point) !important; }

/* 16-22. 원장 미디어 출처 라벨 — 날짜는 회색으로 두고 출처만. */
html body .doctor-media__source{ color:var(--c-point) !important; }

/* 16-23. 블로그 — 카드 분류와 검색 태그. 카드 제목·요약은 그대로. */
html body .blog-card__cat{ color:var(--c-point) !important; }
html body .blog-search-tag:hover{
  color:var(--c-point) !important; border-color:var(--c-point) !important;
}
/* 필러 버튼은 «지금 고른 것 하나»만 채운다 — 나머지는 무채색이라 대비로 읽힌다 */
html body .blog-pillar-btn.is-active,
html body .blog-pillar-btn.active,
html body .blog-pillar-btn[aria-pressed="true"]{
  background:var(--c-point) !important; border-color:var(--c-point) !important;
  color:#ffffff !important;
}

/* 16-24. 이벤트·공지 — 분류 라벨과 남은 기간 숫자만. */
html body .ev-permanent__label,
html body .ev-permanent__item-tag,
html body .ev-monthly__countdown-num{ color:var(--c-point) !important; }

/* 16-25. 목록 페이지네이션 — 지금 보고 있는 쪽수 하나만. */
html body .number_box .on,
html body .number_box .active,
html body .number_box [aria-current="page"]{ color:var(--c-point) !important; }

/* 16-26. 가격표 — 머리줄 밑선 한 줄. `.content_wrap` 밖에 놓인 표까지 닿게 한다. */
html body .cc-table thead tr{ border-bottom:2px solid var(--c-point) !important; }

/* ── 17. 사진 위에 얹힌 글자 — 읽히는 색으로 되돌린다 ─────────────────────
   홈 눈성형 카드 6장의 제목이 `position:absolute; z-index:2` 로 사진 위에 얹혀 있는데
   글자색이 #0c0c0c 였다. 사진이 어두운 카드(눈매교정·눈재수술·트임성형)에서는
   대비가 1.x 라 사실상 안 보인다.

   사진 위 글자는 흰색이 원칙이다 — 어떤 사진이 와도 읽히려면 색 하나로는 부족해
   아래쪽에 얇은 어둠 한 겹을 깔고 그 위에 흰 글자를 얹는다.
   히어로처럼 면 전체를 덮지 않는다. 카드 아래 45%만이다. */
html body .dn-proc-card__img-wrap::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:62%;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 34%, rgba(0,0,0,.24) 62%, rgba(0,0,0,.62) 100%);
  pointer-events:none; z-index:1;
}
html body .dn-proc-card .dn-proc-card__caption,
html body .dn-proc-card .dn-proc-card__caption *,
html body .dn-proc-card .dn-proc-card__title,
html body .content_wrap .dn-proc-card .dn-proc-card__title{
  color:#ffffff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
/* 사진 위에서는 hover 밑줄도 딥그린이 아니라 흰색이다 —
   딥그린 8.08:1 은 흰 배경 위의 값이고, 어두운 사진 위에서는 묻힌다. */
html body .dn-proc-card:hover .dn-proc-card__caption{
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.9) !important;
}

/* 17-2. 카카오 노란 버튼 — 글자를 잉크로 되돌린다.
   `/story/before-after` 의 카카오톡 상담 버튼이 #fee500 위 #ededed 라 대비 1.09 였다.
   사실상 보이지 않는다. HTML 인라인에는 `color:#131313` 이 옳게 적혀 있는데
   어두운 면 위 글자 규칙이 `!important` 로 덮은 것이다 — 노란 면은 어두운 면이 아니다.
   #131313 위 #fee500 대비 13.4:1 (AAA). */
html body .content_wrap .site-ba-cta__b,
html body .content_wrap [style*="FEE500"],
html body .content_wrap [style*="fee500"],
html body .cont_wrap .site-ba-cta__b,
html body .cont_wrap [style*="FEE500"]{
  color:#131313 !important;
  text-shadow:none !important;
}
html body .content_wrap .site-ba-cta__b *,
html body .content_wrap [style*="FEE500"] *,
html body .content_wrap [style*="fee500"] *,
html body .cont_wrap .site-ba-cta__b *{ color:#131313 !important; }

/* 18. 모바일 고정 셸 — 첫 화면을 덜 먹게 한다.
   상단 헤더 81px + 하단 상담바 59px = 140px 가 812px 화면의 17% 를 먼저 먹고 시작했다.
   줄이는 곳은 헤더다 — 하단 상담바는 환자가 상담으로 가는 길이라 칸도 높이도 건드리지 않는다.
   헤더 안 실제 바닥은 아이콘 행 44px(터치 하한)이고, 나머지는 전부 여백이었다.
   48px 행 + 위아래 4px = 57px 로, 로고 잉크(24px)와 아이콘 행(44px) 둘 다 그대로 들어간다. */
@media (max-width:760px){
  html body .head_wrap{ padding:4px 0 !important; }
  html body .head.head_after.dn-nav-wrap{ height:48px !important; }
  /* 로고는 둘레 여백만 걷는다 — 보이는 로고 크기는 그대로다.
     여백을 걷으면 로고 링크가 26px 이 되어 터치 목표 하한 44px 을 깨므로,
     여백 대신 링크 자체에 44px 을 보장한다. */
  html body .head.head_after.dn-nav-wrap .head_logo a{
    display:flex !important; align-items:center !important; min-height:44px !important;
  }
  html body .head.head_after.dn-nav-wrap .head_logo a img{ padding:0 !important; }
  /* 서랍은 헤더 바로 아래에서 시작한다 — 헤더 높이를 바꿨으니 함께 옮긴다. */
  html body .head_right_wrap{ top:57px !important; height:calc(100vh - 57px) !important; }
}