/* ============================================================
 * JOYN Form — Template: Mono Brutalist (v1.9.41+)
 *
 * 라이트 + 굵은 검정 보더 + Archivo Black 헤드라인 + 노이즈
 * 캠페인·출판·미디어·개성 강조에 어울림
 *
 * 스코프: .jf-wrap.jf-tpl-mono 이하 전체
 * ============================================================ */

.jf-wrap.jf-tpl-mono {
  --o-bg:      #F2F1ED;
  --o-paper:   #FFFFFF;
  --o-ink:     #0A0A0A;
  --o-ink-2:   #2F2F2F;
  --o-ink-3:   #6B6B6B;
  --o-line:    #0A0A0A;
  --o-accent:  #FF4D1F;
  --o-yellow:  #FFD60A;

  background: var(--o-bg);
  color: var(--o-ink);
  position: relative;
  border-radius: 0;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
  overflow: hidden;
  border: 2px solid var(--o-ink);
}

/* 노이즈 텍스처 */
.jf-wrap.jf-tpl-mono::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5;
}
.jf-wrap.jf-tpl-mono > * { position: relative; z-index: 1; }

/* 링크 */
.jf-wrap.jf-tpl-mono a { color: var(--o-accent); text-decoration: underline; text-underline-offset: 3px; }
.jf-wrap.jf-tpl-mono a:hover { background: var(--o-yellow); color: var(--o-ink); }

/* ============ Event Side ============ */
.jf-wrap.jf-tpl-mono .jf-block-hero {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--o-ink);
}
.jf-wrap.jf-tpl-mono .jf-hero-deco,
.jf-wrap.jf-tpl-mono .jf-hero-grid-pattern,
.jf-wrap.jf-tpl-mono .jf-hero-orb { display: none; }

/* 라벨 — 검정 잉크 알약 */
.jf-wrap.jf-tpl-mono .jf-hero-label {
  background: var(--o-ink);
  border: none;
  border-radius: 0;
  color: var(--o-bg);
  letter-spacing: 0.16em;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 11px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}
.jf-wrap.jf-tpl-mono .jf-hero-label::before {
  background: var(--o-yellow);
  box-shadow: none;
  animation: none;
  width: 6px; height: 6px;
}

/* 타이틀 — 거대한 모노 헤드라인 */
.jf-wrap.jf-tpl-mono .jf-hero-title {
  color: var(--o-ink);
  text-shadow: none;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.06;
  font-family: 'Archivo Black', 'Pretendard Variable', Pretendard, sans-serif;
}
.jf-wrap.jf-tpl-mono .jf-hero-title em {
  background: var(--o-accent);
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--o-bg);
  color: var(--o-bg);
  font-style: normal;
  padding: 0 8px;
  display: inline-block;
}
.jf-wrap.jf-tpl-mono .jf-hero-title em::after { display: none; }

.jf-wrap.jf-tpl-mono .jf-hero-sub {
  color: var(--o-ink-2);
  font-weight: 500;
  line-height: 1.75;
}

/* Chips → 검정 보더 라벨 */
.jf-wrap.jf-tpl-mono .jf-chip {
  background: var(--o-paper);
  border: 2px solid var(--o-ink);
  color: var(--o-ink);
  box-shadow: 3px 3px 0 0 var(--o-ink);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-weight: 700;
}
.jf-wrap.jf-tpl-mono .jf-chip:hover {
  background: var(--o-yellow);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--o-ink);
}
.jf-wrap.jf-tpl-mono .jf-chip i {
  color: var(--o-accent);
  filter: none;
}

/* Stats — 검정 보더 카드 */
.jf-wrap.jf-tpl-mono .jf-stats-grid {
  gap: 0;
  background: transparent;
  border: 2px solid var(--o-ink);
  border-radius: 0;
}
.jf-wrap.jf-tpl-mono .jf-stat-item {
  background: var(--o-paper);
  border: none;
  border-right: 2px solid var(--o-ink);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 20px;
  color: var(--o-ink);
}
.jf-wrap.jf-tpl-mono .jf-stat-item:last-child { border-right: none; }
.jf-wrap.jf-tpl-mono .jf-stat-item::before { display: none; }
.jf-wrap.jf-tpl-mono .jf-stat-value {
  font-family: 'Archivo Black', sans-serif;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: var(--o-ink);
  color: var(--o-ink);
  font-weight: 900;
  letter-spacing: -0.04em;
}
.jf-wrap.jf-tpl-mono .jf-stat-value small { color: var(--o-accent); }
.jf-wrap.jf-tpl-mono .jf-stat-label {
  color: var(--o-ink-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  font-size: 11px;
  text-transform: uppercase;
}

/* Benefits */
.jf-wrap.jf-tpl-mono .jf-benefit-card {
  background: var(--o-paper);
  border: 2px solid var(--o-ink);
  border-radius: 0;
  color: var(--o-ink);
  box-shadow: 4px 4px 0 0 var(--o-ink);
}
.jf-wrap.jf-tpl-mono .jf-benefit-card:hover {
  background: var(--o-yellow);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--o-ink);
}

