/* 굿스푼 새 스킨 v16 메인 칸 — 2026-10-13 (시안 v17c → 실제 스킨)
   원본: ~/goodspoon-skin/prototype/base.css 의 v16 규칙(사진 키우기·핫한 인기 스푼·간편 한 스푼·시간대·핫딜 TOP 3·오늘은 어떤 한 끼?)
   - 이름은 모두 gs- 로 시작(고도몰 옛 CSS 와 안 겹치게) · 색은 gs_v15.css 의 --gs-* 그대로
   - 칸을 그리는 건 js/gs_v16.js · 순서·문구는 js/gs_v16_data.js(tools/gs_v16_export.py)
   - 이 파일은 _header.html 에서 gs_v15.css 뒤에 붙는다 */

/* ── 고정 머리(대표 10/11 «스크롤을 내려도 로고와 카테고리는 보이게») ──
   고도몰 gd_ui.js 의 h_on 은 화면 크기가 한 번 바뀐 뒤에야 켜져서(resizeChk) 들쭉날쭉하다 → 탭이 있는 화면은 gs_v16.js 가 직접 붙인다:
   검색 줄이 화면 위로 다 올라가면 머리글을 «로고 줄 + 탭»만 남겨 위에 붙인다(gs-fix) · 자리는 #header_wrap 높이로 잡아 두어 본문이 안 튄다 */
#header_wrap.gs-hold { padding-top: 0 !important; }
#header_wrap.gs-hold header.h_on:not(.gs-fix) { position: relative !important; box-shadow: none; }
#header_wrap header.gs-fix { position: fixed !important; top: 0; left: 0; right: 0; z-index: 300; box-shadow: 0 1px 0 var(--gs-line); }
#header_wrap header.gs-fix .hd_search, #header_wrap header.gs-fix .gs-strip, #header_wrap header.gs-fix .gs-shipband { display: none; }
@media (min-width: 520px) { #header_wrap header.gs-fix { left: 50% !important; right: auto; width: 500px !important; margin-left: -250px; } }
/* 10/13 대표 «맨 위로 올리면 로고와 카테고리가 배너 돌아가듯 자리를 이탈» — 원인: 원래 스킨 gd_layout.css:64 #header{transition:all .4s}
   (1차 «내릴 때 숨기기»용 · 오늘 뺐다)가 고정이 풀릴 때 margin-left −250→0 을 0.4초 동안 움직였다(미리보기 실측: 왼쪽 232px 튀었다 0.35초에 복귀)
   → 머리글 움직임 효과를 끄고, 고정 아닐 때 PC 폭 h_on 위치값도 풀어 둔다 */
#header_wrap #header, #header_wrap header { transition: none !important; animation: none !important; }
@media (min-width: 520px) { #header_wrap.gs-hold header.h_on:not(.gs-fix) { left: auto !important; width: auto !important; margin-left: 0 !important; } }

/* ── 칸 머리 ── */
.gs-v16 .gs-sec { padding-top: 40px; }
.gs-v16 .gs-sec[hidden], .gs-v16 [hidden] { display: none !important; }
.gs-v16 .gs-sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 var(--gs-gutter) 16px; }
.gs-v16 .gs-sec-hd h3 { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 800; letter-spacing: -0.035em; color: var(--gs-text); text-wrap: balance; }
.gs-v16 .gs-sub { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--gs-muted); }
.gs-v16 .gs-more { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--gs-accent-ink); }
.gs-v16 .gs-more::after { content: ' ›'; }

