/* 공통 스타일 유지 */
.bg-body { background-color: var(--bs-body-bg) !important; }
.text-body { color: var(--bs-body-color) !important; }
.transition-fade { transition: opacity 0.3s ease-in-out; }
.htmx-swapping .transition-fade { opacity: 0; }

/* ==================================*/
/* article_status 방영 종영 ott*/
/* ==================================*/
/* 서브메뉴 컨테이너 스타일 */
.submenu-list {
    display: flex;
    gap: 10px; /* 버튼 사이 간격 */
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

/* 탭 항목을 동그란 버튼 모양으로 설정 */
.tab-item {
    display: inline-block;
}

.tab-item a {
    display: block;
    padding: 8px 20px;
    border-radius: 50px; /* 동그란 버튼 모양의 핵심 */
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;

}

.tab-item a {
    background-color: #ffffff;
    color: #000000;
    /*{#border-color: #ffffff;#}*/
    border: 1px solid #000000;
}

.tab-item a:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

.tab-item.active a {
    background-color: #000000;
    color: #ffffff;
    /*{#border-color: #ffffff;#}*/
    border: 1px solid #ffffff;
}

/* dark 모드 */
[data-bs-theme="dark"] .tab-item a {
        background-color: #000000;
        color: #ffffff;
        border-color: #000000;
		border: 1px solid #ffffff;
}

[data-bs-theme="dark"] .tab-item a:hover {
        background-color: #ffffff;
	    color: #000000;
}

[data-bs-theme="dark"] .tab-item.active a {
        background-color: #ffffff;
        color: #000000;
        border-color: #000000;
	    border: 1px solid #000000;
}
/* ==================================*/
/* article_status 방영 종영 ott*/
/* ==================================*/

/* 1. 상단 이미지는 전체 폭 유지 */
.responsive-image {
    width: 100%;
    margin: 0;
    padding: 0;
}

.responsive-image img {
    width: 100%;
    display: block;
}

/*!* 2. 섹션 내 콘텐츠 영역에만 여백과 최대 폭 적용 *!*/
#services-section .submenu-container,
#services-section .search-bar-row {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

/* 2. 작품 리스트 영역만 90%로 확장 */
#services-section #post-display-area {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}

.service-card .card-img-top {
    /* 고정 높이를 제거하고 비율(Aspect Ratio)을 설정합니다. */
    height: auto !important;
    /* 포스터 표준 비율인 1:1.45 또는 2:3 정도가 적당합니다. */
    aspect-ratio: 1 / 1.45;

    width: 100%;
    object-fit: cover; /* 비율을 유지하면서 영역을 가득 채움 */
    object-position: center; /* 이미지 중앙을 기준으로 크기 조절 */
    display: block;
}

/* 2. 카드 컨테이너 설정 */
.service-card {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
}

/*!* 3. 그리드 간격 미세 조정 (창이 줄어들 때 여백 유지) *!*/
/*#services-section #post-display-area {*/
/*    max-width: 1400px;*/
/*    margin: 0 auto;*/
/*    padding: 0 20px;*/
/*}*/

/* 3. 모바일 대응 (화면이 아주 작아질 때는 두 영역 모두 꽉 차게) */
@media (max-width: 768px) {
    #services-section .submenu-container,
    #services-section .row,
    #services-section #post-display-area {
        width: 95%;
    }
}