/* ============================================================
   코리아 블루칩 (KOREA BLUECHIP) — "EMERALD IVORY" THEME OVERLAY
   Loads AFTER style.css. Flips the warm coral/dark look into a
   bright, premium light-finance aesthetic:
   ivory canvas · jade-emerald primary · gold micro-accents ·
   clean glass cards · Korean market red=up / blue=down tickers.

   Non-destructive: only the VISUAL layer is overridden. All layout,
   positioning and JS-driven states (.reveal/.visible, [data-marker]/
   .marker-drawn, .num[data-count], slider .active, modal .open,
   magnetic/tilt inline transforms) are preserved. New keyframes are
   namespaced "kx-" to avoid collisions.
   ============================================================ */

/* ---------- 1. PALETTE — remap the base vars; cascades everywhere ---------- */
:root{
  --coral:      #12B886;   /* was coral — now jade emerald (brand accent) */
  --coral-deep: #0B9A72;   /* deep emerald */
  --coral-soft: #5BE0AE;
  --peach:      #B2F2DE;   /* mint (highlighter / soft fills) */
  --peach-light:#DBFBF0;
  --gold:       #DDA43A;   /* warm gold micro-accent + rating stars */

  --cream:      #F5FAF7;   /* ivory canvas */
  --cream-2:    #E8F4EE;   /* alt band */
  --ink:        #0F241B;   /* deep pine — text + dark sections */
  --ink-soft:   #476054;   /* muted pine-grey */
  --navy:       #2C4A3E;
  --navy-deep:  #0F241B;
  --navy-soft:  #37564A;
  --line:       #D7E8E0;
  --white:      #FFFFFF;

  --up:         #E8384B;   /* Korean market: RED = up */
  --down:       #2F6FB3;   /* BLUE = down */

  --shadow-1: 0 6px 18px rgba(15, 36, 27, 0.08);
  --shadow-2: 0 18px 50px rgba(11, 154, 114, 0.20);
  --shadow-3: 0 30px 80px rgba(15, 36, 27, 0.16);
}

