@charset "UTF-8";
/* 통합검색 자동완성 드롭다운 / 오탈자 추천 안내 (다이퀘스트 REST API v1.1) */

/* [2026-09-29]hsy-claude : 검색창 자동완성 드롭다운 신규. js/search/autoComplete.js 가 body 에 붙여 검색창 박스 바로 아래 좌표로 띄운다.
   메인 .vis_search / 서브 .sch_box form 이 overflow:hidden(둥근 테두리 유지용)이라 폼 안에 넣으면 잘려서 body 에 붙이는 방식을 썼다.
   고정 헤더(.mbiz header z-index:8) 보다 낮은 7 로 두어 스크롤 시 헤더 뒤로 들어가게 했다.
   색상은 layout.css 의 --blue/--bg_blue/--line 을 그대로 써서 메인·서브·앱 검색창의 파란 테두리 톤과 맞췄다 (변수 없는 화면 대비 기본값 포함). */
.auto_box{display:none;overflow:hidden;position:absolute;z-index:7;padding:8px 0;border:1px solid #DDD;border:var(--line,1px solid #DDD);border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(17,114,241,.12);}
.auto_box.on{display:block;}
.auto_tit{display:block;padding:6px 20px 8px;font-size:13px;font-weight:700;color:#888;}
.auto_list li{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:15px;line-height:1.4;color:#444;color:var(--text_black,#444);cursor:pointer;word-break:break-all;}
.auto_list li:before{flex-shrink:0;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat center/100%;content:"";}
.auto_list li strong{font-weight:700;color:#1172F1;color:var(--blue,#1172F1);}
.auto_list li.on, .auto_list li:hover{background:#F3F8FC;background:var(--bg_blue,#F3F8FC);}
.auto_list li.on:before, .auto_list li:hover:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231172F1' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");}

/* [2026-09-29]hsy-claude : 통합검색 결과(list.jsp) 오탈자 추천 안내 신규. .sch_result .total(연파랑 박스) 바로 아래에 붙는 한 줄 안내라
   같은 가운데 정렬·keep-all 을 쓰고, 추천어 링크만 --blue 굵게 + 밑줄로 눌러볼 수 있는 것처럼 보이게 했다. */
.typo_box{display:none;padding:12px 10px 0;word-break:keep-all;text-align:center;font-size:15px;color:#444;color:var(--text_black,#444);}
.typo_box.on{display:block;}
.typo_box em{font-weight:700;color:#1172F1;color:var(--blue,#1172F1);}
.typo_box a{margin-left:4px;font-weight:700;color:#1172F1;color:var(--blue,#1172F1);text-decoration:underline;text-underline-offset:3px;}

/* [2026-09-29]hsy-claude : 통합검색 결과(list.jsp) 하단 추천 검색어 신규. 오탈자 후보 키워드(감자 → 감지,가마)와 자동완성 키워드를
   .typo_box 안내 아래에 알약(pill) 버튼으로 나열한다. 인기검색어·게시판 탭(.bbs_tab)과 같은 --bg_blue 바탕 + --blue 글자 톤으로 맞췄고,
   좁은 화면에서는 flex-wrap 으로 자연스럽게 줄바꿈되게 고정 너비를 주지 않았다. 결과가 있고 안내할 추천어가 없으면 JS 가 .on 을 주지 않아 숨겨진다. */
.rec_box{display:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:12px 10px 0;}
.rec_box.on{display:flex;}
.rec_box strong{margin-right:4px;font-size:14px;font-weight:700;color:#111;color:var(--tit_black,#111);}
.rec_list{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.rec_list a{display:block;padding:6px 14px;border:1px solid #CCE0F0;border-radius:20px;background:#F3F8FC;background:var(--bg_blue,#F3F8FC);font-size:14px;color:#1172F1;color:var(--blue,#1172F1);}
.rec_list a:hover, .rec_list a:focus{border-color:#1172F1;border-color:var(--blue,#1172F1);background:#1172F1;background:var(--blue,#1172F1);color:#fff;}

@media (min-width:1024px){
.auto_box{padding:10px 0;border-radius:20px;}
.auto_tit{padding:6px 30px 10px;font-size:14px;}
.auto_list li{padding:12px 30px;font-size:18px;}
.auto_list li:before{width:18px;height:18px;}
.typo_box{padding-top:16px;font-size:18px;}
.rec_box{gap:10px;padding-top:16px;}
.rec_box strong{font-size:16px;}
.rec_list{gap:8px;}
.rec_list a{padding:8px 18px;font-size:16px;}
}