/* ============================================================
   AFTERCARE PAGE — 전용 추가 스타일 (aftercare.css)
   detail.css 공통 스타일을 기반으로, 이 페이지에만 필요한
   프로그램 태그박스 / 스텝 포인트컬러를 추가합니다.
   컬러/폰트 변수는 detail.css의 :root 값을 그대로 사용합니다.
   ============================================================ */

/* ============================================================
   SECTION 1: INTRO — 배경 이미지 교체
   ============================================================ */
.section-intro--aftercare::before {background-image:url('../images/aftercare-hero-bg.jpg');filter:brightness(0.72) contrast(1.05) saturate(1.05);}

/* ============================================================
   EYEBROW TEXT (큰타이틀 위 짧은 한글 리드문)
   ============================================================ */
.eyebrow-text {font-family:var(--font-ko);font-size:20px;font-weight:400;color:var(--color-green);line-height:1.7;margin-bottom:18px;word-break:keep-all;}

/* ============================================================
   시각적으로 숨기되 SEO/접근성을 위해 유지하는 제목
   ============================================================ */
.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;}

/* ============================================================
   PROGRAM TAGBOX (라운드 텍스트 상자)
   ============================================================ */
.program-tagbox-wrap {display:flex;justify-content:center;margin-bottom:64px;}
.program-tagbox {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;padding:32px 48px;border:1px solid var(--color-green);border-radius:var(--radius);background:var(--color-green-light);}
.program-tagbox-row {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 16px;}
.program-tagbox-item {font-family:var(--font-ko);font-size:20px;font-weight:500;color:var(--color-green);line-height:1.5;white-space:nowrap;}

/* ============================================================
   STEP 포인트컬러 라인 (시술 조합 강조)
   ============================================================ */
.step-procedures {font-family:var(--font-ko);font-size:16px;font-weight:600;color:var(--color-green);line-height:1.55;margin:0;word-break:keep-all;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px) {
  .program-tagbox {padding:24px 26px;gap:10px 12px;}
  .program-tagbox-item {font-size:16px;}
  .step-procedures {font-size:15px;}
}

@media (max-width:480px) {
  .program-tagbox {border-radius:var(--radius);}
}