/* =========================
   Reset / Tokens
========================= */
:root{
  --ink:#1a2744;
  --ink-2:#445371;
  --ink-3:#6b7280;
  --line:#dfe6ff;
  --ring: 0 0 0 4px rgba(99,102,241,.18);
  --card: #f7f9ff;
  --card-ink:#14213d;
  --s1:6px; --s2:10px; --s3:16px; --s4:24px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img{ max-width:100%; display:block; }

.pb-hero__media .hero{
  position:relative;
  overflow:hidden;
  background: #eef3ff;       /* 카드 베이스 */
  border-radius:22px;
  padding: 30px 40px;         /* 텍스트↔쉴드 균형 */
  box-shadow:
    0 2px 0 rgba(255,255,255,.9) inset,
    0 20px 40px rgba(20,40,100,.08);
}

/* 카드 전체를 채우는 쉴드 이미지 + 좌측 텍스트 가독 그라데이션 */
.pb-hero__media .hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(238,244,255,.80) 0%,
      rgba(238,244,255,.58) 28%,
      rgba(232,240,255,.26) 58%,
      rgba(232,240,255,0) 100%),
    url("../img/hero-shield.webp") center/cover no-repeat;
  z-index:1;
}

/* 배너 내부 텍스트는 이미지 위로 */
.hero .hero-eyebrow,
.hero .hero-title,
.hero .hero-sub--under-shield{ position:relative; z-index:2; }

/* 배너 상단 작은 라벨 */
.hero .hero-eyebrow{
  display:inline-block;
  font-size:12px; font-weight:700; color:#1f2b4b;
  background:#fff; padding:8px 12px; border-radius:999px;
  box-shadow:0 2px 0 rgba(255,255,255,.8) inset, 0 6px 14px rgba(20,40,100,.08);
}

/* 배너 타이틀(부드럽고 단단하게) */
.hero-title{
  margin:10px 0 6px;
  font-size: clamp(30px, 3.4vw, 42px);  /* ← 여기! */
  line-height:1.15;
  letter-spacing:-0.20px;
  font-weight:700;
  color:#13213d;
  text-shadow:0 .5px 0 rgba(255,255,255,.60);  /* 섀도우 0.65 → 0.60로 아주 미세 완화 */
}

@media (max-width:600px){
  .hero-title{ font-size:clamp(22px,5vw,28px); line-height:1.22; letter-spacing:-0.18px; }
}

/* 강조 단어 – PlanBot / 적정보험료 */
.hero-title .brand-word{ color:#0f1e3a; text-shadow:none; }
.hero-title .word-gradient{
  background:none; color:#2a61e1;  /* 승인본 톤 */
  text-shadow:none;
}


/* 배너 하단 칩 */
.hero-sub--under-shield{
  position: static;
  margin: 10px 0 0;
  display:inline-block;
  font-size:13.5px; font-weight:600;
  color:#fff; background:rgba(15,23,42,.82);
  padding:8px 12px; border-radius:12px;
  box-shadow:0 8px 14px rgba(10,20,60,.10);
}

/* =========================
   폼 공통
========================= */
.form-row{ margin-bottom:14px; }
.form-label{
  display:block; margin-bottom:6px;
  font-weight:800; color:#21314E; font-size:.98rem;
}
.input, select{
  width:100%; height:48px; border:1px solid var(--line);
  border-radius:12px; background:#fff; color:var(--ink);
  padding:0 14px; outline:none; transition:.15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.input:focus, select:focus{ border-color:#C7D2FE; box-shadow:var(--ring); }

/* 월 소득 단위 칩 (선택 사용) */
.input-group{ position:relative; }
.input-group .unit-chip{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:12px; color:#6B7280; pointer-events:none;
}
.input-group .input{ padding-right:48px; }

/* =========================
   가족력 칩 (경계/선택 강조)
========================= */
#familyHistoryGroup{
  border:1px solid #d5defd; border-radius:16px;
  padding:12px; box-shadow: inset 0 1px 0 #fff;
}
#familyHistoryGroup > label{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #dfe6ff; border-radius:14px;
  background:#fff; color:var(--ink);
  padding:10px 12px; margin:6px 8px 6px 0; cursor:pointer;
  transition:.15s ease;
}
#familyHistoryGroup > label:hover{ border-color:#c9d6ff; background:#f7f9ff; }
#familyHistoryGroup > label:has(input:checked){
  border-color:#5b7cff; background:#eef3ff;
  box-shadow:0 0 0 2px rgba(46,90,242,.18) inset;
}

