/* ============================================================
   wp-bridge.css — 워드프레스/Breakdance 환경 보정
   로드 순서: 맨 마지막 (haneul → typo-guard → mood-v3 → main → wp-bridge)

   두 가지를 한다.
   1) 정적 HTML에서 CSS에 하드코딩돼 있던 값을 요소 속성(CSS 변수)으로 승격
   2) Breakdance 기본 스타일이 우리 디자인을 가로채는 것을 차단
   ============================================================ */

/* ────────────────────────────────────────────────
   1. 요소 속성 승격 — 변수가 없으면 원본 값으로 폴백
   ──────────────────────────────────────────────── */

/* 시술 배경 3종(히어로·특징 밴드·F존 패널)은 treatment.css 가 단독으로 소유한다.
   ⚠ 예전엔 여기서도 같은 걸 선언했다. 두 벌이 되자 실제로 사고가 났다 —
     treatment.css 가 뒤에 로드되는데도 이쪽 background-image 가 이겨서
     히어로에 엉뚱한 사진(둘러보기 복도)이 깔렸다.
     선언은 한 곳에만 둔다. 변수 이름(--a2-bg / --d2-bg / --fz-bg)은 그대로다. */

/* ────────────────────────────────────────────────
   2. Breakdance 기본 스타일 차단막

   Breakdance는 global-settings.css 에서 다음을 "명시 선언"한다.
     .breakdance h1~h6 { color / font-family / font-size }
     .breakdance a      { color }
     .breakdance        { font-family / font-size / color / background-color }

   문제는 특이도가 아니라 상속이다.
   우리 제목 클래스(.h-int/.h-blk/.h-md)는 color·font-size 는 선언하지만
   font-family 는 선언하지 않고 body 의 --font-sans 를 물려받는다.
   상속값은 매칭되는 어떤 선언에도 지므로, 선언이 없는 속성은 전부 뺏긴다.
   (메인 히어로 h1 의 색이 검게 나온 것도 같은 원인이었다.)

   → 우리 섹션 안의 제목·링크는 원래대로 "물려받도록" 되돌린다.
     .breakdance .vv h2 (0,2,1) > .breakdance h2 (0,1,1) 이므로 !important 불필요.
   ──────────────────────────────────────────────── */

.breakdance .vv h1, .breakdance .vv h2, .breakdance .vv h3,
.breakdance .vv h4, .breakdance .vv h5, .breakdance .vv h6,
.breakdance .b01h-hero h1, .breakdance .b01h-hero h2, .breakdance .b01h-hero h3 {
  font-family: inherit;
}

/* 링크 색도 동일 — 우리 버튼·탭은 자체 규칙이 있으나
   본문 링크는 선언이 없어 Breakdance 링크색으로 물든다. */
.breakdance .vv a:not([class]) {
  color: inherit;
}

/* ⚠ 위 가드의 부작용 원복(2026-08-19) — 형제시술 탭의 비활성 항목은
   클래스 없는 <a> 라서 가드(0,3,1)에 잡히고, 탭 자체 색 .vv .atabs a (0,2,1)가 진다.
   inherit 는 .breakdance 의 회색 본문색으로 풀려 비활성 탭이 회색으로 죽었다(실측).
   정본 값(haneul.css 657행과 동일)을 가드보다 높은 특이도로 되살린다.
   ※ 라이트 히어로 변형(.atabs-d)을 쓰게 되면 그쪽도 같은 원복이 필요하다. */
.breakdance .vv .atabs a:not(.on) {
  color: rgba(255, 255, 255, 0.62);
}

/* ────────────────────────────────────────────────
   GNB 드롭다운 매몰 방지 (2026-08-19 실측)

   Breakdance 는 문서(헤더/본문)마다 별도의 .breakdance 래퍼를 만들고
   래퍼에 position:relative; z-index:1 을 준다. 헤더 래퍼(높이 61px)와
   본문 래퍼가 같은 z 의 형제가 되어, 문서 순서상 뒤인 본문이
   드롭다운(.dp, 헤더 래퍼 안 z:120)을 통째로 덮는다 — 호버하면 열리지만
   헤더 아래로는 보이지 않았다. 정본은 래퍼 하나가 전체를 감싸 문제가 없다.
   → GNB(.gnb)를 품은 래퍼만 .gnb 의 sticky z-index(80, gnb.css)와 같은 값으로 올린다.
   (:has 미지원 구형 브라우저에서는 현상 유지 — 더 나빠지지 않는다) */
.breakdance:has(> .gnb) {
  z-index: 80;
}

/* Breakdance 스킵 링크 — 본문 첫머리에 "Skip to main content" 가 그대로 노출된다.
   (실측: position static · 155×22px · 클리핑 없음. 정본 HTML 에는 없는 요소다.)
   접근성 장치이므로 지우지 않고 sr-only 로 감춘 뒤, 키보드 포커스 때만 드러낸다
   — 정본 .sr-only 문법과 동일. */
.bde-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.bde-skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--neutral-1, #1A1A1A);
  color: #fff;
  font-size: 13px;
}

