/* ============================================================
   gardasil.css — 가다실9가 HPV 예방접종 페이지 전용
   공통 스타일: common.css 참조
   ============================================================ */

:root {
  --primary:        #b85a2a;
  --primary-dark:   #8a3e1a;
  --primary-light:  #fdf0ea;
  --accent:         #d4784a;
  --accent-light:   #fde0cc;
  --border:         #f0cbb8;
  --bg-light:       #fdf7f4;
  --bg-section:     #f7f7f7;
  --shadow:         0 8px 32px rgba(184,90,42,0.10);
  --shadow-lg:      0 20px 56px rgba(184,90,42,0.14);
}

.hero-section { background: linear-gradient(135deg, #5a2010 0%, #b85a2a 55%, #d4784a 100%); }
.hero-overlay {
  background: linear-gradient(
    105deg, rgba(90,32,16,0.92) 0%, rgba(184,90,42,0.70) 42%,
    rgba(184,90,42,0.18) 75%, transparent 100%
  );
}
.cta-section { background: linear-gradient(135deg, #5a2010 0%, #b85a2a 100%); }

/* ── 01. 가다실9가 메인 히어로 ── */
.vaccine-hero {
  position: relative; width: 100%; min-height: 500px;
  border-radius: var(--radius); overflow: hidden; margin-bottom: 56px;
  background: linear-gradient(135deg, #5a2010 0%, #b85a2a 55%, #d4784a 100%);
  box-shadow: 0 24px 64px rgba(184,90,42,0.22);
}
.vaccine-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; opacity: 0; transition: opacity 0.35s; }
.vaccine-hero-img.loaded { opacity: 1; }
.vaccine-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(90,32,16,0.92) 0%, rgba(184,90,42,0.65) 44%, rgba(184,90,42,0.15) 72%, transparent 100%);
}
.vaccine-hero-content { position: relative; z-index: 2; padding: 60px 64px; max-width: 640px; color: #fff; }
.vaccine-kicker { font-weight: 700; letter-spacing: 4px; color: rgba(255,255,255,0.55); text-transform: uppercase; margin-bottom: 14px; }
.vaccine-hero-content h3 { font-size: clamp(26px,3.4vw,42px); font-weight: 900; line-height: 1.2; margin-bottom: 18px; }
.vaccine-hero-content h3 em { font-style: normal; color: #ffd4a8; }
.vaccine-hero-content p { opacity: 0.88; line-height: 1.85; margin-bottom: 28px; }
.vaccine-points { display: flex; flex-wrap: wrap; gap: 10px; }
.vaccine-point { border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.9); font-weight: 600; padding: 8px 18px; border-radius: 2px; }
.vaccine-callouts { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 3; }
.vaccine-callout { background: rgba(255,255,255,0.96); border-radius: var(--radius); padding: 16px 22px; min-width: 190px; box-shadow: 0 6px 20px rgba(0,0,0,0.16); }
.vaccine-callout strong { display: block; color: var(--primary-dark); margin-bottom: 4px; }
.vaccine-callout span   { color: var(--text-muted); }

/* ── 02. HPV란 / 효과 ── */
.about-section { background: var(--white); padding-bottom: 80px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.about-img-box {
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3;
  box-shadow: 0 12px 48px rgba(184,90,42,0.10);
  position: relative; background: var(--bg-section);
  display: flex; align-items: center; justify-content: center;
}
.about-img-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.about-img-box img[src]:not([src=""]) { display: block; }
.about-img-box svg { width: 100%; height: 100%; padding: 20px; }
.about-text h3 { font-size: clamp(20px,2.4vw,28px); font-weight: 800; color: var(--text-dark); margin-bottom: 18px; line-height: 1.4; }
.about-text h3 em { color: var(--primary); font-style: normal; }
.about-text p { color: var(--text-mid); line-height: 1.95; margin-bottom: 20px; }

/* 예방 효과 바 */
.effect-bars { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.effect-bar-row { display: grid; grid-template-columns: 180px 1fr 52px; gap: 14px; align-items: center; }
.effect-bar-label { font-weight: 600; color: var(--text-mid); }
.effect-bar-track { height: 12px; background: var(--border); border-radius: 6px; overflow: hidden; }
.effect-bar-fill  { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 6px; }
.effect-bar-pct   { font-weight: 700; color: var(--primary); text-align: right; }

/* ── 03. 접종 대상 카드 ── */
.target-section { background: var(--bg-section); padding-bottom: 80px; }
.target-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.target-card {
  background: var(--white); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow);
  border-top: 3px solid var(--accent);
  text-align: center;
}
.target-card.best { border-top-color: var(--primary); }
.target-icon { margin-bottom: 14px; }
.target-card h4 { font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.target-card .target-age { font-weight: 900; color: var(--primary); margin-bottom: 8px; }
.target-card p { color: var(--text-muted); line-height: 1.7; }
.target-badge { display: inline-block; margin-top: 12px; font-weight: 700; padding: 4px 14px; border-radius: 2px; }
.target-card.best .target-badge { background: var(--primary-light); color: var(--primary); }
.target-card .target-badge { background: var(--bg-section); color: var(--text-muted); }

/* ── 04. 접종 스케줄 ── */
.schedule-section { background: var(--white); padding-bottom: 80px; }
.schedule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.schedule-card { background: var(--bg-section); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow); }
.schedule-card h4 { font-weight: 800; color: var(--text-dark); margin-bottom: 6px; }
.schedule-card .sch-sub { color: var(--text-muted); margin-bottom: 20px; }
.schedule-steps { display: flex; flex-direction: column; gap: 14px; }
.schedule-step { display: flex; gap: 16px; align-items: flex-start; }
.schedule-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.schedule-step strong { display: block; color: var(--text-dark); margin-bottom: 3px; }
.schedule-step span   { color: var(--text-muted); line-height: 1.6; }

/* ── 05. FAQ ── */
/* common.css faq-section 그대로 사용 */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── 반응형 ── */
@media (max-width: 1100px) {
  .vaccine-callouts { display: none; }
  .target-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .about-grid, .schedule-grid { grid-template-columns: 1fr; gap: 32px; }
  .vaccine-hero-content { padding: 40px 32px; }
  .effect-bar-row { grid-template-columns: 130px 1fr 44px; }
}
@media (max-width: 768px) {
  .target-grid { grid-template-columns: 1fr; }
}