@charset "utf-8";
/* ============================================================
   셀러클럽 카드형 게시판 스킨 공통 확장
   (sourcing / channel / product / sellerpro 공용)
   ============================================================ */

/* ---------- 카드 기본 : 썸네일 + 본문 ---------- */
#bo_list .sc-list .ql-card { padding: 0; }
/* 썸네일 박스 : 생성 썸네일 480x300 과 같은 비율 고정 */
#bo_list .sc-list .sc-thumb { position: relative; display: block; overflow: hidden; background: var(--m-bg); aspect-ratio: 480 / 300; }
#bo_list .sc-list .sc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
#bo_list .sc-list .ql-card:hover .sc-thumb img { transform: scale(1.05); }
/* 첨부 이미지가 없을 때 : noimg.png(480x300) 를 잘림 없이 원본 비율로 표시 */
#bo_list .sc-list .sc-thumb-none { background: var(--m-bg); }
#bo_list .sc-list .sc-thumb-none img { object-fit: contain; }
#bo_list .sc-list .ql-card:hover .sc-thumb-none img { transform: none; }
#bo_list .sc-list .sc-thumb-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 20px; background: rgba(15, 23, 42, .78); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; }
#bo_list .sc-list .sc-thumb-rank { position: absolute; right: 10px; top: 10px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; background: var(--m-brand); color: #fff; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
#bo_list .sc-list .sc-body { flex: 1 1 auto; padding: 18px 18px 14px; }
#bo_list .sc-list .ql-subject { margin-bottom: 10px; }
#bo_list .sc-list .ql-subject a { color: inherit; }

/* ---------- 상단 라벨 ---------- */
#bo_list .sc-list .sc-deal { flex: 0 0 auto; padding: 3px 9px; border: 1px solid var(--m-line); border-radius: 20px; background: var(--m-bg); color: var(--m-ink-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
#bo_list .sc-list .sc-badge { flex: 0 0 auto; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 800; white-space: nowrap; }
#bo_list .sc-list .sc-badge-free { background: #dcfce7; color: #15803d; }
#bo_list .sc-list .sc-badge-part { background: #fef3c7; color: #b45309; }
#bo_list .sc-list .sc-badge-paid { background: #e0e7ff; color: #4338ca; }
#bo_list .sc-list .sc-badge-hot { background: #fee2e2; color: #b91c1c; }

/* ---------- 업체 · 채널명 ---------- */
#bo_list .sc-list .sc-vendor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
#bo_list .sc-list .sc-vendor-name { font-size: 14px; font-weight: 800; color: var(--m-ink); }
#bo_list .sc-list .sc-vendor-region { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--m-brand); }

/* ---------- 태그 ---------- */
#bo_list .sc-list .sc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#bo_list .sc-list .sc-tag { padding: 3px 8px; border-radius: 6px; background: var(--m-brand-light); color: var(--m-brand); font-size: 12px; font-weight: 600; }

/* ---------- 수치 요약 (수수료 / 정산 / 마진 등) ---------- */
#bo_list .sc-list .sc-figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0 0 12px; padding: 0; list-style: none; border: 1px solid var(--m-line); border-radius: 10px; overflow: hidden; background: var(--m-line); }
#bo_list .sc-list .sc-figures li { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; background: var(--m-white); }
#bo_list .sc-list .sc-fig-label { font-size: 11px; font-weight: 600; color: var(--m-muted); }
#bo_list .sc-list .sc-fig-value { font-size: 14px; font-weight: 800; color: var(--m-ink); word-break: break-all; }
#bo_list .sc-list .sc-fig-value.is-accent { color: var(--m-brand); }

/* ---------- 가격 / 마진 ---------- */
#bo_list .sc-list .sc-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
#bo_list .sc-list .sc-price-now { font-size: 20px; font-weight: 800; color: var(--m-ink); }
#bo_list .sc-list .sc-price-org { font-size: 13px; color: var(--m-muted); text-decoration: line-through; }
#bo_list .sc-list .sc-margin { padding: 3px 8px; border-radius: 6px; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 800; }
#bo_list .sc-list .sc-margin.is-low { background: #fee2e2; color: #b91c1c; }

