/*=========================================
📌전역 필터디자인
======================================*/
/*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: 8px !important;
}
/* [5] 개별 버튼(알약 모양) 디자인 - 우선순위 강화 */
.notion-dropdown__menu-wrapper .notion-dropdown__option {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;

    /* 여기서 원하는 배경색과 테두리색으로 수정하세요 */
    background: #f7f7f7 !important; 
    border: 1px solid #e0e0e0 !important;
    
    cursor: pointer !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__menu-wrapper,
    .notion-dropdown__menu,
    .notion-dropdown__option-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; /* 화면이 좁으면 줄바꿈 허용 */
        width: 100% !important;
        background: transparent !important;
      gap: 10px 5px !important; 
      margin-bottom: 10px !important; /* 이 수치를 조절하여 갤러리와의 간격을 맞추세요 */
    }
    }

    /* 2. 드롭다운 버튼 숨김 */
    .notion-dropdown__button {
        display: none !important;
    }

    /* 3. 옵션 스타일을 알약형으로 통일 */
    .notion-dropdown__option {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 14px !important;
        margin: 0 6px 8px 0 !important; /* 간격 조절 */
        border-radius: 20px !important;
        font-size: 13px !important; /* 모바일에서 약간 작게 조절 가능 */
        white-space: nowrap !important;
    }

    /* 5. 불필요 요소 제거 */
    .notion-dropdown__option-icon,
    .notion-dropdown__menu-header,
    .notion-dropdown__button-title {
        display: none !important;
    }
}