/* ===================================================================
   PlanBot Result – single source of truth (2025-09-27)
   모바일(<=640) · 태블릿(641–1023) · 데스크탑(>=1024) 대응
   기존 마크업(.ai-result-card / .ai-section / .ai-summary 등) 그대로 사용
   =================================================================== */

/* #0. 베이스 / 변수 */
:root{
  --bg-page: #f5f8fd;
  --fg-base: #42464d;
  --fg-sub:  #64748b;
  --brand:   #2563eb;
  --brand-weak:#e8f0ff;
  --card:    #ffffff;
  --shadow:  0 10px 30px rgba(2, 8, 23, .08);
  --radius:  14px;

  --divider: #e5e7eb;

  --sum-bg:  #fff8db;
  --sum-bd:  #f4e7a6;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background: var(--bg-page);
  color: var(--fg-base);
  font-family: 'Pretendard','Noto Sans KR','NotoSansKR','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; display:block; }

/* #1. 카드(모바일 퍼스트) */
.ai-result-card{
  counter-reset: sec;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border:1px solid #e6eeff;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  width: min(100% - 24px, 640px); /* 모바일 기본 폭 */
}
/* 태블릿: 컨텐트 여유 */
@media (min-width: 641px){
  .ai-result-card{
    width: min(100% - 48px, 720px);
    padding: 28px 26px;
  }
}

/* 데스크탑: 가독성 최적 폭 */
@media (min-width: 1024px){
  .ai-result-card{
    width: 820px;            /* 요청 반영: 데스크탑 카드 폭 */
    padding: 30px 28px;
  }
}

/* 대화면(선택): 약간만 더 넓게 */
@media (min-width: 1280px){
  .ai-result-card{
    width: 880px;
  }
}

/* #2. 상단 부가 텍스트/금액 */
.sub-info{ color: var(--fg-sub); letter-spacing:.1px; margin: 6px 0 14px; }

.ai-premium{ margin: 6px 0 14px; }
.ai-premium .premium-label{ color:#475569; margin-right:6px; }
.premium-value{ font-variant-numeric: tabular-nums; }

/* 표 형태로 보이고 싶으면 .ai-premium에 ai-premium--table 클래스 추가 */
.ai-premium.ai-premium--table .row{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:6px 0; border-bottom:1px dashed #eef2f7;
}
.ai-premium.ai-premium--table .row:last-child{ border-bottom:0; }

/* #3. 요약 박스(질병 정의) */
.ai-summary, .define, .note{
  background: var(--sum-bg);
  border: 1px solid var(--sum-bd);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 12px 0 14px;
}
.ai-summary b{
  display:inline-flex; align-items:center; gap:6px;
}
.ai-summary b::before{
  content:"ⓘ"; font-size:12px; opacity:.8;
}

/* #4. 섹션(질병별) */
.ai-section + .ai-section{
  border-top: 1px dashed var(--divider);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}
.ai-sec-title{
  display:flex; align-items:center; gap:10px; margin: 8px 0;
  font-weight: 700;
}
.ai-sec-title::before{
  content: counter(sec) ".";
  counter-increment: sec;
  background: var(--brand-weak);
  color: var(--brand);
  font-weight: 700; font-size: 13px;
  border-radius: 9999px; padding: 3px 10px;
  box-shadow: 0 0 0 1px rgba(37,99,235,.15) inset;
}
.ai-section ul{ padding-left: 1.1em; }
.ai-section li{ margin: 6px 0; line-height: 1.65; }
.ai-plan-list li{ margin: 8px 0; }

/* #6. 프린트 최적화 */
@media print{
  body{ background:#fff !important; }
  .ai-result-card{
    box-shadow:none !important; border:0; margin:0; width:100%;
    padding:0;
  }
  .btn-group, .kakao-btn{ display:none !important; }
  .floating-cta{ display:none !important; }  /* ⬅︎ 추가 */
  .ai-section + .ai-section{ border-top:1px solid var(--divider); }
}
/* #7. 소소한 타이포/유틸 */
h2, h3, h4{ margin: 0 0 8px; }
b{ font-weight: 700; }
small, .text-sm{ font-size: .925rem; }
.text-sub{ color: var(--fg-sub); }

/* 카드 헤더(요약/해설/플랜 섹션 공통) */
.ai-title{
  display:flex; align-items:center; gap:10px;
  margin:4px 0 10px;
  font-weight:800; color:#21314e; font-size:18px;
}
.ai-title .eyebrow{
  font-size:11px; font-weight:800; color:#5b7cff;
  background:#eef2ff; border:1px solid #dfe6ff;
  border-radius:999px; padding:3px 8px;
}

/* 구분선(점선 대신 더 깔끔) */
.ai-divider{ height:1px; background:linear-gradient(90deg,#eaf0ff,transparent); margin:10px 0 12px; }

/* 요약 행(이미 쓰는 summary-row와 톤 맞춤) */
.ai-summary-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
.ai-summary-row + .ai-summary-row{ border-top:1px dashed #e6ecff; }
.ai-summary-row .label{ color:#405070; font-weight:700; }
.ai-summary-row .value{ font-variant-numeric:tabular-nums; }

/* 본문 타이포(가독) */
.ai-body{ color:#33435e; line-height:1.7; font-size:14.5px; }
.ai-body p{ margin:8px 0; }

/* 불릿 목록 – 글리프(•,▸) 문제 제거, 카운터 사용 */
.ai-list{ counter-reset:item; margin:8px 0 4px; padding:0; }
.ai-list li{
  list-style:none; counter-increment:item;
  padding-left:26px; position:relative; margin:6px 0;
}
.ai-list li::before{
  content: counter(item) ".";
  position:absolute; left:0; top:0; line-height:1.6;
  color:#5b7cff; font-weight:800;
}

/* 강조/배지 */
.ai-badge{
  display:inline-block; font-size:11px; font-weight:800;
  color:#2b478b; background:#eef5ff; border:1px solid #dce9ff;
  padding:2px 8px; border-radius:999px; margin-left:6px;
}

/* 플랜 추천 박스 */
.ai-plan{
  background:#f8fbff; border:1px solid #e3eeff; border-radius:12px;
  padding:12px; margin:10px 0 6px;
}
.ai-plan .plan-row{ display:flex; justify-content:space-between; padding:8px 0; }
.ai-plan .plan-row + .plan-row{ border-top:1px dashed #dfe7ff; }
.ai-plan .label{ color:#3a4a6a; font-weight:700; }
.ai-plan .amt{ font-variant-numeric:tabular-nums; font-weight:800; color:#1f3cff; }

/* 모바일 여백 */
@media (max-width:600px){
  .ai-title{ font-size:17px; }
}
/* result.css 맨 아래쪽에 추가: 페이지 타이틀 톤 정렬 */
/* 페이지 타이틀/서브 – index 톤과 동일하게 */
.page-title{
  margin: 18px 0 6px;
  font-size: clamp(28px,3.2vw,40px);
  line-height: 1.15;
  letter-spacing: -.2px;
  font-weight: 700;
  color: #13213d;
}
.page-sub{
  margin: 0 0 18px;
  color: var(--fg-sub);
  font-size: clamp(14px,1.6vw,15px);
}

/* result.css 하단에 추가: pb-* → index 톤 매핑 */
.pb-form{ max-width:420px; margin:0 auto; }
.pb-input{
  width:100%; height:48px; border:1px solid #e6eeff;
  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,.06);
}
.pb-input:focus{ border-color:#C7D2FE; box-shadow: var(--ring); }
.pb-consents .pb-consent-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0; border-top:1px dashed #e6ecff;
}
.pb-consents .pb-consent-row:first-of-type{ border-top:0; }
.pb-badge{ font-size:11px; font-weight:800; color:#5b7cff; background:#eef2ff;
  border:1px solid #dfe6ff; border-radius:999px; padding:3px 8px; }

/* 카드 내부 섹션 간격 */
.ai-result-card h3, .ai-result-card h4{ margin: 10px 0 8px; }
.ai-result-card p{ margin: 6px 0; }

/* 공통 메인 래퍼가 main.container.section 기준이라고 가정 */
@media (max-width: 960px){
  main.container.section{
    display: grid;
    justify-items: center;   /* 내부 카드/버튼 중앙 정렬 */
  }
  .ai-result-card{ margin: 0 14px 16px; } /* 좌우 패딩 확보 */
}
/* 하단 심의 도킹 – 더 작고 촘촘하게 */
#adDock{
  font-size: 12px;
  line-height: 1.5;
  color: #667085;
  max-width: 860px;
  margin: 10px auto 14px;
}

/* 푸터 – index와 동일한 톤(중앙, 작은 폰트) */
.site-footer{ padding: 10px 0 26px; }
.site-footer .footer-wrap{
  max-width: 960px; margin: 0 auto; text-align: center;
  font-size: 13px; color: #6b7280;
}
.site-footer .footer-wrap a{ color: #6b7280; text-decoration: underline dotted; }
.site-footer .footer-wrap a:hover{ color:#334155; text-decoration: underline; }

.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* 카드 하단 CTA 버튼 3종 레이아웃 */
.ai-result-card .btn-group{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top: 10px;
}
@media (max-width: 720px){
  .ai-result-card .btn-group{ grid-template-columns:1fr; }
}

/* 버튼 톤(크기/둥근모서리/두께) */
.consult-btn,
.kakao-btn,
.close-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; border-radius:10px; font-weight:700; letter-spacing:.1px;
  text-decoration:none; user-select:none; cursor:pointer;
  border:1px solid transparent; transition:filter .15s ease, transform .04s ease;
}
.consult-btn{ background:#1f4dff; color:#fff; border-color:#1f4dff; }
.kakao-btn { background:#fee500; color:#191919; border-color:#e5d200; }
.close-btn { background:#f4f7ff; color:#334155; border-color:#e6eeff; }
.consult-btn:hover,
.kakao-btn:hover,
.close-btn:hover{ filter:brightness(.98); }
.consult-btn:active,
.kakao-btn:active,
.close-btn:active{ transform: translateY(1px); }

.floating-cta{ display:none !important; } /* 플로팅 CTA 숨김(선택) */
/* 배너 사용 시 상단 제목 숨기고 싶다면(선택) */
.page-title, .page-sub{ display:none; }
/* 경량 히어로(배너) */
.hero.hero--compact{ max-width:960px; margin: 14px auto 8px; }
.hero--compact .hero-card{
  background:#fff; border:1px solid #e6eeff; border-radius:16px;
  box-shadow:0 12px 30px rgba(25,42,89,.08); padding:18px 20px;
}
.hero--compact .badge{
  display:inline-block; font-size:12px; font-weight:800;
  color:#5b7cff; background:#eef2ff; border:1px solid #dfe6ff;
  border-radius:999px; padding:4px 10px; margin-bottom:8px;
}
.hero--compact h1{
  font-size: clamp(26px, 3.6vw, 36px);
  margin: 6px 0 4px; color:#13213d; letter-spacing:-.2px;
}
.hero--compact .hero-sub{ color: var(--fg-sub); margin:0; }

@media print{ .hero{ display:none !important; } } /* 인쇄 시 숨김 */

/* 모바일에선 시야 확보 차원에서 살짝 축소/내림 */
@media (max-width: 720px){
  .hero-chip{ top:-10px; right:12px; padding:8px 10px; border-radius:12px; }
  .hero-chip img{ width:48px; height:48px; }
}

/* === 전체 배경 워터마크 (index와 동일한 방식) === */
body{ background:#f5f8ff; }  /* 필요시 index와 동일한 배경색 */

body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url("../seo/watermark.png");
  background-repeat:repeat;
  background-size:280px auto;   /* 필요시 240~320 조절 */
  opacity:.06;
  pointer-events:none;
  z-index:0;
}

/* 실제 콘텐츠를 워터마크 위로 띄우기 */
header, main, footer, .hero, .ai-result-card, .result-cta, #adDock{
  position:relative; z-index:1;
}

/* 프린트 시 워터마크/히어로 숨김 */
@media print{
  body::before, .hero{ display:none !important; }
}
/* 배너 카드에 전체 오버레이(쉴드 이미지) */
.hero--compact .hero-card{
  position: relative;
  overflow: hidden;              /* 오버레이가 카드 밖으로 넘치지 않게 */
}
.hero--compact .hero-card > *{
  position: relative; z-index: 1; /* 텍스트가 오버레이 위로 오게 */
}
.hero--compact .hero-card::after{
  content:"";
  position:absolute; inset:0;     /* 카드 전체 덮기 */
  pointer-events:none; z-index:0;

  /* ⬇️ 쉴드 이미지 한 장을 카드에 크게 배치 */
  background: no-repeat right 24px center / 360px auto;
  /* 웹P → PNG → SVG 폴백 순서 */
  background-image: image-set(
    url("../img/hero-shield.webp") type("image/webp"),
    url("../img/hero-shield.png")  type("image/png"),
    url("../img/hero-shield.svg")  type("image/svg+xml")
  );
  opacity: .18;                   /* 과하지 않게 희미하게 */
  /* 필요 시 살짝 섞고 싶으면: mix-blend-mode: multiply; */
}

/* 모바일에선 크기/위치만 조정(또는 더 옅게) */
@media (max-width: 720px){
  .hero--compact .hero-card::after{
    background-size: 240px auto;
    background-position: right -10px center;
    opacity: .12;
  }
}
.hero-chip{ display:none !important; }
/* 하단 폼 CTA 래퍼: 중앙 정렬 + 같은 폭(260px) */
.form-cta{
  display:flex; justify-content:center;
  margin: 14px auto 18px;
}

/* 하단 제출 버튼을 '윗 버튼'과 완전히 동일하게 */
#consultForm .pb-submit.btn.btn-primary{
  width:100%;
  max-width:260px;         /* 위 파란 버튼과 동일 폭 */
  height:46px;             /* 동일 높이 */
  border-radius:10px;      /* 동일 라운드 */
  font-weight:700;
  letter-spacing:.1px;
  /* 눈에 띄도록 약한 그림자 (윗 버튼과 톤 유지) */
  box-shadow: 0 4px 12px rgba(25,42,89,.12);
}

/* 모바일에선 꽉 차게 */
@media (max-width:720px){
  #consultForm .pb-submit.btn.btn-primary{ max-width:100%; }
}
/* 하단 상담신청 버튼 컬러 토닝 (위 파란 CTA와 동일 계열) */
#consultForm .pb-submit{
  background:#1f4dff;          /* 기본 파랑 */
  border:1px solid #1f4dff;
  color:#fff;
  box-shadow:0 6px 18px rgba(25,42,89,.14);
}

/* 호버/액티브/포커스 피드백 */
#consultForm .pb-submit:hover{ filter:brightness(.98); }
#consultForm .pb-submit:active{ transform:translateY(1px); }
#consultForm .pb-submit:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(199,210,254,.9), 0 6px 18px rgba(25,42,89,.14);
}

/* 비활성(입력/동의 미완료)일 때는 중간 톤의 연회색 */
#consultForm .pb-submit:disabled{
  background:#eef2ff;
  border:1px solid #e6eeff;
  color:#7c86a0;
  box-shadow:none;
  cursor:not-allowed;
}