@charset "utf-8";

/* [1. 공통 레이아웃] */
.gn_list_container, .gn_w_container { 
    max-width:1200px; margin:40px auto; padding:0 20px; 
    font-family:'Pretendard', sans-serif; color:#333; line-height:1.6; 
}
.gn_list_container *, .gn_w_container * { box-sizing:border-box; }

/* [2. 리스트 필터 - PC용 가로 나열 고정] */
.gn_filter_wrap { display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; gap:20px; }
.gn_filter_left { display:flex; gap:15px; }

/* ★ 해결: PC에서 보이던 작은 박스형태 드롭다운 버튼 제거 ★ */
.mobile_dropdown_btn { display: none !important; }

.gn_filter_group { position: relative; background:#cecece; border-radius:18px; padding:6px; }

/* PC 필터 아이템 가로 정렬 */
.filter_items { display: flex !important; gap: 5px; }

.gn_filter_btn { 
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:8px 25px; border-radius:14px; text-decoration:none !important; 
    color:#fff; font-weight:700; min-width:max-content; white-space: nowrap; transition: 0.2s;
}
.gn_filter_btn.active { 
    background:#fff; color:#111 !important; border:2px solid #111; 
    box-shadow:0 4px 12px rgba(0,0,0,0.15); 
}
.gn_filter_btn small { font-size:10px; font-weight:400; opacity:0.8; margin-top:2px; }

/* 검색바 */
.gn_search_inner { display:flex; border:2px solid #111; border-radius:15px; background:#fff; overflow:hidden; height:58px; }
.gn_stx_input { border:none; padding:0 20px; width:220px; font-size:15px; outline:none; font-weight:600; }
.gn_search_btn { background:#fff; border:none; border-left:1px solid #eee; padding:0 20px; cursor:pointer; font-weight:800; display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* [3. 카드 리스트] */
.gn_card_ul { display:grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap:35px; list-style:none; padding:0; margin:0; }
.gn_card_item { border-radius:25px; overflow:hidden; border:1px solid #eee; background:#fff; transition: 0.3s; }
.gn_card_item:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.gn_card_img { position:relative; aspect-ratio:4 / 5.5; overflow:hidden; background:#f8f8f8; }
.gn_card_img img { width:100%; height:100%; object-fit:cover; }
.gn_card_badge { position:absolute; top:15px; left:15px; background:#ff3d00; color:#fff; padding:6px 14px; border-radius:10px; font-size:12px; font-weight:800; z-index:10; }
.gn_card_body { padding:20px; }
.gn_card_title { font-size:19px; font-weight:800; margin-bottom:12px; color:#111; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gn_card_info { color:#888; font-size:14px; }
.gn_write_wrap { margin-top:50px; text-align:right; }
.gn_btn_write { display:inline-block; padding:18px 45px; background:#111; color:#fff !important; border-radius:15px; text-decoration:none !important; font-weight:800; font-size:16px; }

/* [4. 글쓰기 페이지 복구] */
.gn_w_box { background:#fff; border:1px solid #ddd; border-radius:30px; padding:40px; box-shadow:0 15px 35px rgba(0,0,0,0.05); }
.gn_w_title { font-size:24px; font-weight:900; text-align:center; margin-bottom:40px; }
.gn_label { display:block; font-size:15px; font-weight:800; color:#4a5568; margin-bottom:10px; padding-left:5px; }

.gn_w_row { margin-bottom:25px; width: 100%; }
.gn_flex_row { display:flex; gap:20px; margin-bottom:25px; align-items: flex-end; }
.gn_col_1 { flex: 1; }
.gn_col_2 { flex: 2; }

.gn_input_text, .gn_input_select { width:100%; height:60px; border:1px solid #ddd; border-radius:15px; padding:0 20px; font-size:16px; outline:none; background:#f9f9f9; }

/* 에디터 찌그러짐 방지 */
.gn_editor_area { margin: 30px 0; width: 100% !important; display: block !important; clear: both; }
.gn_editor_container { width: 100% !important; border: 1px solid #ddd; border-radius: 10px; padding: 5px; background:#fff; }

.gn_w_btns { display:flex !important; justify-content:center; align-items:center; gap:15px; margin:50px 0 100px; width:100%; }
.btn_cancel { display:flex !important; align-items:center; justify-content:center; width:160px; height:65px; background:#f1f5f9; color:#64748b !important; border-radius:18px; text-decoration:none !important; font-weight:800; }
.btn_submit { display:flex !important; align-items:center; justify-content:center; width:280px; height:65px; background:#111; color:#fff !important; border-radius:18px; border:none; font-size:18px; font-weight:800; cursor:pointer; }

/* [5. 모바일 반응형 - 992px 이하] */
@media (max-width: 992px) {
    .gn_filter_wrap { flex-direction: column; align-items: stretch; gap:15px; }
    .gn_filter_left { flex-direction: column; width: 100%; gap: 10px; }
    
    /* 모바일에서만 드롭다운 버튼 활성화 */
    .gn_filter_group { background: #fff; border: 2px solid #ddd; padding: 0; }
    .mobile_dropdown_btn { 
        display: flex !important; width: 100%; height: 55px; align-items: center; justify-content: space-between; 
        padding: 0 20px; background: none; border: none; font-weight: 800; font-size: 15px; color: #111; cursor: pointer;
    }
    
    /* 모바일에서는 평소에 숨김 */
    .filter_items { 
        display: none !important; position: absolute; top: 60px; left: -2px; width: calc(100% + 4px); 
        background: #fff; border: 2px solid #111; border-radius: 12px; z-index: 100; flex-direction: column !important; gap: 0;
    }
    .gn_filter_group.open .filter_items { display: flex !important; }
    
    .gn_filter_btn { width: 100%; padding: 15px 20px; border-radius: 0; border-bottom: 1px solid #eee; color: #666 !important; align-items: flex-start; }
    .gn_filter_btn.active { background: #f8f8f8; color: #ff3d00 !important; border: none; box-shadow: none; }

    .gn_flex_row { flex-direction: column; gap: 15px; }
    .gn_card_ul { grid-template-columns: 1fr 1fr; gap: 15px; }
    .gn_w_box { padding: 25px 20px; }
}