/* 필터 접기/펼치기 — 레거시 WMS .btnExpand 1:1 (이미지 배경 대신 순수 CSS) */ .mSearchEngine.eFoldable { position: relative; /* padding-bottom 제거 — 박스 본체 컴팩트, 핸들은 외부에 매달림 */ margin-bottom: 32px; /* 외부 핸들 자리 + 아래 콘텐츠와 충분한 간격 */ } /* 핸들 — 레거시 WMS 원본 1:1 (이미지 참조): 박스 외부 하단 가운데, 화살표만 표시 */ .mSearchEngine.eFoldable .btnExpand { position: absolute; top: auto; /* legacy app-override.css:1847 의 top:-12px 무력화 */ right: auto; /* legacy 의 right:12px 무력화 */ left: 50%; bottom: -20px; /* 박스 하단 외부로 더 내려옴 (핸들 height 20px 의 거의 전체가 외부) */ transform: translateX(-50%); width: 110px; height: 20px; padding: 0 10px; box-sizing: border-box; gap: 6px; font-size: 10px; font-weight: 700; border: 0; border-radius: 0; /* \ __ / 사다리꼴 + 하단 양 모서리에 약간의 곡률 (Quadratic curve) */ clip-path: path('M 0 0 L 110 0 L 96 16 Q 94 20 90 20 L 20 20 Q 16 20 14 16 Z'); background: #c8d0dc; /* .search 하단 border 색과 동일 — 채워진 핸들 */ color: #1a2640; /* 검정 톤 — 회색 배경 위 가독성 확보 */ cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(20, 30, 50, 0.06); transition: background-color 120ms, color 120ms; z-index: 2; } .mSearchEngine.eFoldable .btnExpand:hover { background: #1f4d8a; color: #ffffff; /* 호버 시 진한 파란 배경 → 흰색 글자 (대비 충분) */ border-color: #1f4d8a; } /* 핸들 상단의 박스 하단 라인 가림 마스크 — 호버 시에도 색이 겹쳐 보이지 않게 */ .mSearchEngine.eFoldable .btnExpand::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; /* 박스 하단 라인 3px 위치 정확히 덮음 */ height: 3px; background: inherit; /* 핸들 배경색과 동일 (#fff 또는 hover 시 #f4f7fb) */ } /* .search 박스 하단 border — 핸들이 매달리는 라인이라 굵게 강조 */ .mSearchEngine.eFoldable .search { border-bottom: 3px solid #c8d0dc; transition: border-color 120ms; } /* 핸들 호버 시 박스(.search) 하단 테두리도 같은 색으로 연결감 강화 (:has() 사용) */ .mSearchEngine.eFoldable:has(.btnExpand:hover) .search { border-bottom-color: #1f4d8a; } .mSearchEngine.eFoldable .btnExpand:focus-visible { outline: 2px solid #1f4d8a; outline-offset: 1px; } /* "검색 닫기/열기" 텍스트 — 화살표와 함께 표시 */ .mSearchEngine.eFoldable .btnExpand .eExpandText { line-height: 1; letter-spacing: -0.02em; white-space: nowrap; } /* 화살표 — 펼침 상태(검색 닫기) = ▼, 접힘 상태(검색 열기) = ▲ */ .mSearchEngine.eFoldable .btnExpand::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 160ms; } /* 접힘 상태 — 첫 row(주요 필터) + .btnEngine(검색) 은 노출, 나머지 row 만 숨김. .eFilterPreFolded 는 head.ejs 의 동기 inline script 가 localStorage 보고 에 박는 것 — JS 가 .isFolded 적용하기 전에도 first paint 부터 접힌 상태로 보이게 함. */ .mSearchEngine.eFoldable.isFolded .search table tbody > tr:not(:first-child), html.eFilterPreFolded .mSearchEngine.eFoldable .search table tbody > tr:not(:first-child) { display: none; } .mSearchEngine.eFoldable.isFolded .btnExpand { background: #c8d0dc; /* .search 하단 border 색과 동일 — 접힘 상태에서도 통일감 */ } /* 접힘 상태 호버 — 펼침 호버와 동일한 진한 파랑 (specificity 보정) */ .mSearchEngine.eFoldable.isFolded .btnExpand:hover { background: #1f4d8a; color: #ffffff; border-color: #1f4d8a; } .mSearchEngine.eFoldable.isFolded .btnExpand::after { transform: rotate(180deg); /* ▲ "열기" */ }