/* gb_detail.css - 공동구매 상세(detail.asp)
   기획 groupbuy_S8.html 의 inline style.
   - 모든 선택자는 #group_buying_area 스코프 안에서만 적용된다(헤더/푸터 침범 방지).
   - 이 파일을 수정하면 include/gb_css.asp 의 GB_CSS_VER 값을 함께 올릴 것.
*/
/* ===== S8 상세 페이지 스타일 (기획 groupbuy_S8.html inline style 이식) ===== */
body{overflow-x:hidden;}
#group_buying_area .s8-wrap{max-width:1200px;margin:0 auto;padding:20px 0 80px;display:grid;grid-template-columns:1fr 360px;grid-template-areas:"visual side" "body side";gap:0 40px;align-items:start;}
#group_buying_area .s8-visual{grid-area:visual;}
#group_buying_area .s8-body{grid-area:body;}
#group_buying_area .s8-side{grid-area:side;}
#group_buying_area .s8-visual{background:var(--clear);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;}
#group_buying_area .s8-hero-img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:130px;background:linear-gradient(135deg,var(--belief),var(--accent-soft));cursor:zoom-in;}
#group_buying_area .s8-thumbs{display:flex;gap:8px;padding:12px;flex-wrap:wrap;}
#group_buying_area .s8-thumb{width:56px;height:56px;border-radius:10px;border:1px solid var(--border);background:var(--belief);display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;}
#group_buying_area .s8-thumb.on{border-color:var(--primary);border-width:2px;}
#group_buying_area .s8-cat{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--hint);text-transform:uppercase;margin-top:24px;}
#group_buying_area .s8-title{font-size:25px;font-weight:800;color:var(--ink);line-height:1.35;margin-top:8px;}
#group_buying_area .s8-sub{font-size:14.5px;color:var(--muted);margin-top:8px;line-height:1.6;}
#group_buying_area .s8-fraud{display:flex;gap:9px;align-items:flex-start;background:#fff8e2;border-radius:8px;padding:12px 16px;margin-top:20px;font-size:12.5px;line-height:1.6;color:#555;}
#group_buying_area .s8-fraud b{color:#e5362c;}
#group_buying_area .s8-section{margin-top:30px;}
#group_buying_area .s8-h2{font-size:16px;font-weight:800;color:var(--primary);margin-bottom:12px;padding-bottom:8px;}
#group_buying_area .s8-content{font-size:14px;line-height:1.85;color:var(--ink);}
#group_buying_area .s8-content p{margin-bottom:12px;}
#group_buying_area .s8-fig{margin:18px 0;}
#group_buying_area .s8-fig-img{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(135deg,var(--belief),var(--accent-soft));display:flex;align-items:center;justify-content:center;font-size:104px;border:1px solid var(--border);}
#group_buying_area .s8-fig figcaption{font-size:12.5px;color:var(--muted);text-align:center;margin-top:8px;}
#group_buying_area .s8-collapsible{max-height:560px;overflow:hidden;position:relative;}
#group_buying_area .s8-collapsible.expanded{max-height:none;}
/* 페이드는 더보기 버튼이 보일 때만(has-more, detail.asp syncMoreBtn 이 붙인다) - 짧은 소개까지 흐려지던 것 (2026-10-15) */
#group_buying_area .s8-collapsible.has-more:not(.expanded)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--clear));pointer-events:none;}
#group_buying_area .s8-more-btn{width:100%;margin-top:10px;padding:11px;border:1px solid var(--border);border-radius:8px;background:var(--clear);color:var(--primary);font-size:13px;font-weight:700;cursor:pointer;}
#group_buying_area .s8-more-btn:hover{background:var(--belief);}
#group_buying_area .s8-notice-list{list-style:none;padding:0;margin:0;}
/* 문단 사이 구분선 삭제 · 위아래 10 -> 6px (2026-10-16 사용자 지시). 마지막 줄 선 지우던 :last-child 규칙도 함께 삭제 */
#group_buying_area .s8-notice-list li{display:flex;gap:8px;padding:6px 0;font-size:12.5px;line-height:1.6;color:var(--text-body,#333);}
#group_buying_area .s8-notice-list li::before{content:'\2022';color:var(--primary);flex-shrink:0;font-weight:900;}
#group_buying_area .s8-notice-list li b{color:var(--primary);}
#group_buying_area .s8-notice-collapse>summary.s8-h2{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;min-height:44px;user-select:none;margin-bottom:0;}
#group_buying_area .s8-notice-collapse>summary.s8-h2::marker,#group_buying_area .s8-notice-collapse>summary.s8-h2::-webkit-details-marker{display:none;}
#group_buying_area .s8-notice-collapse>summary.s8-h2::after{content:'\25BE';font-size:14px;font-weight:400;color:var(--hint);transition:transform .15s;flex-shrink:0;margin-left:8px;}
#group_buying_area .s8-notice-collapse[open]>summary.s8-h2::after{transform:rotate(180deg);}
#group_buying_area .s8-notice-collapse>.gb-collapse-body{padding-top:8px;}
/* 2026-09-29 기획 S8 유의사항 : 문단별 구분선 + 굵은 글자 남색(위 li 규칙), 제목 아래 구분선. PC 는 항상 펼침이라 접기 화살표를 숨긴다(기획 body.pc-shell) */
#group_buying_area .s8-notice-collapse>summary.s8-h2{border-bottom:1px solid var(--border);cursor:default;pointer-events:none;}
#group_buying_area .s8-notice-collapse>summary.s8-h2::after{display:none;}
#group_buying_area .s8-prod-sub{font-size:12.5px;color:var(--muted);margin:-4px 0 14px;}
#group_buying_area .s8-prod{display:flex;gap:13px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:14px;margin-bottom:10px;background:var(--clear);}
#group_buying_area .s8-prod-thumb{width:60px;height:60px;border-radius:10px;background:linear-gradient(135deg,var(--belief),var(--accent-soft));display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0;cursor:zoom-in;}
#group_buying_area .s8-prod-info{flex:1;min-width:0;}
#group_buying_area .s8-prod-cat{font-size:12px;color:var(--hint);}
#group_buying_area .s8-prod-name{font-size:16px;font-weight:700;color:var(--ink);margin-top:3px;line-height:1.35;}
#group_buying_area .s8-prod-opt{font-size:12.5px;color:var(--muted);margin-top:4px;}
#group_buying_area .s8-prod-rate{flex-shrink:0;text-align:right;padding-left:10px;font-size:13px;color:var(--hint);white-space:nowrap;}
#group_buying_area .s8-prod-rate b{font-family:'Montserrat',sans-serif;font-weight:800;font-size:18px;color:var(--primary);margin-left:4px;}
#group_buying_area .s8-prod-rate.off{font-size:12.5px;color:var(--muted);}
#group_buying_area .s8-prod-rate.boosted b{margin-left:0;}
#group_buying_area .s8-prod-rate .s8-fixchip{font-size:10px;font-weight:800;border-radius:999px;padding:2px 7px;vertical-align:2px;}
#group_buying_area .s8-prod-rate .s8-prod-sub{font-size:11px;color:var(--good,#0a8a4d);font-weight:700;margin-top:2px;}
#group_buying_area .s8-prod-rate.off .s8-prod-sub,#group_buying_area .s8-prod-rate:not(.boosted) .s8-prod-sub{color:var(--hint);font-weight:600;}
#group_buying_area .s8-prod-top{display:inline-block;margin-left:7px;font-size:11px;font-weight:800;background:var(--accent);color:var(--primary);padding:2px 9px;border-radius:var(--r-pill);vertical-align:middle;}
#group_buying_area .s8-prod.is-top{border-color:var(--accent);background:var(--accent-soft,#fffbe6);}
/* 안내 상자 통일 (2026-09-28 사용자 요청) : 사칭 사기 주의(.s8-fraud)와 결제 안내(.s8-notice)를 같은 연노랑 상자로.
   배경 #fff8e2 : 기존 --accent-soft(#FFF4D6)보다 조금 연하게(사용자 육안 지시, #FFFAEB 는 너무 연함). 라운드 8px · 여백 12px 16px · 본문 #555.
   구분은 굵은 글자 색으로만 : 사기 주의 빨강 #e5362c · 결제 안내 남색(유의사항 굵은 글자와 같음) */
