/* part 4 */
/* ==========================================================================
   Part 4: 테마 변수 및 기본 설정
   ========================================================================== */
:root {
    --section-bg: #ffffff;
    --text-main: #000000;
    --img-bg: #f0f0f0;
    --flag-bg: #000000; /* 라이트모드: 검정 배경 태그 */
    --flag-text: #ffffff; /* 라이트모드: 흰색 글자 태그 */
}

[data-bs-theme="dark"] {
    --section-bg: #121212;
    --text-main: #ffffff;
    --img-bg: #252525;
    --flag-bg: #ffffff; /* 다크모드: 흰색 배경 태그 */
    --flag-text: #000000; /* 다크모드: 검정 글자 태그 */
}

/* 다크 모드 배경 및 텍스트 통합 대응 */
[data-bs-theme="dark"] .part_4 .display-section,
[data-bs-theme="dark"] .part_4 .works-section,
[data-bs-theme="dark"] .part_4 .news-section {
    background-color: var(--section-bg);
}

[data-bs-theme="dark"] .part_4 .title-main,
[data-bs-theme="dark"] .part_4 .typo-area dt,
[data-bs-theme="dark"] .part_4 .typo-area .title span {
    color: var(--text-main) !important;
}

/* 섹션 기본 설정 */
.display-section {
    padding: 30px 0;
    background-color: var(--section-bg);
}

/* 상단 타이틀 (Black/White 테마 전환) */
.part_4 .title-main {
    color: var(--text-main);
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}

.part_4 .header-link {
    text-decoration: none;
}

/* 리스트 레이아웃 */
.part_4 .poster-list {
    display: flex;
    flex-wrap: wrap; /* 줄바꿈 허용 */
    gap: 20px;
    list-style: none;
    padding: 0;
    /*margin: 0;*/
    margin: 0 -10px; /* 아이템 사이의 간격을 위한 보정 */
}

/* 개별 포스터 아이템 */
.part_4 .poster-item {
    width: 200px;
    position: relative;
    box-sizing: border-box;
    /*padding: 10px; !* 아이템 간 간격 *!*/
    /*width: 25%; !* PC에서는 기본 4개 정렬 (필요에 따라 수정) *!*/
}

.part_4 .poster-link {
    text-decoration: none;
    display: block;
}

/* 이미지 컨테이너 (세로 포스터 비율) */
.part_4 .img-ratio {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: var(--img-bg);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.part_4 .img-ratio img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: none;
    transition: transform 0.4s ease;
}

/* 마우스 올렸을 때 이미지 확대 효과 */
.part_4 .poster-link:hover img {
    transform: scale(1.08);
}

/* 텍스트 영역: 그라데이션 및 폰트 설정 (onair4) */
.part_4 .typo-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 텍스트 가독성을 위해 그라데이션은 어두운 톤 고정 */
    background: linear-gradient(to top,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.7) 50%,
        rgba(0,0,0,0) 100%);
    padding: 60px 15px 20px;
    box-sizing: border-box;
}

.part_4 .typo-inner {
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* 포스터 내부 제목 (어두운 배경 위이므로 항상 화이트 유지) */
.part_4 .typo-inner dt {
    font-weight: bold;
    color: #ffffff !important;
    font-size: 1.4rem;
    line-height: 1.3;
    margin: 0;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 포스터 내부 부가 설명 (항상 밝은 톤 유지) */
.part_4 .typo-inner dd {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1rem;
    margin: 6px 0 12px;
    letter-spacing: -0.5px;
}

/* 태그 스타일 (Black & White 반전 테마 적용) */
.part_4 .flag_txt {
    background: var(--flag-bg);
    color: var(--flag-text);
    padding: 3px 10px;
    font-size: 0.85rem;
    font-weight: bold;
    border-radius: 4px;
    display: inline-block;
}

/* 데이터 없을 때 */
.part_4 .empty-msg {
    color: #999;
}

/* 텍스트 영역 테마 (자동 대비) */
.typo-area {
    background-color: #ffffff; /* 기본 화이트 */
    color: #000000; /* 기본 블랙 */
    padding: 10px 5px;
}

/* 만약 다크모드를 사용하신다면 아래 클래스를 추가하세요 */
.dark-theme .typo-area {
    background-color: #000000;
    color: #ffffff;
}


/* 반응형 처리 (모바일/작은 화면) */
@media (max-width: 768px) {

    .part_4 .poster-list {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 무조건 1:1 비율로 2열 배치 */
        column-gap: 10px; /* 아이템 사이 좌우 간격 */
        row-gap: 20px;    /* 아이템 사이 상하 간격 */
        /*padding: 0 15px;  !* 전체 리스트 좌우 여백 *!*/
        margin: 0;
    }

   .part_4  .poster-item {
        width: 100%; /* 그리드 안에서 꽉 차게 설정 */
        padding: 0;   /* 그리드 갭을 사용하므로 패딩 제거 */
        margin-bottom: 0;
    }

   .part_4 .poster-img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .part_4 .typo-area dt {
        font-size: 14px; /* 모바일에서 제목 크기 최적화 */
        word-break: keep-all;
    }

    .part_4 .typo-area dd {
        font-size: 12px;
    }
}