/* ============================================================
 * JOYN Form — Template: Midnight Live (v1.9.41+)
 *
 * 다크 네이비 + 그리드 패턴 + 그린 LIVE 액센트
 * 방송 채널 / 라이브 송출 / 디지털 강단 신청 등에 어울림
 *
 * 스코프: .jf-wrap.jf-tpl-midnight 이하 전체
 * 기본 frontend.css 위에서 색감 / 폰트 / 장식만 override
 * ============================================================ */

.jf-wrap.jf-tpl-midnight {
  --m-bg:         #0A1027;
  --m-bg-2:       #0E1532;
  --m-card:       #131A3A;
  --m-line:       #1F2A52;
  --m-line-soft:  #18204A;
  --m-text:       #E6EAF5;
  --m-text-2:     #98A1C4;
  --m-text-3:     #5C6694;
  --m-accent:     #6DE3A6;  /* LIVE 그린 */
  --m-accent-dim: #2A8C66;
  --m-white:      #FFFFFF;

  background: var(--m-bg);
  color: var(--m-text);
  position: relative;
  border-radius: clamp(14px, 2vw, 24px);
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px);
  overflow: hidden;
}

/* 그리드 + 그라데이션 배경 장식 */
.jf-wrap.jf-tpl-midnight::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 30% 20%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 30%, transparent 80%);
}
.jf-wrap.jf-tpl-midnight::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 85% 90%, rgba(69,65,255,0.22), transparent 50%),
    radial-gradient(circle at 5% 95%, rgba(109,227,166,0.10), transparent 45%);
}
.jf-wrap.jf-tpl-midnight > * { position: relative; z-index: 1; }

/* ── 링크 ── */
.jf-wrap.jf-tpl-midnight a { color: var(--m-accent); }

/* ============ Event Side (Hero / Chips / 등) ============ */
.jf-wrap.jf-tpl-midnight .jf-block-hero {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--m-text);
}
.jf-wrap.jf-tpl-midnight .jf-hero-deco,
.jf-wrap.jf-tpl-midnight .jf-hero-grid-pattern,
.jf-wrap.jf-tpl-midnight .jf-hero-orb { display: none; }

.jf-wrap.jf-tpl-midnight .jf-hero-label {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--m-line);
  border-radius: 6px;
  color: var(--m-text-2);
  letter-spacing: 0.28em;
  padding: 7px 16px 7px 14px;
  font-weight: 600;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.jf-wrap.jf-tpl-midnight .jf-hero-label::before {
  background: var(--m-accent);
  box-shadow:
    0 0 12px rgba(109,227,166,0.6),
    0 0 0 4px rgba(109,227,166,0.18);
  animation: jf-tpl-mn-pulse 2.2s ease-out infinite;
}
@keyframes jf-tpl-mn-pulse {
  0%   { box-shadow: 0 0 12px rgba(109,227,166,0.6), 0 0 0 0 rgba(109,227,166,0.5); }
  100% { box-shadow: 0 0 12px rgba(109,227,166,0.0), 0 0 0 14px rgba(109,227,166,0.0); }
}

.jf-wrap.jf-tpl-midnight .jf-hero-title {
  color: var(--m-white);
  text-shadow: none;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.06;
}
.jf-wrap.jf-tpl-midnight .jf-hero-title em {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: rgba(230,234,245,0.32);
  color: rgba(230,234,245,0.32);
  font-style: normal;
}
.jf-wrap.jf-tpl-midnight .jf-hero-title em::after { display: none; }

.jf-wrap.jf-tpl-midnight .jf-hero-sub { color: var(--m-text-2); }

