@charset "UTF-8";
/* =========================================================
   큰빛안과의원 커스텀 테마 CSS
   - 그누보드 기본(basic) 테마의 default.css 와 충돌하지 않도록
     모든 클래스에 bd- 접두어를 사용합니다.
   - 이미지 경로는 이 파일(/css/custom.css) 기준 ../img/ 입니다.
   ========================================================= */
:root{
  --bd-main: #188FCA;
  --bd-main-deep: #0e6690;
  --bd-font: #222222;
  --bd-sub: #666666;
  --bd-bg-mint: #eef4fa;
  --bd-bg-gray: #f0f0f0;
}

/* 어떤 요소가 폭을 살짝 넘치더라도(스와이퍼 peek 효과 등) 페이지 전체가
   옆으로 스크롤되지는 않도록 최상단(html, body)에서만 가로 스크롤을 막습니다.
   - overflow-x:hidden 대신 overflow-x:clip을 씁니다: hidden은 일부 모바일
     브라우저에서 position:fixed 요소(퀵메뉴 등)를 화면에 고정시키지 못하고
     페이지 안에 가둬버리는 부작용이 있는데, clip은 그런 부작용이 없습니다. */
html, body{ overflow-x:clip; max-width:100%; }

/* =========================================================
   전역 안전장치: 모바일 가로 넘침 근본 원인 해결
   - 사이트 전반의 2단(사진+텍스트) 레이아웃은 데스크탑에서 보기 좋으라고
     .bd-w1500에 flex + align-items:center 를 씁니다.
   - 그런데 모바일에서 flex-direction:column 으로 세로 배치될 때 이 속성이
     그대로 남아있으면, 자식 요소가 컨테이너 폭에 맞춰 늘어나지 않고
     "내용물 그대로의 폭"으로 계산되어(fit-content) 텍스트가 줄바꿈되지
     않고 화면 밖으로 넘치는 문제가 생깁니다.
   - 개별 클래스를 일일이 찾는 대신, 모바일 폭에서는 .bd-w1500 컨테이너의
     align-items를 무조건 stretch로 강제해서 근본적으로 막습니다.
     (stretch면 자식이 컨테이너 폭/높이에 맞춰 자동으로 늘어나 정상적으로
     줄바꿈되며, 아직 세로로 안 쌓인 가로배치 상태에서도 stretch는 두 칸의
     높이를 맞춰주는 정도라 안전합니다) */
@media (max-width:900px){
  .bd-w1500{ align-items:stretch !important; }
}
.bd-home, .bd-home *{ box-sizing:border-box; }
.bd-home{
  font-family:'Pretendard', -apple-system, sans-serif;
  color:var(--bd-font);
  line-height:1.6;
}
.bd-home a{ color:inherit; text-decoration:none; }
.bd-home ul{ list-style:none; margin:0; padding:0; }
.bd-home img{ max-width:100%; display:block; }
.bd-marcellus{ font-family:'Marcellus', serif; }
.bd-w1500{ max-width:1500px; width:90%; margin:0 auto; }
.bd-eng-tit{
  display:block; color:var(--bd-main); font-family:'Marcellus', serif;
  font-size:18px; letter-spacing:.9px; margin-bottom:18px;
}
.bd-home h2{ font-family:'Pretendard'; color:var(--bd-font); margin:0; }
.bd-pill{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:9999px; background:rgba(69,100,88,.06);
  color:var(--bd-main); font-size:15px; padding:15px 25px; width:fit-content;
  transition:.3s;
}
.bd-pill:hover{ background:rgba(69,100,88,.14); }

/* 사이트 전체에서 그누보드 기본 박스형 컨테이너/사이드바를 없애고 풀와이드로 표시 */
#container_wr,
#container{
  max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important; float:none !important;
}
#aside{ display:none !important; } /* 로그인정보/설문 사이드바 항상 숨김 */
body.bd-index #wrapper{ padding-top:0; }

/* 그누보드 기본(basic) 테마 어딘가에 #hd, #wrapper, #ft { min-width:1200px } 가 박혀있어서
   모바일에서도 무조건 1200px 폭으로 렌더링된 뒤 화면에 맞춰 축소만 되고 있었습니다.
   (그래서 미디어쿼리를 아무리 고쳐도 실제로는 반영되지 않는 것처럼 보였습니다)
   이 최소폭 자체를 해제해서 진짜 반응형으로 만듭니다. */
#hd, #wrapper, #ft{ min-width:0 !important; }

