/* 굿스푼 새 스킨 v18r — 시안 v18r.css 를 작업 스킨 이름표로(2026-10-19 v18v 이식 P-A · 원천 태그 proto-v18v)
   대표 10/17 밤 «웹디자인에 들어간 것들 중에 AI스러운 이모티콘이나 느낌은 모두 빠져야 돼 · 디자인 UI·UX 다시 검토»
   ① 3D 이모지(img/gs/fluent)·두 색 타일 그림 자리 = js/gs_v18r.js GS_LI 선 아이콘(<span class="gs-li …"><svg>) — 크기·색은 여기
      P-A·공통 자리: 옆 메뉴(분류 동그라미·분류 전체·진열대 칩)·검색 «분류로 찾기»·기획전 «매달 열려요»·회원(가입·찾기·휴면) · 메인 바로가기는 v18t 아이콘(css/gs_v18t.css)
      P-B 자리(장바구니·주문서 3D 그림)는 P-B 몫 — GS_LI 를 같이 쓸 수 있다
   ② 그라데이션 빛 걷기 — 가입 혜택 머리(민트 그라데이션 → 민트 한 색 · 돈주머니 그림 뺌)
   ③ 누르는 크기 44 — 그림·글자 크기는 그대로 두고 눌리는 영역만(가운데 겹친 투명 칸 · v18p ③ 과 같은 방식) */

/* ── ① 선 아이콘 기본(크기 단계) ── */
.gs-li { display: inline-grid; place-items: center; flex: none !important; line-height: 0; color: var(--gs-accent-ink, #00785F); }
.gs-li svg { display: block; width: 20px; height: 20px; }
.gs-li.xs svg { width: 18px; height: 18px; }
.gs-li.sm svg { width: 22px; height: 22px; }
.gs-li.md { width: 40px; height: 40px; border-radius: 50%; background: var(--gs-tint, #E6F8F2); }
.gs-li.md svg { width: 22px; height: 22px; }
.gs-li.lg { display: grid; width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%; background: var(--gs-tint, #E6F8F2); }
.gs-li.lg svg { width: 34px; height: 34px; stroke-width: 1.7; }
/* 옆 메뉴 분류 동그라미 칸(58px 면 위 글자색 선) · 분류 전체 줄(옛 26px 그림 자리) · 진열대 칩(글자와 같은 색 작은 선) */
#wrap .gs-gicons .ic .gs-li.gi { color: var(--gs-text); }
#wrap .gs-gicons .ic .gs-li.gi svg { width: 28px; height: 28px; stroke-width: 1.6; }
#wrap nav .gs-cat-tree .grp > a .gs-li.sm { flex: 0 0 26px; width: 26px; color: var(--gs-sub); }
#wrap nav .gs-cat-chips .gs-li.xs { color: var(--gs-sub); }
#wrap nav .gs-cat-chips .gs-li.xs svg { width: 17px; height: 17px; }
/* 기획전 «매달 열려요» 칸(44px 둥근 네모 .ri 안) */
#wrap .gs-pl-reg .ri .gs-li svg { width: 24px; height: 24px; }
/* 회원 — 가입 혜택 줄(36 원) · 완료·찾은 아이디(64~80 원) · 휴면 안내 · 간편 가입 안내 줄 */
html.gs-mb #wrap .gs-jwhy .gs-li.md { display: grid; margin: 0 auto 6px; width: 36px; height: 36px; }
html.gs-mb #wrap .gs-jwhy .gs-li.md svg { width: 20px; height: 20px; }
html.gs-mb #wrap .gs-jok .gs-li.lg { width: 80px; height: 80px; margin-bottom: 14px; }
html.gs-mb #wrap .gs-jok .gs-li.lg svg { width: 38px; height: 38px; }
html.gs-mb #wrap .gs-found .gs-li.lg, html.gs-mb #wrap .gs-hero .gs-li.lg { width: 64px; height: 64px; margin-bottom: 12px; }
html.gs-mb #wrap .gs-found .gs-li.lg svg, html.gs-mb #wrap .gs-hero .gs-li.lg svg { width: 30px; height: 30px; }
html.gs-mb-join #wrap .gs-note .gs-li.xs { flex: 0 0 auto; margin-top: 1px; }

/* ── ② 그라데이션 빛 걷기 — 가입 혜택 머리: 민트 한 색 · 돈주머니 그림을 뺐으니 글 오른쪽 비움(82px)도 걷는다 ── */
html.gs-mb #wrap .gs-jhero { background: var(--gs-accent, #2CD3A0); }
html.gs-mb #wrap .gs-jhero h2, html.gs-mb #wrap .gs-jhero p { padding-right: 0; }

/* ── ③ 누르는 크기 44 ──
   머리 찜·장바구니(40×40 → 44) · 머리 뒤로(이전) · 따라다니는 배너 ✕(24) · 옆 메뉴 ✕(42) · 칸 머리 «더 보기 ›» 글자 링크(위아래로만) */
#header_wrap header .header_box .right_menu a::after { content: ''; position: absolute; left: -2px; right: -2px; top: -2px; bottom: -2px; }
#header_wrap .sub_top .all_page_prev { position: relative; }
#header_wrap .sub_top .all_page_prev::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.gs-v18-follow .gs-v18-fx { position: relative; }
.gs-v18-follow .gs-v18-fx::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
#wrap nav .gs-cat-x { position: relative; }
#wrap nav .gs-cat-x::after { content: ''; position: absolute; inset: -1px; }
.gs-sec-hd .gs-more { padding: 12px 0; margin: -12px 0; }