/* =========================================================
   YOOHANTECH – NET THEME OVERRIDE (BEFORE NET PALETTE)
   - Applies to: yh-cta.final.js engine outputs + post/video cards
   - Keep section below "NET PALETTE (shared) – yoohantech.net" intact
========================================================= */

/* ---------- 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;
}

/* ---------- NET Token Bridge (uses vars defined later in :root) ---------- */
.yh-cta{
  --bg: var(--yh-net-bg);
  --panel: var(--yh-net-card);
  --text: var(--yh-net-txt);
  --muted: rgba(30,41,59,0.68);
  --line: rgba(15,23,42,0.12);
  --shadow: 0 12px 30px rgba(15,23,42,0.10);
  --primary: var(--yh-net-blue);
  --primary-text: #ffffff;
  --ghost-bg: rgba(15,23,42,0.04);
  --ghost-text: rgba(15,23,42,0.88);
  --radius-lg: 14px;
  --radius-md: 12px;
}
@media (prefers-color-scheme: dark){
  .yh-cta{
    --bg: rgba(2,6,23,0.92);
    --panel: rgba(2,6,23,0.86);
    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.62);
    --line: rgba(255,255,255,0.16);
    --shadow: 0 18px 44px rgba(0,0,0,0.55);
    --primary: #60a5fa;
    --primary-text: #06101f;
    --ghost-bg: rgba(255,255,255,0.10);
    --ghost-text: rgba(255,255,255,0.92);
  }
}

/* =========================================================
   1) GLOBAL BOTTOM FIXED CTA – NET (Solid + 3-color topline)
========================================================= */
.yh-cta-bottom{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 12px;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  overflow: hidden;

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

/* top accent */
.yh-cta-bottom::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:3px;
  background: linear-gradient(90deg, var(--yh-net-blue), var(--yh-net-teal), var(--yh-net-red));
  opacity: .95;
}

.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: 950;
  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: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(37,99,235,0.06);
}
@media (prefers-color-scheme: dark){
  .yh-cta-badge{ background: rgba(96,165,250,0.10); }
}

.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: 950;
  letter-spacing: -0.2px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid transparent;
  cursor:pointer;
  white-space: nowrap;
}

.yh-cta-btn-primary{
  background: var(--primary);
  color: var(--primary-text);
  box-shadow: 0 10px 20px rgba(37,99,235,0.18);
}

.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: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

@media (hover:hover){
  .yh-cta-btn,
  .yh-cta-close{ transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
  .yh-cta-btn:hover{ transform: translateY(-1px); }
  .yh-cta-btn-primary:hover{ box-shadow: 0 14px 26px rgba(37,99,235,0.22); }
  .yh-cta-btn-ghost:hover{ background: rgba(15,23,42,0.06); }
  @media (prefers-color-scheme: dark){
    .yh-cta-btn-ghost:hover{ background: rgba(255,255,255,0.14); }
  }
}

/* =========================================================
   2) CONTENT POST CTA – NET (used by yh-post-cta-router.final.js)
========================================================= */
.yh-post-cta{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  margin: 28px 0;
}
.yh-post-cta .yh-post-cta-card{
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 18px 16px 18px;
  box-sizing:border-box;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  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(--yh-net-blue), var(--yh-net-teal));
  opacity:.95;
}

.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(37,99,235,0.06);
  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(96,165,250,0.12); }
}

.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: 12px;
  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;
  border: 1px solid transparent;
}

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

.yh-post-cta .yh-post-cta-btn-online{
  background: var(--yh-net-blue);
  color: #ffffff !important;
  border: 0;
  box-shadow: 0 10px 20px rgba(37,99,235,0.18);
}

/* online text always white */
.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;
}

/* time chip */
.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: 900;
  letter-spacing: -0.2px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(37,99,235,0.06);
  user-select: none;
}
@media (prefers-color-scheme: dark){
  .yh-post-cta .yh-post-cta-time{ background: rgba(96,165,250,0.12); }
}

/* Hover */
@media (hover:hover){
  .yh-post-cta .yh-post-cta-btn-call,
  .yh-post-cta .yh-post-cta-btn-online{ transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
  .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 26px rgba(37,99,235,0.22); }
}

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

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

