/* 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) 100%); }
.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) */
/* 컬렉션 카드 — JS 캐러셀(.js-carousel: 드래그·dot·자동재생) 대신 네이티브 가로 스크롤 + 스냅으로
   한 장씩 넘긴다(2026-08-28 사용자 결정). 스크롤 관성·키보드·접근성이 브라우저 기본 동작 그대로 살아 있고
   JS 는 한 줄도 필요 없다. PC(1024↑)에서는 아래 media query 가 2열 wrap 그리드로 되돌린다 */
.sec-collection { padding-top: 24px; background: transparent; display: flex; flex-flow: row nowrap; align-items: stretch; gap:16px; margin-bottom:24px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sec-collection::-webkit-scrollbar { display: none; }
.sec-collection > .carousel-slide { flex: 0 0 100%; scroll-snap-align: center; }
.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); }

/* ===== 오픈 안내 팝업 (FAQ) — Figma main_pop_1, 메인 진입 시 자동 노출 =====
 * 시안 크기: 딤 360x900 / 그룹 330 x (KR 571 · EN 627) / 카드 330 x (KR 527 · EN 583)
 * ★height 는 어디에도 쓰지 않는다 — 영문에서 Q2 답변·Q4 제목이 2줄로 늘어나 높이가 달라진다.
 * 딤(.nf-modal)이 스크롤 컨테이너를 겸하고 .nf-group 은 margin:auto 로 중앙에 놓인다.
 * (justify-content:center 는 내용이 화면보다 길어질 때 위쪽이 잘리므로 쓰지 않는다.)
 * 열림/닫힘 표현은 약관 오버레이(.bf-terms-scrim)와 동일한 opacity+visibility 방식이다.
 * z-index 는 sticky 헤더(100)보다 위 — 시안에서 헤더까지 딤에 덮인다. */
