/* =====================================================================
   joy(리뉴얼) 컬러 테마 — 2026-10-10
   관리자 > 테마 설정(본사) / 회원 사이트 설정(분양)에서 고른 색상(body.theme-*)을
   리뉴얼 레이아웃의 포인트 색에 연결한다. 메인·서브 공통.
   - 기본(warm)은 아무 값도 정의하지 않는다 → 각 CSS 의 var(--jc-*, 원래색) 폴백 = 리뉴얼 원래 민트그린
   - 변수: p 포인트 / p2 포인트 hover / pt·pt2 흰 바탕 위 포인트 글자색 / on 포인트 바탕 위 글자(메인)
           on2 포인트 바탕 위 글자(서브) / d·d2 진한 포인트 / x·xx 어두운 섹션 / s·s2 연한 바탕·테두리
           l 어두운 바탕 위 강조 / g1·g2 창업 카드 그라데이션 / logo 로고 색
   ===================================================================== */

/* 라이트 — 화이트 + 골드 */
body.layout-joy.theme-light {
  --jc-p:#c9a22e; --jc-p2:#b08c1f; --jc-pt:#93730f; --jc-pt2:#7c600c;
  --jc-on:#1c1c1c; --jc-on2:#1c1c1c; --jc-on-soft:rgba(28,28,28,.72);
  --jc-d:#8f7012; --jc-d2:#745a0c; --jc-x:#2e2a1f; --jc-xx:#1f1c14;
  --jc-s:#fbf6e6; --jc-s2:#efe0b0; --jc-l:#f0d27a; --jc-g1:#3a3426; --jc-g2:#1f1c14;
  --jc-p-rgb:201,162,46; --jc-x-rgb:46,42,31; --jc-logo:#2e2a1f;
}
/* 다크 / 모노 — 블랙 + 골드 */
body.layout-joy.theme-dark,
body.layout-joy.theme-mono {
  --jc-p:#1a1a1a; --jc-p2:#000; --jc-pt:#1a1a1a; --jc-pt2:#000;
  --jc-on:#fff; --jc-on2:#fff; --jc-on-soft:rgba(255,255,255,.8);
  --jc-d:#1a1a1a; --jc-d2:#000; --jc-x:#141414; --jc-xx:#000;
  --jc-s:#f4f2ec; --jc-s2:#e3ddcc; --jc-l:#e2c277; --jc-g1:#2a2a2a; --jc-g2:#000;
  --jc-p-rgb:26,26,26; --jc-x-rgb:20,20,20; --jc-logo:#111;
}
/* 블랙 — 블랙 + 화이트 (무채색) */
body.layout-joy.theme-black {
  --jc-p:#111; --jc-p2:#333; --jc-pt:#111; --jc-pt2:#333;
  --jc-on:#fff; --jc-on2:#fff; --jc-on-soft:rgba(255,255,255,.8);
  --jc-d:#111; --jc-d2:#000; --jc-x:#111; --jc-xx:#000;
  --jc-s:#f3f3f3; --jc-s2:#dcdcdc; --jc-l:#ffffff; --jc-g1:#2b2b2b; --jc-g2:#000;
  --jc-p-rgb:17,17,17; --jc-x-rgb:17,17,17; --jc-logo:#111;
}
/* 블랙 강조 — 글자색으로는 강조가 안 되므로 제목 속 강조어에 형광펜 밑줄을 깐다.
   currentColor 기준이라 흰 바탕에선 회색, 어두운 사진·섹션 위(흰 글자)에선 반투명 흰색으로 자동 전환 */
