/*
 * 메인 화면.
 *
 * 큰 슬라이드의 값은 원본의 페이지 전용 CSS 에서 옮겼다
 * (reference/assets/.../build/page_inc/pc_71195.css). 원본은 CMS 가 만든
 * 번호 클래스(slide_wide__862395__)를 쓰는데 그 번호는 CMS 내부 식별자일
 * 뿐이라 옮길 이유가 없어 .ez-main-slide 로 바꿨다.
 */

/* 서브페이지용 공통 규칙을 메인에서만 되돌린다.
   layout.css 의 규칙이 '#container .contents_wrap' 이라 아이디를 포함한다 —
   같은 모양으로 써야 이긴다(클래스만으로는 특이도가 모자란다). */
#container .contents_wrap.ez-main-wrap { max-width: none; min-height: 0; }
#container .contents_wrap.ez-main-wrap .contents { padding: 0; }
/* 첫 배너 줄은 화면 전체 폭을 쓴다. 나머지 줄은 원본과 같이 1280 으로 묶인다. */
.ez-main-wrap .row.ez-main-full > div { max-width: none !important; }

.ez-main-slide { position: relative; overflow: hidden; }
.ez-main-slide .ez-main-slide-track { position: relative; }

/* 슬라이드는 한 장만 보인다. 원본 owl.carousel 은 가로로 밀지만, 정지 화면의
   모습은 같고 우리 쪽이 훨씬 단순하다. */
.ez-main-slide .item { display: none; position: relative; }
.ez-main-slide .item.is-active { display: block; }

.ez-main-slide .item img,
.ez-main-slide .item video {
    display: block; width: 100%; height: auto; vertical-align: top;
}
.ez-main-slide .item video { object-fit: cover; }

/* 영상 배너는 원본 영상 비율(16:9) 그대로 보여 준다(병원 요청, 2026-10-01).
   배너 자리는 사진 기준 1920×950 이지만, 16:9 영상을 거기에 맞추려면 위아래를
   12% 잘라야 해서 "원본보다 확대돼 보인다" 는 말이 나왔다. 영상은 자르지
   않고 자리를 영상에 맞춘다. 사진 배너(위 규칙)는 그대로 950 이다.
   휴대폰은 css/main-mobile-*.css 가 따로 정한다. */
.ez-main-slide .item video.main_img {
    aspect-ratio: 16 / 9;
    height: auto;
}

.ez-main-slide .item .caption_wrap {
    box-sizing: border-box; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1; width: 100%;
}
.ez-main-slide .item .caption { display: table; width: 100%; height: 100%; }
.ez-main-slide .item .caption_inner {
    display: table-cell; padding: 25px 25px 80px; text-align: center; vertical-align: middle;
}
.ez-main-slide .item .caption_inner .subject {
    display: block; font-size: 30px; line-height: 35px; font-weight: bold; color: #ffffff;
    letter-spacing: -1px; word-break: keep-all;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}
.ez-main-slide .item .caption_inner .exp_text {
    display: block; margin-top: 10px; font-size: 16px; line-height: 22px; color: #ffffff;
    letter-spacing: -.03em; word-break: keep-all;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}

