/* 점포가이드 매물 상세 — «유리» 스타일 · 2026-09-24
   라이브 = https://jumpo.shop/jg-assets/jg-glass.css · 부르는 곳 = mu-plugins/jumpo-maemul-glass.php (매물·직거래 상세만)
   배포·되돌리기 = 저장소 `_deploy_maemul_glass_20260924.py`

   👤 09-24 «프랜차이즈 순위 버튼 → 유리 · 불투명도 40%» → «매물 상세페이지 밑에 버튼도 너무 촌스럽다 … 유리로»
         → «이 흰색 라인도 투명도를 좀 줘야해»(매물 핵심 요약 · 주변 매물 · 함께 보면 좋은 · 자주 묻는 질문)

   🔴 왜 «따로 뺀 CSS 파일» 인가 (09-24 사고) — 처음엔 <style> 을 HTML 에 직접 넣었다. 그러자
      상자를 끼워 넣는 플러그인들이 «HTML 에 이미 이 클래스 이름이 있으면 건너뛴다» 는 중복 가드에 걸려
      상권분석 배너·창업비용·음식점 허브·특수상권 허브 상자가 **통째로 사라졌다**(17:59~18:03, 4분 · 즉시 원복).
      → 이 파일의 클래스 이름은 HTML 에 절대 넣지 말 것(인라인 <style> 금지). <link> 한 줄로만 부른다.

   🔴 상자 색은 각 플러그인이 «인라인 style» 로 박는다 → 여기서 !important 로 덮는다.
      그 플러그인의 인라인 색을 고쳐도 화면이 안 바뀌면 이 파일 때문이다.
   🟢 「현 매장 상권분석 보고서」 딥링크 = 아래 D 에서 «모양만» 초록 유리(09-24 👤 🅰️). 링크·주소·문구는 무접촉
      — jumpo-sangkwon-link.php 의 «절대 건드리지 않는다» 는 딥링크 «기능» 을 지키라는 규칙이다.
   ✋ 손대지 않음: 특수상권 상단 교차링크(.jumpo-special-crosslinks — 흰 상자지만 H1 바로 밑 · 👤 미지정)
   값 = 프랜차이즈 순위(`_franchise_rank_hub.php` --btn*)와 같다. */

/* ── A. 링크 상자 5종 → 유리 버튼(블루 40%) ─────────────────────────────── */
.jumpo-brand-hub,.jumpo-food-hub-link,.jumpo-special-location-hub-link,.jumpo-megacoffee-startup-link,.jumpo-brand-disc{position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 55%,rgba(255,255,255,0)) rgba(61,125,255,.4)!important;
  border:0!important;border-radius:12px!important;
  box-shadow:inset 0 0 0 1px rgba(156,201,255,.34),inset 0 1px 0 rgba(255,255,255,.2),0 4px 14px rgba(2,10,26,.35)!important;
  -webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);
  transition:background-color .15s ease,box-shadow .15s ease,transform .12s ease}
.jumpo-brand-hub:hover,.jumpo-food-hub-link:hover,.jumpo-special-location-hub-link:hover,.jumpo-megacoffee-startup-link:hover,.jumpo-brand-disc:hover{
  background-color:rgba(76,141,255,.56)!important;
  box-shadow:inset 0 0 0 1px rgba(156,201,255,.52),inset 0 1px 0 rgba(255,255,255,.26),0 8px 20px rgba(2,10,26,.42)!important}
.jumpo-brand-hub:active,.jumpo-food-hub-link:active,.jumpo-megacoffee-startup-link:active,.jumpo-brand-disc:active{transform:scale(.99)}
/* 흰 페이지용 진한 파랑·회색(#0b5ed7·#4b5563)이 남아 있던 상자가 있다 → 유리 위에서 읽히게 */
.jumpo-brand-hub>a,.jumpo-food-hub-link>a,.jumpo-special-location-hub-link>a:first-child,.jumpo-megacoffee-startup-link>a,.jumpo-brand-disc>a{color:#fff!important}
.jumpo-food-hub-link>span,.jumpo-special-location-hub-link>span,.jumpo-megacoffee-startup-link>span{color:rgba(255,255,255,.78)!important}
.jumpo-special-location-hub-link>a+span+a{color:rgba(255,255,255,.72)!important}
/* 상자 어디를 눌러도 가게 — 링크가 하나뿐인 상자만(특수상권 상자는 링크가 둘이라 제외) */
.jumpo-brand-hub>a::after,.jumpo-food-hub-link>a::after,.jumpo-megacoffee-startup-link>a::after,.jumpo-brand-disc>a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px}

