/* =========================================================
   YOOHANTECH CTA – GLOBAL STYLE
   File: yh-cta.css
   Used for:
   - Global Bottom Fixed CTA
   - Content Card CTA
   Light/Dark Auto Theme
========================================================= */

/* ---------- Reset & Base ---------- */
.yh-cta-root {
  all: initial;
  display: block;
  position: relative;
  z-index: 2147483000;
}

.yh-cta-root,
.yh-cta-root * {
  box-sizing: border-box;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Noto Sans KR",
    "Apple SD Gothic Neo", "Malgun Gothic",
    Arial, sans-serif;
}

/* ---------- Theme Tokens ---------- */
.yh-cta {
  --bg: rgba(255,255,255,0.92);
  --panel: rgba(255,255,255,0.88);
  --text: #0f172a;
  --muted: rgba(15,23,42,0.65);
  --line: rgba(15,23,42,0.12);
  --shadow: 0 18px 50px rgba(15,23,42,0.18);
  --primary: #0b5cff;
  --primary-text: #ffffff;
  --ghost-bg: rgba(15,23,42,0.06);
  --ghost-text: rgba(15,23,42,0.88);
  --radius-lg: 18px;
  --radius-md: 14px;
}

@media (prefers-color-scheme: dark) {
  .yh-cta {
    --bg: rgba(15,23,42,0.82);
    --panel: rgba(2,6,23,0.72);
    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.62);
    --line: rgba(255,255,255,0.16);
    --shadow: 0 24px 60px rgba(0,0,0,0.45);
    --primary: #4ea1ff;
    --primary-text: #06101f;
    --ghost-bg: rgba(255,255,255,0.12);
    --ghost-text: rgba(255,255,255,0.9);
  }
}

/* =========================================================
   1. GLOBAL BOTTOM FIXED CTA
========================================================= */
.yh-cta-bottom {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--panel), var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transform: translateY(140%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}

.yh-cta-bottom.yh-cta-show {
  transform: translateY(0);
  opacity: 1;
}

.yh-cta-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.yh-cta-head {
  flex: 1;
  min-width: 0;
}

.yh-cta-title {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--text);
  
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.yh-cta-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.yh-cta-badge {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255,255,255,0.4);
}

@media (prefers-color-scheme: dark) {
  .yh-cta-badge {
    background: rgba(255,255,255,0.08);
  }
}

.yh-cta-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.yh-cta-btn {
  flex: 1;
  height: 42px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.2px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.yh-cta-btn-primary {
  background: var(--primary);
  color: var(--primary-text);
}

.yh-cta-btn-ghost {
  background: var(--ghost-bg);
  color: var(--ghost-text);
  border: 1px solid var(--line);
}

.yh-cta-close {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

/* =========================================================
   2. CONTENT CARD CTA (POST / PAGE)
========================================================= */
/* =========================================================
   POST / PAGE – CONTENT CARD CTA (Redesign v2)
   - compact header with icon chip
   - subtle gradient + border glow
   - 2-button conversion layout
========================================================= */

.yh-post-cta{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  margin:28px 0;
}

.yh-post-cta .yh-post-cta-card{
  max-width: 520px;              /* 기존 340px보다 '고급스러운 여유' */
  margin: 0 auto;
  padding: 18px 18px 16px 18px;
  box-sizing: border-box;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg));
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

/* 상단 얇은 포인트 라인 */
.yh-post-cta .yh-post-cta-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:3px;
  background: linear-gradient(90deg, var(--primary), rgba(34,197,94,0.9));
  opacity: .9;
}

/* 헤더 행: 아이콘칩 + 타이틀 */
.yh-post-cta .yh-post-cta-head{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  margin: 2px 0 8px 0;
}

.yh-post-cta .yh-post-cta-ic{
  flex:none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
}

@media (prefers-color-scheme: dark){
  .yh-post-cta .yh-post-cta-ic{
    background: rgba(255,255,255,0.10);
  }
}

