/* ============================================================================
   상담 신청 폼 — 심플 단일 페이지
   소프트 블루 팔레트 / 폼 하나만 노출
   ============================================================================ */
:root{
  --bg:#F4F8FC;          /* 아주 옅은 블루 배경 */
  --bg2:#EAF1F9;
  --card:#FFFFFF;
  --blue:#5B8FC7;        /* 메인: 부드러운 블루 */
  --blue-d:#4A7CB1;      /* hover */
  --blue-l:#DCE9F6;      /* 연한 톤 */
  --blue-t:#8FB4D9;      /* 아주 연한 포인트 */
  --ink:#2C3A47;
  --mut:#7A8794;
  --mut2:#A6B0BA;
  --line:#DEE7F0;
  --line2:#C9D8E7;
  --err:#D97066;
  --r:16px;
  --sans:'Pretendard',-apple-system,'Noto Sans KR',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;font-family:var(--sans);color:var(--ink);line-height:1.65;
  background:
    radial-gradient(700px 420px at 82% -8%, rgba(143,180,217,.28), transparent 62%),
    radial-gradient(560px 400px at 8% 105%, rgba(91,143,199,.14), transparent 58%),
    var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,4vw,48px) 18px;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:520px}

/* ---------- 카드 ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  border-top:4px solid var(--blue);
  box-shadow:0 18px 44px rgba(44,58,71,.09);
  padding:clamp(26px,4vw,38px);
}
.card h1{
  font-size:clamp(21px,2.4vw,26px);font-weight:700;color:var(--ink);
  margin:0 0 8px;letter-spacing:-.01em;
}
.card .sub{margin:0 0 26px;font-size:14px;color:var(--mut)}

/* ---------- 폼 ---------- */
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:13px;color:var(--ink)}
.field label .req{color:var(--blue)}
.field label .opt{color:var(--mut2);font-weight:400}
.field input,.field textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--bg2);
  border:1.5px solid transparent;border-radius:11px;padding:13px 14px;outline:0;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--mut2)}
.field input:focus,.field textarea:focus{
  background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(91,143,199,.16);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--err)}
.field textarea{min-height:96px;resize:vertical}
.err{display:none;font-size:12px;color:var(--err);font-weight:600}
.err.on{display:block}

/* 시간 선택 칩 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;cursor:pointer;
  background:var(--bg2);border:1.5px solid transparent;
  font-size:13px;font-weight:600;color:var(--mut);transition:all .15s;
}
.chip span:hover{border-color:var(--line2)}
.chip input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff}
.chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(91,143,199,.22)}

/* 동의 */
.agree{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  padding:13px 14px;margin:2px 0 12px;
}
.agree input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:#5B8FC7}
.agree label{font-size:12.5px;color:var(--mut);line-height:1.6}
.agree label b{color:var(--blue);font-weight:700}
.priv-btn{
  background:none;border:0;padding:0;font:inherit;font-size:12.5px;cursor:pointer;
  color:var(--blue);font-weight:700;text-decoration:underline;
}
.priv{
  display:none;margin:0 0 14px;padding:14px 15px;border-radius:11px;
  background:var(--bg2);border:1px dashed var(--line2);
  font-size:12px;color:var(--mut);line-height:1.75;
}
.priv.on{display:block}
.priv dt{font-weight:700;color:var(--ink);margin-top:7px}
.priv dt:first-child{margin-top:0}
.priv dd{margin:0 0 3px}

/* 버튼 */
.submit{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--blue);color:#fff;border:0;border-radius:11px;
  padding:16px;font:inherit;font-weight:700;font-size:15.5px;cursor:pointer;
  transition:background .15s,transform .12s,box-shadow .15s;
}
.submit:hover:not(:disabled){background:var(--blue-d);transform:translateY(-1px);box-shadow:0 10px 24px rgba(91,143,199,.32)}
.submit:disabled{opacity:.65;cursor:progress}
.submit .spin{
  display:none;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;
}
.submit.loading .spin{display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.note{text-align:center;font-size:12px;color:var(--mut2);margin:12px 0 0}

/* 완료 화면 */
.done{display:none;text-align:center;padding:14px 4px}
.done.on{display:block}
.card.is-done .body{display:none}
.mark{
  width:64px;height:64px;margin:0 auto 20px;border-radius:50%;
  background:var(--blue-l);color:var(--blue);font-size:28px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.done h2{font-size:20px;color:var(--ink);margin:0 0 10px;font-weight:700}
.done p{font-size:14px;color:var(--mut);margin:0}

@media(max-width:480px){
  .row{grid-template-columns:1fr}
  body{align-items:flex-start}
}

/* 전송 실패 안내 */
.send-err{
  display:none;margin:0 0 12px;padding:13px 14px;border-radius:11px;
  background:#FDF0EE;border:1px solid #F0C9C3;color:#B4574C;
  font-size:12.5px;line-height:1.6;
}
.send-err.on{display:block}
.send-err b{display:block;margin-bottom:3px;color:#A6473C;font-weight:700}