/* =========================
   결과 카드
========================= */
.card.result-card.summary-card{
  background:#fff; border:1px solid #e8eeff; border-radius:16px;
  padding:18px 18px 12px;
  box-shadow:0 2px 0 rgba(255,255,255,.8) inset, 0 16px 32px rgba(20,40,100,.06);
}
.summary-title{ margin:0 0 10px; font-size:18px; font-weight:800; color:#21314e; }
.summary-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-top:1px dashed #e6ecff;
}
.summary-row:first-of-type{ border-top:0; }
.summary-row .label{ color:#405070; font-weight:700; }
.summary-row .price .mono{ font-variant-numeric: tabular-nums; }

/* =========================
   광고심의 / 푸터 정렬
========================= */
#adDock{ max-width:1200px; margin:14px auto 0; padding:0 20px; }
#adDock .ad-notice{ font-size:11px; color:var(--ink-3); line-height:1.65; }
#adDock .ad-notice .item{ margin-bottom:4px; }

.site-footer .foot-links,
.site-footer .bizline{ font-size:11px; }
.site-footer .footer-wrap{ max-width:1200px; margin:0 auto; padding:16px 20px 20px; }
.site-footer .bizline .sep{ opacity:.45; }

/* =========================
   유틸리티
========================= */
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.hidden{ display:none !important; }

/* 레이아웃 공통 복구 */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.section{ padding: 22px 0; }

/* 메인 2열 그리드 */
.main-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1024px){
  .main-grid{ display:block; }
}

/* 폼 패널 후보 모두에 일괄 적용 (중복 선언 OK) */
#insuranceForm,
.form-panel,
.aside-panel,
.form .panel,
#formPanel{
  background:#fff;
  border:1px solid #e6eeff;
  border-radius:16px;
  padding:16px 16px 18px;
  box-shadow: 0 2px 0 rgba(255,255,255,.8) inset, 0 20px 40px rgba(20,40,100,.08);
  max-width: 420px;
  margin-left: auto;         /* 오른쪽 정렬 */
}

/* ✅ 고정 최소 높이 + 반응형 (예전 합의안) */
.pb-hero__media .hero{
  min-height: 360px;            /* 데스크톱 기본 높이 */
}
@media (max-width:1200px){ .pb-hero__media .hero{ min-height: 320px; } }
@media (max-width:980px){  .pb-hero__media .hero{ min-height: 300px; } }
@media (max-width:600px){  .pb-hero__media .hero{ min-height: 260px; } }

#insuranceForm .input,
#insuranceForm select{ width:100%; }
/* === 메인 히어로 2열 레이아웃 (배너/폼) === */
.pb-hero{
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px; /* 좌:배너 / 우:폼 폭 */
  gap: 32px;
  align-items: start;
}
@media (max-width: 1024px){
  .pb-hero{ display:block; } /* 태블릿 이하 1열 */
}
/* 공통 버튼 */
.btn, #submitBtn, #insuranceForm button[type="submit"]{
  display:inline-flex; justify-content:center; align-items:center;
  gap:8px; width:100%; max-width:280px; height:48px;
  border-radius:12px; font-weight:800; font-size:15px;
  border:1px solid transparent; cursor:pointer; user-select:none;
  transition:transform .06s ease, box-shadow .15s ease, background-color .15s ease;
}

/* 기본(활성) – 파란 그라데이션 */
.btn--primary, 
#submitBtn:not(:disabled),
#insuranceForm button[type="submit"]:not(:disabled){
  color:#fff;
  background: linear-gradient(180deg, #5b7cff 0%, #3f63ff 100%);
  border-color:#3f63ff;
  box-shadow: 0 6px 16px rgba(63,99,255,.22);
}
.btn--primary:hover,
#submitBtn:not(:disabled):hover,
#insuranceForm button[type="submit"]:not(:disabled):hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(63,99,255,.26);
}

/* 비활성(입력 전) – 연회색 */
#submitBtn:disabled,
#insuranceForm button[type="submit"]:disabled{
  color:#8b95a7;
  background:#eef2ff;
  border-color:#dfe6ff;
  box-shadow:none;
  cursor:not-allowed;
}

/* 폼 안에서 버튼 정렬 */
#insuranceForm .btn,
#insuranceForm #submitBtn{ margin-top:12px; margin-left:auto; margin-right:auto; }
/* === 1열(태블릿 이하)에서는 폼 패널을 가운데 정렬 === */
@media (max-width: 1024px){
  .pb-hero{ display:block; }                 /* 이미 있을 수 있음 */

  /* 폼 패널 래퍼가 무엇이든 가운데로 */
  .pb-hero__form,
  .form-panel,
  .aside-panel,
  #insuranceForm{
    max-width: 640px;                        /* 560~640 사이 취향대로 */
    margin: 16px auto 0;                     /* ← 가로 중앙 */
  }

  /* 버튼도 자연스럽게 가운데 */
  #insuranceForm .btn,
  #insuranceForm #submitBtn{
    margin-left:auto;
    margin-right:auto;
  }
}

/* 더 작은 화면에서는 패널이 화면폭에 꽉 차도록 */
@media (max-width: 600px){
  .pb-hero__form,
  .form-panel,
  .aside-panel,
  #insuranceForm{
    max-width: 100%;
    margin: 14px auto 0;
  }
}