/* ────────────────────────────────────────────────
   서브페이지(About/시술) 계열 — Breakdance 기본값 차단
   실측 근거 (정본 about-tour 375px vs 이관본)
     · h1 크기   32.5px → 48.83px   `.breakdance h1{font-size:var(--bde-h1-font-size)}` 가 이김
     · 서체      Noto Sans → system-ui  `.breakdance h1{font-family:var(--bde-heading-font-family)}`
   특이도: `.breakdance h1`(0,1,1) < `.breakdance .t1-title`(0,2,0) → !important 불필요
   ──────────────────────────────────────────────── */
/* ⚠ .h-int / .h-blk / .h-md 는 이 목록에서 뺐다(2026-08-19).
   이들은 언제나 `.vv .h-int` 형태(0,2,0)로 선언돼 있어 `.breakdance h2`(0,1,1)를
   이미 이긴다 — 무력화가 애초에 불필요했다. 오히려 여기 넣으면 `.breakdance .h-blk`
   (0,2,0)가 뒤에 온다는 이유로 haneul 의 스코프 규칙(.fz-left/.fz-photo/.fz-right 등)
   까지 통째로 덮어, 제목 크기가 한 값으로 눌려 버린다(실측: 정본 39.84px → 34px). */
.breakdance .p1-title,
.breakdance .d2-title,
.breakdance .e1-title,
.breakdance .t1-title,
.breakdance .lp5-head,
.breakdance .p1-close-h {
  font-family: inherit;
  font-size: inherit;   /* 각 페이지 CSS 가 다시 지정한다 — 여기서는 BD 값만 무력화 */
}

/* 무력화 후 정본 값을 되돌린다 (각 about-*.css 와 동일 값, 순서상 여기가 뒤라 확실히 먹는다) */
.breakdance .p1-title  { font-size: clamp(38px,28px + 2.6vw,68px); }
.breakdance .d2-title  { font-size: clamp(34px,26px + 2vw,54px); }
.breakdance .e1-title  { font-size: clamp(34px,26px + 2vw,56px); }
.breakdance .t1-title  { font-size: clamp(32px,25px + 2vw,58px); }
.breakdance .p1-close-h{ font-size: clamp(26px,22px + 1.2vw,40px); }
.breakdance .lp5-head  { font-size: 2em; }  /* 정본은 자체 선언 없이 h1 기본값 32px */
/* [삭제 2026-08-19] .h-int / .h-blk 되돌림 두 줄 — 위 무력화와 세트로 걷어냈다.
   여기 적혀 있던 값은 정본이 아니라 mood-v3 의 "타이포 스케일 다운" 값이었다
   (당시 그 상태를 정본으로 착각해 실측 주석까지 달려 있었음). 지금은 haneul 116~117행
   (= 정본 인라인과 동일)이 그대로 이긴다. */

/* 본문 서체 — 정본 body 는 'Noto Sans','Noto Sans KR'. Breakdance 는 자기 변수를 쓴다. */
body .breakdance { font-family: 'Noto Sans','Noto Sans KR',sans-serif; }

/* 상속 가로채기 차단 (2026-08-19 실측) — 서체와 같은 원리, 색과 행간도 마찬가지다.
   Breakdance 는 문서 래퍼 `.breakdance` 에 color·line-height 를 명시 선언한다.
   정본에서는 body 값이 그대로 자손까지 내려오는데, 래퍼가 중간에서 가로채
   자기 색을 선언하지 않은 요소가 전부 Breakdance 회색(rgb 55,65,81)으로 물들었다
   (시술 한 페이지에서만 40곳). `inherit` 로 되돌리면 body 값이 다시 내려온다 —
   페이지마다 body 색이 달라도 각 페이지 CSS 가 정한 값을 그대로 따른다. */
body .breakdance { color: inherit; line-height: inherit; font-size: inherit; }

/* 헤더 로고·메인 카드 링크는 `.vv` 밖이거나 클래스가 있어 위쪽 링크 가드
   (`.vv a:not([class])`)에 안 걸려 Breakdance 링크색(파랑)이 남는다.
   ⚠ `.breakdance .vv a` 처럼 넓게 걸면 안 된다 — (0,2,1)이 되어 `.btn-ghost-w`(0,1,0)
   같은 자체 색 선언을 이겨 버튼 글자색까지 덮는다. 색이 없는 링크만 좁게 짚는다. */
body .breakdance a.glogo,
body .breakdance a.b05-card { color: inherit; }

/* ── 링크 호버 파란색 전면 차단 (2026-08-20) ──
   Breakdance 전역 CSS 에 이런 규칙이 있다:
     .breakdance a:hover { color: var(--bde-links-color-hover) }   ← #2563EB (파랑)
   자기 호버색을 선언하지 않은 링크는 **전부** 이 파랑으로 바뀐다.
   푸터의 법적 고지 링크·제작사 표기가 그랬다(흰 글씨 → 파랑).

   `body .breakdance a`(0,2,1) / `:hover`(0,2,2) 로 눌러 부모 색을 그대로 쓰게 한다.
   ⚠ 자기 색을 가진 링크는 선택자에 클래스가 더 있어(예: `.gnb .dp a:hover` = 0,3,1)
     이 차단막을 이긴다 — 의도한 색은 살아남는다.
   ⚠ `!important` 를 쓰지 않는다. 쓰면 위 lp-tel/lp-btn 같은 예외까지 죽는다. */
