/* 공동구매 개설자(create) 4개 화면 공통 CSS. 기획 groupbuy_create.html inline style 통합.
   - step1_intro / step2_products / step3_settings / create/complete 의 <style> 을 이 파일로 합쳤다.
   - 모든 선택자는 #group_buying_area 스코프 안에서만 적용된다(헤더/푸터 침범 방지).
   - 배경색(회색)은 지정하지 않는다. 페이지 배경은 사이트 기본값을 그대로 쓴다.
*/
/* ===== 개설 스타일 (기획 groupbuy_create.html inline style 이식) ===== */
body{overflow-x:hidden;}
#group_buying_area .cr-head{height:56px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);}
#group_buying_area .cr-head .brand{font-family:'Montserrat',sans-serif;font-weight:900;font-size:18px;color:var(--primary);letter-spacing:-.02em;}
#group_buying_area .cr-head .brand .bar{display:inline-block;width:1px;height:14px;background:var(--border);margin:0 9px;vertical-align:middle;}
#group_buying_area .cr-head .brand .gb{font-weight:700;font-size:14px;color:var(--ink);}
/* 단계 표시 : 아래 선 삭제 + 위 여백 10px (2026-09-29 사용자 지시). 상위 메뉴 아래 선(#efefef)과 겹쳐 선이 두 줄로 보이지 않게 */
#group_buying_area .cr-steps{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;background:var(--clear);margin:10px 0;}
/* 개설 페이지 상위 메뉴 (2026-09-29 사용자 지시) : 위아래 20px(공용 gb_ui 는 20 / 28) · 아래 선 #efefef. 599px 이하 패딩은 gb_ui 값 유지 */
@media (min-width:600px){#group_buying_area .gb-snav{border-bottom:1px solid #efefef;}}	/* [PC] 상단 메뉴 아래 선 (2026-10-15 사용자 지시) */
@media (max-width:599px){#group_buying_area .gb-snav{border-bottom:1px solid #f7f7f7;}}	/* [모바일] 아래 단계 표시 띠와 같은 색 */
@media (min-width:600px){#group_buying_area .gb-snav-in{padding-top:20px;padding-bottom:20px;}}
#group_buying_area .cr-step{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--muted);}
#group_buying_area .cr-step .dot{width:24px;height:24px;border-radius:50%;background:var(--belief);color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:800;}
#group_buying_area .cr-step.on{color:var(--trendy);}
#group_buying_area .cr-step.on .dot{background:var(--trendy);color:#fff;}
#group_buying_area .cr-step.done .dot{background:var(--trendy);color:#fff;}
#group_buying_area .cr-sep{color:var(--border);font-size:14px;width:14px;text-align:center;}
#group_buying_area .cr-sep::before{content:'\00B7';}
/* 단계 표시가 폼(.cr-wrap) 안에 있는 화면(3단계 step3_settings) 보정 (2026-10-15 사용자 지시 : 2단계와 여백이 다름)
   - 폼의 좌우 여백 16px 만큼 띠가 안쪽으로 들어감 → 그만큼 바깥으로 넓힘
   - 3단계 asp 는 점(·)을 글자로도 넣어 CSS 점과 두 번 나옴 → 글자는 크기 0, CSS 점만
   - PC 는 폼 위 구분선이 단계 표시 위에 그어짐 → 폼 선 대신 단계 표시 아래 선 */
#group_buying_area .cr-sep{font-size:0;}
#group_buying_area .cr-sep::before{font-size:14px;}
@media (max-width:1232px){#group_buying_area .cr-wrap > .cr-steps{margin-left:-16px;margin-right:-16px;}}
@media (min-width:600px){#group_buying_area .cr-wrap:has(> .cr-steps){border-top:0;}#group_buying_area .cr-wrap > .cr-steps{border-bottom:1px solid #efefef;}}
/* 모바일 개설 단계 표시 축소 (2026-10-15 사용자 지시 : 모바일에서 크게 보임). 원 24 -> 18px (처음 가이드 20px, 사용자 육안 결정으로 18) · 글자 13 -> 12px · 위아래 여백 16 -> 12px */
@media (max-width:599px){
#group_buying_area .cr-steps{margin:0;padding:8px 16px;gap:6px;background:#f7f7f7;}	/* 모바일 : 바깥 여백 0 · 안 여백 8px · 연회색 띠 (2026-10-15 사용자 지시. #f7f7f7 은 가이드에 없는 값, 사용자 육안 결정) */
#group_buying_area .cr-step{gap:5px;font-size:12px;font-weight:400;}
#group_buying_area .cr-step.on{font-weight:700;}	/* 지금 단계만 굵게 (2026-10-15 사용자 지시) */
#group_buying_area .cr-step .dot{width:18px;height:18px;font-size:11px;font-weight:500;background:#ffffff;}	/* 남은 단계 원 흰색 (연회색 띠 위). 지금 · 지난 단계는 기본 규칙(.on · .done)이 더 구체적이라 남색 유지 */
#group_buying_area .cr-sep{width:10px;color:var(--hint);}	/* 단계 사이 점 : --border(#E4E5EC) 는 모바일에서 거의 안 보여 힌트 글자색으로 (2026-10-15 사용자 지시) */
}
#group_buying_area .cr-wrap{padding:0 0 60px;max-width:1200px;margin:0 auto;} /* 600 -> 1200px · 좌우 0 : PC 콘텐츠 폭을 사이트 기준 1200 에 맞춤. 개설 흐름 전 화면 공통(2026-09-28 사용자 지시). 좌우 0 은 1232px 이하에서 16px 로 되돌림(상위 메뉴와 같은 기준) */
@media (max-width:1232px){#group_buying_area .cr-wrap{padding-left:16px;padding-right:16px;}}
@media (min-width:600px){#group_buying_area .cr-wrap{border-top:1px solid #efefef;}#group_buying_area .cr-selbar{border-top-color:#efefef;}}	/* [PC] 단계 표시 아래 구분선 · 상품 선택 아래 선 #efefef (2026-10-15 사용자 지시. 가이드 테두리보다 연한 값, 사용자 육안 결정). 모바일은 단계 표시 연회색 띠로 구분 */
#group_buying_area .cr-panel{display:none;}
#group_buying_area .cr-panel.show{display:block;}
#group_buying_area .cr-h{margin-top:34px;font-size:22px;font-weight:800;color:var(--ink);text-align:center;letter-spacing:-.01em;line-height:1.4;} /* margin-top 34 : 구분선 아래 붙지 않게. 2단계 .cr-h2 와 같은 값 */
#group_buying_area .cr-sub{font-size:14px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.6;}
@media (min-width:600px){#group_buying_area .cr-br-mo{display:none;}} /* 모바일 전용 줄바꿈 <br class="cr-br-mo"> : PC 에서 숨김. 소개 카드 설명(.cr-info-d) 3곳 (2026-10-15, asp 반영은 개발팀 요청) */
#group_buying_area .cr-info{margin-top:32px;display:flex;flex-direction:column;gap:14px;}
#group_buying_area .cr-info-row{display:flex;gap:15px;align-items:center;border:1px solid var(--border);border-radius:14px;padding:18px 18px;}
#group_buying_area .cr-info-ic{width:48px;height:48px;border-radius:12px;background:var(--belief);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
#group_buying_area .cr-info-t{font-size:15px;font-weight:800;color:var(--ink);}
#group_buying_area .cr-info-d{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.55;}
#group_buying_area .cr-cta{width:100%;margin-top:30px;height:54px;background:var(--primary);color:#ffffff;border:none;border-radius:12px;font-size:16px;font-weight:500;cursor:pointer;transition:background .2s ease;}
#group_buying_area .cr-cta:hover{background:var(--primary-hover,#3a3d6e);}
#group_buying_area .cr-note{font-size:12px;color:var(--muted);text-align:center;margin-top:13px;}
#group_buying_area .cr-todo{text-align:center;padding:50px 20px;color:var(--muted);}
#group_buying_area .cr-todo .em{font-size:40px;margin-bottom:14px;}
#group_buying_area .cr-back{background:transparent;color:var(--muted);border:none;border-radius:9px;padding:12px 14px;font-size:14px;font-weight:700;cursor:pointer;}
#group_buying_area .cr-back:hover{background:var(--belief);}
#group_buying_area .cr-selbar-r{display:flex;align-items:center;gap:8px;}
#group_buying_area .cr-h2{margin-top:34px;font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
#group_buying_area .cr-sub2{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.6;}
#group_buying_area .cr-cart{margin-top:22px;display:flex;flex-direction:column;gap:10px;}
#group_buying_area .cr-item{display:flex;align-items:center;gap:13px;border:1px solid var(--border);border-radius:12px;padding:14px 15px;cursor:pointer;transition:border-color .15s,background .15s;}
#group_buying_area .cr-item:has(.cr-check:checked){background:var(--group-purple-soft,#f3f0ff);}	/* 선택 시 테두리 색 변경 삭제 (2026-10-15 사용자 지시) */
#group_buying_area .cr-item.off{opacity:.6;cursor:default;background:var(--belief);}
#group_buying_area .cr-check{width:20px;height:20px;accent-color:var(--trendy);flex-shrink:0;}
#group_buying_area .cr-allrow{display:flex;align-items:center;gap:10px;padding:11px 4px 13px;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--border);margin-top:30px;}
#group_buying_area .cr-allrow input{width:20px;height:20px;accent-color:var(--trendy);cursor:pointer;}
#group_buying_area .cr-thumb{width:46px;height:46px;border-radius:2px;background:var(--belief);border:1px solid #f7f7f7;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
#group_buying_area .cr-iinfo{font-size:14px;color:var(--ink);font-weight:700;line-height:1.45;min-width:0;}
#group_buying_area .cr-price{font-family:'Montserrat',sans-serif;font-size:12.5px;color:var(--ink);font-weight:600;}
#group_buying_area .cr-price-row{margin-top:2px;}	/* 가격 줄 : 검정 600 · 위 2px (2026-10-15 사용자 지시, PC · 모바일 공통) */
#group_buying_area .cr-bulk{font-size:11px;font-weight:400;color:var(--muted);background:#f5f5f5;border-radius:2px;padding:3px 5px;margin-left:4px;}	/* 할인 배지 무채색 · 각지게 (2026-10-15 사용자 지시, PC · 모바일 공통. #f5f5f5 · 라운드 2px 는 가이드에 없는 값, 사용자 지정) */
#group_buying_area .cr-badge-no{font-size:10.5px;font-weight:500;color:var(--muted);background:#f7f7f7;border-radius:4px;padding:1px 7px;flex-shrink:0;white-space:nowrap;}	/* 사유 라벨 (2026-10-15 사용자 지시) : 알약 -> 라운드 4px(마이 공동구매 배지와 같음) · 배경 #E4E5EC -> #f7f7f7(칩 · 단계 띠와 같은 값) · 굵기 800 -> 500 · 글자 #999 -> #666 */
#group_buying_area .cr-selbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--border);flex-wrap:wrap;}
#group_buying_area .cr-selcnt{font-size:14px;font-weight:800;color:var(--trendy);}
#group_buying_area .cr-selbtns{display:flex;gap:8px;}
/* 주 행동 버튼을 키컬러로 (2026-09-27 사용자 지시). 노랑 채움이었다.
   참여 흐름(step1·step2)의 하단 CTA 도 같은 날 키컬러로 바꿨다. 마지막에 누르는 버튼은 남색으로 통일한다.
   border 를 투명 1px 로 둔 이유 : 옆의 .cr-preview 가 1px 테두리를 갖게 되어 그만큼 높이가 어긋난다.
   :not(:disabled) 로 막은 이유 : 조건 미충족 회색 버튼에 호버 색이 들어가지 않게 한다. */
#group_buying_area .cr-go{background:var(--primary);color:#ffffff;border:1px solid transparent;border-radius:9px;padding:12px 22px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease;}
#group_buying_area .cr-go:not(:disabled):hover{background:var(--primary-hover,#3a3d6e);}
#group_buying_area .cr-go:disabled{background:var(--border);color:var(--hint);cursor:not-allowed;}
#group_buying_area .cr-field{margin-top:50px;}
#group_buying_area .cr-field > label:not(.cr-agree):not(.cr-radio){display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px;}
#group_buying_area .cr-field .req{color:#d6362c;}
#group_buying_area .cr-field .opt{color:var(--muted);font-weight:500;font-size:12px;}
#group_buying_area .cr-field b{font-weight:bold !important}
/* [모바일] 체크박스 표시 - 기존 모바일 CSS 와 충돌해 상품 선택 시 체크박스가 안 보였다 (2026.09.02 ysshin712) */
#group_buying_area #selAll, #group_buying_area .cr-check,
#group_buying_area #gbAgreeAll, #group_buying_area input[name='gb_is_private']{-webkit-appearance:checkbox}
#group_buying_area .cr-input{width:100%;height:48px !important;border:1px solid var(--border);border-radius:10px;padding:0 14px;font-size:15px;color:var(--ink);outline:none;font-family:inherit;background:#fff;}
#group_buying_area .cr-wrap .cr-input{border-bottom:1px solid var(--border) !important;}	/* 모바일 사이트 공통 CSS 가 입력칸 아래 테두리만 0 으로 만듦(m 실측 : 위 · 좌 · 우 1px, 아래 0px) → 아래만 다시 그림 (2026-10-15) */
#group_buying_area .cr-input:focus,#group_buying_area .cr-wrap .cr-input:focus{border-color:var(--primary) !important;box-shadow:none;outline:none;}	/* 포커스 : 남색 1px 선 하나 (2026-10-15 사용자 지시 : 테두리 + 연보라 그림자 띠가 이중선으로 보임). 아래 테두리 보정 규칙(!important)보다 이기도록 !important */
#group_buying_area .cr-help{font-size:12px;color:#999999;margin-top:10px;line-height:1.5;}
#group_buying_area .cr-help b{color:#555555;}
#group_buying_area .cr-imgs{display:flex;gap:8px;flex-wrap:wrap;}
#group_buying_area .cr-imgslot-wrap{position:relative;width:64px;height:64px;}
#group_buying_area .cr-imgslot{position:relative;width:100%;height:100%;border:1.5px dashed var(--border);border-radius:10px;background:var(--belief);color:var(--muted);font-size:20px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
#group_buying_area .cr-imgslot span{font-size:9px;font-weight:700;}
#group_buying_area .cr-imgslot.filled{border-style:solid;border-color:var(--border);background:#fff;font-size:28px;}
#group_buying_area .cr-imgnum{position:absolute;bottom:3px;right:4px;font-size:9px;font-weight:800;color:#fff;background:var(--ink,#333);border-radius:5px;padding:1px 5px;line-height:1.4;z-index:1;}
#group_buying_area .cr-imgslot.is-main{border-color:var(--trendy);border-width:2px;}
#group_buying_area .cr-imgslot.is-main:before{content:'\BA54\C778';position:absolute;top:3px;left:3px;background:var(--trendy);color:#fff;font-size:8.5px;font-weight:800;padding:1px 5px;border-radius:5px;line-height:1.4;z-index:1;}
#group_buying_area .cr-imgdel{position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:50%;background:var(--ink,#333);color:#fff;border:none;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;z-index:2;}
#group_buying_area .cr-imgdel[hidden]{display:none;}
#group_buying_area .cr-prodimgs{display:flex;flex-direction:column;gap:8px;}
#group_buying_area .cr-prodrow{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:12px;padding:10px 13px;}
#group_buying_area .cr-prodrow .pthumb{position:relative;width:46px;height:46px;border-radius:10px;background:var(--belief);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
#group_buying_area .cr-prodrow .pthumb .chg{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:800;color:#fff;background:var(--trendy);border-radius:5px;padding:1px 5px;white-space:nowrap;line-height:1.4;}
#group_buying_area .cr-prodrow .pname{flex:1;font-size:14px;font-weight:700;color:var(--ink);min-width:0;line-height:1.4;}
#group_buying_area .cr-prodrow .pchg{border:1px solid var(--border);background:#fff;color:var(--ink);border-radius:8px;padding:8px 13px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;}
#group_buying_area .cr-prodrow .pchg:hover{border-color:var(--trendy);color:var(--trendy);}
#group_buying_area .cr-prodrow .pchg.done{border-color:var(--trendy);color:var(--trendy);background:var(--group-purple-soft,#f3f0ff);}
#group_buying_area .cr-prodempty{font-size:13px;color:var(--hint);padding:8px 2px;}
/* 장바구니로 이동 링크 (2026-09-28 사용자 요청) : 맨 글자라 버튼으로 안 보였다.
   마크업에 클래스가 없어 .cr-prodempty a 로 잡는다. 값은 보조 버튼 .cr-preview 와 같다. */
#group_buying_area .cr-prodempty a{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background:var(--clear);color:#1a1a1a;border:1px solid var(--border);border-radius:9px;padding:12px 16px;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s ease;}
#group_buying_area .cr-prodempty a:hover{background:var(--belief);}
#group_buying_area .cr-agree{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--body);line-height:1.5;margin-top:9px;cursor:pointer;}
#group_buying_area .cr-agree input{width:18px;height:18px;accent-color:var(--trendy);flex-shrink:0;margin-top:1px;}
#group_buying_area .cr-agree-all{font-size:13.5px;border-bottom:1px solid var(--border);padding-bottom:11px;margin-bottom:4px;}
#group_buying_area .cr-ebar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-bottom:0;border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;padding:6px 8px;background:#fafafe;}
#group_buying_area .cr-eb{min-width:32px;height:30px;border:none;background:transparent;border-radius:6px;padding:0 8px;font-size:13px;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;line-height:1;}
#group_buying_area .cr-eb:hover{background:var(--group-purple-soft,#f3f0ff);color:var(--trendy);}
#group_buying_area .cr-ebsep{width:1px;height:18px;background:var(--border);margin:0 5px;flex-shrink:0;}
#group_buying_area .cr-editor{min-height:340px;max-height:340px;overflow-y:auto;border:1px solid var(--border);border-radius:0 0 10px 10px;padding:12px 14px;font-size:13.5px;line-height:1.6;color:var(--ink);outline:none;}
#group_buying_area .cr-editor:focus{border-color:var(--primary);box-shadow:none;outline:none;}	/* 입력칸과 같은 포커스 (2026-10-15) */
#group_buying_area .cr-editor:empty:before{content:attr(data-ph);color:var(--hint);}
#group_buying_area .cr-editor h1{font-size:20px;font-weight:800;margin:10px 0 6px;line-height:1.3;}
#group_buying_area .cr-editor h2{font-size:17px;font-weight:800;margin:9px 0 5px;line-height:1.3;}
#group_buying_area .cr-editor h3{font-size:15px;font-weight:700;margin:8px 0 4px;line-height:1.3;}
#group_buying_area .cr-editor blockquote{border-left:3px solid var(--trendy);padding:5px 13px;margin:8px 0;color:var(--muted);background:var(--belief);border-radius:0 6px 6px 0;}
#group_buying_area .cr-editor pre{background:#1e1e2e;color:#e4e4f0;padding:12px 14px;border-radius:8px;overflow-x:auto;font-family:'Courier New',monospace;font-size:12.5px;margin:8px 0;white-space:pre-wrap;}
#group_buying_area .cr-editor a{color:var(--trendy);text-decoration:underline;}
#group_buying_area .cr-editor img{max-width:100%;border-radius:8px;margin:6px 0;}
#group_buying_area .cr-editor hr{border:none;border-top:1px solid var(--border);margin:14px 0;}
#group_buying_area .cr-editor table{border-collapse:collapse;width:100%;margin:8px 0;}
#group_buying_area .cr-editor td,#group_buying_area .cr-editor th{border:1px solid var(--border);padding:7px 10px;font-size:13px;text-align:left;}
#group_buying_area .cr-editor th{background:var(--belief);font-weight:700;}
#group_buying_area .cr-editor ul{list-style-type: disc;}
#group_buying_area .cr-editor ol{list-style-type: decimal;}
#group_buying_area .cr-ed-embed{border:1.5px dashed var(--border);border-radius:8px;padding:18px 14px;text-align:center;color:var(--muted);background:var(--belief);margin:8px 0;font-size:12.5px;}
#group_buying_area .cr-ed-embed .em{font-size:24px;display:block;margin-bottom:5px;}
#group_buying_area .cr-radio-row{display:flex;gap:10px;}
#group_buying_area .cr-radio{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;}
#group_buying_area .cr-radio:has(input:checked){border-color:var(--trendy);background:var(--group-purple-soft,#f3f0ff);}
#group_buying_area .cr-radio input{width:18px;height:18px;accent-color:var(--trendy);}
/* 보조 버튼이라 색면을 뺐다 (2026-09-27 사용자 지시). 연보라 채움(#f3f0ff)이었다.
   보라는 이 사이트 팔레트에 없는 색이고, 색면을 가지면 옆의 주 버튼(.cr-go)과 급이 비슷해 보인다.
   흰 배경 + 테두리로 두면 "누를 수는 있지만 주 행동은 아니다" 가 분명해진다. 호버는 .cr-back 과 같은 값.
   margin-left:auto : .cr-selbar 가 justify-content:space-between 인데 이 페이지 마크업에는
   오른쪽 묶음 래퍼(.cr-selbar-r)가 없어 버튼 셋이 균등하게 벌어져 미리보기가 가운데 떠 있었다.
   여기서 왼쪽 여백을 모두 먹어 "뒤로 1개 / 오른쪽 2개" 배치가 된다. asp 를 안 고치는 방법이다. */
#group_buying_area .cr-preview{display:inline-flex;align-items:center;gap:5px;margin-left:auto;box-sizing:border-box;background:var(--clear);color:#1a1a1a;border:1px solid var(--border);border-radius:9px;padding:12px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .2s ease;}
#group_buying_area .cr-preview:hover{background:var(--belief);}
#group_buying_area .cr-preview svg{width:16px;height:16px;flex-shrink:0;}
/* 미리보기 레이어: 기본은 감춤. hidden 이 없을 때(=미리보기 버튼을 눌렀을 때)만 나타난다.
   display:flex 를 기본값으로 두면 hidden 속성을 이겨서 레이어가 화면을 계속 덮는다. */
#group_buying_area .cr-pv-ov{display:none;position:fixed;inset:0;background:rgba(14,14,16,.6);align-items:flex-start;justify-content:center;padding:28px 16px;z-index:700;overflow-y:auto;}
#group_buying_area .cr-pv-ov:not([hidden]){display:flex;}
#group_buying_area .cr-pv{background:var(--belief);border-radius:16px;max-width:1000px;width:100%;position:relative;overflow:hidden;}
#group_buying_area .cr-pv-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:#fff;border-bottom:1px solid var(--border);}
#group_buying_area .cr-pv-tag{font-size:11px;font-weight:700;color:var(--trendy);background:var(--group-purple-soft,#f3f0ff);padding:4px 11px;border-radius:9999px;}
#group_buying_area .cr-pv-dev{display:inline-flex;background:var(--belief);border-radius:9999px;padding:2px;}
#group_buying_area .cr-pv-dev button{border:none;background:transparent;font-size:11px;font-weight:800;color:var(--muted);padding:5px 13px;border-radius:9999px;cursor:pointer;}
#group_buying_area .cr-pv-dev button.on{background:var(--primary);color:#fff;}
#group_buying_area .cr-pv-x{border:none;background:none;font-size:20px;cursor:pointer;color:var(--muted);line-height:1;}
#group_buying_area .cr-pv-stage{padding:22px;overflow-y:auto;max-height:80vh;}
#group_buying_area .cr-pv-frame{background:#fff;border-radius:12px;margin:0 auto;padding:26px;display:grid;grid-template-columns:1fr 320px;gap:0 32px;align-items:start;}
#group_buying_area .cr-pv-frame.mo{max-width:400px;grid-template-columns:1fr;gap:18px 0;padding:18px;}
#group_buying_area .cr-pv-hero{position:relative;aspect-ratio:1/1;border-radius:12px;background:linear-gradient(135deg,var(--belief),var(--accent-soft,#fff3cd));display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:72px;color:var(--hint);gap:6px;}
#group_buying_area .cr-pv-hero.empty{font-size:48px;}
#group_buying_area .cr-pv-num{position:absolute;bottom:8px;right:10px;font-size:13px;font-weight:800;color:#fff;background:var(--ink,#333);border-radius:6px;padding:2px 9px;line-height:1.4;}
#group_buying_area .cr-pv-th{position:relative;}
#group_buying_area .cr-pv-th .n{position:absolute;bottom:2px;right:3px;font-size:9px;font-weight:800;color:#fff;background:var(--ink,#333);border-radius:4px;padding:0 4px;line-height:1.5;}
#group_buying_area .cr-pv-hint{font-size:12px;font-weight:600;}
#group_buying_area .cr-pv-thumbs{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
#group_buying_area .cr-pv-th{width:60px;height:45px;border-radius:8px;background:linear-gradient(135deg,var(--belief),var(--accent-soft,#fff3cd));display:flex;align-items:center;justify-content:center;font-size:24px;border:2px solid transparent;}
#group_buying_area .cr-pv-th.on{border-color:var(--trendy);}
#group_buying_area .cr-pv-cat{font-size:12px;color:var(--hint);margin-top:16px;}
#group_buying_area .cr-pv-title{font-size:24px;font-weight:800;color:var(--ink);line-height:1.35;margin-top:6px;}
#group_buying_area .cr-pv-sub{font-size:14px;color:var(--muted);margin-top:7px;line-height:1.6;}
#group_buying_area .cr-pv-sec{margin-top:26px;}
#group_buying_area .cr-pv-sec h4{font-size:15px;font-weight:800;color:var(--primary);margin-bottom:10px;padding-bottom:7px;border-bottom:2px solid var(--belief);}
#group_buying_area .cr-pv-body{font-size:13.5px;color:var(--ink);line-height:1.65;}
#group_buying_area .cr-pv-body img{max-width:100%;border-radius:8px;}
#group_buying_area .cr-pv-body h1,#group_buying_area .cr-pv-body h2,#group_buying_area .cr-pv-body h3{margin:8px 0 5px;line-height:1.3;}
#group_buying_area .cr-pv-body blockquote{border-left:3px solid var(--trendy);padding:5px 13px;margin:8px 0;color:var(--muted);background:var(--belief);border-radius:0 6px 6px 0;}
#group_buying_area .cr-pv-body table{border-collapse:collapse;width:100%;margin:8px 0;}
#group_buying_area .cr-pv-body td,#group_buying_area .cr-pv-body th{border:1px solid var(--border);padding:7px 10px;font-size:13px;}
#group_buying_area .cr-pv-body .cr-ed-embed{border:1.5px dashed var(--border);border-radius:8px;padding:16px;text-align:center;color:var(--muted);background:var(--belief);margin:8px 0;font-size:12.5px;}
#group_buying_area .cr-pv-prod{display:flex;gap:11px;align-items:center;padding:11px;border:1px solid var(--border);border-radius:12px;margin-bottom:9px;}
#group_buying_area .cr-pv-prod .th{width:48px;height:48px;border-radius:9px;background:linear-gradient(135deg,var(--belief),var(--accent-soft,#fff3cd));display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
#group_buying_area .cr-pv-prod .nm{font-size:14px;font-weight:700;color:var(--ink);}
#group_buying_area .cr-pv-join{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;position:sticky;top:0;}
#group_buying_area .cr-pv-frame.mo .cr-pv-join{position:static;}
#group_buying_area .cr-pv-join .ex{font-size:10.5px;font-weight:700;color:var(--hint);background:var(--belief);display:inline-block;padding:3px 9px;border-radius:9999px;margin-bottom:10px;}
#group_buying_area .cr-pv-join .jt{font-size:16px;font-weight:800;color:var(--ink);line-height:1.4;}
#group_buying_area .cr-pv-join .jm{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:11px;font-size:12.5px;color:var(--muted);}
#group_buying_area .cr-pv-join .jm b{color:var(--primary);}
#group_buying_area .cr-pv-join .jd{margin-top:16px;padding-top:16px;border-top:1px solid var(--belief);}
/* 메인 카드의 .gcard-disc .now 와 같은 값으로 맞춤 (2026-09-27 사용자 지시).
   굵기 900 -> 700, 색 --primary -> --hot, line-height 와 letter-spacing 추가, % 비율 .62em -> .6em.
   숫자 크기만 26px 을 유지한다. 미리보기 팝업 안이라 메인 카드(21px)보다 조금 크게 둔다.
   [한계] "최대" 는 태그 없는 맨 글자라 CSS 로 따로 줄일 수 없다. 메인은 .mx-lbl 로 감싸 .9em / 600 을 준다.
   같게 하려면 미리보기 마크업에도 그 span 을 넣어야 한다(해당 파일이 작업 폴더에 없음). */
#group_buying_area .cr-pv-join .jd .pct{font-family:'Montserrat',sans-serif;font-weight:700;font-size:26px;color:var(--hot);line-height:1;letter-spacing:-.02em;}
#group_buying_area .cr-pv-join .jd .pct .u{font-size:.6em;margin-left:1px;}
#group_buying_area .cr-pv-join .jd .basis{font-size:11.5px;color:var(--hint);margin-top:6px;line-height:1.5;}
/* 상세 페이지 참여 버튼(.btn-outline.j-cta)과 같은 모양으로 (2026-09-27 사용자 지시). 노란 버튼이었다.
   미리보기 마크업에는 btn-outline 클래스가 없어서(해당 asp 가 작업 폴더에 없음) 값을 여기에 옮겨 적었다.
   공용 gb_ui.css 의 .btn-outline 이 바뀌면 이쪽도 같이 손봐야 한다.
   opacity:.55 는 뺐다. 실제로 보일 모양을 보여주는 자리라 흐리게 둘 이유가 없다.
   disabled 버튼이라 브라우저 기본 회색이 끼어들 수 있어 색을 직접 지정한다. cursor 는 not-allowed 로 남긴다.
   높이 48px · 글자 15px 은 미리보기 자체 크기를 유지한다(상세는 52px · 16px). */
#group_buying_area .cr-pv-join .jcta{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:0;width:100%;margin-top:16px;height:48px;padding:0 22px;background:var(--clear);color:#1a1a1a;border:1px solid var(--border);border-radius:var(--r-btn);font-family:inherit;font-size:15px;font-weight:800;cursor:not-allowed;transition:background .3s ease,border-color .3s ease,color .3s ease;}
#group_buying_area .cr-pv-join .jcta::after{content:"";width:0;aspect-ratio:1/1;border:2px solid transparent;border-bottom:0;border-left:0;transform:rotate(45deg);transition:width .3s ease,margin-left .3s ease,border-color .3s ease;}
@media (hover:hover){
#group_buying_area .cr-pv-join .jcta:not(:disabled):hover{background:var(--primary);border-color:var(--primary);color:#ffffff;}
#group_buying_area .cr-pv-join .jcta:not(:disabled):hover::after{width:8px;margin-left:8px;border-top-color:currentColor;border-right-color:currentColor;}
}
#group_buying_area .cr-pv-empty{color:var(--hint);}
#group_buying_area .cr-done{text-align:center;padding:40px 8px 20px;}
#group_buying_area .cr-done-ic{font-size:60px;line-height:1;margin-bottom:20px;}
#group_buying_area .cr-done-t{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
#group_buying_area .cr-done-d{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.65;}
/* 완료 안내문 줄바꿈 정리 (2026-09-28 사용자 요청) : 단어 중간에서 꺾이고(강 / 제 종료) 끝줄에 한두 단어만 남아 지저분했다.
   keep-all 로 단어 단위, balance 로 줄 길이 고르게(미지원 브라우저는 무시), 최대 480px 로 한 줄 30자 안팎.
   굵은 글자는 회색 그대로라 강조가 안 보여 본문색으로. */
#group_buying_area .cr-done-d{max-width:480px;margin-left:auto;margin-right:auto;word-break:keep-all;overflow-wrap:break-word;text-wrap:balance;}
#group_buying_area .cr-done-d b{font-weight:700;color:var(--body);}
/* 완료 안내문 두 문장 나누기 (2026-09-28 사용자 요청) : <br> 한 줄로만 나뉘어 한 덩어리로 보였다.
   asp 에서 두 문장을 .cr-done-line 으로 감쌈(A-33). 같은 모양의 한 그룹으로 두고 사이만 8px 띄운다(상자·기호 없이 텍스트만).
   .nw : '승인 취소'(승인 전) 처럼 따옴표 말과 괄호가 줄바꿈으로 떨어지지 않게 묶음 */
#group_buying_area .cr-done-d .cr-done-line{display:block;}
#group_buying_area .cr-done-d .cr-done-line + .cr-done-line{margin-top:8px;}
#group_buying_area .cr-done-d .nw{white-space:nowrap;}
#group_buying_area .cr-share{display:flex;gap:10px;justify-content:center;margin-top:28px;flex-wrap:wrap;}
#group_buying_area .cr-share-btn{display:flex;flex-direction:column;align-items:center;gap:5px;width:88px;padding:14px 8px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:22px;cursor:pointer;}
#group_buying_area .cr-share-btn span{font-size:12px;font-weight:700;color:var(--ink);}
#group_buying_area .cr-done-cta{width:100%;margin-top:28px;height:52px;font-size:15px;}
/* --- ASP 이식 보정 --- */

#group_buying_area .cr-info-ic img{width:26px;height:26px;display:block;}
#group_buying_area .cr-cta{text-decoration:none;}
#group_buying_area .cr-thumb{overflow:hidden;}
#group_buying_area .cr-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
#group_buying_area .cr-login{max-width:560px;margin:50px auto;text-align:center;color:var(--muted);font-size:14px;line-height:1.7;}
#group_buying_area .cr-login a{display:inline-block;margin-top:12px;color:var(--primary);font-weight:700;}
#group_buying_area .cr-go{text-decoration:none;}
#group_buying_area .cr-back{text-decoration:none;}
/* ===== 개설 3단계 스타일 (기획 groupbuy_create.html inline style 이식) ===== */
/* ---- 기획에 대응 클래스가 없어 유지한 기존 컴포넌트(gb.css 에서 이식) ---- */
#group_buying_area .g3-opt{color:#777;font-weight:500;font-size:12px;}
/* 공동구매 상품 이미지 칸(#gbProdImgs)의 제목 옆 안내 · 아래 도움말 숨김 (2026-10-19 사용자 지시, PC · 모바일 공통). asp 는 그대로.
   다른 칸의 .g3-opt · .cr-help 는 그대로 둬야 해서 이 칸만 고른다. 제목 옆 안내는 :has 로 고름(이 파일 .cr-item:has 와 같은 방식) */
#group_buying_area .cr-field:has(> #gbProdImgs) .g3-opt,
#group_buying_area #gbProdImgs + .cr-help{display:none;}
#group_buying_area .g3-warn{background:#fff7e6;border:1px solid #f0c000;border-radius:10px;padding:11px 13px;font-size:12.5px;color:#9a6700;line-height:1.55;}
#group_buying_area .g3-imgmain{position:absolute;left:4px;bottom:4px;background:#222450;color:#fff;font-size:9px;font-weight:800;border-radius:5px;padding:1px 5px;pointer-events:none;}
#group_buying_area .g3-prodlist{display:flex;flex-direction:column;gap:10px;}
#group_buying_area .g3-prodthumb{width:52px;height:52px;border-radius:10px;overflow:hidden;background:#F0F1F6;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
#group_buying_area .g3-prodthumb img{width:100%;height:100%;object-fit:cover;display:block;}
#group_buying_area .g3-prodmeta{flex:1;min-width:0;}
#group_buying_area .g3-prodname{font-size:14px;font-weight:700;color:#111;line-height:1.4;word-break:keep-all;}
#group_buying_area .g3-prodopt{font-size:12px;color:#777;margin-top:3px;line-height:1.45;word-break:keep-all;}
#group_buying_area .g3-prodchg{flex-shrink:0;background:#f5f5f5;color:#222450;border:none;border-radius:8px;padding:9px 13px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
#group_buying_area .g3-prodchg:hover{background:#ebebeb;}
#group_buying_area .g3-prodchg.done{background:#F0F1F6;color:#6E707B;}
/* ---- ASP 이식 보정 ---- */
#group_buying_area .cr-imgslot img,#group_buying_area .g3-prodthumb img{width:100%;height:100%;object-fit:cover;display:block;}
#group_buying_area .cr-done-ic img{width:52px;height:52px;display:block;margin:0 auto;}
/* 개설 완료 아이콘 (2026-09-28 사용자 요청) : 이모지 PNG(emoji_party) 를 저작권 문제로 교체.
   처음엔 폭죽 선 아이콘으로 그렸으나 줄이 많아 복잡하고 선끼리 겹쳐 보였다. 완료 화면에서 가장 흔한 원 안 체크로 바꿈.
   asp 는 그대로 두고 <img> 를 숨긴다. 상자 자체를 연회색 원(--belief, 56px)으로, ::before 에 남색 체크(26px, 선 2.5px)를 mask 로 그린다.
   처음 남색 면 원(64px)은 아래 남색 버튼과 겹쳐 무겁다는 사용자 판단으로 연한 원으로 바꿈. */
#group_buying_area .cr-done-ic img{display:none;}
#group_buying_area .cr-done-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 20px;border-radius:50%;background:var(--belief);}
#group_buying_area .cr-done-ic::before{content:'';display:block;width:26px;height:26px;background-color:var(--primary);-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;-webkit-mask-image:var(--gb-svg-check);mask-image:var(--gb-svg-check);}
#group_buying_area .cr-share-btn img{width:22px;height:22px;display:block;margin:0 auto 4px;}
/* 개설 완료 공유 버튼 아이콘 (2026-09-28 사용자 요청) : 이모지 PNG(emoji_link · emoji_chat) 를 저작권 문제로 교체.
   asp 는 그대로 두고 <img> 를 숨긴 뒤 ::before 에 단색 선 아이콘(선 2px)을 mask 로 그린다. 버튼마다 id 로 구분.
   크기·아래 여백은 원래 이미지와 같은 22px · 4px(버튼 높이가 바뀌지 않게). 카카오톡은 브랜드 로고 대신 일반 말풍선. */
#group_buying_area #btnCopy.cr-share-btn img,#group_buying_area #btnKakao.cr-share-btn img,#group_buying_area #btnInsta.cr-share-btn img{display:none;}
#group_buying_area #btnCopy.cr-share-btn::before,#group_buying_area #btnKakao.cr-share-btn::before,#group_buying_area #btnInsta.cr-share-btn::before{content:'';display:block;width:22px;height:22px;margin:0 auto 4px;background-color:var(--primary);-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;}
#group_buying_area #btnCopy.cr-share-btn::before{-webkit-mask-image:var(--gb-svg-link);mask-image:var(--gb-svg-link);}
#group_buying_area #btnKakao.cr-share-btn::before{-webkit-mask-image:var(--gb-svg-chat);mask-image:var(--gb-svg-chat);}
#group_buying_area #btnInsta.cr-share-btn::before{-webkit-mask-image:var(--gb-svg-camera);mask-image:var(--gb-svg-camera);}	/* 인스타 버튼 (2026-10-15 추가분, emoji_camera 교체) */
#group_buying_area .cr-done-cta{text-decoration:none;}
#group_buying_area #gbToast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);background:rgba(14,14,16,.92);color:#fff;padding:11px 18px;border-radius:9999px;font-size:13px;z-index:900;display:none;}

/* ---- 링크(a)를 버튼 모양으로 쓰는 곳 보정 ----
   a 는 인라인 요소라서 width/height 가 먹지 않는다(노란 글자만 보이던 원인).
   버튼과 같은 박스로 보이게 flex 로 중앙 정렬한다. */
#group_buying_area a.cr-cta,#group_buying_area a.cr-go,#group_buying_area a.cr-back,#group_buying_area a.cr-done-cta{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;text-decoration:none;}
#group_buying_area a.cr-cta,#group_buying_area a.cr-done-cta{display:flex;width:100%;}


/* ---- 미리보기(cr-pv-*) 실사진 대응 ----
   기획 원본은 썸네일 자리에 이모지를 넣는 전제라 img 규칙이 없었다.
   실제 화면은 <img> 를 넣기 때문에 원본 크기(예: 1024px)로 펼쳐져 레이아웃이 밀렸다. */
#group_buying_area .cr-pv-hero{overflow:hidden;}
#group_buying_area .cr-pv-hero img{width:100%;height:100%;object-fit:cover;display:block;}
#group_buying_area .cr-pv-th{overflow:hidden;flex-shrink:0;}
#group_buying_area .cr-pv-th img{width:100%;height:100%;object-fit:cover;display:block;}
#group_buying_area .cr-pv-prod .th{overflow:hidden;}
#group_buying_area .cr-pv-prod .th img{width:100%;height:100%;object-fit:cover;display:block;}

/* 그리드 칸(1fr)이 긴 내용에 밀려 넘치지 않도록 최소폭 해제 */
#group_buying_area .cr-pv-left{min-width:0;}
#group_buying_area .cr-pv-prod .nm{flex:1;min-width:0;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere;}
#group_buying_area .cr-pv-popt{display:block;margin-top:3px;font-size:12px;font-weight:500;color:var(--muted);line-height:1.45;}

/* 개설 버튼이 잠긴 이유(남은 항목) 안내 - 2026-08-27 */
#group_buying_area .cr-why{margin:14px 0 -6px;text-align:right;font-size:12.5px;font-weight:700;color:var(--attention);min-height:16px;}
/* 개설 1단계 안내 아이콘 (2026-09-28 사용자 요청) : 이모지 PNG 를 저작권 문제로 교체.
   asp 는 그대로 두고 <img> 를 숨긴 뒤 ::before 에 단색 선 아이콘(24px, 선 2px)을 mask 로 그린다.
   행에 구분 클래스가 없어 순서(nth-child)로 잡는다. 1 장바구니 · 2 할인 그래프 · 3 카드. 순서가 바뀌면 여기도 바꿀 것. */
#group_buying_area .cr-info .cr-info-ic img{display:none;}
#group_buying_area .cr-info .cr-info-ic::before{content:'';display:block;width:24px;height:24px;background-color:var(--primary);-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;}
#group_buying_area .cr-info .cr-info-row:nth-child(1) .cr-info-ic::before{-webkit-mask-image:var(--gb-svg-cart);mask-image:var(--gb-svg-cart);}
#group_buying_area .cr-info .cr-info-row:nth-child(2) .cr-info-ic::before{-webkit-mask-image:var(--gb-svg-chart);mask-image:var(--gb-svg-chart);}
#group_buying_area .cr-info .cr-info-row:nth-child(3) .cr-info-ic::before{-webkit-mask-image:var(--gb-svg-card);mask-image:var(--gb-svg-card);}
/* 모바일 개설 소개(step1) 정리 (2026-10-15 사용자 지시 : 타이틀 크고 여백 어색). 카드 아이콘 배경 칸 없이 그림만 40px(칸 50px, 사용자 육안 결정) · 카드 제목 15 -> 14px. 여백 4px 단위 */
@media (max-width:599px){
/* 단계 타이틀 모바일 20px 통일 : 1단계 .cr-h · 2·3단계 .cr-h2 · 완료 .cr-done-t (2026-10-15 사용자 지시 : 같은 레벨 같은 크기, 18 -> 20). 위 여백도 24px 로 같게 */
#group_buying_area .cr-h{margin-top:40px;font-size:20px;text-align:start;}
#group_buying_area .cr-sub{text-align:start;}	/* 모바일 소개 타이틀 · 설명 왼쪽 정렬 (2026-10-15 사용자 지시) */
#group_buying_area .cr-h2{margin-top:40px;font-size:20px;}
#group_buying_area .cr-done-t{font-size:20px;}
#group_buying_area .cr-info{margin-top:40px;gap:10px;}
#group_buying_area .cr-info-row{gap:16px;padding:16px 20px;border-radius:6px;}
#group_buying_area .cr-info .cr-info-ic{width:50px;height:50px;border-radius:0;background:none;}
#group_buying_area .cr-info .cr-info-ic::before{width:40px;height:40px;}
#group_buying_area .cr-info-t{font-size:14px;}
#group_buying_area .cr-cta{margin-top:24px;font-size:15px;}
#group_buying_area .cr-note{margin-top:24px;}	/* 13 -> 24px (2026-10-15 사용자 지시) */
}
/* ===== 공동구매 가능 품목 칩 + 안내 팝업 (2026-09-28 추가) =====
   값은 시안(01_기획/0917/공동구매.html) 그대로. 시안과 다르게 둔 것만 적는다.
   - inset 대신 top/right/bottom/left : 구형 앱 웹뷰(iOS 14.4 이하)가 inset 을 모른다
   - box-sizing:border-box : 팝업 상자가 폭 100% + 안쪽 여백으로 화면 밖으로 넘치지 않게
   - 버튼 font-family:inherit : 모바일에서 버튼이 기본 글꼴로 떨어지지 않게(한글 폰트를 지정하는 것 아님)
   - 시안의 인라인 style(margin-bottom:6px / margin-top:16px) 을 .cr-elig-lead-cats / .cr-modal-btns 규칙으로 옮김 */
#group_buying_area .cr-eligrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;}
#group_buying_area .cr-chip{font-size:12px;font-weight:700;color:var(--trendy);background:#f5f5f5;border-radius:var(--r-pill);padding:4px 11px;white-space:nowrap;}
#group_buying_area .cr-eligact{margin-top:10px;}
#group_buying_area .cr-eligbtn{display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;border:1px solid var(--border);background:var(--clear);border-radius:6px;padding:3px 9px;font-family:inherit;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;line-height:1.4;}	/* 작게 · 무채색 (2026-10-15 사용자 지시 : 40px · 남색 굵은 글자가 크고 튐) */
#group_buying_area .cr-eligbtn .ic{display:inline-block;width:14px;height:14px;font-size:0;line-height:0;flex-shrink:0;background-color:currentColor;-webkit-mask:var(--gb-svg-alert-circle) center/contain no-repeat;mask:var(--gb-svg-alert-circle) center/contain no-repeat;}	/* asp 의 글자 기호(원 안 i)를 숨기고 원 안 느낌표 SVG 로 */
#group_buying_area .cr-eligbtn:hover{border-color:var(--hint);background:var(--clear);color:var(--ink);}
#group_buying_area .cr-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;}
#group_buying_area .cr-modal[hidden]{display:none;}
#group_buying_area .cr-modal-dim{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(28,28,34,.55);}
/* 3단 구조 (2026-09-28 사용자 요청) : 머리(제목·×) 고정 / 본문만 스크롤 / 바닥(닫기) 고정.
   스크롤이 상자에 걸려 있으면 윈도우 크롬이 네모난 스크롤바를 상자 끝에 그려 오른쪽 모서리 라운드를 덮었다.
   스크롤을 .cr-modal-body 로 옮기고 상자는 overflow:hidden 으로 둥근 모서리를 지킨다.
   × 는 테두리 상자를 없애고 아이콘만 둔다(누르는 영역은 40px). 글자 &times; 는 글꼴마다 크기가 달라 mask 아이콘으로 그린다.
   닫기 버튼은 PC(840px 이상)에서 숨긴다. × 와 같은 일을 해서 둘 다 있으면 중복. 모바일은 엄지로 누르기 쉬워 둔다. */
#group_buying_area .cr-modal-box{position:relative;box-sizing:border-box;display:flex;flex-direction:column;background:var(--clear);border-radius:16px;max-width:520px;width:100%;max-height:88vh;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,.45);text-align:left;word-break:keep-all;overflow-wrap:break-word;}
#group_buying_area .cr-modal-t{font-size:17px;font-weight:800;color:var(--ink);margin:0 0 10px;line-height:1.4;}
#group_buying_area .cr-elig-head{flex-shrink:0;display:flex;align-items:center;gap:10px;margin:0;padding:16px 14px 10px 24px;}
#group_buying_area .cr-elig-head .cr-modal-t{flex:1;margin:0;}
#group_buying_area .cr-elig-x{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--muted);font-size:0;line-height:0;cursor:pointer;transition:background .2s ease,color .2s ease;}
#group_buying_area .cr-elig-x::before{content:'';display:block;width:20px;height:20px;background-color:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;-webkit-mask-image:var(--gb-svg-close);mask-image:var(--gb-svg-close);}
#group_buying_area .cr-elig-x:hover{background:var(--belief);color:var(--ink);}
#group_buying_area .cr-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 24px 22px;}
#group_buying_area .cr-elig-lead{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.65;}
#group_buying_area .cr-elig-lead b{color:var(--ink);}
#group_buying_area .cr-elig-lead.cr-elig-lead-cats{margin-bottom:6px;}
#group_buying_area .cr-elig-why{margin:0 0 18px;padding:14px 16px;border-radius:10px;background:var(--belief);}
#group_buying_area .cr-elig-why dt{font-size:12.5px;font-weight:800;color:var(--trendy);}
#group_buying_area .cr-elig-why dd{margin:2px 0 9px;font-size:12.5px;color:var(--muted);line-height:1.6;}
#group_buying_area .cr-elig-why dd:last-child{margin-bottom:0;}
#group_buying_area .cr-elig-cats{border-top:1px solid var(--border);}
#group_buying_area .cr-elig-cat{display:block;min-height:48px;box-sizing:border-box;padding:11px 4px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;}
#group_buying_area .cr-elig-cat:hover{background:var(--belief);}
#group_buying_area .cr-elig-cat:last-child{border-bottom:0;}	/* 마지막 품목 아래 선 삭제 (2026-10-19 사용자 지시) */
#group_buying_area .cr-elig-cat .nm{font-size:13.5px;font-weight:800;color:var(--trendy);}
#group_buying_area .cr-elig-cat .nm .ar{font-size:11px;margin-left:3px;}
#group_buying_area .cr-elig-cat .it{display:block;margin-top:3px;font-size:12px;color:var(--muted);line-height:1.6;}
#group_buying_area .cr-elig-foot{margin:14px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6;}
#group_buying_area .cr-elig-foot a{font-weight:700;}
#group_buying_area .cr-elig-foot{display:none;}	/* 품목 팝업 아래 "찾는 상품이 없나요? 퍼블로그 메인에서 전체 상품 보기" 숨김 (2026-10-19 사용자 지시, PC · 모바일 공통). 다시 보이려면 이 줄만 삭제 */
#group_buying_area .cr-modal-btns{flex-shrink:0;display:flex;gap:9px;flex-wrap:wrap;margin:0;padding:14px 24px 20px;border-top:1px solid var(--border);}
@media (min-width:840px){#group_buying_area .cr-modal-btns{display:none;}}
@media (max-width:599px){#group_buying_area .cr-modal-box{max-height:75vh;max-height:75dvh;}}	/* [모바일] 팝업 높이 88vh -> 실제 보이는 화면의 75% (2026-10-15 사용자 지시 : 위아래가 잘림). vh 는 주소창이 숨은 최대 높이 기준이라 평소엔 넘침 → dvh(보이는 높이) 사용, 못 읽는 브라우저는 앞의 75vh */
/* [모바일] 품목 팝업 카테고리 : 링크 이동은 PC(600px 이상)만 (2026-10-15 사용자 지시). 모바일 · 앱은 누를 수 없게 하고 화살표 · "누르면 이동" 안내 숨김. asp 링크는 그대로 */
@media (max-width:599px){
#group_buying_area .cr-elig-cat{pointer-events:none;cursor:default;}
#group_buying_area .cr-elig-cat .nm .ar{display:none;}
#group_buying_area .cr-elig-lead-cats b{display:none;}
}
/* PC 넓은 팝업 (2026-09-28 사용자 요청) : 스크롤 없이 한 화면에 보이게. 모바일(839px 이하)은 세로형 그대로.
   폭 520 -> 880px. 이 팝업에만 걸리게 #crEligModal 로 한정.
   바깥 여백 20 -> 40px, 높이 제한 88vh -> 화면 - 80px : 창이 낮으면 위아래가 창 끝에 붙었다. 제목 줄 위 16 -> 22px (좌우 24px 와 맞춤)
   같은 날 2차 정리(가독성) : 칸 높이가 들쭉날쭉하고 글자가 전부 12~13px 회색이라 위계가 없었다.
   - 글자 4단계 : 팝업 제목 17 / 구역 제목 14 굵게 --ink / 본문 13 --body / 보조 12 --hint
   - 조건 4개 : 가로 4칸(dt 1행, dd 2행). 칸 사이 세로선. 설명은 --muted 12px (체크 아이콘은 거슬린다는 사용자 판단으로 뺌)
   - 카테고리 : 2열 격자는 아크릴(14개)만 길어 옆 칸이 비었다. 1열 표로 바꿔 이름 110px 고정 | 품목 | 끝에 화살표 */
@media (min-width:840px){
#group_buying_area #crEligModal{padding:40px;}
#group_buying_area #crEligModal .cr-modal-box{max-width:880px;max-height:calc(100vh - 80px);}
#group_buying_area #crEligModal .cr-elig-head{padding-top:22px;}
#group_buying_area #crEligModal .cr-elig-lead{font-size:13px;color:var(--body);}
#group_buying_area #crEligModal .cr-elig-why{display:grid;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:1fr;column-gap:0;margin-bottom:22px;padding:16px 0;}
#group_buying_area #crEligModal .cr-elig-why dt,#group_buying_area #crEligModal .cr-elig-why dd{padding:0 18px;border-left:1px solid var(--border);}
#group_buying_area #crEligModal .cr-elig-why dt:first-of-type,#group_buying_area #crEligModal .cr-elig-why dd:first-of-type{border-left:none;}
#group_buying_area #crEligModal .cr-elig-why dt{font-size:13.5px;color:var(--ink);}
#group_buying_area #crEligModal .cr-elig-why dd{margin:0;padding-top:4px;font-size:12px;color:var(--muted);line-height:1.6;}
#group_buying_area #crEligModal .cr-elig-lead.cr-elig-lead-cats{margin-bottom:8px;font-size:12px;color:var(--hint);}
#group_buying_area #crEligModal .cr-elig-lead-cats b{margin-right:4px;font-size:14px;font-weight:800;color:var(--ink);}
#group_buying_area #crEligModal .cr-elig-cat{position:relative;display:flex;align-items:baseline;gap:16px;min-height:0;padding:12px 36px 12px 8px;}
#group_buying_area #crEligModal .cr-elig-cat .nm{flex:0 0 110px;font-size:13px;}
#group_buying_area #crEligModal .cr-elig-cat .nm .ar{position:absolute;right:12px;top:50%;transform:translateY(-50%);margin:0;font-size:16px;color:var(--hint);transition:color .2s ease;}
#group_buying_area #crEligModal .cr-elig-cat:hover .nm .ar{color:var(--trendy);}
#group_buying_area #crEligModal .cr-elig-cat .it{flex:1;min-width:0;margin-top:0;font-size:12px;color:var(--body);line-height:1.65;}
}
#group_buying_area .cr-modal-b{flex:1 1 160px;border:1px solid var(--border);background:var(--clear);color:var(--ink);border-radius:9px;padding:12px 16px;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;}
#group_buying_area .cr-modal-b:hover{border-color:var(--trendy);color:var(--trendy);}
#group_buying_area .cr-modal-b.primary{background:var(--trendy);border-color:var(--trendy);color:var(--clear);}
#group_buying_area .cr-modal-b.primary:hover{opacity:.9;color:var(--clear);}
/* ===== 공동구매로 열 수 없는 상품 토글 (2026-09-28 추가) =====
   값은 시안(01_기획/0917/공동구매.html .cr-acc) 그대로. 시안과 다르게 둔 것만 적는다.
   - 펼침 높이 : 시안은 max-height:1400px 고정. 상품이 많으면 잘려서 스크립트가 내용 높이만큼 연다
   - --ease 대신 ease : 이 파일 다른 전환과 맞춤
   - 상자 안 카드 흰 배경 : 불가 카드 배경(--belief)이 상자 배경과 같아 카드 경계가 사라졌다 */
#group_buying_area .cr-acc{margin-top:16px;border:0;border-radius:0;overflow:hidden;background:#f7f7f7;}	/* 각지게 · 무채색 (2026-10-15 사용자 지시 · 참고 캡처). #f7f7f7 · #efefef 는 이 화면 띠 · 선과 같은 값 */
#group_buying_area .cr-acc-head{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:14px 16px;border:none;background:#efefef;cursor:pointer;text-align:left;font:inherit;color:inherit;}
#group_buying_area .cr-acc-head:hover{background:#ededed;}
#group_buying_area .cr-acc-caret{flex-shrink:0;font-size:9px;color:var(--muted);transition:transform .2s ease;}
#group_buying_area .cr-acc-head[aria-expanded="true"] .cr-acc-caret{transform:rotate(90deg);}
#group_buying_area .cr-acc-t{font-size:13.5px;font-weight:500;color:var(--ink);}
#group_buying_area .cr-acc-s{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--muted);}
#group_buying_area .cr-acc-panel{max-height:0;overflow:hidden;transition:max-height .25s ease;}
#group_buying_area .cr-acc-inner{padding:0;display:flex;flex-direction:column;gap:0;}
#group_buying_area .cr-acc .cr-item.off{background:transparent;border:0;border-top:1px solid #e3e3e3;border-radius:0;padding:16px;}	/* 상자 안 카드도 목록형 : 테두리 대신 줄 위 선 */
#group_buying_area .cr-acc .cr-badge-no{background:#efefef;}	/* 상자 바탕(#f7f7f7)과 같아 안 보여서 한 단계 진하게 */
#group_buying_area .cr-item.off .cr-price-row{display:none;}	/* 열 수 없는 상품은 가격 자리에 항상 "공동구매로 열 수 없어요" 만 나옴(asp priceTxt 고정) → 위 사유 라벨과 겹쳐 숨김 (2026-10-15 사용자 지시) */
#group_buying_area .cr-item.off{opacity:1;}
#group_buying_area .cr-item.off .cr-thumb,#group_buying_area .cr-item.off .cr-iinfo{opacity:.6;}	/* 흐리게 처리는 썸네일 · 상품 정보에만. 카드 전체에 걸면 사유 라벨까지 흐려져 안 읽힘 (2026-10-15 사용자 지시) */
/* 열 수 없는 상품 카드 배치 (2026-10-15 사용자 지시 : 사유 배지가 왼쪽 자리를 혼자 크게 차지). PC · 모바일 공통
   asp 순서(배지 → 썸네일 → 정보)는 그대로 두고 격자로 자리만 바꿈 : 썸네일 왼쪽 · 정보 · 그 아래 사유 라벨 (2026-10-15 순서 변경 : 라벨을 정보 아래로) */
#group_buying_area .cr-item.off{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:13px;row-gap:6px;align-items:start;}
#group_buying_area .cr-item.off .cr-thumb{grid-column:1;grid-row:1 / span 2;}
#group_buying_area .cr-item.off .cr-badge-no{grid-column:2;grid-row:2;justify-self:start;}
#group_buying_area .cr-item.off .cr-iinfo{grid-column:2;grid-row:1;}

/* ============================================================
   대표 이미지 규격 안내 · 업로드 검사 결과 · 카드 미리보기 · 못 올린 사진 안내창
   2026-09-29 - 시안 12 개선파일 20260928 / groupbuy_create.html 이식
   ============================================================ */

/* 규격 딱지 2단 : 필수(못 올리는 조건) / 권장(예쁘게 나오는 조건)을 줄로 가르고 색으로 등급을 준다 */
#group_buying_area .cr-speclist{display:flex;flex-direction:column;gap:4px;margin-top:16px;padding:10px 14px;background:#f7f7f7;border-radius:6px;}	/* 사진 규격 안내 상자 : 연회색 면으로 묶음 (2026-10-15 사용자 결정. 노랑 = 경고 g3-warn, 빨강 = 오류 문구와 구분) */
/* 사진 규격 안내 (2026-10-15 사용자 지시 : 테두리 알약 모양이라 누르는 버튼처럼 보이고 주변보다 튐) → 버튼 모양을 빼고 안내 글로
   필수 줄은 진한 글자로 읽히게, 권장 줄은 회색. 항목 사이는 가운뎃점. 마크업 그대로 */
#group_buying_area .cr-specrow{display:flex;align-items:baseline;gap:0;flex-wrap:wrap;font-size:12px;line-height:1.6;}
#group_buying_area .cr-specrow .lb{flex-shrink:0;min-width:0;margin-right:8px;font-size:12px;font-weight:600;color:var(--muted);}
#group_buying_area .cr-specchip{font-size:12px;font-weight:400;color:var(--muted);background:none;border:0;border-radius:0;padding:0;white-space:nowrap;line-height:1.6;}
#group_buying_area .cr-specchip + .cr-specchip::before{content:'\00B7';margin:0 6px;color:var(--hint);}
#group_buying_area .cr-specrow.req .lb{color:var(--primary);}
#group_buying_area .cr-specrow.req .cr-specchip{color:var(--ink);}

/* 슬롯의 크게 보기 버튼 */
#group_buying_area .cr-imgzoom{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:7px;background:rgba(28,28,34,.82);color:#fff;border:none;cursor:zoom-in;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;z-index:2;}
#group_buying_area .cr-imgzoom[hidden]{display:none;}
#group_buying_area .cr-imgzoom:hover{background:var(--trendy);}
#group_buying_area .cr-imgzoom svg{width:12px;height:12px;display:block;}

/* 업로드 직후 검사 결과 한 줄 */
#group_buying_area .cr-imgmsg{margin-top:40px;padding:20px 24px;border-radius:6px;font-size:13px;line-height:1.6;}	/* 안 여백 20 24 · 라운드 6 (2026-10-16 사용자 지시). 상태별(.ok .warn .block .cut) 규칙은 색만 */
#group_buying_area .cr-imgmsg[hidden]{display:none;}
#group_buying_area .cr-imgmsg.ok{background:rgba(30,158,99,.1);color:#166b4b;}
#group_buying_area .cr-imgmsg.warn{background:rgba(255,132,0,.12);color:#8a5200;}
#group_buying_area .cr-imgmsg.block{background:rgba(229,54,44,.1);color:#a32a22;}
#group_buying_area .cr-imgmsg.cut{background:rgba(192,57,43,.09);color:#a32a22;}
#group_buying_area .cr-imgmsg .det{display:block;margin-top:6px;font-size:12.5px;line-height:1.65;opacity:.92;}
#group_buying_area .cr-imgmsg b{font-weight:800;}
#group_buying_area .cr-imgmsg .spec{display:block;margin-top:5px;font-size:12px;opacity:.85;}
#group_buying_area .cr-imgmsg .mk{display:inline-block;width:15px;height:15px;margin-right:4px;vertical-align:-2px;}

/* 목록 카드 미리보기 : 왼쪽 = 실제 모습(cover) / 오른쪽 = 원본 전체 + 잘리는 띠(빨강) */
#group_buying_area .cr-cardpv{margin-top:12px;}
#group_buying_area .cr-cardpv[hidden]{display:none;}
#group_buying_area .cr-cardpv-row{display:flex;gap:14px;flex-wrap:wrap;}
#group_buying_area .cr-cardpv-col{flex:1 1 220px;min-width:0;max-width:260px;}
#group_buying_area .cr-cardpv-thumb{width:100%;padding:0;font:inherit;color:inherit;-webkit-appearance:none;appearance:none;aspect-ratio:1/1;overflow:hidden;position:relative;border-radius:var(--r-card,12px);border:1px solid var(--border);background:var(--belief);display:flex;align-items:center;justify-content:center;cursor:zoom-in;}
#group_buying_area .cr-cardpv-thumb:hover{border-color:var(--trendy);}
#group_buying_area .cr-cardpv-thumb img{width:100%;height:100%;display:block;}
#group_buying_area .cr-cardpv-thumb .cr-photo{object-fit:cover;object-position:center;}
#group_buying_area .cr-cardpv-thumb .cr-photo-fit{object-fit:contain;object-position:center;}
#group_buying_area .cr-cardpv-cap{font-size:12px;color:var(--muted);margin:7px 0 0;line-height:1.55;}
#group_buying_area .cr-cardpv-cap b{color:var(--ink);font-weight:800;}
#group_buying_area .cr-cardpv-cap b.bad{color:#c0392b;}
#group_buying_area .cr-cardpv-cap .zoomhint{color:var(--trendy);font-weight:700;}
#group_buying_area .cr-cut{position:absolute;background:rgba(192,57,43,.42);border:1px solid rgba(192,57,43,.7);box-sizing:border-box;pointer-events:none;}
/* 사진 검사 결과(#gbImgMsg) + 카드 미리보기(#gbCardPv)를 한 상자로 (2026-10-16 사용자 지시 : 주의 내용인데 아래 입력 항목과 구분이 안 됨)
   asp 는 두 덩어리가 나란히 있음 → 미리보기에 테두리 상자를 주고, 바로 위에 검사 결과가 보이면 둘을 이어 붙임(위 둥근 모서리 · 아래 둥근 모서리)
   검사 결과의 상태 색(초록 · 주황 · 빨강)은 그대로. 왼쪽 굵은 빨간 줄은 상자와 겹쳐 빼고 면 색으로만 */
#group_buying_area .cr-cardpv:not([hidden]){padding:40px;border:1px solid #e3e3e3;border-radius:6px;background:#fff;}
#group_buying_area .cr-imgmsg:not([hidden]) + .cr-cardpv:not([hidden]){margin-top:0;border-top:0;border-radius:0 0 6px 6px;}
#group_buying_area .cr-imgmsg:not([hidden]):has(+ .cr-cardpv:not([hidden])){border:1px solid #e3e3e3;border-bottom:0;border-radius:6px 6px 0 0;}
/* 카드 미리보기 안 배치 (2026-10-16 사용자 지시 : 왼쪽에 몰리고 오른쪽이 비어 어색함)
   두 칸을 같은 폭으로 상자 가운데 정렬 (PC 220px · 모바일 반반). 사진 칸 라운드 6 · 설명 가운데 · 링크 글자 무채색 · "눌러서 크게 보기" 줄 안 끊김 */
#group_buying_area .cr-cardpv-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,220px));justify-content:center;gap:24px;}
#group_buying_area .cr-cardpv-col{max-width:none;min-width:0;}
#group_buying_area .cr-cardpv-thumb{border-radius:6px;}
#group_buying_area .cr-cardpv-cap{margin-top:8px;text-align:center;word-break:keep-all;overflow-wrap:break-word;text-wrap:balance;}	/* 줄바꿈은 띄어쓰기 단위 · 두 줄 길이 비슷하게 (2026-10-16 사용자 지시 : "위아/래" 처럼 단어 중간에서 끊김) */
#group_buying_area .cr-cardpv-cap b{font-weight:600;}
#group_buying_area .cr-cardpv-cap .zoomhint{display:none;}	/* 안내 글은 숨기고 사진 위 돋보기 표시로 (2026-10-16 사용자 지시 : 글로 두면 따로 줄이든 이어 붙이든 버튼처럼 보임) */
#group_buying_area .cr-cardpv-thumb::after{content:"";position:absolute;right:6px;bottom:6px;z-index:2;width:22px;height:22px;border-radius:4px;background:rgba(17,17,17,.55) var(--gb-svg-zoom-white) center/14px no-repeat;pointer-events:none;}	/* 사진 오른쪽 아래 확대 표시. 누르는 곳은 사진(버튼) 자체 */
@media (max-width:599px){#group_buying_area .cr-cardpv-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}#group_buying_area .cr-cardpv:not([hidden]){padding:20px;}}

/* 못 올린 사진 안내창 - 파일별로 "왜 안 됐는지" 를 보여 준다.
   바닥 버튼은 .cr-modal-btns 를 쓰지 않는다 - 그 규칙은 PC(840px 이상)에서 숨겨져 있다. */
#group_buying_area .cr-rej-box{max-width:480px;}
#group_buying_area .cr-rej-head{padding:22px 24px 4px;}
#group_buying_area .cr-rej-head .cr-modal-t{margin:0;}
#group_buying_area .cr-rej-sum{margin:0 0 12px;font-size:13px;line-height:1.7;color:var(--body);}
#group_buying_area .cr-rej-sum b{color:var(--ink);}
#group_buying_area .cr-rej-list{margin:0 0 4px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
#group_buying_area .cr-rej-list li{display:flex;gap:9px;align-items:flex-start;background:var(--belief);border-radius:9px;padding:10px 12px;}
#group_buying_area .cr-rej-list .ic{flex:none;width:15px;height:15px;margin-top:3px;color:#c0392b;}
#group_buying_area .cr-rej-list .ic.room{color:var(--muted);}
#group_buying_area .cr-rej-list .nm{font-size:12.5px;font-weight:700;color:var(--ink);word-break:break-all;line-height:1.5;}
#group_buying_area .cr-rej-list .why{display:block;margin-top:2px;font-size:12px;font-weight:500;color:#c0392b;line-height:1.55;}
#group_buying_area .cr-rej-tip{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.65;background:var(--clear);border:1px solid var(--border);border-radius:9px;padding:10px 12px;}
#group_buying_area .cr-rej-tip[hidden]{display:none;}
#group_buying_area .cr-rej-tip b{color:var(--ink);}
#group_buying_area .cr-rej-foot{flex-shrink:0;padding:14px 24px 20px;}
#group_buying_area .cr-rej-foot .cr-modal-b{width:100%;}

/* 사진 크게 보기 - 원본 비율 그대로 */
#group_buying_area .cr-zoom{position:fixed;top:0;right:0;bottom:0;left:0;z-index:950;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;}
#group_buying_area .cr-zoom[hidden]{display:none;}
#group_buying_area .cr-zoom-dim{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(14,14,16,.78);}
#group_buying_area .cr-zoom-box{position:relative;max-width:min(92vw,960px);max-height:88vh;}
#group_buying_area .cr-zoom-box img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:10px;background:#fff;}
#group_buying_area .cr-zoom-cap{margin-top:8px;font-size:12px;color:#e6e6ee;text-align:center;}
#group_buying_area .cr-zoom-x{position:absolute;top:-14px;right:-14px;width:32px;height:32px;border-radius:50%;border:none;background:#fff;color:var(--ink);font-size:16px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3);}

/* ============================================================
   개설 직전 대표 이미지 비율 확인창 (2026-09-29, 시안 crRatioModal 이식)
   바닥 버튼은 .cr-modal-btns 를 쓰지 않는다 - PC(840px 이상)에서 숨겨진다.
   ============================================================ */
#group_buying_area .cr-ratio-box{max-width:520px;}
#group_buying_area .cr-ratio-head{padding:22px 24px 4px;}
#group_buying_area .cr-ratio-head .cr-modal-t{margin:0;}
#group_buying_area .cr-modal-d{font-size:13.5px;line-height:1.7;color:var(--body);margin:0 0 14px;}
#group_buying_area .cr-modal-d b{color:var(--ink);font-weight:800;}
#group_buying_area .cr-modal-d .bad{color:#c0392b;font-weight:800;}
/* 사진 확인 팝업 본문 줄 나눔 (2026-10-16 사용자 지시 : 한 문단이라 읽기 힘듦). asp 스크립트가 줄마다 span.ln 을 넣은 마크업 기준
   핵심 한 줄(.lead) 진하게 · 항목 줄은 가운뎃점 + 회색 · 장수(.sub)도 항목 줄과 같은 모양(2026-10-16). .ln 이 없는 옛 asp 에서는 아무것도 안 바뀜 */
#group_buying_area .cr-modal-d{word-break:keep-all;overflow-wrap:break-word;}
#group_buying_area .cr-modal-d .ln{display:block;}
#group_buying_area .cr-modal-d .ln.lead{margin-bottom:10px;font-size:14px;font-weight:600;line-height:1.6;color:var(--ink);}
#group_buying_area .cr-modal-d .ln:not(.lead){position:relative;padding-left:12px;font-size:13px;line-height:1.65;color:var(--muted);}
#group_buying_area .cr-modal-d .ln:not(.lead)::before{content:'\00B7';position:absolute;left:2px;top:0;color:var(--hint);}
#group_buying_area .cr-modal-d .ln:not(.lead) + .ln:not(.lead){margin-top:3px;}
#group_buying_area .cr-modal-d .ln.lead .bad{display:block;}	/* 잘리는 정도(빨강)는 핵심 줄 안에서 다음 줄로 (2026-10-16 사용자 지시) */
#group_buying_area .cr-modal-d .ln .bad{font-weight:600;}
#group_buying_area .cr-modal-pv{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
#group_buying_area .cr-modal-pv .col{flex:1 1 180px;min-width:0;max-width:210px;}
#group_buying_area .cr-modal-pv .box{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:10px;border:1px solid var(--border);background:var(--belief);}
#group_buying_area .cr-modal-pv img{width:100%;height:100%;display:block;}
#group_buying_area .cr-modal-pv .cover img{object-fit:cover;object-position:center;}
#group_buying_area .cr-modal-pv .fit img{object-fit:contain;object-position:center;}
#group_buying_area .cr-modal-pv .cap{font-size:11.5px;color:var(--muted);margin:6px 0 0;line-height:1.5;}
#group_buying_area .cr-modal-warn{font-size:12.5px;color:#8a5200;background:rgba(255,132,0,.12);border-radius:8px;padding:9px 12px;margin:0;line-height:1.6;}
#group_buying_area .cr-modal-warn b{color:#8a5200;}
/* 팝업 경고 : 항목 목록 (2026-10-16 사용자 지시 : 문구 추가 · 목록으로). asp 가 <ul class="cr-modal-warn"><li> 로 바뀐 마크업 기준
   항목 앞 가운뎃점 · 항목 사이 4px. 옛 <p> 마크업은 li 가 없어 그대로 */
#group_buying_area ul.cr-modal-warn{list-style:none;margin:0;}
#group_buying_area .cr-modal-warn li{position:relative;padding-left:10px;word-break:keep-all;overflow-wrap:break-word;}
#group_buying_area .cr-modal-warn li::before{content:'\00B7';position:absolute;left:0;top:0;font-weight:700;}
#group_buying_area .cr-modal-warn li + li{margin-top:4px;}
#group_buying_area .cr-ratio-foot{flex-shrink:0;display:flex;gap:9px;flex-wrap:wrap;padding:14px 24px 20px;}
/* [모바일] 사진 확인 팝업 높이 줄이기 (2026-10-16 : 내용 846px 중 323px 만 보여 미리보기 · 경고가 스크롤 아래로 숨음)
   미리보기 두 장 · 버튼 두 개를 세로로 쌓지 않고 나란히, 안 여백 조금 줄임 */
@media (max-width:599px){
#group_buying_area .cr-ratio-head{padding:18px 20px 4px;}
#group_buying_area .cr-ratio-box .cr-modal-body{padding:4px 20px 16px;}
#group_buying_area .cr-modal-pv{flex-wrap:nowrap;gap:8px;margin-bottom:12px;}
#group_buying_area .cr-modal-pv .col{flex:1 1 0;max-width:none;}
#group_buying_area .cr-ratio-foot{flex-wrap:nowrap;gap:8px;padding:12px 20px 16px;}
#group_buying_area .cr-ratio-foot .cr-modal-b{flex:1 1 0;min-width:0;padding:12px 8px;font-size:13px;}
}
/* 사진 확인 팝업 미리보기 : 작게 · 가운데 · 설명 가운데 (2026-10-16 사용자 지시). 사진은 1장(작기만 함) 또는 2장(잘림) → 몇 장이든 가운데
   PC 170px · 모바일 140px 칸. 앞의 flex 규칙 대신 격자 */
#group_buying_area .cr-modal-pv{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,170px));justify-content:center;gap:16px;}
#group_buying_area .cr-modal-pv .col{max-width:none;min-width:0;}
#group_buying_area .cr-modal-pv .cap{text-align:center;word-break:keep-all;}
@media (max-width:599px){#group_buying_area .cr-modal-pv{grid-template-columns:repeat(auto-fit,minmax(0,140px));gap:8px;}}

/* ============================================================
   개설 완료 - 공유 버튼 (2026-09-29, 기획 12 개선파일 20260928)
   심사 중에는 카카오톡 · 인스타를 막는다 - 회색 처리, 마우스를 올리면 금지 커서(not-allowed).
   커서는 요소 위에 있을 때만 적용되므로 베어나면 기본 커서로 자동으로 돌아간다.
   ============================================================ */
#group_buying_area .cr-share-btn{font-family:inherit;color:var(--ink);transition:border-color .15s ease,color .15s ease;}
#group_buying_area .cr-share-btn:not(:disabled):hover{border-color:var(--trendy);}
#group_buying_area .cr-share-btn:disabled{opacity:.5;cursor:not-allowed;}
#group_buying_area .cr-share-btn:disabled img{filter:grayscale(1);}
#group_buying_area .cr-share-btn:disabled .lb{color:var(--muted);}
#group_buying_area .cr-share-btn .cr-share-cap{font-size:10.5px;font-weight:600;color:var(--hint);}
#group_buying_area .cr-share-btn.is-copied{border-color:var(--trendy);color:var(--trendy);}
#group_buying_area .cr-share-btn.is-copied .lb{color:var(--trendy);}
#group_buying_area .cr-share-btn svg{display:block;margin:0 auto 4px;}

/* 복사한 링크 상자 */
#group_buying_area .cr-sharebox{margin-top:16px;background:var(--belief);border-radius:10px;padding:14px 16px;text-align:left;}
#group_buying_area .cr-sharebox .sb-t{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:6px;}
#group_buying_area .cr-sharebox .su-url{font-size:12.5px;color:var(--trendy);word-break:break-all;font-family:'Montserrat',monospace;}
#group_buying_area .cr-sharebox .su-pw{display:flex;gap:6px;align-items:flex-start;font-size:12px;color:#9a6700;margin-top:8px;line-height:1.5;}
#group_buying_area .cr-sharebox .su-pw img{flex:none;margin-top:2px;}
#group_buying_area .cr-sharebox .su-pw b{color:#9a6700;}
/* 모바일 가로형 버튼 라운드 6px (2026-10-15 사용자 지시). 대상 : 전체 폭 버튼 .cr-cta(소개 시작) · .cr-done-cta(완료) · .cr-modal-b(팝업 바닥 버튼). 같은 특정도의 앞 규칙을 이기도록 파일 끝에 둠 */
@media (max-width:599px){
#group_buying_area .cr-cta,#group_buying_area .cr-go.cr-done-cta,#group_buying_area .cr-modal-b{border-radius:6px;}
}
/* 모바일 2단계 이후 정리 (2026-10-15 사용자 승인) : 1단계 소개에서 정한 기준에 맞춤
   타이틀 위 40 · 설명 14px · 블록 사이 24 · 큰 항목 사이 40 · 라운드 6 · 가로형 버튼 15px. 같은 특정도의 앞 규칙을 이기도록 파일 끝에 둠
   칩 색 #666 = --muted, 배경 #f7f7f7 은 단계 표시 띠와 같은 값(가이드에 없음, 사용자 지정) */
@media (max-width:599px){
#group_buying_area .cr-sub2{font-size:14px;}
#group_buying_area .cr-eligrow{gap:7px;}
#group_buying_area .cr-chip{font-size:12px;font-weight:400;color:var(--muted);background:#f7f7f7;padding:5px 13px;}
#group_buying_area .cr-cart{margin-top:24px;}
#group_buying_area .cr-item{border-radius:6px;padding:16px;align-items:normal;}	/* align-items:center 해제(normal = 기본값, 2026-10-16 사용자 지시) : 체크 · 사진 · 정보를 위쪽에 맞춤 */
#group_buying_area .cr-wrap .cr-item input.cr-check{margin:2px 0 0;}	/* 상품 줄 체크박스만 위 2px (2026-10-16 사용자 지시). 아래 공통 체크박스 규칙(margin:0)보다 특정도를 높임 */
#group_buying_area .cr-go{border-radius:6px;font-size:15px;}
#group_buying_area .cr-back,#group_buying_area .cr-preview{border-radius:6px;}
#group_buying_area .cr-field{margin-top:40px;}
#group_buying_area .cr-field > label:not(.cr-agree):not(.cr-radio){font-size:14px;}
#group_buying_area .cr-input,#group_buying_area .cr-radio{border-radius:6px;}
#group_buying_area .cr-prodrow{border-radius:6px;}
#group_buying_area .cr-ebar{border-radius:6px 6px 0 0;}
#group_buying_area .cr-editor{border-radius:0 0 6px 6px;min-height:440px;max-height:440px;}	/* 모바일 에디터 높이 340 -> 440 (2026-10-16 사용자 지시 : 사진 한 장이면 꽉 참) */
#group_buying_area .cr-share-btn{border-radius:6px;}
}
/* 체크박스 정리 (2026-10-15 사용자 지시 : 기본 모양이 촌스러움 → 깔끔하게, 체크는 얇은 선). 개설 화면 체크박스 전체 · PC · 모바일 공통
   기본 모양을 끄고(appearance:none) 네모 칸을 직접 그림. 테두리 #d9d9d9 (사용자 지정, 가이드에 없는 값 : --border 는 흰 바탕에서 너무 연함). 선택하면 남색 칸 + 흰 체크(그림은 gb_ui 그림 모음 --gb-svg-check-white)
   위 "[모바일] 체크박스 표시" 규칙(#selAll 등, 특정도가 더 높음)이 기본 모양을 다시 켜므로 appearance 만 !important */
#group_buying_area .cr-wrap input[type="checkbox"]{-webkit-appearance:none !important;appearance:none !important;width:16px;height:16px;margin:0;flex-shrink:0;box-sizing:border-box;border:1px solid #d9d9d9;border-radius:2px;background:#fff center/16px no-repeat;cursor:pointer;vertical-align:middle;transition:background-color .15s,border-color .15s;}
#group_buying_area .cr-wrap input[type="checkbox"]:checked{background-color:var(--primary);border-color:var(--primary);background-image:var(--gb-svg-check-white);}
#group_buying_area .cr-wrap input[type="checkbox"]:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
#group_buying_area .cr-wrap input[type="checkbox"]:disabled{background-color:var(--belief);border-color:var(--border);cursor:default;}
#group_buying_area .cr-agree input[type="checkbox"]{margin-top:1px;}	/* 동의 줄 : 글자 첫 줄에 맞춤 (크기는 위 공통 16px) */
/* 모바일 장바구니 상품 정보 (2026-10-15 사용자 지시 : 굵기 최대 400 · 큰 글자 최대 13px) */
@media (max-width:599px){
#group_buying_area .cr-iinfo{font-size:13px;font-weight:400;}
#group_buying_area .cr-allrow{font-size:13px;font-weight:500;}	/* 전체 선택 줄 : 13.5 · 700 -> 13 · 500 (상품 줄보다 살짝만 강하게) */
#group_buying_area .cr-iinfo .opt{color:var(--muted);}	/* 옵션 줄 회색 #666 (2026-10-15 사용자 지시) */
}
/* [PC] 모바일에서 정리한 굵기 · 색 · 라운드 · 여백을 PC 에도 (2026-10-15 사용자 지시 : PC 글자가 두껍고 여백이 없음)
   화면 폭에 맞춘 값(모바일 글자 · 아이콘 크기 · 단계 띠 · 왼쪽 정렬)은 PC 그대로. 모바일 규칙은 손대지 않음 */
@media (min-width:600px){
#group_buying_area .cr-step{font-weight:400;}
#group_buying_area .cr-step.on{font-weight:700;}
#group_buying_area .cr-step .dot{font-weight:500;}
#group_buying_area .cr-info-row{border-radius:6px;}
#group_buying_area .cr-cta,#group_buying_area .cr-go,#group_buying_area .cr-back,#group_buying_area .cr-preview,#group_buying_area .cr-modal-b,#group_buying_area .cr-share-btn{border-radius:6px;}
#group_buying_area .cr-go{font-size:15px;}
#group_buying_area .cr-sub2{font-size:14px;}
#group_buying_area .cr-eligrow{gap:7px;}
#group_buying_area .cr-chip{font-size:12px;font-weight:400;color:#515151;background:#f5f5f5;padding:4px 11px;}	/* [PC] 칩 (2026-10-15 사용자 지정 : #515151 · #f5f5f5 는 가이드에 없는 값) */
#group_buying_area .cr-allrow{font-size:14px;font-weight:500;}
#group_buying_area .cr-item{border-radius:6px;padding:16px 20px;}
#group_buying_area .cr-iinfo{font-weight:400;}
#group_buying_area .cr-iinfo .opt{color:var(--muted);}
#group_buying_area .cr-field > label:not(.cr-agree):not(.cr-radio){font-size:14px;}
#group_buying_area .cr-input,#group_buying_area .cr-radio,#group_buying_area .cr-prodrow{border-radius:6px;}
#group_buying_area .cr-ebar{border-radius:6px 6px 0 0;}
#group_buying_area .cr-editor{border-radius:0 0 6px 6px;height:600px;min-height:340px;max-height:none;resize:vertical;}	/* [PC] 소개 글 에디터 : 기본 높이 600px, 오른쪽 아래 모서리를 끌어 높이 조절 (최소 340px) (2026-10-15 사용자 지시) */
#group_buying_area .cr-go.cr-done-cta{max-width:320px;margin-left:auto;margin-right:auto;}	/* [PC] 완료 화면 "내 공동구매 보기" : 화면 폭 꽉 차던 것을 320px 가운데로 (2026-10-16 사용자 지시). 위 공유 버튼 3개 줄(약 284px)과 비슷한 폭 */
}
/* 상품 목록 : 카드형 -> 목록형 (2026-10-15 사용자 지시 · 참고 캡처). PC · 모바일 공통. 앞의 PC · 모바일 묶음보다 뒤에 두어 이김
   테두리 상자 대신 줄 아래 1px 선(#efefef, 구분선과 같은 값)으로 나눔. 체크박스는 위 "전체 선택" 줄과 같은 왼쪽 선(4px)
   열 수 없는 상품(.cr-acc 안)은 .cr-cart 의 바로 아래 자식이 아니라 위 .cr-acc 규칙에서 따로 목록형으로 */
#group_buying_area .cr-cart{margin-top:0;gap:0;}
#group_buying_area .cr-cart > .cr-item{border:0;border-bottom:1px solid #efefef;border-radius:0;padding:16px 4px;}
#group_buying_area .cr-cart > .cr-item:has(.cr-check:checked){border-bottom-color:#fff;}	/* 선택한 줄 : 연보라 배경에 회색 선(#efefef)이 묻혀 줄 경계가 안 보임 → 흰 선 (2026-10-15 사용자 지시) */
#group_buying_area .cr-allrow{border-bottom-color:#efefef;}
#group_buying_area .cr-cart > .cr-acc{margin-top:16px;}
/* [PC] 개설 소개(step1) : 카드 · 버튼이 화면 폭 꽉 차 가로로 너무 김 (2026-10-16 사용자 지시)
   840px 이상 : 카드 3장 가로 배치(아이콘 위 · 제목 · 설명 가운데 정렬), 최대 840px 가운데
   600~839px : 카드는 세로 그대로, 최대 560px 가운데. 시작 버튼은 320px 가운데(완료 화면 버튼과 같음) */
@media (min-width:600px){
#group_buying_area .cr-info{max-width:560px;margin-left:auto;margin-right:auto;}
#group_buying_area .cr-info-d{word-break:keep-all;overflow-wrap:break-word;}
#group_buying_area .cr-cta{max-width:320px;margin-left:auto;margin-right:auto;}
#group_buying_area .cr-info .cr-info-ic{width:40px;height:40px;border-radius:0;background:none;}	/* 아이콘 배경 없이 그림만 크게 (2026-10-16 사용자 결정 · 모바일과 같은 방식) */
#group_buying_area .cr-info .cr-info-ic::before{width:32px;height:32px;}
}
@media (min-width:840px){
#group_buying_area .cr-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:840px;margin-top:56px;}
#group_buying_area .cr-info-row{flex-direction:column;align-items:center;gap:16px;padding:4px 28px;text-align:center;border:0;border-radius:0;background:none;}	/* 상자 없이 가벼운 3단 (2026-10-16 사용자 지시 : 상자 세 개가 가운데를 무겁게 만듦) */
#group_buying_area .cr-info-row + .cr-info-row{border-left:1px solid #efefef;}	/* 단 사이 얇은 세로 선 */
/* [PC] 세로 간격 (2026-10-16 사용자 지시 : 답답함) : 설명 -> 3단 56 · 아이콘 -> 글 16 · 제목 -> 설명 8 · 3단 -> 버튼 56 · 버튼 -> 안내 24 */
#group_buying_area .cr-info-d{margin-top:8px;}
#group_buying_area .cr-cta{margin-top:56px;}
#group_buying_area .cr-note,#group_buying_area .cr-help{margin-top:24px !important;}
#group_buying_area .cr-help + .cr-note{margin-top:12px !important;}
}
