/*
  * 카테고리 필터 팝업 개선
 */

/* 필터 팝업 modal - flexbox로 항상 수직 중앙 정렬 */
.modal#searchFilter[style*="display: block"],
.modal#searchFilter[style*="display: flex"] {
    display: flex !important;       /* flexbox로 변경 */
    align-items: center !important; /* 수직 중앙 정렬 (높이 변화 시 자동 재조정) */
    justify-content: center !important; /* 수평 중앙 정렬 */
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 주제/교과서 필터링 팝업 */
.modal_content.filter {
    width: min(1200px, 95vw) !important; /* 최대 1200px, 화면의 95%를 넘지 않도록 */
    max-width: 95vw !important; /* 화면 너비의 95%를 넘지 않도록 */
    max-height: 90vh !important; /* 브라우저 높이의 90%를 넘지 않도록 */
    margin: 0 !important; /* script.js의 margin-top 무력화 */
    padding: 0 clamp(20px, 5vw, 100px) 20px !important; /* 반응형 좌우 패딩 */

    /* flexbox 자식으로 동작 - position/transform 불필요 */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    overflow: hidden;
    overflow-x: hidden;
    /* grid: 탭(auto) | 콘텐츠(1fr, 스크롤) | 버튼(auto) */
    display: grid;
    grid-template-rows: auto 1fr auto;
    box-sizing: border-box;
}

/* 탭 영역 - 상단 고정 */
.modal_content.filter .tab {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background: white;
    z-index: 10;
}

.modal_content.filter .tablinks {
    display: inline-block;
    min-width: 100px;
}

/* 탭 컨텐츠 영역 - grid 1fr 행에 배치되어 남은 높이를 채우고 넘치면 스크롤 */
.modal_content.filter .tabcontent {
    overflow-y: auto; /* 이 영역만 스크롤 */
    overflow-x: hidden;
    padding: 15px 0;
    min-height: 0;
}

/* tab1, tab2 레이아웃 */
.modal_content.filter #tab1,
.modal_content.filter #tab2 {
    display: block; /* overflow는 .tabcontent 룰에서 auto로 처리됨 */
}

/* 선택 경로 (.select) - 고정 영역 (스크롤 안됨) */
.modal_content.filter .tabcontent .select {
    flex-shrink: 0; /* 크기 고정 */
    /* 기존 스타일은 _modal.scss에서 유지됨:
       - background-color: #f3f4f5
       - height: 40px
       - line-height: 40px
       - padding-left: 20px
       - margin-bottom: 10px
       - border-radius: 5px
    */
}

/* 카테고리 스크롤 영역 wrapper - tabcontent가 스크롤 담당하므로 overflow 제거 */
.modal_content.filter .category-scroll-wrapper {
    overflow: visible;
    padding-bottom: 10px;
}

/* tab1은 스크롤 없이 (주제 탭) */
.modal_content.filter #tab1 .category-scroll-wrapper {
    overflow-y: visible; /* 스크롤 없음 */
}

/* 버튼 영역 - grid auto행으로 항상 하단에 위치 */
.modal_content.filter .btn_wrap {
    background: white;
    z-index: 10;
    padding: 15px 0;
    border-top: 1px solid #f0f0f0;
}

/* 카테고리 리스트 반응형 */
.modal_content.filter .cate_list,
.modal_content.filter .unit_list {
    max-width: 100%;
    box-sizing: border-box;
}

.modal_content.filter .category {
    flex-wrap: nowrap; /* 라벨 + 버튼 한 줄 유지 */
    gap: 0;
}

/* 카테고리 마지막 요소의 하단 여백 제거 */
.modal_content.filter .category-scroll-wrapper > .category:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.modal_content.filter .category h5 {
    flex-shrink: 0; /* 제목은 줄어들지 않도록 */
}

/* 라디오 버튼 리스트 반응형 */
.modal_content.filter .cate_list {
    width: auto;     /* 100%이면 category 안에서 줄바꿈 발생 */
    max-width: none;
}

/* 카테고리 버튼 - 텍스트 길이에 맞춰 유동적으로 */
.modal_content.filter .cate_list .radio_button input[type="radio"] + span {
    width: auto !important; /* 고정 너비 제거 */
    min-width: 60px; /* 최소 너비 */
    max-width: 200px; /* 최대 너비 (너무 길어지는 것 방지) */
    padding: 0 15px !important; /* 좌우 여백으로 공간 확보 */
    font-size: clamp(13px, 1.5vw, 16px); /* 반응형 폰트 크기 */
    text-align: center; /* 텍스트 중앙 정렬 */
    white-space: nowrap; /* 한 줄로 유지 */
    overflow: hidden; /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis; /* 넘치면 ... 표시 */
    word-break: keep-all; /* 단어 단위로 유지 */
    box-sizing: border-box; /* padding 포함 크기 계산 */
}

/* 단원 리스트 - 박스 내부 스크롤 */
.modal_content.filter .unit_list {
    display: block !important; /* block 명시 */
    max-height: 250px !important; /* 최대 높이 제한 */
    overflow-y: auto !important; /* 필요시 스크롤바 표시 */
    overflow-x: hidden !important;
}

