/* =========================================
   ★ 메뉴보기: 1단(가로) & 2단(공중부양 드롭다운형)
========================================= */
#accordion_menu .depth1-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; list-style: none; padding: 0; margin: 0; }

/* 💡 1차 메뉴 li 기준점 설정 (여기서부터 서브메뉴가 뜹니다) */
#accordion_menu .depth1-list > li { display: block; position: relative; }

/* 1단 (가로 그룹 메뉴) */
#accordion_menu .depth1-list > li > a { 
    display: inline-flex; align-items: center; padding: 4px 10px; background: #fff; 
    border: 1px solid #cbd5e1; border-radius: 12px; font-size: 12px; font-weight: 600; 
    color: #475569; text-decoration: none; transition: all 0.2s; white-space: nowrap; 
    position: relative; z-index: 10; /* 버튼이 서브메뉴보다 위에 오도록 */
}
#accordion_menu .depth1-list > li > a > i { margin-right: 4px; font-size: 11px; }
#accordion_menu .depth1-list > li > a .arrow-icon { margin-left: 5px; margin-right: 0; transition: transform 0.2s; font-size: 10px; color: #94a3b8; }

#accordion_menu .depth1-list > li > a:hover,
#accordion_menu .depth1-list > li > a.active,
#accordion_menu .depth1-list > li.on > a { 
    background: #10b981; color: #fff; border-color: #10b981; box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3); 
}
#accordion_menu .depth1-list > li.on > a .arrow-icon { transform: rotate(180deg); color: #fff; }

/* ★ 2단 (서브메뉴 - 허공에 띄워서 절대 위치 지정) */
.sub-menu-wrap { 
    display: none; 
    position: absolute; /* 💡 핵심: 기존 레이아웃을 밀어내지 않고 공중에 띄움 */
    top: calc(100% + 5px); /* 1차 메뉴 바로 5px 아래에 위치 */
    left: 0; 
    z-index: 100; /* 다른 요소들보다 무조건 위에 보이게 */
    width: max-content; 
    max-width: 250px; /* 너무 넓어지지 않게 제한 */
}
.sub-menu-container { 
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; 
    padding: 8px; background: #fff; border: 1px solid #cbd5e1; /* 테두리 조금 더 진하게 */
    border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* 그림자를 더 진하게 해서 뜬 느낌 강조 */
    list-style: none; margin: 0;
}
.sub-menu-container li { display: block; width: auto; }
.sub-menu-container li a { 
    display: inline-block; padding: 4px 10px; background: transparent; 
    border: 1px solid #e2e8f0; border-radius: 12px; font-size: 11px; 
    color: #475569; text-decoration: none; transition: 0.2s; white-space: nowrap;
}
.sub-menu-container li a i { color: #94a3b8; margin-right: 3px; }
.sub-menu-container li a.on, .sub-menu-container li a:hover { 
    background: #f1f5f9; color: #1e293b; font-weight: 600; border-color: #cbd5e1;
}

/* =========================================
   모바일 최적화
========================================= */
@media (max-width: 767px) {
	.title-controls { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px; }
	.tc-left { justify-content: flex-start; gap: 6px; }
	.tc-right { width: 100%; }
	.title-search-form { width: 100%; }
	.title-search-form input { width: 100%; flex-grow: 1; }
    
    /* 모바일에서는 화면 밖으로 잘리지 않게 조정 */
    .sub-menu-wrap { max-width: 90vw; }
}