/* ---------- 메타 ---------- */
#bo_list .sc-list .sc-meta { margin-bottom: 12px; gap: 5px 12px; }
#bo_list .sc-list .sc-meta li { width: 100%; align-items: flex-start; line-height: 1.5; }
#bo_list .sc-list .sc-meta li i { margin-top: 2px; }

/* ---------- 바로가기 버튼 ---------- */
#bo_list .sc-list .sc-site { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 38px; border: 1px solid var(--m-brand); border-radius: 9px; color: var(--m-brand); font-size: 13px; font-weight: 700; }
#bo_list .sc-list .sc-site:hover { background: var(--m-brand); color: #fff; }

/* ---------- 빈 목록 ---------- */
#bo_list .sc-list .ql-empty { padding: 60px 0; }

/* ---------- 다크 모드 ---------- */
html[data-theme="dark"] #bo_list .sc-list .sc-badge-free { background: rgba(34, 197, 94, .18); color: #4ade80; }
html[data-theme="dark"] #bo_list .sc-list .sc-badge-part { background: rgba(245, 158, 11, .18); color: #fbbf24; }
html[data-theme="dark"] #bo_list .sc-list .sc-badge-paid { background: rgba(99, 102, 241, .2); color: #a5b4fc; }
html[data-theme="dark"] #bo_list .sc-list .sc-badge-hot { background: rgba(239, 68, 68, .18); color: #f87171; }
html[data-theme="dark"] #bo_list .sc-list .sc-margin { background: rgba(34, 197, 94, .18); color: #4ade80; }
html[data-theme="dark"] #bo_list .sc-list .sc-margin.is-low { background: rgba(239, 68, 68, .18); color: #f87171; }
html[data-theme="dark"] #bo_list .sc-list .sc-tag { background: rgba(96, 165, 250, .18); }

/* ============================================================
   읽기 페이지 확장
   ============================================================ */
.quote-view dd a.sc-view-link { display: inline-flex; align-items: center; gap: 6px; color: var(--m-brand); font-weight: 700; word-break: break-all; }
.quote-view dd a.sc-view-link:hover { text-decoration: underline; }

