/* =========================================================
   page/cataract/ 폴더 전용 CSS
   - retina.css의 질환소개 공용 컴포넌트를 그대로 재사용하고,
     이 폴더에서만 추가로 필요한 것들(비교표, 4단계 스텝, 4열 카드)만 여기서 관리합니다.
   ========================================================= */

/* 아이콘형 카드(bd-icon-style)와 4열(bd-cols-4) 규칙은
   myopia 등 다른 폴더에서도 써야 해서 공용 파일인 retina.css로 옮겼습니다. */

/* 카드 안 스텝 번호(01/02/03/04) */
.bd-tt-step{ display:block; font-family:'EB Garamond',serif; font-size:22px; font-weight:700; color:var(--bd-main,#188FCA); margin-bottom:6px; }

/* ===== 비교 슬라이더 상단 타이틀 카드 + 하단 안내 박스 =====
   retina.css의 .bd-compare-slider(공용)는 그대로 두고, cataract_1.php(노안·백내장 정의)에서만
   위/아래로 추가되는 래퍼·카드·안내 박스만 이 파일에서 관리합니다. */
.bd-compare-block{ max-width:900px; margin:0 auto; }
.bd-compare-titles{ display:flex; gap:16px; margin-bottom:16px; }
.bd-compare-title-card{ flex:1; text-align:center; background:#f0f5fa; border-radius:12px; padding:18px 14px; }
.bd-compare-title-card strong{ display:block; font-size:17px; font-weight:700; color:var(--bd-main-deep,#0e6690); margin-bottom:6px; }
.bd-compare-title-card p{ font-size:13px; color:#666; line-height:1.5; }
.bd-compare-block .bd-compare-slider{ margin:0 auto; }
.bd-compare-info{ display:flex; align-items:center; gap:14px; margin-top:16px; padding:18px 22px; background:#f0f5fa; border-radius:12px;justify-content:center }
.bd-compare-info-icon{ flex-shrink:0; width:40px; height:40px; border-radius:50%; background:#e8f0fa; color:var(--bd-main,#188FCA); display:flex; align-items:center; justify-content:center; }
.bd-compare-info-icon svg{ width:20px; height:20px; }
.bd-compare-info p{ font-size:13.5px; color:#444; line-height:1.7; margin:0; }
@media (max-width:600px){
  .bd-compare-titles{ flex-direction:column; gap:10px; }
  .bd-compare-info{ flex-direction:column; text-align:center; }
}

/* ===== 유니티 백내장 (cataract_5.php) ===== */
.bd-u5-1, .bd-u5-2, .bd-u5-3{ padding:80px 0; }
.bd-u5-1-row{ display:flex; align-items:center; gap:50px; flex-wrap:wrap; margin-top:20px; }
.bd-u5-1-txt{ flex:1; min-width:280px; }
.bd-u5-1-txt img{ height:40px; margin-bottom:16px; }
.bd-u5-1-txt strong{ display:block; font-size:22px; font-weight:700; color:var(--bd-font,#222); margin-bottom:16px; }
.bd-u5-1-txt p{ color:#444; font-size:15px; line-height:1.8; margin-bottom:12px; }
.bd-u5-1-media{ flex:1; min-width:280px; aspect-ratio:560/380; border-radius:14px; overflow:hidden; }
.bd-u5-1-media video, .bd-u5-1-media .bd-ph{ width:100%; height:100%; object-fit:cover; }

.bd-u5-2-row{ display:flex; align-items:center; gap:50px; flex-wrap:wrap; padding:36px 0; border-bottom:1px solid #eee; }
.bd-u5-2-row:last-child{ border-bottom:none; }
.bd-u5-2-row.bd-reverse{ flex-direction:row-reverse; }
.bd-u5-2-media{ flex:1; min-width:280px; aspect-ratio:500/340; border-radius:14px; overflow:hidden; }
.bd-u5-2-media video, .bd-u5-2-media .bd-ph{ width:100%; height:100%; object-fit:cover; }
.bd-u5-2-txt{ flex:1; min-width:280px; }
.bd-u5-2-num{ display:block; color:var(--bd-main,#188FCA); font-family:'Marcellus'; font-size:14px; margin-bottom:10px; }
.bd-u5-2-txt strong{ display:block; font-size:20px; font-weight:700; color:var(--bd-font,#222); margin-bottom:14px; }
.bd-u5-2-txt p{ color:#444; font-size:14.5px; line-height:1.8; }

.bd-u5-3-row{ display:flex; align-items:center; gap:60px; flex-wrap:wrap; }
.bd-u5-3-img{ flex:1; min-width:280px; aspect-ratio:560/400; border-radius:14px; overflow:hidden; }
.bd-u5-3-img img, .bd-u5-3-img .bd-ph{ width:100%; height:100%; object-fit:cover; }
.bd-u5-3-list{ flex:1; min-width:280px; }
.bd-u5-3-list li{ padding:16px 0; border-bottom:1px solid #eee; font-size:15.5px; color:#444; }
.bd-u5-3-list li:last-child{ border-bottom:none; }

.bd-u5-4{ padding:100px 0; text-align:center; background:var(--bd-main-deep,#0e6690); }
.bd-u5-4 strong{ display:block; color:#fff; font-size:clamp(22px,3vw,32px); font-weight:700; margin-bottom:22px; line-height:1.4; }
.bd-u5-4 p{ color:rgba(255,255,255,.8); font-size:15.5px; line-height:1.8; max-width:640px; margin:0 auto; }
.bd-u5-4 .bd-accent-txt{ color:#bcd9f0; }

/* 단초점 vs 다초점 같은 3열 비교표 */
.bd-compare-table{ max-width:900px; margin:0 auto; border:1px solid #eee; border-radius:12px; overflow:hidden; }
.bd-ct-row{ display:grid; grid-template-columns:1fr 110px 1fr; }
.bd-ct-row:not(:last-child){ border-bottom:1px solid #eee; }
.bd-ct-row > div{ padding:18px 20px; font-size:14px; color:var(--bd-sub,#666); line-height:1.6; display:flex; align-items:center; }
.bd-ct-row.bd-ct-head > div{ background:#f0f5fa; font-weight:700; color:var(--bd-main-deep,#0e6690); justify-content:center; font-size:15px; }
.bd-ct-mid{ justify-content:center !important; text-align:center; background:#fafafa; font-weight:700; color:var(--bd-main-deep,#0e6690); font-size:13px !important; flex-direction:column; }
@media (max-width:640px){
  .bd-ct-row{ grid-template-columns:1fr; text-align:center; }
  .bd-ct-row > div{ justify-content:center; border-bottom:1px dashed #eee; }
}