/* ── 상품 카드(사진 · 담기 · 맛 한 줄 · 이름 · 값) ── */
.gs-row { display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--gs-gutter) 4px; scroll-snap-type: x proximity; scrollbar-width: none; scroll-padding: 0 var(--gs-gutter); }
.gs-row::-webkit-scrollbar { display: none; }
.gs-row .gs-card { flex: 0 0 47%; scroll-snap-align: start; }
.gs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 12px; padding: 0 var(--gs-gutter); }
@media (max-width: 420px) { .gs-grid { padding: 0 14px; column-gap: 8px; } }
@media (max-width: 380px) { .gs-grid { row-gap: 16px; } }
.gs-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.gs-card-img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--gs-card-radius); background: var(--gs-surface); }
.gs-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gs-card:hover .gs-card-img img { transform: scale(1.03); }
.gs-card-addwrap { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1; padding: 8px; box-sizing: border-box; pointer-events: none; display: flex; align-items: flex-end; justify-content: flex-end; }
.gs-card-add { pointer-events: auto; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0; background: #fff; color: var(--gs-accent-ink); display: grid; place-items: center; box-shadow: 0 0 0 1.5px #bfe9da, 0 2px 6px rgba(0, 0, 0, .06); cursor: pointer; }   /* 시안 t05 .card-add(민트 테두리 둥근 바구니 · 10/13) */
.gs-card-add[disabled] { opacity: .35; cursor: default; }
.gs-card-add svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gs-card-body { padding-top: 10px; display: flex; flex-direction: column; color: var(--gs-text); }
.gs-grid .gs-card-body { padding-top: 8px; }
.gs-card-taste { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; height: 40px; color: var(--gs-text); letter-spacing: -0.03em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.gs-card-name { margin: 3px 0 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--gs-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-card.one .gs-card-name { margin-top: 0; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--gs-text); white-space: normal; height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gs-card-price { margin: 5px 0 0; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 22px; letter-spacing: -0.02em; color: var(--gs-text); }
.gs-pack { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 20px; padding: 0 7px; border-radius: 999px; background: rgba(20, 14, 8, .78); color: #fff; }

/* 줄 끝 «더 보기» 칸 */
.gs-more-tile { flex: 0 0 30%; scroll-snap-align: start; display: block; }
.gs-more-in { aspect-ratio: 30 / 47; border-radius: var(--gs-card-radius); background: var(--gs-tint); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--gs-accent-ink); }
.gs-more-in i { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; font-size: 24px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.gs-more-in b { font-size: 13px; font-weight: 700; text-align: center; padding: 0 6px; }

/* 다시 섞기 */
.gs-reshuffle { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--gs-line); border-radius: 999px; background: #fff; color: var(--gs-sub); font-size: 13px; font-weight: 600; cursor: pointer; }
.gs-reshuffle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── 베스트 1~10(탭 3개 · 번호 목록 5개씩 두 쪽) ── */
.gs-tabs-pill { display: flex; gap: 8px; overflow-x: auto; padding: 0 var(--gs-gutter) 16px; scrollbar-width: none; }
.gs-tabs-pill::-webkit-scrollbar { display: none; }
.gs-tabs-pill button { flex: 0 0 auto; height: 34px; padding: 0 14px; border: 1px solid var(--gs-line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--gs-sub); white-space: nowrap; cursor: pointer; }
.gs-tabs-pill button[aria-selected="true"] { background: var(--gs-accent); border-color: var(--gs-accent-ink); color: var(--gs-accent-text); font-weight: 700; }
.gs-rank { display: flex; gap: 16px; overflow-x: auto; padding: 0 var(--gs-gutter); scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding: 0 var(--gs-gutter); }
.gs-rank::-webkit-scrollbar { display: none; }
.gs-rank::after { content: ''; flex: 0 0 8px; }   /* 10/23 마지막 쪽도 왼쪽 맞춤(쪽 = 100% − 24px · 사이 16 → 모자란 8px · 없으면 마지막 쪽이 오른쪽에 붙어 앞 쪽 글이 왼쪽에 잘려 보였다) */
/* 10/23 대표 «베스트 9개 · 3개씩 3쪽 옆으로 · 썸네일 훨씬 크게 · 설명은 오른쪽»(전: 5개씩 2쪽 · 번호 칸 18px + 사진 84px)
   사진 = 쪽 폭의 40%(쪽 = 화면 − 여백 40 − 다음 쪽 걸침 24 · 폰 360 → 118px · 393 → 132px · PC 500 → 174px) · 번호 = 사진 왼쪽 위 딱지
   ⚠️ 높이를 바꾸면 아래 «옛 진열 뼈대»(#gsBestFallback)의 --rk-pic·--rk-row 도 같이 */
.gs-rank-page { flex: 0 0 90%; display: flex; flex-direction: column; gap: 16px; scroll-snap-align: start; }
.gs-rank-item { display: flex; align-items: center; gap: 14px; color: var(--gs-text); }
.gs-rank-pic { position: relative; flex: 0 0 40%; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--gs-surface); }
.gs-rank-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gs-rank-no { position: absolute; left: 0; top: 0; min-width: 30px; height: 30px; padding: 0 8px; box-sizing: border-box; border-radius: 0 0 12px 0; background: var(--gs-accent-ink); color: #fff; font-size: 15px; line-height: 30px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.gs-rank-txt { flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* 쪽 점(● ○ ○ · 누르면 그 쪽) — ‹ › 단추는 두지 않는다(10/23 대표 «‹ › 전부 없애 줘 · 터치로») */
.gs-rank-dots { display: flex; align-items: center; justify-content: center; padding: 10px var(--gs-gutter) 0; }
.gs-rank-dots[hidden] { display: none; }
.gs-rank-dot { width: 22px; height: 24px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.gs-rank-dot i { display: block; width: 6px; height: 6px; border-radius: 4px; background: var(--gs-line); transition: width .2s, background-color .2s; }
.gs-rank-dot.on i { width: 18px; background: var(--gs-accent-ink); }
.gs-rank-name { font-size: 14px; font-weight: 600; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -0.03em; text-wrap: balance; }
.gs-rank-sub { font-size: 12px; color: var(--gs-muted); line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-rank-price { font-size: 15px; font-weight: 700; }
.gs-v16 .gs-fallback .goods_list_box { margin: 0; }

/* ── 핫한 인기 스푼(세로로 긴 사진 카드 · 글은 사진 위) ── */
.gs-v16 .gs-hot-sec { margin-top: 40px; padding: 30px 0 26px; background: linear-gradient(180deg, var(--gs-band) 0%, var(--gs-app) 100%); }
.gs-hot-row { gap: 12px; padding-bottom: 6px; }
.gs-hot-card { position: relative; flex: 0 0 62%; scroll-snap-align: start; }
.gs-hot-img { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--gs-surface); box-shadow: 0 10px 26px rgba(60, 50, 30, .14); }
.gs-hot-img img { width: 100%; height: 100%; object-fit: cover; }
.gs-hot-flag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px 0 8px; height: 26px; border-radius: 999px; font-style: normal; background: rgba(255, 255, 255, .94); color: var(--gs-accent-ink); font-size: 12px; font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.gs-hot-flag svg { width: 14px; height: 14px; fill: var(--gs-accent); }
.gs-hot-card .gs-pack { top: 14px; right: 12px; }
.gs-hot-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 16px 16px; display: flex; flex-direction: column; gap: 4px; color: #fff; background: linear-gradient(to top, rgba(40, 24, 10, .78) 0%, rgba(40, 24, 10, .38) 55%, rgba(40, 24, 10, 0) 100%); }
.gs-hot-txt b { padding-right: 44px; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.gs-hot-txt small { padding-right: 44px; font-size: 13px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-hot-price { margin-top: 2px; font-size: 16px; font-weight: 800; }
.gs-hot-add { position: absolute; right: 12px; bottom: 12px; }
.gs-hot-add .gs-card-add { width: 36px; height: 36px; }
.gs-hot-row .gs-more-tile { flex-basis: 30%; align-self: stretch; }
.gs-hot-row .gs-more-in { aspect-ratio: auto; height: 100%; min-height: 160px; }
.gs-v16 #sec-repeat + .gs-sec { padding-top: 30px; }

/* ── 간편 한 스푼(상황 칩) ── */
.gs-who-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 var(--gs-gutter) 16px; scrollbar-width: none; }
.gs-who-chips::-webkit-scrollbar { display: none; }
.gs-who-chips button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 5px; border: 1px solid var(--gs-line); border-radius: 999px; background: #fff; color: var(--gs-sub); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.gs-who-chips button:first-child { padding-left: 14px; }
.gs-who-chips img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.gs-who-chips button[aria-selected="true"] { background: var(--gs-tint); border-color: var(--gs-accent-ink); color: var(--gs-accent-ink); font-weight: 700; }

/* ── 지금 가장 먹고 싶은 한 스푼(시간대 4칸) ── */
.gs-v16 .gs-time-band { margin-top: 40px; padding: 32px 0 30px; background: var(--gs-band); }
.gs-clock-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 var(--gs-gutter); }
.gs-clock-tabs button { border: 0; border-radius: 16px; background: var(--gs-app); padding: 12px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--gs-sub); cursor: pointer; }
.gs-clock-tabs b { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--gs-text); }
.gs-clock-tabs span { font-size: 12px; font-weight: 600; }
.gs-clock-tabs button[aria-selected="true"] { background: var(--gs-accent); color: var(--gs-accent-text); }
.gs-clock-tabs button[aria-selected="true"] b { color: var(--gs-accent-text); }
.gs-clock-line { margin: 14px var(--gs-gutter); font-size: 14px; font-weight: 600; color: var(--gs-text); }

/* ── 오늘의 핫딜 TOP 3(사진 위 금·은·동 왕관) ── */
.gs-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px var(--gs-gutter) 0; }
.gs-pd-item { position: relative; min-width: 0; }
.gs-pd-crown { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); z-index: 3; width: 40px; filter: drop-shadow(0 3px 4px rgba(60, 40, 0, .22)); }
.gs-pd-crown svg { display: block; width: 40px; height: auto; }
.gs-pd-item .gs-card-img { border-radius: 16px; }
.gs-pd-item.r1 .gs-card-img { box-shadow: 0 0 0 2.5px #E2A812, 0 8px 20px rgba(226, 168, 18, .22); }
.gs-pd-item.r2 .gs-card-img { box-shadow: 0 0 0 2.5px #AEB8C2, 0 8px 20px rgba(120, 130, 140, .18); }
.gs-pd-item.r3 .gs-card-img { box-shadow: 0 0 0 2.5px #A85A2A, 0 8px 20px rgba(168, 90, 42, .2); }
.gs-pd-item .gs-card-taste { font-size: 13px; line-height: 18px; height: 36px; }
.gs-pd-item .gs-card-name { font-size: 12px; }
.gs-pd-item .gs-card-price { font-size: 14px; }
.gs-pd-item .gs-card-add { width: 28px; height: 28px; }

/* ── 오늘은 어떤 한 끼?(끝없는 목록) ── */
.gs-feed-why { margin: -4px var(--gs-gutter) 14px; padding: 9px 12px; border-radius: 12px; background: var(--gs-band); font-size: 13px; color: var(--gs-sub); }
.gs-feed-why b { color: var(--gs-text); }
.gs-feed-more { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px var(--gs-gutter) 0; }
.gs-feed-more button { min-width: 180px; height: 44px; border: 0; border-radius: 12px; background: #fff; color: var(--gs-text); box-shadow: inset 0 0 0 1px var(--gs-line); font-size: 14px; font-weight: 600; cursor: pointer; }
.gs-feed-more span { font-size: 12px; color: var(--gs-muted); }

/* ── 가입 유도(로그인 안 한 손님만) ── */
.gs-v16 + .gs-join, .gs-v16 .gs-join { margin-top: 40px; }

/* ── 출고 마감 띠(머리글 검색창 아래 · 시안 v17c .ship-band · 글은 outline/header/standard.html) ── */
#header_wrap header .gs-shipband { display: flex; align-items: center; height: 32px; margin: 0; padding: 0 var(--gs-gutter); background: var(--gs-band); color: var(--gs-sub); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
#header_wrap header .gs-shipband span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#header_wrap header .gs-shipband span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--gs-accent); vertical-align: 1px; }

/* ── 고도몰이 그린 목록 카드의 «담기»(.related_cart_btn)도 시안 모양 — 원래 gs_v15.css 의 ui_add.svg 는 그림 안 currentColor 가 검정으로 그려졌다 ── */
#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: 30px !important; height: 30px !important; border-radius: 50% !important; border: 0 !important; font-size: 0 !important; color: transparent !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300785F' stroke-width='1.8' 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 / 16px no-repeat !important;
  box-shadow: 0 0 0 1.5px #bfe9da, 0 2px 6px rgba(0, 0, 0, .06) !important; }

/* ── 2026-10-14 대표 «팝업·배너창도 기능 문제거나 개발 내용과 다르면 폐기» — 새 스킨에서만 숨김(관리자 설정·추적 스크립트는 그대로) ── */
/* ① 모비온(Enliple) 사이트 안 추천 배너 «오늘의 추천상품»(MBRIS · 관리자 «외부 스크립트»가 싣는 enp_mbris.min.js) — 머리·제목·입력 칸을 가렸다
      그 스크립트가 만드는 자리 = div#mbris_<종류>_section · iframe#iframe_mbris_<종류>_section(enp_mbris.min.js 의 상수표 MAIN·DETAIL·BOUNCE·MCOVER·NOTYPOP·RT_RCMD…)
      🟥 방문·전환 수집(enp_tracker_godomall_rent.min.js · 바닥글·장바구니·상세·주문 완료 템플릿)은 건드리지 않는다 — 모양만 숨김 */
[id^="mbris_"][id$="_section"], iframe[id^="iframe_mbris_"] { display: none !important; }
/* ② 카카오 TALK 떠 있는 단추(관리자 배너 1241711184 → outline/_header.html:306 .kakao_ch) — 시안에 없고 −/+·담기·가입하기·주문서 칸을 가렸다
      → 숨기고 바닥글 CS 칸에 같은 주소 글자 링크(js/gs_v16.js kakaoLink · 주소는 그 배너 링크를 그대로 읽는다) */
.kakao_ch { display: none !important; }
#footer .gs-ft-kakao { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--gs-accent-ink); }
/* ④ 우편번호 찾기 창(고도몰 gd_make_layer_popup → #layerSearch · iframe share/postcode_search.php) — 500px 한 벌 가운데 · 창 안 모양은 js/gs_v16.js 가 CSS 를 넣는다 */
#layerSearch { left: 50% !important; width: 100% !important; max-width: 500px; transform: translateX(-50%); }
#layerSearch #layerSearchArea, #layerSearch #layerSearchInner { width: 100% !important; }

/* ── 10/21 대표 «줄표 기호 빼기»: 수량 −/+ 단추는 글자 대신 선으로 그린다(손님 화면 글에 «−» 0개) · 색 = 단추 글자색(currentColor · 꺼짐이면 연한 색) · 누르는 칸 ::after 는 그대로 ── */
#wrap .gs-qi { font-size: 0 !important; background-image: linear-gradient(currentColor, currentColor) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 12px 2px !important; }
#wrap .gs-qi.gs-qi-p { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor) !important; background-size: 12px 2px, 2px 12px !important; }

/* 10/21 대표 «다시 섞기 기능은 일단 빼줘»: 메인 «인기 스푼»·«오늘은 어떤 한 끼?» 칸 머리의 다시 섞기 단추 두 개를 숨긴다(단추·처리 코드는 그대로 두어 되살리기 = 이 줄만 지우기 · gs_v16.js 가 단추를 찾으므로 HTML 에서 지우지 않는다) */
#wrap .gs-sec-hd > .gs-reshuffle { display: none !important; }

/* ── 10/21 대표 «옛날 고도몰 웹디자인이 뜨면서 버벅댄다» ──
   ① 메인 «베스트 1~9»: 서버가 그린 옛 진열 6(#gsBestFallback)은 상품 정보를 받아 새 순위 칸을 그린 뒤에야 숨었다 → 처음 그리기부터 내용을 가리고
      새 칸과 같은 높이 뼈대를 보인다 · 그 아래 빈 자리 한 화면(100vh)을 더 잡아 둔다
      10/23 3개씩 3쪽: 탭 줄 50 + 순위 3줄(줄 = 사진과 글 칸 134 중 큰 쪽 · 사이 16) + 쪽 점 34 · 사진 = (화면 − 64) × 40% (위 .gs-rank-pic 과 같은 셈 · 실측 393 → 517 · PC 500 → 639)
      (뒤 칸들은 새 순위 칸과 같은 때 그려진다 → 그 전에 바닥글이 뼈대 바로 밑에 보였다가 밀려 내려가는 흔들림 0 · PC 실측 CLS 0.107 → 아래 시험) · 새 칸이 그려지면 js/gs_v16.js 가 이 칸을 hidden 으로(전과 같음)
      · 못 그리면(받기 실패·자료 없음) js/gs_v16.js 가 html.gs-fb-free 로 바로 되살림 · 스크립트가 아예 안 돌면 5초 뒤 저절로 되살림(원래 값 height auto · overflow visible) */
html:not(.gs-fb-free) #gsV16 #gsBestFallback:not([hidden]) {
  --sk: var(--gs-surface, #f5f1ea); --skx: var(--gs-gutter, 20px);
  --rk-pic: calc((min(100vw, 500px) - 64px) * .4); --rk-row: max(134px, var(--rk-pic)); --rk-o: calc((var(--rk-row) - var(--rk-pic)) / 2);
  --rk-tx: calc(var(--skx) + var(--rk-pic) + 14px); --rk-h: calc(3 * var(--rk-row) + 32px);
  height: calc(50px + var(--rk-h) + 34px + 100vh); overflow: hidden;
  background:
    linear-gradient(var(--sk), var(--sk)) var(--skx) 0 / 112px 34px no-repeat,
    linear-gradient(var(--sk), var(--sk)) calc(var(--skx) + 120px) 0 / 104px 34px no-repeat,
    linear-gradient(var(--sk), var(--sk)) calc(var(--skx) + 232px) 0 / 84px 34px no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 var(--rk-o), var(--sk) var(--rk-o) calc(var(--rk-o) + var(--rk-pic)), transparent calc(var(--rk-o) + var(--rk-pic)) calc(var(--rk-row) + 16px)) var(--skx) 50px / var(--rk-pic) var(--rk-h) no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--rk-row) / 2 - 40px), var(--sk) calc(var(--rk-row) / 2 - 40px) calc(var(--rk-row) / 2 - 22px), transparent calc(var(--rk-row) / 2 - 22px) calc(var(--rk-row) + 16px)) var(--rk-tx) 50px / 44% var(--rk-h) no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--rk-row) / 2 + 8px), var(--sk) calc(var(--rk-row) / 2 + 8px) calc(var(--rk-row) / 2 + 26px), transparent calc(var(--rk-row) / 2 + 26px) calc(var(--rk-row) + 16px)) var(--rk-tx) 50px / 24% var(--rk-h) no-repeat;
  animation: gsFbLate 0s linear 5s forwards;
}
html:not(.gs-fb-free) #gsV16 #gsBestFallback:not([hidden]) > * { visibility: hidden; animation: gsFbShow 0s linear 5s forwards; }
@keyframes gsFbLate { to { height: auto; overflow: visible; background: none; } }
@keyframes gsFbShow { to { visibility: visible; } }
/* ② 우편번호 찾기 창: 창 안 우리 모양(js/gs_v16.js postcodeFrames)을 입히기 전 고도몰 기본 모양이 먼저 보였다(아이폰 실측 0.2초)
      → 입힐 때까지 창(iframe)만 가린다(창 바탕 #layerSearchArea 흰 칸은 보임) · 입히면 gs-post-on · 못 입혀도 3초 뒤 저절로 보임 */
