/* color_safe.css — v5 색 커스텀(120종+ 팔레트 × 11종 변형) 어떤 조합에서도
   글씨가 배경과 같은 색이 돼 사라지지 않도록 "표면대비"로 강제하는 override.
   variations_v5.css 뒤에 맨 마지막 로드. 모든 규칙 !important.
   스코프: html[data-cv="v5"] 또는 html[data-v="<변형>"]. 기존 CSS 미수정. UTF-8.

   ── 표면대비 원칙 ──
   요소의 "실제 배경"을 판정해 그 위에서 무조건 읽히는 색을 준다.
     · 배경 var(--p)(주색·불투명)     → var(--ht, #fff)
     · 배경 var(--a1)(불투명)          → var(--a1t, #111)
     · 배경 var(--a2)(불투명)          → var(--a2t, #fff)
     · 흰/밝은 카드·틴트·투명위-밝음   → "보장 어두운색"(아래 2줄 패턴)
     · 명백히 어두운 섹션/카드         → var(--ht, #fff) 또는 흰색

   ── 보장 어두운색 토큰(흰/밝은 표면 전용) ──
   팔레트엔 "흰 위 보장 어두운색"이 없으므로 직접 지정한다.
   1줄: 구형 브라우저 폴백(#1f1f1f), 2줄: 최신 브라우저(팔레트 살짝 섞인 어두운색).
   둘 다 흰/밝은 배경 위에서 무조건 읽힌다:
       color: #1f1f1f !important;
       color: color-mix(in srgb, var(--p) 32%, #141414) !important;
   ============================================================ */


/* ============================================================
   (1) 사업개요 테이블 th — 배경 var(--p) 위 글씨 var(--a2) 충돌 방지.
   ============================================================ */
html[data-cv="v5"] #ctt .wz-info-table th,
html[data-cv="v5"] #ctt .wz-info-table thead th,
html[data-cv="v5"] #ctt .wz-info-table tbody th,
html[data-cv="v5"] #ctt .wz-info-table-3col .wz-info-table thead th,
html[data-cv="v5"] #ctt .wz-info-table-3col .wz-info-table tbody th,
html[data-cv="v5"] #ctt .wz-info-table-4col .wz-info-table thead th,
html[data-cv="v5"] #ctt .wz-info-table-4col .wz-info-table tbody th {
    color: var(--ht, #fff) !important;
}

/* ============================================================
   (2) 사업개요 테이블 라인 — 세로 칸 구분선 보강.
   ============================================================ */
html[data-cv="v5"] #ctt .wz-info-table th,
html[data-cv="v5"] #ctt .wz-info-table td {
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html[data-cv="v5"] #ctt .wz-info-table thead th,
html[data-cv="v5"] #ctt .wz-info-table tbody th {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ============================================================
   (3) 플로팅 메뉴 — 글씨 안 보임 방지
   3-a) 좌측 .wz-side-btn: 기본 배경 var(--p)(어두움) → 라벨/아이콘 --ht.
        흰 배경 변형(typography/minimal/monoline)은 어두운 글씨로 복구.
   3-b) 우측 #quick: 어두운 var(--p) 배경 변형 strong → --ht.
   ============================================================ */
