/* 굿스푼 새 스킨 v20 — 시안 v20 이식(2026-10-20 저녁) · 짝 = js/gs_v20.js
   ① 담은 뒤 막대(작은 아래 막대 · 화면 안 가림) ② 주문 전에 하나 더 창(아래서 올라오는 창 · 2칸 사진 카드 + ⊕)
   글자 = v18p 단계(12·13·14·15·16·18) · 모서리 = v18s 단계(4·8·12·16·24 · 알약 999) · 누르는 칸 44 */

/* ══ ① 담은 뒤 막대 ══ */
.gs-v20-ab { position: fixed; left: 50%; transform: translateX(-50%); bottom: 72px; z-index: 1250; width: calc(100% - 24px); max-width: 476px; box-sizing: border-box;
  padding: 12px 12px 12px 14px; border-radius: 16px; background: #24190F; color: #fff; box-shadow: 0 8px 24px rgba(36, 25, 15, .28); animation: gsV20up .2s ease-out; }
@keyframes gsV20up { from { transform: translate(-50%, 12px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .gs-v20-ab, .gs-v20-rs-in { animation: none !important; } }
.gs-v20-ab-t { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin: 0 0 10px; font-size: 15px; line-height: 1.35; }
.gs-v20-ab-t svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: #2CD3A0; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.gs-v20-ab-t b { font-weight: 800; }
.gs-v20-ab-t small { flex: 1 0 100%; padding-left: 24px; font-size: 13px; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-v20-ab-bt { display: flex; gap: 8px; }
.gs-v20-ab-bt button { flex: 1; min-height: 44px; padding: 0 8px; border: 0; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; cursor: pointer; }
.gs-v20-ab-stay { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.gs-v20-ab-cart { background: #2CD3A0; color: #053B31; }
html.gs-v20-ab-on .gs-v18-follow { visibility: hidden; }   /* 따라다니는 배너와 겹치지 않게 막대가 떠 있는 동안만 */

/* ══ ② 주문 전에 하나 더 창 ══ */
html.gs-v20-rs-open, html.gs-v20-rs-open body { overflow: hidden; }
.gs-v20-rs { position: fixed; inset: 0; z-index: 1310; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 12, 6, .45); }
.gs-v20-rs-in { width: 100%; max-width: 500px; max-height: 86vh; max-height: 86dvh; display: flex; flex-direction: column; background: #FFFCF7; border-radius: 24px 24px 0 0; animation: gsV20up2 .2s ease-out; }
@keyframes gsV20up2 { from { transform: translateY(24px); opacity: .6; } }
.gs-v20-rs-grab { flex: none; width: 40px; height: 4px; border-radius: 4px; background: #E4D8CA; margin: 10px auto 2px; }
.gs-v20-rs-hd { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 8px var(--gs-gutter, 20px) 12px; }
.gs-v20-rs-hd > div { flex: 1; min-width: 0; }
.gs-v20-rs-hd h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; color: #24190F; }
.gs-v20-rs-hd p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: #5F5246; }
.gs-v20-rs-x { flex: none; width: 44px; height: 44px; margin: -6px -10px 0 0; border: 0; border-radius: 50%; background: none; font-size: 18px; color: #5F5246; cursor: pointer; }
.gs-v20-rs-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gs-gutter, 20px) 12px; }
.gs-v20-rs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.gs-v20-rc { position: relative; min-width: 0; }
.gs-v20-rc .ph { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #F5F1EA; }
.gs-v20-rc .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gs-v20-rc .ph .nop { display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px; box-sizing: border-box; font-size: 13px; font-weight: 700; text-align: center; color: #5F5246; word-break: keep-all; }
.gs-v20-rc-add { position: absolute; right: 2px; bottom: 2px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }   /* ⊕ = 사진 오른쪽 아래(누르는 칸 44) */
.gs-v20-rc-add svg { width: 32px; height: 32px; fill: #fff; stroke: #00785F; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 2px 4px rgba(36, 25, 15, .18)); }
.gs-v20-rc.on .gs-v20-rc-add svg { fill: #2CD3A0; stroke: #053B31; stroke-width: 2.6; }
.gs-v20-rc b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #43382E; word-break: keep-all; }
.gs-v20-rc .pr { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; color: #24190F; }
.gs-v20-rc .pr .gs-from { margin-left: 1px; font-size: 12px; font-weight: 500; color: #857767; }
.gs-v20-rs-ft { flex: none; padding: 10px var(--gs-gutter, 20px) calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #ECE5DB; }
.gs-v20-rs-no { width: 100%; min-height: 50px; border: 0; border-radius: 999px; background: #F5F1EA; font-family: inherit; font-size: 15px; font-weight: 800; color: #24190F; cursor: pointer; }

/* ══ ⑤ 배너 ‹ › — 메인 배너 양옆(사진 위 · 반투명 흰 동그라미 32 · 누르는 칸 44) · PC 오른쪽 배너 점 줄 양옆 ══ */
#wrap .gs-hero .gs-v20-hnav { position: absolute; top: calc(16px + (100% - 16px) * 0.64);   /* 배너 글(왼쪽 위)을 안 가리게 가운데보다 조금 아래 */ z-index: 3; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
#wrap .gs-hero .gs-v20-hnav.l { left: calc(var(--gs-gutter) + 2px); }
#wrap .gs-hero .gs-v20-hnav.r { right: calc(var(--gs-gutter) + 2px); }
#wrap .gs-hero .gs-v20-hnav svg { width: 32px; height: 32px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, .78); fill: none; stroke: #24190F; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 1px 4px rgba(36, 25, 15, .18); }
#gsSide .gs-side-dots .gs-v20-snav { width: 28px; height: 28px; padding: 0; border: 0; background: none; display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; }
#gsSide .gs-side-dots .gs-v20-snav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ══ v20b(10/20 밤 · 대표 «모바일에서는 ‹ › 옆으로 가는 버튼을 없애고 그냥 터치로 옆으로 넘기면 가지게») ══
   터치 기기(손가락이 주된 입력 · 아이폰·갤럭시)엔 ‹ › 단추를 숨긴다 — 배너·칩 줄은 원래 손가락으로 밀어 넘긴다(#gsHero = 가로 굴림 칸 · 칩 줄 = overflow-x)
   마우스 기기(PC 손님이 m. 으로 넘어와 같은 스킨을 봄)는 ‹ › 그대로 · 칩 줄 오른쪽 흐림(옆에 더 있어요)은 둔다 */
@media (hover: none), (pointer: coarse) {
  #wrap .gs-hero .gs-v20-hnav, #gsSide .gs-side-dots .gs-v20-snav { display: none !important; }
  .gs-v18y-nav i { display: none !important; }
}

/* ══ v20b 골라담기 메뉴 카드 균형(대표 10/20 밤 «제목과 아래 205g 370kcal 단백질 13g 줄과 간격이 너무 어색 · 가격과 수량도 이상» · «골라담기 메뉴의 제목과 세부 정보가 다 이런 것 같아») ══
   모든 묶음·모든 메뉴 칸 공통(상세 격자·골라담기 화면·구매 창 격자 = 같은 .gs-mcard) · 값 = 시안 v20b(prototype/v20b.css ⑤ · PORT «## v20b» 표 · v18z 윙잇 실측)와 같게
   분류 12/16(위 8) → 메뉴 이름 14/20(최대 2줄 · 고정 2줄 높이 걷음) → 4px → 영양 줄 12/16 → (남는 높이) → 가격·수량 줄(같은 줄 두 칸 바닥 맞춤 = margin-top:auto)
   가격 15/700(v18z 카드 가격 · 대표 메시지 «16px»은 시안 표가 v18z 값을 따름) · 수량 조절 보이는 높이 32·폭 84~100·숫자 14로 보이게(입력 글자는 16px 그대로 = 아이폰 확대 막기 · 0.875배) · 누르는 칸 44(::after)
   좁은 폰(카드에 가격+84px 가 안 들어가면) 수량 조절은 가격 아래 오른쪽 줄로 — 가격과 겹치지 않게 */
#wrap .gs-pk-grid { align-items: stretch; }
#wrap .gs-mcard > small.gp { margin-top: 8px; height: auto; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wrap .gs-mcard .mn { height: auto; max-height: 40px; margin-top: 2px; font-size: 14px; font-weight: 600; line-height: 20px; }
#wrap .gs-mcard .gs-v19-nu { margin: 4px 0 0; font-size: 12px; line-height: 16px; }
#wrap .gs-mcard .pr { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 6px; row-gap: 6px; }
#wrap .gs-mcard .pr > span { font-size: 15px; font-weight: 700; line-height: 20px; white-space: nowrap; letter-spacing: -0.02em; }
#wrap .gs-mcard .pr > .gs-qty { flex: 1 0 84px; max-width: 100px; height: 32px; box-sizing: border-box; margin-left: auto; justify-content: space-between; }
#wrap .gs-mcard .pr > .gs-qty button { width: 28px; height: 30px; font-size: 16px; }
#wrap .gs-mcard .pr > .gs-qty .gs-v19-qin { width: 32px; height: 30px; font-size: 16px !important; transform: scale(.875); }
#wrap .gs-mcard .pr > .gs-qty > b { font-size: 14px; }
@media (max-width: 351px) {   /* v18t 좁은 폰 규칙(수량 줄 꽉 차게·단추 40) 대신 — 줄이 나뉘면 가격 아래 오른쪽 */
  #wrap .gs-mcard .pr > .gs-qty { flex: 1 0 84px; max-width: 100px; justify-content: space-between; }
  #wrap .gs-mcard .pr > .gs-qty button { width: 28px; }
}

/* ══ v20b 골라담기 끝 «따로 배송되는 메뉴: 샐러드 › · 주스 ›»(대표 10/20 밤 · js/gs_v16_list.js · 링크 = 운영 분류 · 자료 js/gs_v19_data.js sep) ══ */
#wrap .gs-v20b-sep { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; margin: 4px var(--gs-gutter) 24px; padding: 14px 16px; border-radius: 16px; background: var(--gs-surface, #F5F1EA); }
#wrap .gs-v20b-sep p { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
#wrap .gs-v20b-sep p b { font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--gs-text, #24190F); }
#wrap .gs-v20b-sep p small { font-size: 13px; line-height: 1.4; color: var(--gs-sub, #5F5246); }
#wrap .gs-v20b-sep > div { display: flex; gap: 8px; }
#wrap .gs-v20b-sep a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--gs-line, #ECE5DB); font-size: 14px; font-weight: 700; color: var(--gs-text, #24190F); white-space: nowrap; }

/* ══ v20b 위·아래 고정 막대 바탕 = 꽉 찬 색(시안 v20b ② 와 같게) — 비치는 바탕(.94~.97)+흐림은 흐림을 못 그리는 웹킷(옛 아이폰·앱 안 창)에서 뒤 글자가 막대 위에 비친다 ══ */
#header_wrap header, .gs-tabbar, .gs-buybar, .gs-v18-follow, #wrap .goods_view.gs-dt .detail_buy, .gs-pkd-bar, #wrap .gs-pick-layer .ly_buy_dn, .gs-pkmini { background-color: var(--gs-app, #FFFCF7); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ══ v20b 한글 줄바꿈 — 낱말 가운데서 끊지 않기(갤럭시 S24 360폭에서 «…잡곡곤약밥 / 에» 처럼 한 글자만 다음 줄로 가던 것 · 기기 검수 tools/buy_qa/skin_device_check.mjs «외톨이 글자») ══ */
#wrap .gs-hot-txt > b, #wrap .gs-card-taste, #wrap .gs-sec-hd h3, #wrap .gs-sec-hd .gs-sub, #wrap .gs-mcard .mn, #wrap .gs-v20-rc b, #wrap .gs-rank-sub, #wrap .gs-v20b-sep b { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }

/* ══ v20b 메인 «베스트 1~10» 두 쪽(1~5 · 6~10) — 쪽 폭을 화면 비율로(눈으로 본 점검 10/20 밤) ══
   전: 쪽 폭 90% 인데 글 칸 최소 폭(321px)에 막혀 360·344폭에선 6~10 쪽이 화면 밖으로 완전히 숨고(옆에 더 있다는 표시 0) 오른쪽 여백이 3px · 393 은 39px 걸침 · 440 은 44px
   후: 쪽 폭 = 칸 폭 − 24px(최소 폭 풂) → 모든 폭에서 다음 쪽이 같은 28px 걸쳐 보이고 왼·오른 여백이 같다 */
#wrap .gs-rank > .gs-rank-page { flex: 0 0 calc(100% - 24px); min-width: 0; }
#wrap .gs-rank-page .gs-rank-item { min-width: 0; }
#wrap .gs-rank-page .gs-rank-item > :last-child { min-width: 0; }

/* ══ v20b 인기 스푼 큰 카드 별점 줄 — «★ 4.9 ……… (20,250)» 로 별점과 후기 수가 멀리 떨어지던 것(눈으로 본 점검 10/20 밤)
   원인 = 큰 카드 제목 규칙 «.gs-hot-txt b»(오른쪽 44px·두 줄 상자)가 별점 숫자 b 에도 먹음 → 별점 줄 b 만 되돌림 */
#wrap .gs-hot-card .gs-zrate > b { display: inline; padding-right: 0; font-size: 13px; line-height: 17px; letter-spacing: 0; -webkit-line-clamp: unset; overflow: visible; }

/* ══ v20b 장바구니 묶음 머리 «굿스푼 냉동 · 배송 2건 | 월–금 14시 전 주문하면 오늘 출고» — 360·344폭에서 두 글이 각각 두 줄로 접혀 빽빽하던 것(눈으로 본 점검 10/20 밤)
   → 각 글은 한 줄 그대로 · 한 줄에 다 안 들어가면 출고 글만 다음 줄(오른쪽) */
#wrap .gs-cgrp-hd { flex-wrap: wrap; row-gap: 2px; white-space: nowrap; }
#wrap .gs-cgrp-hd small { margin-left: auto; white-space: nowrap; }

/* ══ v20b 주문서 «주문 상품» 요약 이름 — 한 줄 자르기라 360·344폭에서 «식단 도시락 60종 …»로 «외 2건»이 잘려 안 보이던 것 → 두 줄까지(눈으로 본 점검 10/20 밤) ══ */
#wrap .gs-osum .t b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.35; }

/* ══ v20b 구매 창(상세 [구매하기]) — 혜택 문구가 꺼진 동안(지금) 창 머리의 «6·10·15·30팩» 눈금 막대를 접는다(눈으로 본 점검 10/20 밤)
   393×659(아이폰 15 사파리 보이는 칸)에서 머리·아래 단추가 창을 다 먹어 메뉴 줄이 2줄 남짓만 보이던 것 · 혜택이 켜지면(.has-perk) 그대로 보임 · 골라담기 화면·상세 격자 머리는 그대로 */
#wrap .st_buy_open .goods_view.gs-dt .st_buy_content .gs-pk .gs-steps:not(.has-perk) { display: none; }

/* ══ v20b 배송 안내 창 상품 줄 «›» — 한 줄 글은 글 바로 뒤, 두 줄 글은 오른쪽 끝에 붙어 들쭉날쭉하던 것 → 모두 오른쪽 끝(눈으로 본 점검 10/20 밤) ══ */
.gs-v19-shipx .gs-v19-cut li a { gap: 8px; }
.gs-v19-shipx .gs-v19-cut li a::after { content: '›'; flex: none; margin-left: auto; font-size: 16px; }

/* ══ v20b 따라다니는 바로가기 배너(핫딜·기획전·신상스푼) — 360 미만(폴드 겉화면 344·SE 1세대 320)에서 «기획전·이벤…»로 잘리던 것 → 칸 안 여백·글 간격만 줄임(글자 크기 13 그대로) ══ */
@media (max-width: 359px) {
  .gs-v18-follow { gap: 4px; padding-left: 6px; }
  .gs-v18-follow .gs-v18-fb { padding: 0 7px; }
  .gs-v18-follow .gs-v18-fb b { letter-spacing: -0.04em; }
}

/* ══ v20b 키 작은 화면(아이폰 가로 734×343 등 · 보이는 높이 480px 이하) — 위·아래에 붙는 칸을 줄여 메뉴가 보이게(기기 검수 «고정틀 가림» 10/20 밤) ══
   골라담기: 머리글(99)+«N팩» 막대(48)+종류·기준 칸(93)+아래 단추(106)가 343px 을 다 덮어 메뉴 칸이 0이던 것 → 종류·기준 칸은 붙이지 않고 같이 굴러가게(«N팩» 막대는 그대로 붙음)
   구매 창: 창 속 담기 머리와 아래 단추 줄이 서로 71px 겹치던 것 → 창 안에서는 둘 다 같이 굴러가게 */
@media (max-height: 480px) {
  #wrap .gs-v19-pkrows { position: static; }
  #wrap .st_buy_open .goods_view.gs-dt .st_buy_content .gs-pk, #wrap .st_buy_open .goods_view.gs-dt .st_buy_content .ly_buy_dn { position: static; }
}
/* 베스트 쪽 폭을 줄인 만큼 — 앞 칸(분류 이름 «식단 도시락 60종»)은 줄이지 않고 뒤 칸(«400g 이상 7종»)만 «…»로(360·344폭에서 둘 다 잘려 «식단 도시락 6…»이 되던 것) */
#wrap .gs-rank-item .gs-rank-sub.gs-v18d-band .gs-v18d-l1 { flex: 0 0 auto; }
#wrap .gs-rank-item .gs-rank-sub.gs-v18d-band .gs-v18d-pt { flex: 0 1 auto; min-width: 0; }

/* ══ v20b 구매 창·옵션 창 메뉴 줄(.gs-opt) — 메뉴 카드와 같은 글자 단계·수량 조절(대표 «골라담기 메뉴의 제목과 세부 정보가 다 이런 것 같아» · 시안 v20b ⑤ .opt 와 같은 값) ══ */
#wrap .gs-layer .gs-opt .t small { margin-bottom: 0; font-size: 12px; line-height: 16px; }
#wrap .gs-layer .gs-opt .t b { font-size: 14px; font-weight: 600; line-height: 20px; }
#wrap .gs-layer .gs-opt .t > span { margin-top: 4px; font-size: 15px; font-weight: 700; line-height: 20px; }
#wrap .gs-layer .gs-opt > .gs-qty { flex: 0 0 auto; width: 100px; height: 32px; box-sizing: border-box; justify-content: space-between; }
#wrap .gs-layer .gs-opt > .gs-qty button { width: 28px; height: 30px; font-size: 16px; }
#wrap .gs-layer .gs-opt > .gs-qty .gs-v19-qin { width: 32px; height: 30px; font-size: 16px !important; transform: scale(.875); }
#wrap .gs-layer .gs-opt > .gs-qty > b { font-size: 14px; }

/* ══ v20b 시안 v20b 이식 몫 맞춤(PORT «## v20b» 이식 몫 6·8·10·11) ══ */
/* 6 메뉴 칸이 158px 보다 좁으면(폴드 겉화면 등) 수량 조절은 가격 아래 줄 왼쪽 · 사진 없는 메뉴는 사진 자리에 이름을 또 쓰지 않음(아래 이름과 같은 글 두 번 ✗) */
#wrap .gs-mcard { container-type: inline-size; container-name: gsmc; }
@container gsmc (max-width: 157px) { #wrap .gs-mcard .pr > .gs-qty { margin-left: 0; } }
#wrap .gs-mcard .ph-slot b { display: none; }
/* 8·10 손가락 기기 — ‹ › 를 숨겼으니 칩 줄 스냅 여백(‹ › 자리 44px)도 줄 안쪽 여백만큼으로(첫 칸이 44px 밀려 멈추던 것) */
@media (hover: none), (pointer: coarse) { .gs-v18y-sc { scroll-padding-left: var(--v18y-pl, 0px); scroll-padding-right: var(--v18y-pr, 0px); } }
/* 11 상품 격자 칸 사이 12px 모든 폭(전: 420 이하 8px) */
#wrap .gs-grid { column-gap: 12px; }
@media (max-height: 480px) { .gs-with-hint { display: none !important; } }   /* 가로 화면: «함께 많이 담은 메뉴» 4초 알림이 «N팩» 막대를 가리던 것(기기 검수 r5 · 14px) */
/* ══ 10/21 대표 추가 지시(01시) ══
   ⑫ 골라담기 칸 머리 «전체 메뉴 — 메뉴 149가지» → [제목 16/700 진갈색] 6px [숫자 알약 «79개» 12/600 #00785F · 바탕 #E6F8F2 · 높이 22 · 좌우 8 · 둥근 끝(22px 높이의 반 = 11px · 모서리 단계 «알약 999px»)] · 세로 가운데 · 한 줄(길면 제목만 말줄임) · 0개 = 흐리게(연습 화면 에이전트와 같은 값) */
#wrap #gsV19PkSum .gs-v19-st { flex-wrap: nowrap; gap: 6px; min-width: 0; }
#wrap #gsV19PkSum .gs-v19-st > b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; line-height: 22px; letter-spacing: -0.01em; color: var(--gs-text, #24190F); }
#wrap .gs-cnt-pill { flex: 0 0 auto; display: inline-flex; align-items: center; box-sizing: border-box; height: 22px; padding: 0 8px; border-radius: 999px; background: #E6F8F2; color: #00785F; font-size: 12px; font-weight: 600; font-style: normal; line-height: 1; letter-spacing: 0; white-space: nowrap; vertical-align: middle; }
#wrap .gs-cnt-pill.zero { opacity: .45; }
#wrap .gs-cnt-pill.so { background: #F5F1EA; color: #6B5C4D; }
#wrap #gsV19PkSum .gs-v19-st .gs-v19-off { flex: 0 0 auto; }
#wrap .gs-v18y-bc small .gs-cnt-pill { height: 20px; padding: 0 6px; }
#wrap .gs-pk-prod #gsPkProdSub .gs-cnt-pill { display: inline-flex; width: auto; margin: 0 0 0 4px; height: 20px; padding: 0 6px; font-size: 12px; color: #00785F; }   /* .gs-pk-prod .t span(줄 칸 block)이 알약에도 먹던 것 */
/* ⑬ 상품 카드 사진 아래 꼬리표 두 칸([식단 도시락 60종] [400g 이상 7종]) — 휴대폰 폭(≤440)에선 한 줄에 둘 다(전: 넘치면 두 줄 → 카드 비율이 깨짐 · 대표 10/21)
   값(연습 화면과 같게): 글자 clamp(10px, 2.9vw, 12px) · 안쪽 2px 6px · 높이 20 · 사이 4 · nowrap · 넘치면 둘째 칸부터 말줄임(둘째가 3글자 폭이 되면 첫 칸도 말줄임) · PC 500 칸(넓은 화면)은 그대로 */
@media (max-width: 440px) {
  #wrap .gs-v18d-band.gs-v18d-band { flex-wrap: nowrap !important; max-height: 20px !important; gap: 4px !important; }
  #wrap .gs-v18d-band.gs-v18d-band :is(.gs-v18d-l1, .gs-v18d-pt) { box-sizing: border-box; height: 20px !important; padding: 2px 6px !important; font-size: clamp(10px, 2.9vw, 12px) !important; line-height: 16px !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  #wrap .gs-v18d-band.gs-v18d-band .gs-v18d-l1 { flex: 0 1 auto !important; min-width: 0 !important; }
  #wrap .gs-v18d-band.gs-v18d-band .gs-v18d-pt { flex: 0 100000 auto !important; min-width: 3em !important; }   /* 둘째 칸이 먼저 줄고(…) 3글자 폭에서 멈추면 그때 첫 칸이 준다 — 3칸 작은 카드(폭 95px)에서 둘째 칸이 칸 밖으로 밀리던 것(시험 P5 344px) · 줄 비율 합이 1 미만이면 넘친 만큼을 다 못 줄인다(flex 규칙) */
}

/* ══ ⑥ 장바구니 «같이 담으면 좋은 메뉴»(10/21 대표 · 시안 v20c cart_with 이식 · js/gs_v20.js ⑥) ══
   자리 = 장바구니 줄 묶음과 금액 상자 사이 · 가로 한 줄(카드 폭 47% = 메인 베스트 줄과 같음 · 셋째 카드가 걸쳐 보여 옆에 더 있음을 알림)
   손가락 기기 = 밀어서 넘김 · PC 마우스 = 끌어서(js/gs_side.js) + ‹ ›(js/gs_v19.js 칩 줄 단추 · 손가락 기기에선 위 v20b 규칙으로 숨김) · 카드 모양 = ② 창 카드(.gs-v20-rc) 그대로 */
#wrap .gs-v20-cw { margin: 6px 0 14px; }
#wrap .gs-v20-cw-hd { margin: 0 0 12px; padding: 0 var(--gs-gutter, 20px); }
#wrap .gs-v20-cw-hd h3 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; color: #24190F; }
#wrap .gs-v20-cw-row { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 0 var(--gs-gutter, 20px) 4px; scroll-snap-type: x proximity; scroll-padding: 0 var(--gs-gutter, 20px);
  scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
#wrap .gs-v20-cw-row::-webkit-scrollbar { display: none; }
#wrap .gs-v20-cw-row > .gs-v20-cwc { flex: 0 0 47%; min-width: 0; scroll-snap-align: start; }
#wrap .gs-v20-cwc .gs-zrate { margin-top: 2px; }

/* ═════ 찜 하트(10/21 대표 «찜하기를 누르면 화면은 그대로») · 움직임 = js/gs_wish.js · 채운 하트 색 = 찜 목록 화면 하트(gs_v16_mypage.css #ef5a5a)와 같게 ═════ */
#wrap .goods_view.gs-dt .detail_buy #wishBtn.gs-wish-on, #wishBtn.gs-wish-on, .btn_add_wish.gs-wish-on { color: #ef5a5a; }
#wrap .goods_view.gs-dt .detail_buy #wishBtn.gs-wish-on svg, #wishBtn.gs-wish-on svg { fill: currentColor; stroke: currentColor; }