#group_buying_area .s8-notice{display:flex;gap:8px;align-items:flex-start;background:#fff8e2;border-radius:8px;padding:12px 16px;margin-top:24px;font-size:12.5px;line-height:1.6;color:#555;}
#group_buying_area .s8-notice b{color:var(--primary);}
#group_buying_area .s8-side{position:sticky;top:20px;}
#group_buying_area .s8-join{background:var(--clear);border:1px solid var(--border);border-radius:var(--r-card);padding:22px;}
/* 메인 히어로 카드의 .hcard-label 과 같은 모양으로 맞춤 (2026-09-27 사용자 지시).
   값은 gb_main.css 의 #group_buying_area .hcard-body .hcard-label 에서 그대로 옮겼다.
   margin-bottom:10px 만 뺐다. 여기는 바로 아래 .j-title 이 margin-top:12px 을 이미 갖고 있어
   그것까지 옮기면 간격이 22px 로 벌어진다.
   font-family 도 뺐다. .hcard-label 은 지정하지 않고 사이트 기본 글꼴을 상속한다. */
#group_buying_area .s8-join .label{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#f2f4f9;color:#5a5dd2;font-size:12px;font-weight:500;line-height:1;letter-spacing:-.01em;white-space:nowrap;}
#group_buying_area .s8-join .label-ship{background:#e6f7ed;color:#1a7f4b;margin-left:6px;}
#group_buying_area .s8-join .j-title{font-size:20px;font-weight:800;color:var(--ink);line-height:1.4;margin-top:12px;}
#group_buying_area .s8-join .j-meta{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--muted);}
#group_buying_area .s8-join .j-meta .num{font-weight:800;color:#111111;margin-right:2px;}
#group_buying_area .s8-join .j-meta .dday{color:var(--hot);font-weight:700;}
#group_buying_area .s8-join .j-meta .sep{color:var(--border);}
#group_buying_area .s8-join .j-disc{margin-top:18px;padding-top:18px;border-top:1px solid var(--belief);}
/* 상품명 (2026-09-27 사용자 지시). 한때 메인 카드처럼 회색 꼬리표로 뒀다가 배경·안쪽 여백을 빼고
   글자만 남겼다. 15px 500 #333333 에 아래 여백 18px.
   display:table 은 남긴다 : inline-block 으로 두면 바로 뒤의 "최대 N% 할인 예정" 이 같은 줄로 붙는다. */
