/* 굿스푼 새 스킨 v18d — 상품 카드 «소구점 음영 띠»(시안 v18o prototype/v18d.css 이식 2026-10-17 · 칸 = js/gs_v18d.js)
   모양 = 연민트 띠 · 바탕 #E6F8F2 · 핵심 이름 #00785F 900 · 소구점 #053B31 600 — 주황은 할인·특가 전용이라 안 쓴다
   카드(격자·옆으로 넘김) = 두 줄 고정 42px(1줄 = 아이콘+핵심 이름 · 2줄 = 소구점) → 2칸 격자에서 옆 카드와 가격 줄 높이가 같다
   인기 스푼 큰 사진 카드도 같은 두 줄 · 넓은 줄(메인 베스트 1~10) = 한 줄 «핵심 이름 · 소구점»
   옛 CSS 가 무거워(#wrap #container …) 칸 크기는 !important 로 덮는다 */

.gs-v18d-band { box-sizing: border-box; background: #E6F8F2; color: #053B31; border-radius: 8px; font-size: 12px; font-weight: 600; font-style: normal;
  letter-spacing: -0.02em; text-align: left; overflow: hidden; word-break: keep-all; opacity: 1; }
.gs-v18d-l1 { display: flex; align-items: center; min-width: 0; }
.gs-v18d-ic { flex: 0 0 auto; display: inline-flex; width: 12px; height: 12px; margin-right: 4px; color: #00785F; }
.gs-v18d-ic svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gs-v18d-core { min-width: 0; font-weight: 900; color: #00785F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 큰 사진 카드의 «.gs-hot-txt b»(17px·두 줄 자르기·오른쪽 44px) 같은 바깥 규칙이 핵심 이름에 먹지 않게 */
.gs-v18d-band b.gs-v18d-core { display: block !important; padding: 0 !important; font-size: inherit !important; line-height: inherit !important; font-weight: 900 !important; letter-spacing: inherit !important; -webkit-line-clamp: none !important; text-wrap: nowrap; }
.gs-v18d-pt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 카드: 두 줄 고정 높이(쌓기) ── */
.gs-card .gs-card-name.gs-v18d-band, .gs-hot-card .gs-hot-txt small.gs-v18d-band {
  display: flex !important; flex-direction: column; justify-content: center; gap: 1px;
  height: 42px !important; margin: 6px 0 0 !important; padding: 5px 8px !important;
  font-size: 12px !important; font-weight: 600 !important; line-height: 16px !important; color: #053B31 !important;
  white-space: nowrap !important; -webkit-line-clamp: none !important; text-wrap: nowrap; }
.gs-card .gs-card-name.gs-v18d-band .gs-v18d-pt, .gs-hot-card .gs-hot-txt small.gs-v18d-band .gs-v18d-pt { display: block; }
/* 쌓기에선 « · » 를 화면에서만 숨긴다(읽어 주기 프로그램은 «핵심 이름 · 소구점»으로 읽는다) */
.gs-card .gs-card-name.gs-v18d-band .gs-v18d-sep, .gs-hot-card .gs-hot-txt small.gs-v18d-band .gs-v18d-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 핫딜 TOP 3(좁은 세 칸) — 아이콘 빼고 글자 칸을 넓힌다 */
.gs-pd-item .gs-card .gs-card-name.gs-v18d-band { height: 40px !important; padding: 4px 6px !important; margin-top: 5px !important; }
.gs-pd-item .gs-card .gs-card-name.gs-v18d-band .gs-v18d-ic { display: none; }

/* ── 넓은 줄(메인 베스트 1~10): 한 줄 «핵심 이름 · 소구점» ── */
.gs-rank-item .gs-rank-sub.gs-v18d-band {
  display: inline-flex !important; align-items: center; align-self: flex-start; max-width: 100%; height: 22px; margin-top: 3px; padding: 0 8px;
  font-size: 12px; line-height: 22px; white-space: nowrap; color: #053B31; }
.gs-rank-item .gs-rank-sub.gs-v18d-band .gs-v18d-l1 { flex: 0 1 auto; }
.gs-rank-item .gs-rank-sub.gs-v18d-band .gs-v18d-sep { flex: 0 0 auto; padding: 0 4px; color: #00785F; opacity: .55; font-weight: 700; }
.gs-rank-item .gs-rank-sub.gs-v18d-band .gs-v18d-pt { flex: 0 1 auto; }
/* 큰 사진 위(흰 글자 자리) — 띠가 사진에 묻히지 않게 살짝 그림자 · 오른쪽 담기 단추 자리는 비운다 */
.gs-hot-card .gs-hot-txt small.gs-v18d-band { margin: 2px 44px 2px 0 !important; opacity: 1 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .22); }

/* ── 띠와 같은 말을 하는 v18 사진 위 마크는 카드에서 숨김(한 카드에 같은 사실 두 번 ✗ · 상세 제목 아래 마크 줄은 그대로) ── */
[data-v18d-x~="big"] .gs-v18-mk.big, [data-v18d-x~="hot"] .gs-v18-mk.hot { display: none !important; }