/* 굿스푼 새 스킨 v18s — 시안 v18s.css 를 작업 스킨 이름표로(2026-10-19 v18v 이식 P-A · 원천 태그 proto-v18v)
   대표 10/17 밤 «UI·UX 더 반영할 것 찾기» · 10/18 «줄 간격·민트 네모→칸 두 개» · 근거 = 영상 291편 정리 §5-3 + 화면 점검
   P-A 몫: ① «더 보기» 약하게 · ② 칸 제목 3단계 · ④ 검색 지우기 ✕ 는 입력 중에만 · ⑥ 검색 결과 없음 정렬 숨김(+ js/gs_v16_search.js «요즘 많이 담는 메뉴») · ⑦ 상품 사이 줄 간격 · ⑧ 카드 이름 띠 → 칸 두 개
   안 옮긴 것: ③ 상세 사진 장수·⑤ 장바구니 줄 선택·⑩ 골라담기 머리(P-B) · ⑨ 할인율(대표 결정 2 «정가 줄 끄기» · 예시 할인율 이식 ✗) */

/* ① «더 보기 ›»·«전체 보기» — 칸 제목보다 약하게(회색 · 보통 굵기) */
.gs-sec-hd .gs-more, .gs-v16 .gs-more, #wrap .gs-ev-hd a, #wrap .gs-srch .gs-more { color: var(--gs-muted, #73624f); font-weight: 500; }

/* ② 칸 제목 3단계 — 화면 제목 20 · 칸 제목 18 · 이름표 13(지금 22·19·17·16 섞임) */
.gs-sec-hd h3, .gs-v16 .gs-sec-hd h3, #wrap .gs-ev-hd h3, #wrap .gs-srch .gs-ssec h3, #wrap .gs-srch-tips .gs-ssec h3, #wrap nav .gs-cat-sec h3 { font-size: 18px; }
#wrap .gs-ph h1, #wrap .gs-srch .gs-srch-hd h2 { font-size: 20px; }

/* ④ 검색 지우기 ✕ — 입력한 글이 있을 때만(검색 화면 머리 검색창 «취소» 단추 · 검색 층 ✕ 는 js/gs_v18i.js 가 이미 글이 있을 때만) */
#header_wrap ._header_search input[name="keyword"]:placeholder-shown + .bn_wrg { visibility: hidden; }

/* ⑥ 검색 결과 없음 — 정렬·총 0개 줄 숨김(고를 게 없는데 단추만 남음) · 빈 결과 글·«요즘 많이 담는 메뉴» = js/gs_v16_search.js */
#wrap .goods_search.gs-srch-none .goods_top_box { display: none !important; }
#wrap .goods_search.gs-srch-none .goods_product_list > li.no_bx strong { display: block; color: var(--gs-text); font-size: 15px; font-weight: 700; }
#wrap .goods_search.gs-srch-none .goods_product_list > li.no_bx .gs-none-sub { display: block; margin-top: 6px; font-size: 13px; color: var(--gs-muted); }
#wrap .gs-srch-tips .gs-srch.gs-srch-nonepop { padding: 0; }

/* ⑦ 상품 사이 줄 간격 — 대표 10/18 «제품 간 줄 간격이 너무 멀어 낭비하는 느낌» · 격자 22·26·16px → 12px(좁은 폰 10px)
   우리 카드 격자(.gs-grid = 메인 피드·베스트·핫딜·분류 목록) + 서버 목록 격자(분류·검색 화면) · ⛔골라담기(진열 21)·진열 화면 서버 목록은 P-B·그대로 */
.gs-grid { row-gap: 12px; }
#wrap .goods_list .goods_product_list, #wrap .goods_search .goods_product_list { row-gap: 12px; }
@media (max-width: 380px) {
  .gs-grid { row-gap: 10px; }
  #wrap .goods_list .goods_product_list, #wrap .goods_search .goods_product_list { row-gap: 10px; }
}

/* ⑧ 카드 이름 띠 → 따로 떨어진 칸 두 개 — 대표 10/18 «민트 네모 안에 넣지 말고 별도의 칸으로 분류된 아이콘처럼 · 커피 모양 아이콘은 AI 같아 빼기»
   [식단 도시락 60종] [400g 이상 7종] — 앞 칸 = 연민트 바탕·진초록 굵게(분류 이름) · 뒤 칸 = 연베이지 바탕·갈색(사실 한 구) · 한 줄에 안 들어가면 두 줄(최대) · 문구는 그대로(js/gs_v18d_points.js) */
.gs-v18d-band .gs-v18d-ic { display: none !important; }
.gs-card .gs-card-name.gs-v18d-band, .gs-hot-card .gs-hot-txt small.gs-v18d-band, .gs-rank-item .gs-rank-sub.gs-v18d-band, .gs-pd-item .gs-card .gs-card-name.gs-v18d-band {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 4px !important;
  height: auto !important; max-height: 44px; margin: 6px 0 0 !important; padding: 0 !important;
  background: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; line-height: 20px !important; position: relative; }
.gs-v18d-band .gs-v18d-l1, .gs-v18d-band .gs-v18d-pt { display: block !important; box-sizing: border-box; max-width: 100%; height: 20px; padding: 0 6px;
  border-radius: 4px; font-size: 12px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-v18d-band .gs-v18d-l1 { flex: 0 0 auto; background: #E6F8F2; }
.gs-v18d-band b.gs-v18d-core { display: inline !important; color: #00785F; font-weight: 700 !important; }
.gs-v18d-band .gs-v18d-pt { flex: 0 1 auto; min-width: 0; background: #F5F1EA; color: #5E4F40; font-weight: 500; }
.gs-v18d-band .gs-v18d-sep { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0 !important; }   /* 띠 칸(position: relative) 안에 묶는다 — 안 묶으면 옆으로 넘기는 베스트 1~10 둘째 쪽의 이 칸이 화면 밖 99px 가로 넘침을 만들었다(10/19 시험) */
.gs-rank-item .gs-rank-sub.gs-v18d-band { flex-wrap: nowrap; max-height: 20px; margin-top: 4px !important; }
.gs-hot-card .gs-hot-txt small.gs-v18d-band { margin: 2px 44px 2px 0 !important; }
.gs-hot-card .gs-hot-txt small.gs-v18d-band .gs-v18d-l1 { background: rgba(230, 248, 242, .96); }
.gs-hot-card .gs-hot-txt small.gs-v18d-band .gs-v18d-pt { background: rgba(255, 255, 255, .92); }