@charset "utf-8";
/* ==========================================================================
   검색 첫화면   /static/shop-search/search.css
   2026-08-23 정희찬(PRO4)

   · 모바일 : 시안(1.png) 그대로 — «← 입력칸 🔍» 한 줄이 화면 맨 위.
              공용 모바일 헤더는 이 화면에서만 감춘다(검색바가 그 자리를 쓴다).
   · PC     : 공용 헤더(로고·GNB)는 그대로 두고, 그 아래 가운데에 큰 검색칸 +
              세 덩어리를 두 단으로 놓는다.
   ========================================================================== */

.ee-srch{
	font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
	             'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
	color: var(--wds-text, #171719);
	letter-spacing: -.01em;
	background: var(--wds-surface, #fff);
}

/* ── 검색바 ─────────────────────────────────────────────────────────── */
.sr-bar{
	position: sticky; top: 0; z-index: 60;
	display: flex; align-items: center; gap: 4px;
	padding: 6px 8px 6px 4px;
	background: var(--wds-surface, #fff);
	box-shadow: inset 0 -1px 0 var(--wds-line, #e6e7ea);
}
.sr-ico{
	flex: none; width: 44px; height: 44px; display: grid; place-items: center;
	border: 0; background: transparent; cursor: pointer; color: var(--wds-text, #171719);
	-webkit-tap-highlight-color: transparent;
}
.sr-box{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; }
.sr-in{
	flex: 1; min-width: 0; height: 44px; border: 0; outline: none; background: transparent;
	font-family: inherit; font-size: 16px; letter-spacing: -.006em; color: var(--wds-text, #171719);
}
.sr-in::placeholder{ color: var(--wds-text-assistive, #adb0b8); }

/* 지우기 — 브라우저 기본 ✕ 는 감추고 화면 언어에 맞는 원형 아이콘을 쓴다.
   ←·🔍 와 같은 굵기의 민 선으로 두면 «같은 무게의 행동» 세 개가 나란히 서서
   무엇이 주된 행동인지 흐려진다. 알약(.sr-chip)·물음표(.sr-help)와 같은
   «채운 둥근 조각» 계열로 두어 입력칸에 딸린 보조 장치임을 드러낸다. */
.sr-in::-webkit-search-cancel-button,
.sr-in::-webkit-search-decoration{ -webkit-appearance: none; appearance: none; }
.sr-in::-ms-clear{ display: none; }

.sr-clr{
	flex: none; width: 32px; height: 32px; padding: 0; border: 0;
	display: none; place-items: center;
	background: transparent; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.sr-box.is-filled .sr-clr{ display: grid; }
.sr-clr > svg{
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--wds-text-sub, #86888f); color: #fff;
	transition: background-color .18s ease, transform .18s ease;
}
.sr-clr:hover > svg{ background: var(--wds-text, #171719); }
.sr-clr:active > svg{ transform: scale(.9); }
@media (prefers-reduced-motion: reduce){
	.sr-clr > svg{ transition: none; }
}

/* ── 본문 ──────────────────────────────────────────────────────────── */
.sr-wrap{ padding: 4px 16px 40px; }
.sr-sec:first-child{ padding-top: 26px; }   /* 검색바와 첫 덩어리 사이 여백 */
.sr-sec{ padding: 18px 0 6px; }
.sr-h{
	display: flex; align-items: center; gap: 5px;
	margin: 0 0 12px;
	font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -.006em;
}
.sr-h .sr-h-r{
	margin-left: auto;
	font-size: 12.5px; font-weight: 400; color: var(--wds-text-sub, #86888f);
}
button.sr-h-r{ border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.sr-help{
	width: 15px; height: 15px; border-radius: 50%; flex: none;
	display: inline-grid; place-items: center;
	background: var(--wds-fill, #f4f4f5); color: var(--wds-text-sub, #86888f);
	font-size: 10px; font-weight: 700; line-height: 1;
}

/* 알약(최근·추천) */
.sr-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.sr-chip{
	display: inline-flex; align-items: center; gap: 6px;
	height: 34px; padding: 0 12px; border-radius: 1000px;
	background: var(--wds-fill, #f4f4f5); color: var(--wds-text, #171719);
	font-size: 13.5px; line-height: 1; text-decoration: none; white-space: nowrap;
}
.sr-chip.is-line{
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--wds-line-strong, #d3d5da);
}
.sr-chip-x{
	flex: none; width: 16px; height: 16px; margin-right: -4px;
	border: 0; background: transparent; padding: 0; cursor: pointer;
	color: var(--wds-text-assistive, #adb0b8); font-size: 15px; line-height: 1;
}
.sr-empty{ padding: 6px 0 2px; font-size: 13.5px; color: var(--wds-text-sub, #86888f); }

/* 인기 검색어 — 시안대로 1~5 / 6~10 두 줄단 */
.sr-rank{
	display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px;
	grid-auto-flow: column; grid-template-rows: repeat(5, auto);
}
.sr-rank > *{ min-width: 0; }
.sr-rank a{
	display: flex; align-items: center; gap: 12px;
	min-height: 38px; text-decoration: none; color: var(--wds-text, #171719);
	font-size: 14.5px; letter-spacing: -.004em;
}
.sr-rank .sr-no{
	flex: none; width: 14px; text-align: left;
	color: var(--wds-text-sub, #86888f); font-size: 13.5px; font-weight: 500;
}
.sr-rank a:nth-child(-n+3) .sr-no{ color: var(--wds-primary, #ff5c28); font-weight: 700; }
.sr-rank .sr-w{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 모바일 : 공용 모바일 헤더를 감추고 검색바가 그 자리를 쓴다 ── */
@media (max-width: 768px){
	/* 2026-08-23 요청 : 모바일에서는 탑메뉴·카피라이트를 감춘다(PC 는 그대로 둔다).
	   검색바가 화면 맨 위를 쓰는 시안 형태 — 나가는 길은 ← 와 하단 탭바. */
	.ee-srch #ee-header-root,
	.ee-srch #ee-footer-root{ display: none !important; }
	.sr-wrap{ max-width: none; }
}

/* ── PC : 공용 헤더는 그대로, 가운데 큰 검색칸 + 두 단 ── */
@media (min-width: 769px){
	.sr-bar{
		position: static;
		max-width: 720px; margin: 56px auto 0; padding: 0 20px;
		box-shadow: none;
	}
	.sr-bar .sr-back{ display: none; }            /* PC 는 뒤로가기 대신 헤더가 있다 */
	.sr-bar .sr-box{
		flex: 1; display: flex; align-items: center; gap: 8px;
		height: 56px; padding: 0 8px 0 20px; border-radius: 1000px;
		background: var(--wds-surface, #fff);
		box-shadow: inset 0 0 0 1px var(--wds-line-strong, #d3d5da);
	}
	.sr-bar .sr-box:focus-within{ box-shadow: inset 0 0 0 1px var(--wds-text, #171719); }
	.sr-in{ height: 54px; font-size: 17px; }
	.sr-wrap{
		max-width: 1000px; margin: 0 auto; padding: 8px 20px 80px;
		display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: start;
	}
	.sr-sec-recent{ grid-column: 1; }
	.sr-sec-suggest{ grid-column: 1; }
	.sr-sec-rank{ grid-column: 2; grid-row: 1 / span 2; }
	.sr-h{ font-size: 17px; }
	.sr-chip{ height: 36px; font-size: 14px; }
	.sr-rank a{ min-height: 42px; font-size: 15px; }
}

/* 화면이 아주 좁을 때 인기검색어는 한 줄단으로 */
@media (max-width: 359px){
	.sr-rank{ grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-08-23 요청 : 「지금 인기 있는 상품」 — PC 6열
   상품 데이터는 상품리스트 셸이 쓰는 것과 «같은 창구» 를 쓴다
   (/common/ajax/exec_getListReact.asp?sort=favorite) — 목록 화면의
   「지금 인기 있는 상품」과 같은 상품이 나온다.
   ══════════════════════════════════════════════════════════════════════════ */
.sr-pop{ margin-top: 8px; }
.sr-pop-grid{
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px;
}
.sr-card{ display: block; text-decoration: none; color: inherit; min-width: 0; }
.sr-th{
	width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
	border-radius: 4px; background: var(--wds-fill, #f4f4f5);
}
.sr-th img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-card-b{
	margin-top: 8px; font-size: 12.5px; line-height: 17px; font-weight: 600;
	color: var(--wds-text-sub, #86888f);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sr-card-n{
	margin-top: 2px; font-size: 13.5px; line-height: 19px; color: var(--wds-text, #171719);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-card-p{ margin-top: 5px; font-size: 14px; font-weight: 700; }
.sr-card-p .sr-off{ margin-right: 5px; color: var(--wds-primary, #ff5c28); }

@media (min-width: 769px){
	/* 인기상품은 두 단 아래에 «가로 전체» 로 놓는다 */
	.sr-sec-pop{ grid-column: 1 / -1; padding-top: 34px; }
	.sr-pop-grid{ grid-template-columns: repeat(6, 1fr); gap: 28px 20px; }
	.sr-card-n{ font-size: 14px; line-height: 20px; }
	.sr-card-p{ font-size: 15px; }
}
@media (min-width: 769px) and (max-width: 1100px){
	.sr-pop-grid{ grid-template-columns: repeat(4, 1fr); }   /* 좁은 PC/태블릿 */
}

/* 태블릿 폭(480~768)은 2열이 너무 커 3열로 */
@media (min-width: 480px) and (max-width: 768px){
	.sr-pop-grid{ grid-template-columns: repeat(3, 1fr); gap: 22px 14px; }
}