/* depth5, depth6 명시적 지정 */
.modal_content.filter .unit_list.depth5,
.modal_content.filter .unit_list.depth6 {
    max-height: 250px !important;
    overflow-y: auto !important; /* 필요시 스크롤바 표시 */
    overflow-x: hidden !important;
}

/* 디버깅용 - CSS 적용 확인 (나중에 삭제 가능) */
.modal_content.filter .category.depth5,
.modal_content.filter .category.depth6 {
    /* 배경색으로 영역 확인 */
}

.modal_content.filter .unit_list .radio_button input[type="radio"] + span {
    font-size: clamp(12px, 1.5vw, 16px);
    padding: 0 10px;
    word-break: keep-all;
}

/* 카테고리 버튼 호버 효과 개선 */
.modal_content.filter .cate_list .radio_button input[type="radio"] + span:hover {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 선택된 카테고리 버튼 강조 */
.modal_content.filter .cate_list .radio_button input[type="radio"]:checked + span {
    font-weight: 600; /* 선택된 항목 강조 */
}

/* 버튼 내부 정렬 */
.modal_content.filter .btn_wrap > * {
    margin: 0 5px; /* 버튼 간격 */
}

.modal_content.filter .btn {
    min-width: 80px;
}

/* 닫기 버튼 고정 */
.modal_content.filter .modal_close {
    position: absolute; /* 팝업 우측 상단 고정 */
    top: 15px;
    right: 15px;
    z-index: 20; /* 스크롤 내용 위에 표시 */
}

/* 스크롤바 스타일 개선 - category-scroll-wrapper와 unit_list에 적용 */
.modal_content.filter .category-scroll-wrapper::-webkit-scrollbar,
.modal_content.filter .unit_list::-webkit-scrollbar {
    width: 8px;
}

.modal_content.filter .category-scroll-wrapper::-webkit-scrollbar-track,
.modal_content.filter .unit_list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modal_content.filter .category-scroll-wrapper::-webkit-scrollbar-thumb,
.modal_content.filter .unit_list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.modal_content.filter .category-scroll-wrapper::-webkit-scrollbar-thumb:hover,
.modal_content.filter .unit_list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 모바일/태블릿 대응 */
@media (max-width: 1200px) {
    .modal_content.filter {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 0 20px 20px !important;
    }

    /* tabcontent 기본 스타일 */
    .modal_content.filter .tabcontent {
        padding: 15px 0; /* 여백 축소 */
    }

    /* tab1, tab2 레이아웃 유지 */
    .modal_content.filter #tab1,
    .modal_content.filter #tab2 {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    /* 카테고리 스크롤 wrapper */
    .modal_content.filter .category-scroll-wrapper {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    /* tab1은 스크롤 없이 */
    .modal_content.filter #tab1 .category-scroll-wrapper {
        overflow-y: visible;
    }

    /* 단원 리스트 높이 조정 */
    .modal_content.filter .unit_list {
        max-height: 250px !important; /* 모바일에서 높이 축소 */
    }

    /* .category는 row 유지 (라벨 + 버튼 한 줄) */
}

@media (max-width: 720px) {
    .modal#searchFilter[style*="display: block"],
    .modal#searchFilter[style*="display: flex"] {
        align-items: center !important; /* 모바일에서도 수직 중앙 유지 */
        padding: 0; /* flexbox가 처리하므로 padding 불필요 */
    }

    .modal_content.filter {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 95vh !important;
        padding: 0 15px 15px !important;
    }

    /* tabcontent 기본 스타일 */
    .modal_content.filter .tabcontent {
        padding: 10px 0; /* 여백 최소화 */
    }

    /* tab1, tab2 레이아웃 유지 */
    .modal_content.filter #tab1,
    .modal_content.filter #tab2 {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    /* 카테고리 스크롤 wrapper */
    .modal_content.filter .category-scroll-wrapper {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    /* tab1은 스크롤 없이 */
    .modal_content.filter #tab1 .category-scroll-wrapper {
        overflow-y: visible;
    }

    /* 단원 리스트 높이 조정 */
    .modal_content.filter .unit_list {
        max-height: 200px !important; /* 작은 모바일에서 높이 더 축소 */
    }

    /* 선택 경로 폰트 크기 */
    .modal_content.filter .tabcontent .select {
        font-size: 14px; /* 모바일 폰트 크기 */
    }

    .modal_content.filter .tablinks {
        font-size: 14px;
        padding: 15px 10px 10px;
        min-width: 80px;
    }

    /* 모바일에서도 카테고리 버튼은 유동적으로 */
    .modal_content.filter .cate_list .radio_button input[type="radio"] + span {
        width: auto !important;
        min-width: 50px;
        max-width: 150px;
        padding: 0 12px !important;
        font-size: 14px;
        height: 36px;
        line-height: 34px;
    }

    /* 단원 리스트는 기존 스타일 유지 */
    .modal_content.filter .unit_list .radio_button input[type="radio"] + span {
        font-size: 14px;
        height: 36px;
        line-height: 34px;
    }

    .modal_content.filter .btn {
        font-size: 14px;
        padding: 8px 15px;
    }

    .modal_content.filter .select {
        font-size: 14px;
        padding-left: 10px;
    }

    .modal_content.filter .category h5 {
        font-size: 16px;
    }
}