/* 기본 레이아웃 */
#hd, #ft, #aside, header, footer, .hd_sch_wr, #container_title, #gnb, #tnb { display: none !important; }
html, body { background-color: #121212 !important; margin: 0; padding: 0; color: #fff; font-family: 'Pretendard', sans-serif; -webkit-text-size-adjust: none; }
#wrapper, #container_wr, #container { background-color: #121212 !important; width: 100% !important; border: none !important; }

/* 레이아웃 및 사이드바 배치를 위한 부모 컨테이너 설정 */
.page_container { display: flex; justify-content: center; width: 100%; position: relative; }
.main_content_wrap { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/* 상단 스티키(고정) 메뉴 */
.sticky_header_wrap { position: sticky; top: 0; background-color: #121212; z-index: 990; margin: 0 -20px; padding: 20px 20px 10px 20px; border-bottom: 1px solid #1e1e24; }
.main_search_section { padding: 0 0 10px; display: flex; justify-content: center; position: relative; }
.unified_search_bar { width: 100%; height: 56px; background-color: #1e1e24; border: 1px solid #4a4d6d; border-radius: 12px; display: flex; align-items: center; padding: 0 15px; position: relative; box-sizing: border-box; }
.unified_search_bar input { flex: 1; background: transparent !important; border: none !important; color: #fff !important; font-size: 17px; outline:none !important; box-shadow:none !important; }
.unified_search_bar input:focus { outline: none !important; box-shadow: none !important; border: none !important; }

.filter_dropdown { display: none; position: absolute; top: 60px; right: 0; width: 200px; background-color: #1e1e24; border: 1px solid #2d3139; border-radius: 12px; z-index: 10001; padding: 10px 0; box-shadow: 0 15px 35px rgba(0,0,0,0.7); }
.filter_dropdown.show { display: block; }
.filter_item { padding: 12px 15px; color: #ccc; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; transition: 0.2s; }
.filter_item:hover { background-color: #2a2d36; color: #fff; }
.filter_item.active { color: #7c4dff; font-weight: bold; }

/* 탭 및 칩 메뉴 */
.main_tab_wrapper { display: flex; justify-content: space-between; align-items: center; padding: 5px 0 10px; border-bottom: 1px solid #222; margin-bottom: 2px; }
.main_tab_container { display: flex; gap: 20px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex: 1; }
.main_tab_container::-webkit-scrollbar { display: none; }
.tab_item { color: #999; font-size: 17px; font-weight: 600; text-decoration: none; padding-bottom: 8px; border-bottom: 3px solid transparent; cursor: pointer; }
.tab_item.active { color: #fff; border-bottom-color: #7c4dff; }
.setup_interest { cursor: pointer; color: #999; font-size: 14px; display: flex; align-items: center; gap: 6px; white-space: nowrap; padding-left: 15px; }
@media screen and (max-width: 480px) { .setup_interest span { display: none; } .setup_interest i { font-size: 20px; } }

#story_sub_menu { display: none; padding: 2px 0 2px; }
.category_chip_container { display: flex; gap: 10px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.category_chip_container::-webkit-scrollbar { display: none; }
.chip_item { padding: 8px 18px; border-radius: 25px; background: #252830; border: 1px solid #333; color: #aaa; cursor: pointer; font-size: 14px; display: inline-block; transition: 0.2s; }
.chip_item.active { background: #fff; color: #000; font-weight: bold; border-color: #fff; }

/* 공지 카드 영역 타이틀 */
.hot_section_title { padding: 15px 0 10px; font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 8px; }

/* 1. 공지 카드 컨테이너 (스크롤 숨김) */
.hot_card_wrapper { position: relative; width: 100%; padding: 0 20px; box-sizing: border-box; }
.card_container { display: flex; gap: 15px; margin-bottom: 20px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; padding: 10px 0; scroll-snap-type: x mandatory; }
.card_container::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent; }

/* 2. 공지 카드 기본 스타일 (PC) */
.hot_card { 
    flex: 0 0 calc(50% - 7.5px) !important; 
    min-width: unset !important; 
    scroll-snap-align: start; 
    padding: 25px; 
    position: relative; 
    border-radius: 15px; /* 🚀 바깥쪽 모서리 둥글기 */
    background: #252830; /* 🚀 평소 안 보일 때의 기본 테두리 색상 */
    display: flex; flex-direction: column; justify-content: space-between; 
    z-index: 1; 
    transition: transform 0.3s ease;
    overflow: hidden; /* 🚀 핵심: 나타나는 선이 둥근 모서리를 뚫고 나가지 않게 잘라줍니다! */
}
.hot_card:hover { transform: translateY(-3px); }

/* 안쪽 배경 (마스크) */
.hot_card_mask { 
    position: absolute; 
    inset: 2px; /* 🚀 테두리 두께 (2px) */
    border-radius: 13px; /* 🚀 안쪽 둥글기 */
    background: #1e1e24; 
    z-index: -1; 
    transition: background 0.3s ease; 
}
.hot_card:hover .hot_card_mask { background: #23232c; }

/* 🚀 마우스 올렸을 때 양쪽에서 나타나는 네온 그라데이션 애니메이션 */
.hot_card::before, .hot_card::after { 
    content: ''; position: absolute; 
    background-image: linear-gradient(135deg, #FF0055 0%, #7C4DFF 50%, #00F2FE 100%); 
    transition: all 0.4s ease-out; 
}
.hot_card::before { width: 2px; height: 0; left: 0; bottom: 0; z-index: -2; }
.hot_card::after { width: 0; height: 2px; right: 0; top: 0; z-index: -2; }
.hot_card:hover::before { height: 100%; width: 100%; }
.hot_card:hover::after { width: 100%; height: 100%; }

/* 3. 좌우 이동 화살표 버튼 */
.nav_btn { 
    position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; 
    background: transparent !important; color: #525057 !important; border: none; cursor: pointer; 
    z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 28px; transition: 0.3s; 
}
.nav_btn.prev { left: -10px; opacity: 0; visibility: hidden; pointer-events: none; } /* 🚀 초기엔 왼쪽 숨김 */
.nav_btn.next { right: -10px; opacity: 1; visibility: visible; pointer-events: auto; }
.nav_btn.show { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* 🚀 나타나게 하는 마법의 클래스 */
.nav_btn.hide { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* 🚀 숨기게 하는 마법의 클래스 */
.nav_btn:hover { color: #fff !important; }

/* =========================================
   🚀 모바일 헤더 아이콘 디자인 추가
========================================= */
.mobile_header_icons { gap: 20px; }
.m_icon_wrap { position: relative; font-size: 24px; color: #9ea1a8; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.m_icon_wrap:hover { color: #fff; }
.m_badge { position: absolute; top: -6px; right: -10px; background: #f07441; color: #fff; font-size: 11px; font-weight: bold; padding: 2px 7px; border-radius: 12px; border: 2px solid #121212; line-height: 1; }

/* 🚀 4. 반응형 레이아웃 (태블릿 및 모바일 최적화) */
@media screen and (max-width: 1200px) {
    .hot_card { flex: 0 0 45%; min-width: 320px; }
}

@media screen and (max-width: 768px) {
    /* 🚀 모바일에서 긴 검색창 숨기고 우측 아이콘 나타내기 */
    .pc_only_search { display: none !important; }
    .mobile_header_icons { display: flex !important; }

    .hot_card_wrapper { padding: 0 !important; }
    
    /* 🚀 모바일 전용 공지사항 카드 설정 */
    
    /* 🚀 모바일 전용 공지사항 카드 설정 */
    .hot_card { 
        flex: 0 0 98% !important; /* 👈 바로 이 부분의 숫자를 조절하세요! */
        min-width: unset !important; 
        margin-right: 5px; 
        height: 135px !important; /* 🚀 높이를 5px만 살짝 늘려 숨통을 틔워줍니다 */
        padding: 18px !important; /* 🚀 안쪽 여백도 살짝 줄여서 내부 공간을 더 확보합니다 */
    }
    
    /* 🚀 글자 밑동 잘림 방지 설정! */
    .hot_card_subject {
        font-size: 15px !important; 
        margin: 8px 0 !important; /* 🚀 위아래 불필요한 여백을 줄여줍니다 */
        line-height: 1.5 !important; /* 🚀 글자 위아래 간격을 약간 넓혀 받침이 안 잘리게 합니다 */
        height: auto !important; /* 🚀 고정 높이를 해제해서 폰트 크기에 맞게 자연스럽게 늘어나게 합니다 */
        max-height: 46px !important; /* 🚀 대신 딱 2줄까지만 허용하도록 제한을 둡니다 */
    }

    .card_container { padding: 10px 20px !important; gap: 15px !important; }
    .nav_btn { display: none !important; }
}

@media screen and (max-width: 380px) {
    .hot_card { flex: 0 0 88% !important; }
}

/* 공통 테두리 애니메이션 가상요소 (수정본: hot_card 제외) */
.list_item::before, .list_item::after,
.revenue_item::before, .revenue_item::after { 
    content: ''; position: absolute; background-image: linear-gradient(135deg, #FF00E6 0%, #FFB200 25%, #FFEC00 50%, #44D7B6 75%, #0076FF 100%); transition: all 0.4s ease-out; 
}
.list_item::before, .revenue_item::before { width: 2px; height: 0; left: 0; bottom: 0; z-index: -2; }
.list_item::after, .revenue_item::after { width: 0; height: 2px; right: 0; top: 0; z-index: -2; }
.list_item:hover::before, .revenue_item:hover::before { height: 100%; width: 100%; }
.list_item:hover::after, .revenue_item:hover::after { width: 100%; height: 100%; }

#ajax_latest_list { margin-top: 10px; border-top: 1px solid #222; }

/* 수익인증(revenue) 게시판 전용 리스트 스타일 */
.revenue_item { display: flex; gap: 20px; padding: 20px; text-decoration: none !important; margin-bottom: 12px; align-items: stretch; position: relative; border-radius: 12px; overflow: hidden; background: transparent; transition: transform 0.3s ease; border: none !important; z-index: 1; }
.revenue_item:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.revenue_item_mask { position: absolute; inset: 1px; border-radius: 11px; background: #1e1e24; z-index: -1; transition: background 0.3s ease; }
.revenue_item:hover .revenue_item_mask { background: #23232c; }
.rev_thumb { flex-shrink: 0; width: 180px; height: 140px; border-radius: 10px; overflow: hidden; background: #252830; position: relative; z-index: 2; }
.rev_thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.revenue_item:hover .rev_thumb img { transform: scale(1.05); }
.rev_info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; z-index: 2; }
.rev_cate { font-size: 13px; color: #888; margin-bottom: 8px; font-weight: bold; }
.rev_title { font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 10px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev_desc { font-size: 14px; color: #aaa; line-height: 1.6; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rev_meta { display: flex; align-items: center; gap: 15px; font-size: 13px; color: #777; flex-wrap: wrap; }
.rev_meta span { display: flex; align-items: center; gap: 5px; }

@media screen and (max-width: 600px) {
    .revenue_item { flex-direction: column; padding: 15px; gap: 15px; }
    .rev_thumb { width: 100%; height: 180px; }
    .rev_title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* 일반 게시물용 리스트 디자인 */
.list_item { display: block; padding: 20px 15px; text-decoration: none !important; position: relative; margin-bottom: 8px; border-radius: 10px; overflow: hidden; background: transparent; transition: transform 0.3s ease; border: none !important; z-index: 1; }
.list_item:hover { transform: translateY(-2px); }
.list_item_mask { position: absolute; inset: 1px; border-radius: 9px; background: #121212; z-index: -1; transition: background 0.3s ease; }
.list_item:hover .list_item_mask { background: #1a1a24; }

/* 수익인증 게이지 UI */
.revenue_gauge_wrap { margin-top: -5px; margin-bottom: 25px; position: relative; z-index: 2; }
.rev_gauge_text_wr { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 8px; color: #888; }
.revenue_gauge_bar { width: 100%; height: 8px; background: #2d3139; border-radius: 10px; position: relative; overflow: visible; }
.revenue_gauge_fill { height: 100%; background-image: linear-gradient(90deg, #7c4dff 0%, #ff00e6 100%); border-radius: 10px; position: relative; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); min-width: 8px; box-shadow: 0 0 12px rgba(255, 0, 230, 0.5); }
.revenue_gauge_fill::after { content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 0 15px #ff00e6, 0 0 5px #fff; opacity: 0; transition: opacity 0.3s ease; }
.revenue_gauge_fill.active::after { opacity: 1; }
@media screen and (max-width: 600px) { .revenue_gauge_wrap { margin-bottom: 20px; } }

/* 로그인 모달 */
.login_modal_content { padding: 0 !important; overflow: hidden; max-width: 380px !important; background: #1e1e24; }
.login_tabs { display: flex; text-align: center; border-bottom: 1px solid #2d3139; }
.login_tab { flex: 1; padding: 18px 0; font-size: 16px; font-weight: bold; color: #888; cursor: pointer; text-decoration: none; transition: 0.2s; }
.login_tab.active { color: #fff; border-bottom: 2px solid #7c4dff; background: #252830; pointer-events: none; }
.login_tab:hover { background: #252830; color: #fff; }
.login_body { padding: 30px 25px; }
.login_input { width: 100%; padding: 15px; background: #121212; border: 1px solid #333; border-radius: 8px; color: #fff; margin-bottom: 12px; box-sizing: border-box; font-size: 15px; transition: 0.2s; }
.login_input:focus { border-color: #7c4dff; outline: none; background: #1a1c23; }
.login_btn { width: 100%; padding: 16px; background: #3b82f6; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 10px; transition: 0.2s; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }
.login_btn:hover { background: #2563eb; transform: translateY(-2px); }
.login_options { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 13px; color: #aaa; }
.login_options input[type="checkbox"] { accent-color: #7c4dff; margin-right: 6px; vertical-align: middle; }
.sns_login_area { border-top: 1px solid #2d3139; padding: 25px; background: #17191f; }
.sns_btn_group { display: flex; gap: 10px; }
.sns_login_btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 0; border-radius: 8px; font-size: 14px; font-weight: bold; text-decoration: none; transition: 0.2s; }
.sns_naver_btn { background: #03c75a; color: #fff; }
.sns_kakao_btn { background: #fee500; color: #000; }
.sns_naver_btn:hover { background: #02b350; }
.sns_kakao_btn:hover { background: #e6ce00; }

/* 회원가입 모달 */
.reg_modal_content { padding: 0 !important; max-width: 420px !important; background: #1e1e24; overflow: hidden; display: flex; flex-direction: column; }
.reg_header { padding: 20px 25px; border-bottom: 1px solid #2d3139; display: flex; justify-content: space-between; align-items: center; background: #17191f; }
.reg_header h2 { margin: 0; font-size: 18px; color: #fff; font-weight: bold; }
.reg_header i { cursor: pointer; color: #888; font-size: 20px; transition: 0.2s; }
.reg_header i:hover { color: #fff; }
.reg_body { padding: 30px 25px; position: relative; }
.reg_step { display: none; animation: fadeIn 0.3s ease-out; }
.reg_step.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.reg_label { display: block; font-size: 13px; color: #aaa; margin-bottom: 8px; font-weight: bold; }
.reg_input { width: 100%; padding: 16px; background: #121212; border: 1px solid #333; border-radius: 12px; color: #fff; font-size: 15px; box-sizing: border-box; transition: 0.2s; outline: none; margin-bottom: 8px; }
.reg_input:focus { border-color: #7c4dff; background: #1a1c23; }
.reg_msg { display: block; font-size: 13px; font-weight: bold; margin-bottom: 20px; min-height: 18px; }
.reg_btn_wrap { display: flex; gap: 10px; margin-top: 10px; }
.btn_reg_primary { flex: 1; padding: 16px; background: #7c4dff; color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 15px rgba(124, 77, 255, 0.3); }
.btn_reg_primary:hover { background: #6a3ee5; transform: translateY(-2px); }
.btn_reg_secondary { width: 30%; padding: 16px; background: #2d3139; color: #ccc; border: none; border-radius: 12px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.btn_reg_secondary:hover { background: #3f4451; color: #fff; }
.reg_desc { font-size: 13px; color: #888; line-height: 1.5; margin-bottom: 20px; }

/* 글쓰기 버튼 (FAB) */
.fab_wrapper { 
    position: fixed; 
    bottom: 85px !important; 
    right: 20px !important;  
    z-index: 9999 !important;
    width: auto !important; 
    left: auto !important;
    transform: none !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

#fabWriteBtn { 
    display: none; 
    width: 60px; 
    height: 60px; 
    background-color: #4a4d6d; 
    color: #fff; 
    border-radius: 50%; 
    text-align: center; 
    line-height: 60px; 
    font-size: 24px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
    transition: transform 0.2s, background-color 0.2s; 
    text-decoration: none; 
    cursor: pointer !important;
}

#fabWriteBtn:hover { 
    background-color: #5b5f85; 
    transform: translateY(-3px); 
    color: #fff; 
}

@media screen and (max-width: 600px) { 
    .fab_wrapper { bottom: 85px !important; right: 15px !important; } 
    #fabWriteBtn { width: 55px; height: 55px; line-height: 55px; font-size: 22px; } 
}

@media screen and (min-width: 1024px) { 
    .fab_wrapper { 
        right: calc(50% - 450px) !important; 
        bottom: 50px !important; 
    } 
}

/* 모달 및 사이드바 */
.modal_overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:99999; justify-content:center; align-items:center; }
.modal_content { background:#1e1e24; width:90%; max-width:450px; border-radius:20px; padding:30px; color:#fff; box-shadow: 0 20px 50px rgba(0,0,0,0.8); border: 1px solid #333; }
.main_sidebar { position: fixed; top: 180px; left: calc(50% + 420px); width: 80px; background-color: #1e1e24; border: 1px solid #2d3139; border-radius: 15px; padding: 15px 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.4); z-index: 1000; display: flex; flex-direction: column; gap: 15px; box-sizing: border-box; }
.sidebar_item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #888; text-decoration: none !important; padding: 12px 5px; border-radius: 10px; transition: 0.2s; cursor: pointer; position: relative; }
.sidebar_item:hover { background-color: rgba(124, 77, 255, 0.15); color: #fff; }
.sidebar_item i { font-size: 22px; margin-bottom: 8px; }
.sidebar_item span { font-size: 11px; line-height: 1.2; font-weight: 500; }
.alarm_badge { position: absolute; top: 5px; right: 5px; background-color: #ef4444; color: #fff; font-size: 9px; font-weight: bold; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }

@media screen and (max-width: 1000px) { 
    .main_sidebar { display: none; } 
    #btnPrevPost { left: 10px; }
    #btnNextPost { right: 10px; }
}

/* 자료실 확장자 아이콘 */
.file_icon_badge { flex-shrink: 0; width: 35px; height: 35px; background: #545252; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.file_icon_badge i { font-size: 24px; }
.icon_excel { color: #1D6F42; } .icon_pdf { color: #E01A22; } .icon_hwp { color: #2CABE3; } .icon_word { color: #2B579A; } .icon_image { color: #ff9800; } .icon_generic { color: #888; }

/* 전역 및 모달용 다크 스크롤바 디자인 */
#postViewModal .modal_content::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; }
#postViewModal .modal_content::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #17191f; }
#postViewModal .modal_content::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: #33363f; border-radius: 10px; border: 2px solid #17191f; }
#postViewModal .modal_content::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: #4a4d6d; }
#postViewModal .modal_content, body { scrollbar-width: thin; scrollbar-color: #33363f #17191f; }

/* 닫기 버튼 회전 효과 */
.modal_close_btn i { transition: transform 0.4s ease; }
.modal_close_btn:hover i { transform: rotate(90deg); color: #fff !important; }
.modal_close_btn:active i { transform: scale(0.8) rotate(90deg); }
.btn_refresh:hover, .btn_refresh:hover i { color: #ffffff !important; }

/* 상세창 좌우 화살표 버튼 전용 스타일 */
#btnPrevPost, #btnNextPost { 
    display:flex; position:fixed; top:50%; transform:translateY(-50%); 
    width:50px; height:50px; background:rgba(29, 29, 29, 0.9); 
    border-radius:50%; justify-content:center; align-items:center; 
    color:#fff; cursor:pointer; font-size:20px; z-index:100001;
    transition: all 0.2s ease;
}
#btnPrevPost { left: calc(50% - 360px); }
#btnNextPost { right: calc(50% - 360px); }
@media screen and (max-width: 768px) { 
    #btnPrevPost, #btnNextPost { display: none !important; } 
}
/* 🚀 모바일 게시판 리스트 하단 가림 방지 패치 */
@media screen and (max-width: 768px) {
    /* 메인 콘텐츠 영역 하단에 메뉴 바 높이만큼 여백 추가 */
    .main_content_wrap { 
        padding-bottom: 25px !important; 
    }
    
    /* 혹시 게시물 리스트가 다른 컨테이너를 사용한다면 아래 영역도 함께 적용 */
    #ajax_latest_list { 
        padding-bottom: 25px !important; 
    }
}

/* 🚀 PC/모바일 공통 스크롤 숨김 애니메이션 */
.main_search_section {
    max-height: 100px;
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.main_search_section.hidden-on-scroll {
    max-height: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
    overflow: hidden !important; 
}
/* 🚀 필터 메뉴 강조 색상 및 사이드바 간격 보정 */
.filter_item { padding: 12px 15px; color: #888; cursor: pointer; font-size: 13px; transition: 0.2s; display: block; }
.filter_item:hover { background: #2d3139; color: #fff; }
.filter_item.active { color: #7c4dff !important; font-weight: bold !important; }
@media screen and (min-width: 1001px) {
    .main_sidebar { left: calc(50% + 430px) !important; } 
}
/* 🚀 Q&A(free) 서브 메뉴 전용 스타일 */
.free_tab_container { display: flex; gap: 20px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding: 10px 20px; border-bottom: 1px solid #222; margin-bottom: 10px; }
.free_tab_container::-webkit-scrollbar { display: none; }
.free_tab_item { color: #888; font-size: 15px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.free_tab_item:hover { color: #fff; }
.free_tab_item.active { color: #10b981; }


/* 🚀 필터 버튼: 평상시 테두리 제거 및 호버 효과 유지 */
.filter_trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #1e1e24; 
    border: 1px solid transparent; /* 👈 기본 테두리 제거 */
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* 🌈 마우스 올렸을 때만 나타나는 레인보우 테두리 */
.filter_trigger::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px; 
    border-radius: 8px; 
    background: linear-gradient(135deg, #FF00E6, #FFB200, #FFEC00, #0076FF);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.filter_trigger:hover::before {
    opacity: 1;
}

.filter_trigger:hover {
    color: #fff !important;
}

/* 🚀 [추가] 필터 그룹 및 타이틀 간격 조정 */
.filter_group {
    margin-bottom: 35px; /* 👈 섹션(기간/정렬) 사이의 간격 확대 */
}

.filter_group label {
    display: block;
    color: #fff;
    font-weight: bold;
    margin-bottom: 25px; /* 👈 타이틀 밑 버튼과의 간격 25px로 확대 */
    font-size: 16px;
    letter-spacing: -0.5px;
}

/* 🚀 필터 모달 내 캡슐 버튼 가로 한 줄 정렬 */
.filter_capsules {
    display: flex;
    flex-wrap: nowrap; /* 👈 줄바꿈 금지 */
    gap: 10px;
    overflow-x: auto; /* 👈 가로 스크롤 허용 */
    padding-bottom: 10px; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
}

.filter_capsules::-webkit-scrollbar {
    display: none; /* 스크롤바 숨김 */
}

.capsule {
    flex: 0 0 auto; 
    padding: 10px 20px;
    border-radius: 25px;
    background: #252830;
    border: 1px solid #333;
    color: #aaa;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap; 
    transition: all 0.2s ease;
}

/* 활성화된 캡슐 (보라색 강조) */
.capsule.active {
    background: #7c4dff !important;
    color: #fff !important;
    border-color: #7c4dff !important;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(124, 77, 255, 0.3);
}

.capsule:hover:not(.active) {
    background: #2d3139;
    color: #fff;
}

/* 적용 버튼 스타일 */
.btn_filter_apply {
    width: 100%;
    padding: 18px;
    background: #7c4dff;
    color: #fff;
    border: none;
    border-radius: 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px; /* 그룹 간격이 넓어졌으므로 살짝 조정 */
    transition: 0.3s;
    box-shadow: 0 5px 20px rgba(124, 77, 255, 0.2);
}

.btn_filter_apply:hover {
    background: #6a3ee5;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 77, 255, 0.4);
}

/* 모바일 전용 슬라이드 업 애니메이션 */
@media screen and (max-width: 768px) {
    #filterSetupModal {
        align-items: flex-end !important;
    }
    .filter_setup_content {
        max-width: 100% !important;
        border-radius: 25px 25px 0 0 !important;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .modal_overlay[style*="display: flex"] .filter_setup_content {
        transform: translateY(0);
    }
}