/* =========================================================
   질환 소개형 서브페이지 공용 CSS (page/retina/, page/cataract/ 등에서 재사용)
   ========================================================= */
/* =========================================================
   page/retina/ 폴더 전용 CSS
   - page/css/page.css(사이트 페이지 공통)와는 별도로,
     망막클리닉 하위 8개 진료과목 페이지(retina_1~8.php)에서만 쓰는 스타일을 여기서 관리합니다.
   - 다른 진료과목 폴더(page/cataract/, page/myopia/ 등)를 만들 때는
     이 파일을 복사해서 그 폴더 안에 각자의 css로 두면 됩니다.
   ========================================================= */
.bd-disease-tit{ text-align:center; margin-bottom:34px; }
.bd-small-tit{ display:block; color:var(--bd-main,#188FCA); font-size:clamp(15px,1.4vw,20px); font-weight:600; margin-bottom:16px; letter-spacing:.02em; }
.bd-disease-tit h4{ font-size:clamp(28px,4.2vw,52px); font-weight:700; color:var(--bd-font,#222); line-height:1.25; }
.bd-disease-def-txt{ max-width:760px; margin:0 auto 40px; text-align:center; }
.bd-disease-def-txt p{ color:#444; font-size:clamp(15px,1.05vw,18px); line-height:1.7; margin-bottom:12px; }
.bd-highlight{ position:relative; color:var(--bd-main,#188FCA); box-shadow:inset 0 -10px 0 rgba(95,162,122,.1); }
.bd-disease-def-txt b{ color:var(--bd-font,#222); }
.bd-accent-txt{ color:var(--bd-main-deep,#0e6690); }

.bd-disease-def, .bd-disease-cause, .bd-disease-type, .bd-disease-prevent, .bd-disease-prevent2{ padding:80px 0; }
.bd-disease-treat{ padding:80px 0 100px; }

/* 정상/질환 시야 비교 슬라이더 */
.bd-compare-slider{ position:relative; max-width:900px; margin:0 auto; aspect-ratio:900/500; border-radius:14px; overflow:hidden; user-select:none; }
.bd-compare-after, .bd-compare-before{ position:absolute; inset:0; overflow:hidden; }
.bd-compare-before{ width:50%; }
.bd-compare-after img, .bd-compare-after .bd-ph,
.bd-compare-before img, .bd-compare-before .bd-ph{ width:900px; max-width:none; height:100%; object-fit:cover; }
.bd-compare-before img, .bd-compare-before .bd-ph{ position:absolute; left:0; top:0; }
.bd-compare-handle{ position:absolute; top:0; bottom:0; left:50%; width:0; transform:translateX(-50%); cursor:ew-resize; z-index:3; }
.bd-compare-handle:before{ content:''; position:absolute; top:0; bottom:0; left:0; width:2px; background:#fff; transform:translateX(-50%); }
.bd-compare-shape{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50%; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.2); }
.bd-compare-label{ position:absolute; bottom:16px; z-index:2; background:rgba(20,30,24,.55); color:#fff; font-size:13px; padding:6px 14px; border-radius:99px; }
.bd-label-left{ left:16px; } .bd-label-right{ right:16px; }

/* 원인/증상 3분할 */
.bd-symptom-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:900px; margin:0 auto; }
.bd-symptom-img{ aspect-ratio:1/1; border-radius:12px; overflow:hidden; margin-bottom:16px; }
.bd-symptom-img img, .bd-symptom-img .bd-ph{ width:100%; height:100%; object-fit:cover; }
.bd-symptom-grid p{ text-align:center; font-weight:700; color:var(--bd-font,#222); font-size:16px; }
.bd-symptom-grid p span{ display:block; font-weight:400; color:var(--bd-sub,#666); font-size:13.5px; margin-top:6px; }
@media (max-width:640px){ .bd-symptom-grid{ grid-template-columns:1fr; } }

/* 종류 (건성/습성 교차) - 원본처럼 사진 위에 어두운 카드가 겹치는 레이아웃 */
.bd-type-row{ display:flex; align-items:center; gap:0; padding:20px 0; flex-wrap:wrap; margin-bottom:40px; }
.bd-type-row.bd-reverse{ flex-direction:row-reverse; }
.bd-type-img{ flex:1 1 55%; min-width:220px; border-radius:14px; overflow:hidden; position:relative; z-index:0; }
.bd-type-img img{ width:100%; height:auto; display:block; object-fit:contain; }
.bd-type-img .bd-ph{ width:100%; aspect-ratio:4/3; }

.bd-type-txt{
  flex:1 1 45%; min-width:220px; position:relative; z-index:1;
  background:var(--bd-main-deep,#0e6690); color:#fff; border-radius:8px 50px;
  padding:44px 40px; margin-right:-20px;
  box-shadow:-10px 12px 30px rgba(69,100,88,.22);
}
.bd-type-row.bd-reverse .bd-type-txt{ margin-right:0; margin-left:-20px; }

.bd-type-label{ display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.2); }
.bd-type-label span{ color:rgba(255,255,255,.65); font-family:'Marcellus'; font-size:14px; text-transform:uppercase; }
.bd-type-label strong{ font-size:24px; font-weight:700; color:#fff; display:block; }
.bd-type-txt b{ display:block; color:#fff; font-size:16px; line-height:1.6; margin-bottom:12px; }
.bd-type-txt p{ color:rgba(255,255,255,.8); font-size:14.5px; line-height:1.8; }

@media (max-width:700px){
  .bd-type-row, .bd-type-row.bd-reverse{ flex-direction:column; }
  .bd-type-txt, .bd-type-row.bd-reverse .bd-type-txt{ margin:-16px 20px 0; border-radius:8px; flex-basis:auto; width:calc(100% - 40px); }
  .bd-type-img{ flex-basis:auto; width:100%; }
}

/* 예방법 4분할 (아이콘형 이미지 + 아래 캡션) */
.bd-prevent-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:40px; }
.bd-prevent-grid li{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#f0f5fa; border-radius:12px; padding:32px 16px 24px;
}
.bd-prevent-img{ width:100%; aspect-ratio:1/1; max-width:120px; margin-bottom:18px; }
.bd-prevent-img img, .bd-prevent-img .bd-ph{ width:100%; height:100%; object-fit:contain; }
.bd-prevent-txt{ display:flex; flex-direction:column; align-items:center; }
.bd-prevent-txt span{ display:block; font-family:'Marcellus'; font-size:20px; color:var(--bd-main,#188FCA); opacity:.9; margin-bottom:8px; }
.bd-prevent-txt b{ font-size:15.5px; font-weight:700; color:var(--bd-font,#222); }
@media (max-width:768px){ .bd-prevent-grid{ grid-template-columns:repeat(2,1fr); } }

/* 치료방법 리스트 */
.bd-treat-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; }
.bd-treat-list.bd-cols-2{ grid-template-columns:repeat(2,1fr); max-width:800px; }
.bd-treat-list.bd-cols-1{ grid-template-columns:1fr; max-width:560px; }
.bd-treat-img{ aspect-ratio:4/3; border-radius:10px; overflow:hidden; margin-bottom:16px; }
.bd-treat-img img, .bd-treat-img .bd-ph{ width:100%; height:100%; object-fit:cover; }
.bd-treat-txt strong{ display:block; font-size:16px; font-weight:700; margin-bottom:8px; color:var(--bd-font,#222); }
.bd-treat-txt p{ color:var(--bd-sub,#666); font-size:14px; line-height:1.7; }
@media (max-width:768px){ .bd-treat-list{ grid-template-columns:1fr; } }

/* 신뢰 요소 4박스 */
.bd-trust{ padding:70px 0 110px; background:#fff; }
.bd-trust .bd-w1500{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; }
.bd-trust-box{
  border-radius:14px; padding:36px 30px 30px; color:#fff; display:flex; flex-direction:column;
  min-height:420px; position:relative; overflow:hidden;
}
.bd-trust-box:nth-child(1){ background:linear-gradient(160deg,#0e6690,#324a41); }
.bd-trust-box:nth-child(2){ background:linear-gradient(160deg,#4a7ba6,#0e6690); }
.bd-trust-box:nth-child(3){ background:linear-gradient(160deg,#188FCA,#3f7a5c); }
.bd-trust-box:nth-child(4){ background:linear-gradient(160deg,#c99a3e,#a97b28); }
.bd-trust-top{ margin-bottom:24px; }
.bd-trust-top strong{ display:block; font-size:26px; font-weight:800; color:#fff; margin-bottom:6px; }
.bd-trust-top p{ font-size:13px; color:rgba(255,255,255,.75); font-family:'Marcellus'; letter-spacing:.02em; }
.bd-trust-box ul{ position:relative; z-index:1; }
.bd-trust-box ul li{
  font-size:14px; color:#fff; line-height:1.6; padding-left:26px; position:relative; margin-bottom:16px; font-weight:500;
}
.bd-trust-box ul li:before{
  content:'✓'; position:absolute; left:0; top:-1px; width:18px; height:18px; border-radius:50%;
  background:rgba(255,255,255,.25); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.bd-trust-icon{ margin-top:auto; align-self:flex-end; opacity:.9; }
@media (max-width:900px){ .bd-trust .bd-w1500{ grid-template-columns:repeat(2,1fr); } .bd-trust-box{ min-height:340px; } }
@media (max-width:500px){ .bd-trust .bd-w1500{ grid-template-columns:1fr; } }

/* 이미지가 아직 없을 때, 필요한 파일 경로를 화면에 그대로 안내 */
.bd-ph-path{
  display:flex !important; align-items:center; justify-content:center; text-align:center;
  background:#eef4fa !important; border:1.5px dashed #a9c9e0 !important;
}
.bd-ph-path::after{ display:none; } /* 기본 bd-ph 무늬 제거 */
.bd-ph-path span{
  font-family:'Pretendard', monospace; font-size:12.5px; color:#4a7ba6;
  padding:8px 14px; word-break:break-all; line-height:1.6;
}
.bd-ph-path .bd-ph-size{ display:inline-block; margin-top:4px; font-weight:700; color:#3f7052; opacity:.85; }

/* =========================================================
   원본 사이트 실제 CSS(sub.css/retina.css/myopia.css) 참고 폴리시
   - 섹션 제목 아래 짧은 구분선, 증상카드 회색 캡션 밴드,
     아코디언 헤더 배경, 카드 텍스트 줄맞춤(min-height) 등을 반영
   ========================================================= */
.bd-disease-tit{ position:relative; }
.bd-disease-tit:after{
  content:''; display:block; width:1px; height:44px; background:#ddd;
  margin:22px auto 0;
}
@media (max-width:768px){ .bd-disease-tit:after{ display:none; } }

/* 증상 카드: 사진 아래 회색 밴드형 캡션 (원본 symptom_section 패턴) */
.bd-sp-img{ margin-bottom:0 !important; border-radius:12px 12px 0 0 !important; }
.bd-sp-txt{
  background:#f5f6f7; padding:22px 18px; min-height:120px; border-radius:0 0 12px 12px;
  align-items:flex-start;
}
.bd-symptom-photo-grid li{ border-radius:12px; overflow:hidden; }

/* 아코디언 헤더: 은은한 회색 배경 박스 (원본 accordion_wrap h5 패턴) */
.bd-accordion-btn{ background:#f2f6fa; padding:18px 22px; border-radius:8px; margin:10px 0; }
.bd-accordion-list li{ border-bottom:none; }
.bd-accordion-cnt p{ padding:0 22px 20px 60px; }

/* 예방/추천 계열 섹션: 연한 그린 틴트 배경 (원본 recommend_section.color_bg 패턴) */
.bd-disease-prevent2{ background:rgb(15 158 99 / 8%); }

/* 치료 카드 텍스트 줄맞춤 */
.bd-treat-txt{ min-height:0; }
.bd-treat-list:not(.bd-icon-style) .bd-treat-txt p{ min-height:44px; }

/* 치료리스트 4열 변형 (재수술 4단계, 인공수정체 4종류 등) */
.bd-treat-list.bd-cols-4{ grid-template-columns:repeat(4,1fr) !important; max-width:1300px; }
.bd-treat-list.bd-cols-5{ grid-template-columns:repeat(5,1fr) !important; max-width:1450px; }
@media (max-width:900px){ .bd-treat-list.bd-cols-4, .bd-treat-list.bd-cols-5{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:520px){ .bd-treat-list.bd-cols-4, .bd-treat-list.bd-cols-5{ grid-template-columns:1fr !important; } }

/* 아이콘형 카드(사진이 아니라 아이콘 그림일 때) - 작게 중앙정렬 + 밝은 배경 */
.bd-treat-list.bd-icon-style .bd-treat-img{
  aspect-ratio:1/1; background:#f0f5fa; display:flex; align-items:center; justify-content:center; padding:20px;
}
.bd-treat-list.bd-icon-style .bd-treat-img img, .bd-treat-list.bd-icon-style .bd-treat-img .bd-ph{
  width:60%; height:60%; object-fit:contain;
}
.bd-treat-list.bd-icon-style .bd-treat-txt{ text-align:center; }

/* ===== 종류 (아코디언 + 사진) ===== */
.bd-disease-accordion{ padding:80px 0; }
.bd-accordion-wrap{ display:flex; gap:50px; align-items:center; flex-wrap:wrap; }
.bd-accordion-img{ flex:1; min-width:280px; aspect-ratio:560/420; border-radius:14px; overflow:hidden; }
.bd-accordion-img img, .bd-accordion-img .bd-ph{ width:100%; height:100%; object-fit:cover; }
.bd-accordion-list{ flex:1; min-width:280px; }
.bd-accordion-list li{ border-bottom:1px solid #eee; }
.bd-accordion-btn{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left; background:none; border:none;
  padding:20px 0; font-size:16px; font-weight:700; color:var(--bd-font,#222); cursor:pointer;
}
.bd-accordion-icon{
  display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  background:#ccc; flex-shrink:0; transition:.2s; transform:rotate(180deg);
}
.bd-accordion-list li.bd-active .bd-accordion-icon{ background:var(--bd-main,#188FCA); transform:rotate(0deg); }
.bd-accordion-cnt{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.bd-accordion-list li.bd-active .bd-accordion-cnt{ max-height:160px; }
.bd-accordion-cnt p{ color:var(--bd-sub,#666); font-size:14.5px; line-height:1.75; padding:0 0 20px 38px; }

/* ===== 증상 (사진 갤러리형) ===== */
.bd-disease-symptom{ padding:80px 0; }
.bd-symptom-photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.bd-symptom-photo-grid.bd-cols-3{ grid-template-columns:repeat(3,1fr); }
.bd-symptom-photo-grid.bd-cols-2{ grid-template-columns:repeat(2,1fr); max-width:600px; margin:0 auto; }
.bd-sp-img{ aspect-ratio:1/1; border-radius:12px; overflow:hidden; margin-bottom:16px; }
.bd-sp-img img, .bd-sp-img .bd-ph{ width:100%; height:100%; object-fit:cover; }
.bd-sp-txt{ display:flex; align-items:flex-start; gap:12px; }
.bd-sp-txt span{ font-family:'EB Garamond',serif; font-size:26px; font-weight:700; color:var(--bd-main,#188FCA); line-height:1; }
.bd-sp-txt strong{ display:block; font-size:16px; font-weight:700; color:var(--bd-font,#222); margin-bottom:4px; }
.bd-sp-txt p{ color:var(--bd-sub,#666); font-size:13px; line-height:1.5; }
@media (max-width:768px){ .bd-symptom-photo-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===== 예방법 (탭 클릭 -> 큰 이미지 전환) - 원본처럼 좌우 배치 ===== */
.bd-disease-tabgallery{ padding:80px 0 100px; }
.bd-tabgallery-wrap{ display:flex; align-items:center; gap:min(3vw,50px); border-radius:20px; overflow:hidden; }
.bd-tabgallery-img{ position:relative; aspect-ratio:16/10; flex:1.4; min-width:0; }
.bd-tg-panel{ position:absolute; inset:0; opacity:0; transition:opacity .3s; }
.bd-tg-panel.bd-active{ opacity:1; position:relative; }
.bd-tg-panel img, .bd-tg-panel .bd-ph{ width:100%; height:100%; object-fit:cover; }
.bd-tabgallery-nav{ flex:1; display:flex; flex-direction:column; gap:10px; }
.bd-tg-btn{
  width:100%; text-align:left; padding:16px 28px; border-radius:99px; border:none; background:#f2f6fa;
  font-size:15.5px; font-weight:500; color:#444; cursor:pointer; transition:.2s;
}
.bd-tg-btn.bd-active{ background:var(--bd-main,#188FCA); color:#fff; }
@media (max-width:900px){
  .bd-tabgallery-wrap{ flex-direction:column; }
  .bd-tabgallery-img{ width:100%; }
  .bd-tabgallery-nav{ width:100%; }
}

/* ===== 치료(수술) 리드 문단 ===== */
.bd-disease-surgery{ padding:80px 0 100px; }
.bd-surgery-lead{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1000px; margin:0 auto 50px; }
.bd-surgery-lead > div{ background:#f0f5fa; border-radius:10px; padding:24px 26px; }
.bd-surgery-lead strong{ display:block; color:var(--bd-main-deep,#0e6690); font-size:15.5px; margin-bottom:10px; }
.bd-surgery-lead p{ color:var(--bd-sub,#666); font-size:13.5px; line-height:1.7; }
.bd-surgery-lead p b{ color:var(--bd-font,#222); }
@media (max-width:700px){ .bd-surgery-lead{ grid-template-columns:1fr; } }

/* =========================================================
   범용 컴포넌트 (원래 myopia.css에 있었으나, 여러 폴더에서 공용으로
   쓰이는 게 확인되어 이 공용 파일로 옮김: 원인/정의+배너/특징/원인단일배너)
   ========================================================= */
/* 사진 없이 텍스트만 있는 카드(추천대상 등) - 카드 형태로 다듬음 */
.bd-treat-list .bd-treat-txt:only-child{
  background:#fff; border-radius:12px; padding:32px 26px; height:100%;
  display:flex; flex-direction:column; justify-content:flex-start; text-align:left;
  border:1px solid #e8f0fa; box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.bd-treat-list .bd-treat-txt:only-child .bd-tt-step{ margin-bottom:10px; }
.bd-treat-list .bd-treat-txt:only-child strong{ font-size:15px; line-height:1.7; color:var(--bd-font,#222); font-weight:600; }

.bd-cause{ padding:80px 0; }
.bd-cause-grid{ display:flex; gap:24px; flex-wrap:wrap; margin-top:40px; }
.bd-cause-grid li{ flex:1; min-width:200px; text-align:center; }
.bd-cause-grid li p{ font-weight:700; color:var(--bd-font,#222); margin-bottom:14px; font-size:15.5px; }
.bd-cause-img{ aspect-ratio:4/3; border-radius:12px; overflow:hidden; }
.bd-cause-img img, .bd-cause-img .bd-ph{ width:100%; height:100%; object-fit:cover; }

.bd-about-img{ padding:80px 0; /*background:#f2f6fa;*/ }
.bd-about-img-banner{ max-width:1100px; margin:40px auto 0; aspect-ratio:1100/420; border-radius:16px; overflow:hidden; }
.bd-about-img-banner img, .bd-about-img-banner .bd-ph{ width:100%; height:100%; object-fit:cover; }

.bd-character{ padding:80px 0; }
.bd-character-row{ display:flex; align-items:center; gap:60px; flex-wrap:wrap; }
.bd-character-img{ flex:1; min-width:280px; aspect-ratio:560/420; border-radius:14px; overflow:hidden; }
.bd-character-img img, .bd-character-img .bd-ph{ width:100%; height:100%; object-fit:cover; }
.bd-character-txt{ flex:1; min-width:280px; }
@media (max-width:768px){ .bd-cause-grid{ flex-direction:column; } }

.bd-one-img-wrap{ margin-top:40px; border-radius:12px; overflow:hidden; }
.bd-one-img-wrap p{ background:#5c5c5c; color:#fff; text-align:center; padding:16px; font-size:16px; font-weight:500; }
.bd-one-img-list{ display:flex; }
.bd-one-img-list .bd-cause-img{ width:50%; border-radius:0; aspect-ratio:auto; height:320px; }
@media (max-width:768px){ .bd-one-img-list{ flex-direction:column; } .bd-one-img-list .bd-cause-img{ width:100%; } }

/* 탭 전환 버튼(가로 나열) - 여러 폴더(dry, checkup 등)에서 공용으로 사용 */
.bd-dry-tabnav{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:40px; }
.bd-dry-tabbtn{
  flex:1; min-width:150px; max-width:220px; text-align:center; padding:20px 16px; border-radius:12px;
  border:1px solid #eee; background:#fff; cursor:pointer; transition:.2s;
}
.bd-dry-tabbtn.bd-active{ background:var(--bd-main,#188FCA); border-color:var(--bd-main,#188FCA); }
.bd-dry-tabbtn-eng{ display:block; font-family:'Marcellus'; font-size:11px; color:var(--bd-main,#188FCA); margin-bottom:8px; }
.bd-dry-tabbtn.bd-active .bd-dry-tabbtn-eng{ color:rgba(255,255,255,.8); }
.bd-dry-tabbtn strong{ font-size:15px; font-weight:700; color:var(--bd-font,#222); }
.bd-dry-tabbtn.bd-active strong{ color:#fff; }

/* 병원의 특별함 (텍스트 목록 + 사진) - 여러 폴더(dry, checkup 등)에서 공용으로 사용 */
.bd-hospital-special{ padding:80px 0; }
.bd-hs-row{ display:flex; align-items:center; gap:60px; flex-wrap:wrap; }
.bd-hs-txt{ flex:1.2; min-width:280px; }
.bd-hs-txt li{ margin-bottom:26px; }
.bd-hs-txt li:last-child{ margin-bottom:0; }
.bd-hs-txt strong{ display:block; font-size:17px; font-weight:700; color:var(--bd-font,#222); margin-bottom:8px; }
.bd-hs-txt p{ color:#666; font-size:14px; line-height:1.75; }
.bd-hs-img{ flex:1; min-width:260px; aspect-ratio:500/560; border-radius:14px; overflow:hidden; }
.bd-hs-img img, .bd-hs-img .bd-ph{ width:100%; height:100%; object-fit:cover; }
@media (max-width:768px){ .bd-hs-row{ flex-direction:column-reverse; } }