.nf-modal { position: fixed; inset: 0; z-index: 120; padding: 16px 0; background: rgba(0,0,0,0.8); display: flex; flex-direction: column; align-items: center; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.nf-modal.open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.nf-group { width: 330px; margin: auto 0; display: flex; flex-direction: column; gap: 24px; }
/* padding-top 90 = FAQ 워드마크·일러스트가 놓이는 헤더 영역(둘 다 절대배치라 흐름에 높이를 주지 않는다) */
.nf-card { position: relative; padding: 90px 17px 16px; background: #fff; border-radius: 16px; }
/* 카드 내부 상단 바는 PC 시안(buy_form_7_pc)에만 있다 — 모바일 시안에는 없으므로 숨긴다 */
.nf-head { display: none; }
/* 워드마크 — 시안 벡터를 그대로 쓴다(FAQ.svg, 105x33) */
.nf-wordmark { position: absolute; top: 35px; left: 17px; width: 105px; height: 33px; display: block; }
/* 카드 일러스트 — 시안 위치는 카드 기준 top 15 / right 23, 71x107.
   faq_image.png 는 142x214(2배) 이라 71x107 로 축소해 고해상도 화면에서도 선명하다 */
.nf-illust { position: absolute; top: 15px; right: 23px; width: 71px; height: 107px; display: block; }
.nf-list { position: relative; display: flex; flex-direction: column; gap: 12px; }
.nf-item { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.nf-line-t { border-top: 1px solid #E8EBED; }
.nf-line-b { border-bottom: 1px solid #E8EBED; }
/* Q3·Q4 묶음 — 둘 사이에는 .nf-list 의 gap 이 걸리지 않고 각 블록의 상·하 padding 12 만 남는다 */
.nf-sub { display: flex; flex-direction: column; }
.nf-sub .nf-item { padding-bottom: 12px; }
.nf-q { font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: -0.32px; color: #1B1D1F; }
.nf-a { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #454C53; }
.nf-a-group { display: flex; flex-direction: column; gap: 4px; }
.nf-a-warn { font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #C00023; }
.nf-close { height: 40px; padding: 0 16px; border: none; border-radius: 40px; background: #F7F8F9; color: #1B1D1F; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; cursor: pointer; }
/* 체크박스는 장바구니 전체선택 컴포넌트 재사용. 라벨 opacity 0.7 은 시안값이고,
   크기 고정은 PC(min-width:1024) 에서 .cart-chk-circle 24px / 라벨 18px 로 커지는 규칙을 되돌리는 것 —
   이 팝업은 PC 시안이 없어 카드 폭·본문이 330/14px 로 고정이므로 체크박스만 커지면 어긋난다. */
.nf-check .cart-chk-circle { width: 20px; height: 20px; }
.nf-check .cart-select-all-label { font-size: 14px; line-height: 18px; opacity: 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 { position:relative; 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; }

/* ── product/3.php 전용 스펙 영역 (CONFIGURATION / 팩 구성 / 박스·케이스 Guarantee) ──
   1.php·2.php 는 PC 에서 .hg-config 가 회색 카드 2단인데, 이 시안(Figma main_en_1_pc 1210:3079 · Frame 964)은
   912 전폭 세로 나열에 배경 패널이 없다. 공유 클래스를 덮어쓰면 1·2.php 까지 흔들리므로 독립 클래스로 둔다.
   모바일 규격은 기존 렌더와 동일하게 유지하고, PC 만 새 시안을 따른다. */
.vct-spec { display: flex; flex-direction: column; margin-bottom: 40px; }
.vct-spec-logo { padding-bottom: 24px; margin-bottom: 16px; border-bottom: 2px solid rgba(255,255,255,0.3); }
.vct-spec-logo img { display: block; min-width: 174px; max-width: 100%; height: auto; }
.vct-spec-block { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
/* 그룹 경계(팩 구성 뒤·케이스 Guarantee 뒤)는 굵은 선 */
.vct-spec-block-strong,
.vct-spec-block-last { border-bottom: 2px solid rgba(255,255,255,0.3); }
/* 캡션 앞 간격 — 예전 .hg-config 컨테이너 여백(40px)이 하던 몫 */
.vct-spec-block-last { margin-bottom: 40px; }
.vct-spec-title { font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: -0.32px; color: #fff; opacity: 0.8; margin-bottom: 8px; }
.vct-spec-list { display: flex; flex-direction: column; gap: 6px; }
.vct-spec-list li { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #fff; opacity: 0.6; }
/* 좌:수량명 / 우:구성수 2열 리스트("1 팩" / "카드 10장") */
.vct-spec-list-2col li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* 경고·고지 — 시안 실측(1239:1959): 목록↔경고 8, 경고 줄간 8, 고지↔캡션 16, 캡션 줄간 8 */
.vct-spec-warn { margin-top: 8px; font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #C00023; }
.vct-spec-legal { margin-bottom: 16px; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #fff; opacity: 0.8; }
.vct-spec .hg-note + .hg-note { margin-top: 8px; }

/* 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; }

/* product/3.php 전용 — 카드 쇼케이스(원형 블러 배경 + 카드 3장 자유배치). 좌표는 시안 절대좌표를 컨테이너 기준 %/px로 환산.
   원형 배경은 이미지가 아니라 단색 원 + blur(240)만으로 만든다(퍼블리싱 지시사항). */

/* 6. HIGHLIGHT */
/* ⑥ COLLECTION CHART — 시안 962:4688(360×444.65, 모바일). root padding top40/좌우16, 헤더↔본문 gap 0, 본문 내부 gap 16.
   ★.hg-chart-slot 은 사용자 지시로 비워둔 자리다(시안 Frame 1056, 328×278 고정). 내용물(선수별 카드 수량표)은 추후. */
.hg-chart { display: flex; flex-direction: column; margin-top: 40px; }
.hg-chart-logo-wrap { display: flex; align-items: center; height: 74.65px; }
.hg-chart-logo { display: block; width: 257px; height: 51px; }
.hg-chart-desc { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #fff; opacity: 0.8; }
/* 차트 슬롯 — 원본비를 유지한 채 높이 278에 맞춰 축소하고 넘치는 폭은 가로 스크롤.
   페이드는 스크롤 영역 밖(슬롯 기준 absolute)에 둬야 스크롤을 따라 움직이지 않는다. */
.hg-chart-slot { position: relative; margin-top: 16px; }
.hg-chart-scroll { height: 278px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.hg-chart-scroll::-webkit-scrollbar { display: none; }
.hg-chart-scroll { scrollbar-width: none; }
.hg-chart-img { display: block; height: 100%; width: auto; max-width: none; }
/* 좌·우 스크롤 힌트 — 끝에 닿으면 detail.js 가 .at-start/.at-end 를 걸어 해당 쪽을 끈다 */
.hg-chart-fade { position: absolute; top: 0; width: 56px; height: 100%; pointer-events: none; transition: opacity 0.2s ease; }
.hg-chart-fade-left  { left: 0;  background: linear-gradient(to left,  rgba(18,18,18,0) 0%, rgba(18,18,18,1) 100%); }
.hg-chart-fade-right { right: 0; background: linear-gradient(to right, rgba(18,18,18,0) 0%, rgba(18,18,18,1) 100%); }
.hg-chart-slot.at-start .hg-chart-fade-left  { opacity: 0; }
.hg-chart-slot.at-end   .hg-chart-fade-right { opacity: 0; }

.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; }
/* 자동 단위 전환 안내(고정 문구) + 선택 총량 표기(JS 가 채움). 유닛 리스트 아래에 붙는다. */
.unit-convert-note { margin: 12px 0 0; font-size: 13px; font-weight: 400; color: #fff; opacity: 0.5; line-height: 1.5; }
/* 담기 거부(상한 초과) — 안내 자리를 그대로 쓰고 색만 바꾼다. 다크 패널이라 밝은 빨강(.go-cancel-msg.is-error 와 동일) */
.unit-convert-note.is-error { color: #FF4D4D; opacity: 1; }
.unit-total-note { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: #fff; opacity: 0.8; line-height: 1.5; min-height: 20px; }
.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, .co-addr-change { 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-addr-view { display: flex; flex-direction: column; gap: 4px; }
.co-addr-recv { font-size: 16px; font-weight: 700; color: #1B1D1F; }
.co-addr-tel { margin-left: 8px; font-size: 14px; font-weight: 400; color: #9EA4AA; }
.co-addr-line { font-size: 14px; font-weight: 400; color: #454C53; }
.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; }
/* 주문 거부(구매 상한 초과) 인라인 표시 — 색만 바꾼다. is-error 는 .go-cancel-msg 와 같은 기존 수식자 규칙 */
.bf-card-desc.is-error, .co-field-desc.is-error { color: #D50000; }
.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-title { 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-title 이 두 용도로 쓰인다 — 문서 제목(h2#bfTermsTitle)과 전자금융약관의 번호 문단(p+span).
   바로 위 문단용 규칙(14px)이 :535 의 제목 규칙(24px)보다 뒤에 있어 제목까지 덮어쓰고 있었다
   (약관 오버레이 전체가 해당). 문단 규칙을 고치면 finance 약관 78곳이 흔들리므로 제목만 ID 로 승격한다. */
#bfTermsTitle { padding-left: 0; font-size: 24px; font-weight: 400; line-height: 28px; letter-spacing: -0.48px; }
.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; }
/* 상한 초과 안내 — checkout.js 가 #bfContact 직하위에 붙인다(.bf-verify-error 는 is-complete 에서 숨겨진다) */
.bf-quota-blocked { margin-top: 8px; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: -0.12px; color: #D50000; }

/* ===== 교환권 (voucher) — Figma 978:2457 "U29_티켓 상세" 기준 =====
   시안 프레임 배경은 #222222 로, 전역 body(#121212)와 다르다. 검정 URL 카드(#000000)가 배경과
   구분되려면 이 값이어야 해서 교환권 페이지에만 :has() 로 한정해 덮는다(전역 body 규칙은 그대로 둔다).
   :has() 미지원 브라우저에서는 기존 #121212 가 그대로 남을 뿐 레이아웃은 깨지지 않는다. */
body:has(.vc-wrap) { background: #222222; }
body:has(.vc-wrap) .gnb-header { background: #222222; }
/* 시안: 좌우 16 / 로고 아래 40 여백. 헤더(64px, 로고 세로중앙)가 시안의 로고 줄을 대신한다. */
.vc-wrap { padding: 24px max(16px, calc((100% - 480px) / 2)) 80px; display: flex; flex-direction: column; gap: 16px; }
/* 흰 카드 — 시안에 effects(그림자/블러) 0건이라 box-shadow 없음. 내부 세로 간격 24. */
.vc-card { background: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 24px; }
.vc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vc-card-title { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0; color: #2D220B; }
.vc-empty { font-size: 16px; font-weight: 400; line-height: 20px; color: #1B1D1F; }
/* 상태 배지 — 3상태 전부 시안 실측. 크기·radius(pill)·padding·폰트는 공통이고 색 조합만 바뀐다.
   교환 가능 978:2484 / 교환 완료 978:2767 / 결제 취소 978:2841. stroke 없음(3개 다 동일).
   '기간 만료'는 시안에 없는 4번째 분기라 '결제 취소'와 같은 색을 쓴다 — 둘 다 '쓸 수 없음'이고,
   검정(#1B1D1F)은 이제 '교환 완료'가 가져갔다. */
.vc-badge { flex: none; padding: 6px 16px; border-radius: 24px; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0; white-space: nowrap; }
.vc-badge-available { background: #00FF84; color: #222222; }
.vc-badge-done { background: #1B1D1F; color: #FFFFFF; }
.vc-badge-cancel,
.vc-badge-expired { background: #E8EBED; color: #9EA4AA; }
/* 주문번호 · 연락처 (라벨 좌 / 값 우) */
.vc-info { display: flex; flex-direction: column; gap: 16px; }
.vc-info-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.vc-info-label { flex: none; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #454C53; }
.vc-info-value { min-width: 0; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; text-align: right; word-break: break-all; }
/* QR — 시안 296x296(카드 콘텐츠 폭 꽉 채운 정사각). 넓은 화면에서도 296을 넘기지 않는다. */
.vc-qr-wrap { position: relative; align-self: center; width: 100%; max-width: 296px; aspect-ratio: 1 / 1; overflow: hidden; }
.vc-qr-img { width: 100%; height: 100%; object-fit: contain; }
/* 사용 불가 상태의 더미 QR — 실제 QR(.vc-qr-img)과 같은 자리·같은 크기로 깔린다.
   200x296 로 확대되므로 보간을 끄고(pixelated) 모듈 경계를 시안처럼 또렷하게 남긴다. */
.vc-qr-dummy { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
/* .vc-qr-placeholder 는 voucher.js 의 QR 로드 실패 폴백 전용이다(더미 QR 이 아니다) — 지우지 말 것. */
.vc-qr-placeholder { width: 100%; height: 100%; background: #F7F8F9; }
/* 오버레이 — 시안 Rectangle 79: fill #000000, color.a 1 x fill.opacity 0.9 x 노드 opacity 1 = 검정 90%.
   시안에 자물쇠 등 아이콘 없음(문구 하나뿐). gap 은 아이콘이 붙는 폴백 경로에서만 쓰인다. */
.vc-qr-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: rgba(0,0,0,0.9); text-align: center; }
.vc-qr-overlay p { font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: 0; color: #fff; }
/* 상품명 + 판매단위별 행 — 시안 Frame872(padding bottom 16, gap 16) */
.vc-items { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }
.vc-item-name { font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: -0.32px; color: #1B1D1F; }
.vc-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* 행 사이에만 점선 — 시안 stroke rgba(0,0,0,0.1) dash[4,4], 아래쪽 1px만. 상품명 뒤 첫 행에는 붙지 않는다. */
.vc-item + .vc-item { padding-top: 16px; border-top: 1px dashed rgba(0,0,0,0.1); }
.vc-item-qty { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #454C53; }
.vc-item-price { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; white-space: nowrap; }
.vc-item-unit { font-weight: 400; color: #72787F; }
/* QR 코드 URL (검정 카드) — 라벨 좌 / 링크·복사버튼 우측 열 */
.vc-url-card { background: #000; border-radius: 16px; padding: 24px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.vc-url-label { flex: none; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0; color: #fff; }
.vc-url-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.vc-url-link { font-size: 14px; font-weight: 400; line-height: 18px; color: #1C73E8; text-decoration: underline; word-break: break-all; }
.vc-url-copy { padding: 6px 0; border: 1px solid #C0C0C0; border-radius: 24px; background: none; color: #C0C0C0; font-size: 12px; font-weight: 700; line-height: 16px; cursor: pointer; }

/* ===== 배송지 추가 모달 (바텀시트) ===== */
.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: cover; box-shadow: 0 0 0 2px #fff; }
.my-ord-thumb-multi .my-ord-thumb-l0 { top: 0; left: 0; z-index: 3; }
.my-ord-thumb-multi .my-ord-thumb-l1 { top: 5px; left: 5px; z-index: 2; width: 42px; height: 42px; opacity: .85; }
.my-ord-thumb-multi .my-ord-thumb-l2 { top: 10px; left: 10px; 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; 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}

/* 비회원 주문취소 본인확인(order/?m=guest_detail) — .go-* 는 이 화면 전용 prefix */
.go-cancel { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 24px; }
.go-cancel-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 16px; border-radius: 12px; background: rgba(255,255,255,0.06); }
.go-cancel-desc { font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: -0.13px; color: rgba(255,255,255,0.6); text-align: center; }
.go-cancel-contact { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #fff; text-align: center; }
.go-cancel-btn { height: 40px; padding: 0 20px; 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; cursor: pointer; }
.go-cancel-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.go-cancel-code { display: flex; align-items: center; gap: 8px; }
.go-cancel-code .go-cancel-btn { flex: none; }
.go-cancel-input { flex: 1; min-width: 0; height: 40px; padding: 0 16px; border: 1px solid rgba(255,255,255,0.2); border-radius: 60px; background: transparent; color: #fff; font-size: 14px; font-weight: 400; letter-spacing: 2px; }
.go-cancel-input::placeholder { color: rgba(255,255,255,0.3); letter-spacing: -0.14px; }
.go-cancel-msg { font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: -0.12px; color: rgba(255,255,255,0.6); text-align: center; min-height: 16px; }
.go-cancel-msg.is-error { color: #FF4D4D; }

/* 회원정보(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; }

/* ===== 리뎀션 카드 등록 (redemption/register.php · Figma 02 node 1074-1214) ===== */
.rd-wrap { padding: 80px 24px 200px; background: linear-gradient(180deg, #121212 0%, #0C1726 100%); }
.rd-inner { max-width: 312px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
/* 히어로 — 이미지는 투명 배경(카드+글로우)이라 배경 그라데이션 위에 그대로 얹는다 */
.rd-hero img { display: block; width: 100%; height: auto; }
.rd-form { display: flex; flex-direction: column; gap: 12px; }
.rd-field { display: flex; flex-direction: column; gap: 8px; }
.rd-input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid rgba(255,255,255,0.1); border-radius: 48px; background: rgba(255,255,255,0.1); font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #FFFFFF; box-sizing: border-box; }
/* 코드 입력행 — 접두어(BAULT-)는 고정 표시용 읽기전용 칸이라 폭을 내용에 맞춰 고정하고,
   실제 입력칸이 남은 폭을 전부 가진다. min-width:0 이 없으면 flex 자식이 줄지 않는다. */
.rd-code-row { display: flex; gap: 8px; }
.rd-prefix { flex: 0 0 auto; width: 78px; padding: 0 12px; text-align: center; color: #9EA4AA; cursor: default; user-select: none; }
.rd-code { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: 1px; }
/* 실패 문구 — 시안(1135-1772)상 입력창 자체의 테두리·배경은 정상 상태와 같다(에러 색 없음) */
.rd-error { padding-left: 8px; font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #D50000; }

/* ── 코드 확인 성공 시트 (Figma 1135-1960) ──
   컨테이너 규격(배경·padding·핸들)은 로그인 시트와 같아 값도 그대로 맞춘다. */
.rd-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.8); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 90; }
.rd-scrim.open { opacity: 1; pointer-events: auto; }
.rd-sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 480px; z-index: 95; background: #1D1D1D; border-radius: 16px 16px 0 0; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 40px; transition: transform 0.3s ease; }
.rd-sheet.open { transform: translateX(-50%) translateY(0); }
.rd-handle { width: 48px; height: 4px; border-radius: 2px; background: #454C53; align-self: center; }
.rd-sheet-body { display: flex; flex-direction: column; gap: 24px; }
/* 카드 정보 — 아래 구분선까지가 한 덩어리다(시안 padding-bottom 24 + 1px 선) */
.rd-card { display: flex; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.1); }
/* 실물 카드 이미지 자리 — 값이 없으면 비워둔다 */
.rd-card-thumb { flex: none; width: 97px; height: 137px; border-radius: 4px; overflow: hidden; }
.rd-card-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rd-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rd-verified { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #FFFFFF; }
.rd-verified svg { flex: none; }
.rd-card-names { display: flex; flex-direction: column; gap: 4px; }
.rd-card-edition { font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.12px; color: #B8A063; }
.rd-card-product { font-size: 18px; font-weight: 400; line-height: 22px; letter-spacing: -0.36px; color: #FFFFFF; }
/* 대체지급 고지 */
.rd-notice { padding-bottom: 24px; border-bottom: 1px solid #393C41; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #FFFFFF; }
/* 약관 동의 — 시안은 위아래 2px 선으로 구분된 56px 줄 */
.rd-agree { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 0; border-top: 2px solid rgba(255,255,255,0.5); border-bottom: 2px solid rgba(255,255,255,0.5); }
.rd-agree-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #FFFFFF; cursor: pointer; }
.rd-agree-label b { font-weight: 700; }
.rd-agree-label input { position: absolute; opacity: 0; width: 0; height: 0; }
.rd-agree-box { flex: none; width: 20px; height: 20px; background: url('/images/check_white_off.svg') center / cover no-repeat; }
.rd-agree-label input:checked + .rd-agree-box { background-image: url('/images/check_white_on.svg'); }
.rd-terms-btn { flex: none; height: 24px; padding: 0 16px; border: none; border-radius: 24px; background: #393C41; font-size: 10px; font-weight: 400; line-height: 12px; color: #E8EBED; cursor: pointer; }
/* 다음 단계 CTA */
.rd-next { width: 100%; height: 40px; border: none; border-radius: 40px; background: #00FF84; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; cursor: pointer; }
/* 약관 동의 전 비활성 — 주문서 BUY(.bf-buy:disabled)와 같은 규칙을 쓴다(시안에 비활성 상태 없음) */
.rd-next:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── 배송 정보 입력 (redemption/shipping.php · Figma 05 node 1076-2574) ──
   등록 화면과 달리 어두운 배경 위에 흰 카드가 올라간다. 카드 안쪽만 밝은 테마다. */
.rds-wrap { padding: 16px 16px 120px; }
.rds-inner { max-width: 328px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.rds-head { display: flex; flex-direction: column; gap: 10px; }
.rds-title { font-size: 24px; font-weight: 400; line-height: 28px; letter-spacing: -0.48px; color: #FFFFFF; }
/* 카드 */
.rds-card { padding: 16px; border-radius: 16px; background: #FFFFFF; display: flex; flex-direction: column; gap: 24px; }
.rds-card-head { display: flex; flex-direction: column; gap: 24px; }
.rds-card-title { font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: -0.36px; color: #1B1D1F; }
/* 국내/해외 탭 */
.rds-tabs { display: flex; padding: 4px; border-radius: 48px; background: #393C41; }
.rds-tab { flex: 1; height: 28px; border: none; border-radius: 24px; background: none; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #FFFFFF; cursor: pointer; }
.rds-tab.is-active { background: #FFFFFF; color: #1B1D1F; }
/* 입력 필드 — 블록 사이 24, 라벨↔필드 8 */
.rds-fields { display: flex; flex-direction: column; }
.rds-field { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; }
.rds-field-last { padding-bottom: 0; }
/* PC 시안에만 있는 요소 — 모바일은 지금 배치를 그대로 유지한다(래퍼가 흐름에 끼어들지 않게 contents) */
.rds-title-row, .rds-row2 { display: contents; }
.rds-step { display: none; }
.rds-label { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; }
.rds-req { color: #FA2C52; }
.rds-input { width: 100%; height: 40px; padding: 0 16px; border: 1px solid #E8EBED; border-radius: 24px; background: #F7F8F9; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; box-sizing: border-box; }
.rds-input::placeholder { color: #9EA4AA; }
/* 주소 검색 줄 — 직접 입력하지 않는 필드라 배경이 한 단계 진하다 */
.rds-search { position: relative; }
.rds-input-addr { background: #E8EBED; padding-right: 92px; }
.rds-find { position: absolute; top: 8px; right: 8px; height: 24px; padding: 0 12px; border: none; border-radius: 24px; background: #1B1D1F; font-size: 12px; font-weight: 700; line-height: 14px; color: #FFFFFF; cursor: pointer; }
/* 해외 전화번호 — 국가번호(자동·readonly)와 번호를 나눠 받는다 */
.rds-phone-row { display: flex; gap: 8px; }
.rds-input-dial { flex: 0 0 80px; width: 80px; padding: 0 8px; background: #E8EBED; text-align: center; }
/* 국가 셀렉트 — 값을 고르는 필드라 시안에서 배경이 흰색이고 테두리가 진하다(입력 필드와 구분) */
.rds-select-wrap { position: relative; }
.rds-select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: #FFFFFF; border-color: #1B1D1F; }
.rds-select-arw { position: absolute; top: 12px; right: 16px; pointer-events: none; }
/* 주/도 자유 입력 모드 — 목록에서 고르는 국가는 미국·캐나다뿐이라(country_states 에 그 둘만 있다)
   나머지 국가에서는 고를 목록이 없는데 셀렉트 외형(흰 배경·짙은 테두리·화살표)이 남으면
   '눌러도 아무것도 안 뜨는 드롭다운'처럼 보인다. 그때는 일반 입력칸 외형으로 되돌린다. */
.rds-combo.is-free .rds-select { padding-right: 16px; background: #F7F8F9; border-color: #E8EBED; }
.rds-combo.is-free .rds-select-arw { display: none; }
/* 검색되는 국가 목록 — 시안에는 펼친 상태가 없어 입력 필드 규격(테두리·radius·폰트)에 맞춰 유도했다 */
.rds-combo-list { position: absolute; left: 0; right: 0; top: 44px; z-index: 20; max-height: 240px; overflow-y: auto; padding: 4px 0; border: 1px solid #E8EBED; border-radius: 16px; background: #FFFFFF; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.rds-combo-item { padding: 10px 16px; font-size: 14px; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; cursor: pointer; }
.rds-combo-item:hover { background: #F7F8F9; }
/* 하단 — 동의 줄 + CTA */
.rds-foot { display: flex; flex-direction: column; gap: 16px; }
.rds-agree { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rds-agree-label { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #FFFFFF; cursor: pointer; }
.rds-agree-label b { font-weight: 700; }
.rds-agree-label input { position: absolute; opacity: 0; width: 0; height: 0; }
.rds-agree-box { flex: none; width: 20px; height: 20px; margin-right: 4px; background: url('/images/check_white_off.svg') center / cover no-repeat; }
.rds-agree-label input:checked + .rds-agree-box { background-image: url('/images/check_white_on.svg'); }
/* 남은 필수 항목 안내 — 등록 화면의 실패 문구(.rd-error)와 같은 규격 */
.rds-alert { font-size: 12px; font-weight: 400; line-height: 14px; letter-spacing: -0.12px; color: #D50000; }
.rds-next { width: 100%; height: 40px; border: none; border-radius: 40px; background: #00FF84; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; cursor: pointer; }
/* 비활성 opacity 0.2 는 시안값이다(등록 시트의 0.6 과 다름 — 그쪽은 시안에 비활성 상태가 없어 기존 규칙을 따랐다) */
.rds-next:disabled { opacity: 0.2; cursor: not-allowed; }
.rd-input::placeholder { color: #9EA4AA; }
.rd-actions { display: flex; flex-direction: column; gap: 16px; }
.rd-submit { width: 100%; height: 48px; border: none; border-radius: 40px; background: #FFFFFF; color: #1B1D1F; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; cursor: pointer; }
.rd-list { display: block; text-align: center; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #E8EBED; }

/* ── 배송 정보 확인 (redemption/review.php · Figma 06 node 1101:4587) ──
   .rds-wrap/.rds-inner/.rds-head/.rds-title 는 shipping.php 와 그대로 공유한다.
   카드 2장은 gap 없이 붙여서 하나의 알약형 카드처럼 보이게 한다(위 카드만 shadow). */
.rdv-cards { display: flex; flex-direction: column; }
.rdv-card { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.rdv-card-top { background: #FFFFFF; border-radius: 16px 16px 0 0; box-shadow: 0 4px 16px rgba(0,0,0,0.24); }
.rdv-card-bottom { background: #F7F8F9; border-radius: 0 0 16px 16px; }
.rdv-card-title { font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: -0.32px; color: #1B1D1F; }
/* 리뎀션 카드 섹션 — 썸네일은 redemption_codes 에 이미지 컬럼이 없어 자리만 잡아둔다 */
.rdv-product { display: flex; align-items: center; gap: 16px; }
.rdv-thumb { flex: none; width: 42px; height: 60px; border-radius: 4px; overflow: hidden; }
.rdv-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rdv-product-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rdv-edition { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #B8A063; }
.rdv-name { font-size: 18px; font-weight: 400; line-height: 22px; letter-spacing: -0.36px; color: #1B1D1F; }
/* 배송지 정보 섹션 — 라벨 좌측, 값 우측정렬 */
.rdv-rows { display: flex; flex-direction: column; gap: 8px; }
.rdv-row { display: flex; gap: 8px; }
.rdv-row-label { flex: none; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #72787F; }
.rdv-row-value { flex: 1; text-align: right; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; }
.rdv-submit { width: 100%; border: none; border-radius: 40px; background: #00FF84; padding: 14px 16px; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; cursor: pointer; }

/* ── 접수 완료 (redemption/done.php · Figma 08 node 1103:9139) ── */
.rdd-wrap { padding: 80px 16px 120px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.rdd-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #00FF84; display: flex; align-items: center; justify-content: center; }
.rdd-text { font-size: 18px; font-weight: 400; line-height: 22px; letter-spacing: -0.36px; color: #FFFFFF; }
.rdd-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 138px; height: 40px; padding: 14px 16px; border-radius: 40px; background: #393C41; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #FFFFFF; text-decoration: none; }

/* ── 리뎀션 카드 목록 (redemption/list.php · Figma mypage_history node 1147:2135) ──
   아이템 카드는 .rdv-* 를 review.php 와 그대로 공유한다. 목록 전용 클래스는 상태 라인·빈 상태뿐이다. */
.rdl-items { display: flex; flex-direction: column; gap: 16px; }
.rdl-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rdl-status { font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: -0.32px; color: #454C53; }
/* 링크(<a>)에서 버튼(<button>)으로 바뀌어 border·font-family 기본값을 초기화한다 */
.rdl-track-btn { flex: none; height: 24px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 24px; background: #1B1D1F; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: -0.12px; color: #FFFFFF; text-decoration: none; cursor: pointer; }
.rdl-empty { text-align: center; padding: 40px 0; font-size: 14px; font-weight: 400; color: #9EA4AA; }

/* 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 {}

	/* ② 컬렉션 카드 */
	/* PC 도 같은 가로 슬라이드다. 다만 한 화면에 2칸을 보여주고(카드 폭 = 50% - gap 절반),
	   3칸부터 자연히 넘칠 때만 스크롤이 생긴다 — 2칸 이하면 다 보이므로 스크롤이 없다.
	   스냅 기준은 왼쪽(start) — 2칸씩 보는 화면에서 center 로 물리면 첫 칸이 반쯤 잘린다 */
	.sec-collection { background: transparent; box-shadow: none; flex-flow: row nowrap;  margin:0; }
	.sec-collection > .carousel-slide { flex: 0 0 calc(50% - 8px); scroll-snap-align: start; }
	.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% - 912px) / 2) 120px; gap: 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; }

	/* 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; }
	/* product/3.php 스펙 영역 PC — 시안 Frame 964(912×548) 실측.
	   블록마다 pad=[16,0,16,0] gap=8, 배경 패널 없음. 구분선은 첫 블록 위 2px 40% /
	   팩 구성·박스 Guarantee 아래 1px 10% / 케이스 Guarantee 아래 2px 30%
	   (CONFIGURATION↔팩 구성 사이에는 선이 없다) */
	.vct-spec { margin-bottom: 60px; }
	.vct-spec-logo { padding-bottom: 0; margin-bottom: 40px; border-bottom: none; }
	.vct-spec-logo img { width: auto; }
	.vct-spec-block { padding: 16px 0; margin-bottom: 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
	.vct-spec-block-first { border-top: 2px solid rgba(255,255,255,0.4); border-bottom: none; }
	.vct-spec-block-strong { border-bottom: 1px solid rgba(255,255,255,0.1); }
	.vct-spec-block-last { margin-bottom: 40px; border-bottom: 2px solid rgba(255,255,255,0.3); }
	.vct-spec-title { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; }
	.vct-spec-list { gap: 8px; }
	.vct-spec-list li { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	/* CONFIGURATION 2열만 시안 gap 이 6이다(Frame 953) */
	.vct-spec-list-2col { gap: 6px; }
	/* 경고·고지·캡션도 같은 블록의 +2px 규칙을 따른다(PC 시안 없음, 폰트만 맞춤) */
	.vct-spec-warn { font-size: 14px; line-height: 18px; letter-spacing: -0.14px; }
	.vct-spec-legal { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.vct-spec .hg-note { font-size: 14px; line-height: 18px; letter-spacing: -0.14px; }


	/* 6. HIGHLIGHT */
	/* 차트 PC — 스크롤 없이 전체 노출(사용자 결정). 폭에 맞춰 축소되므로 페이드 힌트도 불필요 */
	.hg-chart { margin: 60px 0; padding: 40px 16px 0; }
	.hg-chart-desc { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; }
	.hg-chart-scroll { height: auto; overflow: visible; }
	.hg-chart-img { width: 100%; height: auto; }
	.hg-chart-fade { display: none; }

	.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; }
}

/* ===== 오픈 안내 팝업(FAQ) PC 반응형 — Figma buy_form_7_pc =====
 * 시안: 딤 1728x1080 / 그룹 460x663(gap 16) / 카드 460x627 / 콘텐츠 폭 412
 * 카드 627 = 상단 바 64 + 워드마크 영역 90 + Q&A 리스트 449 + 하단 여백 24
 * ★모바일에 없던 "카드 내부 상단 바(로고+✕)"가 PC 에만 붙는다. 시안에서 워드마크·일러스트의
 *   좌표는 그 바 아래 영역(Frame 1038) 기준이라, 카드 기준으로는 top 에 64 를 더한 값이 된다.
 * ★그림자/블러 없음 — 모바일 카드에 있던 BACKGROUND_BLUR 정의가 PC 시안에는 아예 없다(effects: []).
 * 체크박스(20px·라벨 14px)와 [닫기] 버튼 폰트(14/700)는 시안이 모바일과 같아 그대로 둔다. */
@media (min-width: 1024px) {
	.nf-group { width: 460px; gap: 16px; }
	/* padding-top 154 = 상단 바 64 + 워드마크 영역 90 */
	.nf-card { padding: 154px 24px 24px; }
	/* 바를 absolute 로 띄운 이유: .nf-card 의 padding-top 은 워드마크·일러스트 영역용이라
	   바를 흐름에 두면 같이 밀려 내려간다. 모바일 구조를 건드리지 않는 쪽을 택했다.
	   (바에는 배경이 없어 카드의 border-radius 를 가리지도 않는다.) */
	.nf-head { position: absolute; top: 0; left: 0; right: 0; height: 64px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
	.nf-head-logo { height: 14px; display: block; }
	.nf-head-close { flex: none; width: 28px; height: 28px; padding: 0; border: none; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
	.nf-wordmark { top: 99px; }
	.nf-illust { top: 79px; right: 19px; }
	.nf-list { gap: 16px; }
	.nf-item { padding-top: 16px; }
	.nf-sub .nf-item { padding-bottom: 16px; }
	.nf-q { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; }
	.nf-a { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	/* Q1 답변은 412 폭에서 개행이 필요 없다(시안 원문에 개행 문자 없음) — 모바일용 강제개행만 죽인다 */
	.nf-a br { display: none; }
	.nf-a-warn { font-size: 14px; line-height: 18px; letter-spacing: -0.14px; }
}

/* ===== 장바구니 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 반응형 =====
   ★공통 그리드(912) 좌측 정렬을 쓰지 않고 뷰포트 가운데에 놓는다. 시안(978:2457/2761/2835)이
   360 단일 컬럼이라 912 그리드에 얹으면 480 카드가 912 안에서 좌측으로 쏠려, 넓은 화면일수록
   우측에 카드 폭의 몇 배나 되는 빈 공간이 남는다(교환권은 이 카드 말고 볼 것이 없는 화면이다).
   가로 여백 식은 모바일 기본값과 동일하고 상하 여백만 PC 값으로 덮는다.
   ★카드 폭 480 유지: 시안 카드는 328(360 프레임 − 좌우 16)이라 480 도 이미 시안보다 넓다.
   더 늘리면 라벨(좌)과 값(우)이 멀어져 한 행으로 안 읽히고, QR(max 296)도 카드 안에서 떠 버린다.
   480 은 이 사이트의 단일 컬럼 폭(.addr-sheet 등)과도 같은 값이다. */
@media (min-width: 1024px) {
	.vc-wrap { padding: 40px max(16px, calc((100% - 480px) / 2)) 160px; }
	.vc-card, .vc-url-card { max-width: 480px; }
}

/* ===== 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 {  margin-left:24px; margin-bottom: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; }

}

/* ===== 리뎀션 카드 등록 PC 반응형 =====
 * ⚠️PC 시안 없음 — 값은 기존 PC 규칙에서 유도했다(컨테이너 40/160·콘텐츠 912, 좁은 폼은 460,
 *   본문 폰트 14→16/20/-0.32). 시안이 나오면 대조 필요.
 * 입력·버튼 높이(48)와 요소 간격은 모바일과 같아 그대로 둔다. */
@media (min-width: 1024px) {
	.rd-wrap { padding: 40px calc((100% - 912px) / 2) 200px; }
	/* PC 시안(1149:4337) 실측 — 폼 실폭 520, 히어로↔폼 8, 폼 내부 그룹 간격 24, 히어로 520×458(FILL) */
	.rd-inner { max-width: 520px; gap: 8px; }
	/* 시안 슬롯은 520×458(세로형)인데 전달된 이미지는 624×374(가로형)이다. 슬롯에 맞춰 늘리면 좌우가 잘리므로
	   슬롯 높이(=시안의 세로 간격)만 유지하고 이미지는 원본비로 가운데 둔다(위아래 각 73px 여백) */
	.rd-hero { height: 458px; display: flex; align-items: center; justify-content: center; }
	.rd-hero img { width: 520px; height: auto; }
	.rd-form { gap: 24px; }
	.rd-actions { gap: 24px; }
	.rd-input, .rd-submit, .rd-list { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	/* PC 는 폰트가 16 이라 접두어 칸도 그만큼 넓힌다(모바일 78 → 88) */
	.rd-prefix { width: 88px; }
	.rd-error { padding: 0 12px; font-size: 14px; line-height: 18px; letter-spacing: -0.14px; }

	/* 배송지 입력 PC 시안(1103:7993) 실측 — 콘텐츠 912, 카드 padding 24, 입력 48, 폰트 16 */
	.rds-wrap { padding: 40px calc((100% - 912px) / 2) 160px; }
	.rds-inner { max-width: 912px; }
	.rds-card { padding: 24px; }
	.rds-card-head { flex-direction: row; align-items: center; justify-content: space-between; }
	.rds-title-row { display: flex; align-items: baseline; justify-content: space-between; }
	.rds-step { display: block; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; color: #9EA4AA; }
	.rds-step b { font-weight: 700; color: #FFFFFF; }
	.rds-tabs { flex: none; width: 360px; height: 40px; }
	.rds-tab { width: 176px; height: 32px; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.rds-label { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.rds-input { height: 48px; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.rds-find { top: 12px; }
	.rds-row2 { display: flex; gap: 16px; }
	.rds-row2 .rds-field { flex: 1; min-width: 0; }
	.rds-next { height: 48px; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }

	/* 배송 정보 확인(요약) PC 시안(1103:8938) 실측 — 카드 padding 24, 썸네일 56×80, 라벨·값 16, 행 간격 16.
	   ★PC 시안에는 페이지 제목이 없다(뒤로가기 화살표만) */
	.rdv-title { display: none; }
	.rdv-single .rdv-card { padding: 24px; }
	.rdv-single .rdv-card-title { font-size: 18px; line-height: 22px; letter-spacing: -0.36px; }
	.rdv-single .rdv-thumb { width: 56px; height: 80px; }
	.rdv-single .rdv-rows { gap: 16px; }
	.rdv-single .rdv-row-label,
	.rdv-single .rdv-row-value { font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }
	.rdv-submit { height: 48px; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }

	/* 접수 완료 PC 시안(1103:9482 계열) 실측 — 아이콘 60, 문구 24, 버튼 162×48/16.
	   콘텐츠는 헤더-푸터 사이 공간의 세로 중앙에 놓인다(상단 여백 고정이 아니다) */
	/* 시안 gap 은 아이콘↔문구 24 / 문구↔버튼 16 으로 서로 다르다 — 기본 16 을 두고 아이콘에만 8 을 더한다 */
	.rdd-wrap { min-height: 554px; padding: 40px calc((100% - 912px) / 2) 160px; justify-content: center; }
	.rdd-icon { width: 60px; height: 60px; margin-bottom: 8px; }
	.rdd-icon svg { width: 25px; height: 19px; }
	.rdd-text { font-size: 24px; line-height: 28px; letter-spacing: -0.48px; }
	.rdd-btn { width: 162px; height: 48px; font-size: 16px; line-height: 20px; letter-spacing: -0.32px; }

	/* 리뎀션 카드 목록 — PC 시안이 없어 한 줄에 2장씩 놓는다(사용자 지시).
	   카드 너비는 콘텐츠 폭의 50% - 8px = gap 16 의 절반을 뺀 값이라 2장 + gap 이 912 에 정확히 맞는다.
	   ★.rdv-* 카드 내부 규격은 건드리지 않는다 — 요약 화면과 같은 카드를 그대로 쓴다 */
	.rdl-items { display: grid; grid-template-columns: repeat(2, calc(50% - 8px)); gap: 16px; align-items: start; }
}