/* 프롬프트 · 샘플 복사 박스 */
.sc-prompt { position: relative; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: var(--m-bg); padding: 16px 18px; margin: 16px 0; }
.sc-prompt-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sc-prompt-h strong { font-size: 15px; font-weight: 800; color: var(--m-ink); }
.sc-prompt-h strong i { color: var(--m-brand); margin-right: 6px; }
.sc-copy-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 1px solid var(--m-brand); border-radius: 8px; background: var(--m-white); color: var(--m-brand); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.sc-copy-btn:hover { background: var(--m-brand); color: #fff; }
.sc-copy-btn.is-done { border-color: #16a34a; background: #16a34a; color: #fff; }
.sc-prompt-body { margin: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.7; font-size: 14px; color: var(--m-ink); font-family: inherit; }

/* 요약 하이라이트 바 */
.sc-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.sc-summary-item { border: 1px solid var(--m-line); border-radius: var(--m-radius-sm); background: var(--m-bg); padding: 14px 16px; text-align: center; }
.sc-summary-item .sc-sm-label { display: block; font-size: 12px; font-weight: 600; color: var(--m-muted); margin-bottom: 5px; }
.sc-summary-item .sc-sm-value { display: block; font-size: 17px; font-weight: 800; color: var(--m-ink); word-break: break-all; }
.sc-summary-item .sc-sm-value.is-accent { color: var(--m-brand); }
@media (max-width: 768px) { .sc-summary { grid-template-columns: repeat(2, 1fr); } }

/* 하단 안내 바 */
.sc-cta-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border: 1px solid var(--m-line); border-radius: var(--m-radius); background: var(--m-bg); padding: 18px 22px; margin: 10px 0 30px; }
.sc-cta-bar .sc-cta-txt { font-size: 15px; color: var(--m-ink-2); }
.sc-cta-bar .sc-cta-txt strong { color: var(--m-brand); font-weight: 800; }
.sc-cta-bar .sc-site { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 20px; border: 0; border-radius: 9px; background: var(--m-brand); color: #fff; font-size: 15px; font-weight: 700; }
.sc-cta-bar .sc-site:hover { filter: brightness(.93); color: #fff; }

/* ---------- 분류 탭 (.cp-region / .cp-cate) — community 스타일 ---------- */
.cp-region,
.cp-cate { margin: 12px 0 16px; }
.cp-region .sr-only,
.cp-cate .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.cp-region .subTabTitle,
.cp-cate .subTabTitle { display: flex; align-items: stretch; border-radius: 12px; background: var(--m-white, #fff); margin-bottom: 8px; overflow: hidden; }
.cp-region .rg-nav,
.cp-cate .rg-nav { display: flex; align-items: center; justify-content: center; color: var(--blue, #ff7a2f); font-size: 16px; text-decoration: none; user-select: none; }
.cp-region .rg-nav:hover,
.cp-cate .rg-nav:hover { background: var(--bg-gray, #f8fafc); }
.cp-region .subTabs,
.cp-cate .subTabs { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 0 4px; cursor: grab; }
.cp-region .subTabs::-webkit-scrollbar,
.cp-cate .subTabs::-webkit-scrollbar { display: none; }
.cp-region .subTabs.is-dragging,
.cp-region .subTabs:active,
.cp-cate .subTabs.is-dragging,
.cp-cate .subTabs:active { cursor: grabbing; }
.cp-region .subTabs a,
.cp-cate .subTabs a { flex: 0 0 auto; position: relative; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--ink-2, #374151); text-decoration: none; white-space: nowrap; line-height: 1.2; }
.cp-region .subTabs a:hover,
.cp-region .subTabs a.on,
.cp-cate .subTabs a:hover,
.cp-cate .subTabs a.on { color: var(--blue, #ff7a2f) !important; }
.cp-region .subTabs a.on:after,
.cp-cate .subTabs a.on:after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--blue, #ff7a2f); }
/* 라이트/다크 모드 탭 강조색 — 추후 조정 */
html[data-theme="light"] .cp-region .subTabs a:hover,
html[data-theme="light"] .cp-region .subTabs a.on,
html[data-theme="light"] .cp-cate .subTabs a:hover,
html[data-theme="light"] .cp-cate .subTabs a.on { color: var(--blue, #ff7a2f) !important; }
html[data-theme="light"] .cp-region .subTabs a.on:after,
html[data-theme="light"] .cp-cate .subTabs a.on:after { background: var(--blue, #ff7a2f); }
html[data-theme="dark"] .cp-region .subTabTitle,
html[data-theme="dark"] .cp-cate .subTabTitle { background: transparent; }
html[data-theme="dark"] .cp-region .subTabs a:hover,
html[data-theme="dark"] .cp-region .subTabs a.on,
html[data-theme="dark"] .cp-cate .subTabs a:hover,
html[data-theme="dark"] .cp-cate .subTabs a.on { color: var(--blue, #ff7a2f) !important; }
html[data-theme="dark"] .cp-region .subTabs a.on:after,
html[data-theme="dark"] .cp-cate .subTabs a.on:after { background: var(--blue, #ff7a2f); }
@media (max-width: 600px) {
  .cp-region .subTabs a,
  .cp-cate .subTabs a { padding: 11px 11px; font-size: 13px; }
}

html[data-theme="dark"] #bo_list .sc-list .sc-thumb-none { background: #111827; }
html[data-theme="dark"] #bo_list .quote-list .ql-subject,
html[data-theme="dark"] #bo_list .sc-list .ql-subject a { color: #f3f4f6; }
html[data-theme="dark"] #bo_list .sc-list .sc-vendor-name,
html[data-theme="dark"] #bo_list .sc-list .sc-fig-value,
html[data-theme="dark"] #bo_list .sc-list .sc-price-now { color: #f3f4f6; }
html[data-theme="dark"] #bo_list .sc-list .sc-tag { background: #3b2416; color: #FF8A4A; }
html[data-theme="dark"] .cp-region .subTabs a,
html[data-theme="dark"] .cp-cate .subTabs a { color: #e5e7eb; }