/* ==========================================================================
   search-area.modern.css  (v3)
   ----------------------------------------------------------------------
   list.jsp의 검색영역(.sub_search_area) + 액션버튼영역(.button_area) +
   페이지크기선택(.sel_box) 모던 오버레이.

   적용 방법: 기존 전역 CSS 로드 뒤에 한 줄만 추가.
     <link rel="stylesheet" href=".../search-area.modern.css">

   [v2 → v3 변경 이유]
   - 버튼: v2에서 아예 손 안 댔더니 예전 아이콘 스프라이트가 그대로 겹쳐 보이는
     게 싫다는 피드백 → 이번엔 버튼을 다시 모던하게(v1 스타일: 조회=브랜드블루
     solid, 삭제=레드톤, 나머지=중립) 만들되, 기존 아이콘 배경이미지 자체를
     background-image:none !important 로 강제 제거해서 겹침이 원천적으로
     안 생기게 처리. .ico 스팬도 숨김.
   - select와 input이 구분 안 되는 문제 → select에는 옅은 블루틴트 배경 +
     커스텀 화살표(순수 CSS, 이미지 파일 없음)를 줘서 input(흰 배경)과
     한눈에 구분되게 함.
   - 배경색: KRX 로고 블루(#00B4D5) 톤으로 카드 배경에 은은한 그라데이션 적용.
   ========================================================================== */

:root {
	/* ui.jqgrid.modern.css와 동일한 팔레트 - 실제 KRX 사이트 그리드에서
	   실측 추출한 색(헤더 스틸블루 #515F7D/#667491, 강조 블루 #3D7DC4) */
	--sa-primary: #3d7dc4;
	--sa-primary-dark: #2c5f9e;
	--sa-primary-soft: #e5eefa;

	--sa-text: #333333;
	--sa-text-muted: #666666;
	--sa-text-inverse: #ffffff;

	--sa-bg: #ffffff;
	--sa-bg-select: #f4f5f7;   /* select 전용 배경 - input(흰색)과 은은하게만 구분 */
	--sa-border: #e6e8ec;
	--sa-border-strong: #d3d7de;

	--sa-radius: 14px;
	--sa-radius-sm: 8px;

	/* 플로팅 카드 느낌: 붙어있는 얕은 그림자 + 멀리 퍼지는 부드러운 그림자를
	   같이 써서 "공중에 떠있는" 입체감을 낸다. */
	--sa-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -6px rgba(16, 24, 40, .14);
}

/* ---------- 검색 영역 카드: 뉴트럴 배경 + 포인트 컬러는 상단 라인/버튼에만 ----------
   큰 면적을 파스텔 컬러로 채우면 화면이 아기자기해 보여서(촌스러움), 배경은
   거의 무채색에 가깝게 두고 브랜드 블루는 상단 라인 + 조회 버튼 등 "포인트"
   로만 절제해서 쓴다. 이게 요즘 엔터프라이즈 대시보드(Linear/Notion/Vercel류)
   가 "고급스러워 보이는" 핵심 원리 - 색을 넓게 쓰지 않고 좁게, 아껴서 쓴다. */