/* placeholder 사진 블록(실사진 준비 전 임시) */
.bd-ph{ position:relative; overflow:hidden; background:linear-gradient(155deg,#dce8f5,#a9c3d9); width:100%; height:100%; }
.bd-ph.bd-dark{ background:linear-gradient(155deg,#0e6690,#1a2e42); }
.bd-ph::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(120deg, rgba(255,255,255,.08) 0 2px, transparent 2px 30px);
}

/* 이미지가 아직 없을 때, 필요한 파일 경로를 화면에 그대로 안내 (page/inc/helpers.php의 bd_img()와 동일한 디자인) */
.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-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:#2f5f8f; opacity:.85; }

/* ===== 헤더 (원본 사이트 구조 그대로 이식) ===== */
/* global_header에 on클래스는 스크롤이 최상단에 있지 않을 때 추가
   hidden 은 스크롤 위아래 왔다갔다 했을 때 추가
   active는 드롭메뉴(모바일) 열렸다 닫혔다 하는 거임 */
.global_header {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  transition: 0.45s;
  background: transparent;
}
.global_header:hover {
  background: #fff;
}
.global_header.on {
  background: #fff;
}
.global_header.active {
  background: #fff;
}
.global_header.hidden {
  transform: translateY(-100%);
}
.gnb {
  display: flex;
  width: 90%;
  max-width: 1820px;
  margin: 0 auto;
  justify-content: space-between;
}
.gnb .nav {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--bd-font, #222);
  font-family: Pretendard;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 600;
  line-height: 1.3;
  height: 100px;
  align-items: center;
}
.gnb .logo {
  max-width: 170px;
  position: relative;
}
.gnb .logo img {
  width: 100%;
}
.gnb .nav_menu a {
  padding: 10px min(1.3vw, 25px);
  white-space: nowrap;
  color: inherit;
}
.gnb .mnav_wrap {
  display: none;
}
.gnb .nav_menu {
  position: relative;
}
.gnb .nav_menu .drop {
  visibility: hidden;
  opacity: 0;
  transition: 0.3s ease-in;
  position: absolute;
  padding: 10px 5px;
  background: #3aa5d6;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 10px);
  border-radius: 0 30px 30px 30px;
}
.gnb .nav_menu:hover .drop {
  visibility: visible;
  opacity: 1;
}
.gnb .drop_menu {
  width: 100%;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
}
.gnb .drop_menu a{ color:#fff; display:block; padding:8px 22px; white-space:nowrap; }
.gnb .drop_menu a span {
  position: relative;
}
.gnb .drop_menu a span:after {
  content: '';
  display: block;
  width: 0%;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: -5px;
  left: 0;
  transition: width 0.3s ease-in-out;
}
.gnb .drop_menu:hover a span:after {
  width: 100%;
}
.gnb .side_wrap {
  display: flex;
  align-items: center;
  gap: 2vw;
}
.gnb .side_wrap .member {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bd-font, #222);
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
}
.gnb .side_wrap .member a{ color:inherit; }
.gnb .burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 19px;
  position: relative;
  z-index: 9;
  background:none; border:none; cursor:pointer;
}
.gnb .burger > div {
  width: 100%;
  height: 3px;
  background: var(--bd-font, #222);
  transition: 0.45s;
}
.gnb .burger.on > div:nth-child(2) {
  width: 0;
}
.gnb .burger.on > div:nth-child(1) {
  transform: rotate(45deg) translate(4px, 7px);
}
.gnb .burger.on > div:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -7px);
}
@media screen and (max-width: 1440px) {
  .gnb .nav_menu a { padding: 10px 5px; }
  .gnb .logo { max-width: 140px; }
  .gnb .side_wrap .member { gap: 5px; font-size: 14px; }
}
@media screen and (max-width: 1024px) {
  .global_header { height: 60px; }
  .gnb .drop_menu, .gnb .drop { display:none; }
  .gnb .logo { max-width: 110px; }
  .gnb .nav { display: none; }
  .gnb .nav_menu a { padding: 30px 10px; }
  .gnb .burger, .gnb .mnav_wrap { display: flex; }
  .gnb .side_wrap .member { display: none; }
  .mnav_wrap {
    position: absolute; top: 0; right: 0; width: 80%; height: 100vh;
    visibility: hidden; transition: 0.45s;
  }
  .mnav_wrap.on { visibility: visible; }
  .mnav_wrap .inner {
    background: #fff; padding: 60px 20px; box-sizing: border-box; width: 100%;
    transform: translateX(100%); transition: transform 0.45s;
    display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; height:100%;
  }
  .mnav_wrap:after {
    content: ''; position: absolute; top: 0; right: 0; width: 100vw; height: 100vh;
    transition: opacity 0.45s; background: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; z-index: -1;
  }
  .mnav_wrap.on:after { visibility: visible; opacity: 1; }
  .mnav_wrap.on .inner { transform: translateX(0); }
  .mnav_wrap .mnav_menu > a {
    padding: 15px 3vw; box-sizing: border-box; display: flex; justify-content: space-between;
    transition: 0.45s; align-items: center; color:#222;
  }
  .mnav_wrap .mnav_menu > a:after {
    content: ''; display: block; width: 10px; height: 10px; border-right:2px solid #999; border-bottom:2px solid #999;
    transform: rotate(45deg); transition: 0.45s;
  }
  .mnav_wrap .mnav_menu > a.on:after { transform: rotate(225deg); }
  .mnav_wrap .mdrop { display: none; background: #f3f3f3; }
  .mnav_wrap .mdrop_menu a { padding: 15px 3.5vw; display:block; color:#555; }
  .mnav_wrap .member_wrap { display: flex; gap: 10px; font-size: 14px; font-weight: 400; justify-content: flex-end; padding-top: 20px; }
  .gnb .burger > div { height: 2px; }
}

/* 퀵메뉴는 헤더와 겹치지 않게 top 위치 살짝 조정 */
/* 퀵메뉴 */
.bd-quick{ position:fixed; right:16px; top:32%; z-index:500; display:flex; flex-direction:column; gap:10px; }
.bd-quick a{
  width:58px; height:58px; border-radius:50%; background:#fff; box-shadow:0 3px 14px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--bd-main-deep); text-align:center;
  flex-direction:column; gap:2px; font-weight:600;
}
@media (max-width:768px){
  .bd-quick{ right:10px; left:10px; top:auto; bottom:14px; flex-direction:row; justify-content:center; }
  .bd-quick a{ width:auto; flex:1; height:52px; border-radius:14px; flex-direction:row; gap:6px; }
}

/* ===== 히어로 (원본 main_visual 구조 그대로 이식) ===== */
.main_visual {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.bd-hero-bg-missing{
  position:absolute !important; top:100px; left:50%; transform:translateX(-50%);
  z-index:5; width:auto !important; height:auto !important; max-width:90%;
  background:#f4f8f5 !important; border:1.5px dashed #a9c9e0 !important; border-radius:10px;
  padding:14px 20px !important; display:flex !important;
}
.main_visual .main_img_swiper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 0;
  opacity: 0;
  animation: bdImgIn 1s 0.4s ease both;
}
@keyframes bdImgIn { 100% { opacity: 1; } }
.main_visual .main_img_swiper .swiper-slide {
  opacity: 0 !important;
  transition: 0.9s opacity !important;
}
.main_visual .main_img_swiper .swiper-slide.on { opacity: 1 !important; }
.main_visual .main_img_swiper .img_wrap { position: relative; width: fit-content; margin: 0 auto; }
.main_visual .main_img_swiper .img_wrap img { transform: scaleY(0.99); transition: 0.9s transform !important; max-height:70vh; border-radius:50%; }
/* 사진이 없을 때 나오는 경로 안내 placeholder도 실제 사진과 같은 크기(원형 영역)를 유지 */
.main_visual .main_img_swiper .img_wrap .bd-ph{ width:min(70vh,420px); aspect-ratio:1/1; max-height:70vh; border-radius:50%; }
.main_visual .main_img_swiper .eye_cover {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  width: 80%; height: 85%;
  clip-path: ellipse(49% 50% at 50% 50%);
  -webkit-clip-path: ellipse(49% 50% at 50% 50%);
}
.main_visual .main_img_swiper .eye_cover:before,
.main_visual .main_img_swiper .eye_cover:after {
  content: ""; position: absolute; left: 0; width: 100%; height: 50%; opacity: 1;
  transition: 0.9s height, 0.75s opacity;
}
.main_visual .main_img_swiper .eye_cover:before { top: 0; background: linear-gradient(to bottom, #e8f0fa 50%, transparent); transform-origin: center top; }
.main_visual .main_img_swiper .eye_cover:after { bottom: 0; background: linear-gradient(to top, #e8f0fa 50%, transparent); transform-origin: center bottom; }
.main_img_swiper .swiper-slide.on .img_wrap img { transform: scaleY(1); }
.main_visual .main_img_swiper .swiper-slide.on .eye_cover:before,
.main_visual .main_img_swiper .swiper-slide.on .eye_cover:after { height: 0; opacity: 0; }

.main_visual .over_txt {
  max-width: 1500px; margin: 0 auto; width: 90%;
  padding: 220px 0 140px;
  display: flex; position: relative; z-index: 1;
  align-items: center; justify-content: space-between;
  min-height: 100vh; box-sizing: border-box;
}
.main_visual .over_txt > div { width: 50%; }
.main_visual .over_txt .big_txt { opacity: 0; transition: 0.9s opacity; }
.main_visual .over_txt .big_txt.on { opacity: 1; transition-delay: 0.5s; }
.main_visual .over_txt .big_txt p { color: var(--bd-font, #222); font-family: Pretendard; font-size: 22px; font-weight: 400; line-height: 1.6; margin-bottom:10px; }
.main_visual .over_txt .big_txt strong { color: #16283a; font-family: Marcellus; font-size: clamp(40px, 5.5vw, 110px); font-style: normal; font-weight: 400; line-height: 1.1; letter-spacing: -1.4px; display:block; }
.main_visual .over_txt .big_txt strong span { display: block; }
.main_visual .over_txt .big_txt strong span:nth-child(1) { color: var(--bd-main-deep); }
.main_visual .over_txt .big_txt strong span:nth-child(2) { margin-left: 4%; }

.main_visual .over_txt .small_txt { width: fit-content; max-width: 420px; }
.main_visual .over_txt .small_txt_swiper .swiper-wrapper { margin-bottom: 30px; }
.main_visual .over_txt .small_txt .swiper-slide { opacity: 0 !important; transition: 0.9s !important; }
.main_visual .over_txt .small_txt .swiper-slide-active { transition-delay: 0.3s !important; opacity: 1 !important; }
.main_visual .over_txt .swiper-pagination { position: static; }
.main_visual .over_txt .small_txt h2 { color: var(--bd-font, #222); font-family: Pretendard; font-size: clamp(24px,2.6vw,46px); font-weight: 600; line-height: 1.4; margin-bottom: 18px; }
.main_visual .over_txt .small_txt p { color: var(--bd-sub, #555); font-family: Pretendard; font-size: 18px; font-weight: 400; line-height: 170%; }

.main_visual .swiper-pagination-bullet {
  width: auto; height: auto; background: transparent; margin:0 !important;
  color: var(--bd-font, #222); font-family: Pretendard; font-size: 15px; font-weight: 700; line-height: 170%;
  opacity: 0.5; display: flex; align-items: center; gap: 10px;
}
.main_visual .swiper-pagination-bullet-active { color: var(--bd-main-deep); opacity: 1; }
.main_visual .swiper_bar { position: relative; display: inline-flex; box-sizing: border-box; z-index: 20; gap: 20px; align-items:center; }
.main_visual .progress-box { position: relative; z-index: 11; }
.bd-autoplay-progress, .autoplay-progress { position: relative; z-index: 10; width: 80px; height: 2px; background-color: rgba(34, 34, 34, 0.15); }
.main_visual .swiper-pagination-bullet .autoplay-progress { display: none; }
.main_visual .swiper-pagination-bullet-active .autoplay-progress { display: block; }
.autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0; z-index: 10; width: 100%; stroke-width: 4px; stroke: var(--bd-main-deep); fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100; }
.main_visual .swiper-pagination { display: flex; justify-content: space-between; position: static; text-align: left; gap:16px; }
.main_visual .arrow-box { display: flex; align-items: center; gap:14px; }
.main_visual .btn_pause { cursor: pointer; }
.main_visual .swiper-button-next, .main_visual .swiper-button-prev { position: static; margin: 0; width: fit-content; padding-bottom: 3px; height: fit-content; }
.main_visual .swiper-button-next::after, .main_visual .swiper-button-prev::after { font-size: 0; }
.main_visual .swiper-button-next svg path, .main_visual .swiper-button-prev svg path,
.main_visual .btn_pause svg path { fill: var(--bd-font, #222); }

@media screen and (max-width: 1024px) {
  .main_visual .main_img_swiper { position: static; transform: translate(0); }
  .main_visual .over_txt { padding: 110px 0 40px; flex-direction: column; min-height:auto; gap:40px; }
  .main_visual .over_txt > div { width: 100%; }
  .main_visual .over_txt .small_txt { max-width: 100%; }
}
@media screen and (max-width: 768px) {
  .main_visual .over_txt .big_txt p { font-size: 16px; }
  .main_visual .over_txt .big_txt strong { font-size: clamp(28px, 9vw, 60px); letter-spacing: -0.5px; }
  .main_visual .over_txt .big_txt strong span:nth-child(2) { margin-left: 0; }
  .main_visual .over_txt .small_txt h2 { font-size: 26px; }
  .main_visual .over_txt .small_txt p { font-size: 14px; }
  .main_visual .main_img_swiper .img_wrap img { max-height: 40vh; }
  .main_visual .main_img_swiper .img_wrap .bd-ph{ width:min(40vh,280px); max-height:40vh; }
}

/* ===== 인트로 ===== */
.bd-intro{ padding:110px 0; background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)), url('../img/main_2_bg.png') no-repeat center center / cover; overflow:hidden; }
.bd-intro .bd-w1500{ display:flex; align-items:center; justify-content:space-between; gap:60px; }
.bd-intro h2{ font-size:clamp(28px,3.6vw,46px); font-weight:300; line-height:1.35; margin-bottom:24px; }
.bd-intro h2 b{ font-weight:700; }
.bd-intro .bd-txt p{ color:var(--bd-sub); font-size:17px; line-height:1.8; margin:0 0 12px; }
.bd-intro .bd-txt{ margin-bottom:26px; }
.bd-intro .bd-img{ flex:0 0 40%; aspect-ratio:4/5; border-radius:8px; }
@media (max-width:860px){ .bd-intro .bd-w1500{ flex-direction:column; } .bd-intro .bd-w1500 > div:first-child, .bd-intro .bd-img{ width:100%; } }

/* ===== 뉴스 ===== */
.bd-news{ padding:100px 0; background:#fff; overflow:hidden; }
.bd-news-top{ display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid #b10f15; padding-bottom:30px; margin-bottom:50px; flex-wrap:wrap; gap:14px; }
.bd-news-logo{ font-family:'Marcellus',serif; font-size:clamp(20px,2.4vw,30px); color:var(--bd-main-deep); }
.bd-news-top p{ color:var(--bd-sub); font-size:clamp(14px,1.6vw,18px); text-align:right; }
.bd-news-swiper{ padding-bottom:44px; }
.bd-news-item{ display:flex; align-items:center; gap:36px; flex-wrap:nowrap; justify-content:space-between; }
.bd-news-imgwrap{ flex:1 1 0; min-width:0; aspect-ratio:964/475; border-radius:14px; overflow:hidden; border:1px solid #eee; box-shadow:0 0 10px rgba(0,0,0,.06); }
.bd-news-imgwrap .bd-ph{ width:100%; height:100%; }
.bd-news-txt{ flex:0 0 auto; width:min(576px,42%); max-width:576px; padding:0 20px; text-align:center; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; }
.bd-news-txt h5{ font-weight:300; color:#666; margin-bottom:14px; font-size:clamp(13px,1.4vw,16px); }
.bd-news-txt h3{ font-size:clamp(20px,2.6vw,32px); font-weight:700; margin-bottom:22px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bd-news-txt p{ font-size:clamp(14px,1.4vw,16px); color:var(--bd-sub); line-height:1.55; margin-bottom:36px;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.bd-news-link{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:99px;
  background:#b10f15; color:#fff !important; font-size:14px; position:relative; overflow:hidden;
}
.bd-news-link span, .bd-news-link svg{ position:relative; z-index:1; }
.bd-news-link:after{
  content:''; position:absolute; inset:0; background:linear-gradient(270deg,#ed1b23,#d71820,#b10f15); transform:scaleX(0); transform-origin:left;
  transition:transform .35s;
}
.bd-news-link:hover:after{ transform:scaleX(1); }
.bd-news-swiper .swiper-pagination-bullet{ background:#b10f15; opacity:.35; transition:.3s; }
.bd-news-swiper .swiper-pagination-bullet-active{ opacity:1; width:26px; border-radius:99px; background:#b10f15; }
@media (max-width:860px){ .bd-news-item{ flex-direction:column; } .bd-news-imgwrap, .bd-news-txt{ width:100%; } .bd-news-top{ flex-direction:column; text-align:center; } .bd-news-top p{ text-align:center; } }

/* 롤링 텍스트 */
.bd-rolling{ display:flex; padding:34px 0; overflow:hidden; background:#fff; white-space:nowrap; }
.bd-rolling span{ font-family:'Marcellus',serif; font-size:34px; color:#eaf1f7; padding:0 30px; -webkit-text-stroke:1px #d3e3f0; }
.bd-rolling-track{ display:flex; animation:bdRoll 22s linear infinite; }
@keyframes bdRoll{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

/* ===== 의료진 탭 ===== */
.bd-doctor{ padding:110px 0; background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)), url('../img/main_3_bg.png') no-repeat center center / cover; }
.bd-doctor .bd-tit{ text-align:center; margin-bottom:50px; }
.bd-doctor .bd-tit h2{ font-size:clamp(30px,4vw,56px); font-weight:700; }
.bd-have-tab{ display:flex; justify-content:center; gap:5vw; flex-wrap:wrap; }
.bd-doc-imgbox{ width:44%; max-width:480px; }
.bd-doc-img{ display:none; aspect-ratio:4/5; border-radius:4px; overflow:hidden; }
.bd-doc-img.bd-active{ display:block; }
.bd-con{ flex:1; max-width:560px; padding-top:10px; }
.bd-tabnav{ display:flex; gap:20px; margin-bottom:30px; }
.bd-tabnav button{
  background:none; border:none; cursor:pointer; font-family:'Pretendard'; color:#b7b7b7; font-size:15px; font-weight:600;
  padding-bottom:8px; border-bottom:2px solid transparent;
}
.bd-tabnav button.bd-active{ color:var(--bd-main-deep); border-color:var(--bd-main-deep); }
.bd-tabcontent > div{ display:none; }
.bd-tabcontent > div.bd-active{ display:block; }
.bd-tabcontent strong{ display:block; font-size:24px; margin-bottom:22px; }
.bd-tabcontent strong b{ font-size:42px; font-weight:700; margin-right:14px; }
.bd-tabcontent .bd-txt1{ font-size:26px; line-height:1.4; margin-bottom:22px; }
.bd-tabcontent .bd-txt1 b{ font-weight:700; color:var(--bd-main-deep); }
.bd-tabcontent .bd-txt2{ color:var(--bd-sub); font-size:16px; line-height:1.75; margin-bottom:26px; }
@media (max-width:860px){ .bd-have-tab{ flex-direction:column; align-items:center; } .bd-doc-imgbox{ width:100%; max-width:360px; } }

/* ===== 연구성과 ===== */
.bd-achieve{ padding:120px 0; background:linear-gradient(rgba(30,50,40,.82),rgba(30,50,40,.82)), url('../img/main_4_bg.png') no-repeat center center / cover; color:#fff; }
.bd-achieve .bd-w1500{ display:flex; gap:50px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.bd-achieve .bd-txt-l{ flex:0 0 300px; }
.bd-achieve .bd-txt-l strong{ display:block; font-size:32px; margin-bottom:20px; font-weight:700; }
.bd-achieve .bd-txt-l p{ font-size:17px; line-height:1.6; opacity:.9; margin:0; }
.bd-ach-img-swiper{ flex:0 0 340px; max-width:340px; aspect-ratio:1/1; border-radius:8px; overflow:hidden; }
.bd-ach-img-swiper .bd-ph{ position:static; width:100%; height:100%; }
.bd-ach-img-swiper .swiper-pagination{ position:relative; bottom:0; margin-top:14px; display:flex; justify-content:center; gap:8px; }
.bd-ach-img-swiper .swiper-pagination-bullet{ width:8px; height:8px; background:#fff; opacity:.5; }
.bd-ach-img-swiper .swiper-pagination-bullet-active{ opacity:1; background:#bcd9f0; }
.bd-ach-txt-swiper{ flex:1; min-width:280px; max-width:420px; }
.bd-ach-slide{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:26px 28px; min-height:190px; }
.bd-ach-slide span{ color:#bcd9f0; font-size:14px; display:block; margin-bottom:10px; }
.bd-ach-slide p{ font-size:14.5px; line-height:1.7; margin:0 0 12px; }
.bd-ach-slide b{ font-size:13.5px; opacity:.85; font-weight:400; }
@media (max-width:900px){
  .bd-achieve .bd-w1500{ flex-direction:column; }
  .bd-ach-img-swiper{ flex:none; width:100%; max-width:340px; }
  .bd-ach-txt-swiper{ max-width:100%; width:100%; }
}

/* ===== 히스토리 ===== */
.bd-history{ padding:110px 0; background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)), url('../img/main_5_bg.png') no-repeat center center / cover; }
.bd-history .bd-w1500{ display:flex; align-items:center; gap:60px; justify-content:space-between; }
.bd-history h2{ font-size:clamp(28px,4vw,50px); font-weight:300; margin-bottom:24px; }
.bd-history h2 b{ font-weight:700; color:var(--bd-main-deep); }
.bd-history .bd-txt1{ font-size:22px; margin-bottom:20px; }
.bd-history .bd-txt1 b{ font-weight:700; }
.bd-history .bd-txt2 p{ color:var(--bd-sub); font-size:16px; line-height:1.8; margin:0 0 10px; }
.bd-history .bd-img{ flex:0 0 38%; aspect-ratio:4/5; border-radius:8px; }
@media (max-width:860px){ .bd-history .bd-w1500{ flex-direction:column-reverse; } .bd-history .bd-img, .bd-history .bd-w1500 > div:first-child{ width:100%; } }

/* ===== 진료과목 ===== */
.bd-services{ padding:80px 0 150px; overflow:hidden; }
.bd-services .bd-tit{ text-align:center; margin-bottom:50px; }
.bd-services .bd-tit h2{ font-size:clamp(30px,4vw,56px); font-weight:700; margin-bottom:16px; }
.bd-services .bd-tit p{ color:var(--bd-sub); font-size:17px; margin:0; }
.bd-svc-swiper{ overflow:visible !important; }
.bd-svc-slide{ width:min(572px,78vw); margin-right:min(100px,6vw); }
.bd-svc-slide .bd-ph{ aspect-ratio:1/1; border-radius:6px; }
.bd-svc-photo{ aspect-ratio:1/1; border-radius:6px; overflow:hidden; }
.bd-svc-photo img{ width:100%; height:100%; object-fit:cover; }
.bd-svc-card{
  display:block; text-decoration:none; color:inherit;
  background:#fff; padding:34px 30px; max-width:88%; margin:-90px auto 0; position:relative; z-index:1;
  border-radius:8px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.08));
}
.bd-svc-card strong{ display:block; font-size:26px; margin-bottom:6px; }
.bd-svc-card .bd-eng{ color:var(--bd-main); font-size:18px; margin-bottom:14px; display:block; }
.bd-svc-card p{ color:var(--bd-sub); font-size:14.5px; line-height:1.7; margin:0; }
.bd-svc-card svg{ position:absolute; top:0; right:0; }

/* ===== 시설안내 ===== */
.bd-facility-pin{ position:relative; height:400vh; }
.bd-facility{ display:flex; min-height:100vh; height:100vh; position:sticky; top:0; }
.bd-facility .bd-big{ flex:1; position:relative; }
.bd-facility .bd-big .bd-ph{ position:absolute; inset:0; opacity:0; transition:1s; }
.bd-facility .bd-big .bd-ph.bd-on{ opacity:1; }
.bd-facility .bd-right{ flex:1; max-width:640px; margin-left:auto; display:flex; align-items:center; padding:5vh 5vw; overflow:hidden; height:100vh; box-sizing:border-box; }
.bd-facility .bd-right > div{ max-height:90vh; overflow:hidden; }
.bd-facility .bd-overview{ display:flex; align-items:center; gap:14px; margin-bottom:min(24px,2vh); font-family:'Marcellus'; color:var(--bd-main); letter-spacing:2px; }
.bd-facility .bd-overview .bd-num{ font-family:'EB Garamond',serif; font-size:clamp(24px,3vh,40px); font-weight:700; color:var(--bd-main); }
.bd-fac-slide{ display:none; }
.bd-fac-slide.bd-on{ display:block; }
.bd-fac-slide img.bd-fac-photo{ display:block; height:min(38vh,360px); width:auto; max-width:100%; aspect-ratio:490/600; object-fit:cover; border-radius:8px; margin:0 0 min(20px,2vh); }
.bd-fac-slide .bd-tag{ display:block; color:var(--bd-main); font-size:clamp(14px,1.6vh,18px); margin-bottom:6px; }
.bd-fac-slide strong{ display:block; font-size:clamp(22px,3.4vh,32px); margin-bottom:min(14px,1.6vh); line-height:1.2; }
.bd-fac-slide p{ color:var(--bd-sub); font-size:clamp(13px,1.6vh,15px); line-height:1.6; margin:0; }
.bd-fac-pag{ display:flex; gap:6px; margin-bottom:min(20px,2vh); }
@media (max-width:900px){ .bd-facility .bd-right{ height:auto; } .bd-facility .bd-right > div{ max-height:none; } .bd-fac-slide img.bd-fac-photo{ height:auto; aspect-ratio:490/600; width:100%; } }
.bd-fac-pag div{ width:8px; height:8px; border-radius:50%; background:var(--bd-main); cursor:pointer; opacity:.4; }
.bd-fac-pag div.bd-on{ opacity:1; box-shadow:0 0 0 3px rgba(61,125,191,.25); }
@media (max-width:900px){ .bd-facility-pin{ height:auto; } .bd-facility{ position:static; height:auto; flex-direction:column; } .bd-facility .bd-big{ height:40vh; } .bd-facility .bd-right{ max-width:100%; } }

/* ===== 진료시스템 ===== */
.bd-system{ padding:150px 0; background:linear-gradient(rgba(20,35,28,.88),rgba(20,35,28,.88)), url('../img/main_8_bg.png') no-repeat left center / cover; color:#fff; overflow:hidden; }
.bd-system .bd-w1500{ display:flex; align-items:flex-start; gap:40px; flex-wrap:wrap; }
.bd-system .bd-txt-wrap{ flex:0 1 380px; max-width:380px; min-width:260px; position:sticky; top:100px; padding-right:10px; }
.bd-system .bd-txt-wrap span{ color:#bcd9f0; }
.bd-system .bd-txt-wrap h2{ color:#fff; font-size:clamp(28px,3.6vw,50px); margin:16px 0 20px; font-weight:700; }
.bd-system .bd-txt-wrap b{ display:block; color:#fff; font-family:'Noto Serif KR'; font-size:18px; font-weight:400; line-height:1.6; margin-bottom:16px; }

.bd-sys-wrap{ display:flex; gap:min(50px,3vw); flex:1; min-width:0; max-width:900px; }
.bd-sys-col{ display:flex; flex-direction:column; gap:50px; flex:1; }
.bd-sys-col-1{ margin-top:140px; }
.bd-sys-box{
  background:linear-gradient(180deg,#f4f5f7 0%,#e0ebf5 100%);
  padding:40px min(28px,1.5vw); border-radius:8px; overflow:hidden;
  aspect-ratio:390/500; display:flex; flex-direction:column; justify-content:space-between;
  filter:drop-shadow(10px 10px 40px rgba(20,40,30,.4));
}
.bd-sys-top .bd-sys-num{ color:var(--bd-main-deep); font-family:'Marcellus'; font-size:16px; display:block; margin-bottom:6px; letter-spacing:.5px; }
.bd-sys-top strong{ color:var(--bd-main-deep); font-family:'Pretendard'; font-size:24px; margin-bottom:20px; font-weight:700; line-height:1.3; display:block; }
.bd-sys-top p{ color:#303030; font-size:16px; font-weight:400; line-height:1.5; }
.bd-sys-top p .bd-sys-small{ color:#303030; font-size:13.5px; }
.bd-sys-box img{ width:fit-content; display:block; margin-left:auto; max-width:120px; opacity:.95; }
.bd-sys-box .bd-ph{ width:120px; aspect-ratio:1/1; margin-left:auto; }

@media (max-width:1024px){
  .bd-system .bd-txt-wrap{ position:static; max-width:100%; flex:none; }
  .bd-system .bd-w1500{ flex-direction:column; gap:30px; }
  .bd-sys-wrap{ max-width:100%; flex-direction:column; }
  .bd-sys-col-1{ margin-top:0; }
  .bd-sys-col{ flex-direction:row; gap:16px; flex-wrap:wrap; }
  .bd-sys-col-1, .bd-sys-col-2{ transform:none !important; }
  .bd-sys-box{ width:calc((100% - 16px)/2); min-width:220px; flex:1; }
}
@media (max-width:600px){
  .bd-sys-col{ flex-direction:column; }
  .bd-sys-box{ width:100%; aspect-ratio:unset; padding:24px; gap:14px; }
}

/* ===== 수술후기 ===== */
.bd-reviews{ padding:130px 0; background:url('../img/main_9_bg.png') no-repeat center center / cover; overflow:hidden; }
.bd-reviews .bd-tit{ display:flex; justify-content:space-between; align-items:center; margin-bottom:60px; flex-wrap:wrap; gap:20px; }
.bd-reviews .bd-tit h2{ font-size:clamp(28px,3.6vw,50px); font-weight:700; }
.bd-reviews .bd-tit p{ color:var(--bd-sub); font-size:16px; margin:0; flex:1; min-width:220px; }
.bd-reviews .bd-tit .bd-pill{ margin-left:auto; }
.bd-rev-swiper{ overflow:visible !important; padding-bottom:50px !important; cursor:none; }
.bd-rev-slide{
  width:min(479.6px,80vw); margin-right:30px; border-radius:8px; overflow:hidden;
  filter:drop-shadow(0 2px 20px rgba(0,0,0,.12)); background:#fff;
  transform:scale(.85); transition:transform .45s; opacity:.6;
}
.bd-rev-slide.swiper-slide-active{ transform:scale(1); opacity:1; }
.bd-rev-imgwrap{ position:relative; aspect-ratio:650/390; overflow:hidden; }
.bd-rev-imgwrap .bd-ph, .bd-rev-imgwrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bd-rev-imgwrap.bd-blurred .bd-ph, .bd-rev-imgwrap.bd-blurred img{ filter:blur(9px); }
.bd-rev-blur{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(20,30,24,.35); }
.bd-rev-blur p{ color:#fff; font-size:15px; margin:0; }
.bd-rev-blur a{ background:var(--bd-main); color:#fff; font-size:14px; padding:9px 18px; border-radius:4px; }
.bd-rev-txt{ display:block; padding:18px 22px; color:inherit; text-decoration:none; }
.bd-rev-txt .bd-tag{ display:inline-block; border:1px solid var(--bd-main); color:var(--bd-main); font-size:13px; padding:3px 12px; border-radius:99px; margin-bottom:8px; }
.bd-rev-txt b{ display:block; font-size:17px; margin-bottom:6px; }
.bd-rev-txt span{ color:#999; font-size:13.5px; }
.bd-rev-swiper .swiper-pagination{ bottom:0; }
.bd-rev-swiper .swiper-pagination-bullet{ background:var(--bd-main); opacity:.4; }
.bd-rev-swiper .swiper-pagination-bullet-active{ opacity:1; background:var(--bd-main-deep); }
@media (max-width:768px){ .bd-rev-slide{ transform:scale(1); opacity:1; } }

/* ===== 공지/이벤트/블로그 탭 ===== */
.bd-notice{ padding:130px 0; }
.bd-notice .bd-top{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:20px; }
.bd-notice h2{ font-size:clamp(28px,3.6vw,50px); font-weight:700; margin-bottom:14px; }
.bd-notice .bd-tit p{ color:var(--bd-sub); font-size:16px; margin:0; }
.bd-notice .bd-nav{ display:flex; gap:22px; }
.bd-notice .bd-nav a{ color:#aaa; font-size:17px; font-weight:500; line-height:1.7; position:relative; }
.bd-notice .bd-nav a.bd-active{ color:var(--bd-main); }
.bd-notice .bd-nav a::after{ content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--bd-main); transition:width .3s; }
.bd-notice .bd-nav a.bd-active::after{ width:100%; }

.bd-notice-wrap{ position:relative; }
.bd-notice-panel{ display:none; }
.bd-notice-panel.bd-active{ display:block; }
.bd-notice-swiper{ overflow:hidden; }
.bd-notice-slide{ width:250px; margin-right:40px; }
.bd-notice-slide a{ display:block; color:inherit; }
.bd-notice-slide .bd-ph{ aspect-ratio:1/1; border-radius:8px; margin-bottom:18px; }
.bd-notice-thumb{ aspect-ratio:1/1; border-radius:8px; margin-bottom:18px; overflow:hidden; }
.bd-notice-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.bd-notice-txt b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:15.5px; font-weight:500; margin-bottom:10px; line-height:1.4; }
.bd-notice-txt p{ color:#999; font-size:13px; margin:0; }
.bd-board-more{ width:100%; aspect-ratio:1/1; display:flex; justify-content:center; align-items:center; }
.bd-board-more a{
  width:100%; height:100%; background:#ecf5fa; border-radius:50%;
  color:var(--bd-main); font-size:clamp(14px,1.4vw,17px); font-weight:600;
  display:flex; justify-content:center; align-items:center; gap:8px; text-align:center; padding:15px;
}
.bd-board-more a svg{ width:1em; height:1em; flex-shrink:0; }
.bd-no-data{ aspect-ratio:25/6; background:#f8f8f8; border-radius:15px; display:flex; align-items:center; justify-content:center; color:#a9a9a9; }
@media (max-width:500px){ .bd-board-more a{ flex-direction:column; gap:16px; } }

/* ===== 오시는 길 ===== */
.bd-visit{ background:var(--bd-bg-gray); padding:0 0 100px 0; }
.bd-visit .bd-w1500{ display:flex; border-radius:8px; overflow:hidden; }
.bd-visit .bd-img{ width:55%; position:relative; display:flex; flex-direction:column; }
.bd-visit .bd-img img, .bd-visit .bd-img .bd-ph{ width:100%; height:50%; object-fit:cover; display:block; }
.bd-visit-kakao{ position:relative; width:100%; height:50%; background:#f4f4f4; }
.bd-visit-kakao .root_daum_roughmap{ width:100% !important; height:100% !important; }
.bd-visit-kakao .root_daum_roughmap_landing{ position:absolute !important; inset:0 !important; }
@media (max-width:900px){ .bd-visit .bd-img img, .bd-visit .bd-img .bd-ph, .bd-visit-kakao{ height:220px; } }
.bd-visit .bd-txt-wrap{ background:var(--bd-main); padding:80px 4vw; flex:1; color:#fff; }
.bd-visit .bd-txt-wrap h2{ color:#fff; font-size:32px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.25); margin-bottom:34px; }
.bd-visit .bd-info{ display:flex; flex-direction:column; gap:22px; margin-bottom:40px; }
.bd-visit .bd-info li{ display:flex; gap:16px; }
.bd-visit .bd-info li b{ min-width:72px; font-size:16px; font-weight:700; }
.bd-visit .bd-info li p{ font-size:15px; opacity:.95; margin:0; }
.bd-visit .bd-time{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.bd-visit .bd-time li{ display:flex; gap:14px; }
.bd-visit .bd-time li span{ min-width:78px; font-size:14px; opacity:.85; }
.bd-visit .bd-time li p{ font-size:14px; }
.bd-visit .bd-small{ font-size:12.5px; opacity:.8; display:block; margin-top:4px; }
.bd-visit .bd-sns{ display:flex; gap:18px; }
.bd-visit .bd-sns a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
@media (max-width:900px){ .bd-visit .bd-w1500{ flex-direction:column; } .bd-visit .bd-img{ width:100%; height:280px; } .bd-visit .bd-txt-wrap{ width:100%; } }

/* ===== 푸터 (원본 사이트 .global_footer 구조 그대로 이식) ===== */
body.bd-index hr{ border:0 !important; margin:0 !important; height:0 !important; } /* head/tail 사이 구분선 제거 */
body.bd-index #ft{ background:none !important; padding:0 !important; }

.global_footer {
  background: #333;
  padding: 60px 0;
}
.global_footer .w1500 {
  max-width:1500px; width:90%; margin:0 auto;
  display: flex;
  gap: 3.6vw;
}
.global_footer .f_logo {
  width: 200px;
}
.global_footer .f_logo img{ max-width:100%; filter:brightness(0) invert(1); }
.global_footer .link_wrap {
  color: #fff;
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  row-gap: 10px;
  list-style:none; padding:0;
}
.global_footer .link_wrap a{ color:#fff; }
.global_footer .about_wrap {
  color: #fff;
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  list-style:none; padding:0;
  flex-wrap: wrap;
}
.global_footer .about_wrap li {
  display: flex;
  gap: 10px;
  align-items: center;
}
.global_footer .about_wrap li:not(:last-child):after {
  content: '';
  width: 1px;
  height: 12px;
  background: #fff;
}
.global_footer p.copyright {
  color: rgba(255, 255, 255, 0.5);
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  margin:0;
}
@media screen and (max-width: 1024px) {
  .global_footer .w1500 {
    gap: 20px;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .global_footer .f_logo {
    max-width: 120px;
  }
  .global_footer {
    padding: 60px 0 120px;
  }
}

/* 상단으로 버튼 */
body.bd-index #top_btn{
  position:fixed; right:16px; bottom:14px; z-index:600;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:var(--bd-main-deep); color:#fff; box-shadow:0 3px 10px rgba(0,0,0,.2);
}
@media (max-width:768px){
  body.bd-index #top_btn{ bottom:74px; }
}

/* ===== 서브페이지 상단 배너 (게시판/콘텐츠 페이지 전역 적용) ===== */
.bd-subvisual{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--bd-bg-mint,#eef4fa) 0%, #fff 100%);
  background-size:cover; background-position:center;
  border-bottom:1px solid #e8f0f7;
  padding:150px 0 0;
}
.bd-subvisual.bd-has-photo{
  border-bottom:none; min-height:680px; display:flex; flex-direction:column; justify-content:flex-end;
}
.bd-subvisual.bd-has-photo:before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,20,15,.15) 0%, rgba(10,20,15,.55) 75%, rgba(10,20,15,.7) 100%);
}
.bd-subvisual-inner{
  position:relative; z-index:1;
  max-width:1500px; width:90%; margin:0 auto; padding-bottom:60px; text-align:center;
}
.bd-subvisual-eyebrow{
  display:inline-block; font-family:'Pretendard'; font-weight:600; color:var(--bd-main,#188FCA);
  font-size:15px; letter-spacing:0; margin-bottom:14px;
}
.bd-has-photo .bd-subvisual-eyebrow{ color:#d3e3f0; }
.bd-subvisual-inner h1{
  font-family:'Pretendard'; font-size:clamp(30px,4.4vw,52px); font-weight:800;
  color:var(--bd-font,#222); margin:0 0 34px;
}
.bd-has-photo .bd-subvisual-inner h1{ color:#fff; }
.bd-subvisual-desc{
  font-size:16px; color:var(--bd-sub,#666); margin:0 0 34px;
}
.bd-has-photo .bd-subvisual-desc{ color:rgba(255,255,255,.85); }
.bd-subvisual-tabs{
  display:inline-flex; flex-wrap:wrap; justify-content:center; gap:6px;
  background:#fff; border:1px solid #e5e5e5; border-radius:99px; padding:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.05);
}
.bd-has-photo .bd-subvisual-tabs{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.25); backdrop-filter:blur(6px); }
.bd-subvisual-tabs a{
  padding:11px 22px; border-radius:99px; font-size:15px; font-weight:600; color:#777;
  transition:.25s;
}
.bd-has-photo .bd-subvisual-tabs a{ color:#fff; }
.bd-subvisual-tabs a:hover{ color:var(--bd-main-deep,#0e6690); }
.bd-has-photo .bd-subvisual-tabs a:hover{ color:#fff; opacity:.8; }
.bd-subvisual-tabs a.bd-on{ background:var(--bd-main,#188FCA); color:#fff; }
.bd-subvisual-crumb{
  background:#fff; border-bottom:1px solid #eee;
  max-width:1500px; width:90%; margin:0 auto; padding:16px 0;
  text-align:left; color:#555; font-size:13.5px; display:flex; align-items:center; gap:8px;
}
.bd-subvisual-crumb.bd-crumb-plain{ padding-top:126px; }
@media (max-width:1024px){ .bd-subvisual-crumb.bd-crumb-plain{ padding-top:80px; } }
.bd-subvisual-crumb a{ color:#555; display:inline-flex; align-items:center; }
.bd-subvisual-crumb a:hover{ color:var(--bd-main-deep,#0e6690); }

/* page/ 폴더 개별 서브페이지들의 콘텐츠 CSS는 page/css/page.css 에서 별도 관리합니다. */

/* 배너가 있는 페이지에서는 헤더를 처음부터 흰 배경으로 고정 (사진 위에 겹치지 않도록) */
body:has(.bd-subvisual) .global_header{ background:#fff; }
body:has(.bd-subvisual) .gnb .nav,
body:has(.bd-subvisual) .gnb .side_wrap .member{ color:var(--bd-font,#222); }

@media (max-width:768px){
  .bd-subvisual{ padding-top:96px; }
  .bd-subvisual.bd-has-photo{ min-height:360px; }
  .bd-subvisual-inner{ padding-bottom:36px; }
  .bd-subvisual-tabs{ width:100%; overflow-x:auto; justify-content:flex-start; border-radius:14px; }
  .bd-subvisual-tabs a{ white-space:nowrap; }
}

/* 서브페이지 본문(게시판 목록/상세 등) 여백 - 배너/브레드크럼 바로 밑에 콘텐츠가 붙지 않도록 */
.bd-sub-content{
  max-width:1500px; width:90%; margin:0 auto; padding:50px 0 100px;
}

/* ===== 공통 유틸 ===== */
.bd-reveal{ opacity:0; transform:translateY(36px); transition:opacity 1s cubic-bezier(.25,.1,.25,1), transform 1s cubic-bezier(.25,.1,.25,1); }
.bd-reveal.bd-in{ opacity:1; transform:translateY(0); }
.bd-cursor{
  position:fixed; z-index:9999; width:110px; height:110px; border-radius:999px; overflow:hidden;
  background:url('../img/main_6_cursor.png') center center / cover no-repeat; pointer-events:none;
  transform:translate(-50%,-50%) scale(0); transition:.3s transform ease;
}
.bd-cursor.bd-on{ transform:translate(-50%,-50%) scale(1); }
@media (max-width:1024px){ .bd-cursor{ display:none; } }

/* ============================================================
   [패치] 오시는 길(.bd-visit) 모바일 레이아웃 수정
   - custom.css 맨 아래에 그대로 이어 붙여주세요.
   - 모바일에서는 카카오맵 임베드(위젯) 대신 "지도에서 보기" 버튼을 보여줍니다.
     (카카오맵 지도 퍼가기 위젯은 고정 크기(640x360)로 초기화되어, 반응형으로
     늘리거나 줄이면 타일이 깨지는 문제가 있어 모바일에서는 외부 링크로 대체합니다.)
   ============================================================ */

/* PC: 지도보기 버튼은 숨김 (기존 임베드 지도 그대로 사용) */
.bd-visit-map-btn{ display:none; }

@media (max-width: 900px) {
  .bd-visit .bd-w1500 {
    display: flex !important;
    flex-direction: column !important;
  }
  .bd-visit .bd-img {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }
  .bd-visit .bd-img img,
  .bd-visit .bd-img .bd-ph {
    position: static !important;
    width: 100% !important;
    height: 640px !important;
    flex: none !important;
  }
  /* 모바일에서는 카카오맵 임베드 자체를 숨김 (타일 깨짐 방지) */
  .bd-visit-kakao {
    display: none !important;
  }
  /* 대신 지도에서 보기 버튼을 보여줌 */
  .bd-visit-map-btn{
    display: flex !important;
    align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 16px;
    background: var(--bd-main, #188FCA); color: #fff;
    font-size: 15px; font-weight: 700;
    text-decoration: none;
  }
  .bd-visit .bd-txt-wrap {
    width: 100% !important;
  }
}

/* ============================================================
   [패치] 서브페이지 상단 배너 탭(.bd-subvisual-tabs) 모바일 처리
   - custom.css 맨 아래에 이어 붙여주세요.
   - PC: 기존 알약형 탭 그대로
   - 모바일(768px 이하): 알약형 탭 대신 <select> 드롭다운으로 전환
   ============================================================ */

/* 셀렉트박스 래퍼: 기본은 숨김(PC용) */
.bd-subvisual-select-wrap{ display:none; }

@media (max-width: 768px) {
  /* 기존 알약형 탭은 모바일에서 숨김 */
  .bd-subvisual-tabs{ display:none !important; }

  /* 대신 셀렉트박스를 보여줌 */
  .bd-subvisual-select-wrap{
    display:block;
    width:100%;
    max-width:360px;
    margin:0 auto;
  }
  .bd-subvisual-select{
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23188FCA" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 16px center;
    background-size:16px;
    border:1px solid #e5e5e5;
    border-radius:99px;
    padding:13px 42px 13px 20px;
    font-size:15px; font-weight:600; color:#333;
    box-shadow:0 4px 16px rgba(0,0,0,.05);
  }
  .bd-has-photo .bd-subvisual-select{
    background-color:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.3);
    color:#fff;
    backdrop-filter:blur(6px);
  }
  .bd-has-photo .bd-subvisual-select option{ color:#222; } /* 옵션 목록은 항상 어두운 글씨(브라우저 기본 팝업) */
}

/* ============================================================
   [패치] 서브페이지 상단 배너 탭 - 모바일 커스텀 드롭다운
   - custom.css 맨 아래에 이어 붙여주세요.
   - 이전에 드린 select 패치(.bd-subvisual-select-wrap 관련)를 쓰고 계셨다면
     그 부분은 지우고 이걸로 교체해주세요. (head.php도 커스텀 드롭다운 마크업으로 교체됨)
   - PC: 기존 알약형 탭 그대로
   - 모바일(768px 이하): 알약형 탭 대신 커스텀 드롭다운(버튼+리스트)으로 전환
     → 네이티브 select가 아니라 직접 만든 리스트라 펼친 상태도 완전히 스타일링됩니다.
   ============================================================ */

.bd-subvisual-dropdown{ display:none; }

@media (max-width: 768px) {
  .bd-subvisual-tabs{ display:none !important; }

  .bd-subvisual-dropdown{
    display:block; position:relative;
    width:100%; max-width:360px; margin:0 auto;
  }
  .bd-subvisual-dd-btn{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:#fff; border:1px solid #e5e5e5; border-radius:99px;
    padding:13px 20px; font-size:15px; font-weight:600; color:#333;
    box-shadow:0 4px 16px rgba(0,0,0,.05); cursor:pointer;
  }
  .bd-subvisual-dd-btn svg{ transition:transform .2s; flex-shrink:0; color:var(--bd-main,#188FCA); }
  .bd-subvisual-dropdown.bd-open .bd-subvisual-dd-btn svg{ transform:rotate(180deg); }

  .bd-has-photo .bd-subvisual-dd-btn{
    background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3);
    color:#fff; backdrop-filter:blur(6px);
  }
  .bd-has-photo .bd-subvisual-dd-btn svg{ color:#fff; }

  .bd-subvisual-dd-list{
    display:none; z-index:9999; /* fixed 위치는 JS가 top/left/width를 직접 계산해서 넣어줍니다 */
    background:#fff; border:1px solid #eee; border-radius:16px; overflow:hidden;
    box-shadow:0 12px 32px rgba(0,0,0,.12); list-style:none; margin:0; padding:6px;
    max-height:60vh; overflow-y:auto;
  }
  .bd-subvisual-dropdown.bd-open .bd-subvisual-dd-list{ display:block; }
  .bd-subvisual-dd-list a{
    display:block; padding:12px 16px; border-radius:10px;
    font-size:14.5px; font-weight:500; color:#444;
  }
  .bd-subvisual-dd-list a:active,
  .bd-subvisual-dd-list a:hover{ background:#f0f5fa; color:var(--bd-main-deep,#0e6690); }
  .bd-subvisual-dd-list a.bd-on{ background:var(--bd-main,#188FCA); color:#fff; font-weight:700; }
}