/* 무료 웨비나 신청 상자 + 팝업 — /free-ai 와 광고 자동화 자료 끝에서 같이 쓴다.
   동작은 /lp/free-ai/webinar.js, 접수는 /api/webinar/:key. 색은 vibe.css 토큰만 쓴다. */

.wb{margin-top:32px;border-radius:18px;background:var(--navy);color:var(--on-navy);padding:26px 24px 24px}
.wb h2{font-size:22px;line-height:1.45;font-weight:800;letter-spacing:-.02em;color:var(--on-navy)}
/* 작은 제목 「다음 무료 라이브」 · 설명 한 줄(2026-09-19 흐름 개선) */
.wb-eb{font-size:12.5px;line-height:1.5;font-weight:700;color:var(--on-navy-key)}
.wb-eb + h2{margin-top:6px}
.wb-lead{margin-top:6px;font-size:13.5px;line-height:1.65;color:var(--on-navy-soft)}
.wb-bar{margin-top:18px;height:8px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
:root[data-theme="dark"] .wb-bar{background:rgba(10,10,10,.16)}
.wb-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--on-navy-key);transition:width .6s ease}
.wb-rows{margin:10px 0 0;display:flex;flex-direction:column;gap:4px}
.wb-rows div{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--on-navy-soft)}
.wb-rows dt{margin:0}
.wb-rows dd{margin:0;color:var(--on-navy);font-weight:700;font-variant-numeric:tabular-nums}
.wb-fine{margin-top:12px;font-size:13.5px;line-height:1.65;color:var(--on-navy-soft)}
.wb-go{margin-top:18px;width:100%;border:0;cursor:pointer;border-radius:12px;padding:15px 18px;
  font-size:16px;font-weight:800;background:var(--on-navy-key);color:var(--navy)}
.wb-go[disabled]{cursor:default;background:rgba(255,255,255,.14);color:var(--on-navy)}
:root[data-theme="dark"] .wb-go[disabled]{background:rgba(10,10,10,.12)}
.wb-go:focus-visible{outline:3px solid var(--on-navy);outline-offset:3px}
/* 신청한 사람에겐 버튼 대신 상태 — 버튼 글이 같은 말을 하므로 안내 문장은 접는다(webinar.js 가 wb-done 을 단다) */
.wb-done .wb-fine{display:none}
/* 신청 완료 버튼의 앞말(「✓ 신청 완료 ·」)·뒷말은 각각 한 덩어리 — 줄이 바뀌면 가운뎃점 뒤에서만 넘어간다 */
.wb-go-note{display:inline-block}
/* (지난 무료 라이브 후기는 /free-ai 에만 있어 free-ai.css 의 .fai-rv 로 옮겼다) */

/* 팝업 */
.wb-dlg{width:min(460px,calc(100% - 32px));max-height:calc(100% - 32px);border:0;border-radius:20px;padding:0;
  background:var(--white);color:var(--ink);box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.wb-dlg::backdrop{background:rgba(15,23,32,.55)}
.wb-dlg form{padding:24px 22px 22px;display:flex;flex-direction:column;gap:14px}
.wb-dlg .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wb-dlg h2{font-size:20px;line-height:1.4;font-weight:800;letter-spacing:-.02em}
.wb-dlg .x{flex:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--white);
  color:var(--ink);font-size:16px;cursor:pointer}
.wb-dlg .lead{font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.wb-dlg fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wb-dlg legend{font-size:14px;font-weight:700;margin-bottom:8px;padding:0}
.wb-opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;
  font-size:14.5px;line-height:1.5;font-weight:700;cursor:pointer}
/* 고르는 표시 = 둥근 네모(그림 그대로). 고르면 파랗게 채우고 가운데 흰 점 — 하나만 고른다는 표시 */
.wb-opt input{appearance:none;-webkit-appearance:none;margin:2px 0 0;width:18px;height:18px;flex:none;cursor:pointer;
  border:1.5px solid #B8BDC6;border-radius:5px;background:var(--white)}
.wb-opt input:checked{border-color:var(--accent);background:radial-gradient(circle,#fff 0 3px,transparent 3.5px) var(--accent)}
.wb-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.wb-opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.wb-me{border-radius:12px;background:var(--accent-soft);padding:12px 14px;font-size:14.5px;line-height:1.65}
.wb-me b{font-variant-numeric:tabular-nums}
.wb-ph label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.wb-ph input[type="tel"]{width:100%;font:inherit;font-size:16px;border:1.5px solid var(--line-2);border-radius:10px;padding:12px 13px;
  background:var(--white);color:var(--ink)}
.wb-ph input[type="tel"]:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
/* 번호 칸 바로 아래 — 번호를 어디에 쓰는지 한 줄(2026-09-19 흐름 개선) */
.wb-use{margin-top:6px;font-size:13px;line-height:1.5;font-weight:700;color:#1F6B45}
:root[data-theme="dark"] .wb-use{color:#8FD0A5}
/* 동의 줄 — .wb-ph label(굵은 칸 이름)이 덮어쓰지 않게 .wb-ph 까지 붙여 가로 한 줄로 */
.wb-ph .wb-agree{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:13.5px;line-height:1.55;font-weight:400;cursor:pointer}
.wb-agree input{margin:2px 0 0;accent-color:var(--accent);width:16px;height:16px;flex:none}
.wb-agree small{display:block;color:var(--ink-soft);font-size:12px;margin-top:2px}
.wb-err{font-size:13.5px;color:#C2410C;line-height:1.55}
.wb-err:empty{display:none}
.wb-submit{border:0;cursor:pointer;border-radius:12px;padding:14px 18px;font-size:16px;font-weight:800;
  background:var(--navy);color:var(--on-navy)}
.wb-submit[disabled]{opacity:.55;cursor:default}
.wb-submit:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wb-ok{display:flex;flex-direction:column;gap:12px;padding:28px 22px 22px}
.wb-ok .big{font-size:20px;line-height:1.45;font-weight:800;letter-spacing:-.02em}
.wb-ok p{font-size:15px;line-height:1.7;color:var(--ink-soft)}

@media (max-width:560px){
  .wb{padding:22px 18px 20px}
  .wb h2{font-size:20px}
}