/* 굿스푼 새 스킨 v18p — 시안 v18p.css 덧씌움을 작업 스킨 이름표로(2026-10-19 v18v 이식 P-A · 원천 태그 proto-v18v)
   시안 근거 = 영상 291편 정리 §5-1 «전환 전에 넣을 수 있는 것» ①~⑦(대표 10/17 «바로 웹시안에 반영해서 제작해줘»)
   P-A 몫만: ⑦ 보조 글자 대비 · ④ <small> 12px · ② 하단 탭바 · ③ 카드 담기 단추 누르는 칸 44 · ⑤ 메인 배너 정지 단추 · ⑥ 바로가기 칸 바탕 한 색
   ① 후기 무채색은 10/19 P4 통합에서 이 파일 끝에 더함(후기 화면 원본 = P-C 파일 gs_rv_v18o.css·gs_v16_board.css·상세 gs_v16_detail.css — 원본은 안 고치고 덧씌움)
   안 옮긴 것: ③ 상세·골라담기 수량 −/+ 44(P-B 가 옮김) · ④ 뒤처리 골라담기 막대·주문 상세(P-B·마이)
   ④ 글자 크기 단계(11 딱지·12·13·14·15·16·18·20·24·32)는 tools/type_scale_v18p.py --skin 이 원본 CSS 를 직접 고쳤다(P-A·공통 파일만) */