#group_buying_area .s8-join .j-disc .pname{display:table;color:#333333;border-radius:4px;font-size:13px;font-weight:600;line-height:1;letter-spacing:-.01em;margin-bottom:18px;}
/* 할인 표시를 메인 카드(.gcard-disc)와 같은 구성으로 맞춤 (2026-09-27 사용자 지시).
   detail.asp 마크업도 .pct 안에 .mx-lbl / .pc 를 넣어 "최대" 와 "%" 를 따로 줄일 수 있게 했다.
   비율(.9em / .6em) · 굵기 · 색은 메인에서 그대로 옮겼다. 숫자 크기만 34px 을 유지한다.
   상세는 구매를 결정하는 자리라 할인율이 카드보다 커야 해서 이 하나만 다르게 둔다. */
#group_buying_area .s8-join .j-disc .pct{font-family:'Montserrat',sans-serif;font-weight:700;font-size:34px;color:var(--hot);line-height:1;letter-spacing:-.02em;}
#group_buying_area .s8-join .j-disc .pct .mx-lbl{font-family:inherit;font-size:.9em;font-weight:600;}
#group_buying_area .s8-join .j-disc .pct .pc{font-size:.6em;margin-left:1px;}
#group_buying_area .s8-join .j-disc .lead{font-size:14px;font-weight:400;color:#333333;margin-left:7px;}
#group_buying_area .s8-join .j-basis{font-size:12px;color:var(--hint);margin-top:7px;}
#group_buying_area .s8-join .j-receipt{margin-top:4px;background:var(--belief,#f6f7fb);border-radius:10px;padding:10px 13px;}
#group_buying_area .s8-join .j-receipt .jr-l{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink);padding:2.5px 0;}
#group_buying_area .s8-join .j-receipt .jr-fin{font-weight:800;color:var(--primary);border-top:1px solid rgba(0,0,0,.08);margin-top:4px;padding-top:6px;}
#group_buying_area .s8-join .j-receipt .jr-more{font-weight:800;color:var(--good,#0a8a4d);}
#group_buying_area .s8-join .jr-note{font-size:11px;color:var(--hint);margin-top:5px;}
#group_buying_area .s8-join .j-next{font-size:12.5px;color:#5a5dd2;font-weight:600;margin-top:9px;}
#group_buying_area .s8-join .j-next.max{color:var(--accent-hover);}
/* 할인 예정 안내 상자 (2026-10-16 사용자 지시, 참고 이미지 알림창). detail.asp 가 할인 예정 상태에서 .j-notice 로 묶어 낸다.
   asp 가 아직 옛 판이면 .j-notice 가 없어 아래 규칙은 아무 데도 안 걸린다.
   바탕은 토큰 --accent-soft. 테두리 #F5E2A0 은 가이드 · 토큰에 없어 새로 정함(바탕보다 한 단계 진한 노랑).
   제목 · 불꽃 아이콘 색은 --ink(#111) 로 같게 (2026-10-16 사용자 선택 : 남색 제목 + 주황 아이콘이 따로 놀아 보임). 아이콘은 currentColor 로 제목 색을 따른다 */
