/* =========================================================
   V&MJ SEO/GEO 콘텐츠 공통 스타일 가이드 (최종본)
   Color / Typography / Button 토큰 기반
   PC/Mobile은 반응형(@media) 대신 body.pc / 클래스로 분리
   콘텐츠는 항상 <div id="DIV_MAIN_AREA">...</div> 안에 삽입
   템플릿 A(에디토리얼) / B(절차진행형) / C(상담문답형) 공통 컴포넌트 전체 포함
   ========================================================= */

:root {
  --color-primary: #816A56;
  --color-accent-dark: #EEDCBE; /* 어두운 배경(히어로) 안에서의 포인트 컬러 */
  --color-text: #222222;
  --color-white: #FFFFFF;
  --color-bg-light: #F5F5F5;
  --color-border: #E6E6E6;
  --color-muted: #B5B5B5;

  --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-btn-pc: 40px;
  --radius-btn-mo: 55px;
}

#DIV_MAIN_AREA * { box-sizing: border-box; }

#DIV_MAIN_AREA {
  font-family: var(--font-family);
  color: var(--color-text);
  line-height: 1.6;
  word-break: keep-all;
  overflow: hidden;
}

#DIV_MAIN_AREA img { max-width: 100%; display: block; }

#DIV_MAIN_AREA .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typography ---------- */
#DIV_MAIN_AREA .title { font-weight: 700; font-size: 32px; line-height: 1.4; color: var(--color-text); }
#DIV_MAIN_AREA .subtitle { font-weight: 700; font-size: 22px; line-height: 1.5; color: var(--color-text); }
#DIV_MAIN_AREA .body-text { font-weight: 400; font-size: 17px; line-height: 1.7; color: var(--color-text); }
#DIV_MAIN_AREA .point { color: var(--color-primary); font-weight: 700; }

/* ---------- 여백 유틸리티 ---------- */
#DIV_MAIN_AREA .mt-16 { margin-top: 16px; }
#DIV_MAIN_AREA .mt-20 { margin-top: 20px; }

/* ---------- Hero (다크 박스형, 모든 템플릿 공통) ---------- */
#DIV_MAIN_AREA .hero { background: var(--color-text); padding: 64px 0 48px; text-align: center; }
#DIV_MAIN_AREA .hero .title { margin-bottom: 16px; color: var(--color-white);
  white-space: normal !important; overflow-wrap: break-word !important; word-break: keep-all !important; max-width: 100%;
}
#DIV_MAIN_AREA .hero .body-text { max-width: 640px; margin: 0 auto 28px; color: rgba(255,255,255,.75); }
#DIV_MAIN_AREA .hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

#DIV_MAIN_AREA .hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; margin-bottom: 20px;
  color: var(--color-primary); font-size: 12px; font-weight: 600; letter-spacing: 1px;
}
#DIV_MAIN_AREA .hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); display: inline-block; }

#DIV_MAIN_AREA .hero-stats { display: flex; justify-content: center; flex-wrap: wrap; }
#DIV_MAIN_AREA .hero-stat { text-align: center; }
#DIV_MAIN_AREA .hero-stat .num { font-weight: 700; color: var(--color-primary); }
#DIV_MAIN_AREA .hero-stat .label { font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 4px; letter-spacing: .2px; }

/* 어두운 배경(히어로) 안에서는 포인트 컬러를 #EEDCBE로 대체 (버튼/배지/점 색상은 유지) */
#DIV_MAIN_AREA .hero .point,
#DIV_MAIN_AREA .hero-stat .num {
  color: var(--color-accent-dark);
}

/* ---------- Buttons (모든 템플릿 공통) ---------- */
#DIV_MAIN_AREA .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 32px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; }
#DIV_MAIN_AREA .btn-primary { background: var(--color-primary); color: var(--color-white); }
#DIV_MAIN_AREA .btn-outline { background: transparent; color: var(--color-text); border: 2px solid var(--color-border); }
#DIV_MAIN_AREA .btn-list { background: var(--color-muted); color: var(--color-white); }

/* ---------- Section base (모든 템플릿 공통) ---------- */
#DIV_MAIN_AREA section { padding: 56px 0; }
#DIV_MAIN_AREA section + section { border-top: 1px solid var(--color-border); }

/* ---------- 핵심 답변 박스 (모든 템플릿 공통) ---------- */
#DIV_MAIN_AREA .quick-answer { background: var(--color-bg-light); padding: 32px; }
#DIV_MAIN_AREA .quick-answer .updated { font-size: 13px; color: var(--color-muted); margin-top: 16px; }

/* ---------- 콘텐츠 이미지 (모든 템플릿 공통) ---------- */
#DIV_MAIN_AREA .content-img { max-width: 100%; height: auto; display: block; margin: 24px auto; }

