.swiper 
{
    width: 100%;
    height: 100%;
}

.swiper-slide 
{
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 슬라이드 안의 이미지 스타일 */
.swiper-slide img
{ 
    width: 100%;
    height: 100%;                        /* 이미지 높이도 슬라이드에 맞춤 */
    object-fit: cover;                   /* 이미지 비율 유지하며 영역 가득 채움 */
    display: block;                      /* 인라인 여백 제거 */
    border-radius: 0;                    /* 이미지 모서리는 둥글게 하지 않음 */
}

/* 좌우 화살표 내부 아이콘 숨김 */
.swiper-button-prev::after,
.swiper-button-next::after
{
    display: none;                       /* Swiper 기본 화살표 아이콘 숨김 */
}

/* 좌우 화살표 기본 상태 (숨겨짐) */
.swiper-button-prev,
.swiper-button-next
{
    opacity: 0;                          /* 투명도 0으로 보이지 않게 함 */
    transition: opacity 0.2s;            /* 투명도 전환 애니메이션 */
    pointer-events: none;                /* 마우스 이벤트 비활성화 (클릭 불가) */
}

/* 마우스가 swiper 위에 올라갔을 때 화살표 보이게 설정 */
.swiper:hover .swiper-button-prev,
.swiper:hover .swiper-button-next
{
    opacity: 1;                          /* 투명도 1로 보이게 함 */
    pointer-events: auto;                /* 마우스 이벤트 활성화 (클릭 가능) */
}


/* 페이지네이션 불릿 (비활성 상태) */
.swiper-pagination-bullet
{
    background: transparent !important;                     /* 내부는 투명 (비활성 상태) */
    border: 2px solid rgba(255,255,255,0.5) !important;   /* 흐릿한 흰색 테두리 */
    opacity: 1;                                             /* 항상 보이도록 설정 */
    width: 10px;                                            /* 불릿 너비 */
    height: 10px;                                           /* 불릿 높이 */
    box-sizing: border-box;                                 /* 테두리 포함 크기 계산 */
}

/* 페이지네이션 불릿 (활성 상태) */
.swiper-pagination-bullet-active
{
    background: rgba(255, 255, 255, 0.849) !important;      /* 속이 거의 흰색 */
    border: 2px solid rgba(255,255,255,0.5) !important;     /* 테두리도 동일하게 흰색 */
}