#group_buying_area .s8-join .j-notice{margin-top:14px;padding:14px 16px;background:var(--accent-soft);border:1px solid #F5E2A0;border-radius:var(--r-btn);}
#group_buying_area .s8-join .j-notice .j-next{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:700;line-height:1.4;color:var(--ink);}
#group_buying_area .s8-join .j-notice .j-basis{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:#333333;word-break:keep-all;}
#group_buying_area .s8-join .j-notice .j-basis:first-child{margin-top:0;}
#group_buying_area .s8-join .j-notice .gb-ico{display:inline-block;width:16px;height:16px;flex-shrink:0;background-color:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;-webkit-mask-image:var(--gb-svg-fire);mask-image:var(--gb-svg-fire);}
#group_buying_area .s8-join .j-extra{font-size:11.5px;color:var(--muted);margin-top:4px;}
#group_buying_area .s8-join .j-already{font-size:12.5px;color:var(--hint);background:var(--surface2,#f4f5f7);border-radius:8px;padding:9px 11px;margin-top:12px;line-height:1.5;}
#group_buying_area .s8-join .j-cta{width:100%;margin-top:18px;height:52px;font-size:16px;}
@media(max-width:839px){
#group_buying_area .s8-wrap{grid-template-columns:1fr;grid-template-areas:"visual" "side" "body";gap:16px;padding:20px 20px 90px;}
#group_buying_area .s8-side{position:static;}
#group_buying_area .s8-hero-img{aspect-ratio:1/1;font-size:88px;}
#group_buying_area .s8-title{font-size:22px;}
#group_buying_area .s8-join .j-cta{display:none;}
}
@media(max-width:599px){
#group_buying_area .s8-wrap{padding:16px 16px 96px;}
#group_buying_area .s8-hero-img{aspect-ratio:1/1;font-size:80px;}
}
#group_buying_area .s8-mo-cta{position:fixed;left:0;right:0;bottom:0;z-index:500;background:var(--clear);border-top:1px solid var(--border);padding:10px 16px;box-shadow:0 -4px 16px rgba(34,36,80,.1);display:none;}
#group_buying_area .s8-mo-cta button{width:100%;height:50px;font-size:16px;}
#group_buying_area .s8-modal{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:24px;}
#group_buying_area .s8-modal.show{display:flex;}
#group_buying_area .s8-modal-box{position:relative;background:var(--clear);border-radius:16px;padding:20px;max-width:480px;width:100%;box-shadow:0 20px 50px -20px rgba(0,0,0,.4);}
#group_buying_area .s8-modal-img{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,var(--belief),#fdf3da);display:flex;align-items:center;justify-content:center;font-size:150px;}
#group_buying_area .s8-modal-cap{text-align:center;font-size:14px;font-weight:700;margin-top:12px;color:var(--primary);}
#group_buying_area .s8-modal-close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;background:var(--clear);border:1px solid var(--border);color:var(--primary);font-size:18px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);}
@media(max-width:520px){
#group_buying_area .s8-modal-img{font-size:104px;}
}
/* --- ASP 이식 보정 --- */
#group_buying_area .s8-hero-img{overflow:hidden;}
#group_buying_area .s8-hero-img img{width:100%;height:100%;object-fit:cover;display:block;}
#group_buying_area .s8-thumb{overflow:hidden;padding:0;}
#group_buying_area .s8-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
#group_buying_area .s8-prod-thumb{overflow:hidden;}
#group_buying_area .s8-prod-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
#group_buying_area .s8-fraud img.gb-ico{width:18px;height:18px;flex-shrink:0;margin-top:1px;}
/* 참여 버튼을 메인 카드 버튼과 같은 모양으로 (2026-09-27 사용자 지시).
   detail.asp 에서 클래스를 btn-yellow -> btn-outline 으로 바꿨다(A-28). main.asp 는 A-8 에서 같은 교체를 했다.
   흰 배경·회색 테두리·호버 키컬러 채움·화살표는 전부 공용 gb_ui.css 의 .btn-outline 이 갖고 있어 여기서 다시 쓰지 않는다.
   display 만 block -> inline-flex 로 바꾼다. .btn-outline 이 flex 로 가운데 정렬하고 ::after 화살표를 붙이는데,
   block 이면 그 두 가지가 안 먹는다. line-height:52px 도 flex 정렬과 겹쳐 빼야 한다.
   dis 는 테두리 색까지 같이 눌러야 회색 버튼 둘레에 밝은 테가 남지 않는다. */
