/* =====================================================================
   사용자 사이트 스킨 (shop-skin.css) — 앱 소유
   STD-22: 관리자 표준 CSS(comp-*) 구조·클래스·변수를 그대로 쓰고, 화면 배치·모양만 카페24 기본 스킨에 맞춘다.
   읽는 순서: ../vendor/css/ reset → common → theme → components → components-fix → datepicker → 이 파일
   이 파일에 두는 것은 세 가지뿐이다.
   - 1장: 표준 변수 값 조정 (--color-primary-* = 검정, --color-gray-* = 카페24 회색, --color-error = 카페24 빨강 …)
          새 변수 체계는 만들지 않는다. 컬럼 폭 480px·헤더 56px·탭바 52px·하단 바 60px 은 값으로 적는다.
   - 2장: 표준 클래스 덮어쓰기 (comp-btn, comp-input, comp-checkbox/radio, comp-modal, badge, comp-helper-text,
          section / section-header, form-table, action-bar, empty-state, comp-pagination)
   - 3장 이후: 표준에 없는 카페24 고유 구조만 comp-sf- 접두 보조 클래스로 (comp-sf-wrap, comp-sf-header, comp-sf-drawer,
          comp-sf-tabbar, comp-sf-bk-*, comp-sf-od-* …)
   상태 클래스: active(선택·열림) / selected(옵션 선택) / disabled. 섹션 접힘만 closed.
   근거: spec/screens/storefront.md S-00 공통 레이아웃, spec/functional/09-storefront.md SF-R001(레이아웃 폭)
   실제 구현: static/css/shop-skin.css (사용자 사이트 레이아웃에서만 로드)
   ===================================================================== */

/* ---------- 1. 표준 변수 값 조정 ---------- */
:root {
  --color-primary-50: #f4f4f4;
  --color-primary-100: #e8e8e8;
  --color-primary-200: #cfcfcf;
  --color-primary-300: #9a9a9a;
  --color-primary-400: #555;
  --color-primary-500: #000;   /* main = 카페24 기본 스킨 검정 버튼 */
  --color-primary-600: #222;
  --color-primary-700: #333;
  --color-primary-800: #111;
  --color-primary-900: #000;
  --color-gray-50: #f7f7f7;    /* 옅은 바탕(섹션 구분 띠) */
  --color-gray-100: #f1f1f1;   /* 페이지 바탕(컬럼 바깥) */
  --color-gray-200: #e5e5e5;   /* 구분선 */
  --color-gray-300: #d0d0d0;   /* 입력·버튼 테두리 */
  --color-gray-400: #aaa;      /* 흐린 글자 */
  --color-error: #d6322f;      /* 카페24 강조 빨강(금액·필수·배지) */
  --text-primary: #222;
  --text-secondary: #777;
  --bg-default: #fff;
  --font-size-base: 14px;
  --radius-md: 2px;
  --radius-lg: 4px;
}