/* ── B. 상권분석 지도 배너 → 유리 테두리만 ────────────────────────────────
   🔴 파란 막은 씌우지 않는다(08-10 👤 «블루 레이어를 떼야 할 듯») — 바탕 #0b2545 + 지도 .28 그대로.
   지도 그림(절대배치 span)이 안쪽 테두리를 덮으므로 테두리는 ::after 로 그 위에 그린다. */
.jumpo-sangkwon-link{border:0!important;border-radius:12px!important;box-shadow:0 4px 14px rgba(2,10,26,.35)!important;transition:box-shadow .15s ease,transform .12s ease}
.jumpo-sangkwon-link::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(156,201,255,.34),inset 0 1px 0 rgba(255,255,255,.2);transition:box-shadow .15s ease}
.jumpo-sangkwon-link:hover{box-shadow:0 8px 20px rgba(2,10,26,.42)!important}
.jumpo-sangkwon-link:hover::after{box-shadow:inset 0 0 0 1px rgba(156,201,255,.6),inset 0 1px 0 rgba(255,255,255,.28)}
.jumpo-sangkwon-link:active{transform:scale(.99)}

/* ── C. 흰 상자 → 투명 유리(흰색 7%) — 매물 핵심 요약 · 주변 매물 캐러셀 · 함께 보면 좋은 · 자주 묻는 질문 ──
   사이트 카드 규칙(CLAUDE.md 🎨: rgba(255,255,255,.05) + 테두리 .12)보다 한 단계 또렷하게. 글자는 밝게 뒤집는다. */
.jumpo-longtail-intro,.jumpo-longtail-related,.jumpo-related-listings,.jumpo-mfaq details{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 28px rgba(2,10,26,.28)!important;
  -webkit-backdrop-filter:blur(8px) saturate(130%);backdrop-filter:blur(8px) saturate(130%)}