#group_buying_area .s8-join .j-cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;}
#group_buying_area .s8-join .j-cta.dis{background:var(--border);border-color:var(--border);color:var(--muted);pointer-events:none;}
/* 모바일 참여 버튼 키컬러 (2026-10-16 사용자 지시) : 메인 목록 카드 참여하기(.gcard-join 손가락 입력 상태)와 같은 남색 채움 + 화살표.
   마감 등 .dis 는 위 규칙이 특정도가 높아 회색 그대로. 화살표도 .dis 에는 넣지 않는다 */
@media(max-width:599px){
#group_buying_area .s8-join .j-cta{background:var(--primary);border-color:var(--primary);color:#ffffff;}
#group_buying_area .s8-join .j-cta:not(.dis)::after{width:8px;margin-left:8px;border-top-color:currentColor;border-right-color:currentColor;}
}
#group_buying_area .s8-empty{max-width:640px;margin:60px auto;text-align:center;color:var(--muted);font-size:14px;line-height:1.7;}
#group_buying_area .s8-empty a{display:inline-block;margin-top:16px;color:var(--primary);font-weight:700;}
/* ===== 2026-09-29 기획 S8 반영 : 대표 이미지 목록 · 상품별 할인 구간표 ===== */
/* 대표 이미지 : 사진은 잘리지 않게 contain + 연회색 바탕(기획 .s8-hero-photo / .has-photo) */
#group_buying_area .s8-hero-img.has-photo{background:#EFF0F3;}
#group_buying_area .s8-hero-img img.s8-hero-photo{object-fit:contain;object-position:center;}
/* 썸네일은 button 이라 기본 버튼 모양을 지운다 */
#group_buying_area .s8-thumbs button.s8-thumb{-webkit-appearance:none;appearance:none;font:inherit;}
#group_buying_area .s8-thumb.has-photo{background:#EFF0F3;}
/* 상품 카드 : 할인 구간표가 카드 아래 줄로 내려가도록 줄바꿈 허용(기획 assets_common .s8-prod{flex-wrap:wrap}) */
#group_buying_area .s8-prod{flex-wrap:wrap;}
/* 할인 구간표 공통 스타일은 gb_ui.css 로 옮겼다(2026-09-29, 개설자 대시보드와 공용). 여기는 상세 상품 카드 안 배치만 */
#group_buying_area .s8-prod>.gb-ladder{flex:1 1 100%;margin-top:4px;padding-top:8px;border-top:1px dashed var(--border);}
