/* 굿스푼 새 스킨 v18i — 검색 «덮는 층»(칸 = js/gs_v18i.js · 시안 v18o srch_layer_v18i.css 이식 2026-10-17 P-A)
   앱 폭(500px) 그대로 지금 화면 위에 덮는다 · 층은 #wrap 밖(body 바로 아래)이라 옛 CSS «#wrap …» 무게가 안 닿는다 */
html.gs-sl-open, html.gs-sl-open body { overflow: hidden; }
.gs-sl { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 500px; z-index: 10050; display: flex; flex-direction: column;
  box-sizing: border-box; background: var(--gs-app, #fffcf7); color: var(--gs-text, #24190f); font-family: var(--gs-font); letter-spacing: -0.02em; animation: gsSlIn .16s ease-out; }
.gs-sl[hidden] { display: none; }
.gs-sl *, .gs-sl *::before, .gs-sl *::after { box-sizing: border-box; }
@keyframes gsSlIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .gs-sl { animation: none; } }
.gs-sl-top { flex: none; display: flex; align-items: center; gap: 4px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 4px; border-bottom: 1px solid var(--gs-line, #ece5db); }
.gs-sl-x { flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--gs-text, #24190f); cursor: pointer; }
.gs-sl-x svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gs-sl-form { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 46px; margin: 0; padding: 0 5px 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--gs-accent, #2CD3A0); }
/* 16px — 아이폰 사파리는 16px 보다 작은 입력칸을 누르면 화면을 확대한다(v18j) */
.gs-sl-form input { flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: none; font: 500 16px var(--gs-font); color: var(--gs-text, #24190f); letter-spacing: -0.02em; text-indent: 0; -webkit-appearance: none; appearance: none; }
.gs-sl-form input::placeholder { color: var(--gs-muted, #7d6c5c); }
.gs-sl-form input::-webkit-search-cancel-button { display: none; }
.gs-sl-clr { flex: none; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #e8dccf; color: #fff; font-size: 12px; line-height: 28px; text-align: center; cursor: pointer; }
.gs-sl-clr[hidden] { display: none; }
.gs-sl-go { flex: none; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--gs-accent, #2CD3A0); color: var(--gs-accent-text, #053B31); display: grid; place-items: center; cursor: pointer; }
.gs-sl-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.gs-sl-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.gs-sl-sec { padding: 22px 16px 4px; }
.gs-sl-sec h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; font-size: 16px; font-weight: 800; letter-spacing: -0.03em; color: var(--gs-text, #24190f); }
.gs-sl-sec h3 button { height: 32px; margin: 0; padding: 0 4px; border: 0; background: none; font-size: 13px; font-weight: 500; color: var(--gs-muted, #7d6c5c); cursor: pointer; }
.gs-sl-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-sl-chip { display: inline-flex; align-items: center; height: 38px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--gs-line, #ece5db); }
.gs-sl-chip > a { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; font-size: 14px; font-weight: 500; color: var(--gs-text, #24190f); text-decoration: none; white-space: nowrap; }
.gs-sl-chip > button.gs-sl-rm { width: 32px; height: 38px; margin: 0 0 0 -10px; padding: 0 10px 0 0; border: 0; background: none; font-size: 12px; color: var(--gs-muted, #7d6c5c); cursor: pointer; }
.gs-sl-none { margin: 2px 0 6px; font-size: 14px; color: var(--gs-muted, #7d6c5c); }
.gs-sl-body > .gs-sl-none { padding: 16px; }
.gs-sl-all { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 16px; border-bottom: 1px solid var(--gs-line, #ece5db); font-size: 15px; color: var(--gs-accent-ink, #00785F); font-weight: 700; text-decoration: none; }
.gs-sl-all span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-sl-all b { font-weight: 900; }
.gs-sl-all i { font-style: normal; font-size: 18px; }
.gs-sl-res { list-style: none; margin: 0; padding: 4px 0; }
.gs-sl-res a { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 16px; color: var(--gs-text, #24190f); text-decoration: none; }
.gs-sl-res img { flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--gs-surface, #f5f1ea); }
.gs-sl-nm { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.35; word-break: keep-all; }
.gs-sl-res b { flex: none; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* 머리 검색창은 층을 여는 손잡이(읽기 전용) — 누를 수 있다는 모양 그대로 */
#wrap #header_wrap ._header_search input[readonly][aria-haspopup] { cursor: pointer; }

/* ══ 2026-10-19 v18v 이식 P-A — 시안 proto-v18v srch_layer_v18i.css(v18t C · v18u) ══
   글자 치기 전 칸: 최근 → 추천 4(빨간 칸) → 오늘의 핫딜 1·2·3 → 인기 순위 · 순위 숫자 = css/gs_v18t.css .rk-num(모양은 그쪽 · 여기선 크기·자리만)
   누르는 칸 44px — 보이는 크기는 그대로 두고 ::after 로 넓히거나 줄 높이를 44 로 */
.gs-sl { --gs-red: #E03131; --gs-red-ink: #C92A2A; --gs-red-bg: #FFF1F1; }
.gs-sl-sec { padding-top: 18px; }
.gs-sl-sec h3 { min-height: 24px; margin-bottom: 10px; }
.gs-sl-sec h3 button, .gs-sl-sec h3 .gs-sl-more { display: inline-flex; align-items: center; height: 44px; margin: -10px -4px; padding: 0 4px; }
.gs-sl-more { font-size: 13px; font-weight: 600; color: var(--gs-muted, #73624f); letter-spacing: -0.02em; text-decoration: none; }
.gs-sl-chip > a, .gs-sl-chip > button, .gs-sl-clr, .gs-sl-go { position: relative; }
.gs-sl-chip > a::after { content: ''; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }   /* 38 → 44(줄 사이 8px 라 위아래 칸이 안 겹친다) */
.gs-sl-chip > button.gs-sl-rm::after { content: ''; position: absolute; left: -6px; right: -6px; top: -3px; bottom: -3px; }
.gs-sl-clr::after { content: ''; position: absolute; inset: -8px; }
.gs-sl-go::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; }
/* 추천 검색어 4 — 빨간 칸(대표 10/19 «추천 검색어 빨간색 칸» · 한 줄 넷 · 좁은 폰은 둘씩 두 줄) */
.gs-sl-red { display: flex; gap: 8px; }
.gs-sl-red a { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 8px; border: 1px solid var(--gs-red); border-radius: 8px; background: var(--gs-red-bg);
  color: var(--gs-red-ink); font-size: 14px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
@media (max-width: 349px) { .gs-sl-red { display: grid; grid-template-columns: 1fr 1fr; } }
/* 핫딜 한 줄(사진 48 · 순위 딱지 · 이름 · 값) */
.gs-sl-mini { margin: 0 -16px; padding: 0; }
.gs-sl-mini a { min-height: 56px; padding: 4px 16px; }
.gs-sl-ph { position: relative; flex: none; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--gs-surface, #f5f1ea); }
.gs-sl-res .gs-sl-ph img { display: block; width: 100%; height: 100%; border-radius: 0; }
.gs-sl-ph .rk-num { position: absolute; top: 2px; left: 2px; --rk-size: 21px; }   /* 21 = 숫자 12.2px(12px 아래 ✗) */
/* 인기 순위 — 판 탭(누르는 칸 44) · 1~10 */
.gs-sl-tabs { display: flex; gap: 4px; overflow-x: auto; margin: -6px -16px 2px; padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gs-sl-tabs::-webkit-scrollbar { display: none; }
.gs-sl-tabs button { flex: none; height: 44px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.gs-sl-tabs button span { display: inline-flex; align-items: center; height: 34px; padding: 0 9px; border: 1px solid var(--gs-line, #ece5db); border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--gs-sub, #5e4f40); white-space: nowrap; }
.gs-sl-tabs button[aria-selected="true"] span { background: var(--gs-accent, #2CD3A0); border-color: var(--gs-accent-ink, #00785F); color: var(--gs-accent-text, #053B31); font-weight: 700; }
.gs-sl-rank { list-style: none; margin: 0 -16px; padding: 0; }
.gs-sl-rank a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; color: var(--gs-text, #24190f); text-decoration: none; }
.gs-sl-rank .rk-num { --rk-size: 22px; }
.gs-sl-pn { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-sl-mv { flex: none; min-width: 30px; text-align: right; font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gs-muted, #73624f); }
.gs-sl-mv.up, .gs-sl-mv.new { color: var(--gs-accent-ink, #00785F); }

/* ══ v18u(대표 10/19 «폰트가 너무 정직하게 크고 무식해 · 좀 더 얇고 디자인감 있게») — 검색 층 글자 한 벌
   굵기 한 단계씩(제목 800→600 · 이름 500·600→400 · 값 800→600 · 탭 600→500/고른 탭 600) · 크기 한 단계씩 · ⛔12px 미만 ✗ · 입력칸은 16px 그대로(아이폰 확대 막음) ══ */
.gs-sl { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.gs-sl-form input { font-weight: 400; letter-spacing: -0.01em; }
.gs-sl-sec h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.gs-sl-sec h3 button, .gs-sl-sec h3 .gs-sl-more { font-size: 12px; font-weight: 400; letter-spacing: -0.01em; }
.gs-sl-chip > a { font-size: 13px; font-weight: 400; letter-spacing: -0.01em; }
.gs-sl-red a { font-size: 13px; font-weight: 500; letter-spacing: -0.02em; }
.gs-sl-nm { font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: -0.02em; }
.gs-sl-res b { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.gs-sl-all { font-size: 14px; font-weight: 500; letter-spacing: -0.02em; }
.gs-sl-all b { font-weight: 700; }
.gs-sl-none { font-size: 13px; font-weight: 400; }
.gs-sl-tabs button span { font-size: 12px; font-weight: 500; letter-spacing: -0.02em; }
.gs-sl-tabs button[aria-selected="true"] span { font-weight: 600; }
.gs-sl-pn { font-size: 14px; font-weight: 400; letter-spacing: -0.02em; }
.gs-sl-mv { font-weight: 500; }
.gs-sl-res img { border-radius: 8px; }