/* 슬라이드 위치 표시 점. 원본은 왼쪽 위에서 세로로 늘어놓는다. */
.ez-main-dots {
    position: absolute; top: 15px; left: 15px; z-index: 2;
    width: 6px; font-size: 0; box-sizing: border-box;
}
.ez-main-dot {
    display: block; margin: 10px 0 0; padding: 0; border: 0; background: none;
    cursor: pointer; line-height: 0;
}
.ez-main-dot:first-child { margin-top: 0; }
.ez-main-dot span { display: block; width: 6px; height: 6px; background: #ffffff; border-radius: 30px; }
.ez-main-dot.is-active span,
.ez-main-dot:hover span { background: #d2de32; }
.site-pain .ez-main-dot.is-active span,
.site-pain .ez-main-dot:hover span { background: #006fb9; }

@media all and (min-width: 1024px) {
    /* PC 에서는 영상이 화면을 다 차지하지 않게 높이를 묶는다(병원 요청, 2026-10-01).
       16:9 영상을 1920 폭으로 그대로 두면 1080 이라 모니터를 꽉 채워서, 바로 밑의
       메뉴 줄(병원안내 · 사경클리닉 · 재활치료 · 공지사항)이 스크롤해야 보였다.
       화면 높이에서 그 줄의 높이(283px, 1920 폭에서 실측)를 뺀 만큼으로 묶으면
       아이콘 줄이 첫 화면 맨 아래에 딱 닿고 밑에 빈 공간이 남지 않는다
       (2026-10-01 추가 요청). 처음엔 62vh 로 했더니 밑이 비었다.
       대신 영상 위아래가 조금 잘린다(가운데 기준) — "풀스크린 말고 메뉴가
       보이게" 가 우선이라는 결정이다. 폭이 좁아 아이콘이 두 줄로 접히는
       화면에서는 줄이 283px 보다 커져 살짝 넘칠 수 있다. */
    .ez-main-slide .item video.main_img {
        max-height: calc(100vh - 283px);
        object-fit: cover;
        object-position: center;
    }

    /* PC 는 안쪽 여백이 사방 145px 이고 설명 위 여백이 20px 이다(원본 실측).
       모바일의 25/25/80 과 값이 아예 달라 media 안에서 다시 준다. */
    .ez-main-slide .item .caption_inner { padding: 145px; }
    .ez-main-slide .item .caption_inner .subject { font-size: 70px; line-height: 87px; }
    .ez-main-slide .item .caption_inner .exp_text { margin-top: 20px; font-size: 22px; line-height: 26px; }
    .ez-main-dots { top: 50%; left: 25px; transform: translateY(-50%); }
    .ez-main-dot { margin-top: 12px; }
}

/*
 * 가로 슬라이드(내부시설 등).
 *
 * 원본은 owl.carousel 이 .owl-stage 를 만들어 항목을 가로로 늘어놓는다.
 * 우리는 같은 마크업(.owl-carousel > .item)에 flex 를 씌워 같은 배치를 만든다 —
 * 플러그인을 들여오지 않고도 정지 화면이 같아진다.
 *
 * 항목 폭과 간격은 원본 실측값이다(455px, 오른쪽 20px).
 * 폭은 화면에 따라 달라지므로 --ez-slide-w 로 계산한다.
 */
/* 넘치는 부분은 칸이 늘어선 줄(.ez-hslide-stage)에서만 자른다. 슬라이더
   전체에 걸면 그 아래 절대위치로 놓이는 점까지 잘려 안 보인다. */
.ez-hslide { overflow: visible; }
.ez-hslide-stage { overflow: hidden; }
.ez-hslide-track {
    display: flex; align-items: flex-start;
    transition: transform .4s ease;
    will-change: transform;
}
.ez-hslide-cell {
    flex: 0 0 var(--ez-slide-w, 455px);
    width: var(--ez-slide-w, 455px);
    /* 칸 사이 간격도 화면에 따라 다르다(PC 20px, 모바일 5px) — 원본 owl 의
       margin 값이다. 20px 로 못 박아 두었더니 모바일에서 계산한 자리와 실제
       자리가 칸마다 15px 씩 어긋나, 가운데 사진이 오른쪽으로 150px 밀렸다.
       값은 js/main-slide.js 가 --ez-slide-gap 으로 넣어 준다. */
    margin-right: var(--ez-slide-gap, 20px);
}
/* 항목에 width 를 주지 않는다. 원본의 가운데 칸 규칙이 좌우 음수 여백
   (-25%)으로 항목을 넓히는데, width 를 못 박으면 그 확장이 막힌다
   (실측: 683 이어야 할 폭이 455 로 묶였다). */
.ez-hslide-cell img { display: block; width: 100%; height: auto; }

/* 좌우 이동 단추. 원본은 슬라이드 위 가운데에 둔다. */
.ez-hslide-nav {
    position: absolute; top: 50%; z-index: 2;
    width: 24px; height: 24px; margin-top: -12px; padding: 0;
    border: 0; background: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
.ez-hslide-nav.is-prev { left: 10px; }
.ez-hslide-nav.is-next { right: 10px; }

/* 원본의 .owl-nav 자리 — 단추는 그 안에서 자리를 안 먹지만 칸 자체가
   흐름에서 22px 을 차지한다. 없으면 이 구간이 22px 낮다. */
.ez-hslide-navbar { height: 22px; }

/* 슬라이드 위치 점.
 *
 * 자리(위치·높이·가운데 정렬)는 원본 화면 CSS 의 .owl-dots 규칙이 잡는다.
 * 여기서는 점 알맹이만 그린다 — 그 부분은 owl.carousel 자체 스타일시트에
 * 들어 있는데 우리는 그 파일을 들여오지 않기 때문이다.
 * 실측(원본 소아 메인): 8x8px, 좌우 여백 3px, 켜진 점 #D2DE32.
 */
.owl-dots .owl-dot {
    display: inline-block; padding: 0; border: 0; background: none; cursor: pointer;
}
.owl-dots .owl-dot span {
    display: block; width: 8px; height: 8px; margin: 0 3px;
    background: #d9d9d9; border-radius: 30px;
}
.owl-dots .owl-dot.active span { background: #d2de32; }
.site-pain .owl-dots .owl-dot.active span { background: #006fb9; }