/* =========================================================
   VIDEO ENTRY CTA – NET (the "leak test video" card)
========================================================= */
.yh-video-entry-cta{
  width:100%;
  max-width:100%;
  margin: 26px 0;
  box-sizing: border-box;
}
.yh-video-entry-card{
  max-width: 560px;
  margin: 0 auto;
  display: block;
  text-decoration: none;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  color: inherit;
}
.yh-video-entry-bar{
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--yh-net-blue), var(--yh-net-teal));
}
.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(37,99,235,0.06);
  color: var(--muted);
}
@media (prefers-color-scheme: dark){
  .yh-video-entry-badge{ background: rgba(96,165,250,0.12); }
}
.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: var(--yh-net-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 22px rgba(37,99,235,0.22);
}
.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;
}
@media (hover:hover){
  .yh-video-entry-card{ transition: transform .16s ease, box-shadow .16s ease; }
  .yh-video-entry-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px rgba(15,23,42,0.14); }
}
@media (max-width: 380px){
  .yh-video-entry-body{ padding: 16px 14px; gap: 12px; }
  .yh-video-entry-play{ width: 48px; height: 48px; }
}

/* =========================================================
   GAS CTA – NET (keep classnames)
========================================================= */
.yh-gas-cta{
  width:100%;
  max-width:100%;
  margin: 26px 0;
  box-sizing: border-box;
}
.yh-gas-cta .yh-gas-cta-card{
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 18px 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  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(--yh-net-blue), var(--yh-net-teal));
  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,118,110,0.10);
  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(94,234,212,0.14); }
}
.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(15,118,110,0.08);
  white-space: nowrap;
}
@media (prefers-color-scheme: dark){
  .yh-gas-cta .yh-gas-cta-badge{ background: rgba(94,234,212,0.12); }
}
.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: 12px;
  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;
  border: 1px solid transparent;
}
.yh-gas-cta .yh-gas-cta-btn-ghost{
  background: var(--ghost-bg);
  color: var(--ghost-text) !important;
  border: 1px solid var(--line);
}
.yh-gas-cta .yh-gas-cta-btn-primary{
  background: linear-gradient(90deg, var(--yh-net-blue), var(--yh-net-teal));
  color:#ffffff !important;
  border:0;
  box-shadow: 0 10px 20px rgba(15,118,110,0.16);
}
@media (hover:hover){
  .yh-gas-cta .yh-gas-cta-btn{ transition: transform .16s ease, box-shadow .16s ease; }
  .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 26px rgba(15,118,110,0.20); }
}
.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: var(--yh-net-teal);
  box-shadow: 0 0 0 4px rgba(15,118,110,0.12);
}
@media (max-width: 380px){
  .yh-gas-cta{ padding: 0 12px; }
  .yh-gas-cta .yh-gas-cta-card{ padding: 16px 14px 12px 14px; border-radius: 14px; }
  .yh-gas-cta .yh-gas-cta-btn{
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    height: 46px;
    border-radius: 14px;
  }
}

/* =========================================================
   Desktop rule: left bottom on PC, hide ghost call button
========================================================= */
@media (max-width:1023px){
  .yh-cta-bottom .yh-cta-btn-ghost{ display: inline-flex !important; }
}
@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; }
}

/* ✅ hard wrap safety */
.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;
}

/* =========================================================
   END OF NET OVERRIDE (before NET PALETTE)
========================================================= */


/* =========================================================
   NET PALETTE (shared) – yoohantech.net
========================================================= */
:root{
  --yh-net-blue:#2563eb;
  --yh-net-teal:#0f766e;
  --yh-net-red:#ad0e0e;

  --yh-net-bg:#f8fafc;
  --yh-net-card:#ffffff;
  --yh-net-bd:#e2e8f0;
  --yh-net-txt:#1e293b;
  --yh-net-muted:#475569;
}

/* =========================================================
   1) YH TOP CTA – NET Edition (Left / Point Bar)
   target: .yh-top-cta ONLY
========================================================= */

.yh-top-cta{
  max-width: 480px;
  margin: 18px 0 26px 0;
}

