/* gb_main.css - 공동구매 홈(main.asp)
기획 groupbuy_S6.html 의 inline style.
- 모든 선택자는 #group_buying_area 스코프 안에서만 적용된다(헤더/푸터 침범 방지).
- 이 파일을 수정하면 include/gb_css.asp 의 GB_CSS_VER 값을 함께 올릴 것.
- 2026-09-15 스타일 개선. gb_ui.css(공동구매 전 페이지 공용)는 건드리지 않고
이 파일에서만 덮어쓴다. 로드 순서가 gb_ui -> gb_main 이라 같은 특정도면 이 파일이 이긴다.
*/
/* ===== S6 메인 페이지 스타일 (기획 groupbuy_S6.html inline style 이식) ===== */
body{overflow-x:hidden;}
/* ---- 자간 리셋 (2026-09-15 실측) ----
모바일 common.css 의 body{letter-spacing:-0.05em} 이 여기까지 상속돼서
같은 CSS 인데 모바일만 자간 -0.7px 로 한글이 붙어 보였다(PC 는 normal).
공동구매 영역 안에서만 되돌려 PC·모바일 글자 밀도를 맞춘다. */
#group_buying_area{letter-spacing:normal;}
/* 폭 1200px : 사이트 헤더 head-top · 푸터 section · 공동구매 서브메뉴가 모두 1200px 이라 맞춤.
전에는 본문만 1280px 이라 서브메뉴와 좌우 선이 80px 어긋나 있었다(2026-09-16 실측). */
#group_buying_area .s6-wrap{max-width:1200px;margin:0 auto;padding:52px 0 60px;display:flex;flex-direction:column;gap:56px;}
/* 진행 중 목록 구간만 가로 전체 배경 (2026-09-23 사용자 지시).
main.asp 에서 이 구간을 .sec-band > .sec-band-in 으로 감쌌다.
.s6-wrap(1200px 가운데 정렬) 안에 있으면 배경을 화면 끝까지 늘릴 수 없어 밖으로 꺼냈다.
위아래 여백은 원래 .s6-wrap 이 주던 값을 띠와 나눠 갖는다.
구간 사이 112px(gap 56 x 2, 사이의 .mo-gap 은 높이 0인 빈 div)을 그대로 유지한다. */
/* 배경색을 띠에서 떼어내 클래스 하나로 몰았다 (2026-09-23 사용자 지시).
.sec-band 는 색도 여백도 갖지 않고 가로 폭만 담당한다. 색이 필요한 띠에만 .bg-color-gray 를 함께 붙인다.
위아래 여백은 .sec-band-in 이 맡는다. 안쪽 여백이라 부모 배경이 그대로 비쳐 보여 결과는 같다.
여백을 .sec-band 에 두면 자기 여백이 있는 .s6-wrap 띠에 60px 이 덧붙어 구간 간격이 벌어진다. */
#group_buying_area .sec-band-in{max-width:1200px;margin:0 auto;min-width:0;padding:60px 0;}
#group_buying_area .bg-color-gray{background:#fff;} /* 2026-09-28 사용자 지시로 흰색. 회색은 상위 메뉴·히어로로 옮김 */
/* 상위 메뉴 배경 흰색 (2026-09-29 사용자 지시). 09-28 남색 배경용 메뉴 덮어쓰기(흰색 투명도 칩·선택 칩 흰 면 등 9줄)를 삭제해
공용 gb_ui 의 밝은 배경용 기본값(흰 칩 · #333 글자 · 호버 #F5F5F5 · 선택 칩 남색 면)을 다른 페이지와 같이 쓴다. */
#group_buying_area .gb-snav{background:#fff;}
/* 메인만 상위 메뉴 하단 28 -> 20px (2026-09-29 사용자 지시). 599px 이하는 gb_ui 값 유지 */
@media (min-width:600px){#group_buying_area .gb-snav-in{padding-top:20px;padding-bottom:20px;}}
/* 메인 히어로 어두운 배경 (2026-09-28 사용자 지시) : 히어로 영역을 키컬러 남색(#222450)으로.
공용 gb_ui 의 히어로 진행바·숫자·화살표(#1B1D1C)가 배경에 묻혀 메인에서만 덮어쓴다.
가이드에 어두운 배경용 값이 없어 흰색 투명도로 단계를 만듦 : 바탕선 .28 · 보조 글자 .5 */
#group_buying_area .hero-cards .hero-progress{background:rgba(255,255,255,.28);}
#group_buying_area .hero-cards .hero-progress-fill{background:#ffffff;}
#group_buying_area .hero-cards .hero-frac{color:#ffffff;}
#group_buying_area .hero-cards .hero-frac .cur::after,#group_buying_area .hero-cards .hero-frac .tot{color:rgba(255,255,255,.5);}
#group_buying_area .hero-cards .hero-nav{color:#ffffff;}
/* ---- 섹션 머리말 ---- */
#group_buying_area .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
#group_buying_area .sec-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--hot);letter-spacing:.04em;margin-bottom:10px;}
/* 점 삭제 (2026-09-22 사용자 지시). main.asp 의 은 그대로 두고 CSS 로만 감춘다.
asp 를 건드릴 필요가 없고, 되살리려면 이 한 줄만 지우면 된다.
깜빡임 애니메이션 정의도 쓰는 곳이 없어져 함께 삭제. */
#group_buying_area .sec-eyebrow .dot{display:none;}
/* flex 로 두면 "4" 와 "건" 사이 텍스트 노드까지 flex 아이템이 되어 gap 만큼 벌어진다.
블록으로 두고 이모지 아이콘만 vertical-align 으로 글자 중앙에 맞춘다. */
#group_buying_area .sec-title{display:block;font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.025em;line-height:1.25;}
#group_buying_area .sec-desc{font-size:13.5px;line-height:1.6;color:#999999;margin-top:8px;}
/* ---- 필터 탭 ----
기존 테두리 rgba(0,0,0,.08) 은 흰 바탕에서 거의 안 보여 비활성 탭이 떠 있지 않았다.
글꼴은 사이트 기본(body 상속)으로 통일한다. gb_ui.css 가 'Noto Sans KR' 을 박아두어
탭·버튼만 한글 글꼴이 달랐다(2026-09-15 실측). */
#group_buying_area .s6-filterbar{display:flex;align-items:center;gap:12px;margin-top:30px;}
/* 필터 탭 숨김 (2026-09-23 사용자 지시). 상위 메뉴에 같은 필터(전체·진행중·인기·마감임박·신규)가
생겨 같은 기능이 두 줄이 됐다. 마크업은 그대로 두고 이 한 줄로만 감춘다. 되돌리려면 이 규칙을 지운다. */
#group_buying_area .s6-filterbar{display:none;}
#group_buying_area .s6-filterbar .subtabs{flex:1;min-width:0;}
/* 필터 탭 - 사용자 육안 결정(2026-09-17 9차). 가이드 SubTab 은 44px / 간격 8px 이지만 실제 화면에서
너무 커 보여 33px / 간격 6px 로 조정. 검수의 터치 크기 지적은 의도된 예외.
되돌리려면 height 44px, gap 8px */
#group_buying_area .subtabs{gap:6px;}
#group_buying_area .subtab-btn{height:33px;padding:0 16px;border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--clear);color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.01em;transition:all .15s var(--ease);}
/* 호버 무채색·차분하게 (2026-09-17 사용자 지시). 네이비 테두리+글자 전환이 시끄러워 회색 계열로 */
#group_buying_area .subtab-btn:hover{border-color:#CCCCCC;background:#F5F5F5;color:#1a1a1a;}
/* 활성 탭 키컬러로 되돌림 (2026-09-23 사용자 지시). 09-17 에 #1a1a1a 로 뒀던 값.
페이지에 브랜드 색이 상시로 보이는 자리가 없었다(버튼 네이비는 호버에만 나와 모바일에선 안 보임).
#1a1a1a 는 카드 제목과 색 무게가 같아 선택 상태로 읽히지 않는 문제도 있었다.
gb_ui.css 에도 같은 선언이 있으나 로드 순서상 이 파일이 이긴다. 값은 둘이 같아졌다. */
#group_buying_area .subtab-btn.active{background:var(--primary);border-color:var(--primary);color:var(--clear);}
#group_buying_area .cat-select{height:40px;border:1.5px solid var(--border);border-radius:var(--r-btn);background:var(--clear);color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;padding:0 12px;cursor:pointer;flex-shrink:0;}
/* ---- 히어로 : 카드 슬라이드 (2026-09-23 전면 교체) --------------------------
참고 페이지 looxloo.com 메인비주얼과 같은 구성. 1920px 화면에서 실측한 값이다.
카드 480px(=25vw) · 라운드 24px · 옆카드 scale(.875) · 위치 보정 15px(=1.5rem)
전환 500ms cubic-bezier(.4,.9,.3,1) · 네비 위 여백 24px
진행바 395x1px(바탕 #E9E9E9 / 채움 #1B1D1C) · 숫자 12px 600 · 화살표 6x12
참고 페이지 rem 은 화면 폭에 따라 변하므로(1920에서 10px, 390에서 11px) px 로 옮겼다.
카드 속은 참고와 다르다. 위에 1:1 썸네일, 아래 작은 텍스트가 들어간다. */
#group_buying_area .hero-cards{padding:50px 0 32px;background:#222450;}
#group_buying_area .hero-swiper{overflow:hidden;}
/* 카드 폭을 CSS 가 정한다(slidesPerView:'auto'). 25vw = 참고 페이지의 480/1920 과 같은 비율 */
#group_buying_area .hero-swiper .swiper-slide{width:22vw;max-width:430px;box-sizing:border-box;height:auto;} /* height:auto : Swiper 기본 height:100% 를 풀어 칸 높이를 가장 긴 카드에 맞춤 (2026-09-29) */
/* 배율은 슬라이드가 아니라 안쪽 카드에 건다. Swiper 4 는 카드 폭을 CSS 로 정하는 방식에서
슬라이드의 화면상 크기를 재는데, 슬라이드 자체를 축소하면 그 값이 틀어져 가운데 정렬이 어긋난다.
전환도 이 규칙에 둔다. 아래 상태별 규칙은 transform 만 바꾸므로 전환은 여기 것이 그대로 쓰인다. */
#group_buying_area .hero-swiper .swiper-slide .hcard{transform:scale(.875);transition:transform .5s cubic-bezier(.4,.9,.3,1);}
/* 바로 옆 카드는 바깥으로, 그 바깥 카드는 안쪽으로 밀어 간격에 리듬을 준다(참고 페이지와 같은 값) */
#group_buying_area .hero-swiper .swiper-slide.is-prev .hcard{transform:translateX(-15px) scale(.875);}
#group_buying_area .hero-swiper .swiper-slide.is-next .hcard{transform:translateX(15px) scale(.875);}
#group_buying_area .hero-swiper .swiper-slide.is-prev2 .hcard{transform:translateX(-7.5px) scale(.875);}
#group_buying_area .hero-swiper .swiper-slide.is-next2 .hcard{transform:translateX(7.5px) scale(.875);}
/* 가운데 카드. is-prev / is-next 규칙과 특정도를 맞추고 그 뒤에 둔다(2026-09-23).
앞에 두면 옆 카드 규칙이 이겨서, 가운데로 온 카드가 스크립트로 클래스를 뗄 때까지
작은 상태에 머문다. 그러면 카드가 미끄러진 다음에야 커져 움직임이 두 토막으로 보인다. */
#group_buying_area .hero-swiper .swiper-slide.swiper-slide-active .hcard{transform:scale(1);}
/* 카드 : 전체가 상세로 가는 링크다. 참여 버튼은 두지 않는다 */
/* 카드 배경은 두지 않는다 (2026-09-23 사용자 지시). 한때 본문까지 채웠다가 되돌렸다.
썸네일 영역만 #f6f7f9 로 두고 본문은 페이지 배경이 그대로 비치게 한다.
테두리는 남긴다. 상품 사진이 흰 바탕이면 카드 위쪽 경계가 사라져 사진이 페이지로 번져 보인다. */
#group_buying_area .hcard{display:block;height:100%;border-radius:24px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;} /* 흰 배경 : 좌우 카드 scale(.875) 로 썸네일·본문 경계에 반 픽셀 틈이 생겨 남색 배경이 선처럼 비쳤다(2026-09-28) */
/* 1:1 썸네일. aspect-ratio 는 앱 웹뷰에서 지원을 장담할 수 없어 padding 방식으로 둔다 */
/* 썸네일 배경만 카드보다 반 단계 밝게 (2026-09-23 사용자 지시). 사진 영역과 글 영역이 구분된다 */
#group_buying_area .hcard-thumb{position:relative;padding-top:100%;background:#f6f7f9;overflow:hidden;}
#group_buying_area .hcard-thumb img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;}
/* 제목 위 라벨 (2026-09-27 사용자 지시). 처음엔 썸네일 오른쪽 위에 뒀다가 본문으로 옮겼다.
옮긴 이유 둘. ① 썸네일은 운영자가 올리는 사진이라 모서리에 뭐가 올지 알 수 없어 사진마다 다르게 읽혔다.
② 상단 탭·개설 버튼과 같은 눈높이의 알약이라 셋이 같은 종류로 보였다.
본문은 회색 한 색이라 어떤 사진이 와도 라벨이 늘 같게 보이고, 층이 갈려 알약 충돌도 없어진다.
사진 위가 아니게 되어 크기를 줄였다(32px 14px 라운드9 → 24px 12px 라운드6). */
#group_buying_area .hcard-body .hcard-label{display:inline-flex;align-items:center;height:22px;padding:0 8px;margin-bottom:10px;border-radius:6px;background:#f2f4f9;color:#5a5dd2;font-size:12px;font-weight:500;line-height:1;letter-spacing:-.01em;white-space:nowrap;}
/* 라벨 색은 전부 같게 둔다 (2026-09-27 사용자 지시). 별색 없음.
한때 .is-pick 에 #111111 을 줘 퍼블로그 PICK 만 진하게 했다가 되돌렸다.
main.asp 의 is-pick 클래스는 남겨둔다. 나중에 다시 구분할 때 asp 를 안 고쳐도 되도록. */
/* 호버 시 썸네일 확대 (2026-09-23 사용자 지시). 그리드 카드 .gcard 와 같은 값이다.
.hcard-thumb 에 overflow:hidden 이 있어 커진 만큼은 카드 안에서 잘린다.
hover:hover 로 제한 : 터치 기기에서 탭 후 확대가 남는 것을 막는다(.gcard 와 같은 이유).
썸네일이 없는 카드는 img 가 display:none 이라 아무 일도 일어나지 않는다. */
@media (hover:hover){
#group_buying_area .hcard-thumb img{transition:transform .3s ease;}
#group_buying_area .hcard:hover .hcard-thumb img{transform:scale(1.06);}
}
/* 썸네일 미등록 표시 (2026-09-23 신설). 기존 사진 아이콘과 겹치지 않게 새로 그렸다.
가로 프레임 안에 해(작은 원)와 봉우리 둘. 이미지 자리 표시로 가장 널리 쓰이는 형태다.
선 굵기 2, 끝은 둥글게. 모서리는 카드(24px)에 맞춰 조금 둥글게 뒀다.
선 처리는 네비게이션 화살표(1.4, round)와 같은 계열로 맞췄다.
mask 가 아니라 background-image 로 둔 이유 : 앱 웹뷰에서 mask 가 안 먹으면 색 사각형이
통째로 깔려 더 나빠진다. 장식용 한 개짜리라 색을 고정해도 잃는 게 없다.
붙는 경우는 둘. 썸네일 값이 비어 있을 때(asp 에서 바로 붙임), 이미지가 깨질 때(onerror). */
#group_buying_area .hcard-thumb.no-img::after{content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;background:var(--gb-svg-noimg-lg) center/contain no-repeat;}
#group_buying_area .hcard-thumb.no-img img{display:none;}
#group_buying_area .hcard-body{padding:38px 32px 38px;background:#fff;}
/* 카드 안 텍스트. hero-title / m-disc / b-meta 는 예전 어두운 히어로용으로
공용 gb_ui.css 에 흰 글자로 잡혀 있다. 흰 카드에서 읽히도록 여기서 전부 덮어쓴다. */
#group_buying_area .hero-cards .hero-title{font-size:22px;font-weight:600;color:var(--ink);line-height:1.4;letter-spacing:-.02em;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;word-break:keep-all;min-height:1.4em;} /* 1줄 -> 2줄 말줄임 (2026-09-29 사용자 지시). 두 줄 자리를 비워 두면 한 줄 제목과 할인율 사이가 벌어져 1.4em 유지. 카드 높이는 아래 .hcard height:100% 로 맞춤 */
#group_buying_area .hero-cards .m-disc{margin-top:16px;display:flex;flex-direction:column;gap:2px;}
/* 할인 표시를 그리드 카드(.gcard-disc)와 같은 구성으로 맞춤 (2026-09-23 사용자 지시).
main.asp 마크업도 .now / .mx-lbl / .pc / .basis 로 바꿨다(A-18).
숫자 크기만 32px 로 크게 두고, 비율·색·굵기는 그리드 카드와 같은 값을 쓴다. */
#group_buying_area .hero-cards .m-disc .mx{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;}
#group_buying_area .hero-cards .m-disc .now{font-family:'Montserrat',sans-serif;font-weight:700;font-size:28px;color:var(--hot);line-height:1;letter-spacing:-.02em;}
#group_buying_area .hero-cards .m-disc .now .pc{font-size:.6em;margin-left:1px;}
#group_buying_area .hero-cards .m-disc .now .mx-lbl{font-family:inherit;font-size:.9em;font-weight:600;}
#group_buying_area .hero-cards .m-disc .basis{font-weight:400;color:#777777;}
/* [샘플] 가격을 앞세운 카드 구성 (2026-09-23 사용자 지시).
main.asp 의 isSample 카드에만 붙는 .is-sample 안에서만 적용된다.
운영 오픈 전 그 카드와 함께 이 블록도 지울 것. */
#group_buying_area .hero-cards .is-sample .price{font-family:'Montserrat',sans-serif;font-weight:700;font-size:28px;color:var(--hot);line-height:1;letter-spacing:-.02em;}
#group_buying_area .hero-cards .is-sample .price .won{font-size:.55em;margin-left:1px;}
#group_buying_area .hero-cards .is-sample .rate{font-family:'Montserrat',sans-serif;font-weight:700;color:var(--primary);line-height:1;}
#group_buying_area .hero-cards .is-sample .rate .arw{margin-left:1px;}
#group_buying_area .hero-cards .is-sample .bonus{font-weight:400;color:#777777;}
/* 카드 안 상품명 숨김 (2026-09-23 사용자 지시). 바로 위 .hero-title 과 겹쳐 보여 뺐다. 슬라이드 번호(.hero-frac .cur)는 그대로 둔다. */
#group_buying_area .hero-cards .m-disc .cur{font-size:11.5px;color:#999999;display:none;}
#group_buying_area .hero-cards .b-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:12px;color:var(--muted);}
#group_buying_area .hero-cards .b-meta .num{font-family:'Montserrat',sans-serif;font-weight:600;color:#333333;margin-right:2px;}
/* 좌우를 나누는 세로선 (2026-09-27 사용자 지시). 마크업의 가운뎃점(·)은 그대로 두고
font-size:0 으로 글자만 지운 뒤, 그 상자 자체를 1px 선으로 만든다. asp 를 안 건드리는 방법이다.
.b-meta 가 flex + align-items:center 라 선이 글줄 가운데에 선다. */
#group_buying_area .hero-cards .b-meta .sep{width:1px;height:11px;background:#bbbbbb;font-size:0;color:transparent;flex-shrink:0;}
#group_buying_area .hero-cards .b-meta .dday{color:#333333;font-weight:600;}
/* 이벤트 카드 서브 문구 (2026-09-29 사용자 지시) : main.asp 5번 카드(.hcard.event)에서 b-meta 자리를 대신함.
가이드에 값이 없어 같은 자리의 .b-meta 값(위 여백 12px · 13px · var(--muted))을 그대로 씀 */
#group_buying_area .hero-cards .hcard-sub{margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted);word-break:keep-all;}
/* 네비게이션 : 참고 페이지 wrap_pagin 과 같은 모양, 같은 자리(카드 아래 가운데) */
#group_buying_area .hero-cards .wrap_pagin{display:flex;justify-content:center;align-items:center;margin-top:24px;}
#group_buying_area .hero-progress{position:relative;width:362px;max-width:55vw;height:1px;background:#E9E9E9;overflow:hidden;}
#group_buying_area .hero-progress-fill{position:absolute;left:0;top:0;width:100%;height:100%;background:#1B1D1C;transform:scaleX(0);transform-origin:left center;transition:transform .7s ease;}
#group_buying_area .hero-cards .button_area{display:flex;align-items:center;margin-left:13px;}
#group_buying_area .hero-frac{padding:0 16px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:#1B1D1C;line-height:1;}
#group_buying_area .hero-frac .cur::after{content:"/";color:#B1B1B1;margin:0 4px;}
#group_buying_area .hero-frac .tot{color:#B1B1B1;}
/* 화살표는 참고와 같은 6x12. 여백은 사용자가 육안으로 정한 값(2026-09-23). 보이는 아이콘 크기는 그대로고 누를 범위만 넓힌다 */
#group_buying_area .hero-nav{display:inline-flex;align-items:center;justify-content:center;padding:11px 5px;border:0;background:none;color:#1B1D1C;cursor:pointer;line-height:0;}
#group_buying_area .hero-nav svg{display:block;}
/* 재생·멈춤 (2026-09-23). 화살표와 같은 색·같은 선 굵기(1.4)·같은 여백으로 맞춘다.
아이콘 두 개를 넣어두고 상태에 따라 하나만 보인다. 멈춘 상태에서 재생 모양이 나온다. */
#group_buying_area .hero-nav.play{margin-left:2px;}
#group_buying_area .hero-nav.play .ico-play{display:none;}
#group_buying_area .hero-nav.play.is-paused .ico-pause{display:none;}
#group_buying_area .hero-nav.play.is-paused .ico-play{display:block;}
@media (max-width:840px){
/* 히어로 카드 슬라이드 - 좁은 화면.
카드 폭 91vw -> 260px (2026-10-16 사용자 지시) : 카드가 커서 앱 첫 화면(약 400px)에 사진만 보였다.
260px 은 사용자 참고 이미지(375px 화면) 값. 글자 칸 값도 같은 이미지 비율로 줄였다(아래).
네비게이션은 PC 와 같은 모양으로 카드 아래에 그대로 둔다(사용자 결정). */
#group_buying_area .hero-swiper .swiper-slide{width:260px;max-width:none;}
#group_buying_area .hcard{position:relative;border-radius:20px;}
/* 옆 카드 위치 보정 0 (2026-10-16). 91vw 일 때는 옆 카드가 화면 밖으로 나가지 않게 안쪽으로 13px 당겼다.
260px 에서 그대로 당기면 카드 사이가 3px 로 붙는다. 보정 없이 두면 사이 약 16px · 옆 카드 약 41px 보인다(375px 화면). */
#group_buying_area .hero-swiper .swiper-slide.is-prev .hcard,
#group_buying_area .hero-swiper .swiper-slide.is-next .hcard,
#group_buying_area .hero-swiper .swiper-slide.is-prev2 .hcard,
#group_buying_area .hero-swiper .swiper-slide.is-next2 .hcard{transform:scale(.875);}
/* 라벨을 사진 왼쪽 위로 (2026-10-16 사용자 지시, 참고 이미지). 글자 칸 높이 32px 를 줄이려는 것.
PC 는 본문 안 그대로(위 2026-09-27 주석의 이유). 흰 칩 · 그림자 없음.
높이 22 -> 21 · 좌우 8 -> 6 · 글자 12 -> 11.5px (2026-10-16 사용자 육안 조정) */
#group_buying_area .hero-cards .hcard-body .hcard-label{position:absolute;left:12px;top:12px;z-index:2;height:21px;padding:0 6px;margin:0;background:#fff;font-size:11.5px;}
/* 글자 칸 (2026-10-16 사용자 지시) : 참고 이미지 비율로 줄인 뒤 육안으로 다시 조정. 가이드에 히어로 카드 값이 없어 새로 정함.
여백 18 18 20 · 제목 22 -> 17 · 할인율 28 -> 20 · 할인율 · 정보 줄 위 4px */
#group_buying_area .hcard-body{padding:18px 18px 20px;}
#group_buying_area .hero-cards .hero-title{font-size:17px;}
#group_buying_area .hero-cards .m-disc{margin-top:4px;}
#group_buying_area .hero-cards .m-disc .now,
#group_buying_area .hero-cards .is-sample .price{font-size:20px;}
#group_buying_area .hero-cards .b-meta,
#group_buying_area .hero-cards .hcard-sub{margin-top:4px;}
#group_buying_area .hero-cards{padding:30px 0 0;} /* 16 -> 30px (2026-09-29 사용자 지시) */
#group_buying_area .hero-cards .wrap_pagin{padding-bottom:20px;} /* 모바일은 히어로 하단 여백이 0 이라 페이지 표시가 바닥에 붙음 (2026-09-29 사용자 지시) */
#group_buying_area .hero-progress{width:180px;}
}
/* ---- 카드 그리드 ---- */
#group_buying_area .card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 22px;margin-top:30px;}
/* 한 번에 12개(PAGE_SIZE)만 노출. 더보기를 누르면 12개씩 더 보여준다. */
#group_buying_area .card-grid > .gcard.gb-hide{display:none;}
/* ---- 카드 ----
배경이 var(--paper) #FAFAF7 라 흰 페이지 위에서 카드 경계가 거의 없었다.
흰 배경 + 또렷한 테두리 + 옅은 그림자로 카드가 떠 보이게 한다. */
/* 라운드 8px : 가이드의 카드류는 16px 이지만, 카드와 그 안의 버튼 모서리를 같게 두는 쪽을
사용자가 육안 확인 후 선택함(2026-09-16). 되돌리려면 var(--r-btn) 을 16px 로 바꾼다. */
/* 카드 기본형 - gb_ui.css 에 있던 .gcard 선언을 여기로 합침 (2026-09-22).
overflow/cursor/display/flex-direction 은 gb_ui 에서 옮겨온 값. 테두리 #e0e5e6 은 사용자 지시
(가이드 #E4E5EC 보다 살짝 어둡고 덜 푸른 값). 호버 효과가 없으므로 transition 은 두지 않는다. */
#group_buying_area .gcard{background:var(--clear);border:1px solid var(--border);border-radius:var(--r-btn);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;}
/* 썸네일 - 이미지가 없으면 onerror 로 img 를 숨겨 빈 회색 사각형만 남았다.
gb_ui.css 의 .op-thumb 자리표시 패턴을 카드·히어로 썸네일에도 깐다. */
/* 썸네일 1:1 (2026-09-17 사용자 지시). 공용 gb_ui 의 3/2 를 메인에서 덮어씀. 이미지는 object-fit:cover 로 비율 유지하며 여백 없이 채움 */
/* 썸네일 배경 #f5f5f5 (2026-09-22 사용자 지시). 가이드 BELIEF(#F0F1F6)보다 중성적인 회색을 쓰기로 함 */
/* 썸네일 미등록 아이콘 (2026-09-28 사용자 요청) : 히어로 카드(.hcard-thumb.no-img) 와 같은 그림으로 통일. 크기(60px · 모바일 44px)는 그대로 */
#group_buying_area .gcard .thumb{position:relative;overflow:hidden;background:#fff;aspect-ratio:1/1;}
#group_buying_area .gcard .thumb::after,
#group_buying_area .hero-card-thumb::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;z-index:0;background:var(--gb-svg-noimg-lg) center/60px no-repeat;}
#group_buying_area .gcard .thumb img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;}
/* 호버 시 썸네일 확대(2026-09-22 사용자 지시). .thumb 에 overflow:hidden 이 있어 넘치는 부분은 잘린다.
scale 1.06 / .4s 는 디자인 가이드에 값이 없어 새로 정한 값(들림 애니메이션을 뺀 자리를 대신할 정도로만).
hover:hover 로 제한 : 터치 기기에서 탭 후 확대가 남는 것을 막는다. */
@media (hover:hover){
/* 버튼 색·화살표와 같은 0.3s ease (2026-09-23). 카드 호버 하나에 반응하는 효과라 박자를 맞춘다.
전에는 .4s cubic-bezier(.4,0,.2,1) 이라 버튼보다 0.1초 늦게 끝나 따로 움직이는 것처럼 보였다. */
#group_buying_area .gcard .thumb img{transition:transform .3s ease;}
#group_buying_area .gcard:hover .thumb img{transform:scale(1.06);}
#group_buying_area .gcard.disabled-card:hover .thumb img{transform:none;}
}
#group_buying_area .hero-card-thumb img{position:relative;z-index:1;}
/* D-day 뱃지 - 디자인 시스템 bg06 (6) D-day 배지 규격 반영 (2026-09-17)
높이 26px / 알약 / 11px 700. 공용 gb_ui.css 의 뱃지 색·그림자를 이 페이지에서 덮어씀.
글꼴은 지정하지 않음. 사이트 기본(Montserrat, YoonGothicPro740) 상속으로 숫자는 이미 Montserrat.
[색 4단계 - 2026-09-22 사용자 결정]
.ended(마감) #f3f4f6 + #6b7280 회색 220° 대비 4.39:1 가이드 "마이코드 상태 배지 - 종료" 값
기본(여유) belief + #777777 회색 230° 개발 반영 전 안전값. 반영 후에는 .relax 가 붙어 초록이 됨
.relax(여유) #f0fdf4 + #15803d 초록 138° 대비 4.79:1 가이드 "D-day 여유" 값
.warn(주의) #fffbeb + #b45309 노랑 48° 대비 4.84:1 가이드 "D-day 주의" 값
.critical(긴급) #fef2f2 + #dc2626 빨강 0° 대비 4.41:1 가이드 .guide-tag.dont 값 (사용자 지시)
색조를 220/138/48/0 네 방향으로 벌려 나란히 놓여도 구분되게 함. 마감만 회색이라 여유와 겹치지 않음.
주의: 어느 상태에 어느 클래스를 붙이는지는 asp GmCdCls() 와 JS fmt() 가 정한다. CSS 로는 못 바꿈.
현재 asp 는 마감에 critical(빨강), 1~7일에 클래스 없음(회색)을 붙여 위계가 뒤집혀 있음.
.ended / .relax 부여와 3일·7일 기준 변경은 개발 요청 1번. 반영 전까지 이 두 규칙은 화면에 나타나지 않음. */
#group_buying_area .gcard .thumb-top .badge{display:inline-flex;align-items:center;border-radius:4px;font-size:11px;line-height:1;letter-spacing:-.01em;}
#group_buying_area .gcard .thumb-top .badge-pick{font-size:10.5px;padding:6px 10px;}
/* [D-day 배지 4단계 - 2026-09-22 사용자 지시, 꽉 찬 배지로 통일]
사진 위에 얹히는 배지라 연한 배경은 밝은 상품 사진에서 형태가 사라졌다(흰 사진 대비 1.10:1 실측).
그래서 전부 꽉 찬 색 또는 테두리 있는 흰 배지로 바꿈.
마감 #4b5563 + 흰 글자 7.56:1
3일 이하 #e5362c + 흰 글자 4.29:1 (4.5 미달. 페이지 빨강을 --hot 하나로 쓰기로 한 사용자 결정. 검수 예외)
7일 이하 흰 배경 + #333333 12.63:1 3일~7일도 흰색으로 통일(사용자 지시)
7일 초과 흰 배경 + #333333 12.63:1
테두리를 네 단계 모두에 1px 두고 색만 바꾼다. box-sizing:border-box 라 높이 26px 는 그대로.
흰 배지 테두리 #e1e1e1 (2026-09-22 사용자 지시로 더 연하게). 흰 사진 대비 1.34:1 로 형태가 희미할 수 있음.
gb_ui.css 에 .badge-dday / .warn / .critical 이 따로 있어 규칙을 지우면 그쪽 색이 되살아난다. 전부 명시한다. */
#group_buying_area .gcard .thumb-top .badge-dday{height:22px;padding:0 6px;font-weight:500;box-shadow:none;}
#group_buying_area .gcard .thumb-top .badge-dday.ended{background:#4b5563;border-color:#4b5563;color:#ffffff;}
#group_buying_area .gcard .thumb-top .badge-dday.relax{background:#333;color:#fff;}
#group_buying_area .gcard .thumb-top .badge-dday.warn{background:#ffffff;border-color:#e1e1e1;color:#333333;}
#group_buying_area .gcard .thumb-top .badge-dday.critical{background:#e5362c;border-color:#e5362c;color:#ffffff;}
/* 마감 배지를 지금 바로 회색으로 (2026-09-22). asp 가 마감에도 critical(빨강)을 붙여서
개발 반영 전까지는 끝난 항목이 가장 급하게 보였다. 배지에 남은 초가 data-remain 으로
찍혀 있어(마감은 "0") 그 속성으로 골라내 .ended 와 같은 색을 덮어씌운다.
.critical 이 붙은 형태까지 4가지로 적어 로드 순서에 관계없이 이기게 함.
한계: data-remain 은 첫 화면 값이고 JS 가 갱신하지 않는다. 페이지를 열어둔 채 마감되는 카드는
빨강으로 남는다. 완전한 해결은 개발 요청 1번(.ended 클래스 부여)에서 처리. */
#group_buying_area .gcard .thumb-top .badge-dday.critical[data-remain="0"],
#group_buying_area .gcard .thumb-top .badge-dday.critical[data-remain^="-"],
#group_buying_area .gcard .thumb-top .badge-dday[data-remain="0"],
#group_buying_area .gcard .thumb-top .badge-dday[data-remain^="-"]{background:#4b5563;border-color:#4b5563;color:#ffffff;}
/* 뱃지 영역을 사진 위로. .thumb img 에 z-index:1(자리표시 아이콘 위로 올리는 용도)이 있어
사진이 있는 카드에서 뱃지가 사진 밑에 숨었다(2026-09-17 실측). 1차(09-16) 작업의 회귀 수정 */
#group_buying_area .gcard .thumb-top{z-index:2;}
#group_buying_area .gcard .badge-dday .cd{font-variant-numeric:tabular-nums;}
#group_buying_area .gcard .thumb-emoji{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:54px;background:linear-gradient(135deg,var(--belief),var(--accent-soft));}
#group_buying_area .gcard.disabled-card .thumb-emoji{filter:grayscale(.4);}
/* ---- 카드 본문 ----
기존엔 자식 사이가 전부 gap:10px 로 똑같아 5줄이 평평하게 나열됐다.
gap 을 없애고 묶음별로 간격을 달리 줘서 제목 / 할인 / 참여현황 / CTA 로 읽히게 한다. */
#group_buying_area .gcard-body{padding:16px 15px 15px;display:flex;flex-direction:column;gap:0;flex:1;background:#f6f7f9;} /* 2026-09-28 사용자 지시 : 본문 회색 · 사진 자리 흰색 · 라벨 흰색으로 사진과 정보 영역을 나눔. 사진 없는 카드 윗선이 흐려 카드 테두리를 --border 로 올림 */
#group_buying_area .gcard-title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.45;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0;margin:0 0 6px;}
/* 할인 블록 - 상품명이 13px/700 으로 제목만큼 강해 위계가 뒤엉켰다. 보조 정보로 내린다. */
/* 아래 여백 4px (2026-09-22 사용자 지시). 카드 본문 세로 간격은 margin-bottom 으로만 준다.
전에는 .gcard-next 의 margin-top 이 이 간격을 만들었다. 기준이 섞이면 어느 값을 고쳐야 할지 헷갈린다.
.gcard-next 는 gap > 0 일 때만 나오는데, 없을 때 생기는 4px 는 .gcard-foot 의 margin-top:auto 가 흡수한다. */
#group_buying_area .gcard-disc{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;width:100%;margin:0 0 6px;}
/* 상품명 (2026-09-22). main.asp 에서 .gcard-disc 밖으로 뺐다.
안에 있을 때는 flex 의 gap:7px 이 세로 간격까지 만들어, 위아래 여백을 CSS 로 못 줄였다
(gap 을 줄이면 "최대 45%"와 "할인 예정" 사이도 같이 줄어듦).
이제 margin 으로 자유롭게 조절된다. 12px = 기존 margin-bottom 5px + row-gap 7px (실측 동치).
.gcard-body 로 범위를 좁힘: detail.asp 에도 .pname 이 있어 전역으로 두면 그쪽에 영향. */
#group_buying_area .gcard-body .pname{font-size:12px;font-weight:400;color:var(--muted);line-height:1.35;margin:0 0 16px;}
/* 상품명 라벨 (2026-09-23 사용자 지시). 회색 꼬리표 모양.
"+N개 상품"(.prod-extra)까지 라벨 안에 들어가지 않도록, main.asp 에서 상품명만 .pname-tag 로 감쌌다.
글자 크기는 .pname 에서 상속(12px, 560px 이하 11.5px). 카드 안에서 배경 있는 꼬리표는 이것 하나만 둔다. */
#group_buying_area .gcard-body .pname-tag{display:inline-block;background:#fff;color:#777;border-radius:4px;padding:4px 6px;line-height:1;letter-spacing:-.01em;}
/* 가격 색 (2026-09-22 사용자 지시). 주색 TRENDY 대신 강조 빨강. 페이지 내 빨강을 --hot(#E5362C) 하나로 통일 */
#group_buying_area .gcard-disc .now{font-family:'Montserrat',sans-serif;font-weight:700;font-size:21px;color:var(--hot);line-height:1;letter-spacing:-.02em;}
#group_buying_area .gcard-disc .now .pc{font-size:.6em;margin-left:1px;}
/* "최대" 라벨 (2026-09-22). 이 클래스는 CSS 에만 있고 마크업에서 안 쓰이던 것을 main.asp 에서 감싸 쓰도록 함.
크기·굵기는 사용자가 육안으로 보며 정함(.9em / 600). 숫자 굵기도 900 에서 600 으로 함께 낮춤. */
#group_buying_area .gcard-disc .now .mx-lbl{font-family:inherit;font-size:.9em;font-weight:600;}
#group_buying_area .gcard-disc .basis{font-size:11.5px;font-weight:400;color:#333333;}
#group_buying_area .gcard-disc .fp-was{font-size:11.5px;color:var(--hint);text-decoration:line-through;}
#group_buying_area .gcard-disc .fp-rate{font-size:11.5px;font-weight:800;color:var(--primary);}
#group_buying_area .gcard-disc .fp-chip{font-size:10px;font-weight:800;border-radius:var(--r-pill);padding:2px 7px;}
#group_buying_area .gcard-disc .fp-sub{flex-basis:100%;font-size:11px;font-weight:700;color:#15803D;}
#group_buying_area .gcard-disc .fp-sub .fs-short{display:none;}
/* "+1개 상품" 을 칩으로 두면 아래 초록 칩과 같은 급으로 읽혀 위계가 흐려진다.
칩은 "N개 더 모이면 할인" 하나만 남기고 이건 보조 글씨로 둔다.
2026-09-22: main.asp 에서 이 span 을 .pname 안으로 옮겨 상품명 바로 옆에 붙임.
이제 flex 아이템이 아니라 pname 안의 인라인 글씨라 align-self/margin-top 은 필요 없다. */
#group_buying_area .prod-extra{font-size:11px;font-weight:400;color:#777;margin-left:5px;white-space:nowrap;}
/* "N개 더 모이면 할인 UP" - 2026-09-22 사용자 지시로 초록 알약 칩에서 회색 보조 라벨로 낮춤.
가격·D-day 배지가 강해진 뒤라 이 줄까지 강조하면 카드 안에 강한 요소가 셋이 된다.
라운드 4px 은 가이드 기본(8px)보다 작은 값. 칩이 아니라 작은 꼬리표로 읽히게 하려고 사용자가 정함. */
/* 2026-09-23 사용자 지시: 배경과 안쪽 여백 삭제. 상품명 라벨(.pname-tag)이 회색 꼬리표가 되면서
한 카드에 같은 모양 꼬리표가 둘이 됐다. 이 줄은 배경 없는 보조 글씨로 낮춘다. */
#group_buying_area .gcard-next{align-self:flex-start;display:inline-flex;align-items:center;font-size:12px;font-weight:400;color:#999999;border-radius:4px;line-height:1;letter-spacing:-.01em;margin:0;}
/* 최대 할인 달성 (2026-10-14). main.asp 에서 현재 할인율 = 최대 할인율일 때 .max 를 붙여 출력.
색은 할인율 숫자와 같은 빨강 --hot(#E5362C). 배경·안쪽 여백 없이 글자와 아이콘만 (2026-10-14 사용자 지시).
아이콘 13px 는 같은 카드의 .gcard-people 아이콘 크기에 맞춤. */
#group_buying_area .gcard-next.max{color:var(--hot);gap:4px;}
#group_buying_area .gcard-next.max .gb-ico{font-size:13px;vertical-align:0;}
#group_buying_area .gcard-cancel-note{font-size:11px;color:var(--hint);line-height:1.5;margin:8px 0 0;}
#group_buying_area .gcard .prod-line{font-size:12px;color:var(--muted);line-height:1.45;margin:8px 0 0;}
/* 참여 현황 + CTA */
#group_buying_area .gcard .gcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:14px;}
/* flex 의 gap 은 아이콘뿐 아니라 숫자와 "명" 사이에도 들어가 "0 명 참여 중" 으로 벌어진다.
gap 을 없애고 아이콘 뒤에만 간격을 준다(2026-09-16 실측: 숫자~단위 6px 벌어짐). */
/* 기준선 정렬 (2026-09-22). align-items:center 였을 때 13px 숫자와 12px 한글이 각각 상자 기준으로
가운데 정렬돼 숫자 기준선이 1px 아래로 내려갔다(실측). baseline 으로 바꿔 0px 로 맞춤.
아이콘은 글자가 아니라서 baseline 에 앉히면 위로 뜬다. align-self:center 로 줄 가운데에 남긴다.
색 #5a5dd2 (2026-09-22 사용자 지시). 아이콘·숫자·글자를 한 색으로 통일. 가이드에 없는 값.
색은 이 한 줄만 바꾸면 전부 따라온다. 숫자와 아이콘은 inherit, 아이콘 모양은 currentColor 를 씀.
svg 규칙은 남겨둔다. CSS 와 asp 를 따로 올리므로 마크업 교체 전에도 간격·정렬이 유지돼야 한다. */
#group_buying_area .gcard-people{display:flex;align-items:baseline;gap:0;font-size:12px;color:#5a5dd2;}
#group_buying_area .gcard-people svg{margin-right:6px;align-self:center;}
#group_buying_area .gcard-people .num{font-size:13px;font-weight:400;color:inherit;}
#group_buying_area .gcard-ended-msg{margin-top:auto;font-size:11.5px;color:var(--muted);font-weight:600;text-align:center;padding:10px 0 2px;}
#group_buying_area .gcard-join{display:flex;align-items:center;justify-content:center;height:44px;width:100%;margin:12px 0 0;border-radius:var(--r-btn);font-family:inherit;font-size:13.5px;font-weight:500;letter-spacing:-.01em;text-align:center;text-decoration:none;white-space:nowrap;}
/* 이미 참여 중 카드 버튼 : 같은 노란 버튼이지만 문구가 길어 한 줄에 맞춘다 */
#group_buying_area .gcard-join.joined{font-size:12.5px;letter-spacing:-.025em;}
/* 참여하기 버튼 흰 배경 (2026-09-17 사용자 지시). 노란 채움이 시끄러워 흰 배경+회색 테두리, 호버 연회색(필터 탭 호버와 같은 값).
마크업 클래스가 btn-yellow 라 이름과 색이 어긋남. 클래스 교체는 asp 건이라 개발전달_변경내역.md B-4 에 기록.
공용 gb_ui 의 .btn-yellow / :hover / [disabled] 를 이기기 위해 클래스를 두 번 써 특정도를 올림 */
#group_buying_area .gcard-join.gcard-join{box-sizing:border-box;background:var(--clear);color:#1a1a1a;border:1px solid var(--border);transition:background .3s ease,border-color .3s ease,color .3s ease;}
#group_buying_area .gcard-join.gcard-join::after{border-top-width:1.5px;border-right-width:1.5px;} /* 호버 화살표 2px -> 1.5px (2026-09-28 사용자 지시 : 두꺼워 보임). 공용 .btn-outline::after 는 그대로 */
/* 호버 : 브랜드 키컬러로 채움 (2026-09-23 사용자 지시).
배경을 어둡게 하면 글자 #1a1a1a 는 대비 1.19:1 로 안 읽혀, 흰 글자로 뒤집는다(14.6:1).
테두리도 같은 색으로 바꿔야 어두운 버튼 둘레에 밝은 테가 남지 않는다.
화살표는 currentColor 를 따라 흰색이 된다.
hover:hover 로 제한 : 터치 기기에서 탭 후 어두운 상태가 남는 것을 막는다. */
@media (hover:hover){
#group_buying_area .gcard-join.gcard-join:hover{background:var(--primary);border-color:var(--primary);color:#ffffff;}
/* 카드 어디에 올려도 버튼이 같이 반응 (2026-09-23 사용자 지시).
카드 전체가 클릭 대상이라(article[role=button] + JS 로 상세 이동) 버튼만 반응하면
누를 수 있는 범위가 버튼뿐인 것처럼 보인다. 버튼 위에 올린 경우도 카드 호버에 포함된다. */
#group_buying_area .gcard:hover .gcard-join.gcard-join{background:var(--primary);border-color:var(--primary);color:#ffffff;}
#group_buying_area .gcard:hover .gcard-join.gcard-join::after{width:8px;margin-left:8px;border-top-color:currentColor;border-right-color:currentColor;}
/* 마감 카드는 반응하지 않는다. 썸네일 확대를 끈 것과 같은 이유 */
#group_buying_area .gcard.disabled-card:hover .gcard-join.gcard-join{background:var(--clear);border-color:var(--border);color:#1a1a1a;}
#group_buying_area .gcard.disabled-card:hover .gcard-join.gcard-join::after{width:0;margin-left:0;border-top-color:transparent;border-right-color:transparent;}
}
/* 터치 기기(모바일·앱)는 호버가 없어 흰 버튼만 보인다. 브랜드 색이 카드에 한 번도 안 나오므로
이 환경에서는 상시 키컬러로 채운다 (2026-09-23 사용자 결정). 화살표도 함께 띄운다.
위 기본 규칙과 특정도가 같으므로 반드시 그 뒤에 둔다. 순서가 바뀌면 안 먹는다.
[disabled] 규칙은 특정도가 더 높아 마감·비활성 버튼은 그대로 회색이다.
pointer:coarse 를 함께 건 이유 : 일부 앱 웹뷰가 hover:hover 로 보고하는 사례가 있어 손가락 입력도 조건에 넣는다.
둘 다 안 맞으면 PC 와 같은 흰 버튼이 나온다(안전한 쪽으로 실패). */
@media (hover:none),(pointer:coarse){
#group_buying_area .gcard-join.gcard-join{background:var(--primary);border-color:var(--primary);color:#ffffff;}
#group_buying_area .gcard-join.gcard-join::after{width:8px;margin-left:8px;border-top-color:currentColor;border-right-color:currentColor;}
}
#group_buying_area .gcard-join.gcard-join[disabled],#group_buying_area .gcard-join.gcard-join:disabled{background:var(--border);border-color:var(--border);color:var(--hint);}
/* ---- 더보기 ---- */
#group_buying_area .s6-more{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:36px;}
#group_buying_area .s6-more[hidden]{display:none;}
#group_buying_area .s6-more .count{font-size:12.5px;color:var(--muted);}
#group_buying_area .s6-more .count b{font-family:'Montserrat',sans-serif;font-weight:800;color:var(--primary);}
/* 호버 삭제 (2026-09-23 사용자 지시). 남아 있던 transition 도 함께 지움(바뀌는 값이 없어 죽은 선언) */
/* 테두리 · 글자 회색(--border · #555) -> 주색 TRENDY (2026-10-16 사용자 지시 : 중요한 버튼인데 눈에 안 띔). 흰 바탕은 그대로 둬 조금만 강조 */
#group_buying_area .s6-more-btn{height:48px;padding:0 44px;border:1.5px solid var(--primary);border-radius:var(--r-pill);background:var(--clear);color:var(--primary);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;}
#group_buying_area .s6-more-btn b{font-family:'Montserrat',sans-serif;font-weight:700;margin:0 1px;} /* 남은 개수 숫자. 영문 · 숫자는 Montserrat */
#group_buying_area .s6-notice{margin-top:4px;}
/* ---- 가로 레일(인기·마감임박) ---- */
/* overflow-x:auto 는 세로도 잘라낸다. hover 로 4px 올라간 카드가 위에서 잘리지 않게 padding-top 확보. margin-top 은 그만큼 줄여 간격 유지(20px). 2026-09-17 */
#group_buying_area .rail{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding-top:6px;padding-bottom:8px;margin-top:30px;cursor:grab;-webkit-overflow-scrolling:touch;}
#group_buying_area .rail::-webkit-scrollbar{display:none;}
#group_buying_area .rail.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none;}
#group_buying_area .rail.dragging .gcard{pointer-events:none;}
#group_buying_area .rail > .gcard{flex:0 0 calc((100% - 66px) / 4);scroll-snap-align:start;}
/* 가로 목록(인기·마감임박) 화살표 + 가장자리 흐림 (2026-09-28 사용자 요청) : 4번째 카드가 10px 만 잘려 가로 목록으로 안 보였다.
카드는 1200 안에 4장이 딱 맞게 (전체 - 간격 22px x 3) / 4 . 넘길 게 남은 쪽에만 화살표·흐림(.can-prev / .can-next, main.asp 스크립트 A-39).
화살표 꺾쇠는 전체보기 버튼과 같은 선 1.5px · 각진 끝. 버튼 40px 은 가이드 버튼 규격과 목록 양옆에 반쯤 걸치는 크기. 흐림 폭 48px 은 카드 오른쪽 여백 정도 */
#group_buying_area .rail-wrap{position:relative;margin-top:30px;}
#group_buying_area .rail-wrap > .rail{margin-top:0;}
#group_buying_area .rail-wrap::before,#group_buying_area .rail-wrap::after{content:'';position:absolute;top:0;bottom:0;width:48px;z-index:2;pointer-events:none;opacity:0;transition:opacity .2s ease;}
#group_buying_area .rail-wrap::before{left:0;background:linear-gradient(to left,rgba(255,255,255,0),#ffffff);}
#group_buying_area .rail-wrap::after{right:0;background:linear-gradient(to right,rgba(255,255,255,0),#ffffff);}
#group_buying_area .rail-wrap.can-prev::before,#group_buying_area .rail-wrap.can-next::after{opacity:1;}
#group_buying_area .rail-nav{position:absolute;top:50%;z-index:3;display:none;align-items:center;justify-content:center;width:40px;height:40px;margin-top:-20px;padding:0;border:1px solid var(--border);border-radius:50%;background:#ffffff;color:#333333;cursor:pointer;transition:background .2s ease,border-color .2s ease;}
#group_buying_area .rail-nav::before{content:'';display:block;width:7px;height:12px;background-color:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;-webkit-mask-image:var(--gb-svg-chevron-r);mask-image:var(--gb-svg-chevron-r);}
#group_buying_area .rail-nav.prev{left:-20px;}
#group_buying_area .rail-nav.prev::before{transform:scaleX(-1);}
#group_buying_area .rail-nav.next{right:-20px;}
#group_buying_area .rail-wrap.can-prev .rail-nav.prev,#group_buying_area .rail-wrap.can-next .rail-nav.next{display:flex;}
#group_buying_area .rail-nav:hover{background:#F5F5F5;border-color:#CCCCCC;}
@media (max-width:840px){
#group_buying_area .rail-wrap{margin-top:10px;}
#group_buying_area .rail-wrap::before,#group_buying_area .rail-wrap::after,#group_buying_area .rail-wrap .rail-nav{display:none !important;}
}
/* 호버 효과 제거 (2026-09-22 사용자 지시). 테두리·배경이 바뀌던 것을 없앰.
transition 도 함께 삭제. 바뀌는 상태가 없어 하는 일이 없다. gb_ui.css 에 .rail-more 규칙 없음(grep 확인). */
#group_buying_area .rail-more{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:38px;padding:0 18px;border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--clear);color:#555;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;}
/* 전체보기 화살표 (2026-09-28 사용자 요청) : 글자 › 를 asp 에서 지우고(A-38) SVG 꺾쇠로 바꿈.
카드 참여하기 호버 화살표(8px 정사각형 45도 · 선 1.5px · 글자 13.5px)를 이 버튼 글자 12px 에 맞춰 줄인 크기 : 5.5x10px · 선 1.5px · 각진 끝 */
#group_buying_area .rail-more::after{content:'';display:block;width:5.5px;height:10px;margin-left:6.5px;flex-shrink:0;background-color:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;-webkit-mask-image:var(--gb-svg-chevron-r-sm);mask-image:var(--gb-svg-chevron-r-sm);}
/* 전체보기 버튼 숨김 (2026-10-16 사용자 지시, PC · 모바일 공통). 진행 중 · 인기 · 마감 임박 3곳 모두.
다시 보이려면 이 줄만 지운다. 위 모양 규칙은 남겨 둔다 */
#group_buying_area .rail-more{display:none;}
/* ---- 비어 있을 때 ---- */
#group_buying_area .s6-empty{text-align:center;padding:72px 20px;color:var(--muted);grid-column:1/-1;}
#group_buying_area .s6-empty .em{font-size:44px;}
#group_buying_area .s6-empty p{margin-top:14px;font-size:14px;line-height:1.7;}
/* ---- 히어로 ----
기존 grid 는 1fr + 320px 이라 1280 폭에서 왼쪽 칸이 880px 인데 텍스트는 350px 만 써
가운데가 통째로 비어 보였다. 오른쪽 비주얼을 키우고 텍스트 폭을 묶어 균형을 맞춘다. */
#group_buying_area .hero-2col{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:48px;align-items:center;padding:56px 0;min-height:400px;}
#group_buying_area .hero-info{max-width:640px;}
#group_buying_area .hero-slide{min-width:100%;}
/* 배경 장식(동심원 SVG)이 워시 레이어에 덮여 사실상 안 보였다.
워시를 살짝 걷고 장식을 100% 로 올려 텍스트와 카드 사이 빈 공간을 채운다.
글자가 놓이는 왼쪽·아래는 여전히 어둡게 유지해 대비를 잃지 않는다. */
#group_buying_area .hero-deco{opacity:1;}
#group_buying_area .hero-wash{background:radial-gradient(120% 120% at 82% 8%,rgba(34,36,80,.06) 0%,rgba(20,21,46,.78) 58%),linear-gradient(100deg,rgba(20,21,46,.92) 0%,rgba(20,21,46,.62) 46%,rgba(20,21,46,.86) 100%);}
#group_buying_area .hero-label{font-size:11.5px;letter-spacing:.06em;padding:6px 13px;}
#group_buying_area .hero-title{font-size:38px;line-height:1.24;letter-spacing:-.03em;margin-top:18px;}
#group_buying_area .hero-sub{font-size:15px;line-height:1.65;margin-top:12px;}
/* "최대 30%" 와 "할인 예정" 의 베이스라인이 어긋나 라벨이 아래로 흘러내렸다 */
#group_buying_area .m-disc{margin-top:22px;gap:8px;}
#group_buying_area .m-disc .mx{display:flex;align-items:baseline;gap:9px;font-size:15px;font-weight:700;}
#group_buying_area .m-disc .mx .pct{font-size:46px;letter-spacing:-.03em;}
#group_buying_area .m-disc .cur{font-size:14px;}
#group_buying_area .b-meta{margin-top:18px;font-size:13px;gap:12px;}
#group_buying_area .b-meta .num{margin-right:2px;}
#group_buying_area .hero-cta{margin-top:28px;}
#group_buying_area .hero-cta .btn-yellow{height:52px;padding:0 34px;border-radius:var(--r-btn);font-family:inherit;font-size:15px;font-weight:800;box-shadow:0 8px 18px -10px rgba(0,0,0,.6);}
#group_buying_area .hero-visual{display:flex;justify-content:flex-end;}
#group_buying_area .hero-card{width:500px;max-width:100%;border-radius:var(--r-btn);box-shadow:0 28px 64px -18px rgba(0,0,0,.6);}
#group_buying_area .hero-card-thumb{height:300px;}
/* 자리표시 아이콘은 히어로 카드에서 크게 번져 보인다. 카드 폭 대비 비율을 낮춘다. */
#group_buying_area .hero-card-thumb::after{background-size:20%;}
#group_buying_area .hero-card-info{padding:18px 20px 20px;}
#group_buying_area .hero-card-sub{font-size:12px;}
#group_buying_area .hero-card-name{font-size:16px;margin-top:7px;}
#group_buying_area .hero-dots{bottom:20px;gap:8px;}
#group_buying_area .hero-dot{width:8px;height:8px;}
#group_buying_area .hero-dot.active{width:24px;}
/* ---- 아이콘 (디자인 가이드 S10 · Linear) ----
마크업에는 클래스명만 넣는다.
색은 부모의 color 를 따르고, 크기는 font-size 로 조절한다(1em 기준).
mask 는 알파만 쓰므로 데이터 URI 안의 stroke 색은 검정으로 고정해 둔다. */
#group_buying_area .gb-ico{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.14em;background-color:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
/* 참여 인원. 카드의 기존 인라인 SVG 대체 */
#group_buying_area .gb-ico-people{-webkit-mask-image:var(--gb-svg-people);mask-image:var(--gb-svg-people);}
/* 마감임박 섹션. emoji_clock.png 대체 */
#group_buying_area .gb-ico-clock{-webkit-mask-image:var(--gb-svg-clock);mask-image:var(--gb-svg-clock);}
/* 빈 상태. emoji_box.png 대체 */
#group_buying_area .gb-ico-box{-webkit-mask-image:var(--gb-svg-box);mask-image:var(--gb-svg-box);}
/* 인기 섹션. emoji_fire.png 대체. 가이드에 불 아이콘이 없어 Linear 규격(24 viewBox·stroke 1.5·round)으로 신규 제작 */
#group_buying_area .gb-ico-fire{-webkit-mask-image:var(--gb-svg-fire);mask-image:var(--gb-svg-fire);}
/* 카드 참여 인원. 2026-09-22 사용자 확인: 디자인 시스템 people 아이콘(사람 3명)은 13px 에서 뭉쳐 보임.
기존 인라인 SVG 의 모양(사람 2명·선 굵기 2)을 그대로 마스크로 옮겨 화면은 그대로 두고 코드만 정리함.
gb-ico-people(디자인 시스템 3명)은 지우지 않고 남겨둠. 다른 자리에서 쓸 수 있음. */
#group_buying_area .gb-ico-users{-webkit-mask-image:var(--gb-svg-users);mask-image:var(--gb-svg-users);}
/* 체크 원 (2026-10-14 신규). 가이드 S10 에 SVG 코드가 없어 같은 Linear 형식(24 격자 · 선 1.5)으로 그림.
쓰는 곳 : 카드 최대 할인 달성 문구 ...
*/
#group_buying_area .gb-ico-check-circle{-webkit-mask-image:var(--gb-svg-check-circle);mask-image:var(--gb-svg-check-circle);}
/* 아이콘이 쓰이는 자리의 크기 (마크업 교체 후 적용됨)
섹션 제목 : 인기 공동구매
카드 인원 : 0명 참여 중
빈 상태 :
*/
#group_buying_area .sec-title .gb-ico{font-size:22px;vertical-align:-3px;margin-right:5px;}
#group_buying_area .gcard-people .gb-ico{font-size:13px;margin-right:6px;color:inherit;align-self:center;}
#group_buying_area .s6-empty .em .gb-ico{font-size:44px;color:var(--hint);}
/* 가로 패딩 0 : 컨테이너 1200px 이 곧 콘텐츠 폭이 되게 함(서브메뉴·헤더와 같은 선).
뷰포트가 1232px(1200+여백 32) 아래면 글자가 화면 끝에 붙으므로 그때만 여백을 되살린다. */
/* PC 섹션 머리: 제목과 설명을 한 줄에 (2026-09-17 사용자 지시). 아이브로우(OPEN NOW)는 위에 그대로.
840px 이하(태블릿·모바일)는 기존처럼 세로 배치. 마크업의 익명 div 가 부모라 .sec-head > div 로 잡음 */
@media (min-width:841px){
#group_buying_area .sec-head > div{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;min-width:0;flex:1;}
/* 아이브로우를 제목 위로 되돌림 (2026-09-27 사용자 지시). 오른쪽 끝자리는 전체보기 버튼이 가져간다.
09-22 에 order:3 + margin-left:auto 로 오른쪽 끝에 뒀던 것을 원래대로 되돌린다.
width:100% : 줄을 통째로 써서 제목·설명보다 윗줄에 선다. 아래 여백은 기본 규칙의 margin-bottom:10px 을 쓴다. */
#group_buying_area .sec-head > div .sec-eyebrow{width:100%;}
#group_buying_area .sec-head > div .sec-desc{margin-top:0;}
}
@media (max-width:1232px){
#group_buying_area .s6-wrap{padding-left:16px;padding-right:16px;}
#group_buying_area .sec-band-in{padding-left:16px;padding-right:16px;}
#group_buying_area .hero-2col{padding-left:16px;padding-right:16px;}
}
/* ---- 반응형 ----
기획 groupbuy_S6.html 정본: 4 -> 3(1180) -> 2(840) 열. 최소 2열을 유지한다. */
@media (max-width:1180px){
#group_buying_area .card-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
#group_buying_area .hero-2col{grid-template-columns:minmax(0,1fr) 380px;gap:36px;}
#group_buying_area .hero-card{width:380px;}
#group_buying_area .hero-card-thumb{height:260px;}
#group_buying_area .hero-title{font-size:30px;}
}
@media (max-width:840px){
#group_buying_area .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* 좁은 폭 : 이미지 위 / 텍스트 아래 1단 (gb_ui.css 의 839px 규칙을 여기서도 유지) */
@media (max-width:839px){
#group_buying_area .hero-2col{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px 20px 46px;min-height:auto;}
#group_buying_area .hero-info{max-width:none;}
#group_buying_area .hero-visual{order:-1;justify-content:center;margin-bottom:16px;}
#group_buying_area .hero-card{width:100%;max-width:none;}
#group_buying_area .hero-card-thumb{height:240px;}
#group_buying_area .hero-title{font-size:24px;margin-top:12px;}
#group_buying_area .hero-sub{font-size:13.5px;}
#group_buying_area .m-disc{margin-top:16px;}
#group_buying_area .m-disc .mx .pct{font-size:38px;}
#group_buying_area .hero-cta{margin-top:20px;}
#group_buying_area .hero-cta .btn-yellow{width:100%;height:50px;}
}
@media (max-width:560px){
#group_buying_area .s6-wrap{padding:44px 16px 64px;gap:44px;}
#group_buying_area .sec-band-in{padding:26px 16px 44px;}
#group_buying_area .sec-title{font-size:21px;}
#group_buying_area .sec-desc{font-size:12.5px;}
#group_buying_area .s6-filterbar{margin-top:18px;}
#group_buying_area .subtab-btn{font-size:12.5px;}
#group_buying_area .card-grid{gap:14px;margin-top:18px;}
#group_buying_area .gcard-body{padding:13px 12px 13px;}
/* 모바일 카드는 썸네일이 172x115 로 작아 자리표시 아이콘도 함께 줄인다 */
#group_buying_area .gcard .thumb::after{background-size:44px;}
/* 제목 14 -> 13px · 아래 여백 10 -> 6 · 상품명 아래 16 -> 8 · 하단 위 여백 12 -> 8 · 참여 버튼 44 -> 39px (2026-10-16 사용자 지시) */
#group_buying_area .gcard-title{font-size:13px;margin-bottom:6px;}
#group_buying_area .gcard-body .pname{font-size:11.5px;margin:0 0 8px;}
#group_buying_area .gcard-disc .now{font-size:20px;}
#group_buying_area .gcard-disc .basis{font-size:11px;}
#group_buying_area .gcard-next{font-size:11px;}
#group_buying_area .gcard .gcard-foot{padding-top:8px;}
#group_buying_area .gcard-join{height:39px;font-size:13px;margin-top:10px;}
#group_buying_area .s6-more-btn{height:46px;padding:0 32px;}
/* 레일은 카드 하나가 폭을 거의 채우고 다음 카드가 살짝 보이게 한다(스와이프 암시). */
#group_buying_area .rail-more{height:44px;padding:0 18px;}
#group_buying_area .rail{gap:12px;margin-top:10px;}
#group_buying_area .rail > .gcard{flex:0 0 80%;}
}