.yh-post-cta .yh-post-cta-title{
  margin:0;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.3px;
  line-height: 1.35;
}

/* 설명 */
.yh-post-cta .yh-post-cta-desc{
  margin: 8px 0 14px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: -0.2px;
}

/* 액션 영역 */
.yh-post-cta .yh-post-cta-actions{
  display:flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

/* 버튼 공통 */
.yh-post-cta .yh-post-cta-btn{
  flex: 1 1 180px;
  min-width: 180px;
  height: 44px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.2px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  box-sizing:border-box;
  white-space: nowrap;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

/* 전화: 고스트 */
.yh-post-cta .yh-post-cta-btn-call{
  background: rgba(15,23,42,0.05);
  color: var(--text) !important;
  border: 1px solid var(--line);
}

@media (prefers-color-scheme: dark){
  .yh-post-cta .yh-post-cta-btn-call{
    background: rgba(255,255,255,0.10);
  }
}

/* 온라인: 프라이머리 (초록 그라데이션 유지) */
.yh-post-cta .yh-post-cta-btn-online{
  background: linear-gradient(90deg, #16a34a, #22c55e);
  color: #ffffff !important;
  border: 0;
  box-shadow: 0 10px 22px rgba(34,197,94,0.28);
}

/* Hover (PC에서만) */
@media (hover:hover){
  .yh-post-cta .yh-post-cta-btn-call:hover{
    transform: translateY(-1px);
  }
  .yh-post-cta .yh-post-cta-btn-online:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(34,197,94,0.32);
  }
  .yh-post-cta .yh-post-cta-btn-call,
  .yh-post-cta .yh-post-cta-btn-online{
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
}

/* 모바일 최적화 */
@media (max-width: 380px){
  .yh-post-cta{ padding: 0 12px; }
  .yh-post-cta .yh-post-cta-card{
    padding: 16px 14px 14px 14px;
    border-radius: 16px;
  }
  .yh-post-cta .yh-post-cta-btn{
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    height: 46px;
    border-radius: 16px;
  }
}

/* =========================================================
   POST CTA – Consultation Time
========================================================= */
/* =========================================================
   POST CTA – Consultation Time (Compact Badge)
========================================================= */
.yh-post-cta .yh-post-cta-time{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin: 4px 0 10px 0;
  padding: 5px 9px;

  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.2px;

  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(15,23,42,0.03);

  box-sizing: border-box;
  user-select: none;
}

/* 아이콘도 작게 */
.yh-post-cta .yh-post-cta-time .yh-post-cta-time-ic{
  font-size: 12px;
  line-height: 1;
  opacity: .9;
}

/* “평일 09-18” 같은 짧은 텍스트에 최적화 */
.yh-post-cta .yh-post-cta-time .yh-post-cta-time-txt{
  white-space: nowrap;
}

/* 링크/클릭 완전 차단 */
.yh-post-cta .yh-post-cta-time,
.yh-post-cta .yh-post-cta-time *{
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

@media (prefers-color-scheme: dark){
  .yh-post-cta .yh-post-cta-time{
    background: rgba(255,255,255,0.06);
  }
}




/* =========================================================
   END
========================================================= */



/* =========================================
   Post CTA: PC only (hide on mobile)
========================================= */
.yh-post-cta-pc-only{ display:block; }

@media (max-width: 768px){
  .yh-post-cta-pc-only{ display:none !important; }
}


/* =========================================================
   (B) BRAND SLOGAN – Theme Unified
========================================================= */
.yh-brand-slogan{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 26px 0 0 0;
}

.yh-brand-slogan .yh-brand-slogan-inner{
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg));
  box-shadow: var(--shadow);
  text-align: center;
}

.yh-brand-slogan .yh-brand-line{
  margin: 0;
  color: var(--text);
  font-weight: 900;
  letter-spacing: -0.3px;
  line-height: 1.45;
  font-size: 18px;
}

.yh-brand-slogan .yh-brand-line .yh-brand-accent-1{
  color: #ba372a; /* 기존 포인트 유지 */
}

.yh-brand-slogan .yh-brand-line .yh-brand-accent-2{
  color: #169179; /* 기존 포인트 유지 */
}

.yh-brand-slogan .yh-brand-line .yh-brand-accent-3{
  color: var(--primary); /* 테마 프라이머리로 통일 */
}

.yh-brand-slogan .yh-brand-company{
  margin-top: 8px;
  font-size: 15px;
  font-weight: 900;
  color: var(--primary);
}

@media (max-width: 480px){
  .yh-brand-slogan .yh-brand-line{ font-size: 16px; }
  .yh-brand-slogan .yh-brand-company{ font-size: 14px; }
}

/* =========================================================
   FINAL: '온라인 상담' 텍스트 PC/모바일 모두 흰색 고정
   - link/visited/hover/active 상태까지 전부 커버
========================================================= */
.yh-post-cta-btn-online,
.yh-post-cta-btn-online:link,
.yh-post-cta-btn-online:visited,
.yh-post-cta-btn-online:hover,
.yh-post-cta-btn-online:active,
.yh-post-cta-btn-online span{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* =========================================================
   VIDEO ENTRY CTA – Leak Test Video
========================================================= */

.yh-video-entry-cta{
  width:100%;
  max-width:100%;
  margin: 26px 0;
  box-sizing: border-box;
}

.yh-video-entry-card{
  max-width: 520px;
  margin: 0 auto;
  display: block;
  text-decoration: none;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg));
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  color: inherit;
}

/* 상단 포인트 바 */
.yh-video-entry-bar{
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #0b5cff, #22c55e);
}

/* 본문 */
.yh-video-entry-body{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 16px 18px;
}

/* 정보 영역 */
.yh-video-entry-info{
  min-width: 0;
}

.yh-video-entry-badge{
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.5);
  color: var(--muted);
}

