/* =====================================================================
   improvement.css — 기존 시스템 개선 상담 페이지 전용 델타
   ---------------------------------------------------------------------
   · preview_sub.css(헤더 로드) 뒤에 로드된다.
   · 폼/알림/버튼 등은 preview_sub.css 의 pv-* 클래스를 그대로 재사용하고,
     이 파일은 신규 컴포넌트(개선 항목 그리드 · 폼 셸 · 하단 CTA)만 담는다.
   · 색상/토큰은 preview_sub.css 의 :root 변수를 그대로 사용한다.
   ===================================================================== */

/* ── 히어로: 고민 체크리스트 ── */
.imp-hero-worry{
  margin-top:32px; max-width:680px;
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:28px 32px;
}
.imp-worry-q{
  font-size:var(--t-md); font-weight:800; color:var(--text);
  letter-spacing:-.01em; margin-bottom:18px;
}
.imp-worry-list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:11px 24px;
}
.imp-worry-list li{
  position:relative; padding-left:28px;
  font-size:var(--t-base); color:var(--text-sub); line-height:1.5;
}
.imp-worry-list li::before{
  content:'✓'; position:absolute; left:0; top:1px;
  width:20px; height:20px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:12px; font-weight:900; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.imp-worry-note{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--border);
  font-size:var(--t-sm); font-weight:600; color:var(--text);
}

/* ── 개선 항목 섹션 ── */
.imp-items-sec{ padding:80px 0; background:var(--bg); }
.imp-inner{ max-width:1080px; margin:0 auto; padding:0 40px; }
.imp-sec-head{ text-align:center; margin-bottom:40px; }
.imp-eyebrow{
  font-size:var(--t-sm); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}
.imp-sec-title{
  font-family:var(--font-h); font-size:var(--t-2xl); font-weight:900;
  letter-spacing:-.03em; color:var(--text); line-height:1.2;
}

.imp-grid{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; padding:0; margin:0;
}
.imp-item-card{
  display:flex; align-items:center; gap:16px;
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:22px 24px;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.imp-item-card:hover{
  border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-3px);
}
.imp-item-ico{
  width:44px; height:44px; flex-shrink:0; border-radius:var(--r-md);
  background:var(--accent-glow); display:flex; align-items:center; justify-content:center;
}
.imp-item-ico svg{ width:22px; height:22px; color:var(--accent); }
.imp-item-label{ font-size:var(--t-base); font-weight:700; color:var(--text); }

/* ── 상담 폼 셸(단일 컬럼) ── */
.imp-form-shell{ max-width:760px; margin:0 auto; }
.imp-form-head{ margin-bottom:28px; }
.imp-form-head .imp-sec-title{ text-align:left; font-size:var(--t-xl); }
.imp-form-sub{ font-size:var(--t-base); color:var(--text-sub); margin-top:8px; line-height:1.7; }

.imp-fieldset{ border:none; padding:0; margin:0; }

/* select 를 pv-input 스타일에 맞춰 화살표만 커스텀 */
.imp-select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:44px;
  background-image: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='%234a7060' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}

/* ── 하단 CTA ── */
.imp-cta{ background:var(--accent); padding:72px 0; text-align:center; }
.imp-cta-inner{ max-width:720px; margin:0 auto; padding:0 40px; }
.imp-cta-title{
  font-family:var(--font-h); font-size:var(--t-xl); font-weight:900;
  color:#fff; letter-spacing:-.02em; line-height:1.3; margin-bottom:14px;
}
.imp-cta-desc{ font-size:var(--t-base); color:rgba(255,255,255,.85); line-height:1.7; margin-bottom:28px; }
.imp-cta-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--accent); font-weight:700; font-size:var(--t-base);
  padding:15px 32px; border-radius:var(--r-full); text-decoration:none;
  transition:transform .2s, box-shadow .2s;
}
.imp-cta-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* ── 제출 결과 레이어 팝업(모달) ── */
.imp-modal{
  position:fixed; inset:0; z-index:9999; padding:20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,31,23,.55); animation:impFade .2s ease;
}
.imp-modal--hide{ animation:impFadeOut .2s ease forwards; }
@keyframes impFade{ from{opacity:0} to{opacity:1} }
@keyframes impFadeOut{ from{opacity:1} to{opacity:0} }
.imp-modal-card{
  width:100%; max-width:420px; background:var(--bg-card);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:40px 32px 32px; text-align:center;
  animation:impPop .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes impPop{ from{opacity:0; transform:translateY(16px) scale(.96)} to{opacity:1; transform:none} }
.imp-modal-ico{
  width:56px; height:56px; margin:0 auto 20px; border-radius:50%;
  background:var(--accent-glow); display:flex; align-items:center; justify-content:center;
}
.imp-modal-ico svg{ width:28px; height:28px; color:var(--accent); }
.imp-modal-ico--err{ background:rgba(220,53,69,.12); }
.imp-modal-ico--err svg{ color:#dc3545; }
.imp-modal-title{
  font-family:var(--font-h); font-size:var(--t-lg); font-weight:900;
  color:var(--text); letter-spacing:-.02em; line-height:1.3; margin-bottom:14px;
}
.imp-modal-desc{ font-size:var(--t-base); color:var(--text-sub); line-height:1.7; margin-bottom:12px; }
.imp-modal-note{ font-size:var(--t-sm); color:var(--text-muted); line-height:1.6; margin-bottom:26px; }
.imp-modal-btn{
  width:100%; background:var(--accent); color:#fff; border:none; border-radius:var(--r-md);
  padding:14px 24px; font-size:var(--t-base); font-weight:700; font-family:var(--font-b);
  cursor:pointer; transition:background .2s, transform .2s;
}
.imp-modal-btn:hover{ background:var(--accent-l); transform:translateY(-1px); }
@media(prefers-reduced-motion:reduce){
  .imp-modal, .imp-modal-card{ animation:none; }
}

/* ── 반응형 ── */
@media(max-width:900px){
  .imp-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .imp-hero-worry{ margin-top:clamp(16px,4.2vw,32px); padding:clamp(14px,3.9vw,28px) clamp(16px,4.2vw,32px); }
  .imp-worry-list{ grid-template-columns:1fr; gap:clamp(8px,1.6vw,11px); }
  .imp-items-sec{ padding:clamp(45px,8.3vw,64px) 0; }
  .imp-inner{ padding:0 clamp(14px,2.6vw,20px); }
  .imp-grid{ gap:clamp(11px,2vw,16px); }
  .imp-item-card{ padding:clamp(15px,2.9vw,22px) clamp(16px,3.1vw,24px); gap:clamp(11px,2vw,16px); }
  .imp-item-ico{ width:clamp(31px,5.7vw,44px); height:clamp(31px,5.7vw,44px); }
  .imp-cta{ padding:clamp(50px,9.4vw,72px) 0; }
  .imp-cta-inner{ padding:0 clamp(10px,2.6vw,20px); }
  .imp-cta-btn{ padding:clamp(11px,2vw,15px) clamp(22px,4.2vw,32px); }
  .imp-modal-card{ padding:clamp(28px,5.2vw,40px) clamp(22px,4.2vw,32px) clamp(22px,4.2vw,32px); }
  .imp-modal-ico{ width:clamp(40px,7.3vw,56px); height:clamp(40px,7.3vw,56px); }
}
@media(max-width:480px){
  .imp-grid{ grid-template-columns:1fr; }
  .pv-hero-inner .pc{display: none}
}