/* Bault Page CSS — 특정 화면 전용 스타일.
 *
 * 메인(sec-*), 쇼핑 목록(shop-*), 상품상세(detail-* · hg-* · 구매패널), 장바구니(cart-*),
 * 주문서(co-* · bf-* · 약관 · 인증), 주문완료(oc-*), 교환권, 배송지 모달, 로그인 페이지,
 * 마이페이지(my-*), 그리고 이들에 딸린 반응형(@media)을 담는다.
 *
 * common.css 다음에 로드된다(header.php). 공용 규칙을 덮어써야 하는 페이지 규칙이 있으므로
 * 순서를 바꾸면 레이아웃이 틀어진다.
 */
/* Main Content */
.main-wrap { padding: 16px max(16px, calc((100% - 480px) / 2)) 80px; display: flex; flex-direction: column; gap: 16px; }
.main-wrap .sec { }
.btn-glass { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 40px; padding: 0 24px; border-radius: 60px; background: rgba(255,255,255,0.1); color: #fff; font-size: 14px; font-weight: 700; align-self: flex-start; }
.ph-img { display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(255,255,255,0.25); border-radius: 8px; color: rgba(255,255,255,0.45); font-size: 12px; }

/* ① 히어로 배너 */
.sec-banner { position: relative; display: block; height: 396px; overflow: hidden; border-radius: 16px; }
.sec-banner .bn-bg { position: absolute; inset: 0;  background-image: var(--bg-mo); background-size: cover; background-position: center; background-repeat: no-repeat; }
.sec-banner .bn-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 80%); }
.sec-banner .bn-content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 16px 46px; gap: 8px; }
.sec-banner .bn-label { font-size: 14px; font-weight: 900; line-height: 16.7px; color: rgba(255,255,255,0.5); }
.sec-banner .bn-bottom { display: flex; flex-direction: column; gap: 16px; }
.sec-banner .bn-title { font-size: 32px; line-height: 36px; font-weight: 900; color: #fff; }
.sec-banner .bn-title img { display: block; min-width: 174px; max-width: 100%; height: auto; }
.sec-banner .bn-dots { position: absolute; left: 16px; bottom: 24px; z-index: 2; display: flex; align-items: center; gap: 4px; }
.sec-banner .bn-dots .dot { width: 6px; height: 6px; border-radius: 24px; background: rgba(255,255,255,0.3); transition: width 0.2s ease, background 0.2s ease; }
.sec-banner .bn-dots .dot.on { width: 20px; height: 4px; background: rgba(255,255,255,0.7); }

/* ② 컬렉션 (Trading Cards) */
.sec-collection { padding-top: 24px; background: transparent; display: flex; flex-direction: column; align-items: center; gap:16px; margin-bottom:24px;}
.sec-collection .col-body { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sec-collection .col-thumb { width: 160px; height: 240px; }
.sec-collection .col-dots { position: absolute; top: 280px; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 4px; }
.sec-collection .col-body { margin-bottom: 38px; }
.sec-collection .col-dots .dot { width: 6px; height: 6px; border-radius: 24px; background: rgba(255,255,255,0.2); transition: background 0.2s ease; }
.sec-collection .col-dots .dot.on { background: rgba(255,255,255,0.5); }
.sec-collection .col-info { align-self: stretch; padding: 16px 0 24px; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid rgba(255, 255, 255, 0.10);}
.sec-collection .col-head { display: flex; flex-direction: column; gap: 8px; }
.sec-collection .col-tags { display: flex; align-items: center; gap: 8px; }
.sec-collection .tag-new { font-size: 10px; font-weight: 900; line-height: 14px; letter-spacing: -0.1px; color: #d50000; }
.sec-collection .tag-sep { width: 1px; height: 8px; background: rgba(255,255,255,0.1); }
.sec-collection .tag-edition { font-size: 10px; font-weight: 900; line-height: 14px; letter-spacing: -0.1px; color: #b8a063; }
.sec-collection .tag-status { font-size: 10px; font-weight: 900; line-height: 14px; letter-spacing: -0.1px; color: #9EA4AA; }
.sec-collection .carousel-slide.is-unavailable .col-thumb { opacity: 0.6; }
.sec-collection .col-name { font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; color: #fff; }
.sec-collection .col-price { font-size: 14px; font-weight: 400; line-height: 16.7px; color: #fff; }
.sec-collection .col-price .unit { color: rgba(255,255,255,0.5); }


.sec-banner.js-carousel .carousel-track,
.sec-banner.js-carousel .carousel-slide { height: 100%; }

.sec-collection.js-carousel { display: block; padding-top: 0; margin-bottom: 24px;  }
.sec-collection .carousel-slide { width:100%; background-color: #1D1D1D; display: flex; flex-direction: column; align-items: center; padding: 24px 16px 0; border-radius: 16px;}

/* ③ 피처 */
.sec-feature { padding: 40px 0 16px; display: flex; flex-direction: column; gap: 0; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.10); border-radius: none; }
.sec-feature .ft-coming { height: 228px; background: #12333c url('../../images/main/about.png') center / auto 100% no-repeat; border-radius: 17px; }
.sec-feature .ft-cards { display: flex; flex-direction: column; }
.sec-feature .ft-card { padding: 46px 0 24px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.sec-feature .ft-card:last-child { padding-bottom: 16px; }
.sec-feature .ft-card:not(:first-child)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0 4px, transparent 4px 8px); }
.sec-feature .ft-card h3 { font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.12px; color: rgba(255,255,255,0.4); }
.sec-feature .ft-card p { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: rgba(255,255,255,0.7); }

/* 쇼핑 리스트 페이지 */
.shop-wrap { padding: 16px max(16px, calc((100% - 480px) / 2)) 80px; display: flex; flex-direction: column; gap: 24px; }
.shop-head { display: flex; align-items: center; justify-content: space-between; }
.shop-head .shop-title { font-size: 24px; font-weight: 700; color: #fff; text-transform: uppercase; }
.shop-sort { display: none; }
.shop-body { display: flex; flex-direction: column; gap: 16px; }
.shop-card { display: flex; flex-direction: column; align-items: center; padding-top: 24px; background: #1d1d1d; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.24); overflow: hidden; }
.shop-card .shop-thumb { width: 160px; height: 240px; }
.shop-card .shop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shop-card .shop-thumb.empty { color: #C9CDD2; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.shop-card .shop-info { position: relative; align-self: stretch; padding: 32px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.shop-card .shop-info::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: rgba(255,255,255,0.1); }
.shop-card .col-head { display: flex; flex-direction: column; gap: 8px; }
.shop-card .col-tags { display: flex; align-items: center; gap: 8px; }
.shop-card .tag-new { font-size: 10px; font-weight: 900; line-height: 14px; letter-spacing: -0.1px; color: #d50000; }
.shop-card .tag-sep { width: 1px; height: 8px; background: rgba(255,255,255,0.1); }
.shop-card .tag-edition { font-size: 10px; font-weight: 900; line-height: 14px; letter-spacing: -0.1px; color: #b8a063; }
.shop-card .tag-status { font-size: 10px; font-weight: 900; line-height: 14px; letter-spacing: -0.1px; color: #9EA4AA; }
.shop-card.is-unavailable .shop-thumb { opacity: 0.6; }
.shop-card .p-name { font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; color: #fff; }
.shop-card .p-price { font-size: 14px; font-weight: 400; line-height: 16.7px; color: #fff; }
.shop-card .p-price .unit { color: rgba(255,255,255,0.5); }
.shop-coming { display: flex; align-items: center; justify-content: center; padding: 24px 0; background: #14343f; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.24); overflow: hidden; }
.shop-coming .coming-graphic { display: block; width: 100%; height: auto; }

/* 상품 상세 페이지 */
.detail-wrap { padding: 16px max(16px, calc((100% - 480px) / 2)) 40px; display: flex; flex-direction: column; gap: 16px; }
.detail-body { display: contents; }
.detail-left { display: flex; flex-direction: column; gap: 80px; }
.detail-top { display: flex; flex-direction: column; gap: 24px; }
.detail-title-box { display: flex; flex-direction: column; gap: 4px; }
.detail-title-box .tag-new { font-size: 12px; font-weight: 900; color: #FF002F; }
.detail-title-box .tag-status { font-size: 12px; font-weight: 900; color: #9EA4AA; }
.detail-title-box .p-name { font-size: 24px; font-weight: 400; color: #fff; }
.detail-title-box .p-price { font-size: 20px; font-weight: 900; color: #fff; }
.detail-gallery { display: flex; flex-direction: column; gap: 16px; }
.detail-main-img { height: 288px; padding: 16px 0; border-radius: 16px; background: #F7F8F9; display: flex; align-items: center; justify-content: center; }
.detail-main-img img { height: 256px; width: auto; }
.detail-main-img.empty { color: #C9CDD2; font-size: 13px; }
.detail-thumbs { display: flex; gap: 8px; overflow-x: auto; }
.detail-thumbs .thumb { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; background: #9EA4AA; flex: none; }
.detail-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-thumbs .thumb.on { outline: 2px solid #fff; outline-offset: -2px; }
.detail-info { display: flex; flex-direction: column; }
.detail-info-box { padding: 16px; background: rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 4px; }
.detail-info-box:first-child { border-radius: 8px 8px 0 0; }
.detail-info-box:last-child { border-radius: 0 0 8px 8px; }
.detail-info-box .box-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.detail-info-box p { font-size: 14px; font-weight: 400; color: #C9CDD2; line-height: 1.5; }
.detail-desc { display: flex; flex-direction: column; gap: 24px; }
.detail-desc .desc-head { display: flex; flex-direction: column; gap: 16px; }
.detail-desc .desc-title { font-size: 24px; font-weight: 700; color: #fff; }
.detail-desc .desc-text { font-size: 16px; font-weight: 400; color: #fff; line-height: 1.5; }
.detail-desc .desc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-desc .desc-grid .cell { height: 114px; border-radius: 8px; overflow: hidden; }
.detail-desc .desc-grid .cell img { width: 100%; height: 100%; object-fit: cover; }
.detail-desc .desc-grid.detail-desc-pc { display: none; }

.hg-detail { display: flex; flex-direction: column; }

/* 1. 히어로 */
.hg-hero { display: flex; flex-direction: column; margin-bottom: 80px; }
.hg-hero .hg-label { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #b8a063; margin-bottom: 4px; }
.hg-hero .hg-title { font-size: 24px; font-weight: 400; line-height: 28px; letter-spacing: -0.48px; color: #fff; margin-bottom: 24px; }
.hg-price { display: flex; flex-direction: column; margin-bottom: 24px; border-top: 2px solid rgba(255,255,255,0.3); }
.hg-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.hg-price-row:last-child { border-bottom: 2px solid rgba(255,255,255,0.3); }
.hg-price-left { display: flex; align-items: baseline; gap: 4px; }
.hg-price-amount { font-size: 16px; font-weight: 400; line-height: 19.1px; color: #fff; }
.hg-price-unit { font-size: 16px; font-weight: 400; line-height: 19.1px; color: #fff; opacity: 0.5; }
.hg-price-count { font-size: 14px; font-weight: 400; line-height: 16.7px; color: #fff; opacity: 0.5; }
.hg-main-img { position: relative; height: 272px; padding: 16px 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.24); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 16px; }
.hg-main-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.hg-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; user-select: none; }
.hg-thumbs::-webkit-scrollbar { display: none; }
.hg-thumb { position: relative; flex: none; width: 80px; height: 80px; padding: 8px ; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 4px 4px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.hg-thumb img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.hg-thumb img.is-landscape { object-fit: cover; }
.hg-thumb .hg-thumb-overlay { position: absolute; inset: 0; border-radius: 8px; background: rgba(0,0,0,0.3); box-shadow: 1px 2px 4px rgba(0,0,0,0.3); }
.hg-thumb.hg-thumb-on .hg-thumb-overlay { display: none; }
.hg-thumb.hg-thumb-on { box-shadow: none; }
.hg-nav { position: absolute; top: 0; bottom: 0; width: 50%; border: 0; background: transparent; padding: 0; cursor: pointer; z-index: 2; }
.hg-nav-prev { left: 0; }
.hg-nav-next { right: 0; }

/* 공통 블록(CONFIGURATION / PACK BREAK / COLLECT SET / BASE SET) */
.hg-block-title { font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: -0.32px; color: #fff; margin-bottom: 8px; }
.hg-desc { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #fff; opacity: 0.8; }
.hg-note { font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #fff; opacity: 0.3; }
.hg-list { display: flex; flex-direction: column; gap: 6px; }
.hg-list-plain li { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #fff; opacity: 0.6; }
.hg-list-dot li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #fff; opacity: 0.6; }
.hg-list-dot li.hg-list-sub { font-size: 12px; line-height: 14px; letter-spacing: -0.12px; gap: 4px; opacity: 0.4; }
.hg-list-dot.hg-list-sm li { font-size: 12px; line-height: 14px; letter-spacing: -0.12px; gap: 4px; opacity: 0.5; }
.hg-dot { flex: none; width: 3px; height: 3px; margin-top: 7px; border-radius: 50%; background: rgba(255,255,255,0.4); }
.hg-list-dot li.hg-list-sub .hg-dot,
.hg-list-dot.hg-list-sm li .hg-dot { margin-top: 5px; }

/* 2. CONFIGURATION / PACK BREAK */
.hg-config { display: flex; flex-direction: column; margin-bottom: 40px; }
.hg-config picture { display: block; padding-bottom: 24px; margin-bottom: 16px; border-bottom: 2px solid rgba(255,255,255,0.3); }
.hg-config .hg-logo { min-width: 174px; max-width: 100%; height: auto; display: block; }
.hg-config .hg-block:first-of-type { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.hg-config .hg-block:last-of-type { padding-bottom: 16px; border-bottom: 2px solid rgba(255,255,255,0.3); }
.hg-config .hg-block-title { opacity: 0.8; }
.hg-config .hg-list-dot { gap: 4px; }

/* 3. COLLECT SET */
.hg-collect { margin-bottom: 24px; }
.hg-collect .hg-collect-head { margin-bottom: 16px; }
.hg-collect .hg-collect-head .hg-block-title { margin-bottom: 8px; }
.hg-collect .hg-list { margin-bottom: 16px; }

/* 카드 쇼케이스 */
.hg-showcase { margin-left: -16px; margin-right: -16px; }
.hg-showcase img { display: block; width: 100%; height: auto; }
.hg-showcase .hg-showcase-pc { display: none; }

/* 5. BASE SET */
.hg-baseset { margin-top: 40px; margin-bottom: 48px; }
.hg-baseset .hg-desc { display: block; margin-bottom: 16px; }

/* 6. HIGHLIGHT */
.hg-highlight { display: flex; flex-direction: column; margin-top: 80px; }
.hg-highlight .hg-highlight-logo-wrap { padding-bottom: 24px; margin-bottom: 16px; border-bottom: 2px solid rgba(255,255,255,0.3); }
.hg-highlight .hg-highlight-logo { display: block; width: 220px; height: 21px; }
.hg-highlight-body { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; margin-bottom: 40px; border-bottom: 2px solid rgba(255,255,255,0.3); }
.hg-highlight-body p { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #fff; opacity: 0.8; }
.hg-highlight-body p:not(:last-child) { padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.hg-download-box { display:flex; flex-flow:row wrap; row-gap: 10px; column-gap: 16px;}
.hg-download { width:100%; align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 48px; padding: 14px 24px; border-radius: 48px; background: #000; }
.hg-download span { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #9ea4aa; }
.hg-download svg { flex: none; }

/* 구매 패널 (모바일 = 딤 + 하단 바텀시트 / PC = 우측 카드) */
.detail-panel { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 480px; z-index: 60; padding: 8px 24px 24px; background: #1B1D1F; border-radius: 24px 24px 0 0; transition: transform 0.3s ease; }
.detail-panel.open { transform: translateX(-50%) translateY(0); }
.detail-panel .sheet-handle { display: block; width: 48px; height: 4px; border-radius: 2px; background: #393C41; margin: 4px auto 20px; cursor: pointer; }
.detail-panel .panel-info { display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px; }
.panel-info .panel-title { font-size: 24px; font-weight: 700; color: #fff; }
.panel-info .panel-qty { display: flex; align-items: center; justify-content: space-between; }
.panel-qty .qty-stepper { display: flex; align-items: center; gap: 12px; }
.panel-qty .qty-stepper button { width: 24px; height: 24px; border-radius: 50%; border: none; background: #393C41; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.panel-qty .qty-val { font-size: 16px; font-weight: 900; color: #fff; min-width: 16px; text-align: center; }
.panel-qty .panel-unit { font-size: 16px; font-weight: 900; color: #fff; }
.panel-info .panel-summary { display: flex; flex-direction: column; gap: 8px; }
.panel-summary .sum-row { display: flex; justify-content: space-between; font-size: 16px; }
.panel-summary .sum-row > span:first-child { font-weight: 400; color: #fff; }
.panel-summary .sum-row > span:last-child { font-weight: 700; color: #fff; }
.panel-info .panel-pay { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid #393C41; }
.panel-pay .pay-label { font-size: 18px; font-weight: 700; color: #fff; }
.panel-pay .pay-amount { font-size: 20px; font-weight: 900; color: #00FF84; }
.detail-panel .panel-actions { display: flex; gap: 10px; }
.panel-actions .btn-cart2 { flex: none; width: 134px; height: 40px; border-radius: 60px; border: none; background: rgba(255,255,255,0.2); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.panel-actions .btn-buy { flex: 1; height: 40px; border-radius: 60px; border: none; background: #00FF84; color: #1B1D1F; font-size: 16px; font-weight: 700; cursor: pointer; }
/* 구매 불가(판매중 아님/품절) — 서버가 disabled 를 렌더한다. cart-cta-btn/bf-verify-btn 과 동일한 값으로 반투명 처리 */
.btn-cart2:disabled, .btn-buy:disabled, .btn-open-sheet:disabled { opacity: 0.6; cursor: not-allowed; }
.panel-status-badge { font-size: 13px; font-weight: 700; color: #C9CDD2; }

/* 판매단위(옵션) 다중 선택 카드 */
.panel-title-box { display: flex; flex-direction: column; gap: 8px; }
.panel-title-box .panel-title { font-size: 24px; font-weight: 400; color: #fff; letter-spacing: -0.48px; line-height: 28px; }
.panel-label { font-size: 14px; font-weight: 700; color: #B8A063; letter-spacing: -0.14px; line-height: 18px; text-transform: uppercase; }
.panel-units { padding-bottom: 24px; border-bottom: 2px solid rgba(255,255,255,0.3); }
.unit-list { display: flex; flex-direction: column; gap: 8px; }
.unit-card { background: #333333; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.unit-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.unit-price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.unit-amt { font-size: 16px; font-weight: 700; color: #fff; }
.unit-name { font-size: 16px; font-weight: 400; color: #fff; opacity: 0.5; }
.unit-desc { font-size: 14px; font-weight: 400; color: #fff; opacity: 0.5; text-align: right; }
.unit-row-bottom { display: flex; align-items: center; justify-content: space-between; }
.unit-stepper { display: flex; align-items: center; gap: 8px; }
.unit-stepper button { width: 24px; height: 24px; flex: none; border-radius: 50%; border: none; background: rgba(255,255,255,0.3); color: #1B1D1F; font-size: 14px; font-weight: 700; line-height: 1; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; }
.unit-stepper button:disabled { background: rgba(255,255,255,0.05); cursor: not-allowed; }
.unit-qty { min-width: 32px; text-align: center; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.36px; }
.unit-subtotal { font-size: 16px; font-weight: 400; color: #fff; letter-spacing: -0.32px; }
.panel-pay.panel-pay-total { padding-top: 0; border-top: none; }
.panel-pay.panel-pay-total .pay-label { font-size: 16px; font-weight: 400; color: #fff; opacity: 0.5; }
.panel-pay.panel-pay-total .pay-amount { font-size: 18px; font-weight: 700; color: #fff; }

/* 모바일 하단 CTA 바 (장바구니 이동 + 바텀시트 열기 트리거) */
.detail-cta { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 50; padding: 40px 16px 16px; background: linear-gradient(180deg, rgba(18,18,18,0) 0%, #121212 45%); display: flex; gap: 8px; }
.detail-cta .btn-cart-link { flex: none; width: 121px; height: 40px; border-radius: 60px; background: rgba(255,255,255,0.1); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.detail-cta .btn-open-sheet { flex: 1; height: 40px; border-radius: 60px; border: none; background: #00FF84; color: #1B1D1F; font-size: 14px; font-weight: 700; cursor: pointer; }

/* 바텀시트 딤 스크림 */
.sheet-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.8); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 55; }
.sheet-scrim.open { opacity: 1; pointer-events: auto; }
body.sheet-open { overflow: hidden; }
@media (max-width: 1023px) { .detail-cta ~ .site-footer { padding-bottom: 120px; } }

/* ===== 장바구니 (cart) ===== */
.cart-wrap { padding: 16px max(16px, calc((100% - 480px) / 2)) 120px; display: flex; flex-direction: column; gap: 16px; }
.cart-title { font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: -0.36px; color: #fff; text-transform: uppercase; }
.cart-loading { text-align: center; padding: 40px 0; color: #9EA4AA; font-size: 14px; }
.cart-loading .cart-login-link { color: #fff; font-weight: 700; text-decoration: underline; }

.cart-empty { text-align: center; padding: 80px 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cart-empty-msg { font-size: 16px; color: #9EA4AA; }
.cart-empty-btn { height: 40px; padding: 0 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 60px; background: #00FF84; color: #1B1D1F; font-size: 16px; font-weight: 700; }

.cart-filled { display: flex; flex-direction: column; gap: 16px; }

/* 전체선택 + 선택삭제 */
.cart-toolbar { display: flex; align-items: center; justify-content: space-between; }
.cart-select-all { display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; }
.cart-select-all-label { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #fff; }
.cart-delete-btn { height: 32px; padding: 8px 16px; display: inline-flex; align-items: center; border: none; border-radius: 60px; background: #000; color: #C9CDD2; font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.12px; cursor: pointer; }

/* 체크박스 */
.cart-chk-circle { display: inline-flex; width: 20px; height: 20px; background: url('/images/check_white_off.svg'); background-size: cover;}
.cart-chk-fill { opacity: 0; transition: opacity 0.1s ease; }
.cart-chk-mark {stroke: var(--gray-400, #9EA4AA);}

.cart-select-all.on .cart-chk-circle {background: url('/images/check_white_on.svg'); background-size: cover;}


/* 상품(p_idx) 카드 */
.cart-cards { display: flex; flex-direction: column; gap: 16px; }
.cart-card { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: #1D1D1D; border-radius: 16px; }
.cart-card-head { display: flex; align-items: center; justify-content: space-between; }
.cart-card-chk { width:20px; height:20px;  border: none; padding: 0; cursor: pointer; display: inline-flex;  background: url('/images/check_white_off.svg'); background-size: cover;}
.cart-card-chk.on{ background: url('/images/check_white_on.svg'); background-size: cover; }
.cart-card-del { width:16px; height:16px; background: url('/images/trash.svg'); background-size: cover; border: none; padding: 0; cursor: pointer; display: inline-flex;  }
.cart-card-title { font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; color: #fff; }
/* 구매 불가(미판매/품절) 카드 — 삭제하지 않고 표시만 한다(정책). 체크박스 선택 불가 + 주문에서 제외 */
.cart-card-unavailable .cart-card-title,
.cart-card-unavailable .cart-rows { opacity: 0.5; }
.cart-card-status { font-size: 12px; font-weight: 700; color: #FF6B6B; }

/* 판매단위 행 */
.cart-rows { display: flex; flex-direction: column; gap: 16px; }
.cart-row { display: flex; gap: 16px; align-items: center; }
.cart-row:not(:last-child) { padding-bottom: 16px; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0 4px, transparent 4px 8px); background-position: bottom; background-size: 100% 1px; background-repeat: no-repeat; }
.cart-thumb { flex: none; width: 48px; height: 48px; border-radius: 4px; background: #E8EBED; overflow: hidden; padding:6px;}
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cart-thumb img.is-landscape { object-fit: cover; }
/* 이미지가 없는 항목 */
.cart-thumb-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 9px; font-weight: 700; line-height: 11px; color: #72787F; }
.cart-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cart-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cart-qty-label { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #C9CDD2; white-space: nowrap; }
.cart-price { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #fff; white-space: nowrap; }
.cart-price .cart-unit { color: #72787F; }

/* 수량 스테퍼 */
.cart-stepper { display: flex; align-items: center; gap: 8px; }
.cart-stepper button { width: 20px; height: 20px; flex: none; border: none; border-radius: 50%; background: rgba(255,255,255,0.5); color: #1B1D1F; font-size: 12px; font-weight: 700; line-height: 1; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cart-stepper .cart-qty-minus:disabled, .cart-stepper .cart-qty-plus:disabled { background: rgba(255,255,255,0.1); cursor: not-allowed; }
.cart-qty-val { min-width: 12px; text-align: center; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #fff; }

/* 하단 플로팅 구매 CTA */
.cart-cta { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 50; padding: 40px 16px 16px; background: linear-gradient(180deg, rgba(27,29,31,0) 0%, #1B1D1F 50%); }
.cart-cta-btn { display: block; width: 100%; height: 40px; border: none; border-radius: 60px; background: #00FF84; color: #1B1D1F; font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: -0.32px; cursor: pointer; }
.cart-cta-btn:disabled { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 1023px) { .cart-cta ~ .site-footer { padding-bottom: 120px; } }

/* ===== 주문서 작성 (checkout, 다크 + 화이트 카드) ===== */
.checkout-wrap { padding: 16px max(16px, calc((100% - 480px) / 2)) 80px; display: flex; flex-direction: column; gap: 16px; }

/* 주문 완료 페이지 */
.oc-wrap { padding: 16px max(16px, calc((100% - 480px) / 2)) 80px; display: flex; flex-direction: column; }
.oc-head { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.oc-title { font-size: 24px; font-weight: 400; line-height: 28px; letter-spacing: -0.48px; color: #fff; }
.oc-sub { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #9EA4AA; }
.oc-cards { margin-top: 24px; display: flex; flex-direction: column; gap: 24px; padding-bottom: 40px; }
.oc-card { background: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.24); overflow: hidden; }
.oc-group { display: flex; flex-direction: column; gap: 8px; }
.oc-group-div { padding-bottom: 8px; border-bottom: 1px dashed #E8EBED; }
.oc-label { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #9EA4AA; }
.oc-value { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; }
.oc-notice { padding: 0 8px; font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #d50000; }
.oc-continue { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 60px; background: rgba(255,255,255,0.1); color: #fff; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; text-decoration: none; }
.oc-wrap ~ .site-footer { display: none; }
.vc-wrap ~ .site-footer { display: none; }
.checkout-title { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.co-card { background: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.co-card-title { font-size: 18px; font-weight: 700; color: #1B1D1F; }
/* 배송 정보 */
.co-addr-empty { display: flex; flex-direction: column; gap: 16px; }
.co-addr-none { font-size: 18px; font-weight: 400; color: #1B1D1F; }
.co-addr-add { height: 40px; border: none; border-radius: 60px; background: #E8EBED; color: #1B1D1F; font-size: 14px; font-weight: 700; cursor: pointer; }
.co-addr-form { display: flex; flex-direction: column; gap: 8px; }
.co-field-row { display: flex; gap: 8px; }
.co-field-row .co-input { flex: 1; min-width: 0; }
.co-input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #C9CDD2; border-radius: 8px; font-size: 14px; color: #1B1D1F; outline: none; background: #fff; }
textarea.co-input { height: 72px; padding: 12px 14px; resize: vertical; }
.co-input:focus { border-color: #1B1D1F; }
.co-input.error { border-color: #FF4949; }
/* 주문 상품 */
.co-items { display: flex; flex-direction: column; gap: 16px; }
.co-item { display: flex; gap: 16px; align-items: center; }
.co-item-thumb { width: 80px; height: 80px; flex: none; border-radius: 8px; background: #F7F8F9; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.co-item-thumb img { width: 100%; height: 100%; object-fit: contain; }
.co-item-thumb img.is-landscape { object-fit: cover; }
.co-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.co-item-name { font-size: 16px; font-weight: 700; color: #1B1D1F; }
.co-item-meta { display: flex; align-items: center; justify-content: space-between; }
.co-item-qty { font-size: 14px; font-weight: 400; color: #454C53; }
.co-item-price { font-size: 14px; font-weight: 700; color: #1B1D1F; }
/* 비회원 이메일 입력 (co-card 라이트 컨텍스트) */
.co-field { display: flex; flex-direction: column; gap: 8px; }
.co-label { font-size: 14px; font-weight: 700; color: #1B1D1F; }
.co-label .req { color: #FF4949; }
.co-field-desc { font-size: 12px; font-weight: 400; color: #9EA4AA; }
/* 결제 요약 */
.co-sum { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid #E8EBED; }
.co-sum-row { display: flex; align-items: center; justify-content: space-between; }
.co-sum-row > span:first-child { font-size: 14px; font-weight: 400; color: #454C53; }
.co-sum-row > span:last-child { font-size: 14px; font-weight: 700; color: #1B1D1F; }
.co-total { display: flex; align-items: center; justify-content: space-between; }
.co-total-label { font-size: 16px; font-weight: 700; color: #1B1D1F; }
.co-total-amt { font-size: 16px; font-weight: 700; color: #C00023; }
/* 결제 수단 */
.co-pays { display: flex; flex-direction: column; gap: 8px; }
.co-pay { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid #C9CDD2; border-radius: 60px; cursor: pointer; }
.co-pay.on { border-color: #1B1D1F; }
.co-pay .co-radio { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1px solid #C9CDD2; box-sizing: border-box; }
.co-pay.on .co-radio { border-color: #1B1D1F; background: #00FF83; box-shadow: inset 0 0 0 3px #fff; }
.co-pay-name { font-size: 14px; font-weight: 700; color: #1B1D1F; }
/* 결제하기 / 약관 */
.co-submit { height: 48px; margin-top: 8px; border: none; border-radius: 60px; background: #00FF83; color: #1B1D1F; font-size: 16px; font-weight: 700; cursor: pointer; }
.co-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.co-terms { text-align: center; font-size: 12px; font-weight: 400; color: #fff; }

/* ===== 현장수령(exchange) 주문서 ===== */
.bf-title { font-size: 24px; font-weight: 400; line-height: 28px; letter-spacing: -0.48px; color: #fff; margin-bottom: 8px; }
.bf-intro { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 2px solid rgba(255,255,255,0.1); border-bottom: 2px solid rgba(255,255,255,0.1); }
.bf-intro-head { font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: -0.32px; color: #00FF84; }
.bf-intro-body { display: flex; flex-direction: column; gap: 6px; }
.bf-intro-body p { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: rgba(255,255,255,0.7); }
/* 카드 공용 (다크: Ordered Items / 화이트: Contact·Payment Summary·Terms of Use) */
.bf-card { border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.24); }
.bf-card-dark { background: #1D1D1D; }
.bf-card-white { background: #fff; }
.bf-card-title { font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: -0.32px; }
.bf-card-dark .bf-card-title { color: #fff; }
.bf-card-white .bf-card-title { color: #1B1D1F; }
/* Ordered Items */
.bf-items { display: flex; flex-direction: column; gap: 16px; }
.bf-item { display: flex; gap: 16px; align-items: center; }
.bf-item-thumb { width: 60px; height: 60px; flex: none; border-radius: 8px; background: #E8EBED; overflow: hidden; display: flex; align-items: center; justify-content: center; padding:6px; }
.bf-item-thumb img { width: 100%; height: 100%; object-fit: contain; }
.bf-item-thumb img.is-landscape { object-fit: cover; }
.bf-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bf-item-name { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #C9CDD2; }
.bf-item-meta { display: flex; flex-direction: column; gap: 4px; }
.bf-item-qty { font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #C9CDD2; }
.bf-item-price { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #C9CDD2; }
/* Contact */
.bf-contact-wrap { display: flex; flex-direction: column; }
.bf-contact { border-radius: 16px 16px 0 0; }
.bf-contact-head { display: flex; flex-direction: column; gap: 4px; }
.bf-card-desc { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #454C53; }
.bf-pill-row { display: flex; gap: 8px; padding-bottom: 16px; border-bottom: 1px dashed #E8EBED; }
.bf-pill { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid #E8EBED; border-radius: 60px; cursor: pointer; }
.bf-pill.on { border-color: #1B1D1F; }
.bf-pill-dot { width: 16px; height: 16px; flex: none; border-radius: 50%; background: #9EA4AA; box-shadow: inset 0 0 0 4px #E8EBED; }
.bf-pill.on .bf-pill-dot { background: #00FF84; box-shadow: inset 0 0 0 4px #1B1D1F; }
.bf-pill span { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; }
.bf-contact-field { display: flex; flex-direction: column; gap: 8px; }
.bf-input { width: 100%; height: 40px; padding: 0 16px; border: 1px solid #C9CDD2; border-radius: 48px; background: #F7F8F9; font-size: 14px; font-weight: 400; letter-spacing: -0.14px; color: #1B1D1F; outline: none; }
.bf-input::placeholder { color: #9EA4AA; }
.bf-input:focus { border-color: #1B1D1F; }
.bf-verify-btn { height: 40px; border: none; border-radius: 60px; background: #1B1D1F; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -0.14px; cursor: pointer; }
.bf-verify-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.bf-warn-banner { background: #A70000; border-radius: 0 0 16px 16px; padding: 16px; font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #fff; }
/* Payment Summary */
.bf-sum { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid #E8EBED; }
.bf-sum-row { display: flex; align-items: center; justify-content: space-between; }
.bf-sum-row > span:first-child { font-size: 14px; font-weight: 400; color: #454C53; }
.bf-sum-row > span:last-child { font-size: 14px; font-weight: 700; color: #1B1D1F; }
.bf-total { display: flex; align-items: center; justify-content: space-between; }
.bf-total-label { font-size: 14px; font-weight: 700; color: #1B1D1F; }
.bf-total-amt { font-size: 14px; font-weight: 700; color: #D50000; }
/* Terms of Use */
.bf-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.bf-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.bf-check-box { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: url('/images/check_black_off.svg'); background-size: cover; box-sizing: border-box; }
.bf-check input:checked + .bf-check-box { background: url('/images/check_black_on.svg'); background-size: cover; }

.bf-check-label { font-size: 14px; font-weight: 400; letter-spacing: -0.14px; color: #454C53; }
/* BUY */
.bf-buy { display: block; width: 100%; height: 48px; margin-top: 8px; border: none; border-radius: 60px; background: #00FF84; color: #1B1D1F; font-size: 16px; font-weight: 700; letter-spacing: -0.32px; cursor: pointer; }
.bf-buy:disabled { opacity: 0.6; cursor: not-allowed; }
/* Terms+BUY 래퍼 */
.bf-cta { display: contents; }

/* ===== 약관 전체화면 오버레이 ===== */
.bf-terms-scrim { position: fixed; inset: 0; z-index: 149; background: rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
.bf-terms-scrim.open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.bf-terms { position: fixed; top: 0; bottom: 0; left: 50%; width: 100%; max-width: 480px; z-index: 150; background: #fff; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translate(-50%, 0); transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
.bf-terms.open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
body.bf-terms-open { overflow: hidden; }

.bf-terms-header { flex: none; height: 64px; padding: 12px 16px; background: #fff; display: flex; align-items: center; justify-content: space-between; }
.bf-terms-logo { height: 14px; display: block; }
.bf-terms-close { flex: none; width: 28px; height: 28px; padding: 0; border: none; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }

.bf-terms-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 40px; padding: 16px 16px 120px; }
.bf-terms-toptitle { font-size: 24px; font-weight: 400; line-height: 28px; letter-spacing: -0.48px; color: #1B1D1F; }
.bf-terms-sections { display: flex; flex-direction: column; gap: 40px; }
.bf-terms-section { display: flex; flex-direction: column; gap: 16px; }
.bf-terms-sec-title { font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: -0.32px; color: #1B1D1F; }
.bf-terms-items { display: flex; flex-direction: column; gap: 16px; }
.bf-terms-block { display: flex; flex-direction: column; gap: 4px; }
.bf-terms-para { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; }
.bf-terms-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 16px; color: #1B1D1F; }
.bf-terms-table th, .bf-terms-table td { border: 1px solid #E8EBED; padding: 8px; text-align: left; vertical-align: top; }
.bf-terms-table th { font-weight: 700; background: #F7F8F9; }

.bf-terms-point { position: relative; padding-left: 12px; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; }
.bf-terms-point::before { content: ''; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #454C53; }
.bf-terms-sublist { display: flex; flex-direction: column; gap: 8px; }
.bf-terms-subpoint { position: relative; padding-left: 12px; font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #72787F; }
.bf-terms-subpoint::before { content: ''; position: absolute; left: 0; top: 6px; width: 4px; height: 1px; background: #72787F; }

.bf-terms-title { position: relative; padding-left: 12px; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; }
.bf-terms-title span { position: absolute; left: 0; }
.bf-terms-subtitle  { position: relative; padding-left: 12px; font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #72787F; }
.bf-terms-subtitle span { position: absolute; left: 0;}
.bf-terms-subdot { position: relative; padding-left: 12px; font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #72787F; margin-left: 12px;}
.bf-terms-subdot::before { content: ''; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #72787F; }



.bf-terms-footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 16px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 50%); }
.bf-terms-agree { display: block; width: 100%; height: 40px; border: none; border-radius: 60px; background: #1B1D1F; color: #fff; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; cursor: pointer; }

/* ===== Contact 카드 인라인 인증코드 ===== */
.bf-verify-inline { display: none; flex-direction: column; gap: 16px; }
.bf-verify-row { display: contents; }
.bf-contact.is-idle .bf-contact-field,
.bf-contact.is-error .bf-contact-field,
.bf-contact.is-complete .bf-contact-field { display: none; }
.bf-contact.is-idle .bf-verify-inline,
.bf-contact.is-error .bf-verify-inline,
.bf-contact.is-complete .bf-verify-inline { display: flex; }
.bf-contact.is-complete .bf-verify-inline { gap: 8px; }
.bf-verify-contact-group { display: flex; flex-direction: column; gap: 4px; }
.bf-verify-value { color: #1B1D1F; border-color: #1B1D1F; }
.bf-verify-helper { font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #72787F; padding: 0 8px; min-height: 14px; }
.bf-verify-code-group { display: flex; flex-direction: column; gap: 4px; }
.bf-verify-code-wrap { position: relative; display: flex; align-items: center; }
.bf-verify-code { padding-right: 56px; }
.bf-verify-timer { position: absolute; right: 16px; font-size: 12px; font-weight: 400; letter-spacing: -0.12px; color: #D50000; display: none; }
.bf-verify-error { font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #D50000; padding: 0 8px; min-height: 14px; visibility: hidden; }
.bf-verify-actions { display: flex; gap: 8px; }
.bf-verify-resend { flex: none; width: 88px; height: 40px; border: none; border-radius: 60px; background: #E8EBED; color: #1B1D1F; font-size: 14px; font-weight: 700; letter-spacing: -0.14px; cursor: pointer; }
.bf-verify-resend-pc { display: none; }
.bf-verify-confirm { flex: 1; height: 40px; border: none; border-radius: 60px; background: #1B1D1F; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -0.14px; cursor: pointer; }
.bf-verify-resend:disabled, .bf-verify-confirm:disabled { opacity: 0.6; cursor: not-allowed; }
.bf-verify-complete { display: none; width: 100%; height: 40px; border: none; border-radius: 60px; background: #1B1D1F; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -0.14px; cursor: pointer; }
.bf-verify-complete:disabled { opacity: 0.6; cursor: not-allowed; }
.bf-verify-complete.is-verified { background: #454C53; }
/* 상태: error */
.bf-contact.is-error .bf-verify-code { border-color: #1B1D1F; }
/* 인증 유효시간(3:00) 카운트 — 코드 입력 단계 내내 보여야 한다.
   ★예전엔 is-error 에만 규칙이 있어 코드를 틀리기 전까지 빨간 카운트가 아예 안 보였다.
   (재발송 쿨다운 '59s' 는 별개다 — 그건 Resend 버튼 라벨에 표시된다.) */
.bf-contact.is-idle .bf-verify-timer,
.bf-contact.is-error .bf-verify-timer { display: block; }
.bf-contact.is-error .bf-verify-error { visibility: visible; }
/* 상태: complete */
.bf-contact.is-complete .bf-verify-helper,
.bf-contact.is-complete .bf-verify-code-group,
.bf-contact.is-complete .bf-verify-actions { display: none; }
.bf-contact.is-complete .bf-verify-complete { display: block; }

/* ===== 교환권 (voucher, 다크 + 화이트 카드) ===== */
.vc-wrap { padding: 16px max(16px, calc((100% - 480px) / 2)) 80px; display: flex; flex-direction: column; gap: 16px; }
.vc-top { display: flex; justify-content: flex-end; }
.vc-title { font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: -0.4px; color: #fff; text-align: center; }
/* 카드 */
.vc-card { background: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.24); }
.vc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vc-card-title { font-size: 18px; font-weight: 700; color: #1B1D1F; }
.vc-empty { font-size: 18px; font-weight: 400; color: #1B1D1F; }
/* 상태 배지 */
.vc-badge { flex: none; padding: 5px 12px; border-radius: 24px; font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.12px; }
.vc-badge-available { background: #00FF84; color: #1B1D1F; }
.vc-badge-done { background: #E8EBED; color: #454C53; }
.vc-badge-cancel { background: rgba(213,0,0,0.1); color: #d50000; }
.vc-badge-expired { background: #1B1D1F; color: #fff; }
/* 유효기간 */
.vc-expiry { display: flex; gap: 4px; font-size: 12px; font-weight: 400; color: #9EA4AA; }
/* 티켓번호 */
.vc-ticket-row { display: flex; border: 1px solid #E8EBED; border-radius: 8px; overflow: hidden; }
.vc-ticket-label { flex: none; display: flex; align-items: center; padding: 10px 12px; background: #F7F8F9; font-size: 12px; font-weight: 700; color: #9EA4AA; }
.vc-ticket-value { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 10px 12px; font-family: 'Courier New', monospace; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; color: #1B1D1F; text-transform: uppercase; word-break: break-all; }
.vc-ticket-desc { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 400; color: #9EA4AA; }
.vc-ticket-copy { flex: none; height: 28px; padding: 0 12px; border: none; border-radius: 24px; background: #E8EBED; color: #1B1D1F; font-size: 12px; font-weight: 700; cursor: pointer; }
/* QR */
.vc-qr-wrap { position: relative; align-self: center; width: 200px; height: 200px; border-radius: 8px; overflow: hidden; }
.vc-qr-img { width: 100%; height: 100%; object-fit: contain; }
.vc-qr-placeholder { width: 100%; height: 100%; background: #F7F8F9; }
.vc-qr-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: rgba(27,29,31,0.92); text-align: center; }
.vc-qr-overlay p { font-size: 13px; font-weight: 700; line-height: 16px; letter-spacing: -0.13px; color: #fff; }
/* 주문번호 */
.vc-order-no { font-size: 16px; font-weight: 700; text-align: center; color: #d50000; }
/* 구분선 */
.vc-divider { border-top: 1px dashed #E8EBED; }
/* QR 코드 URL */
.vc-url-card { background: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.24); }
.vc-url-label { font-size: 14px; font-weight: 700; color: #1B1D1F; }
.vc-url-link { font-size: 13px; color: #454C53; word-break: break-all; text-decoration: none; }
.vc-url-copy { height: 44px; border: none; border-radius: 60px; background: #1B1D1F; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
/* 주문 상품 (다크 카드) */
.vc-items-card { background: #1D1D1D; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.vc-items-title { font-size: 16px; font-weight: 700; color: #fff; }
.vc-items { display: flex; flex-direction: column; gap: 16px; }
.vc-item-name { font-size: 14px; font-weight: 700; color: #fff; }
.vc-item-meta { display: flex; align-items: center; justify-content: space-between; }
.vc-item-qty { font-size: 13px; font-weight: 400; color: #9EA4AA; }
.vc-item-price { font-size: 13px; font-weight: 700; color: #fff; }
.vc-items-total { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); }
.vc-items-total-label { font-size: 14px; font-weight: 700; color: #fff; }
.vc-items-total-amt { font-size: 16px; font-weight: 700; color: #00FF84; }

/* ===== 배송지 추가 모달 (바텀시트) ===== */
.addr-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.8); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 70; }
.addr-scrim.open { opacity: 1; pointer-events: auto; }
.addr-sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 480px; z-index: 80; background: #1B1D1F; border-radius: 16px 16px 0 0; padding: 16px; display: flex; flex-direction: column; gap: 40px; transition: transform 0.3s ease; }
.addr-sheet.open { transform: translateX(-50%) translateY(0); }
.addr-handle { width: 48px; height: 4px; border-radius: 2px; background: #454C53; align-self: center; }
.addr-body { display: flex; flex-direction: column; gap: 24px; }
.addr-title { font-size: 18px; font-weight: 700; color: #fff; }
.addr-field { display: flex; flex-direction: column; gap: 8px; }
.addr-row { display: flex; gap: 10px; }
.addr-row .addr-field { flex: 1; min-width: 0; }
.addr-label { font-size: 14px; font-weight: 700; color: #fff; }
.addr-label .req { color: #FF4949; }
.addr-input { width: 100%; height: 40px; padding: 0 16px; border: none; border-radius: 4px; background: #F7F8F9; font-size: 14px; font-weight: 700; color: #1B1D1F; outline: none; }
.addr-input::placeholder { color: #9EA4AA; font-weight: 400; }
.addr-search { position: relative; }
.addr-search .addr-input { padding-right: 44px; cursor: pointer; }
.addr-search-btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: none; background: transparent; cursor: pointer; padding: 0; }
.addr-search-btn::before { content: ''; position: absolute; left: 1px; top: 1px; width: 10px; height: 10px; border: 2px solid #1B1D1F; border-radius: 50%; }
.addr-search-btn::after { content: ''; position: absolute; right: 0; bottom: 0; width: 6px; height: 2px; background: #1B1D1F; transform: rotate(45deg); transform-origin: right bottom; }
.addr-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.addr-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.addr-check-box { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #454C53; box-sizing: border-box; }
.addr-check input:checked + .addr-check-box { background: #00FF83; border-color: #00FF83; }
.addr-check input:checked + .addr-check-box::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #1B1D1F; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.addr-check-label { font-size: 14px; font-weight: 700; color: #fff; }
.addr-actions { display: flex; gap: 8px; }
.addr-actions .addr-cancel { flex: none; width: 121px; height: 48px; border: none; border-radius: 60px; background: rgba(255,255,255,0.1); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.addr-actions .addr-save { flex: 1; height: 48px; border: none; border-radius: 60px; background: #00FF83; color: #1B1D1F; font-size: 16px; font-weight: 700; cursor: pointer; }

/* Product Grid */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; margin-bottom: 40px; }
.product-card { border: 1px solid #E8EBED; border-radius: 10px; overflow: hidden; transition: box-shadow 0.2s; cursor: pointer; }
.product-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.product-card .thumb { width: 100%; aspect-ratio: 1; background: #F7F8FA; display: flex; align-items: center; justify-content: center; font-size: 48px; color: #D1D6DB; position: relative; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #fff; }
.product-card .tag.hot { background: #FF4949; }
.product-card .tag.new { background: #1B1D1F; }
.product-card .tag.presale { background: #6366F1; }
.product-card .tag.limited { background: #D97706; }
.product-card .info { padding: 16px; }
.product-card .name { font-size: 15px; font-weight: 600; margin-bottom: 8px; line-height: 1.4; }
.product-card .price { font-size: 18px; font-weight: 700; }
.product-card .stock { font-size: 12px; color: #9EA4AA; margin-top: 4px; }
.product-card .btn-cart { width: 100%; margin-top: 12px; }

/* Two Column Layout (checkout) */
.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
.checkout-grid .aside { position: sticky; top: 20px; }

/* Payment Method */
.pay-methods { display: flex; gap: 12px; margin-bottom: 24px; }
.pay-method-item { flex: 1; padding: 18px 16px; border: 2px solid #E8EBED; border-radius: 10px; cursor: pointer; text-align: center; transition: border-color 0.15s; }
.pay-method-item:hover { border-color: #9EA4AA; }
.pay-method-item.active { border-color: #1B1D1F; background: #F7F8FA; }
.pay-method-item .method-icon { font-size: 24px; margin-bottom: 6px; }
.pay-method-item .method-name { font-size: 14px; font-weight: 600; }

/* Complete / Fail Page */
.result-wrap { text-align: center; padding: 80px 20px; max-width: 480px; margin: 0 auto; }
.result-wrap .result-icon { width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; font-size: 36px; }
.result-wrap .result-icon.success { background: #E8F5E9; color: #2E7D32; }
.result-wrap .result-icon.fail { background: #FFEBEE; color: #C62828; }
.result-wrap h2 { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.result-wrap .sub { font-size: 14px; color: #6B7684; margin-bottom: 32px; line-height: 1.6; }
.result-wrap .info-box { background: #F7F8FA; border-radius: 10px; padding: 24px; margin-bottom: 32px; text-align: left; }
.result-wrap .info-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.result-wrap .info-row .label { color: #6B7684; }
.result-wrap .info-row .val { font-weight: 600; }
.result-wrap .info-row.total { border-top: 1px solid #E8EBED; margin-top: 8px; padding-top: 12px; font-size: 16px; font-weight: 700; }
.result-wrap .actions { display: flex; gap: 12px; justify-content: center; }

/* Checkout Item Summary */
.checkout-items { margin-bottom: 20px; }
.checkout-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #E8EBED; font-size: 13px; }
.checkout-item:last-child { border-bottom: none; }
.checkout-item .ci-name { font-weight: 600; flex: 1; }
.checkout-item .ci-qty { color: #6B7684; margin: 0 12px; }
.checkout-item .ci-price { font-weight: 600; white-space: nowrap; }

/* Login Page */
.login-wrap { max-width: 400px; margin: 0 auto; padding: 80px 0; text-align: center; }
.login-title { font-size: 36px; font-weight: 800; margin-bottom: 12px; letter-spacing: -1px; }
.login-sub { font-size: 15px; color: #6B7684; margin-bottom: 40px; }
.login-buttons { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.btn-social { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; transition: opacity 0.15s; }
.btn-social:hover { opacity: 0.85; }
.btn-social.kakao { background: #FEE500; color: #191919; }
.btn-social.naver { background: #03C75A; color: #fff; }
.btn-social.google { background: #fff; color: #1B1D1F; border: 1px solid #D1D6DB; }
.btn-social .social-icon { font-size: 18px; font-weight: 800; }
.login-notice { font-size: 12px; color: #9EA4AA; line-height: 1.6; }
.login-notice a { text-decoration: underline; }

/* ==================== 마이페이지 ==================== */
.my-wrap { padding: 16px max(16px, calc((100% - 480px) / 2)) 80px; }
.my-inner { display: flex; flex-direction: column; gap: 16px; }
/* .my-inner.edit{gap:16px;} */
/* 상단 공용 헤더 (제목 + 탭) */
.my-head { display: flex; flex-direction: column; gap: 24px; }
.my-title { font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: -0.36px; color: #fff; }
/* 알약 3탭 */
.my-tabs { display: flex; gap: 4px; }
.my-tab { flex: 1; min-width: 0; height: 36px; padding: 8px 16px; border: 1px solid #393C41; border-radius: 24px; background: transparent; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.12px; white-space: nowrap; }
.my-tab.on { background: #00FF84; border-color: #00FF84; color: #1B1D1F; }

/* 주문 내역(History) */
.my-ord-list { display: flex; flex-direction: column; gap: 8px; }
.my-ord-card { display: flex; gap: 16px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.24); }
.my-ord-thumb { flex: none; width: 54px; height: 54px; border-radius: 4px; background: #E8EBED; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px }
.my-ord-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* 썸네일 겹침(2~3장) */
.my-ord-thumb-multi { position: relative; display: block; }
.my-ord-thumb-multi img { position: absolute; width: 44px; height: 44px; max-width: none; max-height: none; border-radius: 4px; object-fit: contain;  }
.my-ord-thumb-multi .my-ord-thumb-l0 { top: 5px; left: 5px; z-index: 3; }
.my-ord-thumb-multi .my-ord-thumb-l1 { top: 10px; left: 10px; z-index: 2; width: 42px; height: 42px; opacity: .85; }
.my-ord-thumb-multi .my-ord-thumb-l2 { top: 12px; left: 12px; z-index: 1; width: 40px; height: 40px; opacity: .7; }
.my-ord-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.my-ord-status { font-size: 10px; font-weight: 700; line-height: 12px; color: #9EA4AA; }
.my-ord-name { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.13px; color: #1B1D1F; }
.my-ord-more { color: #9EA4AA; }
.my-ord-pricerow { display: flex; align-items: center; gap: 8px; padding-top:6px;}
.my-ord-price { font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.12px; color: #1B1D1F; }
.my-ord-sep { flex: none; width: 1px; height: 8px; background: #C9CDD2; }
.my-ord-date { font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #9EA4AA; }
.my-ord-empty { padding: 40px 0; text-align: center; font-size: 14px; color: #9EA4AA; }
/* 카드 공통 */
.my-card { padding: 16px; border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 16px; }
.my-card-title { font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: -0.36px; color: #1B1D1F; }
/* 대시보드 요약 */
.my-sum { display: flex; flex-direction: column; gap: 16px; }
.my-sum-row { display: flex; align-items: center; gap: 4px; }
.my-sum-label { flex: 1; min-width: 0; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; }
.my-sum-right { display: flex; align-items: center; gap: 8px; }
.my-sum-val { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; text-align: right; }
.my-sum-label-fit { flex: none; }
.my-badge { padding: 5px 12px; border-radius: 24px; background: #E8EBED; color: #1B1D1F; font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.12px; }
/* 최근 주문 리스트 */
.my-orders { display: flex; flex-direction: column; gap: 8px; }
.my-order { padding-bottom: 8px; display: flex; gap: 16px; }
.my-order:last-child { padding-bottom: 0; }
.my-orders-full .my-order:last-child { padding-bottom: 8px; }
.my-order-thumb { flex: none; width: 60px; height: 60px; border-radius: 4px; background: #F7F8F9; display: flex; align-items: center; justify-content: center; }
.my-order-thumb img { height: 46px; width: auto; }
.my-order-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.my-order-meta { display: flex; align-items: center; gap: 4px; }
.my-order-status { font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.12px; color: #72787F; }
.my-order-date { font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #9EA4AA; }
.my-order-name { font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: -0.32px; color: #1B1D1F; }
.my-order-price { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; }
/* 커뮤니티 */
.community-wrap { padding: 16px max(16px, calc((100% - 480px) / 2)) 80px; display: flex; flex-direction: column;  }

.cm-none { width:100%; display:flex; align-items: center; justify-content: center; padding : 80px 0 ;}
.cm-none span { font-family: Pretendard; font-size: 16px; line-height:20px; color: #9EA4AA; letter-spacing: -0.32px;}
.cm-title { font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: -0.48px; color: #fff;padding-bottom:24px; }


/* 세그먼트 탭 */
.cm-tabs { display: flex; border: 1px solid #393C41; border-radius: 8px; overflow: hidden; }
.cm-tab { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.12px; white-space: nowrap; }
.cm-tab:not(:last-child) { border-right: 1px solid #393C41; }
.cm-tab.on { background: #00FF84; color: #1B1D1F; }
/* 게시글 리스트 */
.cm-card { padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.24); display: flex; flex-direction: column; gap: 16px; }
.cm-item { display: flex; flex-direction: column; }
.cm-badge { height:20px; align-self: flex-start; padding: 5px 12px; border-radius: 24px; background: #E8EBED; color: #1B1D1F; font-size: 10px; font-weight: 700; line-height: 12px; letter-spacing: -0.12px; }
.cm-item-title { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; padding-top:8px;}
.cm-item-date { font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #72787F; padding-top:4px;}
/* 페이지네이션 */
.cm-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding-top: 24px; }
.cm-page { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: -0.13px; }
.cm-page.on { background: #00FF84; color: #1B1D1F; }

.comm-view-title-box { display:flex; flex-flow: column; justify-content: center; gap:16px; padding-top:10px; padding-bottom: 24px;}
.comm-titles { display:flex; flex-flow: column; justify-content: center;}
.comm-view-title  { font-size: 28px; line-height: 35.8px; letter-spacing: -0.56px;  } 
.comm-view-date  { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #72787F; padding-top:4px;}

.comm-view-content { width: 100%; min-height: 400px; background-color: rgba(255,255,255,0.8) ;margin-bottom: 16px;}

.comm-btn { width:100%; height: 40px;  padding: 0 24px; border: none; border-radius: 60px; background: rgba(255,255,255,0.1); color: #fff; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; display: flex; align-items: center; justify-content: center; cursor: pointer; }


/* 주문 상세 */
.my-dt-head { display: flex; padding-bottom: 10px; }
.my-ord-card-static { cursor: default; }
/* 정보 섹션 (Order/Payment Information) */
.my-od-sec { display: flex; flex-direction: column; gap: 16px; padding-top:16px;}
/* 첫 섹션(Order Information) 상단 */
.my-od-sec-orderinfo { display:flex ; justify-content: space-between; align-items: center;}
.my-od-sec-first { padding-top: 16px; border-top: 2px solid rgba(255,255,255,0.5); }
.my-od-sec-title { font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: -0.36px; color: #fff; }


/* 주문 항목 목록 */
.my-ord-order-box { border-top: 2px solid rgba(255, 255, 255, 0.50); border-bottom: 2px solid rgba(255, 255, 255, 0.50);}
.my-od-item-list { display: flex; flex-direction: column; gap: 16px; }
.my-od-item { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.my-od-item:last-child { padding-bottom: 0; border-bottom: none; }
.my-od-item-name { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #fff; }
.my-od-item-option { font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: rgba(255,255,255,0.5); }
.my-od-item-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.my-od-item-qty { font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: rgba(255,255,255,0.5); }
.my-od-item-subtotal { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #fff; }
.my-od-rows { display: flex; flex-direction: column; gap: 16px; padding-bottom:16px; }
/* Order Information 행 묶음 하단 */
.my-od-rows-div { padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.my-od-row { display: flex; align-items: center; gap: 16px; }
.my-od-label { flex: 1; min-width: 0; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #fff; opacity: 0.5;}
.my-od-value { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.5px; color: #fff; text-align: right; }
.my-od-value.my-od-strong { font-weight: 700; }
.my-od-actions { display: flex; flex-direction: column; gap: 10px; align-items: center;}
.my-od-btn { height: 40px; width:120px; padding: 0 24px; border: none; border-radius: 60px; background: rgba(255,255,255,0.1); color: #fff; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.my-od-btn.cancel { background: #C00023; padding: 8px 16px; font-size: 12px; line-height: 14px; height: max-content; width:max-content}

/* 회원정보(Information) — Figma 828:12414. 다크 마이페이지 배경 위 흰 카드(mi- 접두) */
.mi-card { padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.24); display: flex; flex-direction: column; gap: 16px; }
.mi-card-head { display: flex; align-items: center; gap: 10px; }
.mi-card-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: -0.32px; color: #1B1D1F; }
.mi-btn { flex: none; height: 30px; padding: 8px 16px; border: none; border-radius: 60px; background: #1B1D1F; color: #fff; font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.12px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.mi-btn-light { background: #E8EBED; color: #1B1D1F; }
.mi-btn-full { width: 100%; height: 40px; }
.mi-fields { display: flex; flex-direction: column; gap: 16px; }
.mi-field { display: flex; flex-direction: column; gap: 8px; }
.mi-field-label { font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.12px; color: #1B1D1F; }
.mi-input { width: 100%; height: 40px; padding: 0 16px; border: none; border-radius: 4px; background: #F7F8F9; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; box-sizing: border-box; }
.mi-input::placeholder { color: #9EA4AA; }
.mi-input[readonly] { color: #9EA4AA; }
/* Linked accounts */
.mi-linked-row { display: flex; align-items: center; gap: 8px; }
.mi-linked-icon { flex: none; width: 24px; height: 24px; object-fit: contain; }
.mi-linked-text { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; }
/* Cancel Membership */
.mi-cancel-label { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; }
.mi-cancel-warning { font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #C00023; }
.mi-msg { display: none; font-size: 12px; color: #C00023; }
.mi-msg.show { display: block; }

/* Responsive */
@media (max-width: 900px) {
	.checkout-grid { grid-template-columns: 1fr; }
	.checkout-grid .aside { position: static; }
}
@media (max-width: 640px) {
	.product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.pay-methods { flex-direction: column; }
	.result-wrap .actions { flex-direction: column; }
	.form-row { flex-direction: column; gap: 0; }
}

/* ===== 메인 페이지 PC 레이아웃 ===== */
@media (min-width: 1024px) {
	.gnb-header { padding-left: calc((100% - 912px) / 2); padding-right: calc((100% - 912px) / 2); }
	.site-footer { padding-left: calc((100% - 912px) / 2); padding-right: calc((100% - 912px) / 2); }
	.site-footer .foot-copyright { font-size: 12px; }
	.site-footer .foot-biz-line { font-size: 14px; line-height: 18px; }
	.site-footer .foot-link { font-size: 14px; }
	.main-wrap { padding-left: calc((100% - 912px) / 2); padding-right: calc((100% - 912px) / 2); padding-top: 40px; padding-bottom: 160px; }

	
	/* ① 히어로 */
	.sec-banner { height: 360px; }
	.sec-banner .bn-bg { background-image: var(--bg-pc); }
	.sec-banner .bn-content { padding: 0 24px 46px; }
	.sec-banner .bn-title img {  }
	.sec-banner .bn-scrim { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); }


	/* ② 컬렉션 카드 */
	.sec-collection { background: transparent; box-shadow: none; flex-flow:row wrap;  margin:0;}
	.sec-collection .carousel-slide { width: calc(50% - 8px);  flex-direction: row; align-items: center; gap: 16px; padding: 24px 16px; background: #1d1d1d; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.24); }
	.sec-collection .col-thumb { width: 108px; height: 160px; flex: none; }
	.sec-collection .col-info { flex: 1; padding: 0; align-self: flex-end; border:none; padding-bottom:16px;}
	.sec-collection .tag-new, .sec-collection .tag-edition { font-size: 12px; }
	.sec-collection .col-name { font-size: 18px; }
	.sec-collection .col-price { font-size: 16px; }

	.sec-collection .col-body { margin-bottom: 0; }

	.sec-collection.pc-grid .carousel-track { transform: none !important; gap: 16px;  }
	.sec-collection.pc-grid .carousel-slide { flex: 1 1 0; }
	.sec-collection.pc-grid .col-dots { display: none; }
	.sec-collection.js-carousel {margin-bottom:0;}

	.gnb-menu-panel { left: calc((100% - 912px) / 2); right: calc((100% - 912px) / 2); transform: none; width: auto; max-width: none; }

	/* 쇼핑 리스트 PC */
	.shop-wrap { padding: 40px calc((100% - 912px) / 2) 120px; gap: 40px; }
	.shop-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
	.shop-card .shop-thumb { width: 120px; height: 180px; }
	.shop-coming { align-self: stretch; }

	/* 상품 상세 PC */
	.detail-wrap { padding: 40px calc((100% - 960px) / 2) 120px; gap: 24px; }
	.detail-wrap .detail-back{margin-left : 24px;}
	
	.detail-body { display: flex; gap: 24px; align-items: flex-start; }
	.detail-left { gap: 60px; }
	.detail-title-box.only-mobile { display: none; }
	.detail-main-img { height: 364px; }
	.detail-main-img img { height: 320px; }
	.detail-desc .desc-grid { gap: 16px; }
	.detail-desc .desc-grid .cell { height: 214px; }
	.detail-desc .desc-grid.detail-desc-pc { display: grid; }
	.detail-desc .desc-grid.detail-desc-mo { display: none; }

	/* T1 Homeground 커스텀 상세 */
	.hg-showcase .hg-showcase-pc { display: block; }
	.hg-showcase .hg-showcase-mo { display: none; }
	.hg-showcase { margin-left: 0; margin-right: 0; }

	.hg-detail { padding: 0 24px; }

	/* 1. 히어로 */
	.hg-hero { margin-bottom: 60px; }
	.hg-hero .hg-label { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; margin-bottom: 8px; }
	.hg-hero .hg-title { font-size: 30px; line-height: 35.8px; letter-spacing: -0.6px; margin-bottom: 40px; }
	.hg-price-amount, .hg-price-unit { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; }
	.hg-price-count { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.hg-main-img { height: 408px; }
	.hg-main-img img { max-height: 360px; }
	.hg-thumb { width: 120px; height: 120px; }

	/* 2. CONFIGURATION / PACK BREAK */
	.hg-config { flex-direction: row; flex-wrap: wrap; gap: 0 8px; margin-bottom: 60px; }
	.hg-config picture { flex-basis: 100%; padding-bottom: 0; margin-bottom: 40px; border-bottom: none; }
	.hg-config .hg-logo { width: auto; }
	.hg-config .hg-block { flex: 1; background: rgba(255,255,255,0.1); border-radius: 8px; padding: 24px; margin-bottom: 0; border-bottom: none; }
	.hg-config .hg-block:first-of-type,
	.hg-config .hg-block:last-of-type { padding-bottom: 24px; margin-bottom: 0; border-bottom: none; }
	.hg-config .hg-block-title { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; opacity: 1; }
	.hg-config .hg-list-plain li { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.hg-config .hg-list-dot { gap: 6px; }
	.hg-config .hg-list-dot li { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.hg-config .hg-list-dot li.hg-list-sub { font-size: 14px; line-height: 18px; letter-spacing: -0.14px; }

	/* 3/5. COLLECT SET / BASE SET */
	.hg-collect { margin-bottom: 60px; }
	.hg-baseset { margin-top: 60px; margin-bottom: 60px; }
	.hg-collect .hg-block-title,
	.hg-baseset .hg-block-title { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; }
	.hg-collect .hg-desc,
	.hg-baseset .hg-desc { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.hg-collect .hg-list-dot.hg-list-sm li { font-size: 14px; line-height: 18px; letter-spacing: -0.14px; }

	/* 6. HIGHLIGHT */
	.hg-highlight { margin-top: 60px; padding: 0 16px; }
	.hg-highlight-body p { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.hg-download { width: calc(50% - 8px); }

	/* 하단 CTA */
	.detail-cta { left: 50%; bottom: 24px; width: 460px; max-width: 460px; height: 96px; padding: 24px; background: rgba(0,0,0,0.9); border-radius: 80px; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: 0 0 60px rgba(0,0,0,0.4); gap: 10px; align-items: center; }
	.detail-cta .btn-cart-link { width: 134px; height: 48px; border-radius: 60px; background: rgba(255,255,255,0.2); font-size: 16px; font-weight: 700; }
	.detail-cta .btn-open-sheet { flex: none; width: 268px; height: 48px; border-radius: 60px; background: #00ff84; color: #1b1d1f; font-size: 16px; font-weight: 700; }
	/* 구매 불가 상태 — 장바구니 링크가 .hide 로 빠지면 좌측이 비므로 구매 버튼이 알약 폭을 채운다 */
	.detail-cta .btn-cart-link.hide + .btn-open-sheet { flex: 1; width: auto; }
	.detail-cta ~ .site-footer { padding-bottom: 160px; }

	/* 구매 패널 */
	.detail-body { display: block; }

	/* ③ ABOUT 박스 */

	/* ④ 브랜드 텍스트 */
	.sec-feature { margin-top: 44px; padding-top: 60px; background: transparent; }
	.sec-feature .ft-cards { margin-top: 40px; }
	.sec-feature .ft-card { padding-top: 24px; text-align: left; }
	.sec-feature .ft-card:first-child { padding-top: 0; }
	.sec-feature .ft-card:not(:first-child)::before { display: none; }
	.sec-feature .ft-card h3 { font-size: 14px; line-height: 18px; letter-spacing: -0.14px; }
	.sec-feature .ft-card p { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
}

/* ===== 장바구니 PC 반응형 ===== */
@media (min-width: 1024px) {
	/* 컨테이너 */
	.cart-wrap { padding: 40px calc((100% - 912px) / 2) 80px; gap: 24px; }
	.cart-title { font-size: 24px; line-height: 28px; letter-spacing: -0.48px; }
	.cart-filled { gap: 24px; }
	/* 체크박스 */
	.cart-chk-circle, .cart-card-chk { width: 24px; height: 24px; }
	.cart-select-all-label { font-size: 18px; line-height: 22px; }
	.cart-delete-btn { width: 108px; height: 40px; align-items: center; justify-content: center; font-size: 12px; line-height: 14px;}
	/* 카드 */
	.cart-card { gap: 0px; }
	.cart-card-title { font-size: 18px; line-height: 22px;padding-top: 24px;  padding-bottom:16px;}
	.cart-thumb { width: 60px; height: 60px;  }
	.cart-card-del svg { width: 20px; height: 20px; }
	.cart-qty-label, .cart-price { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	
	/* 하단 CTA */
	.cart-cta { bottom: 24px; width: 460px; max-width: 460px; height: 96px; padding: 24px; background: rgba(0,0,0,0.9); border-radius: 80px; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: 0 0 60px rgba(0,0,0,0.4); display: flex; align-items: center; }
	.cart-cta-btn { height: 48px; border-radius: 60px; }
	.cart-cta ~ .site-footer { padding-bottom: 160px; }
}

/* ===== 주문서(exchange) PC 반응형 ===== */
@media (min-width: 1024px) {
	/* 컨테이너 */
	.checkout-wrap { padding: 40px calc((100% - 912px) / 2) 160px; gap: 24px; }

	/* 타이틀·안내문 폰트업 */
	.bf-title { font-size: 30px; line-height: 35.8px; letter-spacing: -0.6px; }
	.bf-intro-head { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; }
	.bf-intro-body p { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }

	/* 카드 공통 */
	.bf-card { padding: 24px; }
	.bf-card-title { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; }

	/* Ordered Items */
	.bf-item-thumb { width: 88px; height: 88px; }
	.bf-item-info { gap: 16px; }
	.bf-item-name { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; }
	.bf-item-qty { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.bf-item-price { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; }

	/* Contact */
	.bf-card-desc { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.bf-pill { height: 48px; }
	.bf-pill span { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.bf-input { height: 48px; font-size: 16px; letter-spacing: -0.32px; }
	.bf-contact-field { flex-direction: row; }
	.bf-verify-btn { flex: none; width: 224px; height: 48px; }

	/* 개인정보 폐기 배너 */
	.bf-warn-banner { font-size: 14px; line-height: 18px; letter-spacing: -0.14px; }

	/* Payment Summary */
	.bf-sum-row > span:first-child,
	.bf-sum-row > span:last-child,
	.bf-total-label,
	.bf-total-amt { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }

	/* Terms + BUY */
	.bf-cta { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; width: 460px; padding: 24px; display: flex; flex-direction: column; gap: 16px; background: rgba(0,0,0,0.9); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); border-radius: 16px; box-shadow: 0 0 60px rgba(0,0,0,0.4); }
	/* Terms 카드 */
	.bf-cta .bf-cta-terms { background: transparent; box-shadow: none; padding: 0; gap: 16px; }
	.bf-cta .bf-cta-terms .bf-card-title { color: #fff; }
	.bf-cta .bf-check-label { color: #C9CDD2; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	/* 체크서클 */
	.bf-cta .bf-check-box { width: 24px; height: 24px; background: url('/images/check_white_off.svg'); background-size: cover; }
	.bf-cta .bf-check input:checked + .bf-check-box {  background: url('/images/check_white_on.svg'); background-size: cover; }

	/* BUY 전폭 */
	.bf-cta .bf-buy { margin: 0; height: 48px; }
	.checkout-wrap:has(.bf-cta) ~ .site-footer { padding-bottom: 160px; }

	/* 약관 전체화면 오버레이 → PC 중앙 모달 */
	.bf-terms { max-width: 480px; top: 50%; bottom: auto; height: 720px; max-height: 90vh; border-radius: 16px; overflow: hidden; transform: translate(-50%, -50%); }

	/* ── Contact 인증 인라인(발송 후) ── */
	.bf-verify-row { position: relative; display: flex; align-items: flex-start; gap: 8px; }
	.bf-contact.is-complete .bf-verify-row { display: none; }
	.bf-verify-code-group { flex: 1; min-width: 0; }
	.bf-verify-actions { flex: none; display: block; }
	.bf-verify-confirm { width: 160px; height: 48px; flex: none; }
	.bf-verify-resend-mo { display: none; }
	.bf-verify-resend-pc { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 8px; right: 8px; width: 88px; height: 32px; }
	.bf-verify-timer { right: 112px; }
	.bf-verify-code { padding-right: 160px; }
	.bf-verify-complete{ height: 48px;}
	/* helper·에러 문구 */
	.bf-verify-helper, .bf-verify-error { font-size: 14px; line-height: 18px; letter-spacing: -0.14px; }
}

/* ===== 구매 완료페이지 PC 반응형 ===== */
@media (min-width: 1024px) {
	/* 컨테이너 */
	.oc-wrap { padding: 40px calc((100% - 912px) / 2) 160px; }
	/* 뒤로가기 */
	.oc-wrap .detail-back { width: 48px; height: 48px; }
	.oc-wrap .detail-back svg { width: 24px; height: 22px; }
	.oc-head { margin-top: 24px; gap: 8px; }
	.oc-title { font-size: 30px; line-height: 35.8px; letter-spacing: -0.6px; }
	.oc-sub { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.oc-cards { margin-top: 40px; }
	/* 카드 */
	.oc-card { padding: 24px; gap: 16px; }
	/* 그룹 구분선 */
	.oc-group-div { padding-bottom: 16px; border-bottom-style: solid; }
	.oc-label { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.oc-value { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; }
	/* Continue shopping */
	.oc-continue { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
}

/* ===== 교환권(voucher) PC 반응형 ===== */
@media (min-width: 1024px) {
	.vc-wrap { padding: 40px calc((100% - 912px) / 2) 160px; gap: 24px; }
	.vc-title { font-size: 24px; line-height: 28px; letter-spacing: -0.48px; }
	.vc-card { padding: 24px; }
	.vc-card-title { font-size: 20px; }
	.vc-qr-wrap { width: 240px; height: 240px; }
	.vc-url-card { padding: 24px; }
	.vc-items-card { padding: 24px; }
}

/* ===== PC 액션 버튼 높이 48px 통일 (2026-07-28) =====
   탭(.my-tab)·수량 스테퍼·체크박스는 제외 — 주요 CTA/액션 버튼만.
   detail-cta / cart-cta-btn / bf-buy / bf-verify-btn 은 각 섹션 PC 블록에서 이미 48px. */
@media (min-width: 1024px) {
	.panel-actions .btn-buy,
	.panel-actions .btn-cart2,
	.cart-empty-btn,
	.co-addr-add,
	.co-pay { height: 48px; }
}

@media (min-width: 1024px) {
	.my-wrap { padding: 40px calc((100% - 960px) / 2) 160px; gap: 24px; }
	.my-head { gap :40px; }
	.my-dt-head { padding :  0 24px 24px; }
	.my-title {  font-size: 24px; font-style: normal; font-weight: 700; line-height: 28px; /* 116.667% */ letter-spacing: -0.48px; }
	.my-tabs { gap: 8px; }
	.my-tab { display: inline-flex; min-width:120px; flex: 0; height:40px;}
	.my-ord-list { flex-flow:row wrap ; gap:8px;}
	.my-ord-card { padding:24px; min-width: 452px;}

	.my-ord-thumb { height: 60px; width: 60px; padding: 6px; }
	.my-ord-name { font-size:16px; line-height: 20px;}

	.my-inner { padding: 0 24px; gap:24px;}
	.my-od-sec { gap: 24px;}
	.my-od-btn { min-width: 168px; }

}

@media (min-width: 1024px) {
	.community-wrap { padding: 40px calc((100% - 912px) / 2) 160px;  }
	
	.community-wrap .detail-back { width: 48px; height: 48px; }
	.community-wrap .detail-back svg { width: 24px; height: 22px; }
	.cm-title{  padding-bottom:40px;}
	.cm-card { padding: 24px;}
	.cm-badge { height: 24px; font-size:12px; line-height: 14px;}
	.cm-item-title{ padding-top:16px; font-size: 16px; line-height: 20px;}
	.cm-item-date { padding-top: 8px; font-size: 14px; line-height: 18px;}
	.cm-pager { padding-top: 40px; }

	.comm-view-title-box{ padding-top: 24px; gap:24px;}
	.comm-titles{ gap:8px;}
	.comm-view-date { font-size: 16px; line-height: 20px; letter-spacing: -0.32px;}
	.comm-view-content { margin-bottom: 40px;}
	.comm-btn { margin: 0 auto;  width:168px; height: 40px;  padding: 0 24px; border: none; border-radius: 60px; background: rgba(255,255,255,0.1); color: #fff; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

}