.sub_search_area {
	background: #fbfbfc;
	border: 1px solid var(--sa-border);
	border-top: 2px solid var(--sa-primary);
	border-radius: var(--sa-radius);
	box-shadow: var(--sa-shadow);
	padding: 20px 22px;
	margin-bottom: 14px;
}
.sub_search_box table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}
.sub_search_box table caption {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.sub_search_box table tr {
	border-bottom: 1px solid var(--sa-border);
}
.sub_search_box table tr:last-child {
	border-bottom: 0 none;
}
.sub_search_box table td {
	padding: 9px 10px;
	vertical-align: middle;
	color: var(--sa-text);
}

/* ---------- 라벨 ---------- */
.sub_search_box .tit {
	font-weight: 600;
	color: var(--sa-text-muted);
	letter-spacing: -0.01em;
}
.sub_search_box .tit em {
	font-style: normal;
	color: #c9720a !important; /* KRX 로고 오렌지 계열 - 블루 배경/텍스트와 확실히 구분되는 색 */
	font-weight: 700;
}
.sub_search_box span.g,
.sub_search_area span.g {
	color: #1f9254 !important; /* 원본 #008000(어두운 그린)보다 밝고 선명하게. em의 오렌지와는 다른 계열 */
	font-weight: 600;
}

/* ---------- 입력창: 흰 배경 ---------- */
.sub_search_box input[type="text"] {
	border: 1px solid var(--sa-border-strong);
	border-radius: var(--sa-radius-sm);
	background-color: var(--sa-bg);
	color: var(--sa-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sub_search_box input[type="text"]:focus {
	outline: none;
	border-color: var(--sa-primary);
	box-shadow: 0 0 0 3px var(--sa-primary-soft);
}

/* ---------- 셀렉트: 옅은 블루 배경 + 커스텀 화살표로 input과 확실히 구분 ---------- */
.sub_search_box select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid var(--sa-border-strong);
	border-radius: var(--sa-radius-sm);
	background-color: var(--sa-bg-select);
	color: var(--sa-text);
	padding-right: 28px !important;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20d%3D%22M1%201l4%204%204-4%22%20fill%3D%22none%22%20stroke%3D%22%23666666%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 10px 6px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sub_search_box select:focus {
	outline: none;
	border-color: var(--sa-primary);
	box-shadow: 0 0 0 3px var(--sa-primary-soft);
	background-color: var(--sa-bg);
}
.sub_search_box select::-ms-expand {
	display: none; /* 구형 Edge/IE 네이티브 화살표 제거 */
}

/* 기간 단축 버튼 (당월/분기/당일/1개월 등) - 레이아웃은 안 건드리고 색상만 */
.sub_search_box .btn_date {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: normal !important;
	border: 1px solid var(--sa-border-strong);
	border-radius: 999px;
	background-color: var(--sa-bg);
	background-image: none !important;
	padding: 0 12px !important;
	color: var(--sa-text-muted);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sub_search_box .btn_date:hover {
	background-color: var(--sa-primary-soft);
	border-color: var(--sa-primary);
	color: var(--sa-primary-dark);
}

/* 라디오 / 체크박스 - 색상만 */
.sub_search_box input[type="radio"],
.sub_search_box input[type="checkbox"] {
	accent-color: var(--sa-primary);
}

/* ---------- 액션 버튼: 모던 스타일 복원 + 아이콘 이미지는 강제 제거 ----------
   background-image:none !important 로 기존 스프라이트 아이콘을 완전히 지워서
   내가 새로 넣는 배경색과 겹치지 않게 한다. .ico 스팬(아이콘 자리였던 요소)도
   숨긴다. */
.button_area button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: normal !important;
	background-image: none !important;
	border-radius: var(--sa-radius-sm);
	border: 1px solid var(--sa-border-strong);
	background-color: var(--sa-bg);
	color: var(--sa-text);
	font-weight: 500;
	cursor: pointer;
	/* 원본 버튼 CSS가 아이콘 자리만큼 padding-left를 따로 잡아둔 상태였음.
	   아이콘(.ico)은 숨겼지만 그 padding은 그대로 남아 빈 공백이 생기던
	   문제라, 여기서 좌우 대칭 padding으로 명시적으로 덮어씀. */
	padding: 8px 16px !important;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.button_area button .ico {
	display: none !important;
}
.button_area button:hover {
	background-color: #f7f9fc;
	border-color: var(--sa-border-strong);
}

/* 조회: 주 액션 - 브랜드 블루로 강조 */
.button_area .btn_scr02 {
	background-color: var(--sa-primary) !important;
	border-color: var(--sa-primary) !important;
	color: var(--sa-text-inverse) !important;
	font-weight: 600;
}
.button_area .btn_scr02:hover {
	background-color: var(--sa-primary-dark) !important;
	border-color: var(--sa-primary-dark) !important;
}

/* 삭제: 위험 액션 - 은은한 레드 톤 */
.button_area .btn_del {
	background-color: var(--sa-bg) !important;
	color: #c0392b !important;
	border-color: #f1c9c2 !important;
}
.button_area .btn_del:hover {
	background-color: #fdf1ef !important;
	border-color: #e0654e !important;
}

/* ---------- 페이지 크기 선택 (그리드 위) ---------- */
.sel_box select.sel01 {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid var(--sa-border-strong);
	border-radius: var(--sa-radius-sm);
	background-color: var(--sa-bg-select);
	color: var(--sa-text);
	padding-right: 24px !important;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20d%3D%22M1%201l4%204%204-4%22%20fill%3D%22none%22%20stroke%3D%22%23666666%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 10px 6px;
}
.sel_box select.sel01:focus {
	outline: none;
	border-color: var(--sa-primary);
	box-shadow: 0 0 0 3px var(--sa-primary-soft);
}
.sel_box .point {
	color: var(--sa-primary-dark);
	font-weight: 700;
}