/* 굿스푼 새 스킨 v18 — 2026-10-14 대표 회의 결정 3·4·8·10 모양(칸을 붙이는 건 js/gs_v18.js · 시안 prototype/v18.css 와 같은 모양)
   사진 위 기존 표시(NEW·N팩·담기 단추·품절 덮개)는 그대로 — 설명 마크는 비어 있던 왼쪽 아래에만(담기 단추 자리 = 오른쪽 아래 사진 안 8px 를 비운다)
   이 파일은 _header.html 에서 gs_v16_plan.css 뒤에 붙는다 · 색은 gs_v15.css 의 --gs-* 그대로 */

/* ── B 사진 위 설명 마크 ── */
.gs-v18-marks { position: absolute; left: 8px; bottom: 8px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  max-width: calc(100% - 50px); pointer-events: none; }   /* 50 = 왼쪽 8 + 담기 단추 30 + 오른쪽 8 + 틈 4 */
.gs-v18-mk { display: inline-block; max-width: 100%; box-sizing: border-box; font-style: normal; font-size: 11px; font-weight: 700; line-height: 19px; padding: 0 7px; border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.02em; background: rgba(255, 255, 255, .95); color: var(--gs-accent-ink, #00785F);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.gs-v18-mk.hot { color: #B03A16; }
.gs-card.gs-so .gs-v18-marks { display: none; }
/* 큰 사진 카드(메인 «핫한 인기 스푼») — 아래는 이름·값 글이 덮으므로 «또 담는 메뉴» 딱지 밑으로 */
.gs-hot-img .gs-v18-marks { top: 46px; left: 12px; bottom: auto; }
/* 핫딜 TOP 3(작은 카드 3칸) — 글자 조금 작게 · 담기 단추 28px */
.gs-pd-item .gs-v18-marks { left: 6px; bottom: 6px; max-width: calc(100% - 40px); }
.gs-pd-item .gs-v18-mk { font-size: 11px; line-height: 17px; padding: 0 5px; }
/* 고도몰이 그린 목록 카드(담기 단추 32px) */
#wrap .gd_list_custom .goods_prd_img .img_box.gs-v18-host { position: relative; }
#wrap .gd_list_custom .goods_prd_img .img_box.gs-v18-host .gs-v18-marks { max-width: calc(100% - 52px); }

/* ── A «400g↑ 곱빼기» 칩(분류 목록·베스트·핫딜) ── */
#wrap .gs-chip.gs-v18-big { gap: 4px; padding: 0 12px 0 10px; border-color: #bfe9da; color: var(--gs-accent-ink); font-weight: 700; }
#wrap .gs-chip.gs-v18-big svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .35; }
#wrap .gs-chip.gs-v18-big[aria-pressed="true"] { background: var(--gs-accent); border-color: var(--gs-accent-ink); color: var(--gs-accent-text); }
#wrap .gs-chip.gs-v18-big[aria-pressed="true"] svg { opacity: 1; }
#wrap .gs-v18-sep { flex: 0 0 1px; align-self: stretch; margin: 6px 2px; background: var(--gs-line); }
#wrap .gs-chiprow.gs-v18-row { padding-top: 6px; padding-bottom: 10px; }
#wrap .gs-grid > .gs-card[hidden], #wrap .gs-grid > .gs-tier-hd[hidden] { display: none !important; }
#wrap .gs-v18-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ── D 상세 제목 아래 — 마크 줄 + 혜택 줄(서버 혜택이 있을 때만) ── */
.goods_view.gs-dt .gs-v18-dtmarks { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.goods_view.gs-dt .gs-v18-dtmarks .gs-v18-mk { font-size: 12px; line-height: 24px; padding: 0 9px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #bfe9da; }   /* 아래 «N팩·분류» 꼬리표(색 채움)와 구별 — 카드 마크와 같은 흰 바탕 */
.goods_view.gs-dt .gs-v18-dtmarks .gs-v18-mk.hot { box-shadow: inset 0 0 0 1px #f2c9b8; }
.goods_view.gs-dt .gs-v18-benefit { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0 2px; padding: 9px 12px; border-radius: 12px;
  background: var(--gs-surface); font-size: 13px; line-height: 1.4; color: var(--gs-sub); }
.goods_view.gs-dt .gs-v18-benefit > b { color: var(--gs-accent-ink); font-weight: 800; }
.goods_view.gs-dt .gs-v18-benefit span b { color: var(--gs-text); font-weight: 700; }

/* ── E 하위 화면 바로가기 배너 3칸 — PC 오른쪽 카피 배너(gs_side.css)와 같은 세 색 · 아래 막대 바로 위(bottom 값은 js 가 잰다) ──
   z-index 290 = 고정 머리(300)·상세 구매 창 바탕(299)·창(ly_pop)·옆 메뉴보다 아래 */
.gs-v18-follow { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 290; box-sizing: border-box; width: 100%; max-width: 500px;
  display: grid; grid-template-columns: 1fr 1fr 1fr 24px; align-items: center; gap: 6px; padding: 6px 6px 6px 10px;
  background: rgba(255, 252, 247, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--gs-line);
  font-family: var(--gs-font); letter-spacing: -0.03em; word-break: keep-all; }
.gs-v18-follow[hidden] { display: none; }
.gs-v18-follow .gs-v18-fb { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; height: 46px; padding: 0 10px;
  box-sizing: border-box; border-radius: 12px; text-decoration: none; overflow: hidden; }
.gs-v18-follow .gs-v18-fb .k { align-self: flex-start; font-size: 11px; font-weight: 700; line-height: 15px; padding: 0 6px; border-radius: 999px; }
.gs-v18-follow .gs-v18-fb b { font-size: 13px; font-weight: 800; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-v18-follow .gs-v18-fb b::after { content: ' \203A'; font-weight: 600; }
.gs-v18-follow .gs-v18-fb.f1 { background: #2b1d12; color: #fff; }
.gs-v18-follow .gs-v18-fb.f1 .k { background: rgba(255, 255, 255, .16); color: #fff; }
.gs-v18-follow .gs-v18-fb.f2 { background: #E6F8F2; color: #053B31; }
.gs-v18-follow .gs-v18-fb.f2 .k { background: #2CD3A0; color: #053B31; }
.gs-v18-follow .gs-v18-fb.f3 { background: #FFF3E6; color: #24190f; }
.gs-v18-follow .gs-v18-fb.f3 .k { background: #24190f; color: #fff; }
.gs-v18-follow .gs-v18-fx { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gs-muted); font-size: 13px; line-height: 24px; cursor: pointer; }
.gs-v18-pad { height: 0; }
@media (min-width: 1160px) { .gs-v18-follow { display: none !important; } .gs-v18-pad { height: 0 !important; } }