@charset "UTF-8";
/* ============================================================
   PC 헤더 포커스 검색 발견 패널 v1.0 (2026-07-24)
   기획전 드롭다운 시각문법: 흰 패널·라운드 하단·그림자·max-width 700 중앙.
   DOM은 search_panel.js가 동적 생성(헤더 JSP 무수정). 데이터=전역 __spCfg/__popKw + 기존 AJAX.
   ============================================================ */
/* 2026-07-24 기존 헤더 검색 드롭다운(.search_keyword_wrap) PC 비노출 — 새 패널만 노출.
   search_panel.css는 PC(shop) 한정 로드라 이 규칙도 PC 스코프. header.jsp 무수정. */
.head_menu_wrap .search_keyword_wrap,
.search_wrap .search_keyword_wrap,
.search_keyword_wrap{ display:none !important; visibility:hidden !important; }

/* 페이지 딤 백드롭 — 패널 바로 아래(검색창 하단)부터 화면 끝까지 살짝 딤 → 배너와 확실히 분리.
   top은 search_panel.js가 검색창 기하로 세팅(입력창은 딤 위에 남아 계속 타이핑 가능). 클릭=닫기. */
.spanel_backdrop{ display:none; position:fixed; left:0; right:0; bottom:0; background:rgba(0,0,0,.18); z-index:2147479990; }
.spanel_backdrop.on{ display:block; }

/* 패널: 검색창 기준 고정 앵커(위치·폭=search_panel.js). 불투명 흰 면 + 강한 테두리/그림자로 배너 위 또렷이 분리.
   body 직속 append(스택 컨텍스트 이슈 없음), z-index=헤더(10)·배너(1~3) 위. */
.spanel{ display:none; position:fixed; z-index:2147480000; box-sizing:border-box; width:660px; max-width:700px; min-width:560px;
  background:#ffffff; border:1px solid #ddd6c6; border-top:2.5px solid #3d6041; border-radius:14px;
  box-shadow:0 24px 48px -12px rgba(20,30,20,.45), 0 2px 8px rgba(0,0,0,.10); padding:20px 24px 22px; }