.comp-sf-body {
  margin: 0;
  min-width: 0;   /* 관리자 style.css 의 body{min-width:1440px} 는 읽지 않지만 혹시 섞여도 무력화 */
  background: var(--color-gray-100);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.comp-sf-body a { color: inherit; text-decoration: none; }
.comp-sf-body button, .comp-sf-body input, .comp-sf-body select, .comp-sf-body textarea { font: inherit; color: inherit; }
.comp-sf-body img { max-width: 100%; display: block; }
/* 초기화 규칙은 우선순위 0(:where) — 예전 ".comp-sf-body p"(0,1,1)가 ".comp-sf-tp-total" 같은 클래스 규칙(0,1,0)의 여백을 지워
   상품목록 좌우 여백·총 상품금액·서랍 고객센터 등이 화면 끝에 붙던 문제 */
:where(.comp-sf-body) :where(h1, h2, h3, h4, p, ul, ol, dl, dd) { margin: 0; padding: 0; }
.comp-sf-body ul, .comp-sf-body ol { list-style: none; }
.comp-sf-body table { border-collapse: collapse; width: 100%; min-width: 0; table-layout: auto; }
.hidden, [hidden] { display: none !important; }
.comp-sf-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 2. comp-* 를 카페24 스킨 모양으로 ---------- */
/* 버튼: primary = 검정 채움, outlined = 회색 테두리 흰 바탕(카페24 기본 버튼) */
.comp-sf-body .comp-btn { height: 34px; padding: 0 12px; font-size: 13px; font-weight: 400; gap: 4px; }
.comp-sf-body .comp-btn.outlined { border-color: var(--color-gray-300); color: var(--text-primary); background: #fff; }
.comp-sf-body .comp-btn.outlined:hover:not(:disabled) { background: var(--color-gray-50); }
.comp-sf-body .comp-btn.outlined.comp-sf-line { border-color: var(--color-primary-500); }
.comp-sf-body .comp-btn.xs { height: 26px; min-height: 26px; padding: 0 8px; font-size: 12px; }
.comp-sf-body .comp-btn.large { height: 50px; font-size: 15px; font-weight: 700; }
.comp-sf-body .comp-btn:disabled { opacity: .45; cursor: not-allowed; }
.comp-sf-body .comp-btn.full-width { display: flex; width: 100%; }
.comp-sf-body .comp-btn.loading { pointer-events: none; opacity: .7; }
.comp-sf-body .comp-btn.loading::after {
  content: ""; width: 14px; height: 14px; margin-left: 8px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 입력: 표준 42px → 스킨 36px, 폭은 내용 기준(표준 기본 width:100% 해제) */
.comp-sf-body .comp-input { height: 36px; padding: 0 8px; font-size: 14px; width: auto; min-width: 0; display: inline-block; vertical-align: middle; }
.comp-sf-body select.comp-input { padding-right: 24px; appearance: auto; -webkit-appearance: auto; }
.comp-sf-body textarea.comp-input { height: auto; padding: 6px 8px; }
.comp-sf-body .comp-input:disabled { background: #f3f3f3; color: var(--color-gray-400); }
.comp-sf-body .comp-input.comp-sf-full { width: 100%; }
.comp-sf-ipt-row { display: flex; gap: 4px; align-items: center; }
.comp-sf-ipt-row .comp-input { flex: 1; width: 0; min-width: 0; }
.comp-sf-ipt-row select.comp-input { padding-right: 18px; }
.comp-sf-ipt-row .comp-input.comp-sf-fix { flex: 0 0 auto; width: auto; }
.comp-sf-ipt-row .comp-sf-dash { color: var(--text-secondary); }

/* 체크·라디오: 표준 모양 유지, 크기·간격만 스킨에 맞춤 */
.comp-sf-body .comp-checkbox, .comp-sf-body .comp-radio { display: inline-flex; align-items: center; gap: 0; margin: 0; cursor: pointer; }
.comp-sf-body .comp-checkbox input[type="checkbox"], .comp-sf-body .comp-radio input[type="radio"] { width: 18px; height: 18px; min-width: 18px; min-height: 18px; margin-right: 6px; }

/* 모달 = 카페24 레이어: 모바일 하단 시트, 481px 이상 가운데 */
.comp-sf-body .comp-modal.active { align-items: flex-end; }
.comp-sf-body .comp-modal-dialog.comp-sf-sheet { width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; border-radius: 12px 12px 0 0; }
/* components-fix.css 의 모바일 규칙(.comp-modal-dialog { max-width/margin/border-radius !important })을 시트에서만 되돌림 */
@media (max-width: 480px) {
  .comp-sf-body .comp-modal-dialog.comp-sf-sheet { max-width: 100% !important; margin: 0 !important; border-radius: 12px 12px 0 0 !important; }
}
@media (min-width: 481px) {
  .comp-sf-body .comp-modal.active { align-items: center; }
  .comp-sf-body .comp-modal-dialog.comp-sf-sheet { border-radius: 4px; max-width: calc(480px - 32px); }
}
.comp-sf-body .comp-sf-sheet .comp-modal-header { position: sticky; top: 0; background: #fff; z-index: 2; padding: 14px 16px; }
.comp-sf-body .comp-sf-sheet .comp-modal-title { font-size: 16px; font-weight: 700; }
.comp-sf-body .comp-sf-sheet .comp-modal-close { top: 10px; right: 10px; }
.comp-sf-body .comp-sf-sheet .comp-modal-body { padding: 16px; max-height: none; overflow: visible; }
.comp-sf-body .comp-sf-sheet .comp-modal-footer { display: flex; gap: 6px; padding: 0 16px 16px; border-top: 0; justify-content: stretch; }
.comp-sf-body .comp-sf-sheet .comp-modal-footer .comp-btn { flex: 1; height: 44px; }
/* 표준 다이얼로그(dialog.alert/confirm)는 표준 모양 그대로 가운데 */
.comp-sf-body .comp-dialog.active { align-items: center; }

/* 탭: 국내/해외·배송지 = 칸 나눔 탭, 상품상세 = 앵커 탭 */
.comp-sf-seg { display: flex; border: 1px solid var(--color-gray-300) !important; gap: 0 !important; }
.comp-sf-seg > * {
  flex: 1; height: 42px; border: 0; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-secondary);
}
.comp-sf-seg > * + * { border-left: 1px solid var(--color-gray-300); }
.comp-sf-seg > .active { background: var(--color-primary-500); color: #fff; font-weight: 700; }

/* 배지: 표준 .badge 를 헤더 장바구니 수 모양으로 */
.comp-sf-icon-btn .badge {
  position: absolute; top: 3px; right: 1px; margin: 0;
  min-width: 17px; height: 17px; padding: 0 4px; justify-content: center;
  border-radius: 9px; background: var(--color-error); color: #fff;
  font-size: 11px; line-height: 17px; font-weight: 700;
}
.required { color: var(--color-error); }
/* 도움말·경고: 표준 comp-helper-text / comp-helper-text.error */
.comp-sf-body .comp-helper-text { display: block; font-size: 12px; margin-top: 4px; }
.comp-sf-counter { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }

/* ---------- 3. 레이아웃 골격 (S-00) ---------- */
.comp-sf-wrap {
  position: relative;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg-default);
  padding-bottom: calc(52px + 8px);
}
.comp-sf-wrap.comp-sf-has-bar { padding-bottom: calc(52px + 60px + 8px); }
.comp-sf-wrap.comp-sf-has-paybar { padding-bottom: calc(60px + 8px); }
/* 결제 막대가 있는 화면(주문서)은 시안처럼 하단 탭바 없이 — 공통 레이아웃이 탭바를 늘 붙여 [결제하기]를 덮던 문제 */
.comp-sf-wrap:has(.comp-sf-paybar) { padding-bottom: calc(60px + 8px); }
.comp-sf-wrap:has(.comp-sf-paybar) .comp-sf-tabbar { display: none; }
.comp-sf-wrap:has(.comp-sf-paybar) .comp-sf-floating { bottom: calc(60px + 14px); }

/* 고정 바 공통: 본문 컬럼 폭 안에 붙는다(SF-R001) */
.comp-sf-fixed {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 50;
}

/* PC 좌우 패널 (S-00-1) — 1024px 이상 */
.comp-sf-pc-panel { display: none; }
@media (min-width: 1024px) {
  .comp-sf-pc-panel {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    width: calc((100% - 480px) / 2);
    padding: 120px 48px;
  }
  .comp-sf-pc-left { left: 0; }
  .comp-sf-pc-right { right: 0; }
  /* 왼쪽: 세로 가운데, 가운데 화면에서 80px 떨어진 300px 폭 (카페24 패널형 스킨과 같은 배치) */
  .comp-sf-pc-left { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 0 80px 0 24px; }
  .comp-sf-pc-left > * { width: 300px; max-width: 100%; }
  .comp-sf-pc-left h2 { font-size: 24px; line-height: 1.2; margin: 0 0 35px; }
  /* 검색창: 둥근 테두리 안에 입력칸 + 검은 원 돋보기 버튼 */
  .comp-sf-pc-search { display: flex; align-items: center; height: 44px; padding: 0 4px 0 20px; border: 1px solid #e0e0e0; border-radius: 44px; background: #fff; }
  .comp-sf-pc-search input.comp-input { flex: 1; min-width: 0; height: 42px; padding: 0; border: 0 !important; border-radius: 0; background: transparent; box-shadow: none !important; font-size: 13px; }
  .comp-sf-pc-search button { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #1b1b1b; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .comp-sf-pc-search button:focus-visible { outline: 2px solid #1b1b1b; outline-offset: 2px; }
  /* 인기검색어 태그: 회색 둥근 칩 */
  .comp-sf-pc-pop { display: flex; flex-wrap: wrap; gap: 10px 8px; margin: 35px 0 0; padding: 0; list-style: none; }
  .comp-sf-pc-pop a { display: inline-block; height: 32px; line-height: 32px; padding: 0 14px; border-radius: 32px; background: #ebebeb; color: #757575; font-size: 12px; font-weight: 300; white-space: nowrap; }
  .comp-sf-pc-pop a:hover { background: #dedede; color: #1b1b1b; }
  /* 오른쪽: 왼쪽과 대칭 — 세로 가운데, 가운데 화면에서 80px 떨어진 300px 폭 브랜드 배너 */
  .comp-sf-pc-right { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 24px 0 80px; }
  .comp-sf-pc-right .comp-sf-banner {
    display: flex; align-items: center; justify-content: center;
    width: 300px; max-width: 100%; height: 380px; background: #ddd; color: var(--text-secondary);
  }
}

/* 팝업 (관리자 디자인 > 팝업 관리, shop-popup.js 가 위치·크기를 넣는다) — 가운데 쇼핑몰 화면 기준 절대 위치 */
.comp-sf-popups { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 900; }
.comp-sf-popup { position: absolute; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .25); display: flex; flex-direction: column; max-width: calc(100% - 16px); }
.comp-sf-popup[hidden] { display: none; }
.comp-sf-popup-body { overflow: auto; max-height: calc(100vh - 120px); word-break: break-all; }
.comp-sf-popup-body img { max-width: 100%; height: auto; vertical-align: top; }
.comp-sf-popup-body iframe, .comp-sf-popup-body video { max-width: 100%; }
.comp-sf-popup-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; }
.comp-sf-popup-bar label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.comp-sf-popup-bar button { border: 0; background: transparent; color: inherit; font-size: 13px; cursor: pointer; padding: 2px 0; }

/* ---------- 시안 전용 컨트롤 (실제 화면 아님) ---------- */
.comp-sf-mock-ctrl {
  background: #fff7d6;
  border-bottom: 1px dashed #e3c64a;
  padding: 8px 12px;
  font-size: 12px;
}
.comp-sf-mock-ctrl b { margin-right: 6px; }
.comp-sf-mock-ctrl .comp-sf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 3px 0; }
.comp-sf-mock-ctrl button {
  border: 1px solid #e3c64a; background: #fff; padding: 3px 8px; border-radius: 3px; font-size: 12px;
}
.comp-sf-mock-ctrl button.active { background: #333; color: #fff; border-color: #333; }
.comp-sf-mock-ctrl .comp-sf-note { color: #8a6d00; }
.comp-sf-mock-ctrl a { text-decoration: underline; }

/* ---------- S-00-1 헤더 ---------- */
.comp-sf-header {
  position: sticky; top: 0; z-index: 40;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  background: var(--bg-default);
  border-bottom: 1px solid var(--color-gray-200);
}
.comp-sf-header .comp-sf-logo { font-weight: 800; font-size: 20px; letter-spacing: 2px; }
.comp-sf-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border: 0; background: none;
  font-size: 20px; line-height: 40px; text-align: center;
}

/* ---------- S-00-6 서브 헤더 ---------- */
.comp-sf-sub-header {
  position: relative; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: 16px; font-weight: 700;
}
.comp-sf-sub-header .comp-sf-back { position: absolute; left: 6px; top: 4px; }

/* ---------- S-00-2 드로어 ---------- */
.comp-sf-dim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transition: opacity .2s;
}
.comp-sf-dim.active { opacity: 1; visibility: visible; }
.comp-sf-drawer {
  position: fixed; top: 0; bottom: 0; z-index: 95;
  left: max(0px, calc(50% - 480px / 2));
  width: min(87vw, calc(480px * .87));
  background: var(--bg-default);
  overflow-y: auto;
  transform: translateX(-110%);
  transition: transform .25s;
}
@media (min-width: 481px) {
  .comp-sf-drawer { transform: translateX(calc(-110% - (50vw - 480px / 2))); }
}
.comp-sf-drawer.active { transform: translateX(0); }
.comp-sf-drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--color-gray-50); border-bottom: 1px solid var(--color-gray-200);
  font-size: 13px;
}
.comp-sf-drawer-top .comp-sf-links a { margin-right: 10px; }
.comp-sf-drawer-sec { border-bottom: 1px solid var(--color-gray-200); padding: 12px 16px; }
.comp-sf-drawer-sec h3 { font-size: 13px; color: var(--text-secondary); letter-spacing: 1px; margin-bottom: 6px; display: flex; justify-content: space-between; }
.comp-sf-drawer-sec li { padding: 7px 0; display: flex; justify-content: space-between; align-items: center; }
.comp-sf-drawer-sec li ul { width: 100%; padding-left: 12px; }
/* 하위 분류 목록은 다음 줄 전체 폭으로 — 2단계 항목 안의 3단계 목록도 내려가야 해서 모든 단계에 줄바꿈 */
.comp-sf-drawer-sec .comp-sf-cate li { flex-wrap: wrap; }
.comp-sf-drawer-sec .comp-sf-cate li > a { flex: 1 1 0; min-width: 0; }
.comp-sf-drawer-sec .comp-sf-cate li li { padding: 6px 0; }
.comp-sf-drawer-sec .comp-sf-cate li li li { font-size: 13px; color: var(--text-secondary); }
.comp-sf-tgl {
  border: 1px solid var(--color-gray-300); background: #fff;
  width: 26px; height: 22px; font-size: 12px; line-height: 1; padding: 0;
}
/* [펼침]/[접기] 글자 버튼은 26px 고정폭이면 두 줄로 깨짐 → 글자 폭대로, 한 줄 ([+]/[−] 는 그대로 정사각) */
.comp-sf-tgl { width: auto; min-width: 26px; height: 24px; padding: 0 7px; white-space: nowrap; flex: 0 0 auto; border-radius: 3px; }
/* 검색 화면: 상세검색 토글·영역이 검색어 줄(flex) 안에 있어 깨짐
   → 토글 버튼은 검색 버튼과 같은 40px, 상세검색 영역은 줄바꿈해 아래 전체 폭, 영역 안 입력칸은 검색어칸 규칙(width:0) 해제 */
.comp-sf-search-box form { flex-wrap: wrap; }
.comp-sf-search-box .comp-sf-adv-toggle { margin: 0; flex: 0 0 auto; display: flex; }
.comp-sf-search-box .comp-sf-adv-toggle .comp-btn { height: 40px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
.comp-sf-search-box .comp-sf-adv-search { flex: 0 0 100%; margin: 8px 0 0; box-sizing: border-box; }
.comp-sf-search-box .comp-sf-adv-search .form-table { width: 100%; }
.comp-sf-search-box .comp-sf-adv-search .form-table th { white-space: nowrap; }
.comp-sf-search-box .comp-sf-adv-search select.comp-input { width: 100%; flex: none; }
.comp-sf-search-box .comp-sf-adv-search .comp-sf-range .comp-input { width: 0; flex: 1 1 0; }
.comp-sf-search-box .comp-sf-adv-search .comp-radio { display: inline-flex; margin: 2px 10px 2px 0; }
.comp-sf-search-box .comp-sf-adv-search .action-bar { display: flex; justify-content: center; gap: 6px; }
/* 게시판 목록 검색: 모바일 폭에서 [찾기]만 둘째 줄 왼쪽에 홀로 떨어짐 → 좁으면 1줄 = 셀렉트 2개(반반), 2줄 = 검색어 + [찾기] */
@media (max-width: 480px) {
  /* 화면 CSS(shop-skin-sf4.css)가 뒤에 읽히므로 .comp-sf-body 를 붙여 우선순위를 올림 */
  .comp-sf-body .comp-sf-bd-search select.comp-input { flex: 1 1 calc(50% - 2px); width: auto; }
  .comp-sf-body .comp-sf-bd-search input.comp-input { flex: 1 1 0; }
  .comp-sf-body .comp-sf-bd-search .comp-btn { flex: 0 0 auto; }
}
/* 상단 왼쪽 햄버거(≡)가 너무 작음 — 글꼴의 ≡ 글자는 크기를 키워도 작게 그려짐 → 글자는 숨기고 22px 막대 3줄로 그림, 터치 영역 44px */
.comp-sf-header .comp-sf-icon-btn[data-drawer-open] { width: 44px; height: 44px; font-size: 0; line-height: 44px; }
.comp-sf-header .comp-sf-icon-btn[data-drawer-open]::before {
  content: ""; position: absolute; left: 11px; top: 14px; width: 22px; height: 2px; border-radius: 1px;
  background: currentColor; box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
}
.comp-sf-drawer-cs { padding: 14px 16px; font-size: 13px; color: var(--text-secondary); }

/* ---------- S-00-3 하단 탭바 ---------- */
.comp-sf-tabbar {
  bottom: 0; height: 52px;
  display: flex;
  background: var(--bg-default); border-top: 1px solid var(--color-gray-200);
}
.comp-sf-tabbar a, .comp-sf-tabbar button {
  flex: 1; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-secondary);
}
.comp-sf-tabbar .comp-sf-ico { font-size: 18px; line-height: 1.1; }
/* 선 아이콘 (SVG, 글자색을 따름) — 이모지는 OS마다 모양·색이 달라 바꿈 */
.comp-sf-svg { display: block; flex: 0 0 auto; }
.comp-sf-tabbar .comp-sf-ico .comp-sf-svg { width: 22px; height: 22px; margin: 0 auto 3px; }
.comp-sf-tabbar .active .comp-sf-svg { stroke-width: 2; }
.comp-sf-header a.comp-sf-icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.comp-sf-header a.comp-sf-icon-btn .comp-sf-svg { width: 24px; height: 24px; }
.comp-sf-tabbar .active { color: var(--color-primary-500); font-weight: 700; }

/* ---------- S-00-4 푸터 ---------- */
.comp-sf-footer { background: var(--color-gray-50); padding: 22px 16px 28px; font-size: 12px; color: var(--text-secondary); }
.comp-sf-footer h4 { color: var(--text-primary); font-size: 13px; margin-bottom: 4px; }
.comp-sf-footer .comp-sf-blk { padding: 12px 0; border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-footer .comp-sf-tel { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.comp-sf-footer .comp-sf-links a { margin-right: 10px; display: inline-block; }
.comp-sf-footer .comp-sf-links .comp-sf-strong { font-weight: 700; color: var(--text-primary); }
.comp-sf-footer .comp-sf-biz p { margin: 2px 0; }

/* ---------- S-00-5 플로팅 ---------- */
.comp-sf-floating {
  position: fixed; z-index: 45;
  right: max(12px, calc(50% - 480px / 2 + 12px));
  bottom: calc(52px + 14px);
  display: flex; flex-direction: column; gap: 8px;
}
.comp-sf-has-bar .comp-sf-floating { bottom: calc(52px + 60px + 14px); }
.comp-sf-has-paybar .comp-sf-floating { bottom: calc(60px + 14px); }
.comp-sf-floating a, .comp-sf-floating button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-gray-300); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.comp-sf-floating .comp-sf-talk { background: #fee500; border-color: #fee500; }

/* 수량 − 입력 + */
.comp-sf-qty { display: inline-flex; border: 1px solid var(--color-gray-300); height: 30px; }
.comp-sf-qty button { width: 30px; border: 0; background: #fff; font-size: 16px; padding: 0; }
.comp-sf-qty input { width: 38px; border: 0; border-left: 1px solid var(--color-gray-300); border-right: 1px solid var(--color-gray-300); text-align: center; padding: 0; }

/* ---------- 섹션 공통 ---------- */
.section { padding: 16px; border-bottom: 8px solid var(--color-gray-50); }
.comp-sf-body .section-header { margin-top: 0; }
@media (max-width: 768px) {
  .comp-sf-body .section-header { flex-direction: row !important; align-items: center !important; gap: 0 !important; }
}
.comp-sf-body .section-title { font-size: 15px; font-weight: 700; }
.section-header { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.section-header.comp-sf-fold { cursor: pointer; }
.section-header.comp-sf-fold::after { content: "−"; font-weight: 400; color: var(--text-secondary); }
.section.closed .section-header.comp-sf-fold::after { content: "+"; }
.section.closed .comp-sf-section-body { display: none; }
.section.closed .section-header { margin-bottom: 0; }

/* 표 칸 안 입력이 칸 폭을 밀어내지 않게 고정 배치(라벨 92px + 나머지) */
.comp-sf-body table.form-table { table-layout: fixed; margin-bottom: 0; }
.comp-sf-body .form-table th, .comp-sf-body .form-table td { border: 0; background: none; white-space: normal; }
.comp-sf-body .form-table .comp-input { max-width: none; }
/* 표준은 768px 이하에서 라벨 위/값 아래로 쌓지만, 카페24 모바일 스킨은 라벨 왼쪽 고정폭을 유지한다 */
@media (max-width: 768px) {
  .comp-sf-body .form-table { display: table; }
  .comp-sf-body .form-table > tbody { display: table-row-group; }
  .comp-sf-body .form-table > tbody > tr { display: table-row; }
  .comp-sf-body .form-table > tbody > tr > th,
  .comp-sf-body .form-table > tbody > tr > td { display: table-cell; }
  .comp-sf-body .form-table > tbody > tr > th { width: 92px !important; }
  .comp-sf-body .form-table.comp-sf-opt > tbody > tr > th { width: 86px !important; }
  .comp-sf-body .form-table.comp-sf-grid > tbody > tr > th { width: 34% !important; }
}
.form-table th {
  width: 92px; text-align: left; vertical-align: top;
  padding: 8px 6px 8px 0; font-weight: 400; color: var(--text-secondary); font-size: 13px;
}
.form-table td { padding: 4px 0; }
.form-table td > * + * { margin-top: 4px; }

.form-table.comp-sf-info th, .form-table.comp-sf-info td { padding: 6px 0; text-align: left; vertical-align: top; font-size: 13px; }
.form-table.comp-sf-info th { width: 92px; color: var(--text-secondary); font-weight: 400; }
.comp-sf-body .form-table.comp-sf-grid th, .comp-sf-body .form-table.comp-sf-grid td { border: 1px solid var(--color-gray-200); padding: 7px 8px; text-align: left; font-size: 13px; }
.comp-sf-body .form-table.comp-sf-grid th { background: var(--color-gray-50); width: 34%; font-weight: 400; }

.comp-sf-price-line { display: flex; justify-content: space-between; padding: 4px 0; }
.comp-sf-price-line.comp-sf-total { border-top: 1px solid var(--color-gray-300); margin-top: 8px; padding-top: 10px; font-size: 16px; font-weight: 700; }
.comp-sf-price-line .comp-sf-num { font-weight: 700; }
.comp-sf-price-line.comp-sf-total .comp-sf-num { color: var(--color-error); font-size: 18px; }

/* 빈 상태 (S-00-7) */
.empty-state { padding: 50px 16px; text-align: center; color: var(--text-secondary); }
.empty-state .comp-btn { margin-top: 14px; }

/* 페이징 (게시판 목록: 서버 렌더 페이지 링크 — 관리자 표준 JS 페이징과 다름) */
.comp-pagination { display: flex; justify-content: center; gap: 4px; margin-top: 14px; }
.comp-pagination a { min-width: 28px; height: 28px; line-height: 26px; text-align: center; border: 1px solid var(--color-gray-200); font-size: 12px; }
.comp-pagination a.active { font-weight: 700; border-color: var(--color-primary-500); }

/* ---------- 상품 상세 (S-05) ---------- */
.comp-sf-gallery { position: relative; background: #eee; }
.comp-sf-gallery .comp-sf-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.comp-sf-gallery .comp-sf-track::-webkit-scrollbar { display: none; }
.comp-sf-gallery .comp-sf-slide {
  flex: 0 0 100%; aspect-ratio: 1 / 1; scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #555;
}
.comp-sf-gallery .comp-sf-zoom { position: absolute; right: 10px; bottom: 30px; }
.comp-sf-gallery .comp-sf-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.comp-sf-gallery .comp-sf-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,.25); }
.comp-sf-gallery .comp-sf-dots span.active { background: #000; }
.comp-sf-ph-1 { background: #d9d9d9; } .comp-sf-ph-2 { background: #f2f2f2; } .comp-sf-ph-3 { background: #c8cfe0; } .comp-sf-ph-4 { background: #e6dccb; }

.comp-sf-prd-head { padding: 16px; }
.comp-sf-prd-head h1 { font-size: 18px; font-weight: 700; }
.comp-sf-prd-head .comp-sf-summary { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
.comp-sf-prd-head .comp-sf-price { font-size: 20px; font-weight: 800; margin-top: 8px; }
.comp-sf-prd-head .comp-sf-phase2 { color: var(--color-gray-400); font-size: 12px; }

.comp-sf-ship-widget { padding: 14px 16px; background: var(--color-gray-50); margin: 0 16px; border-radius: 4px; font-size: 13px; }
.comp-sf-ship-widget .comp-sf-cd { font-weight: 700; color: var(--color-error); }
.comp-sf-progress { height: 6px; background: #ddd; border-radius: 3px; margin: 8px 0 4px; overflow: hidden; }
.comp-sf-progress i { display: block; height: 100%; width: 0; background: var(--color-primary-500); transition: width .3s; }
.comp-sf-progress-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-gray-400); }

.comp-sf-opt-area { padding: 16px; }
.form-table.comp-sf-opt th { width: 86px; text-align: left; font-weight: 400; padding: 8px 6px 8px 0; vertical-align: top; font-size: 13px; }
.form-table.comp-sf-opt td { padding: 4px 0; }
.form-table.comp-sf-opt .comp-sf-tag { font-size: 11px; color: var(--text-secondary); display: block; }
.form-table.comp-sf-opt select { width: 100% !important; }
.comp-sf-opt-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.comp-sf-opt-btns li button {
  min-width: 44px; height: 32px; padding: 0 10px;
  border: 1px solid var(--color-gray-300); background: #fff; font-size: 13px;
}
.comp-sf-opt-btns li.selected button { border: 2px solid var(--color-primary-500); font-weight: 700; }
.comp-sf-opt-btns li.disabled button,
.comp-sf-opt-btns li.comp-sf-soldout button { color: var(--color-gray-400); background: #f5f5f5; cursor: not-allowed; text-decoration: line-through; }
.comp-sf-opt-guide { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

#totalProducts { margin: 0 16px; border-top: 2px solid var(--color-primary-500); }
#totalProducts .empty-state { padding: 16px 0; text-align: center; color: var(--text-secondary); font-size: 13px; border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-tp-row { padding: 12px 0; border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-tp-row .comp-sf-nm { font-size: 13px; }
.comp-sf-tp-row .comp-sf-op { font-size: 13px; color: var(--text-secondary); display: flex; justify-content: space-between; gap: 6px; }
.comp-sf-tp-row .comp-sf-op .comp-sf-del { border: 0; background: none; font-size: 16px; line-height: 1; padding: 0 2px; }
.comp-sf-tp-row .comp-sf-ctl { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.comp-sf-tp-row .comp-sf-amt { font-weight: 700; }
.comp-sf-tp-total { margin: 12px 16px 0; text-align: right; font-size: 14px; }
.comp-sf-tp-total strong { font-size: 20px; color: var(--color-error); }

.comp-sf-buy-btns { display: flex; gap: 6px; padding: 16px; }
.comp-sf-buy-btns .comp-sf-wish { flex: 0 0 50px; font-size: 20px; }
.comp-sf-buy-btns .comp-sf-wish.active { color: var(--color-error); }
.comp-sf-buy-btns .comp-sf-cart, .comp-sf-buy-btns .comp-sf-buy { flex: 1; }

.comp-sf-buybar { bottom: 0; height: 60px; display: flex; gap: 6px; padding: 6px; background: #fff; border-top: 1px solid var(--color-gray-200); z-index: 55; transform: translate(-50%, 110%); transition: transform .2s; }
.comp-sf-buybar.active { transform: translate(-50%, 0); }
.comp-sf-buybar .comp-btn { height: 100%; }
.comp-sf-buybar .comp-sf-wish { flex: 0 0 50px; font-size: 20px; }
.comp-sf-buybar .comp-sf-wish.active { color: var(--color-error); }
.comp-sf-buybar .comp-sf-cart, .comp-sf-buybar .comp-sf-buy { flex: 1; }

.comp-sf-anchor-tabs {
  position: sticky; top: 56px; z-index: 30;
  display: flex; background: #fff; border-top: 1px solid var(--color-gray-200); border-bottom: 1px solid var(--color-gray-200) !important;
  gap: 0 !important;
}
.comp-sf-anchor-tabs a { flex: 1; text-align: center; padding: 12px 0; font-size: 13px; color: var(--text-secondary); }
.comp-sf-anchor-tabs a.active { color: var(--color-primary-500); font-weight: 700; box-shadow: inset 0 -2px 0 var(--color-primary-500); }
.comp-sf-prd-sec { padding: 20px 16px; border-bottom: 8px solid var(--color-gray-50); scroll-margin-top: calc(56px + 46px); }
.comp-sf-prd-sec h2 { font-size: 15px; margin-bottom: 12px; }
/* 상세 HTML(상품 상세설명·이벤트·배송 안내 등): 일반 문서 흐름. 시안의 회색 자리 표시(높이 360px 고정·가운데 정렬)는 내용 없을 때(.is-empty)만 */
.comp-sf-detail-html { line-height: 1.7; word-break: break-word; overflow-wrap: anywhere; margin-bottom: 16px; }
.comp-sf-detail-html::after { content: ""; display: block; clear: both; }
.comp-sf-detail-html p { margin: 0; }
.comp-sf-detail-html.is-empty { background: #f4f4f4; height: 360px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.comp-sf-board-list li { padding: 10px 0; border-bottom: 1px solid var(--color-gray-200); font-size: 13px; }
.comp-sf-board-list .comp-sf-meta { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.comp-sf-board-list .comp-sf-star { color: #f5a623; letter-spacing: -1px; }
.comp-sf-board-btns { display: flex; gap: 6px; margin-top: 12px; }
.comp-sf-board-btns .comp-btn { flex: 1; }
.comp-sf-acc > li { border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-acc > li > button { width: 100%; text-align: left; border: 0; background: none; padding: 12px 0; font-weight: 700; display: flex; justify-content: space-between; }
.comp-sf-acc > li > button::after { content: "▾"; color: var(--text-secondary); }
.comp-sf-acc > li.closed > button::after { content: "▸"; }
.comp-sf-acc > li.closed > .comp-sf-acc-bd { display: none; }
.comp-sf-acc-bd { padding: 0 0 12px; font-size: 13px; color: #555; }
.comp-sf-acc-bd p { margin: 3px 0; }

.comp-sf-file-list li { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }

/* 원본보기 레이어 */
.comp-sf-zoom-main { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: relative; }
.comp-sf-zoom-main .comp-sf-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.comp-sf-zoom-main .comp-sf-prev { left: 6px; } .comp-sf-zoom-main .comp-sf-next { right: 6px; }
.comp-sf-zoom-thumbs { display: flex; gap: 6px; margin-top: 8px; }
.comp-sf-zoom-thumbs button { width: 56px; height: 56px; border: 1px solid var(--color-gray-300); padding: 0; font-size: 11px; }
.comp-sf-zoom-thumbs button.active { border: 2px solid var(--color-primary-500); }

/* ---------- 장바구니 (S-06) ---------- */
.comp-sf-bk-group { border-bottom: 8px solid var(--color-gray-50); }
.comp-sf-bk-group-hd { padding: 12px 16px; font-weight: 700; background: #fafafa; border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-bk-allchk { padding: 10px 16px; border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-bk-item { display: flex; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-bk-item .comp-sf-thumb { flex: 0 0 72px; height: 72px; background: #ddd; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-secondary); }
.comp-sf-bk-item .comp-sf-info { flex: 1; min-width: 0; font-size: 13px; }
.comp-sf-bk-item .comp-sf-name { font-weight: 700; display: block; }
.comp-sf-bk-item .comp-sf-opt, .comp-sf-bk-item .comp-sf-add, .comp-sf-bk-item .comp-sf-dlv { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.comp-sf-bk-item .comp-sf-opt-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.comp-sf-bk-item .comp-sf-amt { font-weight: 700; margin-top: 6px; font-size: 14px; }
.comp-sf-bk-item .comp-sf-qty-line { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
.comp-sf-bk-item .comp-sf-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.comp-sf-bk-item.disabled .comp-sf-thumb, .comp-sf-bk-item.disabled .comp-sf-name { opacity: .5; }
.comp-sf-bk-item .comp-sf-unavail { color: var(--color-error); font-size: 12px; margin-top: 4px; }
.comp-sf-bk-sub { padding: 12px 16px; font-size: 13px; text-align: right; background: #fafafa; }
.comp-sf-bk-sub strong { font-size: 15px; }
.comp-sf-bk-group-ft { display: flex; gap: 6px; padding: 10px 16px 14px; }
.comp-sf-bk-summary { padding: 16px; }
.comp-sf-bk-summary .comp-sf-note { font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.comp-sf-bk-summary .action-bar { display: flex; gap: 6px; margin-top: 14px; }
.comp-sf-bk-summary .action-bar .comp-btn { flex: 1; }
.comp-sf-orderbar { bottom: 52px; height: 60px; display: flex; gap: 6px; padding: 6px; background: #fff; border-top: 1px solid var(--color-gray-200); }
.comp-sf-orderbar .comp-btn { flex: 1; height: 100%; }

/* ---------- 주문서 (S-07) ---------- */
.comp-sf-od-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-gray-200); font-size: 13px; }
.comp-sf-od-item .comp-sf-thumb { flex: 0 0 64px; height: 64px; background: #ddd; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-secondary); }
.comp-sf-od-item .comp-sf-info { flex: 1; }
.comp-sf-od-item .comp-sf-name { font-weight: 700; display: flex; justify-content: space-between; gap: 6px; }
.comp-sf-od-item .comp-sf-sub { color: var(--text-secondary); font-size: 12px; }
.comp-sf-od-ship { font-size: 13px; color: var(--text-secondary); padding-top: 8px; }
.comp-sf-disc-row { padding: 10px 0; border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-disc-row:last-child { border-bottom: 0; }
.comp-sf-disc-row .comp-sf-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 700; font-size: 13px; }
.comp-sf-rule-box { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); padding: 10px 12px; font-size: 12px; color: #555; margin-bottom: 4px; }
.comp-sf-rule-box table td { padding: 2px 0; }
.comp-sf-rule-box .comp-sf-no { color: var(--color-error); }
.comp-sf-pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.comp-sf-pay-methods label {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; border: 1px solid var(--color-gray-300); font-size: 13px; cursor: pointer;
}
.comp-sf-pay-methods label.active { border: 2px solid var(--color-primary-500); font-weight: 700; }
.comp-sf-pay-methods input { position: absolute; opacity: 0; }
.comp-sf-pay-methods .comp-sf-logo { font-weight: 800; }
.comp-sf-pay-methods .comp-sf-npay { color: #03c75a; } .comp-sf-pay-methods .comp-sf-kpay { color: #3c1e1e; background: #fee500; padding: 0 4px; } .comp-sf-pay-methods .comp-sf-tpay { color: #0064ff; }
.comp-sf-sub-box { margin-top: 12px; padding: 12px; background: var(--color-gray-50); }
.comp-sf-agree-list li { padding: 7px 0; display: flex; justify-content: space-between; align-items: center; font-size: 13px; border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-agree-all { padding: 10px 0; font-weight: 700; border-bottom: 1px solid var(--color-gray-300); }
.comp-sf-paybar { bottom: 0; height: 60px; padding: 6px; background: #fff; border-top: 1px solid var(--color-gray-200); }
.comp-sf-paybar .comp-btn { width: 100%; height: 100%; font-size: 16px; }
.comp-sf-addr-card { border: 1px solid var(--color-gray-200); padding: 12px; margin-bottom: 8px; font-size: 13px; }
.comp-sf-addr-card .comp-sf-acts { display: flex; justify-content: flex-end; gap: 4px; margin-top: 6px; }
.comp-sf-disc-detail { font-size: 12px; color: var(--text-secondary); padding-left: 10px; }

/* ---------- 시안 목록 index ---------- */
.comp-sf-idx { padding: 20px 16px; }
.comp-sf-idx h1 { font-size: 20px; margin-bottom: 6px; }
.comp-sf-idx li { border: 1px solid var(--color-gray-200); padding: 14px; margin-top: 10px; }
.comp-sf-idx li a { font-weight: 700; font-size: 15px; }
.comp-sf-idx li .comp-sf-id { font-size: 12px; color: var(--text-secondary); }
.comp-sf-idx li p { font-size: 13px; color: #555; margin-top: 4px; }
.comp-sf-idx .comp-sf-std { font-size: 13px; color: #555; margin-top: 10px; padding: 10px 12px; background: var(--color-gray-50); border: 1px solid var(--color-gray-200); }
.comp-sf-idx .comp-sf-std code { font-size: 12px; }

/* 할인율 표기 (정상가 옆, 상품 카드·상세·관심상품·최근 본 상품) */
.comp-sf-dc-rate { color: var(--color-error); font-weight: 800; margin-right: 4px; }
.comp-sf-price-org + .comp-sf-dc-rate { margin-left: 2px; font-size: 13px; }
.comp-sf-prd-head .comp-sf-prd-org .comp-sf-dc-rate { font-size: 16px; }
.comp-sf-my-strike + .comp-sf-dc-rate { margin-left: 4px; font-size: 12px; }
.comp-sf-price-org { color: var(--color-gray-400); font-size: 12px; font-weight: 400; margin-right: 4px; }
.comp-sf-prd-head .comp-sf-prd-org { margin-top: 8px; font-size: 14px; color: var(--color-gray-400); }
.comp-sf-prd-head .comp-sf-prd-org + #salePrice { margin-top: 0; }
#tpRows:focus, #optArea:focus { outline: none; }

/* 비밀번호 보기/숨기기 (로그인, data-pw-toggle — shop.js) */
.comp-sf-pw-wrap { position: relative; display: block; }
.comp-sf-mb .comp-input.comp-sf-full + .comp-sf-pw-wrap { margin-top: 6px; }
.comp-sf-pw-wrap > .comp-input { padding-right: 44px; }
.comp-sf-pw-eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: #888; font-size: 16px; line-height: 36px; text-align: center; cursor: pointer; border-radius: 4px; }
.comp-sf-pw-eye:hover { color: #333; }
.comp-sf-pw-eye:focus-visible { outline: 2px solid var(--color-primary, #1a73e8); outline-offset: -2px; }
.comp-sf-pw-eye[aria-pressed="true"] { color: #333; }
/* 엣지·IE 기본 눈 버튼과 겹치지 않게 */
.comp-sf-pw-wrap > input::-ms-reveal, .comp-sf-pw-wrap > input::-ms-clear { display: none; }

/* 상품 상세설명·안내 HTML: 관리자 HTML 에디터(Quill)가 남기는 서식 클래스 (정렬·글자크기·글꼴·들여쓰기) */
.comp-sf-detail-html .ql-align-center { text-align: center; }
.comp-sf-detail-html .ql-align-right { text-align: right; }
.comp-sf-detail-html .ql-align-justify { text-align: justify; }
.comp-sf-detail-html .ql-size-9pt { font-size: 9pt; } .comp-sf-detail-html .ql-size-10pt { font-size: 10pt; }
.comp-sf-detail-html .ql-size-11pt { font-size: 11pt; } .comp-sf-detail-html .ql-size-12pt { font-size: 12pt; }
.comp-sf-detail-html .ql-size-14pt { font-size: 14pt; } .comp-sf-detail-html .ql-size-16pt { font-size: 16pt; }
.comp-sf-detail-html .ql-size-18pt { font-size: 18pt; } .comp-sf-detail-html .ql-size-24pt { font-size: 24pt; }
.comp-sf-detail-html .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.comp-sf-detail-html .ql-font-monospace { font-family: Monaco, 'Courier New', monospace; }
.comp-sf-detail-html .ql-indent-1 { padding-left: 3em; } .comp-sf-detail-html .ql-indent-2 { padding-left: 6em; }
.comp-sf-detail-html .ql-indent-3 { padding-left: 9em; } .comp-sf-detail-html .ql-indent-4 { padding-left: 12em; }
.comp-sf-detail-html iframe.ql-video, .comp-sf-detail-html iframe { display: block; width: 100%; max-width: 800px; height: auto; aspect-ratio: 16 / 9; margin: 0 auto; } /* 에디터 동영상: 기본 300x150 이 작아 16:9 로 */
.comp-sf-detail-html img { max-width: 100%; height: auto; }

/* 상품 이미지 (관리자 상품 등록 이미지 SHP_GDS_IMG): 목록 카드 = 목록 이미지, 상세 갤러리 = 상세 → 추가 이미지 */
.comp-sf-prd-card .comp-sf-thumb { overflow: hidden; }
.comp-sf-prd-card .comp-sf-thumb .comp-sf-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.comp-sf-gallery .comp-sf-slide { overflow: hidden; background: #fff; }
.comp-sf-gallery .comp-sf-gallery-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.comp-sf-zoom-main #zoomImg { display: block; margin: 0 auto; }

/* 디자인 > 배너 관리 이미지 배너 (comp-sf-bn) — 이미지는 자리를 꽉 채우고(가운데 기준 자름) 글자는 그 위에 */
.comp-sf-bn { position: relative; overflow: hidden; }
.comp-sf-bn > .comp-sf-bn-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.comp-sf-visual .comp-sf-slide.comp-sf-bn { background: #5b6370; }
.comp-sf-visual .comp-sf-slide.comp-sf-bn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(transparent, rgba(0,0,0,.35)); pointer-events: none; }
.comp-sf-visual .comp-sf-slide.comp-sf-bn > :not(img) { position: relative; z-index: 1; }
.comp-sf-banner-full.comp-sf-bn { background: #f2f3f5; }
.comp-sf-plan .comp-sf-plan-img.comp-sf-bn { background: #f2f3f5; }
.comp-sf-cate-icons .comp-sf-ico-img.comp-sf-bn { background: #f2f3f5; }
@media (min-width: 1024px) {
  .comp-sf-pc-right .comp-sf-banner.comp-sf-bn { background: #f2f3f5; }
}