/* 굿스푼 새 스킨 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-page { flex: 0 0 90%; display: flex; flex-direction: column; gap: 14px; scroll-snap-align: start; }
.gs-rank-item { display: flex; align-items: center; gap: 12px; color: var(--gs-text); }
.gs-rank-no { flex: 0 0 18px; font-size: 18px; font-weight: 800; color: var(--gs-accent-ink); text-align: center; font-variant-numeric: tabular-nums; }
.gs-rank-item img { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 16px; object-fit: cover; background: var(--gs-surface); }
.gs-rank-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.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; }