body .breakdance a,
body .breakdance a:hover,
body .breakdance a:focus { color: inherit; }
/* ⚠ `:visited` 는 넣지 말 것. Breakdance 는 방문 링크에 색을 주지 않는데,
   여기에 넣었더니 (0,2,2) 가 `.gnb-mobile .gm-sub a`(0,2,1) 를 이겨
   **한 번 다녀온 소메뉴 항목만 검게** 변했다. 새 브라우저에서는 멀쩡해 보여
   재현이 안 되는 종류의 버그다(방문 기록이 있어야 나타난다). */

/* 오시는 길 — 전화·카카오·네이버 링크는 자기 색을 선언하는데도 `.breakdance a`(0,1,1)가
   `.lp-tel`(0,1,0)를 이겨 전부 파랗게 물들었다. inherit 로 뭉뚱그리면 안 된다 —
   셋의 정본 색이 서로 다르다. about-location.css 와 같은 값을 특이도만 올려 되살린다. */
.breakdance a.lp-tel   { color: #111; }
.breakdance a.lp-btn-k { color: #191919; }
.breakdance a.lp-btn-n { color: #fff; }

/* 스크린리더 전용 제목 — 화면에는 안 보이지만 Breakdance h3 스타일을 받는다.
   보이지 않아도 값이 어긋나면 대조 로그가 지저분해지므로 정본대로 물려받게 둔다. */
.breakdance .sr-only { font-size: inherit; font-weight: inherit; color: inherit; }

/* ────────────────────────────────────────────────
   페이지 유형별 body 색·배경 (2026-08-19 실측)

   정본은 유형마다 body 선언이 다른데, 테마의 haneul.css 는 시술 계열
   원본에서 떠온 것이라 그 값(#3D3D3D)이 전 페이지에 적용돼 있었다.
   상속으로 내려가는 값이라 자기 색을 선언하지 않은 요소가 전부 어긋난다
   (어바웃 한 페이지에서만 27곳). 체크리스트 §7 대로 스코프로 가른다.

     정본 index.html            color #1A1A1A · line-height 선언 없음(normal)
     정본 about-*-full.html     color #111    · line-height 1.6
     정본 시술 9종              color #3D3D3D · line-height 1.6 · background #fff  ← haneul 기본값

   ⚠ 글자 크기는 **모바일에서만** 갈린다 — 데스크톱은 셋 다 16px 이라 데스크톱만
   보면 절대 안 드러난다(체크리스트 §5-2·§9). 좁은 폭에서 haneul 이 body 를 14px 로
   줄이는데, 그건 시술 계열 원본의 사양이고 홈·어바웃 정본은 16px 를 유지한다. */
body.home { color: #1A1A1A; line-height: normal; }
body.butler-about { color: #111; }
body.butler-treatment { background: #fff; }
body.home, body.butler-about { font-size: 16px; }

/* 루트 글자 크기 — rem 의 기준이라 어긋나면 홈의 rem 값이 전부 62.5% 로 쪼그라든다.
   haneul.css 14행의 `html{font-size:62.5%}` 는 서브페이지 계열 원본 사양이고,
   정본 index.html 에는 그 선언이 없다(브라우저 기본 16px). 실측: 커스텀 커서 도트가
   12px → 7.5px. 홈에서만 되돌린다.
   ※ :has 미지원 구형 브라우저에서는 현상 유지 — 더 나빠지지 않는다. */
html:has(body.home) { font-size: 16px; }

/* About 대형 타이틀 — Breakdance 가 h1~h6 에 headings-color 를 명시해 뺏어간다.
   ⚠ 위 h1~h6 차단막에 color 를 넣으면 안 된다: `.breakdance .vv h2`(0,2,1)가
   `.vv .h-blk`(0,2,0)·`.fz-photo .h-blk`(0,2,0)를 이겨 제목 색을 통째로 덮는다
   (F존 사진 위 흰 글씨가 다시 죽는다). 색이 필요한 클래스에만 좁게 건다. */
.breakdance .p1-title,
.breakdance .d2-title,
.breakdance .e1-title,
.breakdance .t1-title,
.breakdance .lp5-head,
.breakdance .p1-close-h {
  color: inherit;
}

/* ⚠ 정본 인라인 <style> 의 `.wf-img{display:flex;…}` 가 테마 어디에도 없었다.
   그래서 <span class="wf-img"> 가 display:inline 으로 남아 **aspect-ratio 가 무효**가 되고
   갤러리 정사각 셀이 347x347 대신 347x196 으로 찌그러졌다(실측). 정본 그대로 넣는다. */
.wf-img {
  background: #ECECEC;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a9a9a;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
  width: 100%;
}