/* 굿스푼 새 스킨 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: 14px; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 10/24 ux1024(대표 승인 시안 §3): [바로 주문하기](가장 큼 · 민트) [장바구니 보기](테두리) + 아래 작은 글씨 [계속 쇼핑하기] · 무료배송 줄 · 글자 14px 이상 · 누르는 칸 44 */
.gs-v20-ab-ship { margin: 0 0 12px; }
.gs-v20-ab-ship .bar { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.gs-v20-ab-ship .bar > i { display: block; height: 100%; border-radius: 999px; background: #2CD3A0; }
.gs-v20-ab-ship p { margin: 7px 0 0; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .86); word-break: keep-all; }
.gs-v20-ab-ship b { color: #2CD3A0; font-weight: 800; }
.gs-v20-ab-bt { display: flex; gap: 8px; }
.gs-v20-ab-bt button { flex: 1; min-height: 50px; padding: 0 8px; border: 0; border-radius: 16px; font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; cursor: pointer; }
.gs-v20-ab-bt .gs-v20-ab-go { flex: 1.35; background: #2CD3A0; color: #053B31; }
.gs-v20-ab-bt .gs-v20-ab-cart { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.gs-v20-ab-stay { display: block; min-height: 44px; margin: 2px auto -6px; padding: 0 12px; border: 0; background: none; color: rgba(255, 255, 255, .75); font-family: inherit; font-size: 14px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html.gs-v20-ab-on .gs-v18-follow, html.gs-v20-mini-on .gs-v18-follow { visibility: hidden; }   /* 따라다니는 배너와 겹치지 않게 막대가 떠 있는 동안만 */
/* 아래 작은 막대(큰 막대가 닫힌 뒤 · js/gs_v20.js miniShow) — 자리(bottom)는 스크립트가 아래 고정 막대 위로 잰다 · 구매 창·옵션 창이 열리면 숨김 */
.gs-v20-mini { position: fixed; left: 50%; transform: translateX(-50%); bottom: 72px; z-index: 1240; width: calc(100% - 24px); max-width: 476px; box-sizing: border-box;
  display: flex; align-items: center; gap: 6px; padding: 8px 4px 8px 16px; border-radius: 16px; background: #24190F; color: #fff; box-shadow: 0 8px 24px rgba(36, 25, 15, .28); }
.gs-v20-mini[hidden] { display: none; }
.gs-v20-mini-t { flex: 1; min-width: 0; margin: 0; line-height: 1.35; }
.gs-v20-mini-t b { display: block; font-size: 15px; font-weight: 800; }
.gs-v20-mini-t small { display: block; font-size: 14px; color: rgba(255, 255, 255, .78); word-break: keep-all; }
.gs-v20-mini-t small[hidden] { display: none; }
.gs-v20-mini-go { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #2CD3A0; color: #053B31; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.gs-v20-mini-x { flex: 0 0 36px; width: 36px; height: 44px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .7); cursor: pointer; }
.gs-v20-mini-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* «바로 주문하기» 뒤 장바구니 화면 가림막(주문서로 넘어가는 동안 · 고도몰 알림이 뜨면 걷힘) */
.gs-v20-go { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; background: rgba(255, 253, 248, .92); }
.gs-v20-go p { margin: 0; padding: 12px 20px; border-radius: 999px; background: #24190F; color: #fff; font-size: 15px; font-weight: 700; }

/* ══ ② 주문 전에 하나 더 창 ══ */
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; }
/* 10/23 대표 결정: 추천 창 카드 사진·이름 = 그 상품 화면 링크(js/gs_v20.js cardHtml lk) · 모양은 전과 같게(밑줄·색 바뀜 없음) · ⊕ 는 링크 위(z-index) */
.gs-v20-rc .ph > .gs-v20-rc-go { display: block; height: 100%; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.gs-v20-rc .ph > .gs-v20-rc-add { z-index: 1; }
.gs-v20-rc b > .gs-v20-rc-nm { color: inherit; text-decoration: none; }
.gs-v20-rc :is(.gs-v20-rc-go, .gs-v20-rc-nm):focus-visible { outline: 2px solid var(--gs-accent-ink, #00785F); outline-offset: 2px; border-radius: 12px; }
.gs-v20-rc .pr .gs-from { margin-left: 1px; font-size: 12px; font-weight: 500; color: #6f6253; }
.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. 으로 넘어와 같은 스킨을 봄)는 ‹ › 그대로 · 칩 줄 오른쪽 흐림(옆에 더 있어요)은 둔다
   → v20c(10/23 대표 «‹ › 이걸로 좌우로 가는 기능들 전부 모바일 버전이니깐 터치로 갈 수 있게 없애줄래? 보기 싫다») 마우스 기기도 숨긴다(모든 기기)
     PC 마우스는 끌어서 넘긴다(js/gs_side.js · 가로로 넘치는 칸 어디나 · #gsHero 포함) · PC 오른쪽 배너는 점 단추 그대로 · 칩 줄 흐림(옆에 더 있어요)은 그대로
     단추를 만드는 곳(js/gs_v20.js ⑤ 배너 · js/gs_v19.js 칩 줄 · 메인 베스트 쪽 점 줄 .gs-rank-arw)은 그대로 두고 여기서만 숨긴다 */
#wrap .gs-hero .gs-v20-hnav, #gsSide .gs-side-dots .gs-v20-snav, .gs-rank-arw { 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 밤) ══ */
/* 10/22 대표 점검 8번: 두 줄로도 긴 이름(«미스터 야채 샐러드 13종 골라담기…»)은 아이폰 SE 에서 «외 9건»이 잘렸다 → 이름(.nm)만 두 줄까지 자르고 «외 N건»(.more)은 늘 끝에 남긴다 */
#wrap .gs-osum .t b { display: flex; align-items: flex-end; min-width: 0; overflow: visible; white-space: normal; line-height: 1.35; }
#wrap .gs-osum .t b .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
#wrap .gs-osum .t b .more { flex: 0 0 auto; white-space: pre; }

/* ══ 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 밀려 멈추던 것) · v20c(10/23) 마우스 기기도 ‹ › 를 숨겨 모든 기기 */
.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; }
/* 10/25 20:50 대표 «'찜했어요'만 뜨고 안 넘어가짐» → 찜 담기 성공 안내(#gsWishToast · js/gs_wish.js ④) = 글 + «찜 목록 보기 ›» 단추 · 모양은 .gs-toast(gs_v16_detail.css)를 따른다
   단추 높이 44px(손가락) · 알약 999px · 숨은 동안엔 누르기·탭 이동 ✗(visibility) · 다른 화면이 쓰는 #gsToast 는 그대로 */
.gs-toast.gs-toast-act { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 52px; padding: 4px 4px 4px 18px; white-space: nowrap; visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
.gs-toast.gs-toast-act.show { visibility: visible; pointer-events: auto; transition: opacity .2s, transform .2s, visibility 0s; }
.gs-toast-act .gs-toast-msg { font-size: 14px; font-weight: 600; color: #fff; }
.gs-toast-act .gs-toast-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; color: #24190f; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.gs-toast-act .gs-toast-btn:active { background: #f1ebe4; }

/* ═════ 긴 예전 이름(10/21 12:4x 대표 «메뉴 이름도 바껴야지. 상세페이지 안에 들어가서 바뀌면 뭐해.») ═════
   화면 이름 = 관리자 «확장 상품명 › 리스트·메인» = 예전 몰 이름(기본 상품명 · 평균 34자 · 최대 57자) → 이름 자리는 줄을 넘겨 보이고 2줄이 넘으면 말줄임(…) · 글자 크기는 그대로
   카드 띠(js/gs_v18d.js)는 이름 줄을 바꾸지 않고 따로 붙는다 → 아래 «:not(.gs-v18d-band)» = 이름 줄만 */
/* 이름 줄 2줄(넘으면 …) · v19 카드 규칙(#wrap :is(.gs-grid, .gs-row, .gs-pd-item) .gs-card.two .gs-card-name:not(.gs-v18d-band) = 한 줄 말줄임)보다 먼저 서도록 줄 모양 칸만 !important */
#wrap .gs-card .gs-card-name:not(.gs-v18d-band), #wrap .gs-rank-item .gs-rank-sub:not(.gs-v18d-band), #wrap .gs-hot-card .gs-hot-txt > small:not(.gs-v18d-band) {
  white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; text-overflow: ellipsis;
  height: auto !important; max-height: none !important; word-break: keep-all; overflow-wrap: anywhere; }
/* 큰 사진 카드(인기 스푼) 이름 줄 = 두 줄 말줄임(10/21 14시: 이름이 큰 굵은 줄이 되고 맛 한 줄이 한 줄로 내려가 글 묶음 최대 높이는 전과 같다 · 전 12:4x: 작은 이름 줄 2줄 + 굵은 맛 2줄이면 사진 위 딱지와 5px 겹쳐 한 줄로 막았다) */
#wrap .gs-hot-card .gs-hot-txt > small:not(.gs-v18d-band) { -webkit-line-clamp: 2 !important; }
/* 골라담기 화면 상품 머리(사진 옆 이름 16px) = 3줄까지(넘으면 …) · 전: 줄 제한 없음 · 기본 상품명 66개 중 13개가 갤럭시 S24 에서 4줄(사진 64px 보다 길다) */
#wrap .gs-pk-prod .t > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
/* 담은 뒤 막대 이름 줄: 한 줄 말줄임 그대로 · 왼쪽 들여쓰기(24px)를 폭 안에 넣는다(전: 폭 100% + 24px 라 긴 이름의 «…»가 막대 밖 모서리로 나갔다) */
#wrap .gs-v20-ab-t small, .gs-v20-ab-t small { box-sizing: border-box; min-width: 0; max-width: 100%; }

/* ═════ 굵은 줄 = 상품 이름 · 작은 회색 줄 = 맛 한 줄(10/21 14시 대표 «제목 안 바뀌었잖아 · 여기가 맞아??» · «왜 뭐가 하나도 안 맞아») ═════
   대표가 보는 «상품 제목» = 카드에서 가장 크게 보이는 굵은 줄 → 그 자리·그 모양에 상품 이름(서버 이름 · 2줄까지 · 넘으면 …)
   맛 한 줄(관리자 짧은 설명)은 이름 바로 아래 작은 회색 한 줄(넘으면 …) · 맛 한 줄이 빈 상품은 그리는 스크립트가 줄을 안 그린다(이름 한 칸뿐 · 빈 줄 ✗)
   그리는 스크립트(gs_v16*.js)는 그대로: 글 묶음 부모가 모두 세로 flex(.gs-card-body · .gs-rank-txt · .gs-hot-txt) → order 로 순서만 바꾸고 두 줄의 글 모양을 서로 바꿔 입힌다
   굵은 줄·작은 줄 모양은 자리마다 쓰던 값 그대로(카드 14/500 · 핫딜 세 칸 13/500 · 순위 14/600 · 큰 사진 18/800 ↔ 카드·순위 12/400 · 큰 사진 13/400)
   ⚠️ 띠(js/gs_v18d.js)도 같은 이름표(.gs-card-name · .gs-rank-sub · small)를 단다 → 이름 줄 = «:not(.gs-v18d-band)» */
/* 카드(메인 베스트 탭 격자·가로 줄·피드·오늘은 어떤 한 끼 · 분류 목록 · 베스트 · 핫딜 · 신상 · 검색 첫 화면): 띠 → 이름 → 맛 한 줄 → 가격 */
#wrap .gs-card .gs-card-body > .gs-v18d-band { order: -2; }
#wrap .gs-card.two .gs-card-body > .gs-card-name:not(.gs-v18d-band) { order: -1; margin-top: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--gs-z-title, #43382E); letter-spacing: 0; text-wrap: pretty; }
#wrap .gs-card.two .gs-card-body > .gs-v18d-band ~ .gs-card-name:not(.gs-v18d-band) { margin-top: 4px; }
#wrap .gs-card.two .gs-card-body > .gs-card-taste.gs-card-taste { order: 0; margin-top: 1px !important; display: block; -webkit-line-clamp: none; height: auto !important; max-height: none; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--gs-z-desc, #6f6253); letter-spacing: 0; white-space: nowrap; text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wrap .gs-pd-item .gs-card.two .gs-card-body > .gs-card-name:not(.gs-v18d-band) { font-size: 13px; }   /* 핫딜 TOP 3(좁은 세 칸) = 굵은 줄 한 단계 작게(전 맛 한 줄 13px 그대로) */
#wrap .gs-pd-item.gs-pd-item .gs-card.two .gs-card-body > .gs-card-taste.gs-card-taste { font-size: 12px; max-height: none; }
/* 메인 «베스트 1~10» 순위 줄: 이름(굵은 줄) → 맛 한 줄(작은 회색) → 띠 → 가격 · 맛 한 줄이 없는 상품은 .gs-rank-name 이 곧 이름(그대로 굵게) */
#wrap .gs-rank-item .gs-rank-txt > .gs-rank-sub:not(.gs-v18d-band) { order: -1; font-size: 14px; font-weight: 600; line-height: 20px; color: inherit; letter-spacing: -0.03em; }
#wrap .gs-rank-item .gs-rank-txt:has(> .gs-rank-sub:not(.gs-v18d-band)) > .gs-rank-name { display: block; -webkit-line-clamp: none; font-size: 12px; font-weight: 400; line-height: 17px; color: var(--gs-muted); letter-spacing: 0; white-space: nowrap; text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* «인기 스푼» 큰 사진 카드: 이름(큰 굵은 줄 · 2줄 …) → 맛 한 줄(작은 줄 · 1줄 …) → 띠 → 가격 · 맛 한 줄이 없는 상품은 b 가 곧 이름(그대로) */
#wrap .gs-hot-card .gs-hot-txt > small:not(.gs-v18d-band) { order: -1; padding-right: 44px; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; opacity: 1; text-wrap: pretty; }
#wrap .gs-hot-card .gs-hot-txt:has(> small:not(.gs-v18d-band)) > b { display: block; -webkit-line-clamp: none; padding-right: 44px; font-size: 13px; font-weight: 400; line-height: inherit; letter-spacing: inherit; opacity: .88; white-space: nowrap; text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 10/23 장바구니 «같이 담으면 좋은 메뉴» 자리 뼈대(js/gs_v20.js cartWith) — 받는 동안 같은 크기의 빈 카드(금액 상자가 밀리지 않게) */
.gs-v20-cw-wait .gs-v20-cwc .ph, .gs-v20-cw-wait .gs-v20-cwc b, .gs-v20-cw-wait .gs-v20-cwc .pr { background: #f2efe8; color: transparent; }

/* ══ 10/23 대표 결정 «카드 가격 줄 맞춤»(앞 탭 ee0d1fa9 질문 4 · 메인·베스트·분류·핫딜 같은 줄 두 카드의 가격 줄이 19~22px 엇갈림) ══
   원인 = 카드 글 묶음이 위에서부터 쌓여(띠 칸 있음/없음 · 맛 줄 있음/없음 · 이름 한 줄/두 줄) 가격 줄 높이가 카드마다 달랐다(v18z ② «빈 줄 자리 안 남김» 설계)
   지금 = 같은 줄 카드는 높이가 같으니(격자·가로 줄 = 늘림) 글 묶음이 카드 아래까지 차고 가격 줄·★별점 줄을 묶음 맨 아래에 붙인다 → 가격 줄이 같은 높이
   ★별점이 없는 카드(후기 0)는 별점 줄 자리(6 + 17px)만큼 아래를 비워 둔다 · 남는 빈 곳은 가격 줄 위(이름·맛 줄 아래)에 생긴다 · 사진·띠·이름·맛 줄 모양은 그대로 */
#wrap :is(.gs-grid, .gs-row) > .gs-card { grid-template-rows: auto auto 1fr; align-content: stretch; }
#wrap :is(.gs-grid, .gs-row) > .gs-card > .gs-card-body { align-self: stretch; }
#wrap :is(.gs-grid, .gs-row) > .gs-card > .gs-card-body > .gs-card-price { margin-top: auto; padding-top: 6px; box-sizing: border-box; height: 27px; }   /* 높이 고정 = «부터» 작은 글이 있는 줄(22px)과 없는 줄(21px)의 1px 차이도 없앰 */
#wrap :is(.gs-grid, .gs-row) > .gs-card > .gs-card-body > .gs-card-price:last-child { margin-bottom: 23px; }

/* ══ 10/24 ux8 ⑥(대표 «1~8 바로 도입») 상품 카드 글 층 7 → 4(메인·목록·검색·기획전 .gs-card · 메인 큰 카드 .gs-hot-card)
   사진 딱지는 고르는 방식 하나(.gs-pack «N종 골라담기»·«세트 옵션 N»)만 · 둘째 딱지(맛 마크)·분류 칩 줄·잘리는 설명 줄은 카드에서 숨김(상세 화면엔 그대로)
   남는 것 = 이름 2줄 + 값 + 별점 · 값 숫자는 굵게 «원»은 작게(js 4곳 gs-won) · 이름 14 → 15 · 딱지 11 → 12(12px 아래 글 줄이기) ══ */
#wrap .gs-card .gs-card-img .gs-v18-marks { display: none !important; }
#wrap .gs-card .gs-v18d-band, #wrap .gs-hot-card .gs-v18d-band, #wrap .gs-card .gs-card-taste { display: none !important; }
#wrap .gs-card .gs-card-name { font-size: 15px; line-height: 1.4; }
#wrap .gs-card .gs-card-price { font-size: 16px; font-weight: 800; }
#wrap .gs-card-price .gs-won, #wrap .gs-hot-price .gs-won { margin-left: 1px; font-size: .78em; font-weight: 700; }
#wrap .gs-pack { font-size: 12px; }

/* ═════ ④ 당뇨도시락 세트 상세 가격 아래 카드(10/24 ux1024 · 대표 승인 시안 §5 · js/gs_v20.js dmCard) ═════
   고르는 칸 2개(지금 상품 = 민트 테두리 · 다른 상품 = 링크) + 연민트 상자(제목 · 꼭 알 것 3가지 · 후기 한 줄) · 글자 14px 이상 · 모서리 = v18s 단계 */
#wrap .gs-v20-dm { margin: 12px 0 4px; }
#wrap .gs-v20-dmp { display: flex; gap: 8px; margin: 0 0 12px; }
#wrap .gs-v20-dmp > * { flex: 1; min-width: 0; box-sizing: border-box; min-height: 44px; padding: 12px; border: 1.5px solid #ece5db; border-radius: 16px; background: #fff; color: #24190F; text-decoration: none; }
#wrap .gs-v20-dmp > .on { border-color: #2CD3A0; box-shadow: 0 0 0 1px #2CD3A0 inset; }
#wrap .gs-v20-dmp b { display: block; font-size: 16px; font-weight: 800; line-height: 1.35; color: #24190F; }
#wrap .gs-v20-dmp span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: #6f6253; word-break: keep-all; }
#wrap .gs-v20-dmw { padding: 16px 16px 14px; border-radius: 16px; background: #EEF9F5; }
#wrap .gs-v20-dmw h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; color: #053B31; word-break: keep-all; }
#wrap .gs-v20-dmw ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
#wrap .gs-v20-dmw ul[hidden] { display: none; }
#wrap .gs-v20-dmw li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: #24190F; word-break: keep-all; }
#wrap .gs-v20-dmw li > i { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 999px; background: #fff; }
#wrap .gs-v20-dmw li > i svg { width: 13px; height: 13px; fill: none; stroke: #00785F; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#wrap .gs-v20-dmw blockquote { margin: 12px 0 0; padding: 11px 13px; border-radius: 12px; background: #fff; }
#wrap .gs-v20-dmw blockquote p { margin: 0; font-size: 15px; line-height: 1.45; color: #43382E; }
#wrap .gs-v20-dmw blockquote small { display: block; margin-top: 3px; font-size: 14px; color: #6f6253; }

/* ══ 단추·아이콘 다듬기(2026-10-27 · 대표 «시안 다 반영» · 전후 시안 _대표전용/자사몰_단추·아이콘_전후시안_2026-10-26.html 1~7)
   ① 빈 장바구니 «0» 숨김 ② 바로가기 칸 위 딱지 숨김·선 아이콘 한 색 ③ 사진 위 담기 단추 흰 동그라미+진한 바구니
   ④ 사진 딱지 한 모양(흰 바탕 진갈색 글)·«인기 스푼» 딱지 숨김·순위 숫자 조용히·핫딜 1~3위 테두리 뺌
   ⑤ 칩 한 모양(사진·속 딱지 뺌) ⑥ 고른 상태 = 진갈색(민트 채움은 할 일 단추에만) ⑦ 후기 줄 말풍선 선으로 · 글자 기호 › ⌄ ✕ 는 js/gs_v20.js 끝(gsGlyph)이 그림으로 */
:root { --gs-btn-ink: #24190F; --gs-btn-line: #E7DFD4; --gs-btn-soft: #F4EFE8; }
/* ① */
#header_wrap header .header_box .btn_cart strong[data-gs-rows="0"] { display: none; }
#header_wrap header .header_box .btn_cart strong { min-width: 16px; height: 16px; line-height: 16px; background: var(--gs-btn-ink); color: #fff; box-shadow: 0 0 0 2px #fff; }
/* ② */
#wrap .gs-tile-badge { display: none; }
#wrap .gs-tiles .gs-tile-img, #wrap .gs-tiles.gs-v19-sc .gs-tile-img { border-radius: 16px; background: var(--gs-btn-soft); --sci-fill: transparent; --sci-ink: var(--gs-btn-ink); }
#wrap .gs-sci .k { stroke-width: 1.6; }
#wrap .gs-tile { font-weight: 500; }
/* ③ */
#wrap .gs-card-add { background: #fff; color: var(--gs-btn-ink); box-shadow: 0 1px 3px rgba(36, 25, 15, .12), 0 4px 10px rgba(36, 25, 15, .1); }
#wrap .gs-card-add svg { width: 19px; height: 19px; stroke-width: 1.7; }
#wrap .gd_list_custom .item_link .related_cart_btn, #wrap .goods_product_list .item_link .related_cart_btn, #wrap .main_prd_list .item_link .related_cart_btn {
  width: 36px !important; height: 36px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324190F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 8.6h13.2l-1.1 10.3a1.7 1.7 0 0 1-1.7 1.5H8.2a1.7 1.7 0 0 1-1.7-1.5Z'/%3E%3Cpath d='M9 8.6V7a3 3 0 0 1 6 0v1.6M12 11.8v5M9.5 14.3h5'/%3E%3C/svg%3E") center / 19px no-repeat !important;
  box-shadow: 0 1px 3px rgba(36, 25, 15, .12), 0 4px 10px rgba(36, 25, 15, .1) !important; }
/* ④ */
#wrap .gs-hot-flag { display: none; }
#wrap .gs-pack { background: rgba(255, 255, 255, .94); color: var(--gs-btn-ink); border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 20px; padding: 0 6px; }
#wrap .gs-rank-no { left: 8px; top: 8px; min-width: 24px; height: 24px; line-height: 24px; padding: 0 6px; border-radius: 8px; background: rgba(255, 255, 255, .94); color: var(--gs-btn-ink); font-size: 13px; }
#wrap .gs-pd-item.r1 .gs-card-img, #wrap .gs-pd-item.r2 .gs-card-img, #wrap .gs-pd-item.r3 .gs-card-img { box-shadow: none; }
#wrap .gs-pd-item .rk-num { background: var(--gs-btn-ink) !important; color: #fff !important; border-radius: 8px; box-shadow: none; }
/* ⑤ */
#wrap .gs-who-chips button img { display: none; }
#wrap .gs-who-chips button, #wrap .gs-who-chips button:first-child { height: 36px; padding: 0 14px; border-color: var(--gs-btn-line); color: #4a3d31; font-weight: 500; }
#wrap .gs-v18-chips .gs-v18-chip, #wrap .gs-v18-chips .gs-v18-chip.f1, #wrap .gs-v18-chips .gs-v18-chip.f2, #wrap .gs-v18-chips .gs-v18-chip.f3 { background: #fff; color: var(--gs-btn-ink); box-shadow: inset 0 0 0 1px var(--gs-btn-line); font-weight: 600; }
#wrap .gs-v18-chips .gs-v18-chip .k { display: none; }
/* ⑥ */
#wrap .gs-who-chips button[aria-selected="true"] { background: var(--gs-btn-ink); border-color: var(--gs-btn-ink); color: #fff; font-weight: 600; }
#wrap .gs-clock-tabs button[aria-selected="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--gs-btn-ink); }
#wrap .gs-clock-tabs button[aria-selected="true"], #wrap .gs-clock-tabs button[aria-selected="true"] b, #wrap .gs-clock-tabs button[aria-selected="true"] span { color: var(--gs-btn-ink); }
#wrap .gs-layer .gs-chips button[aria-pressed="true"], #wrap .gs-pkd .gs-chips button[aria-pressed="true"] { background: var(--gs-btn-ink); border-color: var(--gs-btn-ink); color: #fff; }
#wrap .gs-tabs-pill button[aria-selected="true"], .gs-sl-tabs button[aria-selected="true"] span { background: var(--gs-btn-ink); border-color: var(--gs-btn-ink); color: #fff; }
/* ⑦ */
.goods_view.gs-dt .gs-dt-rvbar .rvb-ic { background: var(--gs-btn-soft); color: var(--gs-btn-ink); }
.goods_view.gs-dt .gs-dt-rvbar .rvb-ic svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.gs-sheet-x { background: transparent; color: var(--gs-btn-ink); }
.gs-glyph { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gs-sheet-x .gs-glyph { width: 18px; height: 18px; vertical-align: middle; }
#wrap .gs-more-tile .gs-glyph { width: 20px; height: 20px; vertical-align: middle; }

/* ═════ 10/27 polish1027 — 모든 화면 정밀 점검(대표 10/27 «폰트 위치·정렬·선·간격 하나하나») ═════ */
/* ① 정가 취소선이 칸에 다 안 들어가면 통째로 숨김(전엔 «3,»·«5,9…»처럼 숫자가 잘려 보였다 · 짝 = js/gs_v20.js 끝 fit) */
.gs-fxon.gs-was-off > .gs-was, #wrap .gs-fxon.gs-was-off > .gs-was { display: none; }
.gs-fxon.gs-tight .gs-from-t, #wrap .gs-fxon.gs-tight .gs-from-t { font-size: 0 !important; margin-left: 0 !important; }
.gs-fxon.gs-tight .gs-from-t::after, #wrap .gs-fxon.gs-tight .gs-from-t::after { content: '~'; font-size: 12px; }
/* 고객센터 시간 줄(짝 = js/gs_v16_board.js footer hoursLines): 한 줄은 중간에서 안 끊김 */
html.gs-cs #wrap .gs-cs-call .r1 span .ln { font-style: normal; white-space: nowrap; }
/* ② 상세 «배송비» 줄: «4,000원 (조건부배송)» / «제주·도서산간 추가 3,000~10,000원»(금액이 줄 가운데서 안 끊기게 한 덩어리) / «주문 시 결제(선결제)»
      맨 끝 «택배» 한 줄은 바로 위 «배송» 줄(…출고(롯데택배))과 같은 말이라 숨김 */
#wrap .goods_view.gs-dt .detail_info .detail_sub_info dl dd .area_del { display: block; width: max-content; max-width: 100%; margin-top: 2px; white-space: nowrap; }
#wrap .goods_view.gs-dt .detail_info .detail_sub_info dl dd:has(> .area_del, > .condition_del) > div[style] { display: none; }
/* ③ 제목은 줄 길이를 고르게(«…쓸 수 / 있어요»처럼 한 낱말만 떨어지지 않게) · 본문은 마지막 줄에 한 글자만 남지 않게 */
#wrap h1, #wrap h2, #wrap h3, #wrap h4, #wrap .gs-bd-hero h1, #wrap .gs-mb-hero b { text-wrap: balance; }
#wrap p, #wrap dd, #wrap li { text-wrap: pretty; }
/* ④ 가입 약관 «내용 보기»: 글자 화살표(▼·▲ = 기기마다 높이가 다르다) → 선 아이콘 · 밑줄 대신 회색 글 · 펼치면 아이콘만 뒤집힘(짝 = member/join_agreement.html gs-open) */
#wrap .privacy_box dd button.gs-more-btn { display: inline-flex !important; align-items: center; gap: 2px; min-height: 32px; text-decoration: none !important; }
#wrap .privacy_box dd button.gs-more-btn::after { content: ''; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .2s; }
#wrap .privacy_box dd button.gs-more-btn.gs-open::after { transform: rotate(180deg); }
/* ⑤ 게시판 목록 첨부 아이콘: 글자 가운데 높이에 맞춤 */
#wrap img[alt="파일첨부 있음"], #wrap img[alt="이미지첨부 있음"] { width: auto; height: 14px; margin-left: 4px; vertical-align: -2px; opacity: .7; }
/* ⑥ 바닥글 바로가기 칩: 손가락 누르는 높이 28 → 32px */
#wrap #footer .quick_menu ul li a { display: inline-block; padding: 8px 12px; line-height: 16px; }