/* 쿠팡파트너스 광고 카드 (2026-10-09 · 시험 — 개인 부여 ad.coupang 계정만). 지도 왼쪽 아래(줌 단추 위).
   테마 토큰만 쓴다(라이트·다크 자동). 모듈: sponsor.js · 서버: backend/sponsor.py */
.cps {
  position: fixed; left: 72px; bottom: 56px; z-index: 900; width: 300px;
  background: var(--bg-surface-float, #fff); color: var(--text-primary, #0f172a);
  border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .18); font-size: 13px; line-height: 1.45;
  backdrop-filter: blur(6px); overflow: hidden;
}
/* 전역 button 스타일(width:100% 등)을 끊는다 — 10-04 안전 알림 세로 쪼개짐과 같은 함정 */
.cps button { width: auto; min-width: 0; margin: 0; box-shadow: none; font: inherit; }
.cps-hd { display: flex; align-items: center; gap: 6px; padding: 8px 10px 0 12px; }
.cps-tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  background: var(--bg-sunken, #f8fafc); color: var(--text-secondary, #475569); border: 1px solid var(--border-subtle, #e2e8f0); }
.cps-src { font-size: 11px; color: var(--text-muted, #64748b); }
.cps-sp { flex: 1; }
.cps-ib { border: 0; background: none; color: var(--text-muted, #64748b); cursor: pointer;
  width: 24px; height: 24px; border-radius: 6px; font-size: 14px; line-height: 24px; padding: 0; }
.cps-ib:hover { background: var(--bg-sunken, #f1f5f9); color: var(--text-primary, #0f172a); }
/* 「오늘 그만 ✕」 — 아이콘만으로는 «오늘 하루»가 안 읽혀서 글자로 (2026-10-10) */

/* ① 대가성 문구 — 접힌 곳·툴팁에 숨기지 않는다(공정위 지침) */
.cps-disc { margin: 6px 12px 0; font-size: 11.5px; color: var(--text-secondary, #475569); }

/* ② 상품 한 칸 */
.cps-item { display: flex; gap: 10px; align-items: center; margin: 8px 12px 0; padding: 8px;
  border-radius: 10px; background: var(--bg-sunken, #f8fafc); text-decoration: none; color: inherit;
  border: 1px solid transparent; transition: border-color .15s; }
.cps-item:hover { border-color: var(--accent-cyan, #0284c7); }
.cps-img { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
  background: var(--bg-surface-elevated, #fff); color: var(--text-muted, #64748b); }
.cps-img img { width: 100%; height: 100%; object-fit: contain; }
.cps-img svg { width: 26px; height: 26px; }
.cps-txt { min-width: 0; flex: 1; }
.cps-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cps-why { font-size: 11.5px; color: var(--text-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cps-row { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.cps-price { font-weight: 700; }
.cps-go { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent-cyan, #0284c7); }

/* ③ 순번 점 + 목적 */
.cps-ft { display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px; }
.cps-dots { display: flex; gap: 4px; }
.cps .cps-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-medium, #cbd5e1); border: 0; padding: 0; cursor: pointer; }
.cps .cps-dot.on { background: var(--accent-cyan, #0284c7); width: 14px; border-radius: 3px; }
/* 2026-10-12 운영자 「다른 물건을 사도 되나요? 글자 색은 다른색으로 잘 보이게」 — 회색 → 주황 굵게(파란 「쿠팡에서 보기」와 갈리게) */
.cps .cps-why2 { font-size: 11.5px; font-weight: 700; color: #ea580c; cursor: pointer; border: 0; background: none; padding: 0;
  margin-left: auto; text-decoration: underline dotted; text-underline-offset: 3px; }
.cps .cps-why2:hover { color: #c2410c; }
/* 2026-10-12 피더·베타·관리자 「오늘 닫기 ✕」 — 글자가 들어가 폭을 푼다 */
.cps-ib.cps-day { width: auto; padding: 0 7px; font-size: 11.5px; white-space: nowrap; }

/* ④ 수익 구조 설명 (펼침) */
.cps-more { display: none; margin: 0 12px 10px; padding: 8px 10px; border-radius: 8px; font-size: 12px;
  background: var(--accent-cyan-soft, #e0f2fe); color: var(--text-primary, #0f172a); }
.cps.open .cps-more { display: block; }
.cps-more b { color: var(--accent-cyan, #0284c7); }
.cps-more ul { margin: 4px 0 0; padding-left: 16px; }
.cps-more li { margin: 2px 0; }

/* 접힘 — 알약 한 개 */

/* 폰 — 위쪽(머리 띠 아래) 얇은 띠. 아래는 피더 모집 카드·탭 막대·오른쪽 지도 단추가 차지한다 */
@media (max-width: 640px) {
  .cps { left: 8px; right: 60px; top: 90px; bottom: auto; width: auto; font-size: 12px; }
  .cps-hd { padding: 6px 6px 0 10px; }
  .cps-disc { margin: 4px 10px 0; font-size: 10.5px; line-height: 1.35; }
  .cps-item { margin: 6px 8px 0; padding: 6px; gap: 8px; }
  .cps-img { width: 36px; height: 36px; flex-basis: 36px; }
  .cps-img svg { width: 18px; height: 18px; }
  .cps-why { display: none; }
  .cps-ft { padding: 4px 10px 6px; }
}
/* 2026-10-16 운영자 「모바일 첫화면에 쿠팡 팝업광고는 일단 숨겨 · 처음부터 광고 나오는 건 불편함」 —
   폰에서는 떠 있는 카드를 숨긴다(폭 기준은 모바일 셸 narrow() 와 같은 760px). 카드는 DOM에 남아 셸 홈 「광고 한 줄」이
   상품을 비추고, 「기체 제원」 안 한 줄 광고(.cps-inl)는 그대로다. 다시 보이려면 이 블록을 지운다. */
@media (max-width: 760px) {
  body > #cpSponsor { display: none; }
}

/* 비었을 때(편집 권한자에게만 보인다) */
.cps-empty { margin: 8px 12px 0; padding: 10px; border-radius: 10px; background: var(--bg-sunken, #f8fafc);
  color: var(--text-secondary, #475569); font-size: 12px; }
.cps-test { font-size: 10.5px; font-weight: 700; color: var(--status-warn, #d97706); }

/* 편집 창 — 링크 3~5개 등록 */
.cps-ed-bg { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .45); display: grid; place-items: center; padding: 16px; }
.cps-ed { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 14px; padding: 16px;
  background: var(--bg-surface-elevated, #fff); color: var(--text-primary, #0f172a); font-size: 13px;
  border: 1px solid var(--border-subtle, #e2e8f0); box-shadow: 0 12px 40px rgba(15, 23, 42, .3); }
.cps-ed h3 { margin: 0 0 4px; font-size: 15px; }
.cps-ed p.cps-ed-help { margin: 0 0 10px; font-size: 12px; color: var(--text-secondary, #475569); }
.cps-ed-row { border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.cps-ed-row .full { grid-column: 1 / -1; }
.cps-ed-row label { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--text-secondary, #475569); }
.cps-ed-row input { font: inherit; font-size: 13px; padding: 5px 7px; border-radius: 6px; width: 100%; box-sizing: border-box;
  border: 1px solid var(--border-medium, #cbd5e1); background: var(--bg-sunken, #f8fafc); color: var(--text-primary, #0f172a); }
.cps-ed-hd { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; }
.cps-ed-hd .cps-ed-clk { font-weight: 400; color: var(--text-muted, #64748b); }
.cps-ed-hd button { margin-left: auto; }
.cps-ed-ft { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.cps-ed-ft .cps-ed-msg { flex: 1; font-size: 12px; color: var(--status-danger, #dc2626); }
.cps-ed button { width: auto; min-width: 0; margin: 0; font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-medium, #cbd5e1); background: var(--bg-surface-elevated, #fff); color: var(--text-primary, #0f172a); }
.cps-ed button.pri { background: var(--accent-cyan, #0284c7); border-color: var(--accent-cyan, #0284c7); color: var(--text-inverse, #fff); }
.cps-ed button.sm { padding: 2px 8px; font-size: 11.5px; }
@media (max-width: 640px) { .cps-ed-row { grid-template-columns: 1fr; } }

/* v4 (2026-10-11) 기체 제원 카드 맨 아래 한 줄 광고 — 「오늘 그만」과 무관하게 늘 보인다. 대가성 문구도 함께. */
.cps-inl { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-subtle, #e2e8f0); font-size: 12.5px; line-height: 1.4; }
.cps-inl-hd { display: flex; align-items: center; gap: 6px; }
.cps-inl-a { display: flex; gap: 8px; align-items: center; margin-top: 6px; padding: 6px; border-radius: 8px;
  background: var(--bg-sunken, #f8fafc); text-decoration: none; color: inherit; border: 1px solid transparent; transition: border-color .15s; }
.cps-inl-a:hover { border-color: var(--accent-cyan, #0284c7); }
.cps-inl .cps-img { width: 40px; height: 40px; flex: 0 0 40px; }
.cps-inl .cps-img svg { width: 20px; height: 20px; }
.cps-inl .cps-name { display: block; }
.cps-inl .cps-row { display: flex; }
.cps-inl-disc { margin-top: 4px; font-size: 10.5px; color: var(--text-muted, #64748b); }