/* ==========================================================================
   세븐닷 — 설명회 팝업 + 하단 배너 공통 스타일 (b2b · b2c 공용)
   ========================================================================== */

/* ── 하단 pill 배너 ── */
@keyframes arrowBounce{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes pillGlow{0%,100%{box-shadow:0 8px 32px rgba(18,41,31,.18)}50%{box-shadow:0 8px 40px rgba(34,197,94,.32),0 4px 20px rgba(18,41,31,.1)}}
.seminar-bar{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(calc(100% + 40px));
  z-index:850;
  transition:transform .5s cubic-bezier(.34,1.2,.64,1);
}
.seminar-bar.is-visible{transform:translateX(-50%) translateY(0)}
.seminar-bar-pill{
  display:flex;align-items:stretch;
  background:#fff;border-radius:999px;
  box-shadow:0 8px 32px rgba(18,41,31,.18);
  overflow:hidden;
  animation:pillGlow 2.8s ease-in-out infinite;
  white-space:nowrap;
}
.seminar-bar-info{
  display:flex;align-items:center;gap:18px;
  padding:20px 36px;
}
.seminar-bar-badge{color:var(--green,#1F9D5C);font-weight:700;font-size:clamp(14px,1.25vw,17px)}
.seminar-bar-name{color:#1a2e22;font-weight:800;font-size:clamp(16px,1.56vw,20px)}
.seminar-bar-btn{
  background:var(--green,#1F9D5C);color:#fff;
  padding:0 36px;font-weight:700;font-size:clamp(15px,1.41vw,18px);
  text-decoration:none;border:none;cursor:pointer;
  border-radius:0 999px 999px 0;
  display:flex;align-items:center;
  animation:arrowBounce 1.4s ease-in-out infinite;
  transition:filter .2s;font-family:inherit;
}
.seminar-bar-btn:hover{filter:brightness(1.1);animation-play-state:paused}
body:has(.seminar-bar.is-visible) .float-group{bottom:calc(68px + 24px + 24px)}
@media(max-width:768px){
  .seminar-bar{bottom:16px;left:16px;right:16px;width:auto;transform:translateY(calc(100% + 40px))}
  .seminar-bar.is-visible{transform:translateY(0)}
  .seminar-bar-pill{border-radius:20px}
  .seminar-bar-info{padding:16px 20px;gap:8px;flex:1}
  .seminar-bar-badge{font-size:13px}
  .seminar-bar-name{font-size:15px}
  .seminar-bar-btn{border-radius:0 20px 20px 0;padding:0 22px;font-size:15px;animation:none}
  body:has(.seminar-bar.is-visible) .float-group{bottom:calc(68px + 16px + 16px)}
}

/* ── 팝업 오버레이 · 모달 ── */
.sp-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(10,22,16,.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.sp-overlay.open{opacity:1;pointer-events:auto}
.sp-modal{
  background:#fff;border-radius:24px;width:100%;max-width:400px;
  padding:36px 32px 32px;position:relative;
  box-shadow:0 24px 64px rgba(10,22,16,.25);
  max-height:90vh;overflow-y:auto;
}
.sp-close-x{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(0,0,0,.06);color:#6B7B71;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;z-index:10;
}
.sp-close-x:hover{background:rgba(0,0,0,.12);color:#1A2D22}
.sp-footer{display:flex;align-items:center;justify-content:center;border-top:1px solid #EBF3EE;margin-top:20px;padding-top:14px}
.sp-footer-btn{background:none;border:none;cursor:pointer;font-size:13px;color:#9AA8A0;padding:6px 16px;font-family:inherit;transition:color .15s}
.sp-footer-btn:hover{color:#3A423E}
.sp-footer-sep{width:1px;height:14px;background:#D8E8DC;flex-shrink:0}
.sp-step{transition:opacity .25s}
.sp-hidden{display:none}

/* ── Step 1 초대장 ── */
.sp-invite{
  background:linear-gradient(145deg,#12291F 0%,#1F5C3A 100%);
  border-radius:18px;padding:28px 24px;color:#fff;margin-bottom:20px;
}
.sp-invite-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.sp-logo{height:18px;filter:brightness(0) invert(1)}
.sp-badge{background:rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.3)}
.sp-invite-title{font-size:clamp(22px,2.03vw,26px);font-weight:800;line-height:1.3;margin-bottom:22px}
.sp-invite-title span{color:#6EE29A}
.sp-invite-info{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.sp-info-row{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.sp-info-icon{font-size:17px;width:24px;text-align:center}
.sp-invite-desc{font-size:13px;color:rgba(255,255,255,.7);line-height:1.6;margin-top:4px}

/* ── 공통 버튼 ── */
.sp-cta{
  width:100%;padding:15px;border-radius:12px;border:none;cursor:pointer;
  background:var(--green,#1F9D5C);color:#fff;font-size:16px;font-weight:700;
  font-family:inherit;transition:.22s;
}
.sp-cta:hover{filter:brightness(1.08)}
.sp-sub{text-align:center;font-size:12px;color:#999;margin-top:10px}

/* ── Step 2 폼 ── */
.sp-form-title{font-size:clamp(18px,1.72vw,22px);font-weight:800;color:#12291F;margin-bottom:6px}
.sp-form-sub{font-size:14px;color:#666;margin-bottom:24px;line-height:1.6}
.sp-form{display:flex;flex-direction:column;gap:14px}
.sp-label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#3A423E}
.sp-input{
  padding:12px 14px;border:1.5px solid #D8E8DC;border-radius:10px;
  font-size:15px;font-family:inherit;outline:none;transition:.2s;
}
.sp-input:focus{border-color:var(--green,#1F9D5C)}
.sp-select{
  appearance:none;-webkit-appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA8A0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
  cursor:pointer;color:#1A2D22;
}
.sp-select:invalid,.sp-select option[value=""]{color:#9AA8A0}
.sp-email-wrap{display:flex;align-items:center;gap:6px}
.sp-email-local{flex:1;min-width:0}
.sp-email-at{font-size:15px;font-weight:600;color:#9AA8A0;flex-shrink:0}
.sp-email-domain{flex:1;min-width:0;padding-right:34px}
.sp-email-custom{margin-top:6px}
.sp-check{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:#6B7B73;line-height:1.5;cursor:pointer}
.sp-check input[type=checkbox]{width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--green,#1F9D5C);cursor:pointer}
.sp-check small{display:block;color:#9AA8A0;font-size:11px;margin-top:2px}

/* ── 동의 항목 ── */
.sp-agrees{display:flex;flex-direction:column;gap:0;margin-top:2px}

/* 전체 동의 — 시각적으로 부각 */
.sp-agree-all{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  border:1.5px solid #C8E6D4;border-radius:12px;
  background:#F4FAF7;cursor:pointer;
  transition:border-color .18s,background .18s;
}
.sp-agree-all:hover{border-color:var(--green,#1F9D5C);background:#EBF6EF}
.sp-agree-all input[type=checkbox]{
  width:20px;height:20px;flex-shrink:0;
  accent-color:var(--green,#1F9D5C);cursor:pointer;
}
.sp-agree-all-body{display:flex;flex-direction:column;gap:2px}
.sp-agree-all-txt{font-size:15px;font-weight:700;color:#1A2D22}
.sp-agree-all-sub{font-size:11.5px;color:#9AA8A0}

/* 구분선 */
.sp-agree-divider{height:1px;background:#EBF3EE;margin:10px 2px}

/* 개별 항목 — 눈에 덜 띄게 */
.sp-agree-items{display:flex;flex-direction:column;gap:6px;padding:0 4px}
.sp-check-sm{display:flex;align-items:center;gap:8px;cursor:pointer}
.sp-check-sm input[type=checkbox]{
  width:14px;height:14px;flex-shrink:0;
  accent-color:var(--green,#1F9D5C);cursor:pointer;
}
.sp-check-sm span{font-size:11.5px;color:#A8B5AF}

.sp-agree-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sp-agree-row .sp-check{flex:1}
.sp-agree-row .sp-check b{font-weight:700;color:#3A423E}
.sp-terms-toggle{
  flex-shrink:0;background:none;border:none;padding:2px 0;margin-top:1px;
  font-family:inherit;font-size:11px;color:#9AA8A0;
  text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;white-space:nowrap;transition:color .15s;
}
.sp-terms-toggle:hover{color:var(--green,#1F9D5C)}
.sp-terms{
  background:#F4F7F5;border-radius:8px;padding:11px 13px;
  font-size:11px;line-height:1.75;color:#6B7B73;letter-spacing:-.01em;
}

/* ── Step 3 완료 ── */
.sp-done{text-align:center;padding:12px 0}
.sp-done-icon{
  width:72px;height:72px;
  background:var(--green,#1F9D5C);
  border-radius:50%;
  margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(31,157,92,.28);
  animation:doneCheck .45s cubic-bezier(.34,1.56,.64,1) both;
}
.sp-done-icon::after{
  content:'';
  display:block;
  width:32px;height:18px;
  border-left:3.5px solid #fff;
  border-bottom:3.5px solid #fff;
  transform:rotate(-45deg) translate(3px,-2px);
  border-radius:1px;
}
@keyframes doneCheck{
  from{transform:scale(0);opacity:0}
  to{transform:scale(1);opacity:1}
}
@media(max-width:480px){
  .sp-modal{padding:28px 20px 24px;border-radius:20px}
  .sp-invite{padding:22px 18px}
}