body.layout-joy.theme-black :is(h1,h2,h3,h4,.jy-h2,.jy-slide__title) :is(em,[class*="__highlight"],span[style*="color"]),
body.layout-joy.theme-black .jy-slide__title em {
  background-image: linear-gradient(transparent 58%, color-mix(in srgb, currentColor 22%, transparent) 58%, color-mix(in srgb, currentColor 22%, transparent) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .06em; font-weight: 800;
}
body.layout-joy.theme-black.rn-sub.rn-about .ab-intro__highlight::after { background: color-mix(in srgb, currentColor 22%, transparent) }

/* 옐로우 — 옐로우 + 블랙 글자 */
body.layout-joy.theme-yellow {
  --jc-p:#ffc61a; --jc-p2:#f0b400; --jc-pt:#a06e00; --jc-pt2:#875c00;
  --jc-on:#1c1c1c; --jc-on2:#1c1c1c; --jc-on-soft:rgba(28,28,28,.75);
  --jc-d:#946500; --jc-d2:#7a5300; --jc-x:#26221a; --jc-xx:#1a1710;
  --jc-s:#fff7dc; --jc-s2:#ffe69a; --jc-l:#ffd43b; --jc-g1:#3a3322; --jc-g2:#1a1710;
  --jc-p-rgb:255,198,26; --jc-x-rgb:38,34,26; --jc-logo:#1c1c1c;
}
/* 레드 */
body.layout-joy.theme-red {
  --jc-p:#d32f2f; --jc-p2:#b71c1c; --jc-pt:#c62828; --jc-pt2:#a31b1b;
  --jc-on:#fff; --jc-on2:#fff; --jc-on-soft:rgba(255,255,255,.85);
  --jc-d:#b71c1c; --jc-d2:#8e1414; --jc-x:#4a1010; --jc-xx:#330a0a;
  --jc-s:#fdeeee; --jc-s2:#f6cfcf; --jc-l:#ffb3b3; --jc-g1:#e04848; --jc-g2:#8e1414;
  --jc-p-rgb:211,47,47; --jc-x-rgb:74,16,16; --jc-logo:#b71c1c;
}
/* 네이비 */
body.layout-joy.theme-navy {
  --jc-p:#2c5aa0; --jc-p2:#234a86; --jc-pt:#2c5aa0; --jc-pt2:#1f3f73;
  --jc-on:#fff; --jc-on2:#fff; --jc-on-soft:rgba(255,255,255,.85);
  --jc-d:#23488a; --jc-d2:#1a3768; --jc-x:#14213d; --jc-xx:#0e1830;
  --jc-s:#eef3fb; --jc-s2:#d3dff2; --jc-l:#a9c4ee; --jc-g1:#3a6bb5; --jc-g2:#14213d;
  --jc-p-rgb:44,90,160; --jc-x-rgb:20,33,61; --jc-logo:#14213d;
}
/* 세이지 */
body.layout-joy.theme-sage {
  --jc-p:#6f8a5e; --jc-p2:#5d7650; --jc-pt:#5d7650; --jc-pt2:#4b6141;
  --jc-on:#fff; --jc-on2:#fff; --jc-on-soft:rgba(255,255,255,.85);
  --jc-d:#4f6644; --jc-d2:#3f5236; --jc-x:#33432c; --jc-xx:#263220;
  --jc-s:#f1f4ec; --jc-s2:#d9e3cd; --jc-l:#cfe0bd; --jc-g1:#7d9a6a; --jc-g2:#3f5236;
  --jc-p-rgb:111,138,94; --jc-x-rgb:51,67,44; --jc-logo:#33432c;
}
/* 모카 */
body.layout-joy.theme-mocha {
  --jc-p:#9a6b45; --jc-p2:#82583a; --jc-pt:#82583a; --jc-pt2:#6b472d;
  --jc-on:#fff; --jc-on2:#fff; --jc-on-soft:rgba(255,255,255,.85);
  --jc-d:#7a5333; --jc-d2:#5e3f26; --jc-x:#3f2c1e; --jc-xx:#2c1f15;
  --jc-s:#f7f0e6; --jc-s2:#e8d6bd; --jc-l:#e9c99f; --jc-g1:#a8774f; --jc-g2:#5e3f26;
  --jc-p-rgb:154,107,69; --jc-x-rgb:63,44,30; --jc-logo:#3f2c1e;
}
/* 로즈 */
body.layout-joy.theme-rose {
  --jc-p:#a33d55; --jc-p2:#8a3247; --jc-pt:#8a3247; --jc-pt2:#72283a;
  --jc-on:#fff; --jc-on2:#fff; --jc-on-soft:rgba(255,255,255,.85);
  --jc-d:#8f3449; --jc-d2:#74293b; --jc-x:#4f1f2b; --jc-xx:#3a161f;
  --jc-s:#fbf0f2; --jc-s2:#efd2d9; --jc-l:#f4bccb; --jc-g1:#b04a62; --jc-g2:#5e2433;
  --jc-p-rgb:163,61,85; --jc-x-rgb:79,31,43; --jc-logo:#4f1f2b;
}

/* 포인트 바탕 위 링크 글자 — style.css 의 'body.layout-joy a{color:inherit}' 가 덮어써서 기본(민트)에서도 검정 글자로 나오던 곳.
   기본은 지금 화면 그대로(inherit) 두고, 다른 색상에서만 바탕에 맞는 글자색을 준다 */
html body.layout-joy .jy-quickbar a { color: var(--jc-on, inherit) }
html body.layout-joy a.jy-biz__green { color: var(--jc-biz-on, inherit) }
body.layout-joy:is(.theme-light,.theme-dark,.theme-mono,.theme-black,.theme-yellow,.theme-red,.theme-navy,.theme-sage,.theme-mocha,.theme-rose) { --jc-biz-on: #fff }

/* 대비 점검(2026-10-10)에서 걸린 곳 — 색상 테마에서만 바꾸고 기본(민트)은 원래 값을 폴백으로 유지 */
html body.layout-joy.rn-sub.rn-minifuneral .mf-cta__phone em { color: var(--jc-on2, var(--gold-400)) }
html body.layout-joy.rn-sub.rn-minifuneral .mf-cta__phone--ghost em { color: var(--jc-on2, var(--gold-600)) }
html body.layout-joy.rn-sub.rn-minifuneral:is(.theme-red,.theme-yellow,.theme-light) .mf-hero__call small { color: inherit !important; opacity: .8 }
html body.layout-joy.rn-sub.rn-pb .pb-f10__point-num { color: var(--jc-l, var(--svc-green-hover)) }
/* 장례상담 마지막 박스 안내문 — 어두운 바탕에 갈색 글자(#4d4537)라 기본 색에서도 안 보이던 문제. 모든 색에서 밝은 글자로 */
html body.layout-joy.rn-sub.rn-funeral-consult .fc-final p { color: rgba(255,255,255,.78) }

/* 리뉴얼 서브에서 원래부터 글자가 안 보이던 곳(바탕과 글자색이 같은 계열) — 모든 색상에서 읽히게 */
html body.layout-joy.rn-sub.rn-funeral-consult .fc-form button[type="submit"] { color: #fff; background: var(--jc-x, #26382e) }
html body.layout-joy.rn-sub.rn-funeral-consult .fc-final .rn-container > span { color: var(--jc-l, #a3efd2) }
html body.layout-joy.rn-sub.rn-mymyo .mm-compare__card--mymyo .mm-compare__rows :is(li, span) { color: var(--svc-text, #18352d) }
html body.layout-joy.rn-sub.rn-mymyo .mm-final__title em { color: var(--jc-l, var(--svc-green)) }
html body.layout-joy.rn-sub.rn-about .ab-pillar__price-note { color: #737b76 }
html body.layout-joy.rn-sub.rn-naktojang .nt-price--featured .nt-price__list { color: var(--svc-text, #18352d) }
html body.layout-joy.rn-sub.rn-naktojang .nt-price--featured .nt-price__amount small { color: var(--svc-muted, #64736e) }
html body.layout-joy.theme-yellow .ht-filter__btn.is-active i { color: rgba(28,28,28,.7) }

/* 기존 서브 CSS 에 남은 초록 2곳 — 원래 값을 폴백으로 둬서 기본(민트)에서는 그대로 */
html body.layout-joy.rn-sub .dir-card__badge { background: rgba(var(--jc-x-rgb, 26,58,23), .86) }
html body.layout-joy.rn-sub .mf-product__facility { color: var(--jc-x, rgb(39,70,42)) }

/* ---- 본사 로고: GPR 엠블럼 + '지피알상조그룹' (2026-10-10 고객 요청) — 색상 테마를 따라 바뀐다 ---- */
body.layout-joy .mh-logo--brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none }
body.layout-joy .mh-logo__mark {
  display: block; flex: none; width: 37px; height: 31px;
  background-color: var(--jc-logo, #2a3d27);
  -webkit-mask: url(/images/gpr_emblem.png) center / contain no-repeat;
          mask: url(/images/gpr_emblem.png) center / contain no-repeat;
}
body.layout-joy .mh-logo__name {
  font-size: 22px; font-weight: 800; letter-spacing: -.045em; line-height: 1; white-space: nowrap;
  color: var(--jc-logo, #2a3d27);
}
@media (min-width: 1025px) and (max-width: 1250px) {
  body.layout-joy .mh-logo__mark { width: 31px; height: 26px }
  body.layout-joy .mh-logo__name { font-size: 18px }
}
@media (max-width: 1024px) {
  body.layout-joy .mh-logo--brand { gap: 6px }
  body.layout-joy .mh-logo__mark { width: 31px; height: 26px }
  body.layout-joy .mh-logo__name { font-size: 19px }
}
@media (max-width: 360px) {
  body.layout-joy .mh-logo__mark { width: 27px; height: 23px }
  body.layout-joy .mh-logo__name { font-size: 16.5px }
}