@media (prefers-color-scheme: dark){
  .yh-video-entry-badge{
    background: rgba(255,255,255,0.08);
  }
}

.yh-video-entry-title{
  margin: 8px 0 4px 0;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.3px;
  color: var(--text);
}

.yh-video-entry-desc{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* 플레이 버튼 */
.yh-video-entry-play{
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px rgba(34,197,94,0.35);
}

.yh-video-entry-triangle{
  width: 0;
  height: 0;
  border-left: 14px solid #ffffff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 2px;
}

/* Hover (PC만) */
@media (hover:hover){
  .yh-video-entry-card{
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .yh-video-entry-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(15,23,42,0.22);
  }
}

/* 모바일 */
@media (max-width: 380px){
  .yh-video-entry-body{
    padding: 16px 14px;
    gap: 12px;
  }
  .yh-video-entry-play{
    width: 48px;
    height: 48px;
  }
}

/* =========================================================
   GAS CTA – Gas Detector Consultation
========================================================= */

.yh-gas-cta{
  width:100%;
  max-width:100%;
  margin: 26px 0;
  box-sizing: border-box;
}

.yh-gas-cta .yh-gas-cta-card{
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 18px 14px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg));
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

/* 상단 포인트 라인(가스=블루 계열 + 청록) */
.yh-gas-cta .yh-gas-cta-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:3px;
  background: linear-gradient(90deg, var(--primary), rgba(20,184,166,0.95));
  opacity: .95;
}

.yh-gas-cta .yh-gas-cta-head{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  margin: 2px 0 12px 0;
}

.yh-gas-cta .yh-gas-cta-ic{
  flex:none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
}

@media (prefers-color-scheme: dark){
  .yh-gas-cta .yh-gas-cta-ic{ background: rgba(255,255,255,0.10); }
}

.yh-gas-cta .yh-gas-cta-headtxt{ flex:1; min-width:0; }