.spanel.on{ display:flex; gap:28px; }
.spanel{ max-height:calc(100vh - 200px); overflow-y:auto; }
.spanel .spcol{ flex:1 1 0; min-width:0; }
.spanel .spcol-r{ flex:0 0 258px; border-left:1px solid #f1f0ea; padding-left:24px; }
.spanel .sptitle{ font-size:13.5px; font-weight:800; color:#1d271e; margin:0 0 12px; letter-spacing:-.01em; }
.spanel .sptitle .spsub{ font-size:11.5px; font-weight:600; color:#8b917f; margin-left:5px; }
.spanel .spsec{ margin-bottom:20px; }
.spanel .spsec:last-child{ margin-bottom:0; }

/* 최근 검색어 칩 */
.spanel .spchips{ display:flex; flex-wrap:wrap; gap:8px; }
.spanel .spchip{ display:inline-flex; align-items:center; background:#f5f7f2; border:1px solid #e2e8dd; border-radius:999px; padding:0 5px 0 12px; }
.spanel .spchip a{ font-size:13px; font-weight:600; color:#31402f; padding:6px 0; cursor:pointer; text-decoration:none; }
.spanel .spchip .spx{ margin-left:2px; width:20px; height:20px; border:none; background:none; color:#aab0a3; cursor:pointer; font-size:14px; line-height:1; padding:0; }
.spanel .spchip .spx:hover{ color:#5a6157; }

/* 인기 검색어 2열 x 5 */
.spanel .sppop{ list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-template-rows:repeat(5,auto); grid-template-columns:1fr 1fr; column-gap:20px; }
.spanel .sppop li a{ display:flex; align-items:center; gap:10px; padding:7px 6px; cursor:pointer; border-radius:7px; text-decoration:none; }
.spanel .sppop li a:hover, .spanel .sppop li a.on{ background:#f2f6f1; }
.spanel .sppop .rk{ flex:0 0 auto; width:16px; text-align:center; font-family:"Roboto",sans-serif; font-variant-numeric:tabular-nums; font-size:14px; font-weight:800; color:#8b917f; }
.spanel .sppop li:nth-child(-n+3) .rk{ color:#d64541; }
.spanel .sppop .kw{ flex:1; min-width:0; font-size:14px; font-weight:500; color:#1d271e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 우측: 검색 1위 생활재 4 */
.spanel .spgoods{ display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; }
.spanel .spcard{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.spcard .spthumb img{ max-width:100%; }
.spanel .spcard .spthumb{ position:relative; display:block; width:100%; aspect-ratio:1/1; border-radius:11px; overflow:hidden; background:#fafafa; border:1px solid #eee; text-decoration:none; }
.spanel .spcard .spthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.spanel .spcard .spkwlab{ position:absolute; left:5px; top:5px; max-width:calc(100% - 10px); background:rgba(61,96,65,.92); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spanel .spcard .spinfo{ min-width:0; }
.spanel .spcard .spnm{ display:block; font-size:12.5px; color:#1d271e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.spanel .spcard .spprice{ font-size:13px; color:#1d271e; margin-top:2px; }
.spanel .spcard .spprice b{ font-family:"Roboto",sans-serif; font-weight:800; }
.spanel .spcard .spadd{ display:block; width:100%; margin-top:3px; background:#3d6041; color:#fff; border:none; border-radius:8px; padding:8px 0; font-size:12px; font-weight:700; cursor:pointer; }
.spanel .spcard .spadd:active{ background:#2f5233; }
.spanel .spempty{ font-size:13px; color:#9aa08f; padding:6px 0; }

/* PC 검색결과 정비: 결과수 · 하이라이트 · 0건 */
.product_list_wrap .src_count{ font-size:15px; color:#5a6157; margin:2px 0 18px; }
.product_list_wrap .src_count b{ font-weight:800; color:#1d271e; }
.product_list_wrap .txt_box .title mark.srch_hl, mark.srch_hl{ background:#fdf0c2; color:inherit; padding:0 1px; border-radius:2px; }
.product_list_wrap .src_empty{ text-align:center; padding:56px 20px; }
.product_list_wrap .src_empty_t{ font-size:19px; color:#1d271e; margin-bottom:8px; }
.product_list_wrap .src_empty_t b{ color:#3d6041; }
.product_list_wrap .src_empty_s{ font-size:14px; color:#8b917f; margin-bottom:22px; }
.product_list_wrap .src_rec{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.product_list_wrap .src_rec a{ background:#f5f7f2; border:1px solid #e2e8dd; border-radius:999px; padding:9px 16px; font-size:14px; font-weight:600; color:#31402f; text-decoration:none; }

/* PC 결과 카드 metatop (업체명·평점) — 모바일과 동일 자연 생략 */
.product_list_wrap .txt_box .metatop{ display:flex; align-items:center; gap:8px; margin-bottom:5px; flex-wrap:wrap; }
.product_list_wrap .txt_box .metatop .farmer{ font-size:12px; color:#6b7268; font-weight:600; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product_list_wrap .txt_box .metatop .rvstat{ display:inline-flex; align-items:center; gap:3px; font-size:12px; color:#5a6157; }
.product_list_wrap .txt_box .metatop .rvstat .star{ color:#f8a31e; }
.product_list_wrap .txt_box .metatop .rvstat b{ font-family:"Roboto",sans-serif; font-weight:800; color:#1d271e; }
.product_list_wrap .txt_box .metatop .rvstat .rvc{ color:#9aa08f; }

/* ============================================================
   2026-07-24 PC 헤더 검색창 재디자인 v1.5 — 알약·딥그린 테두리·흰 배경·원형 버튼·시인성
   header.jsp 무수정, search_panel.css PC 스코프. 검색창(.head_menu_wrap .search_wrap) 재스타일.
   ============================================================ */
.head_menu_wrap .search_wrap{ top:4px; }
.head_menu_wrap .search_wrap input{ width:320px; height:42px; background:#fff; border:1.5px solid #3d6041; border-radius:999px;
  padding:0 48px 0 18px; font-size:15px; font-weight:500; color:#1d271e; box-sizing:border-box; letter-spacing:-.01em;
  transition:box-shadow .15s ease, border-color .15s ease; }
.head_menu_wrap .search_wrap input::placeholder{ color:#9aa08f; font-weight:500; }
.head_menu_wrap .search_wrap input:focus,
.head_menu_wrap .search_wrap.sp_active input{ outline:none; border-color:#3d6041; box-shadow:0 0 0 3px rgba(248,163,30,.38); }
/* 우측 원형 딥그린 버튼(돋보기 흰색) */
.head_menu_wrap .search_wrap button{ position:absolute; top:50%; right:5px; bottom:auto; transform:translateY(-50%); width:34px; height:34px; padding:0;
  background:#3d6041; border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.head_menu_wrap .search_wrap button:hover{ background:#2f5233; }
.head_menu_wrap .search_wrap button .icon{ width:17px; height:17px; filter:brightness(0) invert(1); }