/* ============================================================
   sti_check.css — 성병검진 & 치료 페이지 전용
   공통 스타일: 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%); }
.diag-photo-badge { background: rgba(184,90,42,0.88); }
.flow-step:nth-child(1) .flow-circle { background: #b85a2a; }
.flow-step:nth-child(2) .flow-circle { background: #d4784a; }
.flow-step:nth-child(3) .flow-circle { background: #8a3e1a; }
.flow-step:nth-child(4) .flow-circle { background: #c06030; }

/* ── 01. 검진 과정 플로우 ── */
.flow-section { background: var(--white); padding-bottom: 80px; }
.flow-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
.flow-steps::before { content: ''; position: absolute; top: 36px; left: 12%; right: 12%; height: 2px; background: var(--border); z-index: 0; }
.flow-step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; padding: 0 12px; }
.flow-circle { width: 72px; height: 72px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; line-height: 1.3; margin-bottom: 18px; box-shadow: 0 4px 16px rgba(184,90,42,0.25); }
.flow-step h4 { font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.flow-step p  { color: var(--text-muted); line-height: 1.65; }

/* ── 02. 검진 항목 — 풀사진 + 카드 ── */
.diagnosis-section { background: var(--bg-section); padding-bottom: 80px; }
.diag-photo-wrap { margin-bottom: 28px; }
.diag-photo-main {
  width: 100%; aspect-ratio: 21/9; border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 16px 56px rgba(184,90,42,0.15);
  position: relative; background: var(--bg-light);
  display: flex; align-items: center; justify-content: center;
}
.diag-photo-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s; }
.diag-photo-main img.active-img { opacity: 1; }
.diag-photo-badge {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  backdrop-filter: blur(10px); padding: 18px 32px; color: #fff;
  display: flex; align-items: baseline; gap: 18px;
}
.diag-photo-badge strong { font-weight: 700; white-space: nowrap; }
.diag-photo-badge span   { opacity: 0.8; }
.diag-photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-muted); width: 100%; height: 100%; padding: 32px; }
.diag-photo-placeholder .ph-box { width: 56px; height: 56px; border: 1.5px dashed var(--border); border-radius: 2px; }
.diag-cards { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.diag-card { background: var(--white); border-radius: var(--radius); padding: 22px 20px; border-top: 3px solid var(--accent); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.diag-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.diag-card.active { border-top-color: var(--primary); background: var(--primary-light); box-shadow: var(--shadow); }
.diag-card-num { font-weight: 700; letter-spacing: 2px; color: var(--accent); margin-bottom: 10px; }
.diag-card.active .diag-card-num { color: var(--primary); }
.diag-card h4 { font-weight: 700; color: var(--text-dark); margin-bottom: 10px; line-height: 1.35; }
.diag-card p  { color: var(--text-muted); line-height: 1.7; }

/* ── 03. 패키지 검진 ── */
.package-section { background: var(--white); padding-bottom: 80px; }
.package-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.package-card {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: transform 0.2s;
}
.package-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.package-card-head { padding: 24px 24px 18px; }
.package-card.basic  .package-card-head { background: var(--bg-light); border-bottom: 3px solid var(--accent); }
.package-card.std    .package-card-head { background: var(--primary-light); border-bottom: 3px solid var(--primary); }
.package-card.full   .package-card-head { background: #fdf0ea; border-bottom: 3px solid var(--primary-dark); }
.package-label { font-weight: 700; letter-spacing: 2px; margin-bottom: 6px; }
.package-card.basic .package-label { color: var(--accent); }
.package-card.std   .package-label { color: var(--primary); }
.package-card.full  .package-label { color: var(--primary-dark); }
.package-card h4 { font-weight: 800; color: var(--text-dark); margin-bottom: 4px; }
.package-card .package-sub { color: var(--text-muted); }
.package-card-body { background: var(--white); padding: 20px 24px 26px; }
.package-items { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.package-items li { color: var(--text-mid); padding-left: 16px; position: relative; line-height: 1.6; }
.package-items li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: 700; }

/* ── 04. 치료 탭 ── */
.treatment-section { background: var(--bg-section); padding-bottom: 80px; }
.treat-layout { display: grid; grid-template-columns: 420px 1fr; gap: 56px; align-items: start; }
.treat-photo { aspect-ratio: 4/3; border-radius: var(--radius); box-shadow: var(--shadow); }
.treat-badge { display: inline-block; background: var(--accent-light); color: var(--primary-dark); font-weight: 700; padding: 5px 14px; border-radius: 2px; margin-bottom: 14px; }
.treat-text h4 { font-size: clamp(20px,2.2vw,26px); font-weight: 800; color: var(--text-dark); margin-bottom: 14px; line-height: 1.35; }
.treat-text p  { color: var(--text-mid); line-height: 1.9; margin-bottom: 20px; }
.treat-points { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.treat-point { background: var(--primary-light); border: 1px solid var(--accent-light); color: var(--primary-dark); font-weight: 600; padding: 7px 16px; border-radius: 2px; }

.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) {
  .diag-cards { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  .flow-steps { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .flow-steps::before { display: none; }
  .package-grid { grid-template-columns: 1fr; }
  .treat-layout { grid-template-columns: 1fr; }
  .treat-photo { aspect-ratio: 16/9; }
  .diag-photo-main { aspect-ratio: 16/9; }
}
@media (max-width: 768px) {
  .diag-cards { grid-template-columns: repeat(2,1fr); }
  .package-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .diag-cards { grid-template-columns: 1fr; }
  .package-grid { grid-template-columns: 1fr; }
}