/* =========================================================
   R2 Dawn — Impeccable 개선 레이어 (시안 · 미적용)
   생성: 2026-08-31  |  도구: Impeccable v4.1.1 detector
   근거: https://ssokssokdental.com/ 실측 — 데스크탑 78건 / 모바일 119건

   이 파일은 r2-dawn.css 를 한 줄도 고치지 않는다.
   뒤에 로드되어 문제 값만 덮어쓰는 오버라이드 레이어다.
   승인 시 이 값들을 r2-dawn.css 본체에 병합하면 된다.
   ========================================================= */

/* ---------------------------------------------------------
   1. 색 대비 — WCAG AA 4.5:1 미달 117건의 뿌리
   실측: --rust 4.48:1, --gold-deep 4.4:1 (둘 다 아슬하게 미달)
   색상(hue)은 유지하고 명도만 내려 dawn 톤을 지킨다.
   검증: paper #f5f1e8 / paper-deep #ebe4d4 / #e1ded5 / #efe8d8
         네 가지 배경 전부에서 4.6:1 이상.
   --------------------------------------------------------- */
.r2 {
  --rust: #8f502d;       /* was #a45c34 — 4.48 → 5.56 (paper) / 4.66 (최악 배경) */
  --gold-deep: #785c3b;  /* was #8a6a44 — 4.40 → 5.49 (paper) / 4.60 (최악 배경) */
}

/* 흰 글자 + 금색 버튼 = 2.4:1. 실질적으로 안 읽힌다.
   금색은 브랜드 색이므로 버튼을 어둡게 만들지 않고 글자를 잉크로 바꾼다 → 7.6:1.
   동시에 AI 티 1순위인 유색 발광 그림자(dark-glow)를 중성 그림자로 교체. */
.r2 .r2-cta__btn {
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(26, 20, 16, .10), 0 8px 20px -12px rgba(26, 20, 16, .30);
}
.r2 .r2-cta__btn:hover { color: var(--ink); }
.r2 .r2-cta__btn::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center/contain no-repeat;
  opacity: 1;
}

