/* 굿스푼 새 스킨 v18t — 시안 v18t.css·v18t_hero.css 를 작업 스킨 이름표로(2026-10-19 v18v 이식 P-A · 원천 태그 proto-v18v · 대표 10/19 지시)
   P-A 몫: A① 메인 바로가기 아이콘(.gs-sci · 그림 = main/index.html 안 SVG) · A② 순위 숫자 딱지 .rk-num(핫딜 TOP 3 · 검색 층 순위 공용) · A③ 진갈색 꽉 찬 면 → 연민트(따라다니는 배너·PC 옆 배너 틀)
           B 메인배너 16:10 → 5:4(관리자 배너 750×600 = 5:4 라 사진이 잘리지 않는다 · 글은 지금 스킨 모양 그대로 — 사진 왼쪽 위 빈 자리에 진한 글자)
   안 옮긴 것: A④ 골라담기 −/+ 좁은 폭(P-B) · 할인율 빨강 --rate(스킨 카드엔 할인율이 없다 · 상세 할인율은 P-B) · 시안 배너 글 띠(어두운 바탕 · 시안 사진용) */

/* ══ A① 메인 바로가기 8칸 아이콘 — 시안 LOOK.sci 한 벌(선 = 진초록 1.8 · 면 = 민트 한 덩어리 · 글자·그라데이션·그림자 없음 · 크기 = 칸의 54%) ══ */
.gs-tile-img { --sci-ink: #053B31; --sci-fill: #2CD3A0; --sci-bg: var(--tile, var(--gs-surface, #F5F1EA)); }
.gs-sci { display: block; width: 54%; aspect-ratio: 1; line-height: 0; pointer-events: none; }
.gs-sci svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; }
.gs-sci .k { fill: none; stroke: var(--sci-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gs-sci .k.b { fill: var(--sci-bg); }
.gs-sci .f { fill: var(--sci-fill); stroke: none; }
.gs-sci .d { fill: var(--sci-ink); stroke: none; }
/* 320폭: 칸 크기가 이름 길이(베스트도시락200)에 따라 들쭉날쭉 → 칸 크기 하나 */
@media (max-width: 359px) {
  .gs-tiles .gs-tile-img { width: 54px; max-width: none; }
}

/* ══ A② 순위 숫자 딱지 .rk-num — 마크업 <span class="rk-num" data-r="1">1</span> · 크기 = --rk-size(기본 24px)
   1~3위 = 민트 면 + 진초록 숫자(대비 6.5) · 4~10위 = 면 없이 숫자만(같은 칸 폭) · 색을 바꾸려면 --rk-bg · --rk-ink · --rk-ring 만 ══ */
.rk-num { --rk-size: 24px; display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
  min-width: var(--rk-size); height: var(--rk-size); padding: 0 calc(var(--rk-size) * .18); border-radius: calc(var(--rk-size) * .3);
  background: var(--rk-bg, transparent); color: var(--rk-ink, var(--gs-sub, #5e4f40)); box-shadow: var(--rk-ring, none);
  font: 800 calc(var(--rk-size) * .58)/1 'Pretendard', system-ui, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.rk-num[data-r="1"], .rk-num[data-r="2"], .rk-num[data-r="3"] { --rk-bg: #2CD3A0; --rk-ink: #053B31; }
/* 핫딜 TOP 3(메인 #gsPick · 핫딜 화면 .gs-podium) — 왕관(사진 위 가운데 밖) → 사진 왼쪽 위 모서리에 걸친 숫자 딱지
   바탕색 고리 2px = 사진 가장자리와 가르는 칸막이(빛·그림자 아님) · 금·은·동 테두리와 빛 → 민트 한 색 테두리 */
.gs-podium { padding-top: 14px; }
#wrap .gs-pg-event-in .gs-podium { padding-top: 14px; }
.gs-pd-item > .rk-num { position: absolute; top: -7px; left: -5px; z-index: 3; --rk-size: 26px; --rk-ring: 0 0 0 2px var(--gs-app, #fffcf7); }
.gs-pd-item.r1 .gs-card-img, .gs-pd-item.r2 .gs-card-img, .gs-pd-item.r3 .gs-card-img { box-shadow: 0 0 0 1.5px var(--gs-accent, #2CD3A0); }
/* 390 미만: 카드가 좁아 사진 안 왼쪽 위 «N종 골라담기»·팩 딱지가 숫자 딱지 밑으로 들어가던 것 → 딱지를 숫자 아래로 */
@media (max-width: 389px) {
  .gs-pd-item .gs-card-img > .gs-pack { top: 23px; }
}

/* ══ A③ 진갈색(#24190f·#2b1d12) 꽉 찬 면 → 연민트 #E6F8F2 + 진초록 글자 #053B31(대표 10/10 «어두워지는 건 싫다» · 10/19)
   P-A 자리: 따라다니는 배너 «핫딜» 칸(f1) · PC 옆 배너 틀(사진이 뜨기 전·넘어가는 순간 비치던 바탕) — 사진 위 글씨 막·작은 딱지(2,000px² 미만)는 그대로 ══ */
html .gs-v18-follow .gs-v18-fb.f1 { background: #E6F8F2; color: #053B31; }
html .gs-v18-follow .gs-v18-fb.f1 .k { background: #2CD3A0; color: #053B31; }
html .gs-v18-follow .gs-v18-fb.f2 { background: #fff; box-shadow: inset 0 0 0 1px #BFE9DA; }   /* 옆 «기획전» 칸과 같은 연민트가 되지 않게 흰 바탕 + 민트 선 */
html .gs-side-stage { background: var(--gs-surface, #F5F1EA); }

/* ══ B 메인배너 5:4(대표 10/19 «메인배너가 너무 작고 답답하다 · 윙잇 분석해서 크기 교체») — 390폭 350×219 → 350×280 · 500 틀 460×368
   관리자 배너 그룹 2181768524 사진 11장 = 750×600(5:4 · 10/19 GET) → 잘림 0 · 디자인팀 새 규격 1000×800(5:4 · 오른쪽 위 = 숫자·정지 단추 자리) ══ */
.gs-hero .gs-slide { aspect-ratio: 5 / 4; }
.gs-hero .gs-slide img { object-position: 50% 50%; }