/* TOP CTA 카드 */
.yh-top-cta .yh-brand-slogan-inner{
  position: relative;
  text-align: left;
  padding: 16px 18px 14px 18px;
  border-radius: 10px;

  background: var(--yh-net-bg);
  border: 1px solid var(--yh-net-bd);
  box-shadow: 0 6px 16px rgba(15,23,42,0.08);

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 좌측 포인트바 */
.yh-top-cta .yh-brand-slogan-inner::after{
  content:"";
  position:absolute;
  left:0; top:0;
  width:4px; height:100%;
  background: var(--yh-net-blue);
}

/* TOP CTA 문장 */
.yh-top-cta .yh-brand-line{
  margin: 0;
  padding-left: 12px;
  font-size: 16px;
  line-height: 1.38;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--yh-net-txt);

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* TOP CTA 3색 */
.yh-top-cta .yh-brand-line .yh-brand-accent-1{ color: var(--yh-net-blue); }
.yh-top-cta .yh-brand-line .yh-brand-accent-2{ color: var(--yh-net-teal); }
.yh-top-cta .yh-brand-line .yh-brand-accent-3{ color: var(--yh-net-red); }

/* TOP CTA 회사명 */
.yh-top-cta .yh-brand-company{
  margin-top: 7px;
  padding-left: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.15px;
  color: var(--yh-net-blue);
}

/* TOP CTA 다크모드 */
@media (prefers-color-scheme: dark){
  .yh-top-cta .yh-brand-slogan-inner{
    background:#020617;
    border-color:#1e293b;
    box-shadow: 0 10px 26px rgba(0,0,0,0.45);
  }
  .yh-top-cta .yh-brand-line{ color:#e5e7eb; }
  .yh-top-cta .yh-brand-line .yh-brand-accent-1{ color:#60a5fa; }
  .yh-top-cta .yh-brand-line .yh-brand-accent-2{ color:#5eead4; }
  .yh-top-cta .yh-brand-line .yh-brand-accent-3{ color:#fb7185; }
  .yh-top-cta .yh-brand-company{ color:#60a5fa; }
  .yh-top-cta .yh-brand-slogan-inner::after{ background:#3b82f6; }
}

/* TOP CTA 모바일 */
@media (max-width:480px){
  .yh-top-cta{ max-width:100%; }
  .yh-top-cta .yh-brand-line{ font-size:15px; }
  .yh-top-cta .yh-brand-company{ font-size:12.5px; }
}


/* =========================================================
   2) BRAND SLOGAN – NET Edition (Standalone / Different look)
   ✅ 겹침 방지 핵심: .yh-brand-slogan-net 으로 분리
   - JS 로테이터를 쓰려면 HTML에 .yh-brand-slogan도 같이 붙이세요.
========================================================= */

.yh-brand-slogan-net{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 22px 0 0 0;
}

/* BRAND 카드: 상단 3색 라인 + 칩 */
.yh-brand-slogan-net .yh-brand-slogan-inner{
  position: relative;
  max-width: 760px;
  margin: 0;                /* 좌측 정렬 */
  text-align: left;

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

  background: var(--yh-net-card);
  border: 1px solid var(--yh-net-bd);
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
  overflow: hidden;
}

/* 상단 3색 라인 (TOP CTA와 다른 시그니처) */
.yh-brand-slogan-net .yh-brand-slogan-inner::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:3px;
  background: linear-gradient(90deg, var(--yh-net-blue), var(--yh-net-teal), var(--yh-net-red));
}

/* BRAND 문장 */
.yh-brand-slogan-net .yh-brand-line{
  margin: 0;
  color: var(--yh-net-txt);
  font-weight: 950;
  letter-spacing: -0.35px;
  line-height: 1.5;
  font-size: 18px;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* BRAND 3색 */
.yh-brand-slogan-net .yh-brand-line .yh-brand-accent-1{ color: var(--yh-net-blue); }
.yh-brand-slogan-net .yh-brand-line .yh-brand-accent-2{ color: var(--yh-net-teal); }
.yh-brand-slogan-net .yh-brand-line .yh-brand-accent-3{ color: var(--yh-net-red); }

/* BRAND 회사명: 칩(배지) */
.yh-brand-slogan-net .yh-brand-company{
  display: inline-flex;
  align-items: center;

  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.2px;

  color: var(--yh-net-blue);
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.20);
}

/* BRAND 다크모드 */
@media (prefers-color-scheme: dark){
  .yh-brand-slogan-net .yh-brand-slogan-inner{
    background: rgba(2,6,23,0.92);
    border-color: rgba(148,163,184,0.22);
    box-shadow: 0 16px 38px rgba(0,0,0,0.55);
  }
  .yh-brand-slogan-net .yh-brand-line{ color: rgba(226,232,240,0.92); }
  .yh-brand-slogan-net .yh-brand-line .yh-brand-accent-1{ color:#60a5fa; }
  .yh-brand-slogan-net .yh-brand-line .yh-brand-accent-2{ color:#5eead4; }
  .yh-brand-slogan-net .yh-brand-line .yh-brand-accent-3{ color:#fb7185; }

  .yh-brand-slogan-net .yh-brand-company{
    color:#60a5fa;
    background: rgba(96,165,250,0.12);
    border-color: rgba(96,165,250,0.26);
  }
}

/* BRAND 모바일 */
@media (max-width: 480px){
  .yh-brand-slogan-net .yh-brand-slogan-inner{
    padding: 16px 14px 12px 14px;
    border-radius: 12px;
  }
  .yh-brand-slogan-net .yh-brand-line{
    font-size: 16px;
    line-height: 1.55;
  }
  .yh-brand-slogan-net .yh-brand-company{
    font-size: 12px;
  }
}

/* =========================================================
   POST CTA – NET Palette Auto Routing
   based on data-yh-post-cta
========================================================= */

/* ========== 기본 (leak / default) ========== */
.yh-post-cta[data-yh-post-cta],
.yh-post-cta[data-yh-post-cta="leak"],
.yh-post-cta[data-yh-post-cta="leak_gas"]{
  --cta-line: var(--yh-net-blue);
  --cta-btn:  var(--yh-net-blue);
}

/* ========== GAS (teal) ========== */
.yh-post-cta[data-yh-post-cta="gas"],
.yh-post-cta[data-yh-post-cta="p_gas"]{
  --cta-line: var(--yh-net-teal);
  --cta-btn:  var(--yh-net-teal);
}

/* ========== CAL (red) ========== */
.yh-post-cta[data-yh-post-cta="cal"],
.yh-post-cta[data-yh-post-cta="asv"]{
  --cta-line: var(--yh-net-red);
  --cta-btn:  var(--yh-net-red);
}

/* ========== GAUGE (amber) ========== */
.yh-post-cta[data-yh-post-cta="gauge"]{
  --cta-line: #f59e0b;
  --cta-btn:  #f59e0b;
}

/* ========== SPARK (pink) ========== */
.yh-post-cta[data-yh-post-cta="spark"]{
  --cta-line: #db2777;
  --cta-btn:  #db2777;
}

/* ---------- 상단 포인트 라인 ---------- */
.yh-post-cta .yh-post-cta-card::before{
  background: linear-gradient(
    90deg,
    var(--cta-line),
    rgba(255,255,255,0.0)
  ) !important;
}

/* ---------- 온라인 버튼 ---------- */
.yh-post-cta .yh-post-cta-btn-online{
  background: var(--cta-btn) !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--cta-btn), transparent 80%) !important;
}

/* hover */
@media (hover:hover){
  .yh-post-cta .yh-post-cta-btn-online:hover{
    box-shadow: 0 14px 26px color-mix(in srgb, var(--cta-btn), transparent 72%) !important;
  }
}

/* =========================================================
   NET: LEFT 상담창(하단 고정 CTA) – Primary 버튼만 녹색
========================================================= */

/* 왼쪽 상담창 Primary 버튼 */
.yh-cta-bottom .yh-cta-btn-primary{
  background: #16a34a;                 /* green-600 */
  box-shadow: 0 10px 20px rgba(22,163,74,0.25);
}

/* hover */
@media (hover:hover){
  .yh-cta-bottom .yh-cta-btn-primary:hover{
    box-shadow: 0 14px 26px rgba(22,163,74,0.32);
  }
}

/* 다크모드 */
@media (prefers-color-scheme: dark){
  .yh-cta-bottom .yh-cta-btn-primary{
    background: #22c55e;               /* green-500 */
    color: #052e16;
    box-shadow: 0 10px 22px rgba(34,197,94,0.28);
  }
}