html[data-cv="v5"] .wz-side-btn__item,
html[data-cv="v5"] .wz-side-btn__item .wz-side-btn__label,
html[data-cv="v5"] .wz-side-btn__item .wz-side-btn__icon {
    color: var(--ht, #fff) !important;
}
html[data-v="typography"] .wz-side-btn__item,
html[data-v="typography"] .wz-side-btn__item .wz-side-btn__label,
html[data-v="typography"] .wz-side-btn__item .wz-side-btn__icon,
html[data-v="minimal"] .wz-side-btn__item,
html[data-v="minimal"] .wz-side-btn__item .wz-side-btn__label,
html[data-v="minimal"] .wz-side-btn__item .wz-side-btn__icon,
html[data-v="monoline"] .wz-side-btn__item,
html[data-v="monoline"] .wz-side-btn__item .wz-side-btn__label,
html[data-v="monoline"] .wz-side-btn__item .wz-side-btn__icon {
    color: var(--p, #182954) !important;
}

html[data-v="fullhero"] #quick .quick_menu a strong,
html[data-v="cinema"] #quick .quick_menu a strong,
html[data-v="splithero"] #quick .quick_menu a strong,
html[data-v="mosaic"] #quick .quick_menu a strong,
html[data-v="timeline"] #quick .quick_menu a strong,
html[data-v="luxury"] #quick .quick_menu a strong {
    color: var(--ht, #fff) !important;
}
@media (max-width: 860px) {
    html[data-cv="v5"] #quick .quick_menu a,
    html[data-cv="v5"] #quick .quick_menu a strong,
    html[data-cv="v5"] #quick .quick_menu a i {
        color: var(--p, #182954) !important;
    }
}

/* ============================================================
   (4) 메인 프리미엄 서브타이틀 — 흰/투명 .content_wrap 위 강조색(--a1) 글씨
       가 밝은 팔레트에서 사라짐 → 흰 위 "보장 어두운색"으로 강제.
       (배경이 흰색이므로 var(--p)가 아니라 보장-어두운색. --p도 밝을 수 있음.)
   ============================================================ */
html[data-cv="v5"][data-index] .content_wrap .sub_title > h2.tit01,
html[data-cv="v5"] .content_wrap .sub_title > h2.tit01 {
    color: #1f1f1f !important;
    color: color-mix(in srgb, var(--p) 32%, #141414) !important;
}
html[data-cv="v5"][data-index] .content_wrap .sub_title > h2.tit02,
html[data-cv="v5"] .content_wrap .sub_title > h2.tit02 {
    color: var(--text-sub, #555) !important;
}
html[data-cv="v5"] .content_wrap .wz-blk-sub {
    color: var(--text-sub, #555) !important;
}


/* ============================================================
   (5) 우측 플로팅 아이콘 #quick .quick_menu a i
   휴지 li 배경 var(--p) → i 대비 --ht. hover 시 li 배경 var(--a1) → a1t.
   (흰 li 변형 typography/monoline/editorial/luxury·base는 손대지 않음.)
   ============================================================ */
html[data-v="fullhero"]  #quick .quick_menu a i,
html[data-v="cinema"]    #quick .quick_menu a i,
html[data-v="splithero"] #quick .quick_menu a i,
html[data-v="mosaic"]    #quick .quick_menu a i,
html[data-v="parallax"]  #quick .quick_menu a i,
html[data-v="minimal"]   #quick .quick_menu a i,
html[data-v="timeline"]  #quick .quick_menu a i {
    color: var(--ht, #fff) !important;
}
html[data-v="fullhero"]  #quick .quick_menu ul > li:hover a i,
html[data-v="cinema"]    #quick .quick_menu ul > li:hover a i,
html[data-v="splithero"] #quick .quick_menu ul > li:hover a i,
html[data-v="mosaic"]    #quick .quick_menu ul > li:hover a i,
html[data-v="parallax"]  #quick .quick_menu ul > li:hover a i,
html[data-v="minimal"]   #quick .quick_menu ul > li:hover a i,
html[data-v="timeline"]  #quick .quick_menu ul > li:hover a i {
    color: var(--a1t, #111) !important;
}


/* (6) 입지환경 카테고리명 .wz-loc-cat-name — 기본 어두운 보장색 + 어두운헤더 변형만 예외.
   11종 변형 loc-cat-header 배경: 흰/투명(cinema·typography·editorial·timeline·minimal·mosaic·fullhero·luxury)→어두운글씨 / --p(splithero·parallax)→흰글씨 / --a1(monoline)→a1t */
html[data-cv="v5"] .wz-loc-cat-name {
  color: #1f1f1f !important;
  color: color-mix(in srgb, var(--p) 32%, #141414) !important;
}
html[data-v="splithero"] .wz-loc-cat-header .wz-loc-cat-name,
html[data-v="parallax"] .wz-loc-cat-header .wz-loc-cat-name,
html[data-v="parallax"] .wz-loc-cat-name {
  color: var(--ht, #fff) !important;
}
html[data-v="monoline"] .wz-loc-cat-header .wz-loc-cat-name,
html[data-v="monoline"] .wz-loc-cat-name {
  color: var(--a1t, #111) !important;
}


/* ============================================================
   (7) 메인 프리미엄 번호 .wz-pm-num — 기본 보장-어두운색 + 예외만.
   기본: 흰/밝은 카드 위(cinema·minimal·monoline·parallax·editorial·typography·fullhero·luxury-sub) → 보장-어두운색
   예외 a) 번호 자체가 a1/a1틴트 배지 배경(mosaic·timeline·splithero·luxury[data-index]) → a1t
   예외 b) 거대 ghost 워터마크 숫자(typography·fullhero) → 기본색 유지 + 가독 opacity
   ============================================================ */
html[data-cv="v5"] .wz-pm-num {
    color: #1f1f1f !important;
    color: color-mix(in srgb, var(--p) 32%, #141414) !important;
}
html[data-v="mosaic"]    .wz-pm-num,
html[data-v="timeline"]  .wz-pm-num,
html[data-v="splithero"] .wz-pm-num,
html[data-v="luxury"][data-index] .wz-pm-num {
    color: var(--a1t, #111) !important;
}
html[data-v="typography"] .wz-pm-num,
html[data-v="fullhero"]   .wz-pm-num {
    opacity: .9 !important;
}


/* ============================================================
   (8) 서브 프리미엄 번호 .sub_premium ul li dl dt — 기본 보장-어두운색 + 예외만.
   기본: 흰 카드 위(editorial·parallax·monoline 등) → 보장-어두운색
   예외 a) dt 배경 var(--p) 어두움(cinema) → --ht
   예외 b) dt 배경 a1/a1틴트(mosaic·splithero·luxury·minimal·timeline) → a1t
   예외 c) 거대 ghost(fullhero·typography) → 기본색 + 가독 opacity
   ============================================================ */
html[data-cv="v5"] .sub_premium ul li dl dt {
    color: #1f1f1f !important;
    color: color-mix(in srgb, var(--p) 32%, #141414) !important;
}
html[data-v="cinema"] .sub_premium ul li dl dt {
    color: var(--ht, #fff) !important;
}
html[data-v="mosaic"]    .sub_premium ul li dl dt,
html[data-v="splithero"] .sub_premium ul li dl dt,
html[data-v="luxury"]    .sub_premium ul li dl dt,
html[data-v="minimal"]   .sub_premium ul li dl dt,
html[data-v="timeline"]  .sub_premium ul li dl dt {
    color: var(--a1t, #111) !important;
}
html[data-v="fullhero"]   .sub_premium ul li dl dt,
html[data-v="typography"] .sub_premium ul li dl dt {
    opacity: .9 !important;
}


/* ============================================================
   (9) 서브 프리미엄 카운터 라벨 .sub_premium ul li dl::after
   base: 카드 우하단 작은 카운터, color var(--a2) opacity .35.
         대부분 변형 카드 = 흰/밝음 → 보장-어두운색 + 가독 opacity .55.
   cinema: 카드 어두움(dt 영역 --p / a3 카드) → 흰.
   (minimal ::after 는 텍스트가 아니라 모서리 삼각형 장식(border-color)이라 제외.)
   ============================================================ */
html[data-cv="v5"] .sub_premium ul li dl::after {
    color: #1f1f1f !important;
    color: color-mix(in srgb, var(--p) 32%, #141414) !important;
    opacity: .55 !important;
}
/* cinema: 어두운 카드 위 카운터 → 흰 */
html[data-v="cinema"] .sub_premium ul li dl::after {
    color: var(--ht, #fff) !important;
    opacity: .95 !important;
}
/* minimal: 장식 삼각형(텍스트 아님) — 색 강제하지 않도록 복구 불필요(content 없음) */