.yh-gas-cta .yh-gas-cta-title{
  margin:0;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.3px;
  line-height: 1.35;
}

.yh-gas-cta .yh-gas-cta-sub{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  letter-spacing: -0.2px;
}

.yh-gas-cta .yh-gas-cta-badge{
  flex:none;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255,255,255,0.45);
  white-space: nowrap;
}

@media (prefers-color-scheme: dark){
  .yh-gas-cta .yh-gas-cta-badge{ background: rgba(255,255,255,0.08); }
}

.yh-gas-cta .yh-gas-cta-actions{
  display:flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.yh-gas-cta .yh-gas-cta-btn{
  flex: 1 1 180px;
  min-width: 180px;
  height: 44px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.2px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  box-sizing:border-box;
  white-space: nowrap;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

/* 전화: 고스트 */
.yh-gas-cta .yh-gas-cta-btn-ghost{
  background: rgba(15,23,42,0.05);
  color: var(--text) !important;
  border: 1px solid var(--line);
}

@media (prefers-color-scheme: dark){
  .yh-gas-cta .yh-gas-cta-btn-ghost{ background: rgba(255,255,255,0.10); }
}

/* 상담: 프라이머리(가스=블루 그라데이션) */
.yh-gas-cta .yh-gas-cta-btn-primary{
  background: linear-gradient(90deg, var(--primary), rgba(20,184,166,0.95));
  color: #ffffff !important;
  border: 0;
  box-shadow: 0 10px 22px rgba(11,92,255,0.20);
}

/* hover */
@media (hover:hover){
  .yh-gas-cta .yh-gas-cta-btn-ghost:hover{ transform: translateY(-1px); }
  .yh-gas-cta .yh-gas-cta-btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(11,92,255,0.24);
  }
  .yh-gas-cta .yh-gas-cta-btn{ transition: transform .18s ease, box-shadow .18s ease; }
}

/* 하단 안내 */
.yh-gas-cta .yh-gas-cta-foot{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.yh-gas-cta .yh-gas-cta-foot-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(20,184,166,0.95);
  box-shadow: 0 0 0 4px rgba(20,184,166,0.14);
}

/* 모바일 */
@media (max-width: 380px){
  .yh-gas-cta{ padding: 0 12px; }
  .yh-gas-cta .yh-gas-cta-card{ padding: 16px 14px 12px 14px; border-radius: 16px; }
  .yh-gas-cta .yh-gas-cta-btn{
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    height: 46px;
    border-radius: 16px;
  }
}

/* =========================================================
   POST CTA – Variant Button Colors
   leak  : green (default)
   gas   : blue
   cal   : orange
========================================================= */

/* =========================
   GAS CTA 버튼 (Blue)
========================= */
.yh-post-cta[data-yh-post-cta="gas"] .yh-post-cta-btn-online{
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  box-shadow: 0 10px 22px rgba(37,99,235,0.28);
}

@media (hover:hover){
  .yh-post-cta[data-yh-post-cta="gas"] .yh-post-cta-btn-online:hover{
    box-shadow: 0 14px 28px rgba(37,99,235,0.34);
  }
}

/* =========================
   CAL CTA 버튼 (Orange)
========================= */
.yh-post-cta[data-yh-post-cta="cal"] .yh-post-cta-btn-online{
  background: linear-gradient(90deg, #f97316, #fb923c);
  box-shadow: 0 10px 22px rgba(249,115,22,0.28);
}

@media (hover:hover){
  .yh-post-cta[data-yh-post-cta="cal"] .yh-post-cta-btn-online:hover{
    box-shadow: 0 14px 28px rgba(249,115,22,0.34);
  }
}

/* =========================================================
   POST CTA – CAL Icon Accent
========================================================= */
.yh-post-cta[data-yh-post-cta="cal"] .yh-post-cta-ic{
  background: rgba(249,115,22,0.12);
  border-color: rgba(249,115,22,0.35);
}

@media (prefers-color-scheme: dark){
  .yh-post-cta[data-yh-post-cta="cal"] .yh-post-cta-ic{
    background: rgba(249,115,22,0.22);
    border-color: rgba(249,115,22,0.45);
  }
}


/* =========================================
   YH CTA – 좌측(PC)/하단(모바일) 상담창 규칙
   - PC(>=1024): 전화(ghost) 숨김, 카드 폭 가독성 업
   - Mobile(<1024): 전화(ghost) 표시
   - 제목/설명: PC/모바일 모두 잘림 없이 줄바꿈
========================================= */

/* ✅ Mobile: 전화 버튼 표시 (복구용) */
@media (max-width:1023px){
  .yh-cta-bottom .yh-cta-btn-ghost{
    display: inline-flex !important;
  }
}

/* ✅ PC: 가독성 폭 + 전화 버튼 숨김 */
@media (min-width:1024px) and (max-width:1439px){
  .yh-cta-bottom{
    left: 24px;
    right: auto;
    bottom: 28px;
    max-width: 420px;
    padding: 16px 16px;
    border-radius: var(--radius-lg);
  }
  .yh-cta-bottom .yh-cta-btn-ghost{ display:none; }
}

@media (min-width:1440px){
  .yh-cta-bottom{
    left: 28px;
    right: auto;
    bottom: 32px;
    max-width: 480px;
    padding: 18px 18px;
    border-radius: var(--radius-lg);
  }
  .yh-cta-bottom .yh-cta-btn-ghost{ display:none; }
}

/* ✅ 텍스트 잘림 방지(최종 안전망) */
.yh-cta-bottom .yh-cta-head{ min-width:0; }
.yh-cta-bottom .yh-cta-title,
.yh-cta-bottom .yh-cta-sub{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

/* =========================================================
   POST CTA – Variant Styles (NEW)
   leak_gas / asv / gauge / p_gas / spark
   - 버튼 색상(온라인) + 아이콘칩 + 상단 포인트 라인 전부 다르게
========================================================= */

/* =========================
   leak_gas (Purple -> Green)
========================= */
.yh-post-cta[data-yh-post-cta="leak_gas"] .yh-post-cta-card::before{
  background: linear-gradient(90deg, #7c3aed, #22c55e);
}
.yh-post-cta[data-yh-post-cta="leak_gas"] .yh-post-cta-btn-online{
  background: linear-gradient(90deg, #7c3aed, #22c55e);
  box-shadow: 0 10px 22px rgba(124,58,237,0.24);
}
.yh-post-cta[data-yh-post-cta="leak_gas"] .yh-post-cta-ic{
  background: rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.35);
}
@media (prefers-color-scheme: dark){
  .yh-post-cta[data-yh-post-cta="leak_gas"] .yh-post-cta-ic{
    background: rgba(124,58,237,0.22);
    border-color: rgba(124,58,237,0.45);
  }
}

/* =========================
   asv (Red -> Orange)
========================= */
.yh-post-cta[data-yh-post-cta="asv"] .yh-post-cta-card::before{
  background: linear-gradient(90deg, #dc2626, #f97316);
}
.yh-post-cta[data-yh-post-cta="asv"] .yh-post-cta-btn-online{
  background: linear-gradient(90deg, #dc2626, #f97316);
  box-shadow: 0 10px 22px rgba(220,38,38,0.22);
}
.yh-post-cta[data-yh-post-cta="asv"] .yh-post-cta-ic{
  background: rgba(220,38,38,0.10);
  border-color: rgba(220,38,38,0.32);
}
@media (prefers-color-scheme: dark){
  .yh-post-cta[data-yh-post-cta="asv"] .yh-post-cta-ic{
    background: rgba(220,38,38,0.20);
    border-color: rgba(220,38,38,0.44);
  }
}

/* =========================
   gauge (Amber -> Yellow)
========================= */
.yh-post-cta[data-yh-post-cta="gauge"] .yh-post-cta-card::before{
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.yh-post-cta[data-yh-post-cta="gauge"] .yh-post-cta-btn-online{
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  box-shadow: 0 10px 22px rgba(245,158,11,0.22);
}
.yh-post-cta[data-yh-post-cta="gauge"] .yh-post-cta-ic{
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.35);
}
@media (prefers-color-scheme: dark){
  .yh-post-cta[data-yh-post-cta="gauge"] .yh-post-cta-ic{
    background: rgba(245,158,11,0.22);
    border-color: rgba(245,158,11,0.45);
  }
}

/* =========================
   p_gas (Teal -> Cyan)
========================= */
.yh-post-cta[data-yh-post-cta="p_gas"] .yh-post-cta-card::before{
  background: linear-gradient(90deg, #14b8a6, #06b6d4);
}
.yh-post-cta[data-yh-post-cta="p_gas"] .yh-post-cta-btn-online{
  background: linear-gradient(90deg, #14b8a6, #06b6d4);
  box-shadow: 0 10px 22px rgba(20,184,166,0.22);
}
.yh-post-cta[data-yh-post-cta="p_gas"] .yh-post-cta-ic{
  background: rgba(20,184,166,0.12);
  border-color: rgba(20,184,166,0.35);
}
@media (prefers-color-scheme: dark){
  .yh-post-cta[data-yh-post-cta="p_gas"] .yh-post-cta-ic{
    background: rgba(20,184,166,0.22);
    border-color: rgba(20,184,166,0.45);
  }
}

/* =========================
   spark (Pink -> Rose)
========================= */
.yh-post-cta[data-yh-post-cta="spark"] .yh-post-cta-card::before{
  background: linear-gradient(90deg, #db2777, #f43f5e);
}
.yh-post-cta[data-yh-post-cta="spark"] .yh-post-cta-btn-online{
  background: linear-gradient(90deg, #db2777, #f43f5e);
  box-shadow: 0 10px 22px rgba(219,39,119,0.22);
}
.yh-post-cta[data-yh-post-cta="spark"] .yh-post-cta-ic{
  background: rgba(219,39,119,0.12);
  border-color: rgba(219,39,119,0.35);
}
@media (prefers-color-scheme: dark){
  .yh-post-cta[data-yh-post-cta="spark"] .yh-post-cta-ic{
    background: rgba(219,39,119,0.22);
    border-color: rgba(219,39,119,0.45);
  }
}

/* =========================================================
   YH TOP CTA – Modern + No Cut (Mobile Safe)
   - Company name colored like YH CTA accents
   - Mobile: never cut (wrap allowed)
========================================================= */

.yh-top-cta{
  width: 100%;
  max-width: 520px;
  margin: 16px 0 22px 0;
  opacity: .92;
  transition: opacity .18s ease, transform .18s ease;
}

.yh-top-cta.is-dimmed{ opacity: .68; }

@media (hover:hover){
  .yh-top-cta:hover{
    opacity: 1;
    transform: translateY(-1px);
  }
}

/* 카드 본체 */
.yh-top-cta .yh-brand-slogan-inner{
  position: relative;
  overflow: hidden;
  text-align: left;

  padding: 14px 18px 12px 18px;
  border-radius: 18px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.62));
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow:
    0 18px 40px rgba(15,23,42,0.14),
    inset 0 1px 0 rgba(255,255,255,0.45);

  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);

  /* ✅ 모바일/좁은 레이아웃에서도 안전 */
  box-sizing: border-box;
  max-width: 100%;
}

/* 상단 미세 하이라이트 */
.yh-top-cta .yh-brand-slogan-inner::before{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 1px;
  background: rgba(255,255,255,0.65);
  opacity: .9;
}

/* 좌측 포인트 라인 */
.yh-top-cta .yh-brand-slogan-inner::after{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #0b5cff, #169179);
  opacity: .95;
}

/* ✅ 문구: PC에선 1줄 성향, 모바일은 자동 줄바꿈(안잘림) */
.yh-top-cta .yh-brand-line{
  margin: 0;
  padding-left: 10px;

  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.35px;
  color: rgba(15,23,42,0.92);

  /* ✅ 핵심: 잘림 방지 */
  white-space: normal;          /* 줄바꿈 허용 */
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;      /* 긴 단어도 줄바꿈 */
  word-break: break-word;
}

/* ✅ 회사명: yh CTA처럼 색상(프라이머리) 강조 */
.yh-top-cta .yh-brand-company{
  margin-top: 7px;
  padding-left: 10px;

  font-size: 13px;
  font-weight: 950;
  letter-spacing: -0.2px;

  color: #0b5cff;               /* ✅ 포인트 컬러 */
}

/* 회사명 괄호/표기 살짝 정리(선택) */
.yh-top-cta .yh-brand-company{
  opacity: .95;
}

/* 다크모드 */
@media (prefers-color-scheme: dark){
  .yh-top-cta .yh-brand-slogan-inner{
    background:
      linear-gradient(180deg, rgba(2,6,23,0.74), rgba(15,23,42,0.55));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow:
      0 22px 46px rgba(0,0,0,0.52),
      inset 0 1px 0 rgba(255,255,255,0.10);
  }
  .yh-top-cta .yh-brand-line{
    color: rgba(255,255,255,0.92);
  }
  .yh-top-cta .yh-brand-company{
    color: #4ea1ff;             /* ✅ 다크모드용 포인트 블루 */
    opacity: 1;
  }
}

/* ✅ 모바일에서 더 안 잘리게(패딩/폰트 살짝 조정) */
@media (max-width: 480px){
  .yh-top-cta{
    max-width: 100%;
  }
  .yh-top-cta .yh-brand-slogan-inner{
    padding: 13px 14px 11px 14px;
    border-radius: 16px;
  }
  .yh-top-cta .yh-brand-line{
    font-size: 15px;
    line-height: 1.3;
  }
  .yh-top-cta .yh-brand-company{
    font-size: 12px;
  }
}

/* =========================================================
   YH BRAND SLOGAN – Top Line (yoohantech.com style)
   HTML 수정 없이 적용
========================================================= */

.yh-brand-slogan .yh-brand-slogan-inner{
  position: relative;
  overflow: hidden; /* 라인이 모서리 밖으로 안 튀게 */
}

/* 상단 포인트 라인 */
.yh-brand-slogan .yh-brand-slogan-inner::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;

  /* 유한테크 톤: 블루 → 그린 */
  background: linear-gradient(
    90deg,
    #236fa1 0%,
    #2fbf9e 100%
  );

  opacity: 0.95;
}

/* =========================================================
   YH LEFT CONSULT CTA – Top Line (SAFE)
   - Applies to left 상담창 on PC and bottom CTA on mobile (.yh-cta-bottom)
   - Uses background layers (NO ::before) to avoid display issues
   - Yoohantech tone: Blue → Teal
========================================================= */
.yh-cta-bottom{
  background:
    linear-gradient(90deg, #236fa1 0%, #169179 100%) 0 0 / 100% 3px no-repeat,
    linear-gradient(180deg, var(--panel), var(--bg));
}

/* =========================================================
   FIX: YH TOP CTA – 상단 라인 제거 (yh-top 전용)
   - 다른 브랜드 슬로건 / CTA에는 영향 없음
   - HTML 수정 불필요
========================================================= */

/* ✅ yh-top-cta에서는 상단 포인트 라인 완전 제거 */
.yh-top-cta .yh-brand-slogan-inner::before{
  content: none !important;
  display: none !important;
}

/* 안전망: 혹시 남아 있을 경우 대비 */
.yh-top-cta .yh-brand-slogan-inner{
  background-clip: padding-box;
}