#layerSearch iframe#layerSearchFrame[src*="postcode_search"]:not(.gs-post-on) { visibility: hidden; animation: gsPostLate 0s linear 3s forwards; }
@keyframes gsPostLate { to { visibility: visible; } }

/* [10/22 저녁 대표 승인 2번·7번] 아래에서 올라오는 창(js/gs_v16.js GS_BSHEET) — 주문서 «필수 동의» · 1:1 문의 «어떻게 남길까요?»
   시안 값: 창 #fffdf8 · 위 모서리 24px · 막 rgba(20,30,28,.45) · 단추 54px/16px · 주 단추 rgb(44,211,160)/rgb(5,59,49) · 보조 흰 바탕 테두리 #e2d9cd · 카카오 #FEE500/#191919 · 목록 상자 #f4efe7 14px
   PC 도 500px 칸 안(머리·아래 막대와 같은 자리) · 다른 떠 있는 칸(10050)보다 위 */
html.gs-bs-open, html.gs-bs-open body { overflow: hidden; }
.gs-bs-dim { position: fixed; inset: 0; z-index: 10090; background: rgba(20, 30, 28, .45); opacity: 0; transition: opacity .2s ease; }
.gs-bs-dim.in { opacity: 1; }
.gs-bs { position: fixed; left: 50%; bottom: 0; z-index: 10091; box-sizing: border-box; width: 100%; max-width: 500px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 22px 20px calc(26px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: #fffdf8; box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
  font-family: var(--gs-font, Pretendard, -apple-system, sans-serif); color: #1f2a27; transform: translate(-50%, 100%); transition: transform .22s ease; outline: none; }
.gs-bs.in { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .gs-bs, .gs-bs-dim { transition: none; } }
.gs-bs-grip { width: 40px; height: 4px; margin: -8px auto 14px; border-radius: 2px; background: #e6ded3; }
.gs-bs h4 { margin: 0 0 6px; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -.3px; color: #1f2a27; }
.gs-bs > p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: #6b625a; word-break: keep-all; }
.gs-bs-list { list-style: none; margin: 0 0 16px; padding: 4px 14px; border-radius: 16px; background: #f4efe7; }
.gs-bs-list > li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #e9e1d6; font-size: 15px; line-height: 1.4; color: #2b2420; }
.gs-bs-list > li:last-child { border-bottom: 0; }
.gs-bs-list > li > i { flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #d9cfc2; border-radius: 50%; background: #fff; }
.gs-bs-list > li > span { flex: 1; min-width: 0; word-break: keep-all; }
/* 10/23 결제 시험 3번(«필수 동의 창에서도 하나씩 누를 수 있게 · 누를 수 있을 것 같은 모양»): 줄 전체 = 체크 단추 · 안 고름 = 회색 체크 동그라미 · 고름 = 민트 면 + 흰 체크(주문서 동의 칸과 같은 민트) */
.gs-bs-list > li > .gs-bs-ck { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: -6px 0; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 15px; line-height: 1.4; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gs-bs-list > li > .gs-bs-ck > i { flex: none; width: 24px; height: 24px; box-sizing: border-box; border: 2px solid #cfc3b4; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8' fill='none' stroke='%23c4b8a8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; transition: background-color .15s, border-color .15s; }
.gs-bs-list > li > .gs-bs-ck[aria-checked="true"] > i { border-color: rgb(44, 211, 160); background-color: rgb(44, 211, 160); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.gs-bs-list > li > .gs-bs-ck > span { flex: 1; min-width: 0; word-break: keep-all; }
.gs-bs-list > li > .gs-bs-ck:focus-visible { outline: 2px solid var(--gs-accent-ink, #00785F); outline-offset: 2px; border-radius: 8px; }
.gs-bs-list .gs-bs-view { flex: none; min-width: 44px; min-height: 36px; margin: -6px -6px -6px 0; padding: 0 6px; border: 0; background: none; color: #6b625a; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.gs-bs-list > li.gs-bs-terms { display: block; max-height: 200px; overflow-y: auto; padding: 12px; margin: 0 0 10px; border: 1.5px dashed #ead9c6; border-radius: 12px; background: #fffdf9; font-size: 13px; line-height: 1.6; color: #6b625a; }
.gs-bs-list > li.gs-bs-terms[hidden] { display: none; }
.gs-bs-btn { display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; height: 54px; margin-top: 10px; padding: 0 12px; border: 0; border-radius: 16px;
  font-family: inherit; font-size: 16px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; word-break: keep-all; }
.gs-bs-btn.pri { background: rgb(44, 211, 160); color: rgb(5, 59, 49); }
.gs-bs-btn.sec { background: #fff; color: #3b332d; border: 1.5px solid #e2d9cd; }
.gs-bs-btn.kakao { background: #FEE500; color: #191919; }
.gs-bs-btn svg { width: 20px; height: 20px; flex: none; }
.gs-bs-btn:focus-visible, .gs-bs-view:focus-visible { outline: 2px solid var(--gs-accent-ink, #00785F); outline-offset: 2px; }
.gs-bs-small { margin: 12px 0 0; font-size: 13px; line-height: 1.5; text-align: center; color: var(--gs-muted, #73624f); word-break: keep-all; }

/* 10/24 ux8 ⑤ 메인 첫 화면 머리 줄이기(js/gs_v16.js slimHead) — 적립 띠 숨김 · 검색칸 = 로고 줄 돋보기(누르면 열림) · 출고 띠·탭 그대로
   :has(#gsV16) = 메인 본문이 있는 화면에서 처음 그림부터(스크립트 전 깜빡임 ✗) · 스크립트가 못 돌면 검색은 하단 탭 «검색» */
html:has(#gsV16) #header_wrap header .gs-strip, html.gs-main-slim #header_wrap header .gs-strip { display: none !important; }
html:has(#gsV16):not(.gs-srch-show) #header_wrap header .hd_search, html.gs-main-slim:not(.gs-srch-show) #header_wrap header .hd_search { display: none !important; }
#header_wrap .right_menu .gs-hd-srch { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: inherit; }
#header_wrap .right_menu .gs-hd-srch svg { width: 24px; height: 24px; }