/* =====================================================================
   사용자 사이트 스킨 보조 (shop-skin-sf1.css) — 앱 소유
   shop-skin.css 다음에 읽는다. 메인·브랜드·분류 목록·검색·원본보기 새 창·결제창·주문완료·결제 실패 화면에서만 쓴다.
   shop-skin.css 와 같은 규칙: 표준 comp-* 클래스·변수를 그대로 쓰고, 표준에 없는 카페24 기본 스킨 구조만
   comp-sf- 접두 보조 클래스로 둔다. 상태 클래스는 active / selected / disabled.
   근거: spec/screens/storefront.md S-01~S-04, S-05-P1, S-08~S-10
   실제 구현: shop-skin.css 에 합친다(static/css/shop-skin.css).
   ===================================================================== */

/* ---------- S-01 투명 헤더 (메인 비주얼 위에 겹침, 스크롤하면 배경) ---------- */
.comp-sf-header.comp-sf-header-clear {
  margin-bottom: -56px;
  background: transparent;
  border-bottom-color: transparent;
  color: #fff;
  transition: background .2s, color .2s;
}
.comp-sf-header.comp-sf-header-clear.active { background: var(--bg-default); color: var(--text-primary); border-bottom-color: var(--color-gray-200); }

/* ---------- 가로 슬라이드 공통 ---------- */
.comp-sf-hscroll {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.comp-sf-hscroll::-webkit-scrollbar { display: none; }

/* ---------- S-01 메인 비주얼 ---------- */
.comp-sf-visual { position: relative; }
.comp-sf-visual .comp-sf-slide {
  position: relative; flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px 56px;
  color: #fff;
}
.comp-sf-visual .comp-sf-slide .comp-sf-ph-label { position: absolute; top: 45%; left: 0; right: 0; text-align: center; font-size: 14px; color: rgba(255,255,255,.7); }
.comp-sf-visual .comp-sf-v1 { background: #5b6370; } .comp-sf-visual .comp-sf-v2 { background: #8a7a66; } .comp-sf-visual .comp-sf-v3 { background: #3f5a52; }
.comp-sf-visual .comp-sf-label { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 2px 8px; border: 1px solid #fff; margin-bottom: 8px; }
.comp-sf-visual h3 { font-size: 24px; line-height: 1.3; font-weight: 800; margin: 0 0 10px; }
.comp-sf-visual .comp-sf-more { font-size: 13px; text-decoration: underline !important; }
.comp-sf-visual .comp-sf-dots { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 6px; }
.comp-sf-visual .comp-sf-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); }
.comp-sf-visual .comp-sf-dots button.active { background: #fff; width: 20px; border-radius: 4px; }

/* ---------- S-01 분류 아이콘 메뉴 ---------- */
.comp-sf-cate-icons { gap: 14px; padding: 18px 16px; border-bottom: 8px solid var(--color-gray-50); }
.comp-sf-cate-icons a { flex: 0 0 64px; text-align: center; font-size: 12px; }
.comp-sf-cate-icons .comp-sf-ico-img { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-gray-100); margin-bottom: 6px; font-size: 20px; color: #888; }

/* ---------- 영역 제목 (NEW ARRIVAL / REVIEW) ---------- */
.comp-sf-area { padding: 24px 0; border-bottom: 8px solid var(--color-gray-50); }
.comp-sf-area-hd { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; margin-bottom: 14px; }
.comp-sf-area-hd h2 { font-size: 17px; font-weight: 800; letter-spacing: 1px; }
.comp-sf-area-hd a { font-size: 12px; color: var(--text-secondary); }
.comp-sf-indicator { text-align: center; font-size: 12px; color: var(--text-secondary); margin-top: 12px; letter-spacing: 1px; }
.comp-sf-indicator b { color: var(--text-primary); }

/* ---------- 상품 카드 (S-01 진열 / S-03 목록 / S-04 검색) — 카페24 prdList ---------- */
.comp-sf-prd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 10px; padding: 0 16px; }
.comp-sf-prd-card { position: relative; min-width: 0; font-size: 13px; }
.comp-sf-prd-card .comp-sf-thumb { position: relative; display: block; aspect-ratio: 1 / 1; background: #e3e3e3; }
.comp-sf-prd-card .comp-sf-thumb span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #888; font-size: 12px; }
.comp-sf-prd-card .comp-sf-wish-ico {
  position: absolute; right: 6px; top: 6px; z-index: 2;
  width: 30px; height: 30px; border: 0; background: rgba(255,255,255,.85); border-radius: 50%;
  font-size: 15px; line-height: 30px; padding: 0;
}
.comp-sf-prd-card .comp-sf-wish-ico.active { color: var(--color-error); }
.comp-sf-prd-card .comp-sf-icons { margin-top: 8px; display: flex; gap: 3px; flex-wrap: wrap; }
.comp-sf-prd-card .comp-sf-icons .badge { font-size: 10px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 2px; background: var(--color-primary-500); color: #fff; }
.comp-sf-prd-card .comp-sf-icons .badge.comp-sf-soldout-ico { background: #fff; color: var(--text-secondary); border: 1px solid var(--color-gray-300); }
.comp-sf-prd-card .comp-sf-name { display: block; margin-top: 6px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.comp-sf-prd-card .comp-sf-price { display: block; margin-top: 4px; font-weight: 700; }
.comp-sf-prd-card .comp-sf-price.comp-sf-sold { color: var(--color-gray-400); font-weight: 400; }
.comp-sf-prd-card.comp-sf-is-sold .comp-sf-thumb span::after { content: "SOLD OUT"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-weight: 700; letter-spacing: 1px; }

/* 가로 슬라이드형 진열(NEW ARRIVAL) */
.comp-sf-prd-slide { gap: 10px; padding: 0 16px; scroll-padding: 0 16px; }
.comp-sf-prd-slide .comp-sf-prd-card { flex: 0 0 calc((100% - 10px) / 2.3); scroll-snap-align: start; }

/* ---------- S-01 배너 ---------- */
.comp-sf-banner-full { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 7; background: #c9c2b8; color: #555; font-size: 14px; }
.comp-sf-plan { padding: 24px 16px; border-bottom: 8px solid var(--color-gray-50); display: grid; gap: 20px; }
.comp-sf-plan a { display: block; }
.comp-sf-plan .comp-sf-plan-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: #dcd6cf; color: #666; font-size: 13px; }
.comp-sf-plan .comp-sf-plan-img.comp-sf-alt { background: #cfd8dc; }
.comp-sf-plan h4 { font-size: 15px; font-weight: 700; margin-top: 10px; }
.comp-sf-plan p { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ---------- S-01 REVIEW 카드 ---------- */
.comp-sf-review-list { padding: 0 16px; display: grid; gap: 10px; }
.comp-sf-review-card { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--color-gray-200); font-size: 13px; }
.comp-sf-review-card .comp-sf-thumb { flex: 0 0 72px; height: 72px; background: #e3e3e3; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #888; }
.comp-sf-review-card .comp-sf-info { flex: 1; min-width: 0; }
.comp-sf-review-card .comp-sf-pname { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-sf-review-card .comp-sf-star { color: #f5a623; letter-spacing: -1px; margin-right: 4px; }
.comp-sf-review-card .comp-sf-ttl { font-weight: 700; margin-top: 2px; }
.comp-sf-review-card .comp-sf-body { color: #555; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.comp-sf-review-card .comp-sf-writer { color: var(--color-gray-400); font-size: 12px; margin-top: 4px; }

/* ---------- S-02 브랜드 소개 ---------- */
.comp-sf-page-html .comp-sf-brand-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; background: #d6d1ca; color: #666; }
.comp-sf-page-html .comp-sf-brand-img.comp-sf-alt { aspect-ratio: 1 / 1; background: #e9e5df; }
.comp-sf-page-html .comp-sf-brand-txt { padding: 32px 20px; text-align: center; font-size: 14px; line-height: 1.8; color: #444; }
.comp-sf-page-html .comp-sf-brand-txt h3 { font-size: 20px; letter-spacing: 3px; margin-bottom: 12px; color: var(--text-primary); }

/* ---------- S-03 분류 머리 ---------- */
.comp-sf-cate-desc { margin: 16px 16px 0; padding: 14px; background: var(--color-gray-50); font-size: 13px; color: #555; text-align: center; }
.comp-sf-subcate { gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-subcate a { flex: 0 0 auto; height: 32px; line-height: 30px; padding: 0 14px; border: 1px solid var(--color-gray-300); border-radius: 16px; font-size: 13px; white-space: nowrap; }
.comp-sf-subcate a.active { background: var(--color-primary-500); border-color: var(--color-primary-500); color: #fff; font-weight: 700; }
.comp-sf-list-hd { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 13px; }
.comp-sf-list-hd b { font-weight: 700; }
.comp-sf-list-body { padding-bottom: 24px; }
.comp-pagination a.disabled { color: var(--color-gray-300); pointer-events: none; }

/* ---------- S-04 검색 ---------- */
.comp-sf-search-box { padding: 16px; border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-search-box form { display: flex; gap: 4px; }
.comp-sf-search-box .comp-input { flex: 1; width: 0; height: 40px; }
.comp-sf-search-box .comp-btn { height: 40px; }
.comp-sf-pop-kw { margin-top: 12px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.comp-sf-pop-kw strong { font-size: 12px; color: var(--text-secondary); font-weight: 400; margin-right: 2px; }
.comp-sf-pop-kw a { color: var(--text-primary); }

/* ---------- S-05-P1 원본보기 새 창 ---------- */
.comp-sf-popup-wrap { max-width: 720px; margin: 0 auto; background: #fff; min-height: 100vh; }
.comp-sf-popup-hd { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-gray-200); background: #fff; }
.comp-sf-popup-hd h1 { font-size: 16px; font-weight: 700; }
.comp-sf-popup-bd { padding: 16px; }

/* ---------- S-08 결제사 창(시뮬레이션) ---------- */
.comp-sf-pg { max-width: 420px; margin: 0 auto; min-height: 100vh; background: #fff; }
.comp-sf-pg-hd { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; color: #fff; background: #2b3a55; }
.comp-sf-pg-hd.comp-sf-npay { background: #03c75a; } .comp-sf-pg-hd.comp-sf-kpay { background: #fee500; color: #3c1e1e; } .comp-sf-pg-hd.comp-sf-tpay { background: #0064ff; }
.comp-sf-pg-hd h1 { font-size: 16px; font-weight: 800; }
.comp-sf-pg-note { background: #fff7d6; border-bottom: 1px dashed #e3c64a; padding: 8px 16px; font-size: 12px; color: #8a6d00; }
.comp-sf-pg-bd { padding: 18px 16px; }
.comp-sf-pg-amt { padding: 16px; background: var(--color-gray-50); text-align: center; margin-bottom: 16px; }
.comp-sf-pg-amt strong { display: block; font-size: 24px; margin-top: 4px; }
.comp-sf-pg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.comp-sf-pg-cards button { height: 44px; border: 1px solid var(--color-gray-300); background: #fff; font-size: 13px; }
.comp-sf-pg-cards button.selected { border: 2px solid #2b3a55; font-weight: 700; }
.comp-sf-pg-btns { display: flex; gap: 6px; margin-top: 18px; }
.comp-sf-pg-btns .comp-btn { flex: 1; height: 48px; }
.comp-sf-wait { padding: 80px 20px; text-align: center; }
.comp-sf-spinner { width: 40px; height: 40px; margin: 0 auto 18px; border: 4px solid var(--color-gray-200); border-top-color: var(--color-primary-500); border-radius: 50%; animation: spin .8s linear infinite; }

/* ---------- S-09 주문완료 / S-10 결제 실패 ---------- */
.comp-sf-done { padding: 32px 16px 24px; text-align: center; border-bottom: 8px solid var(--color-gray-50); }
.comp-sf-done .comp-sf-done-ico { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--color-primary-500); color: #fff; font-size: 26px; line-height: 56px; }
.comp-sf-done .comp-sf-done-ico.comp-sf-fail { background: var(--color-error); }
.comp-sf-done h2 { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.comp-sf-done .form-table { max-width: 320px; margin: 0 auto; }
.comp-sf-done .comp-sf-msg { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.comp-sf-deposit { border: 2px solid var(--color-primary-500); padding: 12px 14px; }
.comp-sf-deposit .form-table th { width: 72px; }
.comp-sf-deposit .comp-sf-em { color: var(--color-error); font-weight: 700; }
.comp-sf-done-btns { display: flex; gap: 6px; padding: 16px; }
.comp-sf-done-btns .comp-btn { flex: 1; height: 48px; }
.comp-sf-guest-note { margin: 0 16px; padding: 12px 14px; background: var(--color-gray-50); font-size: 13px; color: #555; }

/* =====================================================================
   2026-10-23 전 기능 구축 추가 — 상품 상세(S-05)·장바구니(S-06)·주문서(S-07)·검색(S-04)에서 읽음
   ===================================================================== */
/* S-05 제목 줄 + 공유 버튼 */
.comp-sf-prd-head .comp-sf-prd-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.comp-sf-prd-head .comp-sf-share-btn { flex: 0 0 auto; font-size: 16px; }
/* S-05 할인가 (SF-061) — 판매가는 취소선 */
.comp-sf-prd-head #salePrice:has(+ .comp-sf-dc-price) { text-decoration: line-through; color: var(--text-secondary); font-size: 14px; font-weight: 400; }
.comp-sf-prd-head .comp-sf-dc-price { margin-top: 2px; font-size: 13px; }
.comp-sf-prd-head .comp-sf-dc-price .comp-sf-price { display: inline; font-size: 20px; font-weight: 800; color: var(--color-error); }
.comp-sf-prd-head .comp-sf-dc-price span { color: var(--color-error); }
.comp-sf-prd-head .comp-sf-dc-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
/* S-05 재입고 알림 줄 · 추가구성상품 */
.comp-sf-restock-line { margin-top: 8px; font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.comp-sf-addprd { margin: 12px 16px 0; padding: 12px; border: 1px solid var(--color-gray-200); }
.comp-sf-addprd h3 { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.comp-sf-addprd li { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; }
.comp-sf-addprd .comp-sf-price { font-weight: 700; }
/* S-05·S-06 네이버페이 주문형 [외부계약] */
.comp-sf-npay { margin: 10px 16px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.comp-sf-npay button { height: 44px; border: 0; border-radius: 4px; background: #03c75a; color: #fff; font-weight: 700; cursor: pointer; }
.comp-sf-npay .comp-sf-npay-buy { flex: 1; }
.comp-sf-npay .comp-sf-npay-buy b { font-size: 16px; margin-right: 2px; }
.comp-sf-npay .comp-sf-npay-wish { flex: 0 0 72px; background: #fff; color: #03c75a; border: 1px solid #03c75a; }
.comp-sf-npay .comp-helper-text { flex: 0 0 100%; margin: 0; }
/* S-05 관련상품 */
.comp-sf-related { margin: 8px 0 16px; }
/* S-05-P5 공유 */
.comp-sf-share-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.comp-sf-share-list button { border: 0; background: none; font-size: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.comp-sf-share-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--color-gray-100); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.comp-sf-share-ico.comp-sf-kakao { background: #fee500; color: #3c1e1e; }
/* S-04 상세검색 */
.comp-sf-adv-search { margin: 8px 16px 0; padding: 12px; background: var(--color-gray-50, #fafafa); border: 1px solid var(--color-gray-200); }
.comp-sf-adv-search .form-table th { width: 72px; }
.comp-sf-adv-search .comp-sf-range { display: flex; align-items: center; gap: 4px; }
.comp-sf-adv-search .comp-sf-range .comp-input { min-width: 0; flex: 1; }
.comp-sf-adv-toggle { margin: 8px 16px 0; font-size: 12px; }
/* S-06 장바구니 관심상품 목록 */
.comp-sf-bk-wish { padding: 0 16px 16px; }
.comp-sf-bk-wish li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-gray-100); font-size: 13px; }
.comp-sf-bk-wish .comp-sf-thumb { flex: 0 0 56px; height: 56px; background: #e3e3e3; display: flex; align-items: center; justify-content: center; color: #888; font-size: 11px; }
.comp-sf-bk-wish .comp-sf-info { flex: 1; min-width: 0; }
/* S-07 사은품·추가항목·최근 결제수단 */
.comp-sf-gift-list li { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-size: 13px; }
.comp-sf-gift-list .comp-sf-thumb { flex: 0 0 44px; height: 44px; background: #e3e3e3; display: flex; align-items: center; justify-content: center; color: #888; font-size: 10px; }
.comp-sf-recent-pay { display: inline-block; margin-left: 4px; font-size: 10px; padding: 0 4px; border: 1px solid var(--color-primary-500); color: var(--color-primary-500); border-radius: 2px; vertical-align: middle; }
/* 주문서 할인/부가결제: 할인코드·적립금·예치금 입력칸은 줄 전체가 아니라 내용 길이만큼 (카페24 주문서처럼 짧게), 오른쪽 붙임 */
#rowCode .comp-sf-ipt-row, #rowMile .comp-sf-ipt-row, #rowDeposit .comp-sf-ipt-row { justify-content: flex-end; }
#rowMile .comp-helper-text, #rowDeposit .comp-helper-text { text-align: right; }
#rowCode .comp-sf-ipt-row .comp-input { flex: 0 1 220px; }
#rowMile .comp-sf-ipt-row .comp-input, #rowDeposit .comp-sf-ipt-row .comp-input { flex: 0 1 140px; text-align: right; }