/* ---------- 템플릿 A: 용어 정의 박스 ---------- */
#DIV_MAIN_AREA .term-box { background: var(--color-bg-light); padding: 24px 28px; margin-top: 24px; }
#DIV_MAIN_AREA .term-box dl { display: grid; gap: 14px; }
#DIV_MAIN_AREA .term-box dt { font-weight: 700; color: var(--color-primary); font-size: 15px; }
#DIV_MAIN_AREA .term-box dd { margin-top: 4px; font-size: 15px; color: var(--color-text); }

/* ---------- 템플릿 A: STEP 카드 리스트 ---------- */
#DIV_MAIN_AREA .step-list { display: grid; gap: 24px; margin-top: 32px; }
#DIV_MAIN_AREA .step-card { background: var(--color-white); border: 1px solid var(--color-border); padding: 24px; }
#DIV_MAIN_AREA .step-card .step-num { color: var(--color-primary); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
#DIV_MAIN_AREA .step-card .subtitle { font-size: 18px; margin-bottom: 8px; }
#DIV_MAIN_AREA .step-card .body-text { font-size: 15px; }

/* ---------- 비교표(table) ---------- */
#DIV_MAIN_AREA table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 15px; }
#DIV_MAIN_AREA th, #DIV_MAIN_AREA td { padding: 14px 16px; border: 1px solid var(--color-border); text-align: center; }
#DIV_MAIN_AREA th { background: var(--color-primary); color: var(--color-white); font-weight: 600; }
#DIV_MAIN_AREA tr:nth-child(even) td { background: var(--color-bg-light); }
#DIV_MAIN_AREA th.col-label { background: var(--color-bg-light); color: var(--color-text); }
#DIV_MAIN_AREA th.col-normal { background: #222222; color: var(--color-white); }

/* ---------- 템플릿 B: 2단 비교 카드 ---------- */
#DIV_MAIN_AREA .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
#DIV_MAIN_AREA .compare-card { background: var(--color-white); border: 1px solid var(--color-border); padding: 28px; }
#DIV_MAIN_AREA .compare-card.highlight { border: 2px solid var(--color-primary); }
#DIV_MAIN_AREA .compare-card .compare-label { font-size: 13px; font-weight: 700; color: var(--color-muted); margin-bottom: 8px; }
#DIV_MAIN_AREA .compare-card.highlight .compare-label { color: var(--color-primary); }
#DIV_MAIN_AREA .compare-card .compare-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
#DIV_MAIN_AREA .compare-card ul { list-style: none; display: grid; gap: 10px; }
#DIV_MAIN_AREA .compare-card li { font-size: 14px; padding-left: 18px; position: relative; }
#DIV_MAIN_AREA .compare-card li::before { content: '–'; position: absolute; left: 0; color: var(--color-muted); }
#DIV_MAIN_AREA .compare-card.highlight li::before { content: '✓'; color: var(--color-primary); }

/* ---------- 템플릿 B: 타임라인 ---------- */
#DIV_MAIN_AREA .timeline { margin-top: 28px; border-left: 2px solid var(--color-border); padding-left: 28px; text-align: left; }
#DIV_MAIN_AREA .timeline-item { position: relative; padding-bottom: 32px; text-align: left; }
#DIV_MAIN_AREA .timeline-item:last-child { padding-bottom: 0; }
#DIV_MAIN_AREA .timeline-item::before {
  content: ''; position: absolute; left: -34px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary);
}
#DIV_MAIN_AREA .timeline-item .timeline-time { font-size: 13px; color: var(--color-primary); font-weight: 700; margin-bottom: 4px; }
#DIV_MAIN_AREA .timeline-item .timeline-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }

/* ---------- 템플릿 C: 오해와 진실 ---------- */
#DIV_MAIN_AREA .myth-fact { display: grid; gap: 16px; margin-top: 24px; }
#DIV_MAIN_AREA .myth-fact-item { background: var(--color-white); border: 1px solid var(--color-border); overflow: hidden; }
#DIV_MAIN_AREA .myth-fact-item .myth { background: var(--color-bg-light); padding: 16px 20px; font-weight: 700; font-size: 15px; }
#DIV_MAIN_AREA .myth-fact-item .fact { padding: 16px 20px; font-size: 15px; }
#DIV_MAIN_AREA .myth-fact-item .fact::before { content: 'FACT  '; color: var(--color-primary); font-weight: 700; font-size: 12px; }

/* ---------- 템플릿 C: 체크리스트 ---------- */
#DIV_MAIN_AREA .checklist { list-style: none; margin-top: 20px; display: grid; gap: 12px; text-align: left; }
#DIV_MAIN_AREA .checklist li { display: flex; align-items: flex-start; gap: 12px; background: var(--color-bg-light); padding: 16px 20px; font-size: 15px; text-align: left; }
#DIV_MAIN_AREA .checklist li::before { content: '✓'; color: var(--color-primary); font-weight: 700; flex-shrink: 0; }
#DIV_MAIN_AREA .checklist li strong { display: block; margin-bottom: 4px; font-size: 15px; }

