/* ==========================================================
   홈 캐러셀 커스텀 — 2026-08 운영 반영분 이식
     1) MAX 슬라이드 (영상 단독)
     2) 우측 세로 인디케이터 → 하단 가로 바
   원본 style.css 뒤에 와야 우선순위가 확보된다.
   ========================================================== */

/* ======================================================
   1. MAX 슬라이드
====================================================== */
.l-main .c-ref__item--max {
    background-color: #07122A;
    background-image: none;
    overflow: hidden;
}
 /* 배경 영상 (Remotion MaxWebBg — 1920x1080 다크)
   z-index 0 : 가장 뒤. 도트(1) · 그라디언트(1) · 콘텐츠(2)가 위로 쌓입니다. */
.l-main .c-ref__item--max > .max-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
 /* 이 슬라이드는 영상만 노출한다.
   기본 규칙 .l-main .c-ref__item:before 의 검정 25% 오버레이까지 없애
   영상이 원본 밝기 그대로 재생되게 한다. */
.l-main .c-ref__item--max:before,
.l-main .c-ref__item--max:after { content: none; }
 /* 제목은 하단 인디케이터 라벨용으로만 존재 — 화면에는 표시하지 않는다.
   (index.js 의 renderBullet 이 .c-ref__tit 텍스트를 읽어 하단 바를 만든다) */
.l-main .c-ref__item--max .c-ref__tit { display: none; }
   /* ======================================================
   2. 인디케이터: 우측 세로 목록 → 하단 가로 바
      기존 swiper pagination(renderBullet)을 그대로 재배치합니다.
      별도 네비게이션을 새로 만들지 않으므로 loop 인덱스 문제 없음.
====================================================== */
.l-main .swiper-container .swiper-pagination {
    display: flex !important;
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 50px;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 20;
}
.l-main .swiper-container .swiper-pagination::-webkit-scrollbar { display: none; }
 /* 개별 항목
   opacity:1 !important → index.js 의 paginationUpdate 가
   TweenMax 로 넣는 인라인 opacity(뒤로 갈수록 0 이하)를 무력화합니다. */
.l-main .c-ref__pagination > button {
    opacity: 1 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 100%;
    max-width: 260px;
    padding: 0 22px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    text-align: left;
    position: relative;
    cursor: pointer;
}
.l-main .c-ref__pagination > button:first-child { border-left: none; padding-left: 28px; }
.l-main .c-ref__pagination > button:last-child  { padding-right: 28px; }
 /* 기존 좌측 흰 막대 → 상단 활성 라인으로 전환 */
.l-main .c-ref__pagination > button:before {
    content: "";
    display: block !important;
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    width: auto !important;
    height: 2px !important;
    margin-right: 0 !important;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: 350ms transform ease;
}
.l-main .c-ref__pagination > button:first-child:before { left: 28px; }
.l-main .c-ref__pagination > button.swiper-pagination-bullet-active:before { transform: scaleX(1); }
 .l-main .c-ref__pagination > button > span {
    display: block;
    font-size: 12px !important;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.36);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: 250ms color ease;
    vertical-align: baseline;
}
.l-main .c-ref__pagination > button:hover > span { color: rgba(255, 255, 255, 0.7); }
.l-main .c-ref__pagination > button.swiper-pagination-bullet-active > span {
    font-size: 12px !important;
    color: #fff;
    font-weight: 600;
}
 /* 하단 바와 겹치는 요소 위치 보정 */
.l-main .swiper-container .swiper-btn-ctrl { bottom: 66px !important; }
.l-main #footer { bottom: 50px; }
 @media (max-width: 1199px) {
    .l-main .c-ref__pagination > button { max-width: 180px; padding: 0 16px; }
    .l-main .c-ref__pagination > button:first-child { padding-left: 20px; }
    .l-main .c-ref__pagination > button:before { left: 16px; right: 16px; }
    .l-main .c-ref__pagination > button:first-child:before { left: 20px; }
}

/* to-be 전용 — as-is 는 <a role="button"> 이었으나 to-be 는 <button> 을 쓴다.
   style.css 의 배경 아이콘만 남기고 브라우저 기본 스타일을 지운다. */
.l-main .swiper-container .swiper-btn-ctrl {
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* to-be 전용 — swiper 코어 CSS 가 as-is 에는 없던 z-index/position 을 넣는다.
   그대로 두면 홈 카피라이트가 캐러셀 뒤로 숨으므로, 컨테이너의 z-index 를
   되돌리고 푸터를 명시적으로 위에 올린다. */
.l-main .swiper-container {
    z-index: auto;
}

.l-main #footer {
    z-index: 10;
}

.l-main .c-ref__pagination > button { background: transparent; border-top: 0; border-bottom: 0; border-right: 0; font: inherit; }
.l-main .c-ref__pagination > button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }