/* 공동구매 마이(dashboard) CSS · 한 벌 기준 파일 (2026-10-14)
   PC · 모바일웹 · 앱 모든 서버에 이 파일을 그대로 올린다. UTF-8 · CRLF · BOM 없음.
   PC 와 모바일 서버 파일이 달라서 화면 폭으로 나눴다. 600px 이상 = PC 파일 그대로, 599px 이하 = 모바일 파일 그대로.
   [PC 전용] [모바일 전용] [PC · 모바일 값 다름] 표시가 붙은 규칙이 나뉜 곳. 표시 없는 규칙은 양쪽 공통.
   [공통 · 새 기능] = 개발팀이 모바일 CSS 에만 넣은 새 기능 스타일. PC 마크업에도 쓰여 양쪽에 적용.
   모바일 쪽 Noto Sans KR 지정은 넣지 않았다(사이트 웹폰트 상속). */
/* gb_my.css - 마이 공동구매(dashboard.asp / S12)
   기획 groupbuy_my.html(S12) 의 inline style.
   - 모든 선택자는 #group_buying_area 스코프 안에서만 적용된다(헤더/푸터 침범 방지).
   - 이 파일을 수정하면 include/gb_css.asp 의 GB_CSS_VER 값을 함께 올릴 것.
*/
/* ===== S12 내 공동구매 스타일 (기획 groupbuy_my.html inline style 이식) ===== */
body{overflow-x:hidden;}
@media (min-width:600px){#group_buying_area .s12-wrap{max-width:1200px;margin:0 auto;padding:32px 0 90px;}}
@media (max-width:599px){#group_buying_area .s12-wrap{max-width:880px;margin:0 auto;padding:32px 16px 90px;}} /* [PC · 모바일 값 다름] */ /* 880 -> 1200px : PC 콘텐츠 폭을 사이트 기준에 맞춤(2026-09-28 사용자 지시). 좌우 0 은 1232px 이하에서 16px 로 되돌림(상위 메뉴 .gb-snav-in 과 같은 기준) */
@media (min-width:600px) and (max-width:1232px){#group_buying_area .s12-wrap{padding-left:16px;padding-right:16px;}} /* [PC 전용] */
#group_buying_area .s12-h{font-size:22px;font-weight:800;color:var(--ink);margin-bottom:18px;letter-spacing:-.01em;}
@media (max-width:599px){#group_buying_area .s12-h{font-size:20px;margin-bottom:14px;}}	/* 모바일 페이지 제목 22 -> 20px (메인 모바일 구간 제목 21px 보다 한 단계 아래) · 아래 여백 18 -> 14 (2026-10-15 사용자 요청) */
#group_buying_area .s12-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
#group_buying_area .s12-mycard{font-size:13px;font-weight:700;color:var(--trendy);text-decoration:none;white-space:nowrap;border:none;background:none;cursor:pointer;font-family:inherit;padding:0;}
#group_buying_area .s12-mycard:hover{text-decoration:underline;}
#group_buying_area .s12-tabs{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:22px;}
#group_buying_area .s12-tab{flex:1;padding:13px;text-align:center;font-weight:700;font-size:14.5px;color:var(--muted);background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;}
#group_buying_area .s12-tab.active{color:var(--trendy);border-bottom-color:var(--trendy);}
#group_buying_area .s12-tab .cnt{font-family:'Montserrat',sans-serif;font-size:12px;margin-left:4px;color:var(--hint);}
#group_buying_area .my-sanc-banner{background:#fdeceb;border:1px solid #f2b8b4;border-radius:12px;padding:13px 16px;margin-bottom:14px;font-size:13px;color:#8a2a22;}
#group_buying_area .my-sanc-banner b{color:#e5362c;}
#group_buying_area .my-sanc-head{display:flex;align-items:center;gap:8px;cursor:pointer;}
#group_buying_area .my-sanc-body{margin-top:10px;padding-top:10px;border-top:1px solid rgba(0,0,0,.12);}
#group_buying_area .my-sanc-row{padding:10px 0;border-top:1px solid rgba(0,0,0,.1);}
#group_buying_area .my-sanc-row:first-child{border-top:none;padding-top:0;}
#group_buying_area .my-review-banner{display:flex;gap:10px;align-items:flex-start;background:#fff7e6;border:1px solid #f0d999;border-radius:12px;padding:13px 16px;margin-bottom:14px;font-size:13px;color:#8a5a00;}
#group_buying_area .my-review-banner b{color:#b7791f;}
/* 심사 중 안내 아이콘 (2026-10-15 사용자 요청) : 이모지 PNG(emoji_clock) 교체. 안내 성격이라 시계 대신 원 안 느낌표.
   기존 아이콘에 없어 새로 만듦. 규격은 gb_main .gb-ico-check-circle 과 같음(24 격자 · 선 1.5 · 같은 원). 색은 배너 강조 글자색 #b7791f.
   asp 는 그대로 두고 src 로 이모지만 골라 원래 그림은 밖으로 밀고 SVG 를 배경으로 깐다(emoji_box 와 같은 방식). 크기는 원래와 같은 18px */
#group_buying_area .my-review-banner img[src*="emoji_clock"]{flex-shrink:0;width:18px;height:18px;object-fit:none;object-position:-9999px 0;background:var(--gb-svg-alert-circle-amber) center/contain no-repeat;}
@media (max-width:599px){#group_buying_area .my-review-banner{gap:8px;padding:12px 14px;font-size:12px;line-height:1.55;}#group_buying_area .my-review-banner img[src*="emoji_clock"]{width:16px;height:16px;}}	/* 모바일 심사 중 배너 (2026-10-15 사용자 요청) : 주변 안내 글자(12~12.5px)보다 커서 줄이 많아짐. 글자 13 -> 12 · 줄 간격 1.55 · 여백 13/16 -> 12/14 · 아이콘 18 -> 16 · 간격 10 -> 8 */
@media (min-width:600px){#group_buying_area .my-filterbar{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}}
@media (max-width:599px){#group_buying_area .my-filterbar{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}} /* [PC · 모바일 값 다름] */
#group_buying_area .my-chip-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;cursor:grab;}
#group_buying_area .my-chip-row::-webkit-scrollbar{display:none;}
#group_buying_area .my-chip-row.dragging{cursor:grabbing;user-select:none;}
#group_buying_area .my-chip{flex:0 0 auto;height:32px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background-color .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);}
#group_buying_area .my-chip.on{background:var(--trendy);color:#fff;border-color:var(--trendy);}
#group_buying_area .my-period-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;}
/* 기간 선택 · 공구명 검색 칸 라운드 5px (2026-10-15 사용자 결정. 가이드 버튼 8px 와 다름 · 육안 확인 후 지정. 이전 8px / 6px / 모바일 알약) */
@media (min-width:600px){#group_buying_area .my-period-sel{height:32px;padding:0 32px 0 12px;border:1px solid var(--border);border-radius:5px;background:#fff var(--gb-svg-select-arrow) no-repeat right 12px center/10px 6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:12px;color:var(--text-body);cursor:pointer;}}
@media (max-width:599px){#group_buying_area .my-period-sel{height:32px;padding:0 10px;border:1px solid var(--border);border-radius:5px;background:#fff;font-size:12.5px;color:var(--text-body);}} /* [PC · 모바일 값 다름] */ /* 기본 화살표가 오른쪽 끝에 붙고 두꺼워 SVG 로 교체(2026-09-28). 펼친 옵션 목록은 브라우저 기본이라 CSS 로 못 바꿈 */
@media (min-width:600px){#group_buying_area .my-period-search{height:32px;flex:1;min-width:140px;max-width:220px;padding:0 12px;border:1px solid var(--border);border-radius:5px;font-size:12.5px;}}
@media (max-width:599px){#group_buying_area .my-period-search{height:32px;flex:1;min-width:140px;max-width:220px;padding:0 12px;border:1px solid var(--border);border-radius:5px;font-size:12.5px;}} /* [PC · 모바일 값 다름] */
/* 기간 선택 커스텀 목록 (2026-09-28 사용자 요청) : <select> 를 버튼 + 직접 만든 목록으로 교체(dashboard.asp A-40).
   버튼은 기존 .my-period-sel 모양(화살표 SVG 포함) 그대로. 펼친 목록은 흰 상자 · 라운드 8px · 테두리만(그림자는 사용자 판단으로 뺌).
   항목 배경은 호버와 키보드 이동(:focus-visible)일 때만. 마우스로 열 때 선택 항목에 포커스 배경이 깔려 옆 호버 칸과 붙어 보였다. 항목 사이 2px */
@media (min-width:600px){#group_buying_area .my-period-dd{position:relative;display:inline-block;}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .my-period-dd .my-period-sel{display:inline-flex;align-items:center;box-sizing:border-box;min-width:120px;text-align:left;white-space:nowrap;}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .my-period-dd .my-period-sel[aria-expanded="true"]{border-color:var(--trendy);}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .my-period-list{position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:100%;box-sizing:border-box;margin:0;padding:6px;list-style:none;background:#ffffff;border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;gap:2px;}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .my-period-list[hidden]{display:none;}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .my-period-list li{position:relative;margin:0;padding:8px 32px 8px 10px;border-radius:6px;font-size:12px;color:var(--muted);line-height:1.4;white-space:nowrap;cursor:pointer;outline:none;}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .my-period-list li:hover,#group_buying_area .my-period-list li:focus-visible{background:var(--belief);}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .my-period-list li[aria-selected="true"]{color:var(--trendy);font-weight:700;}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .my-period-list li[aria-selected="true"]::after{content:'';position:absolute;right:10px;top:50%;width:14px;height:14px;margin-top:-7px;background-color:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;-webkit-mask-image:var(--gb-svg-check-sm);mask-image:var(--gb-svg-check-sm);}} /* [PC 전용] */ /* 선택 표시 : 남색 굵은 글자만으론 #333 과 구분이 약해 체크 14px(선 1.5px) + 나머지 항목 #666 (2026-09-28) */
#group_buying_area .my-period-cur{font-size:11.5px;color:var(--hint);margin-left:auto;white-space:nowrap;}
#group_buying_area .my-period-cur{display:none;}	/* "최근 90일 조회 중" 숨김 · PC · 모바일 공통 (2026-10-15 사용자 요청). 스크립트가 글자를 바꿔도 안 보임 */
#group_buying_area .s12-more{display:flex;justify-content:center;margin-top:20px;}
#group_buying_area .s12-more[hidden]{display:none;}
#group_buying_area .s12-more-btn{height:44px;padding:0 32px;border:1.5px solid var(--border);border-radius:999px;background:#fff;color:var(--trendy);font-size:13.5px;font-weight:700;cursor:pointer;}
#group_buying_area .s12-more-btn:hover{border-color:var(--trendy);background:var(--belief);}
#group_buying_area .s12-more-btn b{font-family:'Montserrat',sans-serif;color:var(--trendy);}
#group_buying_area .s12-more-btn-inline{display:block;margin:14px auto 6px;}
/* 카드 호버 애니메이션 삭제 (2026-09-27 사용자 지시). 그림자 + 2px 들림이 있었다.
   전환 목록에서도 box-shadow 와 transform 을 뺐다. 바뀌는 값이 없어 하는 일이 없다.
   background-color 전환은 남긴다(.ended 등 상태 변화에 쓰인다).
   .my-card:hover .my-chev 의 화살표 색 변화는 그대로 둔다. 누를 수 있다는 표시라 필요하다. */
@media (min-width:600px){#group_buying_area .my-card{border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:14px;background:#fff;cursor:pointer;transition:background-color .3s var(--ease);}}
@media (max-width:599px){#group_buying_area .my-card{border:1px solid var(--border);border-radius:14px;padding:16px 14px;margin-bottom:14px;background:#fff;cursor:pointer;transition:background-color .3s var(--ease);}} /* [PC · 모바일 값 다름] */
/* 모바일 카드 누름 그림자 + 2px 들림 삭제 (2026-10-15 사용자 요청) : 터치 후 hover 가 남아 카드가 떠 보였다. PC 는 09-27 에 이미 삭제 */
/* 취소 카드 (2026-09-28 사용자 요청) : 카드 전체 opacity:.72 를 뺐다. 부모 투명도는 자식에서 되돌릴 수 없어 취소됨 라벨까지 흐려졌다.
   대신 배경 회색 · 썸네일만 투명도 · 글자는 전부 #888 (처음 한 단계씩 연하게 했다가 사용자가 육안으로 #888 통일). 라벨(.b-dc)은 선명하게 둔다 */
@media (min-width:600px){#group_buying_area .my-card.ended{background:#f9f9f9;}}
@media (max-width:599px){#group_buying_area .my-card.ended{opacity:.72;}} /* [PC · 모바일 값 다름] */
@media (min-width:600px){#group_buying_area .my-card.ended .my-thumb img{opacity:.72;}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .my-card.ended .my-title{color:#888;}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .my-card.ended .my-sub{color:#888;}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .my-card.ended .my-precancel-note{color:#888;}} /* [PC 전용] */
#group_buying_area .my-card.urgent-flash{background-color:#ffeceb;box-shadow:0 0 0 2px #f2b8b4;}
#group_buying_area .my-card-head{display:flex;gap:14px;align-items:flex-start;}
#group_buying_area .my-thumb{width:54px;height:54px;border-radius:2px;background:var(--belief);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;}
#group_buying_area .my-info{flex:1;min-width:0;}
/* 모바일 카드 텍스트 칸 넓히기 (2026-10-15 사용자 요청) : 좁은 폰(16 · SE)에서 고정 여백 때문에 텍스트 칸이 179~197px 로 좁아졌다.
   페이지 좌우 24 -> 16(상단 메뉴와 같은 선) · 카드 안쪽 좌우 18 -> 14 · 썸네일 54 -> 44 · 썸네일/화살표 간격 14 -> 10. SE 기준 텍스트 칸 179 -> 221px. PC 는 그대로 */
@media (max-width:599px){#group_buying_area .my-thumb{width:44px;height:44px;}#group_buying_area .my-card-head{gap:10px;}}
/* 모바일 참여 카드 펼침 화살표 (2026-10-15 사용자 요청) : 화살표가 오른쪽에 세로 칸(28 + 간격 10)을 차지해 제목 · 번호 줄까지 오른쪽이 비었다.
   화살표를 카드 오른쪽 위에 띄우고(absolute), 정보 칸 첫 줄 오른쪽에만 화살표 자리를 비운다(float 빈 상자). 둘째 줄부터 오른쪽 끝까지 사용 */
@media (max-width:599px){#group_buying_area .my-card[data-p]{position:relative;}#group_buying_area .my-card[data-p] .my-chev{position:absolute;top:12px;right:10px;}#group_buying_area .my-card[data-p] .my-info::before{content:"";float:right;width:28px;height:22px;}}
/* 카드 배지(상태 · 자동결제 · 정가 결제/제외 · 카드등록완료) 라운드 4px 통일 (2026-10-15 사용자 결정. 이전 PC 6px · 모바일 알약) */
#group_buying_area .my-badge{display:inline-block;font-size:11px;font-weight:500;padding:1px 6px;border-radius:4px;font-family:'Montserrat',sans-serif;margin-bottom:6px;}	/* PC · 모바일 같은 값 (2026-10-15 사용자 요청. 모바일 별도 값 삭제) */
#group_buying_area .my-badge-method,#group_buying_area .my-badge-under{display:inline-block;font-size:10.5px;font-weight:500;padding:1px 8px;border-radius:4px;margin-bottom:6px;margin-left:1px;background:var(--belief);color:var(--muted);}	/* PC · 모바일 같은 값 (2026-10-15 사용자 요청. 모바일 별도 값 삭제) */
#group_buying_area .b-joined{background:#e8f0ff;color:#2b6cb0;}
#group_buying_area .b-pending{background:#fff7e6;color:#b7791f;}
#group_buying_area .b-paid{background:#e6f7ed;color:#1a7f4b;}
#group_buying_area .b-urgent{background:#ffeceb;color:#d6362c;}
#group_buying_area .b-making{background:#eef0fb;color:var(--trendy);}
#group_buying_area .b-done{background:#f0f0f3;color:#888;}
#group_buying_area .b-forced{background:#ffeceb;color:#d6362c;}
@media (min-width:600px){#group_buying_area .b-dc{background:#fff1f0;color:#e5362c;}}
@media (max-width:599px){#group_buying_area .b-dc{background:#fef9e7;color:#b45309;}} /* [PC · 모바일 값 다름] */
@media (min-width:600px){#group_buying_area .my-title{font-size:14px;font-weight:400;color:var(--ink);line-height:1.4;}}
@media (max-width:599px){#group_buying_area .my-title{font-size:14px;font-weight:800;color:var(--ink);line-height:1.4;}} /* [PC · 모바일 값 다름] */
#group_buying_area .my-sub{font-size:12.5px;color:var(--muted);margin-top:4px;}
@media (min-width:600px){#group_buying_area .my-amount{font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;color:var(--trendy);margin-top:9px;}}
@media (max-width:599px){#group_buying_area .my-amount{font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;color:var(--trendy);margin-top:9px;}} /* [PC · 모바일 값 다름] */
#group_buying_area .my-amount .lbl{font-size:12px;font-weight:500;color:var(--muted);margin-right:4px;}
#group_buying_area .my-precancel-note{font-size:13px;color:var(--ink);line-height:1.5;margin-top:9px;font-weight:500;}
#group_buying_area .s13-precancel-ref{font-size:12.5px;color:var(--muted);padding:2px 0;}
@media (min-width:600px){#group_buying_area .my-cd{color:#e5362c;font-weight:700;}}
@media (max-width:599px){#group_buying_area .my-cd{color:var(--attention);font-weight:700;}} /* [PC · 모바일 값 다름] */
#group_buying_area .my-chev{margin-left:auto;align-self:flex-start;flex-shrink:0;background:none;border:none;cursor:pointer;padding:4px;display:flex;color:var(--hint);transition:color .2s var(--ease);}
#group_buying_area .my-chev svg{transition:transform .2s var(--ease);}
#group_buying_area .my-card:hover .my-chev{color:var(--trendy);}
#group_buying_area .my-card.open .my-chev{color:var(--trendy);}
#group_buying_area .my-card.open .my-chev svg{transform:rotate(180deg);}
#group_buying_area .my-card.open .gb-track-mini,#group_buying_area .my-card.open .tm-label{display:none;}
#group_buying_area .my-action{margin-top:13px;padding-top:13px;border-top:1px solid var(--border);}
#group_buying_area .my-action-msg{font-size:12px;color:var(--muted);line-height:1.5;}	/* 안내 문장 12.5 -> 12px · PC · 모바일 공통 (2026-10-15 사용자 요청) */
#group_buying_area .my-action-msg b{color:var(--ink);}
/* 참여 카드 안내 문장 (2026-10-15 사용자 요청) : 정보 줄과 같은 모양이라 안내로 안 읽혀서 정보 아이콘(원 안 i) + 한 단계 진한 글자.
   아이콘 = 심사 중 배너 느낌표와 같은 규격(24 격자 · 선 1.5 · 같은 원), 색은 글자색(currentColor). 문장 안 <b> 가 쪼개지지 않게 flex 대신 왼쪽 여백 + 절대 위치.
   결제 필요 빨간 상자(.urgent-banner)는 이 클래스를 안 써서 영향 없음 */
#group_buying_area .my-card[data-p] .my-action-msg{position:relative;padding-left:20px;color:var(--util-text,#555);}
#group_buying_area .my-card[data-p] .my-action-msg::before{content:"";position:absolute;left:0;top:calc(.75em - 7px);width:14px;height:14px;background-color:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;-webkit-mask-image:var(--gb-svg-info-circle);mask-image:var(--gb-svg-info-circle);}
/* 아이콘 위치 : 첫 줄 높이(1.5em)의 가운데 = .75em - 아이콘 절반 7px, 사이트 글꼴(윤고딕)은 줄 가운데에 그려져 보정 없음 -> .75em - 7px (처음 1px 내렸다가 실제 화면에서 아래로 처져 되돌림). 글자 크기가 바뀌어도 자동으로 맞음 (2026-10-15) */
#group_buying_area .my-action-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
/* 결제 완료 · 제작 중 · 배송 중 · 배송 완료 카드 : 안내 문장(왼쪽) + 버튼(오른쪽 끝) 한 줄 (2026-10-15 사용자 요청).
   제작 중 · 배송 중 · 배송 완료는 항상 짧은 문장 1개 + 버튼 1개. 결제 완료는 제작 시작 후에도 상태가 PAID 라 포함(버튼 1~3개). 좁아서 안 들어가면 버튼이 다음 줄 오른쪽으로. 다른 상태(신청 완료 · 결제 필요 등)는 그대로 두 줄 */
#group_buying_area .my-card[data-status="PAID"] .my-action,#group_buying_area .my-card[data-status="MAKING"] .my-action,#group_buying_area .my-card[data-status="SHIPPING"] .my-action,#group_buying_area .my-card[data-status="DELIVERED"] .my-action{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;}
#group_buying_area .my-card[data-status="PAID"] .my-action-btns,#group_buying_area .my-card[data-status="MAKING"] .my-action-btns,#group_buying_area .my-card[data-status="SHIPPING"] .my-action-btns,#group_buying_area .my-card[data-status="DELIVERED"] .my-action-btns{margin-top:0;margin-left:auto;}
#group_buying_area .btn-repay,#group_buying_area .btn-directpay{display:inline-flex;align-items:center;justify-content:center;height:38px;background:var(--accent);color:var(--primary);border:none;border-radius:6px;padding:0 20px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;}	/* 주요 버튼 크기 통일 (2026-10-15) : 높이 40 · 좌우 14 · 700. 색은 그대로 */
/* 참여 카드 보조 버튼(주문·배송 현황 · 참여/주문/승인 취소 · 결제수단 관리 · 정가 체크) : 수정하기(gb_ui .btn-ghost.compact)와 같은 모양 · hover (2026-10-15 사용자 요청). 값은 gb_ui 그대로. 정가 체크 점선은 아래 .btn-under 가 유지 */
#group_buying_area .btn-orderstatus,#group_buying_area .btn-cancel,#group_buying_area .btn-mycard{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 20px;border-radius:6px;background:var(--clear);color:var(--muted);font-size:12px;font-weight:600;border:1.5px solid var(--border);cursor:pointer;text-decoration:none;transition:all .15s var(--ease);}
#group_buying_area .btn-orderstatus:hover,#group_buying_area .btn-cancel:hover,#group_buying_area .btn-mycard:hover{border-color:var(--primary);color:var(--primary);}
/* compact 버튼 높이 38 · 좌우 20 · 글자 12px (2026-10-15 사용자 요청) : gb_ui 는 40 · 14 · 13px. 공용 파일이라 마이 페이지(gb_my)에서만 덮어씀 */
#group_buying_area .btn-pri.compact,#group_buying_area .btn-ghost.compact{height:38px;padding:0 20px;font-size:12px;}
/* 사각형 버튼 라운드 6px 통일 (2026-10-15 사용자 결정. 가이드 버튼 8px 와 다름). gb_ui 의 btn-pri · btn-ghost · btn-yellow 는 공용이라 여기서 덮어씀.
   gb_my 의 버튼(보조 · 재결제 · 다시 시작 · 참여내역 수정 · 결제필요 고정 배너 버튼)은 각 규칙 값을 6px 로 */
#group_buying_area .btn-pri,#group_buying_area .btn-ghost,#group_buying_area .btn-yellow{border-radius:6px;}
/* [모바일 전용 · 599px 이하] PC 에도 스타일이 있는 요소라 모바일에만 적용 (2026-10-14) */
#group_buying_area .urgent-banner{background:#ffeceb;border:1px solid #f2b8b4;border-radius:10px;padding:11px 13px;font-size:12.5px;color:#d6362c;line-height:1.5;margin-top:11px;}
#group_buying_area .urgent-banner b{font-weight:800;}
#group_buying_area .urgent-sticky{position:sticky;top:8px;z-index:50;display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #f2b8b4;border-left:4px solid #d6362c;border-radius:12px;padding:12px 15px;margin-bottom:16px;box-shadow:0 6px 20px rgba(214,54,44,.15);}
#group_buying_area .urgent-sticky .us-ic{font-size:20px;flex-shrink:0;}
#group_buying_area .urgent-sticky .us-msg{flex:1;min-width:0;font-size:13px;color:#d6362c;line-height:1.5;}
#group_buying_area .urgent-sticky .us-msg b{font-weight:800;}
#group_buying_area .urgent-sticky .us-btn{background:#d6362c;color:#fff;border:none;border-radius:6px;padding:9px 18px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;flex-shrink:0;}
#group_buying_area .urgent-sticky .us-btn:hover{background:#b82c23;}
#group_buying_area .s12-empty{text-align:center;padding:64px 20px;color:var(--muted);}
#group_buying_area .s12-empty .em{font-size:44px;margin-bottom:12px;}
/* 빈 목록 상자 아이콘 (2026-09-28 사용자 요청) : 이모지 PNG(emoji_box) 를 저작권 문제로 교체.
   asp 는 그대로 두고 <img> 를 숨긴 뒤 ::before 에 단색 선 아이콘을 mask 로 그린다.
   크기는 원래 이미지와 같은 42px. 크게 쓰는 그림이라 선은 1.5px 로 가늘게 했다(개설 1단계 24px 아이콘은 2px). */
#group_buying_area .s12-empty .em img{display:none;}	/* PC · 모바일 공통 (2026-10-15 : 모바일에 이모지 PNG 가 그대로 보여 PC 전용 조건 삭제) */
#group_buying_area .s12-empty .em::before{content:'';display:block;width:42px;height:42px;margin:0 auto;background-color:var(--primary);-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;-webkit-mask-image:var(--gb-svg-box-empty);mask-image:var(--gb-svg-box-empty);}	/* PC · 모바일 공통 (2026-10-15 : 모바일에 이모지 PNG 가 그대로 보여 PC 전용 조건 삭제) */
/* 참여한 탭 빈 화면 (2026-09-28 사용자 요청) : 필터 UI(A-35) 아래 결과 없음 화면으로 맞춤. 시안 groupbuy_my.html 과 같은 구성.
   아이콘은 상자 대신 돋보기(같은 42px · 선 1.5px), 둘러보기 버튼은 숨김. 문구는 asp 에서 교체(A-36). 개설·취소 탭은 그대로 */
#group_buying_area .s12-pane[data-pane="joined"] .s12-empty .em::before{-webkit-mask-image:var(--gb-svg-search);mask-image:var(--gb-svg-search);}	/* PC · 모바일 공통 (2026-10-15 : 모바일에 이모지 PNG 가 그대로 보여 PC 전용 조건 삭제) */
@media (min-width:600px){#group_buying_area .s12-pane[data-pane="joined"] .s12-empty .btn-yellow{display:none;}} /* [PC 전용] */
#group_buying_area .s12-empty .go{display:inline-block;margin-top:16px;background:var(--accent);color:var(--primary);border:none;border-radius:8px;padding:11px 22px;font-size:14px;font-weight:800;cursor:pointer;}
@media (min-width:600px){#group_buying_area .s12-empty .btn-yellow{margin-top:30px;background:var(--primary);color:#ffffff;font-weight:500;}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .s12-empty .btn-yellow:hover{background:var(--primary-hover,#3a3d6e);}} /* [PC 전용] */
#group_buying_area .more-wrap{text-align:center;margin-top:10px;}
#group_buying_area .more-btn{border:1px solid var(--border);background:#fff;color:var(--ink);border-radius:10px;padding:12px 28px;font-size:14px;font-weight:700;cursor:pointer;}
#group_buying_area .more-btn:hover{border-color:var(--trendy);color:var(--trendy);}
#group_buying_area .toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);background:var(--primary);color:#fff;padding:12px 20px;border-radius:10px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:800;max-width:88%;text-align:center;}
#group_buying_area .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#group_buying_area .s13-body{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);}
#group_buying_area .s13-sec{margin-bottom:14px;}
#group_buying_area .s13-st{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:8px;}
#group_buying_area .s13-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--belief);}
#group_buying_area .s13-rinfo{min-width:0;}
#group_buying_area .s13-pname{font-size:13.5px;font-weight:700;color:var(--ink);}
#group_buying_area .s13-qty{font-family:'Montserrat',sans-serif;color:var(--muted);font-size:12px;}
/* [공통 · 새 기능] 모바일 서버 파일에만 있던 새 기능용 규칙. PC 에 없는 클래스라 PC 에도 적용 (2026-10-14) */
#group_buying_area .my-nos{cursor:text;user-select:text;-webkit-user-select:text;word-break:break-all;}
#group_buying_area .my-nos b{font-family:'Montserrat',sans-serif;color:var(--primary);font-weight:700;letter-spacing:-.01em;}
/* 참여 카드(data-p) 정보 줄 정리 (2026-10-15 사용자 요청). 번호 줄은 같은 날 개설 카드까지 넓힘.
   옵션 줄(제목 바로 아래 .my-sub) = 제목에 붙이고 조금 진하게 / 번호 줄(.my-nos) = 참고 정보라 작고 연하게. 색은 gb_ui 토큰 */
#group_buying_area .my-card[data-p] .my-title + .my-sub{margin-top:2px;font-size:13px;}
#group_buying_area .my-card[data-p]:not(.ended) .my-title + .my-sub{color:var(--util-text,#555);}	/* 종료 카드는 기존 회색(#888) 유지 */
#group_buying_area .my-nos{margin-top:6px;font-size:12px;color:var(--hint,#999);}	/* 참여 · 개설 카드 공통 (2026-10-15 사용자 요청 : 참여 카드 스타일로 통일) */
#group_buying_area .my-nos b{color:var(--muted,#666);font-weight:500;}
/* 참여 · 개설 카드 번호 줄 (2026-10-15 사용자 요청) : 항목마다 <span class="my-no"> (디자인 페이지 asp 변경). PC 는 한 줄 + 구분선 / 를 CSS 로, 모바일은 번호마다 줄바꿈 */
#group_buying_area .my-nos .my-no + .my-no::before{content:" / ";}
@media (max-width:599px){#group_buying_area .my-nos .my-no{display:block;}#group_buying_area .my-nos .my-no + .my-no::before{content:none;}}
#group_buying_area .my-nos .my-no{white-space:nowrap;}	/* 항목 안에서는 줄바꿈 없이("자물쇠 아이콘(SVG, 아래 emoji_lock 교체 규칙) + 비공개" · "마감 : 날짜 시간" 이 쪼개지지 않게). 줄은 항목 사이에서만 바뀜 (2026-10-15) */
@media (min-width:600px){#group_buying_area .s13-ordno{font-size:12px;color:var(--muted);margin-bottom:10px;}} /* [PC 전용] */
@media (min-width:600px){#group_buying_area .s13-ordno b{font-family:'Montserrat',sans-serif;color:var(--primary);font-weight:700;letter-spacing:-.01em;}} /* [PC 전용] */
#group_buying_area .s13-stepper{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;margin-left:4px;}
#group_buying_area .s13-stepper b{font-family:'Montserrat',sans-serif;font-size:13px;min-width:18px;text-align:center;}
#group_buying_area .s13-qbtn{width:24px;height:24px;border:1px solid var(--border);background:#fff;border-radius:6px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;}
#group_buying_area .s13-qbtn:hover{border-color:var(--primary);color:var(--primary);}
#group_buying_area .s13-qnote{font-size:11.5px;color:var(--hint);margin-top:8px;}
#group_buying_area .s13-opt{font-size:11.5px;color:var(--muted);margin-top:2px;}
#group_buying_area .s13-rowbtns{display:flex;gap:6px;margin-top:8px;}
#group_buying_area .s13-mini{font-size:11px;font-weight:700;border:1px solid var(--border);background:#fff;color:var(--muted);border-radius:6px;padding:5px 11px;cursor:pointer;}
@media (min-width:600px){#group_buying_area .s13-mini.s13-cancel{color:#e5362c;border-color:#f2b8b4;}}
@media (max-width:599px){#group_buying_area .s13-mini.s13-cancel{color:#d6362c;border-color:#f2b8b4;}} /* [PC · 모바일 값 다름] */
#group_buying_area .s13-pamt{font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px;color:var(--trendy);white-space:nowrap;text-align:right;}
#group_buying_area .s13-pamt{align-self:center;}	/* 가격 : 상품 줄 높이 안에서 세로 가운데 (2026-10-15 사용자 요청. 이전 위쪽 붙음) */
#group_buying_area .s13-pamt s{display:block;font-size:11px;color:var(--hint);font-weight:400;}
#group_buying_area .s13-amt{background:var(--belief);border-radius:10px;padding:12px 14px;}
#group_buying_area .s13-aline{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:3px 0;}
@media (min-width:600px){#group_buying_area .s13-aline .dc{color:#e5362c;}}
@media (max-width:599px){#group_buying_area .s13-aline .dc{color:#d6362c;}} /* [PC · 모바일 값 다름] */
#group_buying_area .s13-total{font-weight:800;color:var(--ink);font-size:15px;border-top:1px solid var(--border);margin-top:6px;padding-top:8px;}
#group_buying_area .s13-track{display:flex;justify-content:space-between;gap:4px;}
#group_buying_area .s13-track .trk{flex:1;text-align:center;font-size:10.5px;color:var(--hint);position:relative;}
#group_buying_area .s13-track .trk::before{content:'';position:absolute;top:5px;right:50%;width:calc(100% + 4px);height:2px;background:var(--border);z-index:0;}
#group_buying_area .s13-track .trk:first-child::before{display:none;}
#group_buying_area .s13-track .trk.on::before{background:var(--trendy);}
#group_buying_area .s13-track .trk i{display:block;width:11px;height:11px;border-radius:50%;background:var(--border);margin:0 auto 5px;position:relative;z-index:1;}
#group_buying_area .s13-track .trk.on{color:var(--trendy);font-weight:700;}
#group_buying_area .s13-track .trk.on i{background:var(--trendy);}
/* [공통 · 새 기능] 모바일 서버 파일에만 있던 새 기능용 규칙. PC 에 없는 클래스라 PC 에도 적용 (2026-10-14) */
#group_buying_area .s13-track .trk.warn{color:#E03B3B;font-weight:700;}
#group_buying_area .s13-track .trk.warn i{background:#E03B3B;}
#group_buying_area .s13-track .trk.warn::before{background:var(--trendy);}
#group_buying_area .gb-track-mini .tm-seg.warn .tm-dot{background:#E03B3B;}
#group_buying_area .tm-label .tm-warn{color:#E03B3B;font-weight:700;}
@media (min-width:600px){#group_buying_area .my-card.open{cursor:default;}}
@media (max-width:599px){#group_buying_area .my-card.open{cursor:default;}}	/* 펼친 카드 그림자 삭제 (2026-10-15 사용자 요청. 이전 0 8px 24px rgba(34,36,80,.12)) */
#group_buying_area .cancel-modal{position:fixed;inset:0;background:rgba(20,21,46,.5);display:none;align-items:center;justify-content:center;z-index:900;padding:20px;}
#group_buying_area .cancel-modal.show{display:flex;}
#group_buying_area .cancel-box{background:#fff;border-radius:16px;padding:24px;max-width:380px;width:100%;}
#group_buying_area .cancel-box h2{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:12px;}
#group_buying_area .cancel-msg{font-size:13.5px;color:var(--muted);line-height:1.65;}
#group_buying_area .cancel-msg b{color:var(--ink);}
#group_buying_area .cancel-btns{display:flex;gap:8px;margin-top:20px;}
#group_buying_area .cancel-no{flex:1;border:1px solid var(--border);background:#fff;color:var(--muted);border-radius:9px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;}
#group_buying_area .cancel-yes{flex:1;border:none;background:#d6362c;color:#fff;border-radius:9px;padding:12px;font-size:14px;font-weight:800;cursor:pointer;}
#group_buying_area .mc-modal{position:fixed;inset:0;background:rgba(14,14,16,.5);display:none;align-items:center;justify-content:center;z-index:950;padding:20px;}
#group_buying_area .mc-modal.show{display:flex;}
#group_buying_area .mc-modal-box{background:#fff;border-radius:16px;padding:24px 22px;max-width:440px;width:100%;max-height:88vh;overflow-y:auto;position:relative;}
#group_buying_area .mc-modal-box .mc-close{position:absolute;top:14px;right:16px;font-size:22px;line-height:1;color:var(--muted);background:none;border:none;cursor:pointer;}
#group_buying_area .mc-t{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:4px;}
#group_buying_area .mc-sub{font-size:12.5px;color:var(--muted);margin-bottom:18px;line-height:1.6;}
#group_buying_area .mc-card{background:linear-gradient(135deg,#2a2c52,#3d4070);border-radius:16px;padding:24px 22px;color:#fff;box-shadow:0 8px 24px rgba(34,36,80,.25);}
#group_buying_area .mc-card .issuer{font-size:14px;font-weight:700;opacity:.92;}
#group_buying_area .mc-card .num{font-family:'Montserrat',sans-serif;font-size:21px;font-weight:700;letter-spacing:.08em;margin-top:22px;}
#group_buying_area .mc-card .meta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:18px;font-size:11.5px;opacity:.8;}
#group_buying_area .mc-card .badge{display:inline-block;font-size:10.5px;font-weight:800;background:rgba(255,255,255,.2);border-radius:var(--r-pill);padding:3px 10px;}
#group_buying_area .mc-info{background:var(--belief);border:1px solid var(--border);border-radius:12px;padding:15px 17px;margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.65;}
#group_buying_area .mc-info b{color:var(--ink);}
#group_buying_area .mc-pending{background:var(--accent-soft,#fff4d6);border-radius:10px;padding:12px 15px;margin-top:14px;font-size:13px;color:#7a5d00;line-height:1.5;}
#group_buying_area .mc-pending b{color:var(--ink);}
#group_buying_area .mc-actions{display:flex;gap:10px;margin-top:20px;}
#group_buying_area .mc-btn{flex:1;border-radius:11px;padding:14px;font-size:14px;font-weight:800;cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--ink);}
#group_buying_area .mc-btn.replace{background:var(--primary);color:#fff;border-color:var(--primary);}
#group_buying_area .mc-btn.remove{color:var(--hot,#e5362c);border-color:#f2b8b4;}
#group_buying_area .mc-empty{text-align:center;padding:40px 20px;}
#group_buying_area .mc-empty .ic{font-size:50px;margin-bottom:16px;}
#group_buying_area .mc-empty p{font-size:14px;color:var(--muted);line-height:1.6;}
#group_buying_area .mc-empty .go{margin-top:20px;background:var(--accent);color:var(--primary);border:none;border-radius:10px;padding:13px 26px;font-size:14px;font-weight:800;cursor:pointer;}
#group_buying_area .mc-modal-box h3{font-size:17px;font-weight:800;margin-bottom:8px;}
#group_buying_area .mc-modal-box .mc-desc{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:14px;}
#group_buying_area .mc-fld{margin-bottom:13px;}
#group_buying_area .mc-fld label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px;}
#group_buying_area .mc-fld input{width:100%;border:1px solid var(--border);border-radius:9px;padding:12px;font-size:14px;font-family:inherit;outline:none;}
#group_buying_area .mc-fld input:focus{border-color:var(--primary);}
#group_buying_area .mc-fld-row{display:flex;gap:10px;}
#group_buying_area .mc-fld-row .mc-fld{flex:1;}
#group_buying_area .mc-nocvc{font-size:11.5px;color:var(--hint);background:var(--belief);border-radius:8px;padding:10px 12px;margin-bottom:14px;line-height:1.5;}
#group_buying_area .mc-modal-err{font-size:12px;color:var(--hot,#e5362c);font-weight:700;min-height:15px;margin-top:4px;}
#group_buying_area .mc-modal-btns{display:flex;gap:9px;margin-top:8px;}
#group_buying_area .mc-modal-btns button{flex:1;border-radius:10px;padding:13px;font-size:14px;font-weight:800;cursor:pointer;border:none;}
#group_buying_area .mc-modal-btns .cancel{background:var(--belief);color:var(--muted);}
#group_buying_area .mc-modal-btns .confirm{background:var(--primary);color:#fff;}
#group_buying_area .mc-modal-btns .danger{background:var(--hot,#e5362c);color:#fff;}
/* --- ASP 이식 보정 --- */
#group_buying_area .s12-tab{text-decoration:none;}
#group_buying_area .my-card{display:block;text-decoration:none;color:inherit;}
/* 참여 카드 하단 관리 링크(참여한 탭) - 카드가 a 라서 중첩 대신 카드 밖에 둔다 */
#group_buying_area .my-card-act{margin:-8px 0 14px;text-align:right;}
#group_buying_area .my-card-act a{font-size:12.5px;font-weight:700;color:var(--muted);text-decoration:none;}
#group_buying_area .my-card-act a:hover{color:var(--trendy);text-decoration:underline;}
#group_buying_area .my-thumb{overflow:hidden;}
#group_buying_area .my-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
/* 카드 썸네일 미등록 아이콘 (2026-09-28 사용자 요청) : 이모지 PNG(emoji_box) 를 저작권 문제로 교체.
   메인 히어로(.hcard-thumb.no-img) 와 같은 코드 그림(가로 액자 + 해 + 봉우리, 회색 선 #C4C7D0). asp 는 그대로.
   실제 썸네일도 같은 .my-thumb img 라 src 로 이모지만 고른다. 원래 그림은 object-position 으로 밖으로 밀고 SVG 를 배경으로 깐다.
   :has() 없이 되므로 구형 앱 웹뷰에서도 동작. 크기는 원래 이모지와 같은 28px */
#group_buying_area .my-thumb img[src*="emoji_box"]{width:28px;height:28px;object-fit:none;object-position:-9999px 0;background:var(--gb-svg-noimg-lg) center/contain no-repeat;}	/* PC · 모바일 공통 (2026-10-15 : 모바일에 이모지 PNG 가 그대로 보여 PC 전용 조건 삭제) */
#group_buying_area .gb-my-login{max-width:560px;margin:50px auto;text-align:center;color:var(--muted);font-size:14px;line-height:1.7;}
#group_buying_area .gb-my-login a{display:inline-block;margin-top:12px;color:var(--primary);font-weight:700;}

/* ===== 2026-08-26 추가 : 탭 pane(새로고침 없는 전환) + 참여내역 수정 ===== */
/* 3탭 내용을 서버에서 모두 렌더하고 JS 가 pane 을 토글한다(요청 0회). */
#group_buying_area .s12-pane[hidden]{display:none;}
#group_buying_area .s12-tab{font-family:inherit;text-decoration:none;}
/* 참여내역 수정 : 변경(수량ㆍ상품취소)이 하나라도 생기면 활성 */
#group_buying_area .my-edit{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;height:38px;border:none;border-radius:6px;padding:0 20px;font-size:13px;font-weight:700;cursor:pointer;background:var(--primary);color:var(--clear);}	/* 주요 버튼 크기 통일 (2026-10-15) */
#group_buying_area .my-edit:disabled{background:var(--belief);color:var(--hint);cursor:not-allowed;}
#group_buying_area .my-edit:not(:disabled):hover{background:#33356b;}
/* 변경 표시 : 수량이 바뀐 행ㆍ취소 예정 행 */
#group_buying_area .s13-row.changed{background:#fffbe9;}
#group_buying_area .s13-row.removed{opacity:.55;}
#group_buying_area .s13-row.removed .s13-pname,#group_buying_area .s13-row.removed .s13-pamt{text-decoration:line-through;}
#group_buying_area .s13-row.removed .s13-stepper{display:none;}
/* 안내 팝업 확인 버튼 (취소 확인 모달의 빨간 버튼과 달리 중립 색) */
#group_buying_area .gb-alert-ok{flex:1;border:none;background:var(--primary);color:var(--clear);border-radius:9px;padding:12px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;}
#group_buying_area .gb-alert-ok:hover{background:#33356b;}
#group_buying_area .s13-editnote{font-size:11.5px;color:var(--attention);font-weight:700;margin-top:8px;min-height:15px;}
/* [공통 · 새 기능] 모바일 서버 파일에만 있던 새 기능용 규칙. PC 에 없는 클래스라 PC 에도 적용 (2026-10-14) */
#group_buying_area .my-agree{height:36px;padding:0 14px;border:1px solid var(--border,#E4E6EC);background:#fff;color:var(--trendy,#222450);border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;}
#group_buying_area .my-agree:hover{border-color:var(--trendy,#222450);}
#group_buying_area .my-agree:disabled{color:var(--text-light,#9A9CA8);cursor:default;}
#group_buying_area .s13-lnstate{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:9999px;font-size:11px;font-weight:800;}
#group_buying_area .s13-lnstate.ln-dc{background:var(--belief,#F0F1F6);color:var(--trendy,#222450);}
#group_buying_area .s13-lnstate.ln-full{background:#FFF3CD;color:#7a5b00;}
#group_buying_area .s13-lnstate.ln-out{background:#FDEAEA;color:#8f2420;}
#group_buying_area.gb-my-body [hidden]{display:none !important;}
#group_buying_area .my-badge-card{display:inline-block;font-size:10.5px;font-weight:500;padding:1px 8px;border-radius:4px;margin-bottom:6px;margin-left:1px;}	/* 카드등록완료 : 자동결제 배지와 같은 모양. 색은 아래 정보 배지 공통 규칙 */
/* 할인 못 받으면 정가 결제 / 제외 라벨(.my-badge-under) : 모양은 옆 자동결제 라벨(.my-badge-method)과 같게, 위 규칙에 함께 묶음. 모바일 테두리 없음(PC 와 같게). 색은 아래 정보 배지 공통 규칙(테두리) (2026-10-15 사용자 요청. 이전 점선 · 알약 규칙 삭제) */
#group_buying_area .my-badge-under.on{font-weight:500;}	/* 정가 결제 : 제외와 같은 모양 · 굵기 (2026-10-15 사용자 지정) */
/* 배지 색 규칙 (2026-10-15 사용자 결정) : 색 채움 = 상태 배지만(결제 완료 · 신청완료 · 신청취소 등, 카드당 1개).
   나머지 정보 배지(자동결제 · 카드등록완료 · 정가 결제/제외)는 전부 흰 바탕 + 회색 글자 + 얇은 회색 테두리 하나로. 테두리 1px 만큼 위아래 여백을 줄여 상태 배지와 높이 같게 */
#group_buying_area .my-badge-method,#group_buying_area .my-badge-under,#group_buying_area .my-badge-card{background:var(--clear,#fff);color:var(--muted,#666);border:1px solid var(--border,#E4E5EC);padding:0 7px;}
#group_buying_area .my-card.ended .my-badge-method,#group_buying_area .my-card.ended .my-badge-under,#group_buying_area .my-card.ended .my-badge-card{background:transparent;color:#888;}	/* 종료 · 취소 카드 : 흰 배지가 회색 카드 위에 떠 보여 카드 바탕을 따르고 글자는 다른 줄과 같은 #888 (2026-10-15 사용자 요청) */
/* 공동구매 달성 문구 (2026-10-15 사용자 요청) : 녹색은 옆 결제 완료 라벨과 겹치고 회색 정보 줄에 묻혀서 남색 · 굵게 · 체크 원 아이콘으로.
   남색 = 아래 진행 막대와 같은 --primary. 아이콘 = gb_main .gb-ico-check-circle 과 같은 SVG(대시보드는 gb_main 을 안 불러 여기 직접). 위 여백 8px 로 정보 줄과 띄움 */
#group_buying_area .gb-label-achieved{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:13px;font-weight:700;color:var(--primary);}
#group_buying_area .gb-label-achieved::before{content:"";flex:none;width:14px;height:14px;background-color:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;-webkit-mask-image:var(--gb-svg-check-circle);mask-image:var(--gb-svg-check-circle);}
#group_buying_area .my-thumb.has-photo{padding:0;overflow:hidden;}
#group_buying_area .my-thumb-photo{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
#group_buying_area .s13-tag{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle;}
/* 상품 줄 태그 위치 (2026-10-15 사용자 요청) : 상품명 옆에 이어 붙이면 모바일에서 태그만 다음 줄로 밀려 왼쪽 여백 6px · 세로 정렬이 어긋났다.
   폭과 관계없이 자기 줄 · 왼쪽 맞춤으로. 디자인 페이지 asp 는 태그를 옵션 줄 뒤로 옮김(상품명 -> 옵션 -> 태그). 옛 마크업(상품명 칸 안)에서도 상품명 아래로 나옴. fit-content = 글자 길이만큼의 상자. 빈 태그(hidden)는 계속 숨김 */
#group_buying_area .s13-tag{display:block;width:-webkit-fit-content;width:fit-content;max-width:100%;box-sizing:border-box;margin:4px 0 0;vertical-align:baseline;}	/* display:table 은 상위 border-collapse:collapse 에서 안쪽 여백이 사라져 교체 (2026-10-15) */
#group_buying_area .s13-tag[hidden]{display:none;}
/* 정가 결제 / 제외 태그 클래스 이름 (2026-10-15) : full · ex 가 모바일 공통 css 의 .full 과 충돌해 s13-tag-full · s13-tag-ex 로 변경. 디자인 페이지는 새 이름, stay10 · www · 모바일은 개발 반영 전까지 옛 이름이라 둘 다 받음 */
#group_buying_area .s13-tag-full,#group_buying_area .s13-tag.full{background:#FFF7D6;color:#7a5a00;border:1px solid var(--friendly,#FFCE2D);}
#group_buying_area .s13-tag.full{padding:1px 6px !important;}	/* 옛 이름(full)만 : 모바일 공통 css(service_s7/menu/main/css/new/common.css)의 .full{padding:0 !important} 와 충돌. 개발 반영(s13-tag-full) 후 삭제 (2026-10-15) */
#group_buying_area .s13-tag-ex,#group_buying_area .s13-tag.ex{background:var(--belief);color:var(--muted);border:1px solid var(--border);}
#group_buying_area .s13-row.is-ex .s13-pname{color:var(--muted);}
#group_buying_area .s13-pamt.s13-ex{color:var(--muted);}
#group_buying_area .s13-ladder-item{margin-bottom:10px;}
#group_buying_area .s13-ladder-name{font-size:12.5px;font-weight:700;color:var(--ink);}
#group_buying_area .s13-ladder-next{font-size:11.5px;font-weight:700;color:var(--primary);margin-top:4px;}
#group_buying_area .btn-under{border-style:dashed;}
/* [모바일 전용 · 599px 이하] PC 에도 스타일이 있는 요소라 모바일에만 적용 (2026-10-14) */
@media (max-width:599px){#group_buying_area a.us-btn{display:inline-block;text-decoration:none;line-height:1.4;}}	/* a.btn-repay 는 위 inline-flex 로 (2026-10-15) */
@media (max-width:599px){#group_buying_area .my-action-btns{align-items:center;}}
/* [공통 · 새 기능] 모바일 서버 파일에만 있던 새 기능용 규칙. PC 에 없는 클래스라 PC 에도 적용 (2026-10-14) */
#group_buying_area .my-action-btns .gb-ico,#group_buying_area .card-share-item .gb-ico{width:16px;height:16px;margin-right:5px;vertical-align:-3px;}
#group_buying_area .card-share-item:disabled{opacity:.5;cursor:not-allowed;background:none;}
#group_buying_area .card-share-item:disabled .gb-ico{filter:grayscale(1);}
#group_buying_area .my-card-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40%);gap:24px;align-items:start;}
#group_buying_area .my-card-2col.no-stats{display:block;}
#group_buying_area .my-stats-h{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:10px;}
#group_buying_area .my-stats .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
#group_buying_area .my-stats .kpi{background:var(--belief);border-color:transparent;padding:13px 14px;}
#group_buying_area .my-stats .kpi .v{font-size:21px;margin-top:5px;}
#group_buying_area .kpi .v{font-weight:700;}	/* 현황 숫자 굵기 900 -> 700 (2026-10-15 사용자 요청). gb_ui 공용 값이라 마이 페이지에서만 덮어씀 */
@media (max-width:640px){#group_buying_area .my-card-2col{grid-template-columns:1fr;gap:14px;}}
#group_buying_area .my-note-box{margin-top:8px;padding:9px 11px;border-radius:8px;font-size:12.5px;line-height:1.5;}
#group_buying_area .my-note-box.bad{background:#fdeceb;color:#8a2a22;}
#group_buying_area .my-note-box.ok{background:#eefaf0;color:#1e6b3a;}
#group_buying_area .my-note-box.pre{white-space:pre-line;}
#group_buying_area .my-note-box .nb-sub{margin-top:2px;font-size:11.5px;}
#group_buying_area .nb-gap{margin-top:9px;}
#group_buying_area .gb-ico-inline{width:13px;height:13px;vertical-align:-2px;margin-right:2px;}
/* 비공개 자물쇠 아이콘 (2026-10-15 사용자 요청) : 이모지 PNG(emoji_lock) 교체. 규격은 체크 원 · 느낌표와 같은 24 격자 · 선 1.5, 색은 번호 줄 글자색(currentColor).
   asp 는 그대로 두고 src 로 이모지만 골라 원래 그림은 밖으로 밀고, 글자색 바탕을 자물쇠 모양으로 오려 낸다(mask). 크기는 원래 13px */
#group_buying_area img.gb-ico-inline[src*="emoji_lock"]{display:inline-block;object-fit:none;object-position:-9999px 0;background-color:currentColor;-webkit-mask:var(--gb-svg-lock) center/contain no-repeat;mask:var(--gb-svg-lock) center/contain no-repeat;}	/* 자물쇠 모양 세로 비율로 다시 그림(몸통 14x10.5 · 고리 높게 · 선 1.8 : 13px 에서 선이 흐려지지 않게) · 모바일 공통 css(number/css/base.css)의 img{display:block} 때문에 혼자 한 줄이 되어 inline-block (2026-10-15) */
#group_buying_area .card-action-row a.btn-pri{display:inline-flex;align-items:center;text-decoration:none;color:#fff;}
#group_buying_area .card-action-row a.btn-ghost{text-decoration:none;}
#group_buying_area .card-action-row .gb-ico{width:16px;height:16px;margin-right:5px;}
/* 개설한 카드 버튼 줄 : 왼쪽 관리 대시보드 · 공유하기 / 오른쪽 묶음 수정하기 · 승인 취소 (2026-10-15 사용자 요청). 좁아서 줄이 넘치면 오른쪽 묶음이 다음 줄 오른쪽으로 */
#group_buying_area .card-action-end{display:flex;gap:8px;margin-left:auto;}
/* 승인 취소 : 옆 compact 버튼(gb_ui .btn-ghost.compact)과 높이 · 좌우 여백 맞춤 */
#group_buying_area .card-action-end .btn-cancel{height:38px;padding:0 20px;}
/* 버튼 줄과 위 텍스트 구분 (2026-10-15 사용자 요청). 이 규칙은 버튼 줄이 텍스트 칸 안에 있던 옛 마크업(stay10 · www 개발 반영 전)용 */
#group_buying_area .my-nos + .card-action-row{margin-top:13px;padding-top:13px;border-top:1px solid var(--border);}
/* 새 마크업 : 버튼 줄이 카드 맨 아래 전체 폭(.my-card-2col 다음). 구분선도 카드 전체 폭. 값은 .my-action 과 같은 13px */
#group_buying_area .my-card-2col + .card-action-row{margin-top:13px;padding-top:13px;border-top:1px solid var(--border);}
/* 모바일 개설 카드 버튼 줄 2칸 같은 폭 (2026-10-15 사용자 요청) : 글자 길이마다 폭이 달라 어수선해서 1:1 격자로. 오른쪽 묶음(.card-action-end)도 같은 격자에 넣음.
   새 마크업(버튼 줄이 카드 맨 아래, .my-card-2col 다음)에만 적용. 옛 마크업에는 해당 없음 */
@media (max-width:599px){#group_buying_area .my-card-2col + .card-action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}#group_buying_area .my-card-2col + .card-action-row .card-action-end{display:contents;}#group_buying_area .my-card-2col + .card-action-row > a,#group_buying_area .my-card-2col + .card-action-row > button,#group_buying_area .my-card-2col + .card-action-row .card-action-end > a,#group_buying_area .my-card-2col + .card-action-row .card-action-end > button,#group_buying_area .my-card-2col + .card-action-row .card-share-wrap,#group_buying_area .my-card-2col + .card-action-row .card-share-wrap > button{width:100%;margin:0;box-sizing:border-box;}}
#group_buying_area .btn-directpay .gb-ico{width:16px;height:16px;margin-right:5px;vertical-align:-3px;}
#group_buying_area .s12-empty .em-sub{font-size:12.5px;color:var(--hint);margin-top:4px;}
#group_buying_area .my-sanc-banner.all-done{background:#f3faf5;border-color:#bfe3c9;}
#group_buying_area .my-sanc-head .sh-sum{flex:1;}
#group_buying_area .my-sanc-head .sh-ok{color:#3a7a4a;font-weight:600;}
#group_buying_area .my-sanc-head .sh-sub{color:#8a8a8a;font-weight:400;}
#group_buying_area .my-sanc-head .sh-tg{font-size:12px;white-space:nowrap;}
#group_buying_area .my-sanc-row.is-done{opacity:.7;}
#group_buying_area .my-sanc-row .sr-t{font-size:12.5px;font-weight:700;}
#group_buying_area .my-sanc-row .sr-st{margin-top:2px;font-size:11px;font-weight:700;color:#8a2a22;}
#group_buying_area .my-sanc-row .sr-st.done{color:#1e6b3a;}
#group_buying_area .my-sanc-row .sr-meta{font-size:11.5px;color:#8a8a8a;margin-top:2px;}
#group_buying_area .my-sanc-row .sr-reason{margin-top:3px;font-size:12px;color:#5a5a5a;}
#group_buying_area .my-sanc-row .sr-release{margin-top:3px;font-size:11.5px;color:#1e6b3a;}
/* [모바일 전용 · 599px 이하] PC 에도 스타일이 있는 요소라 모바일에만 적용 (2026-10-14) */
@media (max-width:599px){#group_buying_area .my-review-banner img{flex-shrink:0;margin-top:1px;}}
/* [공통 · 새 기능] 모바일 서버 파일에만 있던 새 기능용 규칙. PC 에 없는 클래스라 PC 에도 적용 (2026-10-14) */
#group_buying_area .my-sec-h{font-size:13px;font-weight:700;color:var(--muted);margin:16px 0 8px;}
#group_buying_area .my-sec-h span{font-weight:500;}
#group_buying_area .gb-rs-agree{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;color:var(--ink);cursor:pointer;}
/* 관리 대시보드 · 공유하기 버튼의 이모지 PNG 아이콘 숨김 (2026-10-15 사용자 지시). 마크업(img)은 개발팀 담당이라 CSS 로만 처리 */
#group_buying_area img.gb-ico[src*="emoji_chart"],#group_buying_area img.gb-ico[src*="emoji_link"]{display:none;}
/* 이모지 PNG → SVG : 마이 공동구매 남은 아이콘 (2026-10-15 사용자 요청). 방식은 위 emoji_lock 과 같음(src 로 골라 mask). 색은 글자색, 크기는 원래 img 크기
   공유 메뉴의 링크 복사는 위 '공유하기 버튼 아이콘 숨김' 규칙보다 구체적인 선택자로 다시 보이게 한다(공유하기 버튼만 숨김 유지) */
#group_buying_area .card-share-item img.gb-ico[src*="emoji_link"]{object-fit:none;object-position:-9999px 0;display:inline-block;background-color:currentColor;-webkit-mask:var(--gb-svg-link) center/contain no-repeat;mask:var(--gb-svg-link) center/contain no-repeat;}
#group_buying_area .card-share-item img.gb-ico[src*="emoji_chat"]{object-fit:none;object-position:-9999px 0;background-color:currentColor;-webkit-mask:var(--gb-svg-chat) center/contain no-repeat;mask:var(--gb-svg-chat) center/contain no-repeat;}
#group_buying_area .card-share-item img.gb-ico[src*="emoji_camera"]{object-fit:none;object-position:-9999px 0;background-color:currentColor;-webkit-mask:var(--gb-svg-camera) center/contain no-repeat;mask:var(--gb-svg-camera) center/contain no-repeat;}
#group_buying_area img.gb-ico[src*="emoji_card"]{object-fit:none;object-position:-9999px 0;background-color:currentColor;-webkit-mask:var(--gb-svg-card) center/contain no-repeat;mask:var(--gb-svg-card) center/contain no-repeat;}
#group_buying_area img.gb-ico[src*="emoji_refresh"]{object-fit:none;object-position:-9999px 0;background-color:currentColor;-webkit-mask:var(--gb-svg-refresh) center/contain no-repeat;mask:var(--gb-svg-refresh) center/contain no-repeat;}
#group_buying_area .my-sanc-head img[src*="emoji_warning"]{object-fit:none;object-position:-9999px 0;flex-shrink:0;background-color:currentColor;-webkit-mask:var(--gb-svg-warning) center/contain no-repeat;mask:var(--gb-svg-warning) center/contain no-repeat;}
#group_buying_area .us-ic img[src*="emoji_warning"]{object-fit:none;object-position:-9999px 0;display:block;background-color:currentColor;-webkit-mask:var(--gb-svg-warning) center/contain no-repeat;mask:var(--gb-svg-warning) center/contain no-repeat;}
/* ===== 참여 카드 버튼 줄 정리 (2026-10-16 사용자 지시 : 버튼 폭 · 모양이 제각각이라 틀어져 보임) =====
   마크업 순서 : 참여 취소 · 결제수단 관리 · 정가 체크(.btn-under) · 공유하기(.card-share-wrap) · 참여내역 수정(.my-edit). asp 는 그대로.
   - 버튼 안 아이콘은 모두 숨김(결제수단 카드 아이콘이 혼자만 보였음. 공유하기 아이콘은 이미 숨김). 공유 펼침 메뉴 안 아이콘은 그대로
   - 정가 체크는 "행동"이 아니라 켜고 끄는 "설정"이라 PC · 모바일 모두 테두리 없는 체크박스 + 글자로 구분(점선 버튼은 깨진 버튼처럼 보여 삭제).
     체크 모양은 개설 2단계 체크박스와 같은 값(16px · 테두리 #d9d9d9 · 라운드 2px · 켜지면 남색 칸 + 흰 체크 --gb-svg-check-white).
     켜짐은 스크립트가 바꾸는 data-on="1" */
#group_buying_area .my-action-btns > button img.gb-ico,
#group_buying_area .my-action-btns .card-share-wrap > button img.gb-ico{display:none;}
#group_buying_area .my-action-btns .btn-under{order:1;justify-content:flex-start;gap:8px;padding:0 2px;border:0;border-radius:0;background:none;color:var(--ink);font-size:13px;font-weight:600;}
#group_buying_area .my-action-btns .btn-under:hover{color:var(--ink);}
#group_buying_area .my-action-btns .btn-under::before{content:'';flex-shrink:0;width:16px;height:16px;box-sizing:border-box;border:1px solid #d9d9d9;border-radius:2px;background:#fff center/16px no-repeat;}
#group_buying_area .my-action-btns .btn-under[data-on="1"]::before{background-color:var(--primary);border-color:var(--primary);background-image:var(--gb-svg-check-white);}
#group_buying_area .my-action-btns .btn-under:disabled{opacity:.5;}
#group_buying_area .my-action-btns .my-edit{order:2;}

/* PC : [참여 취소][결제수단 관리][공유하기] | [체크] 정가 체크 ...... [참여내역 수정]
   세로 구분선(1px · 16px · --border)은 체크 앞 버튼 밖 왼쪽 가운데. 높이는 옆 버튼 38px 그대로라 세로 가운데 */
@media (min-width:600px){
#group_buying_area .my-action-btns .btn-under{position:relative;margin-left:13px;}
#group_buying_area .my-action-btns .btn-under::after{content:'';position:absolute;left:-11px;top:50%;width:1px;height:16px;margin-top:-8px;background:var(--border);}
}

/* 모바일 : [참여 취소][결제수단 관리][공유하기] 같은 폭 한 줄 / 위 선 + 체크 한 줄 / 참여내역 수정 전체 폭.
   버튼 수가 상태마다 달라(주문 현황 등) 격자 대신 같은 폭 flex(flex:1 1 0)로 둔다 */
@media (max-width:599px){
#group_buying_area .my-action-btns{align-items:stretch;gap:8px;}
#group_buying_area .my-action-btns > button,
#group_buying_area .my-action-btns .card-share-wrap{flex:1 1 0;min-width:0;margin:0;box-sizing:border-box;}
#group_buying_area .my-action-btns > button{padding:0 8px;white-space:nowrap;}
#group_buying_area .my-action-btns .card-share-wrap > button{width:100%;box-sizing:border-box;padding:0 8px;white-space:nowrap;}
#group_buying_area .my-action-btns .btn-under{flex:1 1 100%;height:auto;margin-top:2px;padding:12px 2px 2px;border-top:1px solid #efefef;}
#group_buying_area .my-action-btns .btn-under:hover{border-top-color:#efefef;}	/* 터치 기기 hover 잔상으로 위 선이 남색이 되지 않게 */
#group_buying_area .my-action-btns .my-edit{flex:1 1 100%;margin:0;font-size:12px;}
}

/* 수량 안내 + 참여내역 수정 한 줄 (2026-10-16 사용자 지시 : 수정 버튼이 위쪽 버튼 줄에 있어 수량과 떨어져 있었음).
   개발팀이 dashboard.asp 에서 .my-edit 를 .s13-qnote 옆으로 옮기고 둘을 .s13-qfoot 로 묶는다(전달 문서 13번). 새 클래스라 asp 보다 먼저 올라가도 영향 없음.
   PC : 안내 왼쪽 · 버튼 오른쪽 / 모바일 : 안내 아래 버튼 전체 폭. 위쪽 버튼 줄의 .my-action-btns .my-edit 규칙은 asp 반영 전까지 쓰이므로 남겨 둔다 */
#group_buying_area .s13-qfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;}
#group_buying_area .s13-qfoot .s13-qnote{margin-top:0;min-width:0;}
#group_buying_area .s13-qfoot .my-edit{flex-shrink:0;margin-left:0;}
@media (max-width:599px){
#group_buying_area .s13-qfoot{flex-direction:column;align-items:stretch;gap:10px;}
#group_buying_area .s13-qfoot .my-edit{width:100%;font-size:12px;}
}