/* Block 헤딩 */
.jf-wrap.jf-tpl-mono .jf-block-eyebrow {
  color: var(--o-bg);
  background: var(--o-ink);
  border-radius: 0;
  padding: 5px 12px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.16em;
}
.jf-wrap.jf-tpl-mono .jf-block-eyebrow::before { background: var(--o-yellow); }
.jf-wrap.jf-tpl-mono .jf-block-title {
  font-family: 'Archivo Black', 'Pretendard Variable', sans-serif;
  color: var(--o-ink);
  font-weight: 900;
}
.jf-wrap.jf-tpl-mono .jf-block-sub { color: var(--o-ink-2); }

/* ============ Form Card ============ */
.jf-wrap.jf-tpl-mono .jf-form-card {
  background: var(--o-paper);
  border: 2px solid var(--o-ink);
  border-radius: 0;
  padding: clamp(24px, 3.5vw, 36px);
  box-shadow: 8px 8px 0 0 var(--o-ink);
}

.jf-wrap.jf-tpl-mono .jf-form-eyebrow {
  background: var(--o-ink);
  color: var(--o-bg);
  letter-spacing: 0.16em;
  font-weight: 700;
  border-radius: 0;
  padding: 5px 12px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
}
.jf-wrap.jf-tpl-mono .jf-form-eyebrow::before { background: var(--o-yellow); }
.jf-wrap.jf-tpl-mono .jf-form-title {
  font-family: 'Archivo Black', 'Pretendard Variable', sans-serif;
  color: var(--o-ink);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.jf-wrap.jf-tpl-mono .jf-form-desc {
  color: var(--o-ink-2);
  border-bottom: 2px solid var(--o-ink);
}

/* 섹션 헤딩 */
.jf-wrap.jf-tpl-mono .jf-field-heading {
  border-top: 2px solid var(--o-ink);
}
.jf-wrap.jf-tpl-mono .jf-field-heading h3 {
  font-family: 'Archivo Black', sans-serif;
  color: var(--o-ink);
  font-weight: 900;
  text-transform: uppercase;
}
.jf-wrap.jf-tpl-mono .jf-field-heading h3::before {
  background: var(--o-accent);
}

/* 라벨 */
.jf-wrap.jf-tpl-mono .jf-field-label {
  color: var(--o-ink);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
}
.jf-wrap.jf-tpl-mono .jf-field-required,
.jf-wrap.jf-tpl-mono .jf-asterisk { color: var(--o-accent); }

/* 입력 — 굵은 검정 보더 + 호버 시 옐로우 */
.jf-wrap.jf-tpl-mono .jf-field input[type="text"],
.jf-wrap.jf-tpl-mono .jf-field input[type="email"],
.jf-wrap.jf-tpl-mono .jf-field input[type="tel"],
.jf-wrap.jf-tpl-mono .jf-field input[type="phone"],
.jf-wrap.jf-tpl-mono .jf-field input[type="url"],
.jf-wrap.jf-tpl-mono .jf-field input[type="number"],
.jf-wrap.jf-tpl-mono .jf-field input[type="date"],
.jf-wrap.jf-tpl-mono .jf-field input[type="time"],
.jf-wrap.jf-tpl-mono .jf-field textarea,
.jf-wrap.jf-tpl-mono .jf-field select {
  background: var(--o-paper);
  border: 2px solid var(--o-ink);
  color: var(--o-ink);
  border-radius: 0;
}
.jf-wrap.jf-tpl-mono .jf-field input::placeholder,
.jf-wrap.jf-tpl-mono .jf-field textarea::placeholder {
  color: var(--o-ink-3);
}
.jf-wrap.jf-tpl-mono .jf-field input:focus,
.jf-wrap.jf-tpl-mono .jf-field textarea:focus,
.jf-wrap.jf-tpl-mono .jf-field select:focus {
  background: var(--o-yellow);
  border-color: var(--o-ink);
  box-shadow: 4px 4px 0 0 var(--o-ink);
  transform: translate(-2px, -2px);
}
.jf-wrap.jf-tpl-mono .jf-field input:hover:not(:disabled),
.jf-wrap.jf-tpl-mono .jf-field textarea:hover,
.jf-wrap.jf-tpl-mono .jf-field select:hover {
  border-color: var(--o-ink);
}
.jf-wrap.jf-tpl-mono .jf-field select {
  appearance: none; -webkit-appearance: none;
  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='%230A0A0A' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* 라디오 / 체크박스 */
.jf-wrap.jf-tpl-mono .jf-radio,
.jf-wrap.jf-tpl-mono .jf-checkbox {
  background: var(--o-paper);
  border: 2px solid var(--o-ink);
  color: var(--o-ink);
  border-radius: 0;
}
.jf-wrap.jf-tpl-mono .jf-radio:hover,
.jf-wrap.jf-tpl-mono .jf-checkbox:hover {
  background: var(--o-yellow);
}
.jf-wrap.jf-tpl-mono .jf-radio:has(input:checked),
.jf-wrap.jf-tpl-mono .jf-checkbox:has(input:checked) {
  background: var(--o-ink);
  border-color: var(--o-ink);
  color: var(--o-paper);
  font-weight: 700;
}
.jf-wrap.jf-tpl-mono .jf-radio input,
.jf-wrap.jf-tpl-mono .jf-checkbox input {
  accent-color: var(--o-accent);
}

/* Consent — 점선 박스 */
.jf-wrap.jf-tpl-mono .jf-consent {
  background: transparent;
  border: 2px dashed var(--o-ink);
  color: var(--o-ink-2);
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.jf-wrap.jf-tpl-mono .jf-consent:has(input:checked) {
  background: var(--o-yellow);
  border-style: solid;
  color: var(--o-ink);
}
.jf-wrap.jf-tpl-mono .jf-consent span { color: var(--o-ink-2); font-family: 'JetBrains Mono', monospace; }
.jf-wrap.jf-tpl-mono .jf-consent input { accent-color: var(--o-accent); }

/* 도움말 */
.jf-wrap.jf-tpl-mono .jf-field-help {
  color: var(--o-ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

/* 제출 — 검정 + 빨강 그림자 */
.jf-wrap.jf-tpl-mono .jf-submit-btn {
  background: var(--o-ink) !important;
  color: var(--o-paper) !important;
  border: 2px solid var(--o-ink);
  border-radius: 0;
  font-family: 'Archivo Black', 'Pretendard Variable', sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 2vw, 16px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 0 var(--o-accent);
}
.jf-wrap.jf-tpl-mono .jf-submit-btn::before { display: none; }
.jf-wrap.jf-tpl-mono .jf-submit-btn:hover:not(:disabled) {
  background: var(--o-accent) !important;
  border-color: var(--o-accent);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--o-ink);
}

/* 메시지 */
.jf-wrap.jf-tpl-mono .jf-form-msg.success {
  background: var(--o-yellow);
  color: var(--o-ink);
  border: 2px solid var(--o-ink);
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
}
.jf-wrap.jf-tpl-mono .jf-form-msg.error {
  background: var(--o-accent);
  color: var(--o-paper);
  border: 2px solid var(--o-ink);
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
}

/* 테이블 행 */
.jf-wrap.jf-tpl-mono .jf-table-rows {
  background: var(--o-paper);
  border: 2px solid var(--o-ink);
  border-radius: 0;
}
.jf-wrap.jf-tpl-mono .jf-table-head {
  background: var(--o-ink);
  color: var(--o-paper);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
}
.jf-wrap.jf-tpl-mono .jf-table-row { border-color: var(--o-ink); }
.jf-wrap.jf-tpl-mono .jf-table-add {
  background: var(--o-paper);
  color: var(--o-ink);
  border: 2px dashed var(--o-ink);
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}
.jf-wrap.jf-tpl-mono .jf-table-add:hover {
  background: var(--o-yellow);
  border-style: solid;
}

/* 멀티스텝 */
.jf-wrap.jf-tpl-mono .jf-step-dot {
  background: var(--o-paper);
  border: 2px solid var(--o-ink);
  color: var(--o-ink-2);
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
}
.jf-wrap.jf-tpl-mono .jf-step-dot span {
  background: var(--o-bg);
  color: var(--o-ink);
  border-radius: 0;
  font-family: 'Archivo Black', sans-serif;
}
.jf-wrap.jf-tpl-mono .jf-step-dot.is-active {
  background: var(--o-yellow);
  border-color: var(--o-ink);
  color: var(--o-ink);
}
.jf-wrap.jf-tpl-mono .jf-step-dot.is-active span,
.jf-wrap.jf-tpl-mono .jf-step-dot.is-done span {
  background: var(--o-ink); color: var(--o-paper);
}
.jf-wrap.jf-tpl-mono .jf-step-btn {
  background: var(--o-paper);
  border: 2px solid var(--o-ink);
  color: var(--o-ink);
  border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}
.jf-wrap.jf-tpl-mono .jf-step-next {
  background: var(--o-ink); color: var(--o-paper); border-color: var(--o-ink);
}

/* poster / notice */
.jf-wrap.jf-tpl-mono .jf-block-poster .jf-poster-caption {
  color: var(--o-ink-3);
  font-family: 'JetBrains Mono', monospace;
}
.jf-wrap.jf-tpl-mono .jf-block-notice {
  background: var(--o-paper);
  border: 2px solid var(--o-ink);
  color: var(--o-ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 0 var(--o-ink);
}