/* ---------- 2. CANVAS ---------- */
html{ background:var(--cream); }
body{
  color:var(--ink);
  background:
    radial-gradient(1000px 640px at 88% -8%, rgba(18,184,134,.10), transparent 60%),
    radial-gradient(900px 620px at 6% 4%, rgba(178,242,222,.35), transparent 58%),
    linear-gradient(180deg, #F7FBF9 0%, #EEF7F2 100%);
  background-attachment:fixed;
}
::selection{ background:rgba(18,184,134,.24); color:#08281d; }
*{ scrollbar-color:rgba(18,184,134,.5) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#EAF4EF; }
::-webkit-scrollbar-thumb{ background:linear-gradient(#12B886,#0B9A72); border-radius:99px; border:3px solid #EAF4EF; }

/* ---------- 3. HERO ATMOSPHERE (recolor coral literals) ---------- */
.hero-bg{
  background:
    radial-gradient(ellipse 80% 60% at 90% 0%, rgba(178,242,222,.6), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 90%, rgba(18,184,134,.16), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%) !important;
}
.blob-1{ background:var(--peach); }
.blob-2{ background:var(--coral); }
.blob-3{ background:var(--gold); }
.sparkle{ filter:drop-shadow(0 2px 6px rgba(18,184,134,.5)); }
.sparkle.s1,.sparkle.s4,.sparkle.s7{ color:var(--gold); }
.sparkle.s2,.sparkle.s5{ color:var(--coral); }
.sparkle.s3,.sparkle.s6{ color:var(--coral-soft); }

/* ---------- 4. BUTTONS / PULSE ---------- */
.btn-primary{
  background:linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
  box-shadow:var(--shadow-2);
}
.btn-primary:hover{ box-shadow:0 24px 60px rgba(11,154,114,.34); }
.logo-mark{ box-shadow:0 10px 22px rgba(11,154,114,.32); }
.pulse::after{ animation:kx-pulse 2.2s var(--ease) infinite; }
@keyframes kx-pulse{
  0%{ box-shadow:0 0 0 0 rgba(18,184,134,.5); }
  70%{ box-shadow:0 0 0 22px rgba(18,184,134,0); }
  100%{ box-shadow:0 0 0 0 rgba(18,184,134,0); }
}

/* ---------- 5. EYEBROWS / KICKER / SOFT FILLS ---------- */
.section-eyebrow{ background:rgba(18,184,134,.10); color:var(--coral-deep); }
.section-eyebrow.gold{ background:rgba(221,164,58,.16); color:#A9791F; }
.kicker-dot{ box-shadow:0 0 0 4px rgba(18,184,134,.22); }
.check-list i{ background:rgba(18,184,134,.14); color:var(--coral-deep); }
.feature-icon{ background:linear-gradient(135deg, rgba(18,184,134,.15), rgba(178,242,222,.5)); color:var(--coral-deep); }
.info-cell > i{ background:rgba(18,184,134,.12); color:var(--coral); }
.accent-flag{ box-shadow:0 8px 18px rgba(18,184,134,.4); border-color:#fff; }
.feature-tag{ background:rgba(15,36,27,.06); color:var(--navy); }
.feature-tag.hot{ background:var(--coral); color:#fff; }

/* ---------- 6. STOCK DATA — Korean convention: red up / blue down ---------- */
.hero-stats .num{ color:var(--coral-deep); }
.ticker-row.up .t-chg{ background:rgba(232,56,75,.12); color:var(--up); }
.ticker-row.down .t-chg{ background:rgba(47,111,179,.12); color:var(--down); }
.ticker-card-head i{ color:var(--coral); }
.marquee .fa-arrow-trend-up{ color:#FF6B7A; }     /* on dark marquee */
.marquee .fa-arrow-trend-down{ color:#6FA8DE; }
.marquee-track i{ color:var(--coral); }

/* ---------- 7. NEWS ALERTS ---------- */
.alert-card{ border-left-color:var(--coral); }
.alert-card p em{ background:rgba(18,184,134,.14); color:var(--coral-deep); }
.alert-pop-2{ border-left-color:var(--gold); }
.alert-pop-2 p em{ background:rgba(221,164,58,.2); color:#9a6f1a; }
.alert-pop-3{ border-left-color:var(--navy-soft); }
.alert-pop-3 p em{ background:rgba(15,36,27,.09); color:var(--navy); }
.bell-deco{ box-shadow:0 14px 30px rgba(18,184,134,.4); }

/* ---------- 8. FEATURES / EXCLUSIVE ---------- */
.feature-card::before{ background:linear-gradient(90deg, var(--coral), var(--peach)); }
.section-exclusive::before{
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(18,184,134,.22), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(221,164,58,.18), transparent 60%);
}
.ex-card:hover{ border-color:rgba(18,184,134,.4); }
.ex-card.featured{
  background:linear-gradient(140deg, rgba(18,184,134,.16), rgba(221,164,58,.08));
  border-color:rgba(18,184,134,.4);
}
.ex-icon{ background:rgba(18,184,134,.18); color:var(--coral-soft); }
.ex-badge{ color:var(--coral-soft); background:rgba(91,224,174,.12); }
.ex-ribbon.ribbon-blue{ background:#3E6B85; box-shadow:0 6px 16px rgba(62,107,133,.4); }

/* ---------- 9. REVIEWS — recolor avatars to emerald/gold/pine ---------- */
.avatar-1{ background:linear-gradient(135deg, #12B886, #5BE0AE) !important; }
.avatar-2{ background:linear-gradient(135deg, #0F241B, #37564A) !important; }
.avatar-3{ background:linear-gradient(135deg, #E8B86A, #D69A40) !important; }
.avatar-4{ background:linear-gradient(135deg, #0B9A72, #12B886) !important; }
.avatar-5{ background:linear-gradient(135deg, #37564A, #0F241B) !important; }
.avatar-6{ background:linear-gradient(135deg, #B2F2DE, #12B886) !important; }
.avatar-7{ background:linear-gradient(135deg, #0F241B, #12B886) !important; }
.avatar-8{ background:linear-gradient(135deg, #E8B86A, #12B886) !important; }
.stars, .bs-rate i{ color:var(--gold); }

/* ---------- 10. FINAL CTA (dark pine card) ---------- */
.final-deco{
  background:
    radial-gradient(ellipse 50% 50% at 20% 0%, rgba(18,184,134,.4), transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 100%, rgba(221,164,58,.3), transparent 60%) !important;
}
.final-card h2 em{ color:var(--coral-soft); }

/* ============================================================
   11. NEW SECTION — WELCOME BENEFIT (신규 우량주 무료 지급)
   ============================================================ */
.section-welcome{
  background:linear-gradient(180deg, var(--cream) 0%, #FFFFFF 100%);
  position:relative;
}
.section-welcome::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(18,184,134,.5), transparent);
}

/* limited-quota urgency strip */
.welcome-urgency{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:12px; max-width:640px; margin:0 auto 40px;
  padding:13px 22px; border-radius:999px;
  background:rgba(232,56,75,.07);
  border:1px dashed rgba(232,56,75,.4);
  color:#C42638; font-weight:800; font-size:13.5px; letter-spacing:.01em;
}
.welcome-urgency i{ font-size:14px; }
.welcome-urgency .u-count{ font-family:'Bebas Neue', sans-serif; font-size:19px; letter-spacing:.03em; }

.welcome-wrap{
  display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center;
}

/* left: 3-step flow */
.welcome-steps{
  list-style:none; margin:0 0 26px; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.welcome-step{
  display:flex; gap:18px; align-items:flex-start;
  padding:20px 22px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.welcome-step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:rgba(18,184,134,.4); }
.welcome-step .wnum{
  flex-shrink:0; width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  font-family:'Bebas Neue', sans-serif; font-size:23px; color:#fff;
  background:linear-gradient(135deg, var(--coral), var(--coral-deep));
  box-shadow:0 8px 18px rgba(11,154,114,.35);
}
.welcome-step h4{ margin:0 0 5px; font-size:16px; color:var(--ink); letter-spacing:-0.01em; }
.welcome-step p{ margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.welcome-step p b{ color:var(--coral-deep); }

/* right: gift card with locked "example picks" */
.gift-card{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, #0F241B 0%, #17392C 100%);
  color:#fff; border-radius:var(--radius-lg);
  padding:30px 28px; box-shadow:var(--shadow-3);
  border:1px solid rgba(18,184,134,.3);
}
.gift-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 100% 0%, rgba(18,184,134,.30), transparent 60%);
}
.gift-card > *{ position:relative; z-index:1; }
.gift-head{ display:flex; align-items:center; gap:12px; }
.gift-ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--gold), #C98F2F); color:#221706; font-size:18px;
  box-shadow:0 8px 18px rgba(221,164,58,.35);
}
.gift-head strong{ font-size:15px; display:block; }
.gift-head small{ display:block; font-size:11px; color:rgba(255,255,255,.6); margin-top:2px; }
.gift-list{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.gift-row{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
}
.gift-row .g-name{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; }
.gift-row .g-name i{ color:var(--coral-soft); font-size:12px; }
.gift-row .g-tick{ font-family:'Bebas Neue', sans-serif; font-size:15px; letter-spacing:.04em; color:rgba(255,255,255,.85); }
.gift-blur{ filter:blur(5px); -webkit-user-select:none; user-select:none; }
.gift-lockline{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:12px; padding:10px; border-radius:10px;
  background:rgba(221,164,58,.12); border:1px dashed rgba(221,164,58,.45);
  color:var(--gold); font-weight:800; font-size:12.5px; letter-spacing:.03em;
}
.gift-note{ margin:14px 0 0; font-size:11px; color:rgba(255,255,255,.5); line-height:1.6; }

.welcome-cta-row{ margin-top:8px; }
.welcome-cta-row .btn{ width:100%; justify-content:center; }
.welcome-fine{
  display:block; text-align:center; margin-top:12px;
  font-size:11.5px; color:var(--ink-soft);
}

/* ---------- 12. RESPONSIVE for welcome section ---------- */
@media (max-width:900px){
  .welcome-wrap{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:720px){
  .welcome-urgency{ font-size:12px; padding:11px 16px; gap:8px; margin-bottom:28px; }
  .welcome-urgency .u-count{ font-size:16px; }
  .welcome-step{ padding:16px 18px; gap:14px; }
  .welcome-step .wnum{ width:40px; height:40px; font-size:20px; }
  .gift-card{ padding:24px 20px; }
}

/* ---------- 13. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .btn-shine::before, .logo-mark::after{ animation:none !important; }
}