/* 글자 대비(contrast) 바로잡기 — 2026-10-06
 *
 * 카페24 원본 스킨에서 그대로 넘어온 "흐린 글자색"만 덮어쓴다.
 * 미러(mirror/)는 읽기 전용이므로 고치지 않고, 이 파일을 모든 쪽 <head> 끝에 넣어 이긴다.
 *
 * 기준 = WCAG AA (본문 4.5:1, 큰 글자 3:1).
 * 브랜드 색(#BC2F52 분홍, 쌀빛)과 레이아웃·간격은 하나도 건드리지 않는다.
 * 바꾸는 것은 글자색과, 흰 글자를 올린 배경색 하나뿐이다.
 */

/* ── 1. 스킨 변수 — 여기 한 줄이 쓰이는 곳 19군데에 모두 걸린다 ───────────── */
:root{
  /* 원래 #ff422d. 흰 바탕 위 글자도 3.46:1, 흰 글자를 올린 배경도 3.46:1 로 둘 다 모자랐다.
     같은 계열에서 가장 적게 어둡힌 값이 #CC3017.
     흰 바탕 5.25:1, 베이지(#f5f0e9 후기 구역) 4.63:1, 흰 글자를 올려도 5.25:1 로 모두 통과한다. */
  --point-color1:#CC3017;
  /* 원래 #999. 브랜드 이야기 본문(sub/brand01·02)이 이 값이라 2.85:1 이었다 → 5.33:1 */
  --txt-color2:#6B6B6B;
}

/* ── 2. 하드코딩된 흐린 회색 ──────────────────────────────────────────── */

/* #777 → #5A5A5A : 바닥글 회사정보(#f9f9f9 위) 4.25:1 → 6.5:1 */
.footer_cs p,
.footer_bank span,
.footer_about .address span,
.footer_about .address span a,
.copyright,
.escrow,
.footer_sns li a,
.titleArea ul,
.boardMain .board .ec-base-table.typeList td,
.boardMain .board .galleryList li span,
.infoWrap .info .type ul li a,
#allCate #categoryMenu .menu-dp2 > li > a,
#allCate #categoryMenu .bbs li a,
#allCate .allCate_cs .bbs li a,
.txtNum{color:#5A5A5A}

/* #787878 → #5A5A5A : 머리글·전체분류 메뉴 4.42:1 → 7.0:1 */
#header .shoppinginfo > ul li .log_state a,
#allCate #categoryMenu .menu-dp3 > li > a,
#allCate #categoryMenu .menu-dp4 > li > a,
.topCategory #categoryMenu .bbs-dp1 > li > a,
.topCategory #categoryMenu .menu-dp2 > li > a,
.topCategory #categoryMenu .menu-dp3 > li > a,
.topCategory #categoryMenu .menu-dp4 > li > a{color:#5A5A5A}

/* #aaa → #6B6B6B : 검색창 안내문 2.32:1 → 5.33:1 (검색을 열어야 보이는 자리) */
.searchWrap .list-wrap .section-title button,
.searchWrap .list-wrap .section-item > ul > li > button,
.searchWrap .list-wrap .message{color:#6B6B6B}

/* #939393 → #5F5F5F : 목록 쪽 번호 넘기기 3.07:1 → 6.2:1 */
.ec-base-paginate li a{color:#5F5F5F}

/* #888 → #5F5F5F : 후기 작성자 이름(#f5f0e9 위) 3.13:1 → 5.63:1 */
.mainReview .reviewList li .txt .writer{color:#5F5F5F}

/* #999 → #6B6B6B : 상품 상세 쪽 안내문 2.85:1 → 5.33:1 */
.ec-base-tab .menu li a,
.xans-product-additional .noAccess,
.xans-product-additional div.board p.nodata,
.xans-product-menupackage .menuCategory > li > ul > li > a,
.xans-product-menupackage .subCategory li a,
.xans-product-recentlist .ec-base-prdInfo .description .custom_price,
div.layerProgress{color:#6B6B6B}

/* #009ffa 위 흰 글자 3.10:1 → 4.72:1 (정기배송 딱지) */
.xans-product-detail .infoArea .regularDelivery .badge{background-color:#0077C8}

/* ── 2-1. 상품 상세 쪽 ──────────────────────────────────────────────── */

/* 상품명·판매가격·적립금·배송비·수량·필수선택 같은 항목 이름. #aaa 라 2.32:1 이었다 → 5.33:1.
   쇼핑몰에서 가장 중요한 쪽의 글자라 가장 크게 달라지는 곳이다.
   원본이 !important 를 쓰고 있어 여기서도 !important 를 붙여야 이긴다. */
.xans-product-detail .infoArea .con h3 span{color:#6B6B6B !important}
.xans-product-detail .infoArea th,
.xans-product-detail .productSet.additional .title span,
.coupon-popup-wrap .coupon-popup .list-wrap ul li .coupon-box .detail .coupon-detail:before{color:#6B6B6B}

/* 배송비 금액이 담긴 칸이 #777 를 물려받는다 4.48:1 → 7.0:1 */
.xans-product-detail .infoArea .delv_price_B,
.xans-product-detail .infoArea .delv_price_B strong{color:#5A5A5A}

/* 무료배송까지 남은 금액(#f9f9f9 위) 2.21:1 → 6.5:1 */
.free-delivery-check .price-wrap{color:#5A5A5A}

/* 상세 쪽 후기 작성자 3.54:1 → 6.2:1 */
.xans-product-review .prdReviewSlide li .txt .writer{color:#5F5F5F}

/* 붉은 안내 글자 3.0~3.2:1 → 5.25:1. 위 --point-color1 과 같은 값으로 맞춘다 */
.xans-product-detail .infoArea .regularDelivery .info .icoSave,
.ec-base-tooltip .txtWarn,
.txtWarn{color:#CC3017}

/* ── 3. 사진 위에 얹은 흰 글자 ────────────────────────────────────────────
   배경이 사진이라 색을 고를 수가 없다(밝은 떡 사진 위에서 흰 글자가 묻힌다).
   사진은 그대로 두고 글자에만 얕은 그늘을 깔아 어떤 사진 위에서도 읽히게 한다. */
.mainSlide .swiper-slide .txt.wt h3,
.mainSlide .swiper-slide .txt.wt p,
.mainSlide02 .swiper-slide .txt.wt h3,
.mainSlide02 .swiper-slide .txt.wt p,
.img_area .title h2 span{
  text-shadow:0 1px 3px rgba(0,0,0,.6), 0 0 16px rgba(0,0,0,.4);
}
/* 작은 설명줄은 #eaeaea 라 사진 위에서 거의 안 보였다 → 흰색 + 그늘.
   원본 선택자(.tripleBanner …)가 더 좁아서 그대로 적으면 진다. 같은 선택자로 받아친다. */
.img_area .title h2 span.sub,
.tripleBanner .triple_inner .box div > .title span.sub{color:#fff}