/* ⑦ 회색 면 위 보조 글자 — #7d6c5c(면 #f5f1ea 위 4.47:1 · 기준 4.5 미달) → #73624f(5.20:1) */
:root { --gs-muted: #73624f; }

/* ④ 크기를 따로 안 정한 <small> — 브라우저 기본 «한 단계 작게»(부모의 83%)가 12px 글자 안에서 10px 이 되던 것 */
small { font-size: 12px; font-size: max(12px, .85em); }

/* ② 하단 탭바 — 글자 12px · 고른 탭 = 글자용 민트 굵게 + 홈 아이콘 면 채움(시안 ui home_on · 다른 탭 아이콘은 선 색만) */
.gs-tabbar a { font-size: 12px; }
.gs-tabbar a.on { color: var(--gs-accent-ink); font-weight: 700; }
.gs-tabbar a.on[data-gs-bar="main/index"] svg path { fill: var(--gs-accent); }

/* ③ 담기 단추 — 그림 크기는 그대로, 눌리는 영역만 44×44(단추 가운데에 겹친 투명 칸) */
.gs-card-add { position: relative; }
.gs-card-add::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

/* ⑤ 메인 배너 — 자동 넘김 정지 단추(장수 왼쪽) · 오른쪽 위(v18t 배너 규격 «오른쪽 위 = 숫자·정지 단추 자리») */
.gs-hero-ctl { position: absolute; right: calc(var(--gs-gutter) + 12px); top: 28px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.gs-hero-ctl .gs-hero-count { position: static; }
.gs-hero-pause { position: relative; width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(36, 25, 15, .38); color: #fff; display: grid; place-items: center; cursor: pointer; }
.gs-hero-pause svg { width: 10px; height: 10px; fill: currentColor; display: block; }
.gs-hero-pause::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.gs-hero-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ⑥ 바로가기 8칸 — 칸 바탕 한 색(파스텔 8색 → 면 색 하나) · 옆 메뉴 «분류» 동그라미 칸도 같은 규칙 */
.gs-tile:nth-child(n) { --tile: var(--gs-surface); }

/* ① 후기 — 별·평점은 무채색 · 색은 출처 딱지(스마트스토어·자사몰) 한 곳만 · 베이지·노랑·민트 바탕 걷기(대표 10/15 «리뷰 상세 컬러 빼기» · 시안 v18p.css ① + v18r «사진 후기 자리 칸» 회색 면)
   10/19 v18v P4 통합 — 원본 규칙과 같은 선택자(이 파일이 뒤에 실려 이긴다) · 무채색 = 진갈색 #24190f(글자색) · 꺼진 별 #dcd9d5 · 회색 면 #f6f5f3 · 선 #e7e4e0
   자리: 상세 «후기 보러가기» 막대·후기 카드·후기 칸(스마트스토어 합치기 포함) · 후기 모아 보기 머리·목록·«사진» 표시 · 후기 쓰기 별 · 고도몰 별 그림(ico_review.png 주황) */
:root { --gs-rv-ink: #24190f; --gs-rv-star-off: #dcd9d5; --gs-rv-bg: #f6f5f3; --gs-rv-line: #e7e4e0; }
/* 별 — 우리가 그린 별(글자 ★·SVG) */
.goods_view.gs-dt .gs-rvcard .st { color: var(--gs-rv-ink); }
#wrap .gs-rvx-st { color: var(--gs-rv-ink); }
#wrap .gs-rvx-st i { color: var(--gs-rv-star-off); }
.gs-bw .gs-stars svg { fill: var(--gs-rv-star-off); }
.gs-bw .gs-stars button.on svg { fill: var(--gs-rv-ink); }
#wrap .gs-rvss-star, #wrap .gs-rvss-hero b.gs-rvss-star { color: var(--gs-text); }
/* 별 — 고도몰 별 그림(목록·글 보기·상세 후기 탭) — 주황 그림을 무채색으로(그림 파일은 그대로) */
#wrap .rating > span, #wrap .star_box .star_li, #wrap .bbs_txt_info .star span { filter: grayscale(1) brightness(.3); }
/* 상세 위 «후기 보러가기» 막대 */
.goods_view.gs-dt .gs-dt-rvbar .rvb-ic { background: var(--gs-rv-bg); }
.goods_view.gs-dt .gs-dt-rvbar .rvb-ic svg { fill: var(--gs-rv-ink); stroke: none; }
.goods_view.gs-dt .gs-dt-rvbar .rvb-n i { color: var(--gs-muted); }
.goods_view.gs-dt .gs-dt-rvbar .rvb-go { color: var(--gs-text); }
.goods_view.gs-dt .gs-dt-rvbar .rvb-ar { background: none; }
.goods_view.gs-dt .gs-dt-rvbar .rvb-ar svg { stroke: var(--gs-sub); }
/* 상세 후기 칸 — 자사몰·스마트스토어 수 알약 · 칩 · 접기 · 회색 면 */
.goods_view.gs-dt .gs-rv-src span { background: var(--gs-rv-bg); }
#wrap .gs-rvx-chips .gs-chip[aria-pressed="true"] { border-color: var(--gs-text); background: #fff; color: var(--gs-text); box-shadow: inset 0 0 0 .5px var(--gs-text); }
#wrap .gs-rvx-fold { color: var(--gs-sub); text-decoration: underline; text-underline-offset: 3px; }
#wrap .gs-rvx-what, #wrap .gs-rvx-pic, #wrap .gs-rvx-foot { background: var(--gs-rv-bg); }
#wrap .gs-rvss-tag.mon { background: var(--gs-rv-bg); color: var(--gs-sub); box-shadow: inset 0 0 0 1px var(--gs-rv-line); }
/* 후기 운영 기준 상자(후기 자리에만 있다) */
#wrap .gs-pol, #wrap .gs-bd-hero .gs-pol { background: var(--gs-rv-bg); }
/* 후기 모아 보기 — 머리(민트 그라데이션 → 흰 면 + 선) · 머리 덧말 · «사진» 표시 · 사진 자리 */
html.gs-bd-review #wrap .gs-bd-hero { background: #fff; box-shadow: inset 0 0 0 1px var(--gs-rv-line); }
html.gs-bd-review #wrap .gs-bd-hero > small { color: var(--gs-sub); }
html.gs-bd-review #wrap .list_gallery li.gs-rv .gs-rv-ph { background: var(--gs-rv-bg); color: var(--gs-sub); }
html.gs-bd-review #wrap .list_gallery li.gs-rv .goods_gallery_img { background: var(--gs-rv-bg); }