/* 어두운 바닥 위 회색 글자 2.6:1 → 5.8:1 */
.r2 .r2-footer,
.r2 .r2-footer * { --ts-footer-muted: #9a9086; }
.r2 [style*="color:#5a5a5a"],
.r2 .r2-footer small,
.r2 .r2-footer .mono { color: #9a9086 !important; }

/* ---------------------------------------------------------
   2. 마이크로 라벨 — 10px 기능 텍스트 30건
   'CREDENTIALS · 증거', 'FAQ · 처음 오시는 분들께', '마곡역 4번 출구 42m'…
   전부 기능 텍스트다. 11px 는 가독성 하한선이지 취향이 아니다.
   자간도 같이 줄인다 — 크기를 키우면서 자간을 유지하면 줄이 넘친다.
   --------------------------------------------------------- */
.r2 .mono,
.r2 .r2-hero__kicker,
.r2 .r2-hero__caption,
.r2 .r2-hero__chapter,
.r2 .r2-hero__scroll,
.r2 .r2-trust__kicker,
.r2 .r2-pillar__chip,
.r2 .r2-scene__cite b,
.r2 .r2-director__label,
.r2 .r2-director__name span,
.r2 .r2-video__label,
.r2 .r2-visit__mapLabel,
.r2 .r2-nav__brand span,
.r2 .r2-mn__logo a span,
.r2 .r2-mn__cta .mono,
.r2 .r2-nav__cta .mono,
.r2 .r2-prodnote .mono,
.r2 .r2-prodnote div,
.r2 .r2-hero__rec { font-size: 11.5px; }

.r2 .r2-hero__kicker { letter-spacing: .26em; }
.r2 .r2-hero__caption,
.r2 .r2-hero__chapter,
.r2 .r2-hero__scroll,
.r2 .r2-pillar__chip { letter-spacing: .2em; }

/* ---------------------------------------------------------
   3. 한글에 걸린 라틴 자간 — 실측 최악의 결함
   .r2-hero__brand 가 '서울쏙쏙치과'에 .28em 을 먹여
   화면에 '서 울 쏙 쏙 치 과' 로 찍히고 있었다.
   '마곡역 4번 출구 42m' 도 .2em 으로 '마 곡 역 4번 출 구' 가 된다.
   한글은 자모 조합 문자라 넓은 자간이 단어를 분해한다.
   라틴 대문자 라벨에만 넓은 자간을 남긴다.
   --------------------------------------------------------- */
.r2 .r2-hero__brand {
  font-size: 15px;
  letter-spacing: -.01em;
  text-transform: none;
  font-weight: 600;
}
.r2 .r2-hero__brand b {
  font-size: 12px;
  letter-spacing: -.005em;
  color: rgba(26, 20, 16, .72);
}

/* 본문에 걸린 0.06em 자간(wide-tracking)도 되돌린다 */
.r2 .r2-stat__label { letter-spacing: .14em; }

/* 같은 병 — 사진 캡션 '마 곡 의 새 벽 빛', 챕터 '2 막 · 안 도' */
.r2 .r2-hero__caption,
.r2 .r2-hero__chapter,
.r2 .r2-hero__kicker,
.r2 .r2-visit__mapLabel,
.r2 .r2-director__label { letter-spacing: -.005em; text-transform: none; }
.r2 .r2-hero__caption { font-weight: 500; }

/* ---------------------------------------------------------
   4. AI 슬롭 제거
   detector: radial-spotlight-glow · dark-glow ×4 ·
             numbered-section-labels ×4 · gpt-thin-border-wide-shadow
   --------------------------------------------------------- */

/* 4-a. CTA 섹션 뒤 떠 있는 유색 방사 후광 → 종이 그대로 두고
        가로 헤어라인 하나로 구획한다. 재료가 광원 노릇을 한다. */
.r2 .r2-cta {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

/* 4-b. 유색 발광 그림자 → 중성 입체 그림자 */
.r2 [class*="__card"],
.r2 .r2-trust__card,
.r2 .r2-pillar,
.r2 .r2-record {
  box-shadow: 0 1px 2px rgba(26, 20, 16, .06), 0 6px 16px -12px rgba(26, 20, 16, .22);
}

/* 4-c. 1px 테두리 + 80px 번짐 그림자 조합 제거 */
.r2 .r2-quizband__inner { box-shadow: 0 2px 10px -6px rgba(26, 20, 16, .18); }

/* 4-d. 섹션마다 붙는 01·02·03·04 번호표 — 페이지가 스스로 목차를 매기는
        AI 편집 습관이다. 위계와 리듬이 순서를 말하게 둔다. */
.r2 .r2-trust__num { display: none; }
.r2 .r2-trust__card { padding-top: 28px; }

/* ---------------------------------------------------------
   5-0. 히어로 구성 (데스크탑 공통)
   실측 1440×900: 리드 문장과 supporting 문장 사이에 200px 가까운
   빈 칸이 생긴다. copyWrap 이 1막/2막을 절대배치로 겹치느라
   min-height:300px 를 잡고 있는데, 2막 카피가 그보다 짧아서다.
   빈 칸은 여백이 아니라 사고다 — 리듬이 끊긴다.

   그리고 위쪽 레터박스 띠만 화면에 보이고 아래 띠는 접혀서,
   시네마틱 프레임이 아니라 렌더링 오류처럼 읽힌다.
   --------------------------------------------------------- */
.r2 .r2-hero__bar--top,
.r2 .r2-hero__bar--bot { display: none; }

/* 1막·2막이 둘 다 absolute 라 copyWrap 이 스스로 높이를 못 갖고
   min-height:300px 라는 고정값에 의지한다. 2막 카피가 그보다 짧으면
   그 차이가 그대로 빈 칸이 된다.
   최종 상태인 2막을 흐름 안에 두고, 1막을 그 위에 겹친다.
   높이는 내용이 정하고, 두 막 전환은 그대로 돈다. */
.r2 .r2-hero__copyWrap { min-height: 0; }
.r2 .r2-hero__copyB { position: relative; }
.r2 .r2-hero__copyA { pointer-events: none; }
.r2 .r2-hero__center { min-height: 0; align-items: center; }

/* 히어로가 880px 고정이라 카피가 짧아진 만큼 아래가 비어 버린다.
   높이를 내용에 맞춰 낮춘다 — 첫 화면이 짧아지는 만큼 아래 신뢰 섹션이 빨리 온다. */
.r2 .r2-hero { height: min(88vh, 800px); min-height: 620px; }

/* supporting 문장은 리드와 같은 주장을 두 번째로 반복한다
   ('치과마취과 인정의가…'로 두 문장이 연달아 시작).
   문안은 그대로 두되 역할을 갈라 준다 — 리드는 약속, 이 줄은 근거.
   크기·색·상단 규칙선으로 위계를 만든다. */
.r2 .r2-hero__supporting {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(26, 20, 16, .74);
}

/* ---------------------------------------------------------
   5. 모바일 히어로 — 첫 화면 정리
   실측 390px: 네비 밑 검은 띠 → H1 3줄 → 리드 → 사진 → 같은 주장 반복,
   그리고 CTA 는 화면 밖. 첫 화면에 결정 수단이 하나도 없었다.
   --------------------------------------------------------- */
@media (max-width: 768px) {
  /* 5-b. 두 막 애니메이션은 모바일에서 겹침만 만든다.
          2막(빛)만 즉시 보여주고 높이를 회수한다.
          1막이 없으면 '2막 · 안도' 라벨도 가리킬 대상이 없으므로 같이 뺀다. */
  .r2 .r2-hero__copyA { display: none; }
  .r2 .r2-hero__copyB .r2-hero__kicker { display: none; }
  .r2 .r2-hero__copyB { position: static; animation: none; opacity: 1; transform: none; }
  .r2 .r2-hero__copyWrap { min-height: 0; }

  /* 5-c. 히어로 제목이 화면의 절반을 먹지 않게 */
  .r2 .r2-hero__title { font-size: clamp(34px, 9.2vw, 44px); line-height: 1.14; }
  .r2 .r2-hero__lede { margin-top: 18px; font-size: 16px; line-height: 1.7; }

  /* 5-d. 모바일 첫 화면에서는 근거 줄까지 다 읽히지 않는다.
          접근성 텍스트로 남기고(DOM·SEO·스크린리더 유지) 픽셀은 CTA 에 넘긴다. */
  .r2 .r2-hero__supporting {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    margin: 0; padding: 0; border: 0;
  }

  /* 5-e. CTA 를 첫 화면 안으로. 사진보다 위에 둔다 —
          결정 수단이 분위기보다 먼저 와야 한다.
          .r2-hero__ctaRow 는 __center 의 형제라 부모(__chrome)에서 순서를 잡는다. */
  .r2 .r2-hero__chrome { display: flex; flex-direction: column; }
  .r2 .r2-hero__top      { order: 1; }
  .r2 .r2-hero__center   { order: 2; display: flex; flex-direction: column; }
  .r2 .r2-hero__ctaRow   { order: 3; }
  .r2 .r2-hero__badges   { order: 4; }
  .r2 .r2-hero__copyWrap { order: 1; }
  .r2 .r2-hero__visual   { order: 2; margin-top: 22px; }

  .r2 .r2-hero__ctaRow {
    margin-top: 22px; gap: 10px;
    display: grid; grid-template-columns: 1fr;
  }
  .r2 .r2-hero__cta { min-height: 54px; font-size: 15px; }
  .r2 .r2-hero__frame img { aspect-ratio: 16/10; object-fit: cover; }

  /* 5-f. 11px 하한 재확인 (모바일 tiny-text 4건) */
  .r2 .r2-hero__badge { font-size: 12px; }
}

/* ---------------------------------------------------------
   6. 하단 고정 신뢰 스트립 — 문구가 '직접 정맥(' 에서 잘렸다
   nowrap + ellipsis 는 유지하되(높이 고정이라 줄바꿈 불가)
   문구를 390px 폭에 실제로 들어가는 길이로 바꾼다.
   → 문안 변경은 page-mobile-sticky-cta.php 호출부에서. 여기선 여백만.
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .msc-trust { height: 30px; }
  .msc-trust__text { font-size: 11.5px; letter-spacing: -.015em; max-width: calc(100% - 16px); }
}

/* ---------------------------------------------------------
   7. 레이아웃 성능 — transition: width/max-width/max-height
   레이아웃 속성 애니메이션은 매 프레임 리플로우를 만든다.
   아코디언 높이는 grid-template-rows 로 옮긴다.
   --------------------------------------------------------- */
.r2 .r2-faq__a { transition: grid-template-rows .32s ease, opacity .24s ease; }

/* ---------------------------------------------------------
   8. 한 줄 길이 (line-length ×2) — 데스크탑에서 한 줄이 너무 길다
   --------------------------------------------------------- */
.r2 .r2-hero__supporting,
.r2 .r2-warmth__lede { max-width: 62ch; }

/* 모바일 히어로는 이제 내용이 높이를 정한다 (고정 720px 하한 해제) */
@media (max-width: 768px) {
  .r2 .r2-hero { height: auto; min-height: 0; padding-bottom: 8px; }
}

/* =========================================================
   ROUND 2 — 1차 적용 후 재실측(데스크탑 83→72 · 모바일 125→106)에서
   남은 항목만 정밀 조준한다. 남은 이유는 세 가지였다.
     (a) --rust·--gold-deep 를 안 쓰고 hex 를 직접 박은 규칙들
     (b) 11px 하한을 아직 안 받은 라벨 클래스들
     (c) 1차 수정이 만든 새 결함(레이아웃 애니메이션·CTA 가림)
   ========================================================= */

/* --- (a) 토큰을 우회해 hex 를 직박은 자리 --- */
.r2 .r2-mn .nav-depth2 > li > a.active,
.r2 .r2-mn .nav-dropdown-inner li a.active,
.r2 .r2-hero-lite__title em { color: #8f502d; }
.r2 .r2-mn .nav-dropdown-inner li a.active { background: #f5f1e8; }
.r2 .r2-hero-lite__btn--primary:hover { background: #8f502d; border-color: #8f502d; }
.r2 .r2-mn__cta .mono,
.r2 .r2-nav__cta .mono,
.r2 .r2-hero-lite__kicker { color: #785c3b; }
.r2 .r2-mn .nav-depth2 > li > a.active { border-bottom-color: #8f502d; }

/* .r2-band 는 흰 글자를 #b8663c 위에 얹어 4.2:1 — 배경만 한 단 내린다 */
.r2 .r2-band { background: #a3552f; }

/* --- (b) 남은 10px 기능 텍스트 --- */
.r2 .r2-cta__convert p.r2-cta__convert-label,
.r2 .r2-cta__actions-sub,
.r2 .r2-footer__brand-tag,
.r2 .r2-footer__bottom,
.r2 .r2-footer__phone span,
.r2 .r2-footer__nap-name span,
.r2 .r2-record__meta,
.r2 .r2-record__tag,
.r2 .r2-visit__rowLabel,
.r2 .r2-warmth__kicker,
.r2 .r2-records__kicker,
.r2 .r2-quizband__kicker,
.r2 .r2-faq__kicker,
.r2 .r2-pillars__kicker,
.r2 .r2-hero__badge { font-size: 11.5px; }

/* 하단 고정 3버튼의 보조 라벨('24시간 접수'·'바로 예약 →')도 기능 텍스트다 */
@media (max-width: 768px) {
  .msc-btn__sub { font-size: 11.5px; letter-spacing: -.02em; }
}

/* 전화번호 자간 .06em → 본문 상한 .05em 아래로 */
.r2 .r2-footer__phone b,
.r2 .r2-footer__phone span,
.r2 .r2-mn .nav-sub { letter-spacing: .03em; }

/* --- 잉크 글자가 순검정 위에 얹히는 1.2:1 구간 ---
   .r2-hero 의 바닥이 #000 이라, 빛 레이어가 칠해지기 전 한 프레임 동안
   히어로 상단 브랜드·위치 텍스트가 사실상 보이지 않는다.
   느린 회선에서는 한 프레임이 아니다. 바닥을 새벽 톤으로 깐다. */
.r2 .r2-hero { background: #e3b177; }

/* --- 발광 그림자 4건: 실제 출처를 직접 덮는다 --- */
.r2 .r2-hero__cta--primary { box-shadow: 0 1px 2px rgba(26,20,16,.10), 0 8px 20px -12px rgba(26,20,16,.30); }
.r2 .r2-hero__cta--primary:hover { box-shadow: 0 2px 4px rgba(26,20,16,.12), 0 12px 24px -12px rgba(26,20,16,.34); }
.r2 .r2-quizband__btn { box-shadow: 0 1px 2px rgba(26,20,16,.10), 0 8px 20px -14px rgba(26,20,16,.30); }

/* --- 사실 요약 박스: 인용 줄이 윗선에 딱 붙어 있다 --- */
.r2 .ssok-facts__cite { padding-top: 12px; }
.r2 .ssok-facts__label { letter-spacing: .04em; }

/* --- (c) 1차가 만든 새 결함 되돌리기 ---
   grid-template-rows 도 레이아웃 속성이라 애니메이션 대상이 되면 같은 병이다.
   아코디언 높이 전환은 별도 과제로 넘기고 여기서는 손대지 않는다. */
.r2 .r2-faq__a { transition: opacity .24s ease; }

/* 모바일에서 두 번째 CTA 가 하단 고정 바 밑에 깔렸다(100% 가림).
   히어로 아래 여백을 고정 바 높이(64+30)만큼 확보한다. */
@media (max-width: 768px) {
  .r2 .r2-hero { padding-bottom: 24px; }
  .r2 .r2-hero__badges { margin-bottom: 8px; }
}

/* =========================================================
   ROUND 3 (마감) — 2차 재실측 데스크탑 83→26 · 모바일 125→26.
   남은 26건 중 값으로 끝낼 수 있는 것만 닫는다.
   ========================================================= */

/* 아직 10~11px 로 남아 있던 기능 텍스트 */
.r2 .r2-record__chip,
.r2 .r2-record__date,
.r2 .r2-footer__group-label,
.r2 .ssok-facts__cite-text { font-size: 11.5px; }
.mobile-sticky-cta .msc-btn__sub { font-size: 11.5px; }

/* 자격 목록('보건복지부 치과의사 면허 (2014.03.12)' · '제3197호')은
   본문이지 라벨이 아니다. 본문 하한은 12px. */
.r2 .r2-trust__card li,
.r2 .r2-trust__card em,
.r2 .r2-credentials li { font-size: 12px; }

/* 본문 단락이 #5a5a5a 로 렌더되고 있었다(그누보드 default.css 상속).
   종이 위에서는 통과하지만 새벽 그라데이션 위에서는 3.6:1 로 떨어진다.
   페이지 본문 토큰으로 되돌린다. */
.r2 .r2-warmth__lede,
.r2 .r2-records__lede,
.r2 .r2-pillar__p,
.r2 .r2-scene__p { color: var(--ts-body); }
.r2 .r2-footer .r2-footer__group-label,
.r2 .r2-footer li,
.r2 .r2-footer p { color: rgba(245, 241, 232, .74); }

/* 흰 글자를 얹은 주황 버튼이 4.3:1 로 아슬하게 미달.
   대상은 '흰 글자 버튼'뿐이다 — 잉크 글자를 쓰는 형제 요소까지 같이 어둡게
   덮으면 대비가 오히려 무너진다(3차 1회차에서 실제로 그렇게 깨졌다). */
.r2 .r2-quizband__btn { background-color: #9c4f2a; color: #fff; }
.r2 .r2-quizband__btn * { color: inherit; }

/* 히어로 배지는 backdrop-filter 위에 글자를 얹어 픽셀 대비가 무너진다.
   반투명을 걷고 불투명 종이 바탕 + 잉크로 간다. */
.r2 .r2-hero__badge {
  background: rgba(245, 241, 232, .94);
  backdrop-filter: none;
  color: var(--ink);
  border: 1px solid rgba(26, 20, 16, .14);
  padding: 9px 14px;
  line-height: 1.4;
}

/* 모바일 두 번째 CTA 가 여전히 하단 고정 바(64px + 신뢰 스트립 30px) 밑에 깔린다 */
@media (max-width: 768px) {
  .r2 .r2-hero { padding-bottom: 110px; }
}