/* ==============================================================
 * HC JOYN BANNERS — Core CSS
 * Design system aligned with JOYN Form (Indigo · Pretendard · Remix Icons)
 * ============================================================== */

:root {
  /* Brand — JOYN Form primary */
  --hcjb-brand:        #4541FF;
  --hcjb-brand-2:      #5957FF;
  --hcjb-brand-3:      #6366F1;
  --hcjb-brand-dark:   #3633E0;
  --hcjb-brand-50:     #F0F1FF;
  --hcjb-brand-100:    #E0E2FF;
  --hcjb-brand-200:    #C7CCFF;

  /* Accents */
  --hcjb-gold:         #FBBF24;
  --hcjb-gold-2:       #F59E0B;
  --hcjb-coral:        #F97316;
  --hcjb-pink:         #F43F5E;
  --hcjb-green:        #10B981;
  --hcjb-amber:        #F59E0B;
  --hcjb-red:          #DC2626;
  --hcjb-red-2:        #EA580C;
  --hcjb-teal:         #0F766E;
  --hcjb-violet:       #8B5CF6;

  /* Text — JF scale */
  --hcjb-ink:          #0A0F1F;
  --hcjb-text:         #0A0F1F;
  --hcjb-text-2:       #334155;
  --hcjb-text-mute:    #64748B;
  --hcjb-text-faint:   #94A3B8;

  /* Surfaces */
  --hcjb-border:       #E5E9F2;
  --hcjb-border-soft:  #F1F5F9;
  --hcjb-border-strong:#CBD5E1;
  --hcjb-bg:           #FAFBFD;
  --hcjb-bg-card:      #FFFFFF;
  --hcjb-bg-soft:      #FAFBFD;

  /* Gradients */
  --hcjb-grad-primary: linear-gradient(135deg, #4541FF 0%, #5957FF 100%);
  --hcjb-grad-hero:    linear-gradient(135deg, #1a1ee0 0%, #4541FF 35%, #6366f1 75%, #8B5CF6 100%);
  --hcjb-grad-cta:     linear-gradient(135deg, #4541FF 0%, #6366F1 50%, #8B5CF6 100%);
  --hcjb-grad-card:    linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);

  /* Shadows — JF depth */
  --hcjb-shadow-sm:    0 1px 2px rgba(10,15,31,0.04), 0 1px 3px rgba(10,15,31,0.03);
  --hcjb-shadow-md:    0 4px 6px rgba(10,15,31,0.04), 0 10px 20px rgba(10,15,31,0.06);
  --hcjb-shadow-lg:    0 12px 24px rgba(10,15,31,0.08), 0 24px 48px rgba(10,15,31,0.10);
  --hcjb-shadow-xl:    0 24px 48px rgba(69,65,255,0.14), 0 12px 24px rgba(10,15,31,0.08);
  --hcjb-shadow-primary: 0 10px 28px rgba(69,65,255,0.32);

  /* Radius */
  --hcjb-r-sm:         8px;
  --hcjb-radius:       12px;
  --hcjb-r:            12px;
  --hcjb-radius-lg:    16px;
  --hcjb-r-lg:         16px;
  --hcjb-radius-xl:    20px;
  --hcjb-r-xl:         20px;

  /* Typography */
  --hcjb-font: 'Pretendard', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, sans-serif;
  --hcjb-content-font-size: 16px;
  --hcjb-line:           1.65;
  --hcjb-ease:           0.22s ease;
  --hcjb-ease-out:       0.25s cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout rhythm */
  --hcjb-block-gap:      clamp(14px, 2.5vw, 20px);
  --hcjb-section-pad-x:  clamp(14px, 3.5vw, 20px);
  --hcjb-max-inline:     min(100%, 1080px);
}

/* ============================================
 * POSITION CONTAINER
 * ============================================ */
.hcjb-position {
  font-family: var(--hcjb-font);
  font-size: var(--hcjb-content-font-size);
  line-height: var(--hcjb-line);
  color: var(--hcjb-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  max-width: var(--hcjb-max-inline);
  margin-left: auto;
  margin-right: auto;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.hcjb-position > .hcjb + .hcjb {
  margin-top: clamp(10px, 2vw, 14px);
}

/* Joyn Menu 슬롯: 좌우 패딩·라운드 없음 */
#hcMenuOverlay .hc-menu-banner-slot.hcjb-position,
#hcMenuOverlay .hc-menu-banner-slot .hcjb-position,
.hc-menu-banner-slot .hcjb-position {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none;
}

/* Section-relative positions */
.hcjb-position[class*="--after_"]:not([class*="--after_header"]),
.hcjb-position[class*="--before_footer"] {
  padding-left: var(--hcjb-section-pad-x);
  padding-right: var(--hcjb-section-pad-x);
}

/* ============================================
 * BANNER BASE
 * ============================================ */
.hcjb {
  font-family: var(--hcjb-font);
  font-size: inherit;
  box-sizing: border-box;
  position: relative;
  min-width: 0;
}
.hcjb *,
.hcjb *::before,
.hcjb *::after {
  box-sizing: inherit;
}

.hcjb a {
  text-decoration: none;
  color: inherit;
}

.hcjb img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Block-type vertical rhythm */
.hcjb[class*="hcjb--hero"],
.hcjb[class*="hcjb--card"],
.hcjb[class*="hcjb--cta"],
.hcjb[class*="hcjb--event"],
.hcjb[class*="hcjb--image"] {
  margin-top: var(--hcjb-block-gap);
  margin-bottom: var(--hcjb-block-gap);
}

/* ============================================
 * CLOSE BUTTON
 * ============================================ */
.hcjb-close {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  cursor: pointer;
  color: inherit;
  display: grid;
  place-items: center;
  transition: background var(--hcjb-ease), border-color var(--hcjb-ease), transform var(--hcjb-ease);
  padding: 0;
  font-size: 15px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hcjb-close:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.04);
}
.hcjb-close i {
  font-size: inherit;
  line-height: 1;
}

/* Light-surface banners */
.hcjb--hero-editorial .hcjb-close,
.hcjb--hero-asymmetric .hcjb-close,
.hcjb--cta-newsletter .hcjb-close,
.hcjb--notice-justified .hcjb-close,
.hcjb--notice-system .hcjb-close {
  background: var(--hcjb-bg-soft);
  border-color: var(--hcjb-border);
  color: var(--hcjb-text-2);
}
.hcjb--hero-editorial .hcjb-close:hover,
.hcjb--hero-asymmetric .hcjb-close:hover,
.hcjb--cta-newsletter .hcjb-close:hover {
  background: var(--hcjb-brand-50);
  border-color: var(--hcjb-brand-200);
  color: var(--hcjb-brand);
}

/* ============================================
 * SHARED TYPOGRAPHY (cross-template)
 * ============================================ */
.hcjb [class*="-title"],
.hcjb [class*="-head"] h2,
.hcjb h3,
.hcjb h4 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.hcjb [class*="-eyebrow"],
.hcjb [class*="-pill"]:not(.hcjb-close),
.hcjb [class*="-tag"]:not(.hcjb-close),
.hcjb [class*="-badge"] {
  letter-spacing: 0.06em;
}

/* Eyebrow / pill — JF block-eyebrow style */
.hcjb [class*="-pill"],
.hcjb [class*="-eyebrow"] {
  font-weight: 700;
}

/* Primary CTAs */
.hcjb .hb-cta,
.hcjb .hb-photo-cta,
.hcjb .hb-glass-cta,
.hcjb .hb-split-cta,
.hcjb .hb-fullimage-cta,
.hcjb .hb-asymmetric-cta,
.hcjb .nb-cta,
.hcjb .nb-cd-cta,
.hcjb .eb-cta,
.hcjb .ct-donate-cta,
.hcjb .ct-download-cta,
.hcjb .ct-news-submit,
.hcjb .ct-signup-submit,
.hcjb .ib-btn {
  font-family: var(--hcjb-font);
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: transform var(--hcjb-ease-out), box-shadow var(--hcjb-ease-out), background var(--hcjb-ease), border-color var(--hcjb-ease);
}

.hcjb .hb-cta:hover,
.hcjb .hb-photo-cta:hover,
.hcjb .hb-glass-cta:hover,
.hcjb .hb-split-cta:hover,
.hcjb .hb-fullimage-cta:hover,
.hcjb .hb-asymmetric-cta:hover,
.hcjb .nb-cta:hover,
.hcjb .ct-donate-cta:hover,
.hcjb .ct-download-cta:hover {
  transform: translateY(-2px);
}

/* Card surfaces on light templates */
.hcjb--card-grid3 .cb-grid3-card,
.hcjb--card-vertical .cb-vertical-card,
.hcjb--card-compact .cb-compact-card,
.hcjb--card-asymmetric .cb-asym-side-card,
.hcjb--card-stats .cb-stats,
.hcjb--hero-editorial,
.hcjb--hero-asymmetric,
.hcjb--cta-newsletter {
  border-color: var(--hcjb-border);
}

.hcjb--card-grid3 a.cb-grid3-card:hover,
.hcjb--card-vertical a.cb-vertical-card:hover,
.hcjb--card-compact a.cb-compact-card:hover {
  box-shadow: var(--hcjb-shadow-md);
}

/* Form inputs — JF field feel */
.hcjb .ct-signup-input,
.hcjb .ct-news-input {
  font-family: var(--hcjb-font);
  font-size: 15px;
  border-radius: var(--hcjb-r);
  border-color: var(--hcjb-border);
  background: var(--hcjb-bg-card);
  color: var(--hcjb-text);
  transition: border-color var(--hcjb-ease), box-shadow var(--hcjb-ease);
}
.hcjb .ct-signup-input:focus,
.hcjb .ct-news-input:focus {
  border-color: var(--hcjb-brand);
  box-shadow: 0 0 0 3px var(--hcjb-brand-50);
  outline: none;
}

/* ============================================
 * DISMISSAL ANIMATION
 * ============================================ */
.hcjb.is-dismissing {
  transition: opacity 0.25s ease, transform 0.25s ease,
              max-height 0.25s ease, margin 0.25s ease;
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  overflow: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.hcjb.is-hidden {
  display: none !important;
}

/* ============================================
 * VIEW TARGETING
 * ============================================ */
@media (max-width: 767px) {
  .hcjb[data-views="desktop"] {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .hcjb[data-views="mobile"] {
    display: none !important;
  }
}

/* ============================================
 * REDUCED MOTION
 * ============================================ */
@media (prefers-reduced-motion: reduce) {
  .hcjb,
  .hcjb * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes hcjb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.15); }
}

/* ============================================
 * BEHAVIOR TRIGGER STATES
 * ============================================ */
.hcjb-pending {
  display: none !important;
}

.hcjb-revealed {
  animation: hcjb-reveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hcjb-reveal {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hcjb-revealed[data-trigger="exit_intent"],
.hcjb-revealed[data-trigger="inactive"] {
  position: fixed;
  bottom: clamp(12px, 3vw, 20px);
  right: clamp(12px, 3vw, 20px);
  z-index: 9998;
  max-width: min(420px, calc(100vw - 24px));
  box-shadow: var(--hcjb-shadow-xl);
  border-radius: var(--hcjb-r-xl);
}

@media (max-width: 640px) {
  .hcjb-revealed[data-trigger="exit_intent"],
  .hcjb-revealed[data-trigger="inactive"] {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}