/* ---------- 템플릿 C: 대상자 분기 카드 ---------- */
#DIV_MAIN_AREA .audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
#DIV_MAIN_AREA .audience-card { background: var(--color-bg-light); padding: 20px; font-size: 14px; }
#DIV_MAIN_AREA .audience-card .audience-title { font-weight: 700; margin-bottom: 8px; color: var(--color-primary); }

/* ---------- 템플릿 C: 인용/코멘트 박스 ---------- */
#DIV_MAIN_AREA .quote-box { background: var(--color-bg-light); border-left: 4px solid var(--color-primary); padding: 28px 32px; margin-top: 24px; }
#DIV_MAIN_AREA .quote-box p { font-size: 16px; font-style: italic; }
#DIV_MAIN_AREA .quote-box .attribution { margin-top: 12px; font-size: 13px; color: var(--color-muted); font-style: normal; }

/* ---------- V&MJ 연계 / 신뢰요소 박스 (모든 템플릿 공통) ---------- */
#DIV_MAIN_AREA .trust-box { background: var(--color-bg-light); color: var(--color-text); border: 1px solid var(--color-border); padding: 32px; margin-top: 24px; }
#DIV_MAIN_AREA .trust-box .body-text { color: var(--color-text); }

/* ---------- FAQ (모든 템플릿 공통, 항상 펼쳐진 정적 형태) ---------- */
#DIV_MAIN_AREA .faq-item { border-bottom: 1px solid var(--color-border); padding: 20px 0; }
#DIV_MAIN_AREA .faq-item:last-child { border-bottom: none; }
#DIV_MAIN_AREA .faq-item .faq-question { font-weight: 600; font-size: 16px; margin-bottom: 10px; }
#DIV_MAIN_AREA .faq-item .faq-question::before { content: 'Q. '; color: var(--color-muted); font-weight: 700; }
#DIV_MAIN_AREA .faq-item .faq-answer { font-size: 15px; color: var(--color-text); }
#DIV_MAIN_AREA .faq-item .faq-answer::before { content: 'A. '; color: var(--color-primary); font-weight: 700; }

/* ---------- 법적 고지 (모든 템플릿 공통) ---------- */
#DIV_MAIN_AREA .legal-notice { background: var(--color-bg-light); font-size: 12.5px; color: var(--color-muted); padding: 32px 40px; line-height: 1.8; }

/* ---------- 의료진 캐러셀 (모든 템플릿 공통, 그리드형) ---------- */
#DIV_MAIN_AREA .doctor-carousel-section { background: var(--color-white); }
#DIV_MAIN_AREA .doctor-carousel-section .subtitle { text-align: center; }
#DIV_MAIN_AREA .doctor-carousel { display: grid; gap: 16px; padding: 4px; }
#DIV_MAIN_AREA .doctor-card { background: var(--color-bg-light); overflow: hidden; text-align: center; }
#DIV_MAIN_AREA .doctor-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; margin: 0; border-radius: 0; }
#DIV_MAIN_AREA .doctor-card .doctor-name { font-weight: 700; font-size: 15px; margin-top: 12px; }
#DIV_MAIN_AREA .doctor-card .doctor-role { font-size: 12px; color: var(--color-muted); margin: 4px 0 10px; }
#DIV_MAIN_AREA .doctor-card .doctor-tags { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 0 8px 14px; }
#DIV_MAIN_AREA .doctor-card .doctor-tags .tag { font-size: 11px; background: var(--color-primary); color: var(--color-white); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }

/* =========================================================
   Mobile 전용 스타일 (body.mo)
   ========================================================= */
#DIV_MAIN_AREA .content-wrap { padding: 0 1.5rem; }
#DIV_MAIN_AREA .hero .title { font-size: 28px; }
#DIV_MAIN_AREA .hero-stats { gap: 28px; margin-top: 24px; }
#DIV_MAIN_AREA .hero-stat .num { font-size: 18px; }
#DIV_MAIN_AREA .hero-cta { flex-direction: column; }
#DIV_MAIN_AREA .btn { height: 64px; border-radius: var(--radius-btn-mo); font-size: 17px; width: 100%; }
#DIV_MAIN_AREA .step-list { grid-template-columns: 1fr; }
#DIV_MAIN_AREA .compare-grid { grid-template-columns: 1fr; }
#DIV_MAIN_AREA .audience-grid { grid-template-columns: 1fr; }
#DIV_MAIN_AREA table, #DIV_MAIN_AREA th, #DIV_MAIN_AREA td { font-size: 13px; }
#DIV_MAIN_AREA th, #DIV_MAIN_AREA td { padding: 10px 8px; }
#DIV_MAIN_AREA .doctor-carousel { grid-template-columns: repeat(2, 1fr); }