/* C-1 매물 핵심 요약 (jumpo-longtail-intro — 자식이 전부 인라인 style) */
.jumpo-longtail-intro>p:first-child{color:#4ade80!important}
.jumpo-longtail-intro>p:nth-of-type(2){color:#fff!important}
.jumpo-longtail-intro>p:last-child:not(:nth-of-type(2)){color:rgba(255,255,255,.78)!important}
.jumpo-longtail-intro>div>span{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.16)!important}
.jumpo-longtail-intro>div>span>span:first-child{color:rgba(255,255,255,.62)!important}
.jumpo-longtail-intro>div>span>span:last-child{color:#fff!important}
.jumpo-longtail-intro>div>span[style*="#ecfdf5"]{background:rgba(34,197,94,.14)!important;border-color:rgba(74,222,128,.35)!important}
.jumpo-longtail-intro>div>span[style*="#ecfdf5"]>span:first-child{color:#86efac!important}
.jumpo-longtail-intro>div>span[style*="#ecfdf5"]>span:last-child{color:#bbf7d0!important}

/* C-2 주변 매물 캐러셀 (jumpo-longtail-related) */
.jumpo-longtail-related>div:first-child>span:first-child{color:#fff!important}
.jumpo-longtail-related>div:first-child>span:last-child:not(:first-child){color:rgba(255,255,255,.55)!important}
.jumpo-related-track>a{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 6px 18px rgba(2,10,26,.25)!important;transition:transform .15s ease,border-color .15s ease}
.jumpo-related-track>a:hover{border-color:rgba(156,201,255,.5)!important;transform:translateY(-2px)}
.jumpo-related-track>a>span:last-child>span:first-child{color:#fff!important}
/* 🔴 배지는 «마지막 줄» 이 아니라 배지 색(#ecfdf5)으로 집는다 — 순수익이 없는 카드는 제목 한 줄뿐이라
   :last-child 가 제목을 잡아 제목에 초록 상자가 씌워졌다(09-24 👤 «이 부분 이상해» · 용산구 구내식당 카드) */
.jumpo-related-track>a>span:last-child>span[style*="#ecfdf5"]{background:rgba(34,197,94,.16)!important;color:#86efac!important}
/* 순수익이 없고 월매출만 있는 카드의 파란 배지(#eff6ff) — 유리 카드 위에 맞게 */
.jumpo-related-track>a>span:last-child>span[style*="#eff6ff"]{background:rgba(61,125,255,.2)!important;color:#9cc9ff!important}
.jumpo-related-nav{background:rgba(61,125,255,.45)!important;
  box-shadow:inset 0 0 0 1px rgba(156,201,255,.4),0 5px 16px rgba(2,10,26,.35)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.jumpo-related-nav:hover,.jumpo-related-nav:focus-visible{background:rgba(76,141,255,.62)!important;outline-color:rgba(156,201,255,.35)!important}
/* 아래 «○○ 지역별 매물 현황 ›» 알약 = A 와 같은 유리 버튼 */
.jumpo-longtail-related>div:last-child>a{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 55%,rgba(255,255,255,0)) rgba(61,125,255,.4)!important;
  box-shadow:inset 0 0 0 1px rgba(156,201,255,.34),inset 0 1px 0 rgba(255,255,255,.2),0 4px 14px rgba(2,10,26,.35)!important;
  transition:background-color .15s ease}
.jumpo-longtail-related>div:last-child>a:hover{background-color:rgba(76,141,255,.56)!important}

/* C-3 함께 보면 좋은 창업·양도 매물 (jumpo-related-listings) */
.jumpo-related-listings>div{color:#fff!important}
.jumpo-related-listings li{border-top-color:rgba(255,255,255,.1)!important}
.jumpo-related-listings li a{color:rgba(255,255,255,.88)!important}
.jumpo-related-listings li a .rl-arrow{color:rgba(255,255,255,.45)!important}
.jumpo-related-listings li a:hover,.jumpo-related-listings li a:hover .rl-arrow{color:#9cc9ff!important}

/* C-4 자주 묻는 질문 (jumpo-mfaq) — 제목이 네이비 위 네이비(#071f3d)라 안 보이던 것도 같이 해결 */
.jumpo-mfaq>h2{color:#fff!important}
.jumpo-mfaq details[open]{border-color:rgba(156,201,255,.45)!important}
.jumpo-mfaq summary{color:#fff!important}
.jumpo-mfaq summary::after{border-color:#8fc0ff!important}
.jumpo-mfaq .mfaq-a{color:rgba(255,255,255,.8)!important}

/* ── D. 「현 매장 상권분석 보고서」 딥링크 → 초록 유리 (09-24 👤 🅰️ «a 로 가자 아주 좋다») ─────────────
   모양은 A 와 같게, 색은 초록 유지 — 파랑(다른 자리 상권분석·허브)과 «이 매장 보고서» 역할을 구분한다
   (jumpo-sangkwon-link.php 설계: 딥링크 = 초록 #27ae60 · 클린 배너 = 파랑).
   🔴 클래스가 없어 인라인 style 문자열로 집는다 → jumpo-seo.php 가 «border-left:4px solid #27ae60» 을 바꾸면 이 규칙이 풀린다(옛 모양으로 돌아갈 뿐 깨지진 않는다). */
a[style*="border-left:4px solid #27ae60"]{position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 55%,rgba(255,255,255,0)) rgba(39,174,96,.4)!important;
  border:0!important;border-radius:12px!important;
  box-shadow:inset 0 0 0 1px rgba(134,239,172,.36),inset 0 1px 0 rgba(255,255,255,.2),0 4px 14px rgba(2,10,26,.35)!important;
  -webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);
  transition:background-color .15s ease,box-shadow .15s ease,transform .12s ease}
a[style*="border-left:4px solid #27ae60"]:hover{background-color:rgba(46,204,113,.52)!important;
  box-shadow:inset 0 0 0 1px rgba(134,239,172,.55),inset 0 1px 0 rgba(255,255,255,.26),0 8px 20px rgba(2,10,26,.42)!important}
a[style*="border-left:4px solid #27ae60"]:active{transform:scale(.99)}
a[style*="border-left:4px solid #27ae60"]>span:last-child{color:rgba(255,255,255,.8)!important}

/* ── E. 정보공개서 글 아래 상자 3종 → 투명 유리 (09-24 👤 «정보공개서 쪽도 살짝 손봐야할듯») ──────────
   · .jumpo-dl-listings(양도양수 매물은 있나요? — jumpo-disclosure-layer.php) · .jumpo-ind-compare(업종 평균 비교)
   · .jumpo-related-disclosures(함께 보면 좋은 프랜차이즈 정보공개서 — jumpo-related-disclosures.php)
   🔴 본문 흰 카드(.franchise-dashboard · 표·요약)는 무접촉 — «디자인 원본 그대로» 가 👤 확정(렌더러 2판). */
.jumpo-dl-listings,.jumpo-ind-compare,.jumpo-related-disclosures{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 28px rgba(2,10,26,.28)!important;
  -webkit-backdrop-filter:blur(8px) saturate(130%);backdrop-filter:blur(8px) saturate(130%)}
.jumpo-dl-listings>h2,.jumpo-ind-compare>h2,.jumpo-related-disclosures>div:first-child{color:#fff!important}
/* 🔴 정보공개서 글엔 사이트 공통 CSS `body.is-franchise-post .entry-content h2{color:#071f3d!important}`(특이도 0,2,2)가 있어
   위 규칙(0,1,1)이 진다 — 09-24 라이브에서 제목이 네이비 위 네이비로 안 보였다. 클래스 한 번 더 겹쳐 (0,3,2) 로 이긴다. */
body .entry-content .jumpo-dl-listings.jumpo-dl-listings>h2,body .entry-content .jumpo-ind-compare.jumpo-ind-compare>h2{color:#fff!important}
.jumpo-dl-listings>p,.jumpo-dl-listings li,.jumpo-ind-compare>p{color:rgba(255,255,255,.82)!important}
.jumpo-ind-compare strong,.jumpo-dl-listings strong{color:#fff!important}
.jumpo-ind-compare>p[style*="font-size:12px"]{color:rgba(255,255,255,.5)!important}
.jumpo-dl-listings li a{color:#9cc9ff!important}
/* 「창업 실매물 전체 보기 ›」 = A 와 같은 유리 버튼 · 두 번째(테두리만) 버튼 = 유리 테두리 */
.jumpo-dl-listings>a[style*="background:#0b5ed7"]{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 55%,rgba(255,255,255,0)) rgba(61,125,255,.4)!important;
  border-radius:10px!important;
  box-shadow:inset 0 0 0 1px rgba(156,201,255,.34),inset 0 1px 0 rgba(255,255,255,.2),0 4px 14px rgba(2,10,26,.35)!important;
  transition:background-color .15s ease}
.jumpo-dl-listings>a[style*="background:#0b5ed7"]:hover{background-color:rgba(76,141,255,.56)!important}
.jumpo-dl-listings>a[style*="border:1px solid #0b5ed7"]{border-color:rgba(156,201,255,.45)!important;color:#cfe3ff!important;border-radius:10px!important}
.jumpo-dl-listings>a[style*="border:1px solid #0b5ed7"]:hover{background:rgba(255,255,255,.06)!important}
.jumpo-related-disclosures li a{color:rgba(255,255,255,.88)!important}
.jumpo-related-disclosures li a:hover{color:#9cc9ff!important}

/* 키보드 초점 */
.jumpo-brand-hub>a:focus-visible,.jumpo-food-hub-link>a:focus-visible,.jumpo-special-location-hub-link>a:focus-visible,
.jumpo-megacoffee-startup-link>a:focus-visible,.jumpo-brand-disc>a:focus-visible,.jumpo-sangkwon-link:focus-visible,
.jumpo-related-track>a:focus-visible,.jumpo-related-listings li a:focus-visible,
a[style*="border-left:4px solid #27ae60"]:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.jumpo-related-track>a,.jumpo-brand-hub,.jumpo-food-hub-link,.jumpo-megacoffee-startup-link,.jumpo-brand-disc,.jumpo-sangkwon-link,
  a[style*="border-left:4px solid #27ae60"]{transition:none}}