/*=========================================
📌전역 필터디자인
======================================*/
/*PC*/
/* [1] 드롭다운 메뉴 래퍼를 탭 스타일로 강제 전환 */
.notion-dropdown__menu-wrapper,
.notion-dropdown__menu {
    display: flex !important;
    position: relative !important; /* 절대 위치 해제 */
    background: transparent !important;
    box-shadow: none !important; /* 그림자 제거 */
    border: none !important;     /* 박스 테두리 제거 */
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: auto !important;
}
/* [2] 상단 'All' 버튼(드롭다운 열기 버튼) 숨김 */
.notion-dropdown__button {
    display: none !important;
}
/* [3] 메뉴 헤더('2 views' 텍스트) 숨김 */
.notion-dropdown__menu-header {
    display: none !important;
}
/* [4] 버튼 리스트 가로 정렬 */
.notion-dropdown__option-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
}
/* [5] 개별 버튼(알약 모양) 디자인 */
.notion-dropdown__option {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    background: #f4f4f4 !important;
    cursor: pointer !important;
    border: 1px solid #e0e0e0 !important;
    margin: 0 !important;
    /* 폰트 속성 강제 적용 */
    color: #37352f !important;
    font-family: 'Roboto Flex', 'Noto Sans KR', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    /* 폰트가 상속되지 않도록 내부 요소까지 제어 */
    -webkit-font-smoothing: antialiased !important;
}

/* 텍스트 컨테이너 내의 모든 요소를 강제 설정 */
.notion-dropdown__option, 
.notion-dropdown__option p, 
.notion-dropdown__option span {
    color: #37352f !important;
    font-family: 'Roboto Flex', 'Noto Sans KR', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
/* 활성화 상태 디자인 (텍스트 컬러 포함) */
.notion-dropdown__option.active,
.notion-dropdown__option.active p,
.notion-dropdown__option.active span {
    background: #37352f !important;
    color: #ffffff !important; /* 여기서 강제로 화이트 적용 */
    border-color: #37352f !important;
}

/* 아이콘 숨김 처리 */
.notion-dropdown__option-icon {
    display: none !important;
}


/* [6] 클릭 이벤트 활성화 및 우선순위 강제 */
.notion-dropdown__menu-wrapper,
.notion-dropdown__menu,
.notion-dropdown__option-list,
.notion-dropdown__option {
    pointer-events: auto !important; /* 클릭 신호 허용 */
    z-index: 9999 !important;       /* 다른 요소보다 상단 배치 */
}

/* [7] 버튼 내부 요소가 클릭을 방해하지 않도록 설정 */
.notion-dropdown__option * {
    pointer-events: none !important; /* 클릭 신호는 부모(버튼)에게 전달 */
}

/* 갤러리 뷰 전체 컨테이너 상단 구분선 제거 */
.notion-collection-gallery {
    border-top: none !important;
    padding-top: 10 !important;
    margin-top: 0 !important;
}

/* 갤러리 뷰를 감싸는 부모 컨테이너의 테두리도 함께 제거 */
.notion-collection-view {
    border-top: none !important;
}


/*[8] [필터 하단 여백 추가*/
.notion-dropdown__menu-wrapper,
.notion-dropdown__menu {
      margin-top: 10px !important; /* 이 수치를 조절하여 여백을 늘리세요 */

    margin-bottom: 20px !important; /* 이 수치를 조절하여 여백을 늘리세요 */
}


/*모바일 필터 디자인*/
@media (max-width: 767px) {
    /* 1. 기본 컨테이너 및 공통 제어 */
    .notion-dropdown {
        width: 100% !important;
        margin-bottom: 1px !important;
    }

    .notion-dropdown__menu-wrapper,
    .notion-dropdown__menu,
    .notion-dropdown__option-list {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }


    /* 2. 필터 버튼 디자인 */
    .notion-dropdown__button {
        display: flex !important;
        width: 100% !important;
        padding: 14px 16px !important;
        background: #ffffff !important;
        border: 0px solid #e0e0e0 !important;
        border-radius: 0px !important;
        justify-content: space-between !important;
        align-items: center !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }



    /* 3. 드롭다운 하위 옵션 스타일 */
    .notion-dropdown__option {
        display: flex !important;
        width: 100% !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: none !important;
        border-radius: 0 !important;
        color: #37352f !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    .notion-dropdown__option.active {
        background: #37352f !important;
        font-weight: 500 !important;
    }
    
    
.notion-dropdown__option {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* 좌측 정렬로 변경 */
    padding-left: 16px !important;}  
    

/* 4. 수정: 글자(Title)는 살리고 아이콘만 숨김 */
    .notion-dropdown__button svg,
    .notion-dropdown__option-icon,
    .notion-dropdown__menu-header {
        display: none !important;
    }
    
    
/* 필터 제목(버튼 내부 텍스트) 폰트 강제 적용 */
.notion-dropdown__button-title,
.notion-dropdown__button-title p {
    font-family: 'Roboto Flex', 'Noto Sans KR', sans-serif !important;
    font-size: 14px !important; /* 옵션 리스트와 동일한 크기 */
    font-weight: 600 !important;
    color: #37352f !important;
    margin: 0 !important;
}    

    /* 5. 인터랙션 및 상태 제어 */
    .notion-dropdown__button svg:last-child {
        display: block !important;
        transition: transform 0.3s ease !important;
    }

    .notion-dropdown__menu-wrapper:not(.close) ~ .notion-dropdown__button svg:last-child {
        transform: rotate(180deg) !important;
    }

    .notion-dropdown__menu.close + .notion-dropdown__menu-wrapper,
    .notion-dropdown__menu.close {
        display: none !important;
    }
}