/* Chips → 다크 라인 박스 */
.jf-wrap.jf-tpl-midnight .jf-chip {
  background: var(--m-bg-2);
  border: 1px solid var(--m-line);
  color: var(--m-text);
  box-shadow: none;
  border-radius: 6px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.jf-wrap.jf-tpl-midnight .jf-chip:hover {
  background: var(--m-line-soft);
  border-color: var(--m-accent-dim);
  transform: translateY(-1px);
}
.jf-wrap.jf-tpl-midnight .jf-chip i {
  color: var(--m-accent);
  filter: none;
}

/* Stats — 다크 그리드 */
.jf-wrap.jf-tpl-midnight .jf-stats-grid { gap: 1px; background: var(--m-line-soft); border: 1px solid var(--m-line-soft); border-radius: 4px; overflow: hidden; }
.jf-wrap.jf-tpl-midnight .jf-stat-item {
  background: var(--m-bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 22px 20px;
  color: var(--m-text);
}
.jf-wrap.jf-tpl-midnight .jf-stat-item::before { display: none; }
.jf-wrap.jf-tpl-midnight .jf-stat-value {
  color: var(--m-white);
  font-family: 'Space Grotesk', 'Pretendard Variable', Pretendard, sans-serif;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: var(--m-white);
}
.jf-wrap.jf-tpl-midnight .jf-stat-value small { color: var(--m-accent); }
.jf-wrap.jf-tpl-midnight .jf-stat-label { color: var(--m-text-3); }

/* Benefits */
.jf-wrap.jf-tpl-midnight .jf-benefit-card {
  background: var(--m-card);
  border: 1px solid var(--m-line);
  color: var(--m-text);
}
.jf-wrap.jf-tpl-midnight .jf-benefit-card:hover {
  background: var(--m-line-soft);
  border-color: var(--m-accent-dim);
}

/* Block heading, eyebrow */
.jf-wrap.jf-tpl-midnight .jf-block-eyebrow { color: var(--m-accent); }
.jf-wrap.jf-tpl-midnight .jf-block-eyebrow::before { background: var(--m-accent); }
.jf-wrap.jf-tpl-midnight .jf-block-title { color: var(--m-white); }
.jf-wrap.jf-tpl-midnight .jf-block-sub { color: var(--m-text-2); }

/* CTA 등 일반 텍스트 */
.jf-wrap.jf-tpl-midnight p,
.jf-wrap.jf-tpl-midnight li { color: var(--m-text-2); }
.jf-wrap.jf-tpl-midnight h1,
.jf-wrap.jf-tpl-midnight h2,
.jf-wrap.jf-tpl-midnight h3,
.jf-wrap.jf-tpl-midnight h4 { color: var(--m-white); }

/* ============ Form Side (카드) ============ */
.jf-wrap.jf-tpl-midnight .jf-form-card {
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.jf-wrap.jf-tpl-midnight .jf-form-eyebrow {
  background: rgba(109,227,166,0.10);
  color: var(--m-accent);
  border-radius: 4px;
  letter-spacing: 0.18em;
}
.jf-wrap.jf-tpl-midnight .jf-form-eyebrow::before { background: var(--m-accent); }
.jf-wrap.jf-tpl-midnight .jf-form-title { color: var(--m-white); }
.jf-wrap.jf-tpl-midnight .jf-form-desc {
  color: var(--m-text-2);
  border-bottom-color: var(--m-line);
}

/* 섹션 헤딩 */
.jf-wrap.jf-tpl-midnight .jf-field-heading { border-top-color: var(--m-line); }
.jf-wrap.jf-tpl-midnight .jf-field-heading h3 { color: var(--m-white); }
.jf-wrap.jf-tpl-midnight .jf-field-heading h3::before {
  background: var(--m-accent);
}

/* 라벨 */
.jf-wrap.jf-tpl-midnight .jf-field-label { color: var(--m-text); }
.jf-wrap.jf-tpl-midnight .jf-field-required,
.jf-wrap.jf-tpl-midnight .jf-asterisk { color: var(--m-accent); }

/* 입력 필드 */
.jf-wrap.jf-tpl-midnight .jf-field input[type="text"],
.jf-wrap.jf-tpl-midnight .jf-field input[type="email"],
.jf-wrap.jf-tpl-midnight .jf-field input[type="tel"],
.jf-wrap.jf-tpl-midnight .jf-field input[type="phone"],
.jf-wrap.jf-tpl-midnight .jf-field input[type="url"],
.jf-wrap.jf-tpl-midnight .jf-field input[type="number"],
.jf-wrap.jf-tpl-midnight .jf-field input[type="date"],
.jf-wrap.jf-tpl-midnight .jf-field input[type="time"],
.jf-wrap.jf-tpl-midnight .jf-field textarea,
.jf-wrap.jf-tpl-midnight .jf-field select {
  background: var(--m-bg-2);
  border: 1px solid var(--m-line);
  color: var(--m-white);
  border-radius: 8px;
}
.jf-wrap.jf-tpl-midnight .jf-field input::placeholder,
.jf-wrap.jf-tpl-midnight .jf-field textarea::placeholder {
  color: var(--m-text-3);
}
.jf-wrap.jf-tpl-midnight .jf-field input:focus,
.jf-wrap.jf-tpl-midnight .jf-field textarea:focus,
.jf-wrap.jf-tpl-midnight .jf-field select:focus {
  border-color: var(--m-accent);
  background: var(--m-bg-2);
  box-shadow: 0 0 0 3px rgba(109,227,166,0.12);
}
.jf-wrap.jf-tpl-midnight .jf-field input:hover:not(:disabled),
.jf-wrap.jf-tpl-midnight .jf-field textarea:hover,
.jf-wrap.jf-tpl-midnight .jf-field select:hover {
  border-color: var(--m-text-3);
}

/* select 화살표 (다크용) */
.jf-wrap.jf-tpl-midnight .jf-field select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2398A1C4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  appearance: none; -webkit-appearance: none;
}

/* 라디오 / 체크박스 */
.jf-wrap.jf-tpl-midnight .jf-radio,
.jf-wrap.jf-tpl-midnight .jf-checkbox {
  background: var(--m-bg-2);
  border: 1px solid var(--m-line);
  color: var(--m-text);
  border-radius: 8px;
}
.jf-wrap.jf-tpl-midnight .jf-radio:hover,
.jf-wrap.jf-tpl-midnight .jf-checkbox:hover {
  background: rgba(109,227,166,0.06);
  border-color: var(--m-accent-dim);
}
.jf-wrap.jf-tpl-midnight .jf-radio:has(input:checked),
.jf-wrap.jf-tpl-midnight .jf-checkbox:has(input:checked) {
  background: rgba(109,227,166,0.10);
  border-color: var(--m-accent);
  color: var(--m-white);
}
.jf-wrap.jf-tpl-midnight .jf-radio input,
.jf-wrap.jf-tpl-midnight .jf-checkbox input {
  accent-color: var(--m-accent);
}

/* Consent */
.jf-wrap.jf-tpl-midnight .jf-consent {
  background: var(--m-bg-2);
  border: 1px solid var(--m-line);
  color: var(--m-text-2);
  border-radius: 8px;
}
.jf-wrap.jf-tpl-midnight .jf-consent:has(input:checked) {
  background: rgba(109,227,166,0.08);
  border-color: var(--m-accent);
}
.jf-wrap.jf-tpl-midnight .jf-consent span { color: var(--m-text); }
.jf-wrap.jf-tpl-midnight .jf-consent input { accent-color: var(--m-accent); }

/* 도움말 */
.jf-wrap.jf-tpl-midnight .jf-field-help { color: var(--m-text-3); }

/* 제출 버튼 — 화이트 → 호버 시 그린 */
.jf-wrap.jf-tpl-midnight .jf-submit-btn {
  background: var(--m-white) !important;
  color: #0A1027 !important;
  border: 1px solid var(--m-white);
  border-radius: 8px;
  box-shadow: none;
  font-weight: 800;
}
.jf-wrap.jf-tpl-midnight .jf-submit-btn::before { display: none; }
.jf-wrap.jf-tpl-midnight .jf-submit-btn:hover:not(:disabled) {
  background: var(--m-accent) !important;
  color: #0A1027 !important;
  border-color: var(--m-accent);
  transform: translateY(-1px);
}

/* 폼 메시지 */
.jf-wrap.jf-tpl-midnight .jf-form-msg.success {
  background: rgba(109,227,166,0.10);
  color: var(--m-accent);
  border: 1px solid rgba(109,227,166,0.30);
}
.jf-wrap.jf-tpl-midnight .jf-form-msg.error {
  background: rgba(244,63,94,0.10);
  color: #FCA5B4;
  border: 1px solid rgba(244,63,94,0.30);
}

/* 테이블 행 (table_rows) */
.jf-wrap.jf-tpl-midnight .jf-table-rows {
  background: var(--m-bg-2);
  border: 1px solid var(--m-line);
  border-radius: 8px;
}
.jf-wrap.jf-tpl-midnight .jf-table-head { background: var(--m-line-soft); color: var(--m-text-2); }
.jf-wrap.jf-tpl-midnight .jf-table-row { border-color: var(--m-line); }
.jf-wrap.jf-tpl-midnight .jf-table-add {
  background: transparent; color: var(--m-accent); border: 1px solid var(--m-accent-dim);
}
.jf-wrap.jf-tpl-midnight .jf-table-add:hover {
  background: rgba(109,227,166,0.08);
  border-color: var(--m-accent);
}

/* 멀티스텝 (class-creator-form) */
.jf-wrap.jf-tpl-midnight .jf-step-dot {
  background: var(--m-bg-2);
  border-color: var(--m-line);
  color: var(--m-text-3);
}
.jf-wrap.jf-tpl-midnight .jf-step-dot span { background: var(--m-line); color: var(--m-text-2); }
.jf-wrap.jf-tpl-midnight .jf-step-dot.is-active {
  background: rgba(109,227,166,0.10);
  border-color: var(--m-accent);
  color: var(--m-accent);
}
.jf-wrap.jf-tpl-midnight .jf-step-dot.is-active span,
.jf-wrap.jf-tpl-midnight .jf-step-dot.is-done span {
  background: var(--m-accent); color: #0A1027;
}
.jf-wrap.jf-tpl-midnight .jf-step-btn {
  background: var(--m-bg-2);
  border: 1px solid var(--m-line);
  color: var(--m-text);
}
.jf-wrap.jf-tpl-midnight .jf-step-next {
  background: var(--m-white); color: #0A1027; border-color: var(--m-white);
}

/* poster / notice / kakao_channel 블록 */
.jf-wrap.jf-tpl-midnight .jf-block-poster .jf-poster-caption { color: var(--m-text-2); }
.jf-wrap.jf-tpl-midnight .jf-block-notice {
  background: var(--m-card); border: 1px solid var(--m-line); color: var(--m-text); border-radius: 12px;
}