@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; }

	/* 2026-09-04 황수빈 — 검색바 sticky 되살리기.
	   `.sr-bar{position:sticky}` 는 08-23 부터 있었지만 한 번도 붙은 적이 없다 —
	   스크롤 600 에서 top −600, 즉 그냥 같이 밀려 올라갔다(실측).
	   sticky 는 «가장 가까운 스크롤 조상» 안에서만 붙는데, 이 화면의 레거시 껍데기가
	   스크롤 조상을 «둘» 만들어 놓았다. 둘 다 내용만큼 키가 커서 스스로는 절대
	   스크롤하지 않으므로(clientHeight == scrollHeight 실측) 붙을 자리가 없다.
	     ① `.sub_contents`  css/commonTotal.css 의 `overflow:hidden`
	        → 장바구니(cart-static-prototype.css)와 «같은 처방». `clip` 은 똑같이 잘라내되
	          스크롤 컨테이너를 만들지 않고, `flow-root` 로 플로트 감싸기(BFC)는 유지한다.
	     ② `body`           반응형 CSS 가 모바일에서 `overflow-x:hidden !important` 를 걸면
	        짝인 overflow-y 가 auto 로 «계산»되어(한쪽이 non-visible 이면 나머지 visible 은
	        auto 가 된다) body 자체가 스크롤 상자가 된다. PC 는 html 이 visible 이라
	        body 값이 뷰포트로 넘어가고 body 는 스크롤 상자가 안 된다 — 그래서
	        PC 에서만 필요했던 장바구니 sticky 는 ① 만으로 됐다.
	        `clip` 으로 두면 가로 자르기는 그대로 두고 스크롤 상자만 안 만든다.
	   ⚠ 한쪽만 풀면 안 된다 — 실측상 ①만·②만 풀면 여전히 안 붙는다.
	   ⚠ ② 는 `!important` + 높은 명시도가 필요하다. 문제 규칙
	     `html:not(:has(.rr-header-wrap)) body{overflow-x:hidden!important}` 이 (0,1,2)이고
	     문서 «맨 끝» 시트(shop_rroys_responsive.css)에 있어 같은 명시도로는 순서에서 진다.
	   ⚠ ② 는 «단축 속성» 이어야 한다 — 같은 선택자로 `overflow-x:clip!important` 만 쓰면
	     실측상 안 먹고(계산값 hidden/auto 그대로) `overflow:clip visible!important` 로 쓰면 먹는다.
	   이 파일은 검색화면에서만 링크된다(shop_island.asp) — 다른 화면엔 안 걸린다.
	   되돌리기 : 아래 두 줄만 지운다. */
	.sub_contents:has(#ee-srch-root){ overflow: clip; display: flow-root; }
	html:root:root body{ overflow: clip visible !important; }
}

/* ── 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; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-09-04 황수빈 - PC 만 : 콘텐츠 폭 통일 + 검색칸 중복 해소 (사용자 지시)
   요청 원문 · "pc버전은 콘텐츠 영역 너비 타 페이지와 맞춰주고, .sr-box에 있는
                검색과 헤더의 검색이 중복되는데 이걸 어떻게 하면 좋을까"
                "모바일의 검색페이지는 그대로 유지해야해"

   ① 폭 - 이 화면만 1000px 라 x=220 에서 시작했다. 다른 화면은 전부
        .sh-wrap = max-width 1440 + padding 0 20 → «안쪽 1400 · x=0» 이다
        (1440px 실측 : /shop-list · /product/list · /shop-brands · /product/cart
         전부 1440/1400, 메인 .hm-mh__main 1400, 헤더 .mp-wrap 안쪽도 1400).
        그 규격에 맞췄다 → 「지금 인기 있는 상품」 6열이 목록 화면과 같은 선에서 시작한다.

   ② 중복 - 2026-09-04 부터 PC 헤더에 검색바가 «모든 화면» 에 있다(어드민 헤더
        83403 / 83542). 그래서 이 화면에서만 입력칸이 «둘» 이었다
        (1440px 실측 : 헤더 403x44 @518 + 페이지 680x56 @380).
        → 페이지 것(.sr-bar)을 PC 에서 감춘다. 헤더 것이 이 화면의 유일한 입력칸이고,
          헤더 스크립트가 «이 경로에서만» 링크를 안 덮고 자동 포커스한다(1-AF 블록).
        !! 헤더 쪽을 감추는 선택지는 못 쓴다 - PC 헤더는 모든 화면이 같아야 하고
           (2026-09-04 사용자 확정) 3칸 그리드라 가운데 칸만 빼도 배치가 무너진다.
        !! 마크업은 그대로 둔다 - search.js 의 wire() 가 .sr-go/.sr-clr/.sr-back 에
           리스너를 걸어서 지우면 스크립트가 죽는다. CSS 로만 감춘다.
        !! 모바일(768px 이하)은 한 줄도 안 바뀐다 - 헤더 검색바는 원래 display:none 이고
           .sr-bar 가 화면 맨 위를 쓰는 시안 그대로다(사용자 지시).

   ③ 세 단 - 폭이 1000 → 1400 이 되면 두 단이 각 672px 로 늘어져 「최근 검색어」
        한 줄이 허허벌판이 된다. 설계 폭(실측 452px)에 가까운 429px 가 되도록
        1200px 이상에서 세 단으로 둔다. 자리를 «못 박지 않고» 흐르게 둬서
        추천 검색어가 없는 날(지금이 그렇다)에도 빈 칸이 사이에 끼지 않는다.
   되돌리기 : 이 블록만 지운다(위 원본 PC 블록은 손대지 않았다).
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px){
	.sr-bar{ display: none; }

	.sr-wrap{ max-width: 1440px; padding: 40px 20px 80px; }

	/* 원본이 못 박아 둔 자리를 푼다 - 있는 섹션만 순서대로 채우게 */
	.sr-sec-recent,
	.sr-sec-suggest,
	.sr-sec-rank{ grid-column: auto; grid-row: auto; }
}

@media (min-width: 1200px){
	.sr-wrap{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}