/* 제품 검색 — 제품 카테고리 검색창 + 검색 결과 화면 (2026-10-14). 국문·영문 공용 */

/* ── 검색창 ───────────────────────────── */
.search_form { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 760px; margin: 0 auto; }
.search_form .search_input {
  flex: 1; min-width: 0; height: 56px; padding: 0 20px;
  border: 1px solid #cfd6dd; border-radius: 28px;
  font-size: 17px; color: #262626; background: #fff; outline: none;
}
.search_form .search_input:focus { border-color: #0a4a8c; }
.search_form .search_submit {
  flex: none; height: 56px; padding: 0 26px; border: 0; border-radius: 28px;
  background: #0a4a8c; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.search_form .search_submit i { font-size: 20px; }
.search_hint { margin-top: 14px; color: #8a8a8a; font-size: 14px; text-align: center; }

/* ── 검색 결과 화면 ───────────────────────────── */
.sc_search { padding-bottom: 120px; }
.sc_search .search_top { margin: 10px 0 40px; }
.sc_search .search_summary { margin-top: 26px; font-size: 18px; color: #404040; text-align: center; }
.sc_search .search_summary strong { color: #0a4a8c; font-weight: 700; }
.sc_search .search_empty {
  padding: 70px 20px; text-align: center; color: #6b6b6b; font-size: 17px; line-height: 1.7;
  border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
}
.sc_search .search_empty i { display: block; font-size: 44px; color: #c3c9cf; margin-bottom: 12px; }
.sc_search .board_list .tit_box .cate {
  display: block; margin-bottom: 6px; font-size: 13px; color: #0a4a8c; font-weight: 600;
}

/* ── 제품 카테고리 상단 검색 영역 ───────────────────────────── */
/* 결과 화면과 같은 클래스를 쓰고, 아래 카테고리 섹션과 붙도록 여백만 줄인다 */
.sc_search.sc_search_cate { padding-bottom: 0; }
.sc_search.sc_search_cate .search_top { margin: 10px 0 0; }
section.sc_search.sc_search_cate .sc_inner.w1280 { padding-bottom: 0; }
section.sc_search_cate + section.s2_0_sc1 .sc_inner.w1280 { padding-top: 70px; }
/* 모바일: sub.css 가 .sc_board .sc_inner { padding: 70px 16px !important } 라서 같은 !important 로 위아래만 덮는다 */
@media screen and (max-width: 768px) {
  section.sc_search.sc_search_cate .sc_inner.w1280 { padding-bottom: 0 !important; }
  section.sc_search_cate + section.s2_0_sc1 .sc_inner.w1280 { padding-top: 40px !important; }
}

@media screen and (max-width: 1350px) {
  .search_form .search_input { height: 48px; font-size: 16px; padding: 0 16px; }
  .search_form .search_submit { height: 48px; padding: 0 16px; }
  .search_form .search_submit span { display: none; }
}
@media screen and (max-width: 768px) {
  .sc_search { padding-bottom: 70px; }
  .sc_search .search_summary { font-size: 16px; }
  .search_hint { font-size: 13px; }
}

/* ── 제품 검색 위젯 — 오른쪽 아래 상시 노출 (2026-10-15) ───────────────────── */
.sw { position: fixed; right: 28px; bottom: 28px; z-index: 9990; font-family: inherit; }
.sw_fab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: 28px;
  background: #0a4a8c; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 24px rgba(10, 74, 140, .35); transition: transform .2s ease, box-shadow .2s ease;
}
.sw_fab i { font-size: 22px; line-height: 1; }
.sw_fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10, 74, 140, .4); }
.sw_fab:focus-visible, .sw_close:focus-visible, .sw_submit:focus-visible { outline: 3px solid #7fb4e6; outline-offset: 2px; }
.sw.is_open .sw_fab { display: none; }
/* 메인 페이지의 스크롤 버튼(아래로/맨 위로)은 위젯 버튼 바로 위로 올린다 */
.sw_on .btn_scroll { bottom: 104px; }

.sw_panel {
  position: absolute; right: 0; bottom: 0;
  width: 380px; height: 560px; max-height: calc(100vh - 56px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
}
.sw_panel[hidden] { display: none; }
.sw_head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 16px 20px; background: #0a4a8c; color: #fff; }
.sw_title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 600; }
.sw_title i { font-size: 20px; }
.sw_close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sw_close:hover { background: rgba(255, 255, 255, .15); }

.sw_body { flex: 1; overflow-y: auto; padding: 18px 16px; background: #f4f6f8; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.sw_msg { max-width: 88%; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; word-break: break-word; }
.sw_msg p { margin: 0; }
.sw_bot { align-self: flex-start; background: #fff; color: #262626; border-top-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.sw_me { align-self: flex-end; background: #0a4a8c; color: #fff; border-top-right-radius: 4px; }
.sw_ex { margin-top: 4px !important; color: #8a8a8a; font-size: 13px; }
.sw_count { font-weight: 600; margin-bottom: 8px !important; }
.sw_none { color: #555; }
.sw_bot:has(.sw_list) { max-width: 100%; width: 100%; }

.sw_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sw_list a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: inherit; text-decoration: none; border: 1px solid #edf0f3; }
.sw_list a:hover { background: #eef4fa; border-color: #cfe0f0; }
.sw_thumb { flex: none; width: 56px; height: 40px; border-radius: 6px; background: #f1f3f5; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sw_thumb img { width: 100%; height: 100%; object-fit: contain; }
.sw_txt { min-width: 0; display: flex; flex-direction: column; }
.sw_name { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.sw_cate { font-style: normal; font-size: 12px; color: #0a4a8c; font-weight: 600; }
.sw_name2 { font-size: 12px; color: #6b6b6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw_more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: #0a4a8c; text-decoration: none; }
.sw_more::after { content: " →"; }
.sw_more:hover { text-decoration: underline; }

.sw_dots { display: inline-block; width: 36px; height: 10px; background:
  radial-gradient(circle, #9aa4ae 3px, transparent 3.5px) 0 50% / 12px 10px repeat-x; animation: sw_blink 1s infinite; }
@keyframes sw_blink { 50% { opacity: .35; } }

.sw_form { flex: none; display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e5e8eb; background: #fff; }
.sw_input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #cfd6dd; border-radius: 22px; font-size: 15px; color: #262626; outline: none; }
.sw_input:focus { border-color: #0a4a8c; }
.sw_submit { flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: #0a4a8c; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.sw_submit:disabled { opacity: .55; cursor: default; }

@media screen and (max-width: 768px) {
  .sw { right: 16px; bottom: 16px; }
  .sw_fab { height: 50px; padding: 0 18px 0 15px; font-size: 15px; }
  .sw.is_open { left: 0; right: 0; bottom: 0; }
  .sw_panel { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 80vh; max-height: none; border-radius: 18px 18px 0 0; }
  .sw_input { font-size: 16px; }   /* iOS 확대 방지 */
}
@media (prefers-reduced-motion: reduce) { .sw_fab, .sw_dots { transition: none; animation: none; } }

/* ── 헤더 검색 아이콘 — 누르면 헤더 아래 검색창이 펼쳐진다 (2026-10-15) ── */
.header .util_item.util_search { margin-right: 14px; }
.header .btn_hd_search {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
  transition: color .3s ease, background .3s ease;
}
.header .btn_hd_search:hover { background: rgba(255, 255, 255, .15); }
.header.on .btn_hd_search { color: #262626; }
.header.on .btn_hd_search:hover { background: rgba(0, 0, 0, .06); }
.header .btn_hd_search:focus-visible { outline: 3px solid #7fb4e6; outline-offset: 2px; }
/* PC: 헤더는 logo | nav | util 을 space-between 으로 나누고 펼침 메뉴는 화면 가운데 기준이다.
   아이콘이 util 폭을 늘리면 상단 메뉴만 밀려 펼침 메뉴와 열이 어긋난다(2026-10-14 에 겪음).
   그래서 PC 에서는 아이콘을 흐름에서 빼서 util 폭을 원래대로 둔다. */
@media screen and (min-width: 1351px) {
  .header .util { position: relative; }
  .header .util_item.util_search { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 14px; }
}
@media screen and (max-width: 1350px) {
  .header .util_item.util_search { margin-right: 6px; }
}
.header.search_open .btn_hd_search { background: rgba(255, 255, 255, .18); }
.header.on.search_open .btn_hd_search { background: rgba(0, 0, 0, .06); }

/* ── 헤더 검색창 (아이콘으로 펼침) ── */
.hd_search_layer {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid #e5e5e5;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .10);
  padding: 26px 20px 28px; z-index: 50;
}
.hd_search_layer[hidden] { display: none; }
/* 모바일 헤더는 overflow:hidden 이라 펼친 검색창이 잘린다 — 열렸을 때만 풀어 준다 */
.header.search_open { overflow: visible; }
.hd_search_layer .search_form { max-width: 820px; }
.hd_search_close {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #f1f3f5; color: #555; font-size: 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.hd_search_close:hover { background: #e5e8eb; }
.hd_search_layer .search_hint { margin-top: 10px; }
@media screen and (max-width: 1350px) {
  .hd_search_layer { padding: 16px 16px 18px; border-radius: 0 0 20px 20px; }
  .hd_search_close { width: 40px; height: 40px; }
}